fix and update

apps/frontend/app/data/page.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { Car, ChevronRight, FileKey2, FileText, Loader2, Mail, Phone, Trash2, UserRound } from 'lucide-react';
 import { AddressQuickSection } from '@/components/addresses/address-quick-section';
 import { DocumentFormDialog } from '@/components/documents/document-form-dialog';
+import { DocumentPhotosInline } from '@/components/documents/document-photo-gallery';
 import { ActionTile } from '@/components/id/action-tile';
 import { useAuth } from '@/components/id/auth-provider';
 import { IdShell } from '@/components/id/shell';
@@ -19,6 +20,8 @@ import { useRequireAuth } from '@/hooks/use-require-auth';
 import {
   getDocumentType,
   indexDocumentsByType,
+  parseDocumentPhotos,
+  parseMetadata,
   type DocumentTypeCode
 } from '@/lib/document-catalog';
 import { apiFetch, getApiErrorMessage, cancelAccountDeletion, fetchAccountDeletionStatus, requestAccountDeletion, type AccountDeletionStatus, UserDocument, UserProfileResponse } from '@/lib/api';
@@ -320,14 +323,21 @@ export default function DataPage() {
           ) : (
             documents.map((document) => {
               const config = getDocumentType(document.type);
+              const photoKeys = parseDocumentPhotos(parseMetadata(document.metadataJson));
               return (
-                <Row
-                  key={document.id}
-                  icon={FileText}
-                  title={config?.label ?? document.type}
-                  text={document.number}
-                  onClick={() => openDocument(document.type as DocumentTypeCode)}
-                />
+                <div key={document.id}>
+                  <Row
+                    icon={FileText}
+                    title={config?.label ?? document.type}
+                    text={document.number}
+                    onClick={() => openDocument(document.type as DocumentTypeCode)}
+                  />
+                  {photoKeys.length > 0 && userId && token ? (
+                    <div className="border-b border-[#eceef4] px-1 pb-4">
+                      <DocumentPhotosInline userId={userId} token={token} storageKeys={photoKeys} />
+                    </div>
+                  ) : null}
+                </div>
               );
             })
           )}

apps/frontend/app/documents/page.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { ChevronRight, Plus } from 'lucide-react';
 import { DocumentFormDialog } from '@/components/documents/document-form-dialog';
+import { DocumentPhotosInline } from '@/components/documents/document-photo-gallery';
 import { useAuth } from '@/components/id/auth-provider';
 import { IdShell } from '@/components/id/shell';
 import { useToast } from '@/components/id/toast-provider';
@@ -11,6 +12,8 @@ import {
   DOCUMENT_CATEGORIES,
   DOCUMENT_TYPES,
   getDocumentType,
+  parseDocumentPhotos,
+  parseMetadata,
   QUICK_DOCUMENT_TYPES,
   indexDocumentsByType,
   type DocumentTypeCode
@@ -93,22 +96,29 @@ export default function DocumentsPage() {
             {DOCUMENT_TYPES.filter((item) => item.category === category.id).map((item) => {
               const Icon = item.icon;
               const existing = documentsByType.get(item.type);
+              const photoKeys = existing ? parseDocumentPhotos(parseMetadata(existing.metadataJson)) : [];
               return (
-                <button
-                  key={item.type}
-                  type="button"
-                  onClick={() => openCreate(item.type)}
-                  className="flex w-full items-center gap-4 border-b border-white/70 px-4 py-4 text-left last:border-b-0 hover:bg-white/60"
-                >
-                  <div className={cn('flex h-11 w-11 items-center justify-center rounded-2xl', item.accent)}>
-                    <Icon className="h-5 w-5" />
-                  </div>
-                  <div className="min-w-0 flex-1">
-                    <div className="font-medium">{item.label}</div>
-                    {existing ? <div className="truncate text-sm text-[#667085]">{existing.number}</div> : null}
-                  </div>
-                  {existing ? <ChevronRight className="h-5 w-5 text-[#a8adbc]" /> : <Plus className="h-5 w-5 text-[#a8adbc]" />}
-                </button>
+                <div key={item.type} className="border-b border-white/70 last:border-b-0">
+                  <button
+                    type="button"
+                    onClick={() => openCreate(item.type)}
+                    className="flex w-full items-center gap-4 px-4 py-4 text-left hover:bg-white/60"
+                  >
+                    <div className={cn('flex h-11 w-11 items-center justify-center rounded-2xl', item.accent)}>
+                      <Icon className="h-5 w-5" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <div className="font-medium">{item.label}</div>
+                      {existing ? <div className="truncate text-sm text-[#667085]">{existing.number}</div> : null}
+                    </div>
+                    {existing ? <ChevronRight className="h-5 w-5 text-[#a8adbc]" /> : <Plus className="h-5 w-5 text-[#a8adbc]" />}
+                  </button>
+                  {existing && photoKeys.length > 0 && user && token ? (
+                    <div className="px-4 pb-4">
+                      <DocumentPhotosInline userId={user.id} token={token} storageKeys={photoKeys} />
+                    </div>
+                  ) : null}
+                </div>
               );
             })}
           </div>