260220:1504 20260220 TASK-BEFE-001 Refactor by ADR-014

2026-02-20 15:04:02 +07:00
parent 7f27f9478b
commit 397c46bc4e
15 changed files with 709 additions and 492 deletions
--- a/frontend/app/(admin)/admin/doc-control/reference/disciplines/page.tsx
+++ b/frontend/app/(admin)/admin/doc-control/reference/disciplines/page.tsx
@@ -1,64 +1,43 @@
-"use client";
+'use client';

-import { GenericCrudTable } from "@/components/admin/reference/generic-crud-table";
-import { masterDataService } from "@/lib/services/master-data.service";
-import { contractService } from "@/lib/services/contract.service";
-import { ColumnDef } from "@tanstack/react-table";
-import { useState, useEffect } from "react";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { GenericCrudTable } from '@/components/admin/reference/generic-crud-table';
+import { masterDataService } from '@/lib/services/master-data.service';
+import { useContracts } from '@/hooks/use-master-data';
+import { ColumnDef } from '@tanstack/react-table';
+import { useState } from 'react';
+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
-  );
+  const [selectedContractId, setSelectedContractId] = useState<string | null>(null);

-  useEffect(() => {
-    // Fetch contracts for filter and form options
-    contractService.getAll().then((data) => {
-      setContracts(Array.isArray(data) ? data : []);
-    }).catch(err => {
-        console.error("Failed to load contracts:", err);
-        setContracts([]);
-    });
-  }, []);
+  const { data: contractsData = [] } = useContracts();
+  // Ensure we consistently use an array
+  const contracts = Array.isArray(contractsData) ? contractsData : [];

  const columns: ColumnDef<any>[] = [
    {
-      accessorKey: "disciplineCode",
-      header: "Code",
-      cell: ({ row }) => (
-        <span className="font-mono font-bold">
-          {row.getValue("disciplineCode")}
-        </span>
-      ),
+      accessorKey: 'disciplineCode',
+      header: 'Code',
+      cell: ({ row }) => <span className="font-mono font-bold">{row.getValue('disciplineCode')}</span>,
    },
    {
-      accessorKey: "codeNameTh",
-      header: "Name (TH)",
+      accessorKey: 'codeNameTh',
+      header: 'Name (TH)',
    },
    {
-      accessorKey: "codeNameEn",
-      header: "Name (EN)",
+      accessorKey: 'codeNameEn',
+      header: 'Name (EN)',
    },
    {
-      accessorKey: "isActive",
-      header: "Status",
+      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') ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
          }`}
        >
-          {row.getValue("isActive") ? "Active" : "Inactive"}
+          {row.getValue('isActive') ? 'Active' : 'Inactive'}
        </span>
      ),
    },
@@ -75,23 +54,17 @@ export default function DisciplinesPage() {
        entityName="Discipline"
        title="Disciplines Management"
        description="Manage system disciplines (e.g., ARCH, STR, MEC)"
-        queryKey={["disciplines", selectedContractId ?? "all"]}
-        fetchFn={() =>
-          masterDataService.getDisciplines(
-            selectedContractId ? parseInt(selectedContractId) : undefined
-          )
-        }
+        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
+        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)
-              }
+              value={selectedContractId || 'all'}
+              onValueChange={(val) => setSelectedContractId(val === 'all' ? null : val)}
            >
              <SelectTrigger>
                <SelectValue placeholder="Filter by Contract" />
@@ -109,26 +82,26 @@ export default function DisciplinesPage() {
        }
        fields={[
          {
-            name: "contractId",
-            label: "Contract",
-            type: "select",
+            name: 'contractId',
+            label: 'Contract',
+            type: 'select',
            required: true,
            options: contractOptions,
          },
          {
-            name: "disciplineCode",
-            label: "Code",
-            type: "text",
+            name: 'disciplineCode',
+            label: 'Code',
+            type: 'text',
            required: true,
          },
          {
-            name: "codeNameTh",
-            label: "Name (TH)",
-            type: "text",
+            name: 'codeNameTh',
+            label: 'Name (TH)',
+            type: 'text',
            required: true,
          },
-          { name: "codeNameEn", label: "Name (EN)", type: "text" },
-          { name: "isActive", label: "Active", type: "checkbox" },
+          { name: 'codeNameEn', label: 'Name (EN)', type: 'text' },
+          { name: 'isActive', label: 'Active', type: 'checkbox' },
        ]}
      />
    </div>
--- a/frontend/app/(admin)/admin/doc-control/reference/rfa-types/page.tsx
+++ b/frontend/app/(admin)/admin/doc-control/reference/rfa-types/page.tsx
@@ -1,66 +1,47 @@
-"use client";
+'use client';

-import { GenericCrudTable } from "@/components/admin/reference/generic-crud-table";
-import { masterDataService } from "@/lib/services/master-data.service";
-import { contractService } from "@/lib/services/contract.service";
-import { ColumnDef } from "@tanstack/react-table";
-import { useState, useEffect } from "react";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { GenericCrudTable } from '@/components/admin/reference/generic-crud-table';
+import { masterDataService } from '@/lib/services/master-data.service';
+import { useContracts } from '@/hooks/use-master-data';
+import { ColumnDef } from '@tanstack/react-table';
+import { useState } from 'react';
+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
-  );
+  const [selectedContractId, setSelectedContractId] = useState<string | null>(null);

-  useEffect(() => {
-    // Fetch contracts for filter and form options
-    contractService.getAll().then((data) => {
-      setContracts(Array.isArray(data) ? data : []);
-    }).catch(err => {
-        console.error("Failed to load contracts:", err);
-        setContracts([]);
-    });
-  }, []);
+  const { data: contractsData = [] } = useContracts();
+  // Ensure we consistently use an array
+  const contracts = Array.isArray(contractsData) ? contractsData : [];

  const columns: ColumnDef<any>[] = [
    {
-      accessorKey: "typeCode",
-      header: "Code",
-      cell: ({ row }) => (
-        <span className="font-mono font-bold">{row.getValue("typeCode")}</span>
-      ),
+      accessorKey: 'typeCode',
+      header: 'Code',
+      cell: ({ row }) => <span className="font-mono font-bold">{row.getValue('typeCode')}</span>,
    },
    {
-      accessorKey: "typeNameTh",
-      header: "Name (TH)",
+      accessorKey: 'typeNameTh',
+      header: 'Name (TH)',
    },
    {
-      accessorKey: "typeNameEn",
-      header: "Name (EN)",
+      accessorKey: 'typeNameEn',
+      header: 'Name (EN)',
    },
    {
-      accessorKey: "remark",
-      header: "Remark",
+      accessorKey: 'remark',
+      header: 'Remark',
    },
    {
-      accessorKey: "isActive",
-      header: "Status",
+      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') ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
          }`}
        >
-          {row.getValue("isActive") ? "Active" : "Inactive"}
+          {row.getValue('isActive') ? 'Active' : 'Inactive'}
        </span>
      ),
    },
@@ -76,12 +57,8 @@ export default function RfaTypesPage() {
      <GenericCrudTable
        entityName="RFA Type"
        title="RFA Types Management"
-        queryKey={["rfa-types", selectedContractId ?? "all"]}
-        fetchFn={() =>
-          masterDataService.getRfaTypes(
-            selectedContractId ? parseInt(selectedContractId) : undefined
-          )
-        }
+        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)}
@@ -89,10 +66,8 @@ export default function RfaTypesPage() {
        filters={
          <div className="w-[300px]">
            <Select
-              value={selectedContractId || "all"}
-              onValueChange={(val) =>
-                setSelectedContractId(val === "all" ? null : val)
-              }
+              value={selectedContractId || 'all'}
+              onValueChange={(val) => setSelectedContractId(val === 'all' ? null : val)}
            >
              <SelectTrigger>
                <SelectValue placeholder="Filter by Contract" />
@@ -110,17 +85,17 @@ export default function RfaTypesPage() {
        }
        fields={[
          {
-            name: "contractId",
-            label: "Contract",
-            type: "select",
+            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" },
+          { 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>