260218:1712 20260218 TASK-BEFE-001n

frontend/components/admin/sidebar.tsx

@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useState } from "react";
-import { cn } from "@/lib/utils";
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
 import {
   Users,
   Building2,
@@ -16,7 +16,7 @@ import {
   FileStack,
   ChevronDown,
   ChevronRight,
-} from "lucide-react";
+} from 'lucide-react';
 
 interface MenuItem {
   href?: string;
@@ -26,29 +26,47 @@ interface MenuItem {
 }
 
 const menuItems: MenuItem[] = [
-  { href: "/admin/users", label: "Users", icon: Users },
-  { href: "/admin/organizations", label: "Organizations", icon: Building2 },
-  { href: "/admin/projects", label: "Projects", icon: FileText },
-  { href: "/admin/contracts", label: "Contracts", icon: FileText },
-  { href: "/admin/reference", label: "Reference Data", icon: BookOpen },
   {
-    label: "Drawing Master Data",
+    label: 'Access Control',
+    icon: Shield,
+    children: [
+      { href: '/admin/access-control/users', label: 'Users' },
+      { href: '/admin/access-control/roles', label: 'Roles' },
+      { href: '/admin/access-control/organizations', label: 'Organizations' },
+    ],
+  },
+  {
+    label: 'Document Control',
     icon: FileStack,
     children: [
-      { href: "/admin/drawings/contract/volumes", label: "Contract: Volumes" },
-      { href: "/admin/drawings/contract/categories", label: "Contract: Categories" },
-      { href: "/admin/drawings/contract/sub-categories", label: "Contract: Sub-categories" },
-      { href: "/admin/drawings/shop/main-categories", label: "Shop: Main Categories" },
-      { href: "/admin/drawings/shop/sub-categories", label: "Shop: Sub-categories" },
-    ]
+      { href: '/admin/doc-control/projects', label: 'Projects' },
+      { href: '/admin/doc-control/contracts', label: 'Contracts' },
+      { href: '/admin/doc-control/numbering', label: 'Numbering' },
+      { href: '/admin/doc-control/reference', label: 'Reference Data' },
+      { href: '/admin/doc-control/workflows', label: 'Workflows' },
+    ],
   },
-  { href: "/admin/numbering", label: "Numbering", icon: FileText },
-  { href: "/admin/workflows", label: "Workflows", icon: GitGraph },
-  { href: "/admin/security/roles", label: "Security Roles", icon: Shield },
-  { href: "/admin/security/sessions", label: "Active Sessions", icon: Users },
-  { href: "/admin/system-logs/numbering", label: "System Logs", icon: Activity },
-  { href: "/admin/audit-logs", label: "Audit Logs", icon: Activity },
-  { href: "/admin/settings", label: "Settings", icon: Settings },
+  {
+    label: 'Drawing Master',
+    icon: FileStack, // Or another icon
+    children: [
+      { href: '/admin/doc-control/drawings/contract/volumes', label: 'Contract: Volumes' },
+      { href: '/admin/doc-control/drawings/contract/categories', label: 'Contract: Categories' },
+      { href: '/admin/doc-control/drawings/contract/sub-categories', label: 'Contract: Sub-categories' },
+      { href: '/admin/doc-control/drawings/shop/main-categories', label: 'Shop: Main Categories' },
+      { href: '/admin/doc-control/drawings/shop/sub-categories', label: 'Shop: Sub-categories' },
+    ],
+  },
+  {
+    label: 'Monitoring',
+    icon: Activity,
+    children: [
+      { href: '/admin/monitoring/audit-logs', label: 'Audit Logs' },
+      { href: '/admin/monitoring/system-logs/numbering', label: 'System Logs' },
+      { href: '/admin/monitoring/sessions', label: 'Active Sessions' },
+    ],
+  },
+  { href: '/admin/settings', label: 'Settings', icon: Settings },
 ];
 
 export function AdminSidebar() {
@@ -56,23 +74,19 @@ export function AdminSidebar() {
   const [expandedMenus, setExpandedMenus] = useState<string[]>(
     // Auto-expand if current path matches a child
     menuItems
-      .filter(item => item.children?.some(child => pathname.startsWith(child.href)))
-      .map(item => item.label)
+      .filter((item) => item.children?.some((child) => pathname.startsWith(child.href)))
+      .map((item) => item.label)
   );
 
   const toggleMenu = (label: string) => {
-    setExpandedMenus(prev =>
-      prev.includes(label)
-        ? prev.filter(l => l !== label)
-        : [...prev, label]
-    );
+    setExpandedMenus((prev) => (prev.includes(label) ? prev.filter((l) => l !== label) : [...prev, label]));
   };
 
   return (
     <aside className="w-64 border-r bg-card p-4 hidden md:block">
       <div className="mb-8 px-2">
-         <h2 className="text-xl font-bold tracking-tight">Admin Console</h2>
-         <p className="text-sm text-muted-foreground">LCBP3 DMS</p>
+        <h2 className="text-xl font-bold tracking-tight">Admin Console</h2>
+        <p className="text-sm text-muted-foreground">LCBP3 DMS</p>
       </div>
 
       <nav className="space-y-1">
@@ -82,28 +96,24 @@ export function AdminSidebar() {
           // Has children - collapsible menu
           if (item.children) {
             const isExpanded = expandedMenus.includes(item.label);
-            const hasActiveChild = item.children.some(child => pathname.startsWith(child.href));
+            const hasActiveChild = item.children.some((child) => pathname.startsWith(child.href));
 
             return (
               <div key={item.label}>
                 <button
                   onClick={() => toggleMenu(item.label)}
                   className={cn(
-                    "w-full flex items-center justify-between gap-3 px-3 py-2 rounded-lg transition-colors text-sm font-medium",
+                    'w-full flex items-center justify-between gap-3 px-3 py-2 rounded-lg transition-colors text-sm font-medium',
                     hasActiveChild
-                      ? "bg-primary/10 text-primary"
-                      : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                      ? 'bg-primary/10 text-primary'
+                      : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                   )}
                 >
                   <span className="flex items-center gap-3">
                     <Icon className="h-4 w-4" />
                     <span>{item.label}</span>
                   </span>
-                  {isExpanded ? (
-                    <ChevronDown className="h-4 w-4" />
-                  ) : (
-                    <ChevronRight className="h-4 w-4" />
-                  )}
+                  {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                 </button>
 
                 {isExpanded && (
@@ -115,10 +125,10 @@ export function AdminSidebar() {
                           key={child.href}
                           href={child.href}
                           className={cn(
-                            "block px-3 py-1.5 rounded-lg transition-colors text-sm",
+                            'block px-3 py-1.5 rounded-lg transition-colors text-sm',
                             isActive
-                              ? "bg-primary text-primary-foreground shadow-sm"
-                              : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                              ? 'bg-primary text-primary-foreground shadow-sm'
+                              : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                           )}
                         >
                           {child.label}
@@ -138,10 +148,10 @@ export function AdminSidebar() {
               key={item.href}
               href={item.href!}
               className={cn(
-                "flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm font-medium",
+                'flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm font-medium',
                 isActive
-                  ? "bg-primary text-primary-foreground shadow-sm"
-                  : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                  ? 'bg-primary text-primary-foreground shadow-sm'
+                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
               )}
             >
               <Icon className="h-4 w-4" />
@@ -152,9 +162,9 @@ export function AdminSidebar() {
       </nav>
 
       <div className="mt-auto pt-8 px-2 fixed bottom-4 w-56">
-          <Link href="/dashboard" className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-2">
-              ← Back to Dashboard
-          </Link>
+        <Link href="/dashboard" className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-2">
+          ← Back to Dashboard
+        </Link>
       </div>
     </aside>
   );

frontend/components/documents/common/server-data-table.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import * as React from 'react';
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  PaginationState,
+  SortingState,
+  getPaginationRowModel,
+  OnChangeFn,
+} from '@tanstack/react-table';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+
+interface ServerDataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  pageCount: number;
+  pagination: PaginationState;
+  onPaginationChange: OnChangeFn<PaginationState>;
+  sorting: SortingState;
+  onSortingChange: OnChangeFn<SortingState>;
+  isLoading?: boolean;
+}
+
+export function ServerDataTable<TData, TValue>({
+  columns,
+  data,
+  pageCount,
+  pagination,
+  onPaginationChange,
+  sorting,
+  onSortingChange,
+  isLoading,
+}: ServerDataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    pageCount,
+    state: {
+      pagination,
+      sorting,
+    },
+    onPaginationChange,
+    onSortingChange,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    manualSorting: true,
+  });
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  Loading...
+                </TableCell>
+              </TableRow>
+            ) : table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex items-center justify-between px-2">
+        <div className="flex-1 text-sm text-muted-foreground">
+          {table.getFilteredSelectedRowModel && table.getFilteredSelectedRowModel().rows.length > 0 && (
+            <>
+              {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s)
+              selected.
+            </>
+          )}
+        </div>
+        <div className="flex items-center space-x-6 lg:space-x-8">
+          <div className="flex items-center space-x-2">
+            <p className="text-sm font-medium">Rows per page</p>
+            <Select
+              value={`${table.getState().pagination.pageSize}`}
+              onValueChange={(value) => {
+                table.setPageSize(Number(value));
+              }}
+            >
+              <SelectTrigger className="h-8 w-[70px]">
+                <SelectValue placeholder={table.getState().pagination.pageSize} />
+              </SelectTrigger>
+              <SelectContent side="top">
+                {[10, 20, 30, 40, 50].map((pageSize) => (
+                  <SelectItem key={pageSize} value={`${pageSize}`}>
+                    {pageSize}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+            Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="outline"
+              className="hidden h-8 w-8 p-0 lg:flex"
+              onClick={() => table.setPageIndex(0)}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <span className="sr-only">Go to first page</span>
+              <ChevronsLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="h-8 w-8 p-0"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <span className="sr-only">Go to previous page</span>
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="h-8 w-8 p-0"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              <span className="sr-only">Go to next page</span>
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="hidden h-8 w-8 p-0 lg:flex"
+              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              disabled={!table.getCanNextPage()}
+            >
+              <span className="sr-only">Go to last page</span>
+              <ChevronsRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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>
   );
 }