Add jsPDF dependency and PDF generation module for repair tickets

Install jsPDF, add generate-pdf.ts with customer-facing PDF layout,
wire PDF button in ticket detail to generate and auto-upload.
This commit is contained in:
Ryan Moon
2026-03-29 10:52:17 -05:00
parent d04bf231f8
commit ee8d6f7aad
3 changed files with 227 additions and 1 deletions

View File

@@ -21,6 +21,8 @@ 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, FileText, Search } from 'lucide-react'
import { generateAndUploadPdf } from '@/components/repairs/generate-pdf'
import { repairNoteListOptions } from '@/api/repairs'
import { toast } from 'sonner'
import { useAuthStore } from '@/stores/auth.store'
import type { RepairLineItem } from '@/types/repair'
@@ -73,6 +75,8 @@ function RepairTicketDetailPage() {
const { data: ticket, isLoading } = useQuery(repairTicketDetailOptions(ticketId))
const { data: lineItemsData, isLoading: itemsLoading } = useQuery(repairLineItemListOptions(ticketId, params))
const { data: notesData } = useQuery(repairNoteListOptions(ticketId))
const token = useAuthStore((s) => s.token)
const [editFields, setEditFields] = useState<Record<string, string>>({})
@@ -180,7 +184,16 @@ function RepairTicketDetailPage() {
<h1 className="text-2xl font-bold">Ticket #{ticket.ticketNumber}</h1>
<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')}>
<Button variant="outline" size="sm" onClick={() => {
if (!ticket) return
generateAndUploadPdf({
ticket,
lineItems: lineItemsData?.data ?? [],
notes: notesData?.data ?? [],
includeNotes: true,
}, ticketId, token)
toast.success('PDF downloaded and saved to documents')
}}>
<FileText className="mr-2 h-4 w-4" />PDF
</Button>
</div>