feat(clients): align client form with first and last name API fields

src/app/(modules)/ticket/[ticketId]/components/TicketDetailHeader.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { ArrowLeft, BarChart3 } from 'lucide-react';
+import { ArrowLeft } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 
 import { Button } from '@/components/ui/button';
+import { SparkleButton } from '@/components/ui/sparkle-button';
 import { PERMISSIONS } from '@/constants/permissions';
 import { PermissionGuard } from '@/guards';
 import type { TicketDetail } from '@/types';
@@ -28,14 +29,12 @@ export function TicketDetailHeader({ ticket }: { ticket: TicketDetail }) {
       <div className="flex shrink-0 items-center gap-2">
         {ticket.video_id ? (
           <PermissionGuard permissions={PERMISSIONS.TICKET.ASSIGN}>
-            <Button
-              variant="outline"
-              size="sm"
+            <SparkleButton
+              className="h-10 min-w-36 px-5"
               onClick={() => router.push(`/results/${ticket.video_id}`)}
             >
-              <BarChart3 className="size-4" />
-              Analysis
-            </Button>
+              View Analysis
+            </SparkleButton>
           </PermissionGuard>
         ) : null}
 

src/app/(modules)/ticket/[ticketId]/components/TicketRepairReportCard.tsx

@@ -11,6 +11,10 @@ import { RepairVideoComparison } from './repair-report/RepairVideoComparison';
 export function TicketRepairReportCard({ ticket }: { ticket: TicketDetail }) {
   const repair = ticket.repair;
 
+  if (!repair) {
+    return null;
+  }
+
   return (
     <section className="space-y-5">
       <RepairReportPanel ticket={ticket} />