feat(f6): agregar datos técnicos por clasificación a la ficha

web-v2/src/features/assets/AssetTechnicalDataPanel.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react';
+import { SearchableSelect } from '../../components/SearchableSelect';
+import { Alert, LoadingBlock, errorMessage } from '../../components/Feedback';
+import { Icon } from '../../components/Icon';
+import { getInventoryTechnicalValues, replaceInventoryTechnicalValues } from '../../lib/inventoryStructureApi';
+import type { InventoryFamilyAttribute, InventoryTechnicalValues } from '../../lib/inventoryStructureApi';
+
+function localDateTime(value:unknown){
+  if(typeof value!=='string'||!value)return '';
+  const date=new Date(value); if(Number.isNaN(date.getTime()))return value.slice(0,16);
+  const local=new Date(date.getTime()-date.getTimezoneOffset()*60000); return local.toISOString().slice(0,16);
+}
+function displayValue(definition:InventoryFamilyAttribute,value:unknown){
+  if(value===undefined||value===null||value==='')return 'Sin completar';
+  if(definition.dataType==='BOOLEAN')return value?'Sí':'No';
+  if(definition.dataType==='DATETIME'&&typeof value==='string')return new Date(value).toLocaleString('es-AR');
+  return `${String(value)}${definition.unit?` ${definition.unit}`:''}`;
+}
+
+export function AssetTechnicalDataPanel({assetId,canEdit}:{assetId:string;canEdit:boolean}){
+  const [data,setData]=useState<InventoryTechnicalValues|null>(null);
+  const [values,setValues]=useState<Record<string,unknown>>({});
+  const [loading,setLoading]=useState(true); const [saving,setSaving]=useState(false);
+  const [unsupported,setUnsupported]=useState(false); const [error,setError]=useState(''); const [success,setSuccess]=useState('');
+  useEffect(()=>{
+    let active=true; setLoading(true); setUnsupported(false); setError('');
+    getInventoryTechnicalValues(assetId).then((loaded)=>{if(!active)return;setData(loaded);setValues(Object.fromEntries(loaded.definitions.map((definition)=>{
+      const raw=loaded.values[definition.id]; return [definition.id,definition.dataType==='DATETIME'?localDateTime(raw):raw??''];
+    })))}).catch((requestError)=>{if(!active)return;const message=errorMessage(requestError);if(message.includes('no tiene clasificación técnica'))setUnsupported(true);else setError(message);}).finally(()=>active&&setLoading(false));
+    return()=>{active=false};
+  },[assetId]);
+  if(loading)return <div className="form-section"><LoadingBlock label="Cargando datos técnicos…" /></div>;
+  if(unsupported)return null;
+  if(error&&!data)return <div className="form-section"><Alert>{error}</Alert></div>;
+  if(!data)return null;
+  const activeDefinitions=data.definitions.filter((item)=>item.isActive);
+  const save=async()=>{
+    setSaving(true);setError('');setSuccess('');
+    try{
+      const normalized:Record<string,unknown>={};
+      for(const definition of activeDefinitions){const raw=values[definition.id];if(raw===''||raw===null||raw===undefined)continue;
+        if(definition.dataType==='NUMBER')normalized[definition.id]=Number(raw);
+        else if(definition.dataType==='BOOLEAN')normalized[definition.id]=Boolean(raw);
+        else if(definition.dataType==='DATETIME')normalized[definition.id]=new Date(String(raw)).toISOString();
+        else normalized[definition.id]=raw;
+      }
+      const saved=await replaceInventoryTechnicalValues(assetId,normalized);setData(saved);setSuccess('Datos técnicos guardados.');
+    }catch(requestError){setError(errorMessage(requestError));}finally{setSaving(false)}
+  };
+  return <div className="form-section">
+    <div><h2>Información técnica · {data.family.name}</h2><p className="section-copy">Estos campos pertenecen a la clasificación concreta del elemento, no al nivel genérico.</p></div>
+    {error&&<Alert>{error}</Alert>}{success&&<Alert type="success">{success}</Alert>}
+    {activeDefinitions.length===0?<div className="inline-empty">Esta clasificación todavía no tiene campos técnicos configurados.</div>:canEdit?<div className="dynamic-attributes">{activeDefinitions.map((definition)=>{
+      const value=values[definition.id];const label=<span>{definition.name}{definition.unit?` (${definition.unit})`:''}{definition.isRequired?<em>obligatorio</em>:<em>opcional</em>}</span>;
+      if(definition.dataType==='BOOLEAN')return <label className="check-row attribute-check" key={definition.id}><input type="checkbox" checked={Boolean(value)} onChange={(event)=>setValues((current)=>({...current,[definition.id]:event.target.checked}))}/><span><strong>{definition.name}</strong><small>{definition.code}</small></span></label>;
+      if(definition.dataType==='SELECT')return <label className="field" key={definition.id}>{label}<SearchableSelect value={String(value??'')} onChange={(event)=>setValues((current)=>({...current,[definition.id]:event.target.value}))} required={definition.isRequired}><option value="">Seleccionar…</option>{definition.options?.map((option)=><option key={option} value={option}>{option}</option>)}</SearchableSelect></label>;
+      const inputType=definition.dataType==='NUMBER'?'number':definition.dataType==='DATE'?'date':definition.dataType==='DATETIME'?'datetime-local':'text';
+      return <label className="field" key={definition.id}>{label}<input type={inputType} value={String(value??'')} step={definition.dataType==='NUMBER'?'any':undefined} required={definition.isRequired} onChange={(event)=>setValues((current)=>({...current,[definition.id]:event.target.value}))}/></label>;
+    })}</div>:<div className="attribute-list">{activeDefinitions.map((definition)=><div className="attribute-card" key={definition.id}><span className="asset-symbol"><Icon name="layers" size={15}/></span><span><strong>{definition.name}</strong><small>{definition.code}</small></span><span>{displayValue(definition,data.values[definition.id])}</span></div>)}</div>}
+    {canEdit&&activeDefinitions.length>0&&<div className="form-actions"><button type="button" className="button primary" disabled={saving} onClick={()=>void save()}><Icon name="check" />{saving?'Guardando…':'Guardar datos técnicos'}</button></div>}
+  </div>;
+}