From 77e56b7837d738204e853aea8e4610142cfc1de4 Mon Sep 17 00:00:00 2001
From: Ryan Moon <moonryan2009@gmail.com>
Date: Sun, 29 Mar 2026 10:55:16 -0500
Subject: [PATCH] Make photos and documents clickable, show PDFs with file icon

Photos open in new tab on click. PDFs display as a file icon with
filename instead of broken image. Both images and PDFs are clickable
to view full size in a new browser tab.
---
 .../src/components/repairs/ticket-photos.tsx  | 55 +++++++++++++------
 1 file changed, 38 insertions(+), 17 deletions(-)

diff --git a/packages/admin/src/components/repairs/ticket-photos.tsx b/packages/admin/src/components/repairs/ticket-photos.tsx
index 1e2757c..b529a79 100644
--- a/packages/admin/src/components/repairs/ticket-photos.tsx
+++ b/packages/admin/src/components/repairs/ticket-photos.tsx
@@ -4,7 +4,7 @@ import { queryOptions } from '@tanstack/react-query'
 import { api } from '@/lib/api-client'
 import { useAuthStore } from '@/stores/auth.store'
 import { Button } from '@/components/ui/button'
-import { ImageIcon, Plus, Trash2 } from 'lucide-react'
+import { FileText, ImageIcon, Plus, Trash2 } from 'lucide-react'
 import { toast } from 'sonner'
 
 interface FileRecord {
@@ -140,22 +140,43 @@ function PhotoSection({
         <p className="text-xs text-muted-foreground py-2">No photos</p>
       ) : (
         <div className="flex flex-wrap gap-2">
-          {photos.map((photo) => (
-            <div key={photo.id} className="relative group">
-              <img
-                src={`/v1/files/serve/${photo.path}`}
-                alt={photo.filename}
-                className="h-20 w-20 object-cover rounded-md border"
-              />
-              <button
-                type="button"
-                className="absolute -top-1.5 -right-1.5 h-5 w-5 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
-                onClick={() => deleteMutation.mutate(photo.id)}
-              >
-                <Trash2 className="h-3 w-3" />
-              </button>
-            </div>
-          ))}
+          {photos.map((photo) => {
+            const isPdf = photo.filename?.endsWith('.pdf') || photo.path?.endsWith('.pdf')
+            return (
+              <div key={photo.id} className="relative group">
+                {isPdf ? (
+                  <a
+                    href={`/v1/files/serve/${photo.path}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="h-20 w-20 rounded-md border flex flex-col items-center justify-center bg-muted hover:bg-muted/80 transition-colors"
+                  >
+                    <FileText className="h-6 w-6 text-muted-foreground" />
+                    <span className="text-[9px] text-muted-foreground mt-1 px-1 truncate max-w-full">{photo.filename}</span>
+                  </a>
+                ) : (
+                  <a
+                    href={`/v1/files/serve/${photo.path}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <img
+                      src={`/v1/files/serve/${photo.path}`}
+                      alt={photo.filename}
+                      className="h-20 w-20 object-cover rounded-md border cursor-pointer hover:opacity-80 transition-opacity"
+                    />
+                  </a>
+                )}
+                <button
+                  type="button"
+                  className="absolute -top-1.5 -right-1.5 h-5 w-5 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                  onClick={() => deleteMutation.mutate(photo.id)}
+                >
+                  <Trash2 className="h-3 w-3" />
+                </button>
+              </div>
+            )
+          })}
         </div>
       )}