feat(ticket): add extension requests and improve repair proof upload UI

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

@@ -1,19 +1,48 @@
 'use client';
 
+import { useState } from 'react';
 import { Wrench } from 'lucide-react';
 
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import type { TicketDetail } from '@/types';
 
 import { RepairEvidenceForm } from './RepairEvidenceForm';
+import { TicketExtensionRequestPanel } from './TicketExtensionRequestPanel';
 import { TicketActionCard } from './TicketActionCard';
 
+type RepairActionTab = 'repair-proof' | 'request-extension';
+
 export function SubmitRepairAction({ ticket }: { ticket: TicketDetail }) {
+  const [activeTab, setActiveTab] = useState<RepairActionTab>('repair-proof');
+
   return (
-    <TicketActionCard icon={Wrench} title="Submit Repair Evidence">
-      <RepairEvidenceForm
-        ticketId={ticket.id}
-        defectClass={ticket.defect_class}
-      />
+    <TicketActionCard icon={Wrench} title="Repair Proof">
+      <Tabs
+        value={activeTab}
+        onValueChange={(value) => setActiveTab(value as RepairActionTab)}
+        className="gap-5"
+      >
+        <TabsList variant="line" className="grid h-auto w-full grid-cols-2 p-0">
+          <TabsTrigger value="repair-proof" className="pb-3">
+            Upload Repair Proof
+          </TabsTrigger>
+          <TabsTrigger value="request-extension" className="pb-3">
+            Request Extension
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="repair-proof">
+          <RepairEvidenceForm
+            ticketId={ticket.id}
+            defectClass={ticket.defect_class}
+          />
+        </TabsContent>
+        <TabsContent value="request-extension">
+          <TicketExtensionRequestPanel
+            ticket={ticket}
+            onCancelRequest={() => setActiveTab('repair-proof')}
+          />
+        </TabsContent>
+      </Tabs>
     </TicketActionCard>
   );
 }