Restructure ticket detail into tabs, add documents section

Ticket detail page now uses tabs (Details, Line Items, Notes, Photos &
Docs) instead of a long scrolling page. Photos section gains a Documents
category for uploading signed approvals, quotes, and receipts (accepts
PDFs). PDF generation button added to header (stub for now).

packages/admin/src/routes/_authenticated/repairs/$ticketId.tsx

@@ -20,7 +20,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
-import { ArrowLeft, Plus, Trash2, RotateCcw, Save } from 'lucide-react'
+import { ArrowLeft, Plus, Trash2, RotateCcw, Save, FileText, Search } from 'lucide-react'
 import { toast } from 'sonner'
 import { useAuthStore } from '@/stores/auth.store'
 import type { RepairLineItem } from '@/types/repair'
@@ -52,11 +52,21 @@ const STATUS_LABELS: Record<string, string> = {
 
 const STATUS_FLOW = ['in_transit', 'intake', 'diagnosing', 'pending_approval', 'approved', 'in_progress', 'ready', 'picked_up']
 
+const TABS = [
+  { key: 'details', label: 'Details' },
+  { key: 'line-items', label: 'Line Items' },
+  { key: 'notes', label: 'Notes' },
+  { key: 'files', label: 'Photos & Docs' },
+] as const
+
+type TabKey = typeof TABS[number]['key']
+
 function RepairTicketDetailPage() {
   const { ticketId } = useParams({ from: '/_authenticated/repairs/$ticketId' })
   const navigate = useNavigate()
   const queryClient = useQueryClient()
   const hasPermission = useAuthStore((s) => s.hasPermission)
+  const [activeTab, setActiveTab] = useState<TabKey>('details')
   const [addItemOpen, setAddItemOpen] = useState(false)
   const [editing, setEditing] = useState(false)
   const { params, setPage, setSort } = usePagination()
@@ -64,7 +74,6 @@ function RepairTicketDetailPage() {
   const { data: ticket, isLoading } = useQuery(repairTicketDetailOptions(ticketId))
   const { data: lineItemsData, isLoading: itemsLoading } = useQuery(repairLineItemListOptions(ticketId, params))
 
-  // Edit form state
   const [editFields, setEditFields] = useState<Record<string, string>>({})
 
   const statusMutation = useMutation({
@@ -131,11 +140,7 @@ function RepairTicketDetailPage() {
     if (editFields.technicianNotes !== (ticket!.technicianNotes ?? '')) data.technicianNotes = editFields.technicianNotes || undefined
     if (editFields.estimatedCost !== (ticket!.estimatedCost ?? '')) data.estimatedCost = editFields.estimatedCost ? parseFloat(editFields.estimatedCost) : undefined
     if (editFields.actualCost !== (ticket!.actualCost ?? '')) data.actualCost = editFields.actualCost ? parseFloat(editFields.actualCost) : undefined
-
-    if (Object.keys(data).length === 0) {
-      setEditing(false)
-      return
-    }
+    if (Object.keys(data).length === 0) { setEditing(false); return }
     updateMutation.mutate(data)
   }
 
@@ -165,7 +170,7 @@ function RepairTicketDetailPage() {
   ]
 
   return (
-    <div className="space-y-6 max-w-4xl">
+    <div className="space-y-4 max-w-5xl">
       {/* Header */}
       <div className="flex items-center gap-3">
         <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/repairs', search: {} as any })}>
@@ -173,13 +178,16 @@ function RepairTicketDetailPage() {
         </Button>
         <div className="flex-1">
           <h1 className="text-2xl font-bold">Ticket #{ticket.ticketNumber}</h1>
-          <p className="text-sm text-muted-foreground">{ticket.customerName}</p>
+          <p className="text-sm text-muted-foreground">{ticket.customerName} — {ticket.instrumentDescription ?? 'No instrument'}</p>
         </div>
+        <Button variant="outline" size="sm" onClick={() => toast.info('PDF generation coming soon')}>
+          <FileText className="mr-2 h-4 w-4" />PDF
+        </Button>
       </div>
 
       {/* Status Progress Bar */}
       <Card>
-        <CardContent className="pt-6">
+        <CardContent className="pt-6 pb-4">
           <StatusProgress
             currentStatus={ticket.status}
             onStatusClick={hasPermission('repairs.edit') && !isTerminal ? handleStatusClick : undefined}
@@ -188,186 +196,183 @@ function RepairTicketDetailPage() {
       </Card>
 
       {/* Status Actions */}
-      {hasPermission('repairs.edit') && !isTerminal && (
-        <div className="flex gap-2">
-          {nextStatus && (
-            <Button onClick={() => statusMutation.mutate(nextStatus)} disabled={statusMutation.isPending}>
-              Move to {STATUS_LABELS[nextStatus]}
-            </Button>
-          )}
-          {ticket.status === 'in_progress' && (
-            <Button variant="secondary" onClick={() => statusMutation.mutate('pending_parts')} disabled={statusMutation.isPending}>
-              Pending Parts
-            </Button>
-          )}
-          {ticket.status === 'pending_parts' && (
-            <Button variant="secondary" onClick={() => statusMutation.mutate('in_progress')} disabled={statusMutation.isPending}>
-              Parts Received
-            </Button>
-          )}
-          {hasPermission('repairs.admin') && (
-            <Button variant="destructive" onClick={() => statusMutation.mutate('cancelled')} disabled={statusMutation.isPending}>
-              Cancel
-            </Button>
-          )}
-        </div>
-      )}
-
-      {/* Reopen for cancelled tickets */}
-      {ticket.status === 'cancelled' && hasPermission('repairs.admin') && (
-        <Button variant="outline" onClick={() => statusMutation.mutate('intake')} disabled={statusMutation.isPending}>
-          <RotateCcw className="mr-2 h-4 w-4" />
-          Reopen Ticket
-        </Button>
-      )}
-
-      {/* Ticket Details — View or Edit */}
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle className="text-lg">Details</CardTitle>
-          {hasPermission('repairs.edit') && !editing && (
-            <Button variant="outline" size="sm" onClick={startEdit}>Edit</Button>
-          )}
-          {editing && (
-            <div className="flex gap-2">
-              <Button size="sm" onClick={saveEdit} disabled={updateMutation.isPending}>
-                <Save className="mr-1 h-3 w-3" />{updateMutation.isPending ? 'Saving...' : 'Save'}
+      <div className="flex gap-2 flex-wrap">
+        {hasPermission('repairs.edit') && !isTerminal && (
+          <>
+            {nextStatus && (
+              <Button onClick={() => statusMutation.mutate(nextStatus)} disabled={statusMutation.isPending}>
+                Move to {STATUS_LABELS[nextStatus]}
               </Button>
-              <Button variant="ghost" size="sm" onClick={() => setEditing(false)}>Cancel</Button>
-            </div>
-          )}
-        </CardHeader>
-        <CardContent>
-          {editing ? (
-            <div className="space-y-4">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label>Customer Name</Label>
-                  <Input value={editFields.customerName} onChange={(e) => setEditFields((p) => ({ ...p, customerName: e.target.value }))} />
-                </div>
-                <div className="space-y-2">
-                  <Label>Phone</Label>
-                  <Input value={editFields.customerPhone} onChange={(e) => setEditFields((p) => ({ ...p, customerPhone: e.target.value }))} />
-                </div>
+            )}
+            {ticket.status === 'in_progress' && (
+              <Button variant="secondary" onClick={() => statusMutation.mutate('pending_parts')} disabled={statusMutation.isPending}>
+                Pending Parts
+              </Button>
+            )}
+            {ticket.status === 'pending_parts' && (
+              <Button variant="secondary" onClick={() => statusMutation.mutate('in_progress')} disabled={statusMutation.isPending}>
+                Parts Received
+              </Button>
+            )}
+            {hasPermission('repairs.admin') && (
+              <Button variant="destructive" onClick={() => statusMutation.mutate('cancelled')} disabled={statusMutation.isPending}>
+                Cancel
+              </Button>
+            )}
+          </>
+        )}
+        {ticket.status === 'cancelled' && hasPermission('repairs.admin') && (
+          <Button variant="outline" onClick={() => statusMutation.mutate('intake')} disabled={statusMutation.isPending}>
+            <RotateCcw className="mr-2 h-4 w-4" />Reopen
+          </Button>
+        )}
+      </div>
+
+      {/* Tabs */}
+      <div className="border-b">
+        <div className="flex gap-1">
+          {TABS.map((tab) => (
+            <button
+              key={tab.key}
+              type="button"
+              onClick={() => setActiveTab(tab.key)}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === tab.key
+                  ? 'border-primary text-primary'
+                  : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      {activeTab === 'details' && (
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle className="text-lg">Ticket Details</CardTitle>
+            {hasPermission('repairs.edit') && !editing && (
+              <Button variant="outline" size="sm" onClick={startEdit}>Edit</Button>
+            )}
+            {editing && (
+              <div className="flex gap-2">
+                <Button size="sm" onClick={saveEdit} disabled={updateMutation.isPending}>
+                  <Save className="mr-1 h-3 w-3" />{updateMutation.isPending ? 'Saving...' : 'Save'}
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => setEditing(false)}>Cancel</Button>
               </div>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label>Instrument</Label>
-                  <Input value={editFields.instrumentDescription} onChange={(e) => setEditFields((p) => ({ ...p, instrumentDescription: e.target.value }))} />
+            )}
+          </CardHeader>
+          <CardContent>
+            {editing ? (
+              <div className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="space-y-2"><Label>Customer Name</Label><Input value={editFields.customerName} onChange={(e) => setEditFields((p) => ({ ...p, customerName: e.target.value }))} /></div>
+                  <div className="space-y-2"><Label>Phone</Label><Input value={editFields.customerPhone} onChange={(e) => setEditFields((p) => ({ ...p, customerPhone: e.target.value }))} /></div>
                 </div>
-                <div className="space-y-2">
-                  <Label>Serial Number</Label>
-                  <Input value={editFields.serialNumber} onChange={(e) => setEditFields((p) => ({ ...p, serialNumber: e.target.value }))} />
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="space-y-2"><Label>Instrument</Label><Input value={editFields.instrumentDescription} onChange={(e) => setEditFields((p) => ({ ...p, instrumentDescription: e.target.value }))} /></div>
+                  <div className="space-y-2"><Label>Serial Number</Label><Input value={editFields.serialNumber} onChange={(e) => setEditFields((p) => ({ ...p, serialNumber: e.target.value }))} /></div>
                 </div>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div className="space-y-2">
-                  <Label>Condition</Label>
-                  <Select value={editFields.conditionIn} onValueChange={(v) => setEditFields((p) => ({ ...p, conditionIn: v }))}>
-                    <SelectTrigger><SelectValue placeholder="Select" /></SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="excellent">Excellent</SelectItem>
-                      <SelectItem value="good">Good</SelectItem>
-                      <SelectItem value="fair">Fair</SelectItem>
-                      <SelectItem value="poor">Poor</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="space-y-2">
-                  <Label>Estimated Cost</Label>
-                  <Input type="number" step="0.01" value={editFields.estimatedCost} onChange={(e) => setEditFields((p) => ({ ...p, estimatedCost: e.target.value }))} />
-                </div>
-                <div className="space-y-2">
-                  <Label>Actual Cost</Label>
-                  <Input type="number" step="0.01" value={editFields.actualCost} onChange={(e) => setEditFields((p) => ({ ...p, actualCost: e.target.value }))} />
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div className="space-y-2">
+                    <Label>Condition</Label>
+                    <Select value={editFields.conditionIn} onValueChange={(v) => setEditFields((p) => ({ ...p, conditionIn: v }))}>
+                      <SelectTrigger><SelectValue placeholder="Select" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="excellent">Excellent</SelectItem>
+                        <SelectItem value="good">Good</SelectItem>
+                        <SelectItem value="fair">Fair</SelectItem>
+                        <SelectItem value="poor">Poor</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2"><Label>Estimated Cost</Label><Input type="number" step="0.01" value={editFields.estimatedCost} onChange={(e) => setEditFields((p) => ({ ...p, estimatedCost: e.target.value }))} /></div>
+                  <div className="space-y-2"><Label>Actual Cost</Label><Input type="number" step="0.01" value={editFields.actualCost} onChange={(e) => setEditFields((p) => ({ ...p, actualCost: e.target.value }))} /></div>
                 </div>
+                <div className="space-y-2"><Label>Condition Notes</Label><Textarea value={editFields.conditionInNotes} onChange={(e) => setEditFields((p) => ({ ...p, conditionInNotes: e.target.value }))} rows={2} /></div>
+                <div className="space-y-2"><Label>Problem Description</Label><Textarea value={editFields.problemDescription} onChange={(e) => setEditFields((p) => ({ ...p, problemDescription: e.target.value }))} rows={3} /></div>
+                <div className="space-y-2"><Label>Technician Notes</Label><Textarea value={editFields.technicianNotes} onChange={(e) => setEditFields((p) => ({ ...p, technicianNotes: e.target.value }))} rows={3} /></div>
               </div>
-              <div className="space-y-2">
-                <Label>Condition Notes</Label>
-                <Textarea value={editFields.conditionInNotes} onChange={(e) => setEditFields((p) => ({ ...p, conditionInNotes: e.target.value }))} rows={2} />
-              </div>
-              <div className="space-y-2">
-                <Label>Problem Description</Label>
-                <Textarea value={editFields.problemDescription} onChange={(e) => setEditFields((p) => ({ ...p, problemDescription: e.target.value }))} rows={3} />
-              </div>
-              <div className="space-y-2">
-                <Label>Technician Notes</Label>
-                <Textarea value={editFields.technicianNotes} onChange={(e) => setEditFields((p) => ({ ...p, technicianNotes: e.target.value }))} rows={3} />
-              </div>
-            </div>
-          ) : (
-            <div className="space-y-4">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div className="space-y-2 text-sm">
-                  <div><span className="text-muted-foreground">Customer:</span> {ticket.customerName}</div>
-                  <div><span className="text-muted-foreground">Phone:</span> {ticket.customerPhone ?? '-'}</div>
-                  <div><span className="text-muted-foreground">Account:</span> {ticket.accountId ?? 'Walk-in'}</div>
+            ) : (
+              <div className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div className="space-y-2 text-sm">
+                    <div><span className="text-muted-foreground">Customer:</span> {ticket.customerName}</div>
+                    <div><span className="text-muted-foreground">Phone:</span> {ticket.customerPhone ?? '-'}</div>
+                    <div><span className="text-muted-foreground">Account:</span> {ticket.accountId ?? 'Walk-in'}</div>
+                  </div>
+                  <div className="space-y-2 text-sm">
+                    <div><span className="text-muted-foreground">Instrument:</span> {ticket.instrumentDescription ?? '-'}</div>
+                    <div><span className="text-muted-foreground">Serial:</span> {ticket.serialNumber ?? '-'}</div>
+                    <div><span className="text-muted-foreground">Condition:</span> {ticket.conditionIn ?? '-'}</div>
+                  </div>
                 </div>
                 <div className="space-y-2 text-sm">
-                  <div><span className="text-muted-foreground">Instrument:</span> {ticket.instrumentDescription ?? '-'}</div>
-                  <div><span className="text-muted-foreground">Serial:</span> {ticket.serialNumber ?? '-'}</div>
-                  <div><span className="text-muted-foreground">Condition:</span> {ticket.conditionIn ?? '-'}</div>
+                  <div><span className="text-muted-foreground">Problem:</span> {ticket.problemDescription}</div>
+                  {ticket.conditionInNotes && <div><span className="text-muted-foreground">Condition Notes:</span> {ticket.conditionInNotes}</div>}
+                  {ticket.technicianNotes && <div><span className="text-muted-foreground">Tech Notes:</span> {ticket.technicianNotes}</div>}
+                </div>
+                <div className="flex gap-6 text-sm flex-wrap">
+                  <div><span className="text-muted-foreground">Estimate:</span> {ticket.estimatedCost ? `$${ticket.estimatedCost}` : '-'}</div>
+                  <div><span className="text-muted-foreground">Actual:</span> {ticket.actualCost ? `$${ticket.actualCost}` : '-'}</div>
+                  <div><span className="text-muted-foreground">Promised:</span> {ticket.promisedDate ? new Date(ticket.promisedDate).toLocaleDateString() : '-'}</div>
+                  <div><span className="text-muted-foreground">Intake:</span> {new Date(ticket.intakeDate).toLocaleDateString()}</div>
                 </div>
               </div>
-              <div className="space-y-2 text-sm">
-                <div><span className="text-muted-foreground">Problem:</span> {ticket.problemDescription}</div>
-                {ticket.conditionInNotes && <div><span className="text-muted-foreground">Condition Notes:</span> {ticket.conditionInNotes}</div>}
-                {ticket.technicianNotes && <div><span className="text-muted-foreground">Tech Notes:</span> {ticket.technicianNotes}</div>}
-              </div>
-              <div className="flex gap-6 text-sm">
-                <div><span className="text-muted-foreground">Estimate:</span> {ticket.estimatedCost ? `$${ticket.estimatedCost}` : '-'}</div>
-                <div><span className="text-muted-foreground">Actual:</span> {ticket.actualCost ? `$${ticket.actualCost}` : '-'}</div>
-                <div><span className="text-muted-foreground">Promised:</span> {ticket.promisedDate ? new Date(ticket.promisedDate).toLocaleDateString() : '-'}</div>
-                <div><span className="text-muted-foreground">Intake:</span> {new Date(ticket.intakeDate).toLocaleDateString()}</div>
-              </div>
-            </div>
-          )}
-        </CardContent>
-      </Card>
+            )}
+          </CardContent>
+        </Card>
+      )}
 
-      {/* Photos by Phase */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-lg">Photos</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <TicketPhotos ticketId={ticketId} currentStatus={ticket.status} />
-        </CardContent>
-      </Card>
+      {activeTab === 'line-items' && (
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle className="text-lg">Line Items</CardTitle>
+            {hasPermission('repairs.edit') && (
+              <AddLineItemDialog ticketId={ticketId} open={addItemOpen} onOpenChange={setAddItemOpen} />
+            )}
+          </CardHeader>
+          <CardContent>
+            <DataTable
+              columns={lineItemColumns}
+              data={lineItemsData?.data ?? []}
+              loading={itemsLoading}
+              page={params.page}
+              totalPages={lineItemsData?.pagination.totalPages ?? 1}
+              total={lineItemsData?.pagination.total ?? 0}
+              sort={params.sort}
+              order={params.order}
+              onPageChange={setPage}
+              onSort={setSort}
+            />
+          </CardContent>
+        </Card>
+      )}
 
-      {/* Notes Journal */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-lg">Notes</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <TicketNotes ticketId={ticketId} />
-        </CardContent>
-      </Card>
+      {activeTab === 'notes' && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">Notes</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <TicketNotes ticketId={ticketId} />
+          </CardContent>
+        </Card>
+      )}
 
-      {/* Line Items */}
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle className="text-lg">Line Items</CardTitle>
-          {hasPermission('repairs.edit') && (
-            <AddLineItemDialog ticketId={ticketId} open={addItemOpen} onOpenChange={setAddItemOpen} />
-          )}
-        </CardHeader>
-        <CardContent>
-          <DataTable
-            columns={lineItemColumns}
-            data={lineItemsData?.data ?? []}
-            loading={itemsLoading}
-            page={params.page}
-            totalPages={lineItemsData?.pagination.totalPages ?? 1}
-            total={lineItemsData?.pagination.total ?? 0}
-            sort={params.sort}
-            order={params.order}
-            onPageChange={setPage}
-            onSort={setSort}
-          />
-        </CardContent>
-      </Card>
+      {activeTab === 'files' && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">Photos & Documents</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <TicketPhotos ticketId={ticketId} currentStatus={ticket.status} />
+          </CardContent>
+        </Card>
+      )}
     </div>
   )
 }
@@ -398,23 +403,12 @@ function AddLineItemDialog({ ticketId, open, onOpenChange }: { ticketId: string;
   })
 
   function resetForm() {
-    setDescription('')
-    setQty('1')
-    setUnitPrice('0')
-    setCost('')
-    setItemType('labor')
-    setTemplateSearch('')
-    setShowTemplates(false)
+    setDescription(''); setQty('1'); setUnitPrice('0'); setCost(''); setItemType('labor'); setTemplateSearch(''); setShowTemplates(false)
   }
 
   function selectTemplate(template: { name: string; instrumentType: string | null; size: string | null; itemType: string; defaultPrice: string; defaultCost: string | null }) {
     const desc = [template.name, template.instrumentType, template.size].filter(Boolean).join(' — ')
-    setDescription(desc)
-    setItemType(template.itemType)
-    setUnitPrice(template.defaultPrice)
-    setCost(template.defaultCost ?? '')
-    setShowTemplates(false)
-    setTemplateSearch('')
+    setDescription(desc); setItemType(template.itemType); setUnitPrice(template.defaultPrice); setCost(template.defaultCost ?? ''); setShowTemplates(false); setTemplateSearch('')
   }
 
   function handleSubmit(e: React.FormEvent) {
@@ -434,78 +428,36 @@ function AddLineItemDialog({ ticketId, open, onOpenChange }: { ticketId: string;
       </DialogTrigger>
       <DialogContent>
         <DialogHeader><DialogTitle>Add Line Item</DialogTitle></DialogHeader>
-
-        {/* Template picker */}
         <div className="relative">
           <Label>Quick Add from Template</Label>
-          <Input
-            placeholder="Search templates (e.g. rehair, valve)..."
-            value={templateSearch}
-            onChange={(e) => { setTemplateSearch(e.target.value); setShowTemplates(true) }}
-            onFocus={() => templateSearch && setShowTemplates(true)}
-            className="mt-1"
-          />
+          <div className="relative mt-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input placeholder="Search templates..." value={templateSearch} onChange={(e) => { setTemplateSearch(e.target.value); setShowTemplates(true) }} onFocus={() => templateSearch && setShowTemplates(true)} className="pl-9" />
+          </div>
           {showTemplates && templateSearch.length > 0 && (
             <div className="absolute z-50 mt-1 w-full rounded-md border bg-popover shadow-lg max-h-48 overflow-auto">
-              {templates.length === 0 ? (
-                <div className="p-3 text-sm text-muted-foreground">No templates found</div>
-              ) : (
-                templates.map((t) => (
-                  <button
-                    key={t.id}
-                    type="button"
-                    className="w-full text-left px-3 py-2 text-sm hover:bg-accent flex justify-between"
-                    onClick={() => selectTemplate(t)}
-                  >
-                    <span>{t.name}{t.instrumentType ? ` — ${t.instrumentType}` : ''}{t.size ? ` ${t.size}` : ''}</span>
-                    <span className="text-muted-foreground">${t.defaultPrice}</span>
-                  </button>
-                ))
-              )}
+              {templates.length === 0 ? <div className="p-3 text-sm text-muted-foreground">No templates found</div> : templates.map((t) => (
+                <button key={t.id} type="button" className="w-full text-left px-3 py-2 text-sm hover:bg-accent flex justify-between" onClick={() => selectTemplate(t)}>
+                  <span>{t.name}{t.instrumentType ? ` — ${t.instrumentType}` : ''}{t.size ? ` ${t.size}` : ''}</span>
+                  <span className="text-muted-foreground">${t.defaultPrice}</span>
+                </button>
+              ))}
             </div>
           )}
         </div>
-
-        <div className="relative flex items-center gap-2 py-1">
-          <div className="flex-1 border-t" />
-          <span className="text-xs text-muted-foreground">or fill manually</span>
-          <div className="flex-1 border-t" />
-        </div>
-
+        <div className="relative flex items-center gap-2 py-1"><div className="flex-1 border-t" /><span className="text-xs text-muted-foreground">or fill manually</span><div className="flex-1 border-t" /></div>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="space-y-2">
             <Label>Type</Label>
-            <Select value={itemType} onValueChange={setItemType}>
-              <SelectTrigger><SelectValue /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="labor">Labor</SelectItem>
-                <SelectItem value="part">Part</SelectItem>
-                <SelectItem value="flat_rate">Flat Rate</SelectItem>
-                <SelectItem value="misc">Misc</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-2">
-            <Label>Description *</Label>
-            <Input value={description} onChange={(e) => setDescription(e.target.value)} required />
+            <Select value={itemType} onValueChange={setItemType}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value="labor">Labor</SelectItem><SelectItem value="part">Part</SelectItem><SelectItem value="flat_rate">Flat Rate</SelectItem><SelectItem value="misc">Misc</SelectItem></SelectContent></Select>
           </div>
+          <div className="space-y-2"><Label>Description *</Label><Input value={description} onChange={(e) => setDescription(e.target.value)} required /></div>
           <div className="grid grid-cols-3 gap-4">
-            <div className="space-y-2">
-              <Label>Qty</Label>
-              <Input type="number" step="0.001" value={qty} onChange={(e) => setQty(e.target.value)} />
-            </div>
-            <div className="space-y-2">
-              <Label>Unit Price</Label>
-              <Input type="number" step="0.01" value={unitPrice} onChange={(e) => setUnitPrice(e.target.value)} />
-            </div>
-            <div className="space-y-2">
-              <Label>Cost (internal)</Label>
-              <Input type="number" step="0.01" value={cost} onChange={(e) => setCost(e.target.value)} placeholder="Optional" />
-            </div>
+            <div className="space-y-2"><Label>Qty</Label><Input type="number" step="0.001" value={qty} onChange={(e) => setQty(e.target.value)} /></div>
+            <div className="space-y-2"><Label>Unit Price</Label><Input type="number" step="0.01" value={unitPrice} onChange={(e) => setUnitPrice(e.target.value)} /></div>
+            <div className="space-y-2"><Label>Cost (internal)</Label><Input type="number" step="0.01" value={cost} onChange={(e) => setCost(e.target.value)} placeholder="Optional" /></div>
           </div>
-          <Button type="submit" disabled={mutation.isPending}>
-            {mutation.isPending ? 'Adding...' : 'Add'}
-          </Button>
+          <Button type="submit" disabled={mutation.isPending}>{mutation.isPending ? 'Adding...' : 'Add'}</Button>
         </form>
       </DialogContent>
     </Dialog>