251211:1622 Frontend: refactor Dashboard (not finish)

frontend/components/rfas/list.tsx

@@ -5,17 +5,12 @@ import { DataTable } from "@/components/common/data-table";
 import { ColumnDef } from "@tanstack/react-table";
 import { StatusBadge } from "@/components/common/status-badge";
 import { Button } from "@/components/ui/button";
-import { Eye } from "lucide-react";
+import { Eye, Edit, FileText } from "lucide-react";
 import Link from "next/link";
 import { format } from "date-fns";
 
 interface RFAListProps {
-  data: {
-    items: RFA[];
-    total: number;
-    page: number;
-    totalPages: number;
-  };
+  data: RFA[];
 }
 
 export function RFAList({ data }: RFAListProps) {
@@ -25,48 +20,87 @@ export function RFAList({ data }: RFAListProps) {
     {
       accessorKey: "rfa_number",
       header: "RFA No.",
-      cell: ({ row }) => (
-        <span className="font-medium">{row.getValue("rfa_number")}</span>
-      ),
+      cell: ({ row }) => {
+        const rev = row.original.revisions?.[0];
+        return <span className="font-medium">{rev?.correspondence?.correspondenceNumber || '-'}</span>;
+      },
     },
     {
       accessorKey: "subject",
       header: "Subject",
-      cell: ({ row }) => (
-        <div className="max-w-[300px] truncate" title={row.getValue("subject")}>
-          {row.getValue("subject")}
-        </div>
-      ),
+      cell: ({ row }) => {
+        const rev = row.original.revisions?.[0];
+        return (
+          <div className="max-w-[300px] truncate" title={rev?.title}>
+            {rev?.title || '-'}
+          </div>
+        );
+      },
     },
     {
-      accessorKey: "contract_name",
+      accessorKey: "contract_name", // AccessorKey can be anything if we provide cell
       header: "Contract",
+      cell: ({ row }) => {
+        const rev = row.original.revisions?.[0];
+        return <span>{rev?.correspondence?.project?.projectName || '-'}</span>;
+      },
     },
     {
       accessorKey: "discipline_name",
       header: "Discipline",
+      cell: ({ row }) => <span>{row.original.discipline?.name || '-'}</span>,
     },
     {
       accessorKey: "createdAt",
       header: "Created",
-      cell: ({ row }) => format(new Date(row.getValue("createdAt")), "dd MMM yyyy"),
+      cell: ({ row }) => {
+         const date = row.original.revisions?.[0]?.correspondence?.createdAt;
+         return date ? format(new Date(date), "dd MMM yyyy") : '-';
+      },
     },
     {
       accessorKey: "status",
       header: "Status",
-      cell: ({ row }) => <StatusBadge status={row.getValue("status")} />,
+      cell: ({ row }) => {
+        const status = row.original.revisions?.[0]?.statusCode?.statusName || row.original.revisions?.[0]?.statusCode?.statusCode;
+        return <StatusBadge status={status || 'Unknown'} />;
+      },
     },
     {
       id: "actions",
       cell: ({ row }) => {
         const item = row.original;
+
+        const handleViewFile = (e: React.MouseEvent) => {
+           e.preventDefault();
+           // Logic to find first attachment: Check items -> shopDrawingRevision -> attachments
+           const firstAttachment = item.revisions?.[0]?.items?.[0]?.shopDrawingRevision?.attachments?.[0];
+           if (firstAttachment?.url) {
+             window.open(firstAttachment.url, '_blank');
+           } else {
+             // Use alert or toast. Assuming toast is available or use generic alert for now if toast not imported
+             // 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)");
+           }
+        };
+
         return (
           <div className="flex gap-2">
-            <Link href={`/rfas/${row.original.rfaId}`}>
-              <Button variant="ghost" size="icon" title="View">
+            <Link href={`/rfas/${row.original.id}`}>
+              <Button variant="ghost" size="icon" title="View Details">
                 <Eye className="h-4 w-4" />
               </Button>
             </Link>
+             <Button variant="ghost" size="icon" title="View File" onClick={handleViewFile}>
+                <FileText className="h-4 w-4" />
+              </Button>
+            <Link href={`/rfas/${row.original.id}/edit`}>
+               <Button variant="ghost" size="icon" title="Edit">
+                <Edit className="h-4 w-4" />
+              </Button>
+            </Link>
           </div>
         );
       },
@@ -75,7 +109,7 @@ export function RFAList({ data }: RFAListProps) {
 
   return (
     <div>
-      <DataTable columns={columns} data={data?.items || []} />
+      <DataTable columns={columns} data={data || []} />
       {/* Pagination component would go here */}
     </div>
   );