137 lines
3.9 KiB
TypeScript
137 lines
3.9 KiB
TypeScript
"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";
|
|
|
|
export default function DisciplinesPage() {
|
|
const [contracts, setContracts] = useState<any[]>([]);
|
|
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 columns: ColumnDef<any>[] = [
|
|
{
|
|
accessorKey: "disciplineCode",
|
|
header: "Code",
|
|
cell: ({ row }) => (
|
|
<span className="font-mono font-bold">
|
|
{row.getValue("disciplineCode")}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "codeNameTh",
|
|
header: "Name (TH)",
|
|
},
|
|
{
|
|
accessorKey: "codeNameEn",
|
|
header: "Name (EN)",
|
|
},
|
|
{
|
|
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="Discipline"
|
|
title="Disciplines Management"
|
|
description="Manage system disciplines (e.g., ARCH, STR, MEC)"
|
|
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: "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>
|
|
);
|
|
}
|