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.

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,13 +140,33 @@ function PhotoSection({
         <p className="text-xs text-muted-foreground py-2">No photos</p>
       ) : (
         <div className="flex flex-wrap gap-2">
-          {photos.map((photo) => (
+          {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"
+                      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"
@@ -155,7 +175,8 @@ function PhotoSection({
                   <Trash2 className="h-3 w-3" />
                 </button>
               </div>
-          ))}
+            )
+          })}
         </div>
       )}