251210:1709 Frontend: reeactor organization and run build

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>