feat(f6.8): harden offline field flow and act documents

web-v2/src/features/inspections/InspectionActMediaPanel.tsx

@@ -0,0 +1,149 @@
+import { useEffect, useState } from 'react';
+import { Alert, EmptyState, LoadingBlock, errorMessage } from '../../components/Feedback';
+import { Icon } from '../../components/Icon';
+import {
+  getAssetMediaBlob,
+  getInspectionFindingEvidenceBlob,
+  listInspectionActFieldMedia,
+  listInspectionFindingEvidence,
+  listInspectionFindings,
+} from '../../lib/api';
+import type { InspectionActFieldMedia, InspectionFindingEvidence } from '../../lib/api';
+import { formatDate } from '../../lib/format';
+
+type ActPhoto = {
+  findingId: string;
+  findingCode: string;
+  findingTitle: string;
+  evidence: InspectionFindingEvidence;
+};
+
+type AssetPhoto = InspectionActFieldMedia;
+
+function PhotoThumb({ photo }: { photo: ActPhoto }) {
+  const [url, setUrl] = useState('');
+
+  useEffect(() => {
+    let active = true;
+    let objectUrl = '';
+    getInspectionFindingEvidenceBlob(photo.evidence.id)
+      .then((blob) => {
+        if (!active) return;
+        objectUrl = URL.createObjectURL(blob);
+        setUrl(objectUrl);
+      })
+      .catch(() => undefined);
+    return () => {
+      active = false;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [photo.evidence.id]);
+
+  return <article className="act-photo-card">
+    <button
+      type="button"
+      className="act-photo-preview"
+      onClick={() => url && window.open(url, '_blank', 'noopener,noreferrer')}
+      aria-label={`Ver foto ${photo.findingCode}`}
+    >
+      {url
+        ? <img src={url} alt={photo.evidence.title || `${photo.findingCode} · ${photo.findingTitle}`} />
+        : <span className="media-preview-loading"><span className="spinner" /></span>}
+    </button>
+    <div className="act-photo-copy">
+      <span className="eyebrow">{photo.findingCode}</span>
+      <strong>{photo.findingTitle}</strong>
+      <small>{formatDate(photo.evidence.capturedAt || photo.evidence.createdAt)}</small>
+      {photo.evidence.latitude != null && photo.evidence.longitude != null && <small>
+        GPS {photo.evidence.latitude.toFixed(6)}, {photo.evidence.longitude.toFixed(6)}
+      </small>}
+    </div>
+  </article>;
+}
+
+function AssetPhotoThumb({ photo }: { photo: AssetPhoto }) {
+  const [url, setUrl] = useState('');
+
+  useEffect(() => {
+    let active = true;
+    let objectUrl = '';
+    getAssetMediaBlob(photo.id)
+      .then((blob) => {
+        if (!active) return;
+        objectUrl = URL.createObjectURL(blob);
+        setUrl(objectUrl);
+      })
+      .catch(() => undefined);
+    return () => {
+      active = false;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [photo.id]);
+
+  return <article className="act-photo-card">
+    <button type="button" className="act-photo-preview" onClick={() => url && window.open(url, '_blank', 'noopener,noreferrer')} aria-label={`Ver foto ${photo.assetCode}`}>
+      {url ? <img src={url} alt={photo.title || photo.assetName} /> : <span className="media-preview-loading"><span className="spinner" /></span>}
+    </button>
+    <div className="act-photo-copy">
+      <span className="eyebrow">INVENTARIO · {photo.assetCode}</span>
+      <strong>{photo.assetName}</strong>
+      <small>{formatDate(photo.fieldCapturedAt || photo.capturedAt || photo.createdAt)}</small>
+      {photo.latitude != null && photo.longitude != null && <small>GPS {photo.latitude.toFixed(6)}, {photo.longitude.toFixed(6)}</small>}
+    </div>
+  </article>;
+}
+
+export function InspectionActMediaPanel({ actId }: { actId: string }) {
+  const [photos, setPhotos] = useState<ActPhoto[]>([]);
+  const [assetPhotos, setAssetPhotos] = useState<AssetPhoto[]>([]);
+  const [findingCount, setFindingCount] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    setError('');
+    Promise.all([
+      listInspectionFindings(actId),
+      listInspectionActFieldMedia(actId).catch(() => []),
+    ])
+      .then(async ([findings, fieldMedia]) => {
+        const evidenceByFinding = await Promise.all(
+          findings.map(async (finding) => ({
+            finding,
+            evidence: await listInspectionFindingEvidence(finding.id),
+          })),
+        );
+        if (!active) return;
+        setFindingCount(findings.length);
+        setPhotos(evidenceByFinding.flatMap(({ finding, evidence }) =>
+          evidence.filter((item) => item.kind === 'PHOTO').map((item) => ({
+            findingId: finding.id, findingCode: finding.code, findingTitle: finding.title, evidence: item,
+          })),
+        ));
+        setAssetPhotos(fieldMedia.filter((item) => item.kind === 'PHOTO'));
+      })
+      .catch((requestError) => active && setError(errorMessage(requestError)))
+      .finally(() => active && setLoading(false));
+    return () => { active = false; };
+  }, [actId]);
+
+  return <section className="panel act-media-panel">
+    <div className="panel-heading">
+      <div>
+        <span className="eyebrow">REGISTRO DE CAMPO</span>
+        <h2>Fotos y Hallazgos</h2>
+        <p className="section-copy">Las fotografías del Acta se muestran directamente, vinculadas al Hallazgo que documentan.</p>
+      </div>
+      <span className="count-pill">{photos.length + assetPhotos.length} foto{photos.length + assetPhotos.length === 1 ? '' : 's'} · {findingCount} hallazgo{findingCount === 1 ? '' : 's'}</span>
+    </div>
+    {error && <Alert>{error}</Alert>}
+    {loading ? <LoadingBlock label="Cargando registro fotográfico…" /> : <>
+      {photos.length === 0 && assetPhotos.length === 0 && <EmptyState title="Sin fotografías" text="Esta Acta todavía no tiene fotografías sincronizadas." />}
+      {photos.length > 0 && <div className="act-media-group"><div className="subsection-heading"><div><span className="eyebrow">HALLAZGOS</span><h4>Evidencia fotográfica</h4></div><span>{photos.length}</span></div><div className="act-photo-grid">{photos.map((photo) => <PhotoThumb key={photo.evidence.id} photo={photo} />)}</div></div>}
+      {assetPhotos.length > 0 && <div className="act-media-group"><div className="subsection-heading"><div><span className="eyebrow">INVENTARIO DE LA INSPECCIÓN</span><h4>Fotos tomadas durante esta inspección</h4></div><span>{assetPhotos.length}</span></div><div className="act-photo-grid">{assetPhotos.map((photo) => <AssetPhotoThumb key={photo.id} photo={photo} />)}</div></div>}
+    </>}
+    {(photos.length > 0 || assetPhotos.length > 0) && <div className="act-media-footnote"><Icon name="camera" /><span>Seleccioná una foto para verla a tamaño completo.</span></div>}
+  </section>;
+}