From 7c3eaeb5a3fa4d444a7f32cc24936d9250981b36 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Sat, 17 Jan 2026 20:56:57 -0600
Subject: [PATCH] fix: rename Open to View Details and hide empty Details
 section (refs #43)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rename "Open" button to "View Details" on desktop and mobile document lists
- Add hasDisplayableMetadata helper to check if document has metadata to display
- Conditionally render Details section only when metadata exists
- Prevents showing empty "Details" header for documents without metadata

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../mobile/DocumentsMobileScreen.tsx          |  2 +-
 .../documents/pages/DocumentDetailPage.tsx    | 33 +++++++++++++++----
 .../documents/pages/DocumentsPage.tsx         |  2 +-
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/frontend/src/features/documents/mobile/DocumentsMobileScreen.tsx b/frontend/src/features/documents/mobile/DocumentsMobileScreen.tsx
index 5924465..56040e8 100644
--- a/frontend/src/features/documents/mobile/DocumentsMobileScreen.tsx
+++ b/frontend/src/features/documents/mobile/DocumentsMobileScreen.tsx
@@ -200,7 +200,7 @@ export const DocumentsMobileScreen: React.FC = () => {
                     </button>
                   </div>
                   <div className="flex gap-2 items-center flex-wrap">
-                    <Button onClick={() => navigate(`/garage/documents/${doc.id}`)}>Open</Button>
+                    <Button onClick={() => navigate(`/garage/documents/${doc.id}`)}>View Details</Button>
                     <Button onClick={() => triggerUpload(doc.id)}>Upload</Button>
                     {upload.isPending && currentId === doc.id && (
                       <span className="text-xs text-slate-500">{upload.progress}%</span>
diff --git a/frontend/src/features/documents/pages/DocumentDetailPage.tsx b/frontend/src/features/documents/pages/DocumentDetailPage.tsx
index ce78f40..7cf4d5a 100644
--- a/frontend/src/features/documents/pages/DocumentDetailPage.tsx
+++ b/frontend/src/features/documents/pages/DocumentDetailPage.tsx
@@ -27,6 +27,25 @@ export const DocumentDetailPage: React.FC = () => {
 
   const vehiclesMap = useMemo(() => new Map(vehicles?.map(v => [v.id, v]) || []), [vehicles]);
 
+  // Check if document has displayable metadata
+  const hasDisplayableMetadata = useMemo(() => {
+    if (!doc) return false;
+    const details = doc.details || {};
+
+    if (doc.documentType === 'insurance') {
+      return !!(doc.expirationDate || details.policyNumber || details.insuranceCompany ||
+        doc.issuedDate || details.bodilyInjuryPerson || details.bodilyInjuryIncident ||
+        details.propertyDamage || details.premium);
+    }
+    if (doc.documentType === 'registration') {
+      return !!(doc.expirationDate || details.licensePlate || details.cost);
+    }
+    if (doc.documentType === 'manual') {
+      return !!(doc.issuedDate || doc.notes);
+    }
+    return false;
+  }, [doc]);
+
   const handleDownload = async () => {
     if (!id) return;
     const blob = await documentsApi.download(id);
@@ -167,7 +186,7 @@ export const DocumentDetailPage: React.FC = () => {
                 {getVehicleLabel(vehicle)}
               </button>
             </div>
-            <DocumentCardMetadata doc={doc} variant="mobile" />
+            {hasDisplayableMetadata && <DocumentCardMetadata doc={doc} variant="mobile" />}
           </div>
         </Card>
 
@@ -262,11 +281,13 @@ export const DocumentDetailPage: React.FC = () => {
                 </div>
               )}
 
-              {/* Type-specific Metadata */}
-              <div>
-                <div className="text-sm text-slate-500 dark:text-titanio mb-2">Details</div>
-                <DocumentCardMetadata doc={doc} variant="detail" />
-              </div>
+              {/* Type-specific Metadata - only show if there's data */}
+              {hasDisplayableMetadata && (
+                <div>
+                  <div className="text-sm text-slate-500 dark:text-titanio mb-2">Details</div>
+                  <DocumentCardMetadata doc={doc} variant="detail" />
+                </div>
+              )}
 
               {/* Actions */}
               <div className="pt-2 border-t border-slate-200 dark:border-silverstone">
diff --git a/frontend/src/features/documents/pages/DocumentsPage.tsx b/frontend/src/features/documents/pages/DocumentsPage.tsx
index fad99ae..f45464c 100644
--- a/frontend/src/features/documents/pages/DocumentsPage.tsx
+++ b/frontend/src/features/documents/pages/DocumentsPage.tsx
@@ -158,7 +158,7 @@ export const DocumentsPage: React.FC = () => {
                     </div>
                   )}
                   <div className="flex gap-2 pt-2">
-                    <Button onClick={() => navigate(`/garage/documents/${doc.id}`)}>Open</Button>
+                    <Button onClick={() => navigate(`/garage/documents/${doc.id}`)}>View Details</Button>
                     <Button variant="danger" onClick={() => removeDoc.mutate(doc.id)}>Delete</Button>
                   </div>
                 </div>