260324:1349 Refactor RFA #01

frontend/components/rfas/detail.tsx

@@ -5,21 +5,23 @@ import { StatusBadge } from '@/components/common/status-badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { format } from 'date-fns';
-import { ArrowLeft, CheckCircle, XCircle, Loader2 } from 'lucide-react';
+import { ArrowLeft, CheckCircle, XCircle, Loader2, Send, Edit } from 'lucide-react';
 import Link from 'next/link';
 import { useState } from 'react';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
-import { useProcessRFA } from '@/hooks/use-rfa';
+import { useProcessRFA, useSubmitRFA } from '@/hooks/use-rfa';
 
 interface RFADetailProps {
   data: RFA;
 }
 
 export function RFADetail({ data }: RFADetailProps) {
-  const [actionState, setActionState] = useState<'approve' | 'reject' | null>(null);
+  const [actionState, setActionState] = useState<'approve' | 'reject' | 'submit' | null>(null);
   const [comments, setComments] = useState('');
+  const [templateId, setTemplateId] = useState<number>(1);
   const processMutation = useProcessRFA();
+  const submitMutation = useSubmitRFA();
   const currentRevision = data.revisions.find((revision) => revision.isCurrent) ?? data.revisions[0];
   const currentItems = currentRevision?.items ?? [];
   const currentStatus = currentRevision?.statusCode?.statusName || currentRevision?.statusCode?.statusCode || 'Unknown';
@@ -54,7 +56,7 @@ export function RFADetail({ data }: RFADetailProps) {
     item.shopDrawingRevision?.title || item.asBuiltDrawingRevision?.title || '-';
 
   const handleProcess = () => {
-    if (!actionState) return;
+    if (!actionState || actionState === 'submit') return;
 
     const apiAction = actionState === 'approve' ? 'APPROVE' : 'REJECT';
 
@@ -70,7 +72,17 @@ export function RFADetail({ data }: RFADetailProps) {
         onSuccess: () => {
           setActionState(null);
           setComments('');
-          // Query invalidation handled in hook
+        },
+      }
+    );
+  };
+
+  const handleSubmit = () => {
+    submitMutation.mutate(
+      { uuid: data.uuid, templateId },
+      {
+        onSuccess: () => {
+          setActionState(null);
         },
       }
     );
@@ -94,7 +106,23 @@ export function RFADetail({ data }: RFADetailProps) {
           </div>
         </div>
 
-        {currentStatus === 'PENDING' && (
+        <div className="flex gap-2">
+          {currentRevision?.statusCode?.statusCode === 'DFT' && (
+            <>
+              <Link href={`/rfas/${data.uuid}/edit`}>
+                <Button variant="outline">
+                  <Edit className="mr-2 h-4 w-4" />
+                  Edit
+                </Button>
+              </Link>
+              <Button onClick={() => setActionState('submit')}>
+                <Send className="mr-2 h-4 w-4" />
+                Submit RFA
+              </Button>
+            </>
+          )}
+        </div>
+        {['FAP', 'FRE'].includes(currentRevision?.statusCode?.statusCode ?? '') && (
           <div className="flex gap-2">
             <Button
               variant="outline"
@@ -112,8 +140,38 @@ export function RFADetail({ data }: RFADetailProps) {
         )}
       </div>
 
+      {/* Submit RFA Dialog */}
+      {actionState === 'submit' && (
+        <Card className="border-primary">
+          <CardHeader>
+            <CardTitle className="text-lg">Submit RFA to Workflow</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="templateId">Routing Template ID</Label>
+              <input
+                id="templateId"
+                type="number"
+                min={1}
+                className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
+                value={templateId}
+                onChange={(e) => setTemplateId(Number(e.target.value))}
+              />
+              <p className="text-xs text-muted-foreground">Enter the routing template ID for this submission.</p>
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button variant="ghost" onClick={() => setActionState(null)}>Cancel</Button>
+              <Button onClick={handleSubmit} disabled={submitMutation.isPending}>
+                {submitMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                Confirm Submit
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
       {/* Action Input Area */}
-      {actionState && (
+      {actionState && actionState !== 'submit' && (
         <Card className="border-primary">
           <CardHeader>
             <CardTitle className="text-lg">
@@ -216,7 +274,12 @@ export function RFADetail({ data }: RFADetailProps) {
 
               <div>
                 <p className="text-sm font-medium text-muted-foreground">Discipline</p>
-                <p className="font-medium mt-1">{data.discipline?.name || data.discipline?.code || '-'}</p>
+                <p className="font-medium mt-1">
+                  {data.correspondence?.discipline?.codeNameEn ||
+                    data.correspondence?.discipline?.codeNameTh ||
+                    data.correspondence?.discipline?.disciplineCode ||
+                    '-'}
+                </p>
               </div>
             </CardContent>
           </Card>

frontend/components/rfas/form.tsx

@@ -24,7 +24,7 @@ import { correspondenceService } from '@/lib/services/correspondence.service';
 const rfaSchema = z.object({
   projectId: z.string().min(1, 'Project is required'), // ADR-019: UUID
   contractId: z.string().min(1, 'Contract is required'),
-  disciplineId: z.number().min(1, 'Discipline is required'),
+  disciplineId: z.number({ required_error: 'Discipline is required' }).min(1, 'Discipline is required'),
   rfaTypeId: z.number().min(1, 'Type is required'),
   subject: z.string().min(5, 'Subject must be at least 5 characters'),
   description: z.string().optional(),

frontend/components/rfas/list.tsx

@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/button';
 import { Eye, Edit, FileText } from 'lucide-react';
 import Link from 'next/link';
 import { format } from 'date-fns';
+import { toast } from 'sonner';
 
 interface RFAListProps {
   data: RFA[];
@@ -37,8 +38,8 @@ export function RFAList({ data }: RFAListProps) {
       },
     },
     {
-      accessorKey: 'contract_name', // AccessorKey can be anything if we provide cell
-      header: 'Contract',
+      accessorKey: 'project_name',
+      header: 'Project',
       cell: ({ row }) => {
         return <span>{row.original.correspondence?.project?.projectName || '-'}</span>;
       },
@@ -85,7 +86,7 @@ export function RFAList({ data }: RFAListProps) {
             // But rfa.service.ts in use-rfa.ts uses 'sonner', so 'sonner' is likely available.
             // I will try to use toast from 'sonner' if I import it, or just window.alert for safety.
             // User said "หน้าต่างแจ้งเตือน" -> Alert window.
-            alert('ไม่พบไฟล์แนบ (No file attached)');
+            toast.error('ไม่พบไฟล์แนบ (No file attached)');
           }
         };