251210:1709 Frontend: reeactor organization and run build

frontend/app/(admin)/admin/contracts/page.tsx

@@ -0,0 +1,324 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { DataTable } from "@/components/common/data-table";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { projectService } from "@/lib/services/project.service";
+import { ColumnDef } from "@tanstack/react-table";
+import { Pencil, Trash, Plus, Search } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { toast } from "sonner";
+import apiClient from "@/lib/api/client";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+// import { useProjects } from "@/lib/services/project.service"; // Removed invalid import
+// I need to import useProjects hook from the page where it was defined or create it.
+// Checking projects/page.tsx, it uses useProjects from somewhere?
+// Ah, usually I define hooks in a separate file or inline if simple.
+// Let's rely on standard react-query params here.
+
+const contractSchema = z.object({
+  contractCode: z.string().min(1, "Contract Code is required"),
+  contractName: z.string().min(1, "Contract Name is required"),
+  projectId: z.string().min(1, "Project is required"),
+  description: z.string().optional(),
+  startDate: z.string().optional(),
+  endDate: z.string().optional(),
+});
+
+type ContractFormData = z.infer<typeof contractSchema>;
+
+// Inline hooks for simplicity, or could move to hooks/use-master-data
+const useContracts = (params?: any) => {
+    return useQuery({
+        queryKey: ['contracts', params],
+        queryFn: () => projectService.getAllContracts(params),
+    });
+};
+
+const useProjectsList = () => {
+    return useQuery({
+        queryKey: ['projects-list'],
+        queryFn: () => projectService.getAll(),
+    });
+};
+
+export default function ContractsPage() {
+  const [search, setSearch] = useState("");
+  const { data: contracts, isLoading } = useContracts({ search: search || undefined });
+  const { data: projects } = useProjectsList();
+
+  const queryClient = useQueryClient();
+
+  const createContract = useMutation({
+      mutationFn: (data: any) => apiClient.post("/contracts", data).then(res => res.data),
+      onSuccess: () => {
+          toast.success("Contract created successfully");
+          queryClient.invalidateQueries({ queryKey: ['contracts'] });
+          setDialogOpen(false);
+      },
+      onError: (err: any) => toast.error(err.message || "Failed to create contract")
+  });
+
+  const updateContract = useMutation({
+      mutationFn: ({ id, data }: { id: number, data: any }) => apiClient.patch(`/contracts/${id}`, data).then(res => res.data),
+      onSuccess: () => {
+          toast.success("Contract updated successfully");
+          queryClient.invalidateQueries({ queryKey: ['contracts'] });
+          setDialogOpen(false);
+      },
+      onError: (err: any) => toast.error(err.message || "Failed to update contract")
+  });
+
+  const deleteContract = useMutation({
+      mutationFn: (id: number) => apiClient.delete(`/contracts/${id}`).then(res => res.data),
+      onSuccess: () => {
+          toast.success("Contract deleted successfully");
+          queryClient.invalidateQueries({ queryKey: ['contracts'] });
+      },
+      onError: (err: any) => toast.error(err.message || "Failed to delete contract")
+  });
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingId, setEditingId] = useState<number | null>(null);
+
+  const {
+      register,
+      handleSubmit,
+      reset,
+      setValue,
+      watch,
+      formState: { errors },
+  } = useForm<ContractFormData>({
+      resolver: zodResolver(contractSchema),
+      defaultValues: {
+          contractCode: "",
+          contractName: "",
+          projectId: "",
+          description: "",
+      },
+  });
+
+  const columns: ColumnDef<any>[] = [
+    {
+       accessorKey: "contractCode",
+       header: "Code",
+       cell: ({ row }) => <span className="font-medium">{row.original.contractCode}</span>
+    },
+    { accessorKey: "contractName", header: "Name" },
+    {
+        accessorKey: "project.projectCode",
+        header: "Project",
+        cell: ({ row }) => row.original.project?.projectCode || "-"
+    },
+    { accessorKey: "startDate", header: "Start Date" },
+    { accessorKey: "endDate", header: "End Date" },
+    {
+        id: "actions",
+        header: "Actions",
+        cell: ({ row }) => (
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" className="h-8 w-8 p-0">
+                        <span className="sr-only">Open menu</span>
+                        <Pencil className="h-4 w-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => handleEdit(row.original)}>
+                        <Pencil className="mr-2 h-4 w-4" /> Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        className="text-red-600"
+                        onClick={() => {
+                            if (confirm(`Delete contract ${row.original.contractCode}?`)) {
+                                deleteContract.mutate(row.original.id);
+                            }
+                        }}
+                    >
+                        <Trash className="mr-2 h-4 w-4" /> Delete
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        )
+    }
+  ];
+
+  const handleEdit = (contract: any) => {
+      setEditingId(contract.id);
+      reset({
+          contractCode: contract.contractCode,
+          contractName: contract.contractName,
+          projectId: contract.projectId?.toString() || "",
+          description: contract.description || "",
+          startDate: contract.startDate ? new Date(contract.startDate).toISOString().split('T')[0] : "",
+          endDate: contract.endDate ? new Date(contract.endDate).toISOString().split('T')[0] : "",
+      });
+      setDialogOpen(true);
+  };
+
+  const handleCreate = () => {
+      setEditingId(null);
+      reset({
+          contractCode: "",
+          contractName: "",
+          projectId: "",
+          description: "",
+          startDate: "",
+          endDate: "",
+      });
+      setDialogOpen(true);
+  };
+
+  const onSubmit = (data: ContractFormData) => {
+      const submitData = {
+          ...data,
+          projectId: parseInt(data.projectId),
+      };
+
+      if (editingId) {
+          updateContract.mutate({ id: editingId, data: submitData });
+      } else {
+          createContract.mutate(submitData);
+      }
+  };
+
+  return (
+    <div className="space-y-6 p-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold">Contracts</h1>
+          <p className="text-muted-foreground mt-1">Manage construction contracts</p>
+        </div>
+        <Button onClick={handleCreate}>
+            <Plus className="mr-2 h-4 w-4" /> Add Contract
+        </Button>
+      </div>
+
+       <div className="flex items-center space-x-2 bg-muted/30 p-4 rounded-lg">
+          <div className="relative flex-1 max-w-sm">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                  placeholder="Search contracts..."
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  className="pl-8 bg-background"
+              />
+          </div>
+       </div>
+
+      {isLoading ? (
+          <div className="text-center py-10">Loading contracts...</div>
+      ) : (
+          <DataTable columns={columns} data={contracts || []} />
+      )}
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{editingId ? "Edit Contract" : "New Contract"}</DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+
+            <div className="space-y-2">
+                <Label>Project *</Label>
+                <Select
+                    value={watch("projectId")}
+                    onValueChange={(value) => setValue("projectId", value)}
+                >
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select Project" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {projects?.map((p: any) => (
+                            <SelectItem key={p.id} value={p.id.toString()}>
+                                {p.projectCode} - {p.projectName}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                {errors.projectId && (
+                    <p className="text-sm text-red-500">{errors.projectId.message}</p>
+                )}
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                    <Label>Contract Code *</Label>
+                    <Input
+                        placeholder="e.g. C-001"
+                        {...register("contractCode")}
+                    />
+                    {errors.contractCode && (
+                        <p className="text-sm text-red-500">{errors.contractCode.message}</p>
+                    )}
+                </div>
+
+                <div className="space-y-2">
+                    <Label>Contract Name *</Label>
+                    <Input
+                        placeholder="e.g. Main Construction"
+                        {...register("contractName")}
+                    />
+                    {errors.contractName && (
+                        <p className="text-sm text-red-500">{errors.contractName.message}</p>
+                    )}
+                </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Description</Label>
+              <Input
+                placeholder="Optional description"
+                {...register("description")}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label>Start Date</Label>
+                  <Input type="date" {...register("startDate")} />
+                </div>
+                <div className="space-y-2">
+                  <Label>End Date</Label>
+                  <Input type="date" {...register("endDate")} />
+                </div>
+            </div>
+
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={createContract.isPending || updateContract.isPending}>
+                {editingId ? "Save Changes" : "Create Contract"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

frontend/app/(admin)/admin/numbering/[id]/edit/page.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import { TemplateEditor } from "@/components/numbering/template-editor";
 import { SequenceViewer } from "@/components/numbering/sequence-viewer";
 import { numberingApi } from "@/lib/api/numbering";
-import { CreateTemplateDto } from "@/types/numbering";
+import { NumberingTemplate } from "@/types/numbering";
 import { useRouter } from "next/navigation";
 import { Loader2 } from "lucide-react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -12,7 +12,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 export default function EditTemplatePage({ params }: { params: { id: string } }) {
   const router = useRouter();
   const [loading, setLoading] = useState(true);
-  const [initialData, setInitialData] = useState<Partial<CreateTemplateDto> | null>(null);
+  const [template, setTemplate] = useState<NumberingTemplate | null>(null);
 
   useEffect(() => {
     const fetchTemplate = async () => {
@@ -20,14 +20,7 @@ export default function EditTemplatePage({ params }: { params: { id: string } })
       try {
         const data = await numberingApi.getTemplate(parseInt(params.id));
         if (data) {
-          setInitialData({
-            document_type_id: data.document_type_id,
-            discipline_code: data.discipline_code,
-            template_format: data.template_format,
-            reset_annually: data.reset_annually,
-            padding_length: data.padding_length,
-            starting_number: 1, // Default for edit view as we don't usually reset this
-          });
+          setTemplate(data);
         }
       } catch (error) {
         console.error("Failed to fetch template", error);
@@ -39,9 +32,9 @@ export default function EditTemplatePage({ params }: { params: { id: string } })
     fetchTemplate();
   }, [params.id]);
 
-  const handleSave = async (data: CreateTemplateDto) => {
+  const handleSave = async (data: Partial<NumberingTemplate>) => {
     try {
-      await numberingApi.updateTemplate(parseInt(params.id), data);
+      await numberingApi.saveTemplate({ ...data, templateId: parseInt(params.id) });
       router.push("/admin/numbering");
     } catch (error) {
       console.error("Failed to update template", error);
@@ -49,6 +42,10 @@ export default function EditTemplatePage({ params }: { params: { id: string } })
     }
   };
 
+  const handleCancel = () => {
+    router.push("/admin/numbering");
+  };
+
   if (loading) {
     return (
       <div className="flex justify-center py-12">
@@ -57,6 +54,14 @@ export default function EditTemplatePage({ params }: { params: { id: string } })
     );
   }
 
+  if (!template) {
+    return (
+      <div className="p-6">
+        <p className="text-muted-foreground">Template not found</p>
+      </div>
+    );
+  }
+
   return (
     <div className="p-6 space-y-6">
       <h1 className="text-3xl font-bold">Edit Numbering Template</h1>
@@ -68,13 +73,17 @@ export default function EditTemplatePage({ params }: { params: { id: string } })
         </TabsList>
 
         <TabsContent value="config" className="mt-4">
-          {initialData && (
-            <TemplateEditor initialData={initialData} onSave={handleSave} />
-          )}
+          <TemplateEditor
+            template={template}
+            projectId={template.projectId || 1}
+            projectName="LCBP3"
+            onSave={handleSave}
+            onCancel={handleCancel}
+          />
         </TabsContent>
 
         <TabsContent value="sequences" className="mt-4">
-          <SequenceViewer templateId={parseInt(params.id)} />
+          <SequenceViewer />
         </TabsContent>
       </Tabs>
     </div>

frontend/app/(admin)/admin/numbering/new/page.tsx

@@ -1,16 +1,15 @@
 "use client";
 
 import { TemplateEditor } from "@/components/numbering/template-editor";
-import { numberingApi } from "@/lib/api/numbering";
-import { CreateTemplateDto } from "@/types/numbering";
+import { numberingApi, NumberingTemplate } from "@/lib/api/numbering";
 import { useRouter } from "next/navigation";
 
 export default function NewTemplatePage() {
   const router = useRouter();
 
-  const handleSave = async (data: CreateTemplateDto) => {
+  const handleSave = async (data: Partial<NumberingTemplate>) => {
     try {
-      await numberingApi.createTemplate(data);
+      await numberingApi.saveTemplate(data);
       router.push("/admin/numbering");
     } catch (error) {
       console.error("Failed to create template", error);
@@ -18,10 +17,19 @@ export default function NewTemplatePage() {
     }
   };
 
+  const handleCancel = () => {
+    router.push("/admin/numbering");
+  };
+
   return (
     <div className="p-6 space-y-6">
       <h1 className="text-3xl font-bold">New Numbering Template</h1>
-      <TemplateEditor onSave={handleSave} />
+      <TemplateEditor
+        projectId={1}
+        projectName="LCBP3"
+        onSave={handleSave}
+        onCancel={handleCancel}
+      />
     </div>
   );
 }

frontend/app/(admin)/admin/numbering/page.tsx

@@ -61,7 +61,7 @@ export default function NumberingPage() {
   const handleSave = async (data: Partial<NumberingTemplate>) => {
       try {
           await numberingApi.saveTemplate(data);
-          toast.success(data.template_id ? "Template updated" : "Template created");
+          toast.success(data.templateId ? "Template updated" : "Template created");
           setIsEditing(false);
           loadTemplates();
       } catch {
@@ -124,39 +124,39 @@ export default function NumberingPage() {
             <h2 className="text-lg font-semibold">Templates - {selectedProjectName}</h2>
             <div className="grid gap-4">
                 {templates
-                  .filter(t => !t.project_id || t.project_id === Number(selectedProjectId)) // Show all if no project_id (legacy mock), or match
+                  .filter(t => !t.projectId || t.projectId === Number(selectedProjectId))
                   .map((template) => (
-                <Card key={template.template_id} className="p-6 hover:shadow-md transition-shadow">
+                <Card key={template.templateId} className="p-6 hover:shadow-md transition-shadow">
                     <div className="flex justify-between items-start">
                     <div className="flex-1">
                         <div className="flex items-center gap-3 mb-2">
                         <h3 className="text-lg font-semibold">
-                            {template.document_type_name}
+                            {template.documentTypeName}
                         </h3>
                         <Badge variant="outline" className="text-xs">
-                             {PROJECTS.find(p => p.id === template.project_id?.toString())?.name || selectedProjectName}
+                             {PROJECTS.find(p => p.id === template.projectId?.toString())?.name || selectedProjectName}
                         </Badge>
-                        {template.discipline_code && <Badge>{template.discipline_code}</Badge>}
-                        <Badge variant={template.is_active ? 'default' : 'secondary'}>
-                            {template.is_active ? 'Active' : 'Inactive'}
+                        {template.disciplineCode && <Badge>{template.disciplineCode}</Badge>}
+                        <Badge variant={template.isActive ? 'default' : 'secondary'}>
+                            {template.isActive ? 'Active' : 'Inactive'}
                         </Badge>
                         </div>
 
                         <div className="bg-slate-100 dark:bg-slate-900 rounded px-3 py-2 mb-3 font-mono text-sm inline-block border">
-                        {template.template_format}
+                        {template.templateFormat}
                         </div>
 
                         <div className="grid grid-cols-2 gap-4 text-sm mt-2">
                             <div>
                                 <span className="text-muted-foreground">Example: </span>
                                 <span className="font-medium font-mono text-green-600 dark:text-green-400">
-                                {template.example_number}
+                                {template.exampleNumber}
                                 </span>
                             </div>
                             <div>
                                 <span className="text-muted-foreground">Reset: </span>
                                 <span>
-                                {template.reset_annually ? 'Annually' : 'Never'}
+                                {template.resetAnnually ? 'Annually' : 'Never'}
                                 </span>
                             </div>
                         </div>

frontend/app/(admin)/admin/organizations/page.tsx

@@ -4,173 +4,161 @@ import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { DataTable } from "@/components/common/data-table";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
 import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { useOrganizations, useCreateOrganization, useUpdateOrganization, useDeleteOrganization } from "@/hooks/use-master-data";
+  useOrganizations,
+  useDeleteOrganization,
+} from "@/hooks/use-master-data";
 import { ColumnDef } from "@tanstack/react-table";
-import { Pencil, Trash, Plus } from "lucide-react";
+import { Pencil, Trash, Plus, Search, MoreHorizontal } from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Organization } from "@/types/organization";
+import { OrganizationDialog } from "@/components/admin/organization-dialog";
 
-interface Organization {
-    organization_id: number;
-    org_code: string;
-    org_name: string;
-    org_name_th: string;
-    description?: string;
-}
+// Organization role types for display
+const ORGANIZATION_ROLES = [
+  { value: "1", label: "Owner" },
+  { value: "2", label: "Designer" },
+  { value: "3", label: "Consultant" },
+  { value: "4", label: "Contractor" },
+  { value: "5", label: "Third Party" },
+] as const;
 
 export default function OrganizationsPage() {
-  const { data: organizations, isLoading } = useOrganizations();
-  const createOrg = useCreateOrganization();
-  const updateOrg = useUpdateOrganization();
+  const [search, setSearch] = useState("");
+  const { data: organizations, isLoading } = useOrganizations({
+    search: search || undefined,
+  });
+
   const deleteOrg = useDeleteOrganization();
 
   const [dialogOpen, setDialogOpen] = useState(false);
-  const [editingOrg, setEditingOrg] = useState<Organization | null>(null);
-  const [formData, setFormData] = useState({
-    org_code: "",
-    org_name: "",
-    org_name_th: "",
-    description: "",
-  });
+  const [selectedOrganization, setSelectedOrganization] =
+    useState<Organization | null>(null);
 
   const columns: ColumnDef<Organization>[] = [
-    { accessorKey: "org_code", header: "Code" },
-    { accessorKey: "org_name", header: "Name (EN)" },
-    { accessorKey: "org_name_th", header: "Name (TH)" },
-    { accessorKey: "description", header: "Description" },
     {
-        id: "actions",
-        header: "Actions",
-        cell: ({ row }) => (
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" className="h-8 w-8 p-0">
-                        <span className="sr-only">Open menu</span>
-                        <Pencil className="h-4 w-4" />
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                    <DropdownMenuItem onClick={() => handleEdit(row.original)}>
-                        Edit
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                        className="text-red-600"
-                        onClick={() => {
-                            if (confirm("Delete this organization?")) {
-                                deleteOrg.mutate(row.original.organization_id);
-                            }
-                        }}
-                    >
-                        Delete
-                    </DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        )
-    }
+      accessorKey: "organizationCode",
+      header: "Code",
+      cell: ({ row }) => (
+        <span className="font-medium">{row.original.organizationCode}</span>
+      ),
+    },
+    { accessorKey: "organizationName", header: "Name" },
+    {
+      accessorKey: "roleId",
+      header: "Role",
+      cell: ({ row }) => {
+        const roleId = row.getValue("roleId") as number;
+        const role = ORGANIZATION_ROLES.find(
+          (r) => r.value === roleId?.toString()
+        );
+        return role ? role.label : "-";
+      },
+    },
+    {
+      accessorKey: "isActive",
+      header: "Status",
+      cell: ({ row }) => (
+        <Badge variant={row.original.isActive ? "default" : "destructive"}>
+          {row.original.isActive ? "Active" : "Inactive"}
+        </Badge>
+      ),
+    },
+    {
+      accessorKey: "createdAt",
+      header: "Created At",
+      cell: ({ row }) => {
+        if (!row.original.createdAt) return "-";
+        return new Date(row.original.createdAt).toLocaleDateString("en-GB");
+      },
+    },
+    {
+      id: "actions",
+      header: "Actions",
+      cell: ({ row }) => {
+        const org = 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">
+              <DropdownMenuItem
+                onClick={() => {
+                  setSelectedOrganization(org);
+                  setDialogOpen(true);
+                }}
+              >
+                <Pencil className="mr-2 h-4 w-4" /> Edit
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-red-600"
+                onClick={() => {
+                  if (confirm(`Delete organization ${org.organizationCode}?`)) {
+                    deleteOrg.mutate(org.id);
+                  }
+                }}
+              >
+                <Trash className="mr-2 h-4 w-4" /> Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      },
+    },
   ];
 
-  const handleEdit = (org: Organization) => {
-      setEditingOrg(org);
-      setFormData({
-          org_code: org.org_code,
-          org_name: org.org_name,
-          org_name_th: org.org_name_th,
-          description: org.description || ""
-      });
-      setDialogOpen(true);
-  };
-
-  const handleAdd = () => {
-      setEditingOrg(null);
-      setFormData({ org_code: "", org_name: "", org_name_th: "", description: "" });
-      setDialogOpen(true);
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-      e.preventDefault();
-      if (editingOrg) {
-          updateOrg.mutate({ id: editingOrg.organization_id, data: formData }, {
-              onSuccess: () => setDialogOpen(false)
-          });
-      } else {
-          createOrg.mutate(formData, {
-              onSuccess: () => setDialogOpen(false)
-          });
-      }
-  };
-
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 p-6">
       <div className="flex justify-between items-center">
         <div>
           <h1 className="text-3xl font-bold">Organizations</h1>
-          <p className="text-muted-foreground mt-1">Manage project organizations system-wide</p>
+          <p className="text-muted-foreground mt-1">
+            Manage project organizations system-wide
+          </p>
         </div>
-        <Button onClick={handleAdd}>
-            <Plus className="mr-2 h-4 w-4" /> Add Organization
+        <Button
+          onClick={() => {
+            setSelectedOrganization(null);
+            setDialogOpen(true);
+          }}
+        >
+          <Plus className="mr-2 h-4 w-4" /> Add Organization
         </Button>
       </div>
 
-      <DataTable columns={columns} data={organizations || []} />
+      <div className="flex items-center space-x-2 bg-muted/30 p-4 rounded-lg">
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search organizations..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-8 bg-background"
+          />
+        </div>
+      </div>
 
-      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{editingOrg ? "Edit Organization" : "New Organization"}</DialogTitle>
-          </DialogHeader>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <Label>Code</Label>
-              <Input
-                value={formData.org_code}
-                onChange={(e) => setFormData({ ...formData, org_code: e.target.value })}
-                required
-              />
-            </div>
-            <div>
-              <Label>Name (EN)</Label>
-              <Input
-                value={formData.org_name}
-                onChange={(e) => setFormData({ ...formData, org_name: e.target.value })}
-                required
-              />
-            </div>
-            <div>
-              <Label>Name (TH)</Label>
-              <Input
-                value={formData.org_name_th}
-                onChange={(e) => setFormData({ ...formData, org_name_th: e.target.value })}
-              />
-            </div>
-            <div>
-              <Label>Description</Label>
-              <Input
-                value={formData.description}
-                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-              />
-            </div>
-            <div className="flex justify-end gap-2 pt-4">
-              <Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>
-                Cancel
-              </Button>
-              <Button type="submit" disabled={createOrg.isPending || updateOrg.isPending}>
-                Save
-              </Button>
-            </div>
-          </form>
-        </DialogContent>
-      </Dialog>
+      {isLoading ? (
+        <div className="text-center py-10">Loading organizations...</div>
+      ) : (
+        <DataTable columns={columns} data={organizations || []} />
+      )}
+
+      <OrganizationDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        organization={selectedOrganization}
+      />
     </div>
   );
 }

frontend/app/(admin)/admin/projects/page.tsx

@@ -11,6 +11,7 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
+  DialogFooter,
 } from "@/components/ui/dialog";
 import {
   useProjects,
@@ -19,7 +20,7 @@ import {
   useDeleteProject,
 } from "@/hooks/use-projects";
 import { ColumnDef } from "@tanstack/react-table";
-import { Pencil, Trash, Plus, Folder } from "lucide-react";
+import { Pencil, Trash, Plus, Folder, Search as SearchIcon } from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -27,6 +28,9 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Badge } from "@/components/ui/badge";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
 
 interface Project {
   id: number;
@@ -37,18 +41,39 @@ interface Project {
   updatedAt: string;
 }
 
+const projectSchema = z.object({
+  projectCode: z.string().min(1, "Project Code is required"),
+  projectName: z.string().min(1, "Project Name is required"),
+  isActive: z.boolean().optional(),
+});
+
+type ProjectFormData = z.infer<typeof projectSchema>;
+
 export default function ProjectsPage() {
-  const { data: projects, isLoading } = useProjects();
+  const [search, setSearch] = useState("");
+  const { data: projects, isLoading } = useProjects({ search: search || undefined });
+
   const createProject = useCreateProject();
   const updateProject = useUpdateProject();
   const deleteProject = useDeleteProject();
 
   const [dialogOpen, setDialogOpen] = useState(false);
-  const [editingProject, setEditingProject] = useState<Project | null>(null);
-  const [formData, setFormData] = useState({
-    projectCode: "",
-    projectName: "",
-    isActive: true,
+  const [editingId, setEditingId] = useState<number | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<ProjectFormData>({
+    resolver: zodResolver(projectSchema),
+    defaultValues: {
+      projectCode: "",
+      projectName: "",
+      isActive: true,
+    },
   });
 
   const columns: ColumnDef<Project>[] = [
@@ -104,8 +129,8 @@ export default function ProjectsPage() {
   ];
 
   const handleEdit = (project: Project) => {
-    setEditingProject(project);
-    setFormData({
+    setEditingId(project.id);
+    reset({
       projectCode: project.projectCode,
       projectName: project.projectName,
       isActive: project.isActive,
@@ -113,30 +138,33 @@ export default function ProjectsPage() {
     setDialogOpen(true);
   };
 
-  const handleAdd = () => {
-    setEditingProject(null);
-    setFormData({ projectCode: "", projectName: "", isActive: true });
+  const handleCreate = () => {
+    setEditingId(null);
+    reset({
+      projectCode: "",
+      projectName: "",
+      isActive: true,
+    });
     setDialogOpen(true);
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (editingProject) {
+  const onSubmit = (data: ProjectFormData) => {
+    if (editingId) {
       updateProject.mutate(
-        { id: editingProject.id, data: formData },
+        { id: editingId, data },
         {
           onSuccess: () => setDialogOpen(false),
         }
       );
     } else {
-      createProject.mutate(formData, {
+      createProject.mutate(data, {
         onSuccess: () => setDialogOpen(false),
       });
     }
   };
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 p-6">
       <div className="flex justify-between items-center">
         <div>
           <h1 className="text-3xl font-bold">Projects</h1>
@@ -144,55 +172,70 @@ export default function ProjectsPage() {
             Manage construction projects and configurations
           </p>
         </div>
-        <Button onClick={handleAdd}>
+        <Button onClick={handleCreate}>
           <Plus className="mr-2 h-4 w-4" /> Add Project
         </Button>
       </div>
 
-      <DataTable columns={columns} data={projects || []} />
+      <div className="flex items-center space-x-2 bg-muted/30 p-4 rounded-lg">
+        <div className="relative flex-1 max-w-sm">
+            <SearchIcon className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+                placeholder="Search projects by code or name..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="pl-8 bg-background"
+            />
+        </div>
+      </div>
+
+      {isLoading ? (
+         <div className="text-center py-10">Loading projects...</div>
+      ) : (
+         <DataTable columns={columns} data={projects || []} />
+      )}
 
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>
-              {editingProject ? "Edit Project" : "New Project"}
+              {editingId ? "Edit Project" : "New Project"}
             </DialogTitle>
           </DialogHeader>
-          <form onSubmit={handleSubmit} className="space-y-4">
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
             <div className="space-y-2">
-              <Label>Project Code</Label>
+              <Label>Project Code *</Label>
               <Input
                 placeholder="e.g. LCBP3"
-                value={formData.projectCode}
-                onChange={(e) =>
-                  setFormData({ ...formData, projectCode: e.target.value })
-                }
-                required
-                disabled={!!editingProject} // Code is usually immutable or derived
+                {...register("projectCode")}
+                disabled={!!editingId} // Code is immutable after creation usually
               />
+              {errors.projectCode && (
+                  <p className="text-sm text-red-500">{errors.projectCode.message}</p>
+              )}
             </div>
+
             <div className="space-y-2">
-              <Label>Project Name</Label>
+              <Label>Project Name *</Label>
               <Input
                 placeholder="Full project name"
-                value={formData.projectName}
-                onChange={(e) =>
-                  setFormData({ ...formData, projectName: e.target.value })
-                }
-                required
+                {...register("projectName")}
               />
+              {errors.projectName && (
+                  <p className="text-sm text-red-500">{errors.projectName.message}</p>
+              )}
             </div>
+
             <div className="flex items-center space-x-2 pt-2">
               <Switch
                 id="active"
-                checked={formData.isActive}
-                onCheckedChange={(checked) =>
-                  setFormData({ ...formData, isActive: checked })
-                }
+                checked={watch("isActive")}
+                onCheckedChange={(checked) => setValue("isActive", checked)}
               />
               <Label htmlFor="active">Active Status</Label>
             </div>
-            <div className="flex justify-end gap-2 pt-4">
+
+            <DialogFooter>
               <Button
                 type="button"
                 variant="outline"
@@ -204,9 +247,9 @@ export default function ProjectsPage() {
                 type="submit"
                 disabled={createProject.isPending || updateProject.isPending}
               >
-                Save
+                {editingId ? "Save Changes" : "Create Project"}
               </Button>
-            </div>
+            </DialogFooter>
           </form>
         </DialogContent>
       </Dialog>

frontend/app/(admin)/admin/reference/correspondence-types/page.tsx

@@ -1,33 +1,40 @@
 "use client";
 
 import { GenericCrudTable } from "@/components/admin/reference/generic-crud-table";
+import { masterDataService } from "@/lib/services/master-data.service";
 import { ColumnDef } from "@tanstack/react-table";
-import apiClient from "@/lib/api/client";
-
-// Service wrapper
-const correspondenceTypeService = {
-  getAll: async () => (await apiClient.get("/master/correspondence-types")).data,
-  create: async (data: any) => (await apiClient.post("/master/correspondence-types", data)).data,
-  update: async (id: number, data: any) => (await apiClient.patch(`/master/correspondence-types/${id}`, data)).data,
-  delete: async (id: number) => (await apiClient.delete(`/master/correspondence-types/${id}`)).data,
-};
 
 export default function CorrespondenceTypesPage() {
   const columns: ColumnDef<any>[] = [
     {
-      accessorKey: "type_code",
+      accessorKey: "typeCode",
       header: "Code",
       cell: ({ row }) => (
-        <span className="font-mono font-bold">{row.getValue("type_code")}</span>
+        <span className="font-mono font-bold">{row.getValue("typeCode")}</span>
       ),
     },
     {
-      accessorKey: "type_name_th",
-      header: "Name (TH)",
+      accessorKey: "typeName",
+      header: "Name",
     },
     {
-      accessorKey: "type_name_en",
-      header: "Name (EN)",
+      accessorKey: "sortOrder",
+      header: "Sort Order",
+    },
+    {
+      accessorKey: "isActive",
+      header: "Status",
+      cell: ({ row }) => (
+        <span
+          className={`px-2 py-1 rounded-full text-xs ${
+            row.getValue("isActive")
+              ? "bg-green-100 text-green-800"
+              : "bg-red-100 text-red-800"
+          }`}
+        >
+          {row.getValue("isActive") ? "Active" : "Inactive"}
+        </span>
+      ),
     },
   ];
 
@@ -36,16 +43,18 @@ export default function CorrespondenceTypesPage() {
       <GenericCrudTable
         entityName="Correspondence Type"
         title="Correspondence Types Management"
+        description="Manage global correspondence types (e.g., LETTER, TRANSMITTAL)"
         queryKey={["correspondence-types"]}
-        fetchFn={correspondenceTypeService.getAll}
-        createFn={correspondenceTypeService.create}
-        updateFn={correspondenceTypeService.update}
-        deleteFn={correspondenceTypeService.delete}
+        fetchFn={() => masterDataService.getCorrespondenceTypes()}
+        createFn={(data) => masterDataService.createCorrespondenceType(data)}
+        updateFn={(id, data) => masterDataService.updateCorrespondenceType(id, data)}
+        deleteFn={(id) => masterDataService.deleteCorrespondenceType(id)}
         columns={columns}
         fields={[
-          { name: "type_code", label: "Code", type: "text", required: true },
-          { name: "type_name_th", label: "Name (TH)", type: "text", required: true },
-          { name: "type_name_en", label: "Name (EN)", type: "text" },
+          { name: "typeCode", label: "Code", type: "text", required: true },
+          { name: "typeName", label: "Name", type: "text", required: true },
+          { name: "sortOrder", label: "Sort Order", type: "text" },
+          { name: "isActive", label: "Active", type: "checkbox" },
         ]}
       />
     </div>

frontend/app/(admin)/admin/reference/disciplines/page.tsx

@@ -2,59 +2,135 @@
 
 import { GenericCrudTable } from "@/components/admin/reference/generic-crud-table";
 import { masterDataService } from "@/lib/services/master-data.service";
+import { projectService } from "@/lib/services/project.service";
 import { ColumnDef } from "@tanstack/react-table";
+import { useState, useEffect } from "react";
+import apiClient from "@/lib/api/client";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 export default function DisciplinesPage() {
+  const [contracts, setContracts] = useState<any[]>([]);
+  const [selectedContractId, setSelectedContractId] = useState<string | null>(
+    null
+  );
+
+  useEffect(() => {
+    // Fetch contracts for filter and form options
+    // Fetch contracts for filter and form options
+    projectService.getAllContracts().then((data) => {
+      setContracts(Array.isArray(data) ? data : []);
+    }).catch(err => {
+        console.error("Failed to load contracts:", err);
+        setContracts([]);
+    });
+  }, []);
+
   const columns: ColumnDef<any>[] = [
     {
-      accessorKey: "discipline_code",
+      accessorKey: "disciplineCode",
       header: "Code",
       cell: ({ row }) => (
-        <span className="font-mono font-bold">{row.getValue("discipline_code")}</span>
+        <span className="font-mono font-bold">
+          {row.getValue("disciplineCode")}
+        </span>
       ),
     },
     {
-      accessorKey: "code_name_th",
+      accessorKey: "codeNameTh",
       header: "Name (TH)",
     },
     {
-      accessorKey: "code_name_en",
+      accessorKey: "codeNameEn",
       header: "Name (EN)",
     },
     {
-      accessorKey: "is_active",
+      accessorKey: "isActive",
       header: "Status",
       cell: ({ row }) => (
         <span
           className={`px-2 py-1 rounded-full text-xs ${
-            row.getValue("is_active")
+            row.getValue("isActive")
               ? "bg-green-100 text-green-800"
               : "bg-red-100 text-red-800"
           }`}
         >
-          {row.getValue("is_active") ? "Active" : "Inactive"}
+          {row.getValue("isActive") ? "Active" : "Inactive"}
         </span>
       ),
     },
   ];
 
+  const contractOptions = contracts.map((c) => ({
+    label: `${c.contractName} (${c.contractNo})`,
+    value: c.id,
+  }));
+
   return (
     <div className="p-6">
       <GenericCrudTable
         entityName="Discipline"
         title="Disciplines Management"
         description="Manage system disciplines (e.g., ARCH, STR, MEC)"
-        queryKey={["disciplines"]}
-        fetchFn={() => masterDataService.getDisciplines()} // Assuming generic fetch supports no args for all
-        createFn={(data) => masterDataService.createDiscipline({ ...data, contractId: 1 })} // Default contract for now
-        updateFn={(id, data) => Promise.reject("Not implemented yet")} // Update endpoint might need addition
+        queryKey={["disciplines", selectedContractId ?? "all"]}
+        fetchFn={() =>
+          masterDataService.getDisciplines(
+            selectedContractId ? parseInt(selectedContractId) : undefined
+          )
+        }
+        createFn={(data) => masterDataService.createDiscipline(data)}
+        updateFn={(id, data) => Promise.reject("Not implemented yet")} // Update endpoint needs to be verified/added if missing
         deleteFn={(id) => masterDataService.deleteDiscipline(id)}
         columns={columns}
+        filters={
+          <div className="w-[300px]">
+            <Select
+              value={selectedContractId || "all"}
+              onValueChange={(val) =>
+                setSelectedContractId(val === "all" ? null : val)
+              }
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Filter by Contract" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Contracts</SelectItem>
+                {contracts.map((c) => (
+                  <SelectItem key={c.id} value={c.id.toString()}>
+                    {c.contractName} ({c.contractNo})
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        }
         fields={[
-          { name: "discipline_code", label: "Code", type: "text", required: true },
-          { name: "code_name_th", label: "Name (TH)", type: "text", required: true },
-          { name: "code_name_en", label: "Name (EN)", type: "text" },
-          { name: "is_active", label: "Active", type: "checkbox" },
+          {
+            name: "contractId",
+            label: "Contract",
+            type: "select",
+            required: true,
+            options: contractOptions,
+          },
+          {
+            name: "disciplineCode",
+            label: "Code",
+            type: "text",
+            required: true,
+          },
+          {
+            name: "codeNameTh",
+            label: "Name (TH)",
+            type: "text",
+            required: true,
+          },
+          { name: "codeNameEn", label: "Name (EN)", type: "text" },
+          { name: "isActive", label: "Active", type: "checkbox" },
         ]}
       />
     </div>

frontend/app/(admin)/admin/reference/rfa-types/page.tsx

@@ -2,51 +2,127 @@
 
 import { GenericCrudTable } from "@/components/admin/reference/generic-crud-table";
 import { masterDataService } from "@/lib/services/master-data.service";
+import { projectService } from "@/lib/services/project.service";
 import { ColumnDef } from "@tanstack/react-table";
+import { useState, useEffect } from "react";
 import apiClient from "@/lib/api/client";
-
-// Extending masterDataService locally if needed or using direct API calls for specific RFA types logic
-const rfaTypeService = {
-  getAll: async () => (await apiClient.get("/master/rfa-types")).data,
-  create: async (data: any) => (await apiClient.post("/master/rfa-types", data)).data, // Endpoint assumption
-  update: async (id: number, data: any) => (await apiClient.patch(`/master/rfa-types/${id}`, data)).data,
-  delete: async (id: number) => (await apiClient.delete(`/master/rfa-types/${id}`)).data,
-};
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 export default function RfaTypesPage() {
+  const [contracts, setContracts] = useState<any[]>([]);
+  const [selectedContractId, setSelectedContractId] = useState<string | null>(
+    null
+  );
+
+  useEffect(() => {
+    // Fetch contracts for filter and form options
+    // Fetch contracts for filter and form options
+    projectService.getAllContracts().then((data) => {
+      setContracts(Array.isArray(data) ? data : []);
+    }).catch(err => {
+        console.error("Failed to load contracts:", err);
+        setContracts([]);
+    });
+  }, []);
+
   const columns: ColumnDef<any>[] = [
     {
-      accessorKey: "type_code",
+      accessorKey: "typeCode",
       header: "Code",
       cell: ({ row }) => (
-        <span className="font-mono font-bold">{row.getValue("type_code")}</span>
+        <span className="font-mono font-bold">{row.getValue("typeCode")}</span>
       ),
     },
     {
-      accessorKey: "type_name_th",
+      accessorKey: "typeNameTh",
       header: "Name (TH)",
     },
     {
-      accessorKey: "type_name_en",
+      accessorKey: "typeNameEn",
       header: "Name (EN)",
     },
+    {
+      accessorKey: "remark",
+      header: "Remark",
+    },
+    {
+      accessorKey: "isActive",
+      header: "Status",
+      cell: ({ row }) => (
+        <span
+          className={`px-2 py-1 rounded-full text-xs ${
+            row.getValue("isActive")
+              ? "bg-green-100 text-green-800"
+              : "bg-red-100 text-red-800"
+          }`}
+        >
+          {row.getValue("isActive") ? "Active" : "Inactive"}
+        </span>
+      ),
+    },
   ];
 
+  const contractOptions = contracts.map((c) => ({
+    label: `${c.contractName} (${c.contractNo})`,
+    value: c.id,
+  }));
+
   return (
     <div className="p-6">
       <GenericCrudTable
         entityName="RFA Type"
         title="RFA Types Management"
-        queryKey={["rfa-types"]}
-        fetchFn={rfaTypeService.getAll}
-        createFn={rfaTypeService.create}
-        updateFn={rfaTypeService.update}
-        deleteFn={rfaTypeService.delete}
+        queryKey={["rfa-types", selectedContractId ?? "all"]}
+        fetchFn={() =>
+          masterDataService.getRfaTypes(
+            selectedContractId ? parseInt(selectedContractId) : undefined
+          )
+        }
+        createFn={(data) => masterDataService.createRfaType(data)}
+        updateFn={(id, data) => masterDataService.updateRfaType(id, data)}
+        deleteFn={(id) => masterDataService.deleteRfaType(id)}
         columns={columns}
+        filters={
+          <div className="w-[300px]">
+            <Select
+              value={selectedContractId || "all"}
+              onValueChange={(val) =>
+                setSelectedContractId(val === "all" ? null : val)
+              }
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Filter by Contract" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Contracts</SelectItem>
+                {contracts.map((c) => (
+                  <SelectItem key={c.id} value={c.id.toString()}>
+                    {c.contractName} ({c.contractNo})
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        }
         fields={[
-          { name: "type_code", label: "Code", type: "text", required: true },
-          { name: "type_name_th", label: "Name (TH)", type: "text", required: true },
-          { name: "type_name_en", label: "Name (EN)", type: "text" },
+          {
+            name: "contractId",
+            label: "Contract",
+            type: "select",
+            required: true,
+            options: contractOptions,
+          },
+          { name: "typeCode", label: "Code", type: "text", required: true },
+          { name: "typeNameTh", label: "Name (TH)", type: "text", required: true },
+          { name: "typeNameEn", label: "Name (EN)", type: "text" },
+          { name: "remark", label: "Remark", type: "textarea" },
+          { name: "isActive", label: "Active", type: "checkbox" },
         ]}
       />
     </div>

frontend/app/(admin)/admin/security/sessions/page.tsx

@@ -15,8 +15,8 @@ interface Session {
   userId: number;
   user: {
     username: string;
-    first_name: string;
-    last_name: string;
+    firstName: string;
+    lastName: string;
   };
   deviceName: string; // e.g., "Chrome on Windows"
   ipAddress: string;
@@ -56,7 +56,7 @@ export default function SessionsPage() {
           <div className="flex flex-col">
             <span className="font-medium">{user.username}</span>
             <span className="text-xs text-muted-foreground">
-              {user.first_name} {user.last_name}
+              {user.firstName} {user.lastName}
             </span>
           </div>
         );

frontend/app/(admin)/admin/users/page.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { useUsers, useDeleteUser } from "@/hooks/use-users";
+import { useOrganizations } from "@/hooks/use-master-data";
 import { Button } from "@/components/ui/button";
-import { DataTable } from "@/components/common/data-table"; // Reuse Data Table
-import { Plus, MoreHorizontal, Pencil, Trash } from "lucide-react"; // Import Icons
+import { DataTable } from "@/components/common/data-table";
+import { Plus, MoreHorizontal, Pencil, Trash, Search } from "lucide-react";
 import { useState } from "react";
 import { UserDialog } from "@/components/admin/user-dialog";
 import {
@@ -15,9 +16,26 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { ColumnDef } from "@tanstack/react-table";
 import { User } from "@/types/user";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 export default function UsersPage() {
-  const { data: users, isLoading } = useUsers();
+  const [search, setSearch] = useState("");
+  const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);
+
+  const { data: users, isLoading } = useUsers({
+    search: search || undefined,
+    primaryOrganizationId: selectedOrgId ? parseInt(selectedOrgId) : undefined,
+  });
+
+  const { data: organizations = [] } = useOrganizations();
+
   const deleteMutation = useDeleteUser();
   const [dialogOpen, setDialogOpen] = useState(false);
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
@@ -26,59 +44,90 @@ export default function UsersPage() {
     {
       accessorKey: "username",
       header: "Username",
+      cell: ({ row }) => <span className="font-semibold">{row.original.username}</span>
     },
     {
       accessorKey: "email",
       header: "Email",
     },
     {
-        id: "name",
-        header: "Name",
-        cell: ({ row }) => `${row.original.first_name} ${row.original.last_name}`,
+      id: "name",
+      header: "Name",
+      cell: ({ row }) => `${row.original.firstName} ${row.original.lastName}`,
     },
     {
-      accessorKey: "is_active",
+      id: "organization",
+      header: "Organization",
+      cell: ({ row }) => {
+        // Need to find org in list if not populated or if only ID exists
+        // Assuming backend populates organization object or we map it from ID
+        // Currently User type has organization?
+        // Let's rely on finding it from the master data if missing
+        const orgId = row.original.primaryOrganizationId;
+        const org = organizations.find((o: any) => o.id === orgId);
+        return org ? org.organizationCode : "-";
+      },
+    },
+    {
+      id: "roles",
+      header: "Roles",
+      cell: ({ row }) => {
+        const roles = row.original.roles || [];
+        // If roles is empty, it might be lazy loaded or just assignments
+        return (
+          <div className="flex flex-wrap gap-1">
+            {roles.map((r) => (
+              <Badge key={r.roleId} variant="outline" className="text-xs">
+                {r.roleName}
+              </Badge>
+            ))}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: "isActive",
       header: "Status",
       cell: ({ row }) => (
-        <Badge variant={row.original.is_active ? "default" : "secondary"}>
-          {row.original.is_active ? "Active" : "Inactive"}
+        <Badge variant={row.original.isActive ? "default" : "secondary"}>
+          {row.original.isActive ? "Active" : "Inactive"}
         </Badge>
       ),
     },
     {
-        id: "actions",
-        header: "Actions",
-        cell: ({ row }) => {
-            const user = 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">
-                        <DropdownMenuItem onClick={() => { setSelectedUser(user); setDialogOpen(true); }}>
-                            <Pencil className="mr-2 h-4 w-4" /> Edit
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                            className="text-red-600"
-                            onClick={() => {
-                                if (confirm("Are you sure?")) deleteMutation.mutate(user.user_id);
-                            }}
-                        >
-                            <Trash className="mr-2 h-4 w-4" /> Delete
-                        </DropdownMenuItem>
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            )
-        }
+      id: "actions",
+      header: "Actions",
+      cell: ({ row }) => {
+        const user = 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">
+              <DropdownMenuItem onClick={() => { setSelectedUser(user); setDialogOpen(true); }}>
+                <Pencil className="mr-2 h-4 w-4" /> Edit
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-red-600"
+                onClick={() => {
+                  if (confirm("Are you sure?")) deleteMutation.mutate(user.userId);
+                }}
+              >
+                <Trash className="mr-2 h-4 w-4" /> Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )
+      }
     }
   ];
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 p-6">
       <div className="flex justify-between items-center">
         <div>
           <h1 className="text-3xl font-bold">User Management</h1>
@@ -89,8 +138,38 @@ export default function UsersPage() {
         </Button>
       </div>
 
+      <div className="flex gap-4 items-center bg-muted/30 p-4 rounded-lg">
+         <div className="relative flex-1 max-w-sm">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search users..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-8 bg-background"
+            />
+         </div>
+         <div className="w-[250px]">
+            <Select
+              value={selectedOrgId || "all"}
+              onValueChange={(val) => setSelectedOrgId(val === "all" ? null : val)}
+            >
+              <SelectTrigger className="bg-background">
+                <SelectValue placeholder="All Organizations" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Organizations</SelectItem>
+                {Array.isArray(organizations) && organizations.map((org: any) => (
+                  <SelectItem key={org.id} value={org.id.toString()}>
+                    {org.organizationCode} - {org.organizationName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+         </div>
+      </div>
+
       {isLoading ? (
-          <div>Loading...</div>
+          <div className="text-center py-10">Loading users...</div>
       ) : (
           <DataTable columns={columns} data={users || []} />
       )}

frontend/app/(admin)/admin/workflows/[id]/edit/page.tsx

@@ -25,11 +25,11 @@ export default function WorkflowEditPage() {
   const [loading, setLoading] = useState(!!id);
   const [saving, setSaving] = useState(false);
   const [workflowData, setWorkflowData] = useState<Partial<Workflow>>({
-    workflow_name: '',
+    workflowName: '',
     description: '',
-    workflow_type: 'CORRESPONDENCE',
-    dsl_definition: 'name: New Workflow\nversion: 1.0\nsteps: []',
-    is_active: true,
+    workflowType: 'CORRESPONDENCE',
+    dslDefinition: 'name: New Workflow\nversion: 1.0\nsteps: []',
+    isActive: true,
   });
 
   useEffect(() => {
@@ -55,7 +55,7 @@ export default function WorkflowEditPage() {
   }, [id, router]);
 
   const handleSave = async () => {
-    if (!workflowData.workflow_name) {
+    if (!workflowData.workflowName) {
         toast.error("Workflow name is required");
         return;
     }
@@ -63,10 +63,10 @@ export default function WorkflowEditPage() {
     setSaving(true);
     try {
         const dto: CreateWorkflowDto = {
-            workflow_name: workflowData.workflow_name || '',
+            workflowName: workflowData.workflowName || '',
             description: workflowData.description || '',
-            workflow_type: workflowData.workflow_type || 'CORRESPONDENCE',
-            dsl_definition: workflowData.dsl_definition || '',
+            workflowType: workflowData.workflowType || 'CORRESPONDENCE',
+            dslDefinition: workflowData.dslDefinition || '',
         };
 
         if (id) {
@@ -127,11 +127,11 @@ export default function WorkflowEditPage() {
                     <Label htmlFor="name">Workflow Name *</Label>
                     <Input
                     id="name"
-                    value={workflowData.workflow_name}
+                    value={workflowData.workflowName}
                     onChange={(e) =>
                         setWorkflowData({
                         ...workflowData,
-                        workflow_name: e.target.value,
+                        workflowName: e.target.value,
                         })
                     }
                     placeholder="e.g. Standard RFA Workflow"
@@ -156,9 +156,9 @@ export default function WorkflowEditPage() {
                 <div>
                     <Label htmlFor="type">Workflow Type</Label>
                     <Select
-                    value={workflowData.workflow_type}
-                    onValueChange={(value: Workflow['workflow_type']) =>
-                        setWorkflowData({ ...workflowData, workflow_type: value })
+                    value={workflowData.workflowType}
+                    onValueChange={(value: Workflow['workflowType']) =>
+                        setWorkflowData({ ...workflowData, workflowType: value })
                     }
                     >
                     <SelectTrigger>
@@ -184,17 +184,17 @@ export default function WorkflowEditPage() {
 
                 <TabsContent value="dsl" className="mt-4">
                 <DSLEditor
-                    initialValue={workflowData.dsl_definition}
+                    initialValue={workflowData.dslDefinition}
                     onChange={(value) =>
-                       setWorkflowData({ ...workflowData, dsl_definition: value })
+                       setWorkflowData({ ...workflowData, dslDefinition: value })
                     }
                 />
                 </TabsContent>
 
                 <TabsContent value="visual" className="mt-4 h-[600px]">
                 <VisualWorkflowBuilder
-                   dslString={workflowData.dsl_definition}
-                   onDslChange={(newDsl) => setWorkflowData({ ...workflowData, dsl_definition: newDsl })}
+                   dslString={workflowData.dslDefinition}
+                   onDslChange={(newDsl) => setWorkflowData({ ...workflowData, dslDefinition: newDsl })}
                    onSave={() => toast.info("Visual state saving not implemented in this demo")}
                 />
                 </TabsContent>

frontend/app/(admin)/admin/workflows/new/page.tsx

@@ -25,10 +25,10 @@ export default function NewWorkflowPage() {
   const router = useRouter();
   const [saving, setSaving] = useState(false);
   const [workflowData, setWorkflowData] = useState({
-    workflow_name: "",
+    workflowName: "",
     description: "",
-    workflow_type: "CORRESPONDENCE" as WorkflowType,
-    dsl_definition: "name: New Workflow\nsteps: []",
+    workflowType: "CORRESPONDENCE" as WorkflowType,
+    dslDefinition: 'name: New Workflow\nversion: 1.0\nsteps: []',
   });
 
   const handleSave = async () => {
@@ -63,11 +63,11 @@ export default function NewWorkflowPage() {
             <Label htmlFor="workflow_name">Workflow Name *</Label>
             <Input
               id="workflow_name"
-              value={workflowData.workflow_name}
+              value={workflowData.workflowName}
               onChange={(e) =>
                 setWorkflowData({
                   ...workflowData,
-                  workflow_name: e.target.value,
+                  workflowName: e.target.value,
                 })
               }
               placeholder="e.g., Special RFA Approval"
@@ -92,9 +92,9 @@ export default function NewWorkflowPage() {
           <div>
             <Label htmlFor="workflow_type">Workflow Type</Label>
             <Select
-              value={workflowData.workflow_type}
+              value={workflowData.workflowType}
               onValueChange={(value) =>
-                setWorkflowData({ ...workflowData, workflow_type: value as WorkflowType })
+                setWorkflowData({ ...workflowData, workflowType: value as WorkflowType })
               }
             >
               <SelectTrigger id="workflow_type">
@@ -118,9 +118,9 @@ export default function NewWorkflowPage() {
 
         <TabsContent value="dsl" className="mt-4">
           <DSLEditor
-            initialValue={workflowData.dsl_definition}
+            initialValue={workflowData.dslDefinition}
             onChange={(value) =>
-              setWorkflowData({ ...workflowData, dsl_definition: value })
+              setWorkflowData({ ...workflowData, dslDefinition: value })
             }
           />
         </TabsContent>

frontend/app/(admin)/admin/workflows/page.tsx

@@ -53,15 +53,15 @@ export default function WorkflowsPage() {
       ) : (
         <div className="grid gap-4">
           {workflows.map((workflow) => (
-            <Card key={workflow.workflow_id} className="p-6">
+            <Card key={workflow.workflowId} className="p-6">
               <div className="flex justify-between items-start">
                 <div className="flex-1">
                   <div className="flex items-center gap-3 mb-2">
                     <h3 className="text-lg font-semibold">
-                      {workflow.workflow_name}
+                      {workflow.workflowName}
                     </h3>
-                    <Badge variant={workflow.is_active ? "default" : "secondary"} className={workflow.is_active ? "bg-green-600 hover:bg-green-700" : ""}>
-                      {workflow.is_active ? "Active" : "Inactive"}
+                    <Badge variant={workflow.isActive ? "default" : "secondary"} className={workflow.isActive ? "bg-green-600 hover:bg-green-700" : ""}>
+                      {workflow.isActive ? "Active" : "Inactive"}
                     </Badge>
                     <Badge variant="outline">v{workflow.version}</Badge>
                   </div>
@@ -69,17 +69,17 @@ export default function WorkflowsPage() {
                     {workflow.description}
                   </p>
                   <div className="flex gap-6 text-sm text-muted-foreground">
-                    <span>Type: {workflow.workflow_type}</span>
-                    <span>Steps: {workflow.step_count}</span>
+                    <span>Type: {workflow.workflowType}</span>
+                    <span>Steps: {workflow.stepCount}</span>
                     <span>
                       Updated:{" "}
-                      {new Date(workflow.updated_at).toLocaleDateString()}
+                      {new Date(workflow.updatedAt).toLocaleDateString()}
                     </span>
                   </div>
                 </div>
 
                 <div className="flex gap-2">
-                  <Link href={`/admin/workflows/${workflow.workflow_id}/edit`}>
+                  <Link href={`/admin/workflows/${workflow.workflowId}/edit`}>
                     <Button variant="outline" size="sm">
                       <Edit className="mr-2 h-4 w-4" />
                       Edit

frontend/app/(dashboard)/circulation/new/page.tsx

@@ -45,7 +45,7 @@ import { cn } from "@/lib/utils";
 
 // Form validation schema
 const formSchema = z.object({
-  correspondenceId: z.number({ required_error: "Please select a document" }),
+  correspondenceId: z.number(),
   subject: z.string().min(1, "Subject is required"),
   assigneeIds: z.array(z.number()).min(1, "At least one assignee is required"),
   remarks: z.string().optional(),
@@ -156,7 +156,7 @@ export default function CreateCirculationPage() {
                             )}
                           >
                             {selectedDoc
-                              ? selectedDoc.correspondence_number
+                              ? selectedDoc.correspondenceNumber
                               : "Select document..."}
                             <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                           </Button>
@@ -168,10 +168,10 @@ export default function CreateCirculationPage() {
                           <CommandList>
                             <CommandEmpty>No document found.</CommandEmpty>
                             <CommandGroup>
-                              {correspondences?.data?.map((doc: { id: number; correspondence_number: string }) => (
+                              {correspondences?.data?.map((doc: { id: number; correspondenceNumber: string }) => (
                                 <CommandItem
                                   key={doc.id}
-                                  value={doc.correspondence_number}
+                                  value={doc.correspondenceNumber}
                                   onSelect={() => {
                                     form.setValue("correspondenceId", doc.id);
                                     setDocOpen(false);
@@ -185,7 +185,7 @@ export default function CreateCirculationPage() {
                                         : "opacity-0"
                                     )}
                                   />
-                                  {doc.correspondence_number}
+                                  {doc.correspondenceNumber}
                                 </CommandItem>
                               ))}
                             </CommandGroup>
@@ -232,7 +232,7 @@ export default function CreateCirculationPage() {
                               <div className="flex flex-wrap gap-1">
                                 {selectedAssignees.map((userId) => {
                                   const user = users.find(
-                                    (u: { user_id: number }) => u.user_id === userId
+                                    (u: { userId: number }) => u.userId === userId
                                   );
                                   return user ? (
                                     <Badge
@@ -240,7 +240,7 @@ export default function CreateCirculationPage() {
                                       variant="secondary"
                                       className="mr-1"
                                     >
-                                      {user.first_name || user.username}
+                                      {user.firstName || user.username}
                                       <X
                                         className="ml-1 h-3 w-3 cursor-pointer"
                                         onClick={(e) => {
@@ -267,22 +267,22 @@ export default function CreateCirculationPage() {
                           <CommandList>
                             <CommandEmpty>No user found.</CommandEmpty>
                             <CommandGroup>
-                              {users.map((user: { user_id: number; username: string; first_name?: string; last_name?: string }) => (
+                              {users.map((user: { userId: number; username: string; firstName?: string; lastName?: string }) => (
                                 <CommandItem
-                                  key={user.user_id}
+                                  key={user.userId}
                                   value={user.username}
-                                  onSelect={() => toggleAssignee(user.user_id)}
+                                  onSelect={() => toggleAssignee(user.userId)}
                                 >
                                   <Check
                                     className={cn(
                                       "mr-2 h-4 w-4",
-                                      selectedAssignees.includes(user.user_id)
+                                      selectedAssignees.includes(user.userId)
                                         ? "opacity-100"
                                         : "opacity-0"
                                     )}
                                   />
-                                  {user.first_name && user.last_name
-                                    ? `${user.first_name} ${user.last_name}`
+                                  {user.firstName && user.lastName
+                                    ? `${user.firstName} ${user.lastName}`
                                     : user.username}
                                 </CommandItem>
                               ))}

frontend/app/(dashboard)/correspondences/[id]/page.tsx

@@ -2,6 +2,8 @@ import { correspondenceApi } from "@/lib/api/correspondences";
 import { CorrespondenceDetail } from "@/components/correspondences/detail";
 import { notFound } from "next/navigation";
 
+export const dynamic = "force-dynamic";
+
 export default async function CorrespondenceDetailPage({
   params,
 }: {

frontend/app/(dashboard)/correspondences/page.tsx

@@ -1,25 +1,12 @@
-"use client";
-
-import { CorrespondenceList } from "@/components/correspondences/list";
+import { Suspense } from "react";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-import { Plus, Loader2 } from "lucide-react"; // Added Loader2
-import { Pagination } from "@/components/common/pagination";
-import { useCorrespondences } from "@/hooks/use-correspondence";
-import { useSearchParams } from "next/navigation";
+import { Plus, Loader2 } from "lucide-react";
+import { CorrespondencesContent } from "@/components/correspondences/correspondences-content";
+
+export const dynamic = "force-dynamic";
 
 export default function CorrespondencesPage() {
-  const searchParams = useSearchParams();
-  const page = parseInt(searchParams.get("page") || "1");
-  const status = searchParams.get("status") || undefined;
-  const search = searchParams.get("search") || undefined;
-
-  const { data, isLoading, isError } = useCorrespondences({
-    page,
-    status, // This might be wrong type, let's cast or omit for now
-    search,
-  } as any);
-
   return (
     <div className="space-y-6">
       <div className="flex justify-between items-center">
@@ -37,29 +24,9 @@ export default function CorrespondencesPage() {
         </Link>
       </div>
 
-      {/* Filters component could go here */}
-
-      {isLoading ? (
-        <div className="flex justify-center py-8">
-          <Loader2 className="h-8 w-8 animate-spin" />
-        </div>
-      ) : isError ? (
-        <div className="text-red-500 text-center py-8">
-          Failed to load correspondences.
-        </div>
-      ) : (
-        <>
-          <CorrespondenceList data={data} />
-
-          <div className="mt-4">
-            <Pagination
-              currentPage={data?.page || 1}
-              totalPages={data?.totalPages || 1}
-              total={data?.total || 0}
-            />
-          </div>
-        </>
-      )}
+      <Suspense fallback={<div className="flex justify-center py-8"><Loader2 className="h-8 w-8 animate-spin" /></div>}>
+        <CorrespondencesContent />
+      </Suspense>
     </div>
   );
 }

frontend/app/(dashboard)/drawings/[id]/page.tsx

@@ -36,7 +36,7 @@ export default async function DrawingDetailPage({
             </Button>
           </Link>
           <div>
-            <h1 className="text-2xl font-bold">{drawing.drawing_number}</h1>
+            <h1 className="text-2xl font-bold">{drawing.drawingNumber}</h1>
             <p className="text-muted-foreground">
               {drawing.title}
             </p>
@@ -48,7 +48,7 @@ export default async function DrawingDetailPage({
             <Download className="mr-2 h-4 w-4" />
             Download Current
           </Button>
-          {drawing.revision_count > 1 && (
+          {(drawing.revisionCount ?? 0) > 1 && (
             <Button variant="outline">
               <GitCompare className="mr-2 h-4 w-4" />
               Compare Revisions
@@ -71,11 +71,15 @@ export default async function DrawingDetailPage({
               <div className="grid grid-cols-2 gap-6">
                 <div>
                   <p className="text-sm font-medium text-muted-foreground">Discipline</p>
-                  <p className="font-medium mt-1">{drawing.discipline?.discipline_name} ({drawing.discipline?.discipline_code})</p>
+                  <p className="font-medium mt-1">
+                    {typeof drawing.discipline === 'object' && drawing.discipline
+                      ? `${drawing.discipline.disciplineName} (${drawing.discipline.disciplineCode})`
+                      : drawing.discipline || 'N/A'}
+                  </p>
                 </div>
                 <div>
                   <p className="text-sm font-medium text-muted-foreground">Sheet Number</p>
-                  <p className="font-medium mt-1">{drawing.sheet_number}</p>
+                  <p className="font-medium mt-1">{drawing.sheetNumber}</p>
                 </div>
                 <div>
                   <p className="text-sm font-medium text-muted-foreground">Scale</p>
@@ -83,7 +87,7 @@ export default async function DrawingDetailPage({
                 </div>
                 <div>
                   <p className="text-sm font-medium text-muted-foreground">Latest Issue Date</p>
-                  <p className="font-medium mt-1">{format(new Date(drawing.issue_date), "dd MMM yyyy")}</p>
+                  <p className="font-medium mt-1">{drawing.issueDate ? format(new Date(drawing.issueDate), "dd MMM yyyy") : 'N/A'}</p>
                 </div>
               </div>
 

frontend/app/(dashboard)/projects/new/page.tsx

@@ -32,19 +32,19 @@ import apiClient from "@/lib/api/client";
 // 1. กำหนด Schema สำหรับตรวจสอบข้อมูล (Validation)
 // อ้างอิงจาก Data Dictionary ตาราง projects
 const projectSchema = z.object({
-  project_code: z
+  projectCode: z
     .string()
     .min(1, "กรุณาระบุรหัสโครงการ")
     .max(50, "รหัสโครงการต้องไม่เกิน 50 ตัวอักษร")
     .regex(/^[A-Z0-9-]+$/, "รหัสโครงการควรประกอบด้วยตัวอักษรภาษาอังกฤษตัวใหญ่ ตัวเลข หรือขีด (-) เท่านั้น"),
-  project_name: z
+  projectName: z
     .string()
     .min(1, "กรุณาระบุชื่อโครงการ")
     .max(255, "ชื่อโครงการต้องไม่เกิน 255 ตัวอักษร"),
-  description: z.string().optional(), // ฟิลด์เสริม (อาจจะยังไม่มีใน DB แต่เผื่อไว้สำหรับ UI)
-  status: z.enum(["Active", "Inactive", "On Hold"]).default("Active"),
-  start_date: z.string().optional(),
-  end_date: z.string().optional(),
+  description: z.string().optional(),
+  status: z.enum(["Active", "Inactive", "On Hold"]),
+  startDate: z.string().optional(),
+  endDate: z.string().optional(),
 });
 
 type ProjectValues = z.infer<typeof projectSchema>;
@@ -63,8 +63,8 @@ export default function CreateProjectPage() {
   } = useForm<ProjectValues>({
     resolver: zodResolver(projectSchema),
     defaultValues: {
-      project_code: "",
-      project_name: "",
+      projectCode: "",
+      projectName: "",
       status: "Active",
     },
   });
@@ -76,10 +76,10 @@ export default function CreateProjectPage() {
       // เรียก API สร้างโครงการ (Mockup URL)
       // ใน Phase หลัง Backend จะเตรียม Endpoint POST /projects ไว้ให้
       console.log("Submitting project data:", data);
-      
+
       // จำลองการส่งข้อมูล (Artificial Delay)
       await new Promise((resolve) => setTimeout(resolve, 1000));
-      
+
       // await apiClient.post("/projects", data);
 
       alert("สร้างโครงการสำเร็จ"); // TODO: เปลี่ยนเป็น Toast
@@ -122,7 +122,7 @@ export default function CreateProjectPage() {
               กรอกรายละเอียดสำคัญของโครงการ รหัสโครงการควรไม่ซ้ำกับที่มีอยู่
             </CardDescription>
           </CardHeader>
-          
+
           <CardContent className="space-y-4">
             {/* Project Code */}
             <div className="space-y-2">
@@ -132,16 +132,15 @@ export default function CreateProjectPage() {
               <Input
                 id="project_code"
                 placeholder="e.g. LCBP3-C1"
-                className={errors.project_code ? "border-destructive" : ""}
-                {...register("project_code")}
-                // แปลงเป็นตัวพิมพ์ใหญ่ให้อัตโนมัติเพื่อความเป็นระเบียบ
+                className={errors.projectCode ? "border-destructive" : ""}
+                {...register("projectCode")}
                 onChange={(e) => {
                   e.target.value = e.target.value.toUpperCase();
-                  register("project_code").onChange(e);
+                  register("projectCode").onChange(e);
                 }}
               />
-              {errors.project_code ? (
-                <p className="text-xs text-destructive">{errors.project_code.message}</p>
+              {errors.projectCode ? (
+                <p className="text-xs text-destructive">{errors.projectCode.message}</p>
               ) : (
                 <p className="text-xs text-muted-foreground">
                   ใช้ภาษาอังกฤษตัวพิมพ์ใหญ่ ตัวเลข และขีด (-) เท่านั้น
@@ -157,11 +156,11 @@ export default function CreateProjectPage() {
               <Input
                 id="project_name"
                 placeholder="ระบุชื่อโครงการฉบับเต็ม..."
-                className={errors.project_name ? "border-destructive" : ""}
-                {...register("project_name")}
+                className={errors.projectName ? "border-destructive" : ""}
+                {...register("projectName")}
               />
-              {errors.project_name && (
-                <p className="text-xs text-destructive">{errors.project_name.message}</p>
+              {errors.projectName && (
+                <p className="text-xs text-destructive">{errors.projectName.message}</p>
               )}
             </div>
 
@@ -183,7 +182,7 @@ export default function CreateProjectPage() {
                 <Input
                   id="start_date"
                   type="date"
-                  {...register("start_date")}
+                  {...register("startDate")}
                 />
               </div>
               <div className="space-y-2">
@@ -191,7 +190,7 @@ export default function CreateProjectPage() {
                 <Input
                   id="end_date"
                   type="date"
-                  {...register("end_date")}
+                  {...register("endDate")}
                 />
               </div>
             </div>
@@ -199,8 +198,8 @@ export default function CreateProjectPage() {
             {/* Status Select */}
             <div className="space-y-2">
               <Label htmlFor="status">สถานะโครงการ</Label>
-              {/* เนื่องจาก Select ของ Shadcn เป็น Custom UI 
-                เราต้องใช้ onValueChange เพื่อเชื่อมกับ React Hook Form 
+              {/* เนื่องจาก Select ของ Shadcn เป็น Custom UI
+                เราต้องใช้ onValueChange เพื่อเชื่อมกับ React Hook Form
               */}
               <Select
                 onValueChange={(value: any) => setValue("status", value)}
@@ -219,9 +218,9 @@ export default function CreateProjectPage() {
           </CardContent>
 
           <CardFooter className="flex justify-end gap-2 border-t p-4 bg-muted/50">
-            <Button 
-              type="button" 
-              variant="ghost" 
+            <Button
+              type="button"
+              variant="ghost"
               onClick={() => router.back()}
               disabled={isLoading}
             >
@@ -237,4 +236,4 @@ export default function CreateProjectPage() {
       </form>
     </div>
   );
-}
+}

frontend/app/(dashboard)/projects/page.tsx

@@ -35,48 +35,48 @@ import {
 } from "@/components/ui/card";
 
 // Type สำหรับข้อมูล Project (Mockup ตาม Data Dictionary)
-type Project = {
+interface Project {
   id: number;
-  project_code: string;
-  project_name: string;
+  projectCode: string;
+  projectName: string;
   status: "Active" | "Completed" | "On Hold";
   progress: number;
-  start_date: string;
-  end_date: string;
-  contractor_name: string;
-};
+  startDate: string;
+  endDate: string;
+  contractorName: string;
+}
 
 // Mock Data
 const mockProjects: Project[] = [
   {
     id: 1,
-    project_code: "LCBP3",
-    project_name: "โครงการพัฒนาท่าเรือแหลมฉบัง ระยะที่ 3 (ส่วนที่ 1-4)",
+    projectCode: "LCBP3",
+    projectName: "โครงการพัฒนาท่าเรือแหลมฉบัง ระยะที่ 3 (ส่วนที่ 1-4)",
     status: "Active",
     progress: 45,
-    start_date: "2021-01-01",
-    end_date: "2025-12-31",
-    contractor_name: "Multiple Contractors",
+    startDate: "2021-01-01",
+    endDate: "2025-12-31",
+    contractorName: "Multiple Contractors",
   },
   {
     id: 2,
-    project_code: "LCBP3-C1",
-    project_name: "งานก่อสร้างงานทางทะเล (ส่วนที่ 1)",
+    projectCode: "LCBP3-C1",
+    projectName: "งานก่อสร้างงานทางทะเล (ส่วนที่ 1)",
     status: "Active",
     progress: 70,
-    start_date: "2021-06-01",
-    end_date: "2024-06-01",
-    contractor_name: "CNNC",
+    startDate: "2021-06-01",
+    endDate: "2024-06-01",
+    contractorName: "CNNC",
   },
   {
     id: 3,
-    project_code: "LCBP3-C2",
-    project_name: "งานก่อสร้างอาคาร ท่าเทียบเรือ (ส่วนที่ 2)",
+    projectCode: "LCBP3-C2",
+    projectName: "งานก่อสร้างอาคาร ท่าเทียบเรือ (ส่วนที่ 2)",
     status: "Active",
     progress: 15,
-    start_date: "2023-01-01",
-    end_date: "2026-01-01",
-    contractor_name: "ITD-NWR Joint Venture",
+    startDate: "2023-01-01",
+    endDate: "2026-01-01",
+    contractorName: "ITD-NWR Joint Venture",
   },
 ];
 
@@ -85,8 +85,8 @@ export default function ProjectsPage() {
   const [searchTerm, setSearchTerm] = useState("");
 
   const filteredProjects = mockProjects.filter((project) =>
-    project.project_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    project.project_code.toLowerCase().includes(searchTerm.toLowerCase())
+    project.projectName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    project.projectCode.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
   const getStatusVariant = (status: string) => {
@@ -150,16 +150,16 @@ export default function ProjectsPage() {
           <TableBody>
             {filteredProjects.map((project) => (
               <TableRow key={project.id} className="cursor-pointer hover:bg-muted/50" onClick={() => handleViewDetails(project.id)}>
-                <TableCell className="font-medium">{project.project_code}</TableCell>
+                <TableCell className="font-medium">{project.projectCode}</TableCell>
                 <TableCell>
                   <div className="flex flex-col">
-                    <span>{project.project_name}</span>
+                    <span>{project.projectName}</span>
                     <span className="text-xs text-muted-foreground">
-                      {project.start_date} - {project.end_date}
+                      {project.startDate} - {project.endDate}
                     </span>
                   </div>
                 </TableCell>
-                <TableCell>{project.contractor_name}</TableCell>
+                <TableCell>{project.contractorName}</TableCell>
                 <TableCell>
                   <Badge variant={getStatusVariant(project.status)}>
                     {project.status}
@@ -186,11 +186,11 @@ export default function ProjectsPage() {
                       <DropdownMenuItem onClick={(e) => { e.stopPropagation(); handleViewDetails(project.id); }}>
                         View Details
                       </DropdownMenuItem>
-                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Manage Contracts for ${project.project_code}`); }}>
+                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Manage Contracts for ${project.projectCode}`); }}>
                         Manage Contracts
                       </DropdownMenuItem>
                       <DropdownMenuSeparator />
-                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Edit ${project.project_code}`); }}>
+                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Edit ${project.projectCode}`); }}>
                         Edit Project
                       </DropdownMenuItem>
                     </DropdownMenuContent>
@@ -209,9 +209,9 @@ export default function ProjectsPage() {
             <CardHeader className="pb-2">
               <div className="flex justify-between items-start">
                 <div>
-                  <CardTitle className="text-base font-bold">{project.project_code}</CardTitle>
+                  <CardTitle className="text-base font-bold">{project.projectCode}</CardTitle>
                   <CardDescription className="mt-1 line-clamp-2">
-                    {project.project_name}
+                    {project.projectName}
                   </CardDescription>
                 </div>
                 <Badge variant={getStatusVariant(project.status)} className="shrink-0">
@@ -222,11 +222,11 @@ export default function ProjectsPage() {
             <CardContent className="pb-2 space-y-4">
               <div className="flex items-center gap-2 text-sm text-muted-foreground">
                 <Folder className="h-4 w-4" />
-                <span>{project.contractor_name}</span>
+                <span>{project.contractorName}</span>
               </div>
               <div className="flex items-center gap-2 text-sm text-muted-foreground">
                 <Calendar className="h-4 w-4" />
-                <span>{project.start_date} - {project.end_date}</span>
+                <span>{project.startDate} - {project.endDate}</span>
               </div>
               <div className="space-y-1">
                 <div className="flex justify-between text-xs">
@@ -248,4 +248,4 @@ export default function ProjectsPage() {
       </div>
     </div>
   );
-}
+}

frontend/app/(dashboard)/projects/page_backup.tsx

@@ -0,0 +1,251 @@
+// File: app/(dashboard)/projects/page.tsx
+"use client";
+
+import { useState } from "react";
+import { Plus, Search, MoreHorizontal, Folder, Calendar, BarChart3 } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardFooter,
+} from "@/components/ui/card";
+
+// Type สำหรับข้อมูล Project (Mockup ตาม Data Dictionary)
+interface Project {
+  id: number;
+  projectCode: string;
+  projectName: string;
+  status: "Active" | "Completed" | "On Hold";
+  progress: number;
+  startDate: string;
+  endDate: string;
+  contractorName: string;
+}
+
+// Mock Data
+const mockProjects: Project[] = [
+  {
+    id: 1,
+    projectCode: "LCBP3",
+    projectName: "โครงการพัฒนาท่าเรือแหลมฉบัง ระยะที่ 3 (ส่วนที่ 1-4)",
+    status: "Active",
+    progress: 45,
+    startDate: "2021-01-01",
+    endDate: "2025-12-31",
+    contractorName: "Multiple Contractors",
+  },
+  {
+    id: 2,
+    projectCode: "LCBP3-C1",
+    projectName: "งานก่อสร้างงานทางทะเล (ส่วนที่ 1)",
+    status: "Active",
+    progress: 70,
+    startDate: "2021-06-01",
+    endDate: "2024-06-01",
+    contractorName: "CNNC",
+  },
+  {
+    id: 3,
+    projectCode: "LCBP3-C2",
+    projectName: "งานก่อสร้างอาคาร ท่าเทียบเรือ (ส่วนที่ 2)",
+    status: "Active",
+    progress: 15,
+    startDate: "2023-01-01",
+    endDate: "2026-01-01",
+    contractorName: "ITD-NWR Joint Venture",
+  },
+];
+
+export default function ProjectsPage() {
+  const router = useRouter();
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const filteredProjects = mockProjects.filter((project) =>
+    project.projectName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    project.projectCode.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const getStatusVariant = (status: string) => {
+    switch (status) {
+      case "Active": return "success"; // ใช้ variant ที่เรา custom ไว้ใน badge.tsx
+      case "Completed": return "default";
+      case "On Hold": return "warning";
+      default: return "secondary";
+    }
+  };
+
+  const handleCreateProject = () => {
+    router.push("/projects/new"); // อัปเดตเป็นลิงก์จริง
+  };
+
+  const handleViewDetails = (id: number) => {
+    router.push(`/projects/${id}`);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">Projects</h2>
+          <p className="text-muted-foreground">
+            จัดการโครงการ สัญญา และความคืบหน้า
+          </p>
+        </div>
+        <Button onClick={handleCreateProject} className="w-full md:w-auto">
+          <Plus className="mr-2 h-4 w-4" /> New Project
+        </Button>
+      </div>
+
+      {/* Filters */}
+      <div className="flex items-center space-x-2">
+        <div className="relative flex-1 md:max-w-sm">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search projects..."
+            className="pl-8"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+      </div>
+
+      {/* Desktop View: Table */}
+      <div className="hidden rounded-md border bg-card md:block">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Code</TableHead>
+              <TableHead>Project Name</TableHead>
+              <TableHead>Contractor</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="w-[200px]">Progress</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredProjects.map((project) => (
+              <TableRow key={project.id} className="cursor-pointer hover:bg-muted/50" onClick={() => handleViewDetails(project.id)}>
+                <TableCell className="font-medium">{project.projectCode}</TableCell>
+                <TableCell>
+                  <div className="flex flex-col">
+                    <span>{project.projectName}</span>
+                    <span className="text-xs text-muted-foreground">
+                      {project.startDate} - {project.endDate}
+                    </span>
+                  </div>
+                </TableCell>
+                <TableCell>{project.contractorName}</TableCell>
+                <TableCell>
+                  <Badge variant={getStatusVariant(project.status)}>
+                    {project.status}
+                  </Badge>
+                </TableCell>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <Progress value={project.progress} className="h-2" />
+                    <span className="text-xs text-muted-foreground w-[30px] text-right">
+                      {project.progress}%
+                    </span>
+                  </div>
+                </TableCell>
+                <TableCell className="text-right">
+                  <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={(e) => { e.stopPropagation(); handleViewDetails(project.id); }}>
+                        View Details
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Manage Contracts for ${project.projectCode}`); }}>
+                        Manage Contracts
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); alert(`Edit ${project.projectCode}`); }}>
+                        Edit Project
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Mobile View: Cards */}
+      <div className="grid gap-4 md:hidden">
+        {filteredProjects.map((project) => (
+          <Card key={project.id} onClick={() => handleViewDetails(project.id)} className="cursor-pointer active:bg-muted/50">
+            <CardHeader className="pb-2">
+              <div className="flex justify-between items-start">
+                <div>
+                  <CardTitle className="text-base font-bold">{project.projectCode}</CardTitle>
+                  <CardDescription className="mt-1 line-clamp-2">
+                    {project.projectName}
+                  </CardDescription>
+                </div>
+                <Badge variant={getStatusVariant(project.status)} className="shrink-0">
+                  {project.status}
+                </Badge>
+              </div>
+            </CardHeader>
+            <CardContent className="pb-2 space-y-4">
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <Folder className="h-4 w-4" />
+                <span>{project.contractorName}</span>
+              </div>
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <Calendar className="h-4 w-4" />
+                <span>{project.startDate} - {project.endDate}</span>
+              </div>
+              <div className="space-y-1">
+                <div className="flex justify-between text-xs">
+                  <span className="text-muted-foreground flex items-center gap-1">
+                    <BarChart3 className="h-3 w-3" /> Progress
+                  </span>
+                  <span className="font-medium">{project.progress}%</span>
+                </div>
+                <Progress value={project.progress} className="h-2" />
+              </div>
+            </CardContent>
+            <CardFooter className="pt-2">
+              <Button variant="ghost" size="sm" className="w-full ml-auto">
+                View Details
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/app/(dashboard)/rfas/page.tsx

@@ -7,32 +7,19 @@ import { Plus, Loader2 } from 'lucide-react';
 import { useRFAs } from '@/hooks/use-rfa';
 import { useSearchParams } from 'next/navigation';
 import { Pagination } from '@/components/common/pagination';
+import { Suspense } from 'react';
 
-export default function RFAsPage() {
+function RFAsContent() {
   const searchParams = useSearchParams();
   const page = parseInt(searchParams.get('page') || '1');
-  const status = searchParams.get('status') || undefined;
+  const statusId = searchParams.get('status') ? parseInt(searchParams.get('status')!) : undefined;
   const search = searchParams.get('search') || undefined;
+  const projectId = searchParams.get('projectId') ? parseInt(searchParams.get('projectId')!) : undefined;
 
-  const { data, isLoading, isError } = useRFAs({ page, status, search });
+  const { data, isLoading, isError } = useRFAs({ page, statusId, search, projectId });
 
   return (
-    <div className="space-y-6">
-      <div className="flex justify-between items-center">
-        <div>
-          <h1 className="text-3xl font-bold">RFAs (Request for Approval)</h1>
-          <p className="text-muted-foreground mt-1">
-            Manage approval requests and submissions
-          </p>
-        </div>
-        <Link href="/rfas/new">
-          <Button>
-            <Plus className="mr-2 h-4 w-4" />
-            New RFA
-          </Button>
-        </Link>
-      </div>
-
+    <>
       {/* RFAFilters component could be added here if needed */}
 
       {isLoading ? (
@@ -55,6 +42,35 @@ export default function RFAsPage() {
           </div>
         </>
       )}
+    </>
+  );
+}
+
+export default function RFAsPage() {
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold">RFAs (Request for Approval)</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage approval requests and submissions
+          </p>
+        </div>
+        <Link href="/rfas/new">
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            New RFA
+          </Button>
+        </Link>
+      </div>
+
+      <Suspense fallback={
+        <div className="flex justify-center py-8">
+          <Loader2 className="h-8 w-8 animate-spin" />
+        </div>
+      }>
+        <RFAsContent />
+      </Suspense>
     </div>
   );
 }

frontend/app/(dashboard)/search/page.tsx

@@ -1,13 +1,14 @@
 "use client";
 
-import { useState } from "react";
+import { useState, Suspense } from "react";
 import { useSearchParams } from "next/navigation";
 import { SearchFilters } from "@/components/search/filters";
 import { SearchResults } from "@/components/search/results";
 import { SearchFilters as FilterType } from "@/types/search";
 import { useSearch } from "@/hooks/use-search";
+import { Loader2 } from "lucide-react";
 
-export default function SearchPage() {
+function SearchContent() {
   const searchParams = useSearchParams();
 
   // URL Params state
@@ -43,7 +44,7 @@ export default function SearchPage() {
   };
 
   return (
-    <div className="space-y-6">
+    <>
       <div>
         <h1 className="text-3xl font-bold">Search Results</h1>
         <p className="text-muted-foreground mt-1">
@@ -67,6 +68,20 @@ export default function SearchPage() {
           )}
         </div>
       </div>
+    </>
+  );
+}
+
+export default function SearchPage() {
+  return (
+    <div className="space-y-6">
+      <Suspense fallback={
+        <div className="flex justify-center py-8">
+          <Loader2 className="h-8 w-8 animate-spin" />
+        </div>
+      }>
+        <SearchContent />
+      </Suspense>
     </div>
   );
 }

frontend/app/demo/page.tsx

@@ -1,147 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { DataTable } from "@/components/common/data-table";
-import { FileUpload } from "@/components/common/file-upload";
-import { StatusBadge } from "@/components/common/status-badge";
-import { ConfirmDialog } from "@/components/common/confirm-dialog";
-import { Pagination } from "@/components/common/pagination";
-import { Button } from "@/components/ui/button";
-import { ColumnDef } from "@tanstack/react-table";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
-// Mock Data for Table
-interface Payment {
-  id: string;
-  amount: number;
-  status: string;
-  email: string;
-}
-
-const columns: ColumnDef<Payment>[] = [
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => <StatusBadge status={row.getValue("status")} />,
-  },
-  {
-    accessorKey: "email",
-    header: "Email",
-  },
-  {
-    accessorKey: "amount",
-    header: "Amount",
-    cell: ({ row }) => {
-      const amount = parseFloat(row.getValue("amount"));
-      const formatted = new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: "USD",
-      }).format(amount);
-      return <div className="font-medium">{formatted}</div>;
-    },
-  },
-];
-
-const data: Payment[] = [
-  { id: "1", amount: 100, status: "PENDING", email: "m@example.com" },
-  { id: "2", amount: 200, status: "APPROVED", email: "test@example.com" },
-  { id: "3", amount: 300, status: "REJECTED", email: "fail@example.com" },
-  { id: "4", amount: 400, status: "IN_REVIEW", email: "review@example.com" },
-  { id: "5", amount: 500, status: "DRAFT", email: "draft@example.com" },
-];
-
-export default function DemoPage() {
-  const [files, setFiles] = useState<File[]>([]);
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [page, setPage] = useState(1);
-
-  return (
-    <div className="p-8 space-y-8">
-      <h1 className="text-3xl font-bold">Common Components Demo</h1>
-
-      {/* Status Badges */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Status Badges</CardTitle>
-        </CardHeader>
-        <CardContent className="flex gap-4 flex-wrap">
-          <StatusBadge status="DRAFT" />
-          <StatusBadge status="PENDING" />
-          <StatusBadge status="IN_REVIEW" />
-          <StatusBadge status="APPROVED" />
-          <StatusBadge status="REJECTED" />
-          <StatusBadge status="CLOSED" />
-          <StatusBadge status="UNKNOWN" />
-        </CardContent>
-      </Card>
-
-      {/* File Upload */}
-      <Card>
-        <CardHeader>
-          <CardTitle>File Upload</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <FileUpload
-            onFilesSelected={(files) => setFiles(files)}
-            maxFiles={3}
-          />
-          <div className="mt-4">
-            <h3 className="font-semibold">Selected Files:</h3>
-            <ul className="list-disc pl-5">
-              {files.map((f, i) => (
-                <li key={i}>
-                  {f.name} ({(f.size / 1024).toFixed(2)} KB)
-                </li>
-              ))}
-            </ul>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Data Table */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Data Table</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <DataTable columns={columns} data={data} />
-        </CardContent>
-      </Card>
-
-      {/* Pagination */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Pagination</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <Pagination
-            currentPage={page}
-            totalPages={10}
-            total={100}
-          />
-          {/* Note: In a real app, clicking pagination would update 'page' via URL or state */}
-        </CardContent>
-      </Card>
-
-      {/* Confirm Dialog */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Confirmation Dialog</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <Button onClick={() => setDialogOpen(true)}>Open Dialog</Button>
-          <ConfirmDialog
-            open={dialogOpen}
-            onOpenChange={setDialogOpen}
-            title="Are you sure?"
-            description="This action cannot be undone. This will permanently delete your account and remove your data from our servers."
-            onConfirm={() => {
-              alert("Confirmed!");
-              setDialogOpen(false);
-            }}
-          />
-        </CardContent>
-      </Card>
-    </div>
-  );
-}