260218:1712 20260218 TASK-BEFE-001n

frontend/components/drawings/columns.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { ColumnDef } from '@tanstack/react-table';
+import { Drawing } from '@/types/drawing';
+import { Button } from '@/components/ui/button';
+import { ArrowUpDown, MoreHorizontal } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+export const columns: ColumnDef<Drawing>[] = [
+  {
+    accessorKey: 'drawingNumber',
+    header: ({ column }) => {
+      return (
+        <Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}>
+          Drawing No.
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+  },
+  {
+    accessorKey: 'title',
+    header: 'Title',
+  },
+  {
+    accessorKey: 'revision',
+    header: 'Revision',
+    cell: ({ row }) => row.original.revision || '-',
+  },
+  {
+    accessorKey: 'legacyDrawingNumber',
+    header: 'Legacy No.',
+    cell: ({ row }) => row.original.legacyDrawingNumber || '-',
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: 'Last Updated',
+    cell: ({ row }) => {
+      const date = new Date(row.original.updatedAt || '');
+      return isNaN(date.getTime()) ? '-' : date.toLocaleDateString();
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const drawing = row.original;
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem onClick={() => navigator.clipboard.writeText(drawing.drawingNumber)}>
+              Copy Drawing No.
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>View Details</DropdownMenuItem>
+            {/* Add download/view functionality later */}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];

frontend/components/drawings/list.tsx

@@ -1,58 +1,60 @@
-"use client";
+'use client';
 
-import { DrawingCard } from "@/components/drawings/card";
-import { useDrawings } from "@/hooks/use-drawing";
-import { Drawing } from "@/types/drawing";
-import { Loader2 } from "lucide-react";
+import { DrawingCard } from '@/components/drawings/card';
+import { useDrawings } from '@/hooks/use-drawing';
+import { Drawing } from '@/types/drawing';
+import { Loader2 } from 'lucide-react';
+import { useState } from 'react';
+import { PaginationState, SortingState } from '@tanstack/react-table';
+import { ServerDataTable } from '@/components/documents/common/server-data-table';
+import { columns } from './columns';
 
-import { SearchContractDrawingDto } from "@/types/dto/drawing/contract-drawing.dto";
-import { SearchShopDrawingDto } from "@/types/dto/drawing/shop-drawing.dto";
-import { SearchAsBuiltDrawingDto } from "@/types/dto/drawing/asbuilt-drawing.dto";
+import { SearchContractDrawingDto } from '@/types/dto/drawing/contract-drawing.dto';
+import { SearchShopDrawingDto } from '@/types/dto/drawing/shop-drawing.dto';
+import { SearchAsBuiltDrawingDto } from '@/types/dto/drawing/asbuilt-drawing.dto';
 
 type DrawingSearchParams = SearchContractDrawingDto | SearchShopDrawingDto | SearchAsBuiltDrawingDto;
 
 interface DrawingListProps {
-  type: "CONTRACT" | "SHOP" | "AS_BUILT";
+  type: 'CONTRACT' | 'SHOP' | 'AS_BUILT';
   projectId: number;
   filters?: Partial<DrawingSearchParams>;
 }
 
 export function DrawingList({ type, projectId, filters }: DrawingListProps) {
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 20,
+  });
+  const [sorting, setSorting] = useState<SortingState>([]);
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { data: drawings, isLoading, isError } = useDrawings(type, { projectId, ...filters } as any);
+  const {
+    data: response,
+    isLoading,
+    isError,
+  } = useDrawings(type, {
+    projectId,
+    ...filters,
+    page: pagination.pageIndex + 1, // API is 1-based
+    pageSize: pagination.pageSize,
+  } as any);
 
-  // Note: The hook handles switching services based on type.
-  // The params { type } might be redundant if getAll doesn't use it, but safe to pass.
-
-  if (isLoading) {
-    return (
-      <div className="flex justify-center py-12">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
-
-  if (isError) {
-    return (
-       <div className="text-center py-12 text-red-500">
-         Failed to load drawings.
-       </div>
-    );
-  }
-
-  if (!drawings?.data || drawings.data.length === 0) {
-    return (
-      <div className="text-center py-12 text-muted-foreground border rounded-lg border-dashed">
-        No drawings found.
-      </div>
-    );
-  }
+  const drawings = response?.data || [];
+  const meta = response?.meta || { total: 0, page: 1, limit: 20, totalPages: 0 };
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6">
-      {drawings.data.map((drawing: Drawing) => (
-        <DrawingCard key={drawing.drawingId} drawing={drawing} />
-      ))}
+    <div>
+      <ServerDataTable
+        columns={columns}
+        data={drawings}
+        pageCount={meta.totalPages}
+        pagination={pagination}
+        onPaginationChange={setPagination}
+        sorting={sorting}
+        onSortingChange={setSorting}
+        isLoading={isLoading}
+      />
     </div>
   );
 }