feat(ticket): refine repair report and history timeline UI

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

@@ -0,0 +1,57 @@
+'use client';
+
+import { useState } from 'react';
+import { Send, UserPlus } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { AssignableWorkerSelect } from '@/components/lookups/AssignableWorkerSelect';
+import type { TicketDetail } from '@/types';
+
+import { useAssignTicketMutation } from '../../../hooks/useTicketQueries';
+import { TicketActionCard } from './TicketActionCard';
+
+export function AssignTicketAction({ ticket }: { ticket: TicketDetail }) {
+  const [selectedUserId, setSelectedUserId] = useState('');
+  const [assignNote, setAssignNote] = useState('');
+
+  const assignMutation = useAssignTicketMutation(ticket.id);
+
+  return (
+    <TicketActionCard icon={UserPlus} title="Assign Ticket">
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <Label>Worker</Label>
+          <AssignableWorkerSelect
+            value={selectedUserId}
+            onValueChange={setSelectedUserId}
+            disabled={assignMutation.isPending}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label>Note</Label>
+          <Textarea
+            value={assignNote}
+            onChange={(event) => setAssignNote(event.target.value)}
+            placeholder="Please inspect and repair"
+          />
+        </div>
+        <Button
+          disabled={!selectedUserId || assignMutation.isPending}
+          onClick={() => {
+            if (!selectedUserId) return;
+            assignMutation.mutate({
+              assigned_to_user_id: Number(selectedUserId),
+              note: assignNote || undefined,
+            });
+          }}
+          className="w-full"
+        >
+          <Send />
+          Assign
+        </Button>
+      </div>
+    </TicketActionCard>
+  );
+}