260324:1349 Refactor RFA #01

2026-03-24 13:49:30 +07:00
parent a3e3206b06
commit 4cd0952482
29 changed files with 1700 additions and 306 deletions
@@ -0,0 +1,193 @@
+'use client';
+
+import { useParams, useRouter, notFound } from 'next/navigation';
+import { useRFA, useUpdateRFA } from '@/hooks/use-rfa';
+import { Loader2 } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { UpdateRfaDto } from '@/types/dto/rfa/rfa.dto';
+import { useEffect } from 'react';
+
+const editRfaSchema = z.object({
+  subject: z.string().min(5, 'Subject must be at least 5 characters'),
+  description: z.string().optional(),
+  body: z.string().optional(),
+  remarks: z.string().optional(),
+  dueDate: z.string().optional(),
+});
+
+type EditRfaFormValues = z.infer<typeof editRfaSchema>;
+
+export default function RFAEditPage() {
+  const { uuid } = useParams();
+  const router = useRouter();
+
+  if (!uuid) notFound();
+
+  const { data: rfa, isLoading, isError } = useRFA(String(uuid));
+  const updateMutation = useUpdateRFA();
+
+  const currentRevision =
+    rfa?.revisions?.find((r) => r.isCurrent) ?? rfa?.revisions?.[0];
+
+  const form = useForm<EditRfaFormValues>({
+    resolver: zodResolver(editRfaSchema),
+    defaultValues: {
+      subject: '',
+      description: '',
+      body: '',
+      remarks: '',
+      dueDate: '',
+    },
+  });
+
+  useEffect(() => {
+    if (currentRevision) {
+      form.reset({
+        subject: currentRevision.subject ?? '',
+        description: currentRevision.description ?? '',
+        body: currentRevision.body ?? '',
+        remarks: currentRevision.remarks ?? '',
+        dueDate: currentRevision.dueDate
+          ? currentRevision.dueDate.slice(0, 10)
+          : '',
+      });
+    }
+  }, [currentRevision, form]);
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center py-20">
+        <Loader2 className="h-8 w-8 animate-spin" />
+      </div>
+    );
+  }
+
+  if (isError || !rfa) {
+    return <div className="text-center py-20 text-red-500">RFA not found.</div>;
+  }
+
+  if (currentRevision?.statusCode?.statusCode !== 'DFT') {
+    return (
+      <div className="text-center py-20 text-amber-600">
+        Only DRAFT RFAs can be edited.{' '}
+        <Button variant="link" onClick={() => router.back()}>
+          Go back
+        </Button>
+      </div>
+    );
+  }
+
+  const onSubmit = (values: EditRfaFormValues) => {
+    const dto: UpdateRfaDto = {
+      subject: values.subject,
+      description: values.description || undefined,
+      body: values.body || undefined,
+      remarks: values.remarks || undefined,
+      dueDate: values.dueDate || undefined,
+    };
+
+    updateMutation.mutate(
+      { uuid: String(uuid), data: dto },
+      {
+        onSuccess: () => {
+          router.push(`/rfas/${String(uuid)}`);
+        },
+      }
+    );
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold">Edit RFA</h1>
+        <p className="text-muted-foreground mt-1">
+          {rfa.correspondence?.correspondenceNumber || 'Draft RFA'}
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Revision Details</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5">
+            <div className="space-y-2">
+              <Label htmlFor="subject">Subject *</Label>
+              <Input
+                id="subject"
+                {...form.register('subject')}
+                placeholder="Subject of this RFA"
+              />
+              {form.formState.errors.subject && (
+                <p className="text-sm text-destructive">
+                  {form.formState.errors.subject.message}
+                </p>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                {...form.register('description')}
+                placeholder="Detailed description..."
+                rows={4}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="body">Body</Label>
+              <Textarea
+                id="body"
+                {...form.register('body')}
+                placeholder="Main body content..."
+                rows={4}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="remarks">Remarks</Label>
+              <Input
+                id="remarks"
+                {...form.register('remarks')}
+                placeholder="Additional remarks..."
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="dueDate">Due Date</Label>
+              <Input
+                id="dueDate"
+                type="date"
+                {...form.register('dueDate')}
+              />
+            </div>
+
+            <div className="flex justify-end gap-3 pt-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => router.back()}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={updateMutation.isPending}>
+                {updateMutation.isPending && (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                )}
+                Save Changes
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
@@ -2,38 +2,101 @@

 import { RFAList } from '@/components/rfas/list';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import Link from 'next/link';
-import { Plus, Loader2 } from 'lucide-react';
+import { Plus, Loader2, Search } from 'lucide-react';
 import { useRFAs } from '@/hooks/use-rfa';
-import { useSearchParams } from 'next/navigation';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { Pagination } from '@/components/common/pagination';
-import { Suspense } from 'react';
+import { Suspense, useCallback } from 'react';
+
+const RFA_STATUS_OPTIONS = [
+  { value: 'ALL', label: 'All Statuses' },
+  { value: 'DFT', label: 'Draft' },
+  { value: 'FAP', label: 'For Approve' },
+  { value: 'FRE', label: 'For Review' },
+  { value: 'FCO', label: 'For Comment Only' },
+  { value: 'CC', label: 'Cancelled' },
+];

 function RFAsContent() {
  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
  const page = Number(searchParams.get('page') || '1');
-  const statusId = searchParams.get('status') ? Number(searchParams.get('status')!) : undefined;
+  const statusCode = searchParams.get('statusCode') || undefined;
  const search = searchParams.get('search') || undefined;
-  const projectId = searchParams.get('projectId') || undefined; // ADR-019: Pass UUID string directly
-
+  const projectId = searchParams.get('projectId') || undefined;
  const revisionStatus = (searchParams.get('revisionStatus') as 'CURRENT' | 'ALL' | 'OLD') || 'CURRENT';

-  const { data, isLoading, isError } = useRFAs({ page, statusId, search, projectId, revisionStatus });
+  const { data, isLoading, isError } = useRFAs({ page, statusCode, search, projectId, revisionStatus });
+
+  const updateParam = useCallback(
+    (key: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (value && value !== 'ALL') {
+        params.set(key, value);
+      } else {
+        params.delete(key);
+      }
+      params.set('page', '1');
+      router.push(`${pathname}?${params.toString()}`);
+    },
+    [searchParams, router, pathname]
+  );

  return (
    <>
-      <div className="mb-4 flex gap-2">
-        {/* Simple Filter Buttons using standard Buttons for now, or use a Select if imported */}
+      <div className="mb-4 flex flex-wrap gap-3 items-center">
+        <div className="relative flex-1 min-w-[200px] max-w-sm">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            className="pl-9"
+            placeholder="Search RFA number or subject..."
+            defaultValue={search ?? ''}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                updateParam('search', (e.target as HTMLInputElement).value);
+              }
+            }}
+            onBlur={(e) => updateParam('search', e.target.value)}
+          />
+        </div>
+
+        <Select
+          value={statusCode ?? 'ALL'}
+          onValueChange={(val) => updateParam('statusCode', val)}
+        >
+          <SelectTrigger className="w-[160px]">
+            <SelectValue placeholder="Status" />
+          </SelectTrigger>
+          <SelectContent>
+            {RFA_STATUS_OPTIONS.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
        <div className="flex gap-1 bg-muted p-1 rounded-md">
-          {['ALL', 'CURRENT', 'OLD'].map((status) => (
-            <Link
-              key={status}
-              href={`?${new URLSearchParams({ ...Object.fromEntries(searchParams.entries()), revisionStatus: status, page: '1' }).toString()}`}
+          {(['ALL', 'CURRENT', 'OLD'] as const).map((s) => (
+            <Button
+              key={s}
+              variant={revisionStatus === s ? 'default' : 'ghost'}
+              size="sm"
+              className="text-xs px-3"
+              onClick={() => updateParam('revisionStatus', s)}
            >
-              <Button variant={revisionStatus === status ? 'default' : 'ghost'} size="sm" className="text-xs px-3">
-                {status === 'CURRENT' ? 'Latest' : status === 'OLD' ? 'Previous' : 'All'}
-              </Button>
-            </Link>
+              {s === 'CURRENT' ? 'Latest' : s === 'OLD' ? 'Previous' : 'All Revisions'}
+            </Button>
          ))}
        </div>
      </div>
@@ -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>
@@ -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(),
@@ -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)');
          }
        };

@@ -34,6 +34,25 @@ export function useRFA(uuid: string) {

 // --- Mutations ---

+export function useSubmitRFA() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ uuid, templateId }: { uuid: string; templateId: number }) =>
+      rfaService.submit(uuid, templateId),
+    onSuccess: (_, { uuid }) => {
+      toast.success('RFA submitted successfully');
+      queryClient.invalidateQueries({ queryKey: rfaKeys.detail(uuid) });
+      queryClient.invalidateQueries({ queryKey: rfaKeys.lists() });
+    },
+    onError: (error: unknown) => {
+      toast.error('Failed to submit RFA', {
+        description: getApiErrorMessage(error, 'Something went wrong'),
+      });
+    },
+  });
+}
+
 export function useCreateRFA() {
  const queryClient = useQueryClient();

@@ -37,6 +37,15 @@ export const rfaService = {
    return response.data;
  },

+  /**
+   * Submit a Draft RFA to workflow
+   */
+  submit: async (uuid: string, templateId: number) => {
+    // POST /rfas/:uuid/submit (ADR-019)
+    const response = await apiClient.post(`/rfas/${uuid}/submit`, { templateId });
+    return response.data;
+  },
+
  /**
   * แก้ไข RFA (เฉพาะสถานะ Draft)
   */
@@ -50,8 +59,8 @@ export const rfaService = {
   * ดำเนินการ Workflow (อนุมัติ / ตีกลับ / ส่งต่อ)
   */
  processWorkflow: async (uuid: string, actionData: WorkflowActionDto) => {
-    // POST /rfas/:uuid/workflow (ADR-019)
-    const response = await apiClient.post(`/rfas/${uuid}/workflow`, actionData);
+    // POST /rfas/:uuid/action (ADR-019)
+    const response = await apiClient.post(`/rfas/${uuid}/action`, actionData);
    return response.data;
  },

@@ -56,6 +56,9 @@ export interface SearchRfaDto {
  /** กรองตามสถานะ (เช่น Draft, For Approve) */
  statusId?: number;

+  /** กรองตามสถานะ code โดยตรง (เช่น 'DFT', 'FAP', 'FRE') */
+  statusCode?: string;
+
  /** ค้นหาจาก เลขที่เอกสาร หรือ หัวข้อเรื่อง */
  search?: string;

@@ -36,11 +36,17 @@ export interface RFA {
  revisions: {
    id: number;
    revisionNumber: number;
+    revisionLabel?: string;
    subject: string;
    description?: string;
+    body?: string;
+    remarks?: string;
+    dueDate?: string;
    isCurrent: boolean;
    createdAt?: string;
    statusCode?: { statusCode: string; statusName: string };
+    approveCode?: { approveCode: string; approveCodeName: string };
+    approvedDate?: string;
    items?: RFAItem[];
  }[];
  discipline?: {
@@ -61,6 +67,11 @@ export interface RFA {
      projectName: string;
      projectCode: string;
    };
+    discipline?: {
+      disciplineCode: string;
+      codeNameEn?: string;
+      codeNameTh?: string;
+    };
  };

  // Deprecated/Mapped fields