np-dms/lcbp3
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

260219:1649 20260219 TASK-BEFE-001 Fixed Blank Admin Pages
All checks were successful
Build and Deploy / deploy (push) Successful in 2m41s
Details

Browse Source
This commit is contained in:
admin
2026-02-19 16:49:07 +07:00
parent fbd663e870
commit d455598dc2
3 changed files with 169 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
frontend/app/(admin)/admin/doc-control/drawings/contract/categories/page.tsx
View File

@@ -1,19 +1,20 @@
"use client";
'use client';
import { useState } from "react";
import { GenericCrudTable } from "@/components/admin/reference/generic-crud-table";
import { ColumnDef } from "@tanstack/react-table";
import { useState } from 'react';
import { GenericCrudTable } from '@/components/admin/reference/generic-crud-table';
import { ColumnDef } from '@tanstack/react-table';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Loader2, Plus, Trash2 } from 'lucide-react';
import { useProjects } from '@/hooks/use-master-data';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Loader2 } from "lucide-react";
import { useProjects } from "@/hooks/use-master-data";
import { drawingMasterDataService, ContractCategory, ContractSubCategory } from "@/lib/services/drawing-master-data.service";
import { Badge } from "@/components/ui/badge";
drawingMasterDataService,
ContractCategory,
ContractSubCategory,
} from '@/lib/services/drawing-master-data.service';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
interface Category {
id: number;
@@ -29,33 +30,27 @@ export default function ContractCategoriesPage() {
const columns: ColumnDef<Category>[] = [
{
accessorKey: "catCode",
header: "Code",
accessorKey: 'catCode',
header: 'Code',
cell: ({ row }) => (
<Badge variant="outline" className="font-mono">
{row.getValue("catCode")}
{row.getValue('catCode')}
</Badge>
),
},
{
accessorKey: "catName",
header: "Category Name",
accessorKey: 'catName',
header: 'Category Name',
},
{
accessorKey: "description",
header: "Description",
cell: ({ row }) => (
<span className="text-muted-foreground text-sm">
{row.getValue("description") || "-"}
</span>
),
accessorKey: 'description',
header: 'Description',
cell: ({ row }) => <span className="text-muted-foreground text-sm">{row.getValue('description') || '-'}</span>,
},
{
accessorKey: "sortOrder",
header: "Order",
cell: ({ row }) => (
<span className="font-mono">{row.getValue("sortOrder")}</span>
),
accessorKey: 'sortOrder',
header: 'Order',
cell: ({ row }) => <span className="font-mono">{row.getValue('sortOrder')}</span>,
},
];
@@ -63,7 +58,7 @@ export default function ContractCategoriesPage() {
<div className="flex items-center gap-4">
<span className="text-sm font-medium">Project:</span>
<Select
value={selectedProjectId?.toString() ?? ""}
value={selectedProjectId?.toString() ?? ''}
onValueChange={(v) => setSelectedProjectId(v ? parseInt(v) : undefined)}
>
<SelectTrigger className="w-[300px]">
@@ -89,9 +84,7 @@ export default function ContractCategoriesPage() {
<div className="p-6 space-y-6">
<div>
<h1 className="text-2xl font-bold">Contract Drawing Categories</h1>
<p className="text-muted-foreground mt-1">
Manage main categories (หมวดหมู่หลัก) for contract drawings
</p>
<p className="text-muted-foreground mt-1">Manage main categories (หมวดหมู่หลัก) for contract drawings</p>
</div>
{projectFilter}
<div className="text-center py-12 text-muted-foreground border rounded-lg border-dashed">
@@ -107,17 +100,17 @@ export default function ContractCategoriesPage() {
entityName="Category"
title="Contract Drawing Categories"
description="Manage main categories (หมวดหมู่หลัก) for contract drawings"
queryKey={["contract-drawing-categories", String(selectedProjectId)]}
queryKey={['contract-drawing-categories', String(selectedProjectId)]}
fetchFn={() => drawingMasterDataService.getContractCategories(selectedProjectId)}
createFn={(data) => drawingMasterDataService.createContractCategory({ ...data, projectId: selectedProjectId })}
updateFn={(id, data) => drawingMasterDataService.updateContractCategory(id, data)}
deleteFn={(id) => drawingMasterDataService.deleteContractCategory(id)}
columns={columns}
fields={[
{ name: "catCode", label: "Category Code", type: "text", required: true },
{ name: "catName", label: "Category Name", type: "text", required: true },
{ name: "description", label: "Description", type: "textarea" },
{ name: "sortOrder", label: "Sort Order", type: "text", required: true },
{ name: 'catCode', label: 'Category Code', type: 'text', required: true },
{ name: 'catName', label: 'Category Name', type: 'text', required: true },
{ name: 'description', label: 'Description', type: 'textarea' },
{ name: 'sortOrder', label: 'Sort Order', type: 'text', required: true },
]}
filters={projectFilter}
/>
@@ -131,80 +124,75 @@ export default function ContractCategoriesPage() {
Given the constraints, I will add a "Mapped Sub-categories" management section
that opens when clicking a category ROW or adding a custom action if GenericCrudTable supports it.
For now, let's assume we need to extend GenericCrudTable or replace it to support this specific requirement.
However, to keep it simple and consistent:
Let's add a separate section below the table or a dialog triggered by a custom cell.
*/}
<div className="mt-8 border-t pt-8">
<CategoryMappingSection projectId={selectedProjectId} />
</div>
<div className="mt-8 border-t pt-8">
<CategoryMappingSection projectId={selectedProjectId} />
</div>
</div>
);
}
function CategoryMappingSection({ projectId }: { projectId: number }) {
// ... logic to manage mappings would go here ...
// But to properly implement this, we need a full mapping UI.
// Let's defer this implementation pattern to a separate component to keep this file clean
// and just mount it here.
return (
<div className="space-y-4">
<h2 className="text-xl font-semibold">Category Mappings (Map Sub-categories to Categories)</h2>
<div className="bg-muted/30 p-4 rounded-lg border-dashed border">
<p className="text-sm text-muted-foreground">Select a category to view and manage its sub-categories.</p>
{/*
Real implementation would be complex here.
// ... logic to manage mappings would go here ...
// But to properly implement this, we need a full mapping UI.
// Let's defer this implementation pattern to a separate component to keep this file clean
// and just mount it here.
return (
<div className="space-y-4">
<h2 className="text-xl font-semibold">Category Mappings (Map Sub-categories to Categories)</h2>
<div className="bg-muted/30 p-4 rounded-lg border-dashed border">
<p className="text-sm text-muted-foreground">Select a category to view and manage its sub-categories.</p>
{/*
Real implementation would be complex here.
Better approach: Add a "Manage Sub-categories" button to the Categories table if possible.
Or simpler: A separate "Mapping" page.
*/}
<ManageMappings projectId={projectId} />
</div>
</div>
)
<ManageMappings projectId={projectId} />
</div>
</div>
);
}
import { Plus, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner"; // Use sonner instead of use-toast
function ManageMappings({ projectId }: { projectId: number }) {
const queryClient = useQueryClient();
const [selectedCat, setSelectedCat] = useState<string>("");
const [selectedSubCat, setSelectedSubCat] = useState<string>("");
const [selectedCat, setSelectedCat] = useState<string>('');
const [selectedSubCat, setSelectedSubCat] = useState<string>('');
const { data: categories = [] } = useQuery({
queryKey: ["contract-categories", String(projectId)],
queryKey: ['contract-categories', String(projectId)],
queryFn: () => drawingMasterDataService.getContractCategories(projectId),
});
const { data: subCategories = [] } = useQuery({
queryKey: ["contract-sub-categories", String(projectId)],
queryKey: ['contract-sub-categories', String(projectId)],
queryFn: () => drawingMasterDataService.getContractSubCategories(projectId),
});
const { data: mappings = [] } = useQuery({
queryKey: ["contract-mappings", String(projectId), selectedCat],
queryFn: () => drawingMasterDataService.getContractMappings(projectId, selectedCat ? parseInt(selectedCat) : undefined),
queryKey: ['contract-mappings', String(projectId), selectedCat],
queryFn: () =>
drawingMasterDataService.getContractMappings(projectId, selectedCat ? parseInt(selectedCat) : undefined),
enabled: !!selectedCat,
});
const createMutation = useMutation({
mutationFn: drawingMasterDataService.createContractMapping,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["contract-mappings"] });
toast.success("Mapping created");
setSelectedSubCat("");
queryClient.invalidateQueries({ queryKey: ['contract-mappings'] });
toast.success('Mapping created');
setSelectedSubCat('');
},
});
const deleteMutation = useMutation({
mutationFn: drawingMasterDataService.deleteContractMapping,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["contract-mappings"] });
toast.success("Mapping removed");
}
queryClient.invalidateQueries({ queryKey: ['contract-mappings'] });
toast.success('Mapping removed');
},
});
const handleAdd = () => {
@@ -218,65 +206,79 @@ function ManageMappings({ projectId }: { projectId: number }) {
return (
<div className="grid gap-6 md:grid-cols-2">
<div className="space-y-2">
<label className="text-sm font-medium">Select Category</label>
<Select value={selectedCat} onValueChange={setSelectedCat}>
<div className="space-y-2">
<label className="text-sm font-medium">Select Category</label>
<Select value={selectedCat} onValueChange={setSelectedCat}>
<SelectTrigger>
<SelectValue placeholder="Select Category..." />
</SelectTrigger>
<SelectContent>
{categories.map((c: ContractCategory) => (
<SelectItem key={c.id} value={String(c.id)}>
{c.catCode} - {c.catName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{selectedCat && (
<div className="space-y-4">
<div className="flex gap-2 items-end">
<div className="flex-1 space-y-2">
<label className="text-sm font-medium">Add Sub-Category</label>
<Select value={selectedSubCat} onValueChange={setSelectedSubCat}>
<SelectTrigger>
<SelectValue placeholder="Select Category..." />
<SelectValue placeholder="Select Sub-Category to add..." />
</SelectTrigger>
<SelectContent>
{categories.map((c: ContractCategory) => (
<SelectItem key={c.id} value={String(c.id)}>{c.catCode} - {c.catName}</SelectItem>
{subCategories
.filter(
(s: ContractSubCategory) =>
!mappings.find((m: { subCategory: { id: number } }) => m.subCategory.id === s.id)
)
.map((s: ContractSubCategory) => (
<SelectItem key={s.id} value={String(s.id)}>
{s.subCatCode} - {s.subCatName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</Select>
</div>
<Button onClick={handleAdd} disabled={!selectedSubCat || createMutation.isPending}>
<Plus className="h-4 w-4 mr-2" /> Add
</Button>
</div>
{selectedCat && (
<div className="space-y-4">
<div className="flex gap-2 items-end">
<div className="flex-1 space-y-2">
<label className="text-sm font-medium">Add Sub-Category</label>
<Select value={selectedSubCat} onValueChange={setSelectedSubCat}>
<SelectTrigger>
<SelectValue placeholder="Select Sub-Category to add..." />
</SelectTrigger>
<SelectContent>
{subCategories
.filter((s: ContractSubCategory) => !mappings.find((m: { subCategory: { id: number } }) => m.subCategory.id === s.id))
.map((s: ContractSubCategory) => (
<SelectItem key={s.id} value={String(s.id)}>{s.subCatCode} - {s.subCatName}</SelectItem>
))}
</SelectContent>
</Select>
</div>
<Button onClick={handleAdd} disabled={!selectedSubCat || createMutation.isPending}>
<Plus className="h-4 w-4 mr-2" /> Add
<div className="border rounded-md">
<div className="p-2 bg-muted/50 font-medium text-sm grid grid-cols-[1fr,auto] gap-2">
<span>Mapped Sub-Categories</span>
<span>Action</span>
</div>
{mappings.length === 0 ? (
<div className="p-4 text-center text-sm text-muted-foreground">No sub-categories mapped yet.</div>
) : (
<div className="divide-y">
{mappings.map((m: { id: number; subCategory: ContractSubCategory }) => (
<div key={m.id} className="p-2 grid grid-cols-[1fr,auto] gap-2 items-center">
<span className="text-sm">
{m.subCategory.subCatCode} - {m.subCategory.subCatName}
</span>
<Button
variant="ghost"
size="sm"
onClick={() => deleteMutation.mutate(m.id)}
disabled={deleteMutation.isPending}
>
<Trash2 className="h-4 w-4 text-red-500" />
</Button>
</div>
<div className="border rounded-md">
<div className="p-2 bg-muted/50 font-medium text-sm grid grid-cols-[1fr,auto] gap-2">
<span>Mapped Sub-Categories</span>
<span>Action</span>
</div>
{mappings.length === 0 ? (
<div className="p-4 text-center text-sm text-muted-foreground">No sub-categories mapped yet.</div>
) : (
<div className="divide-y">
{mappings.map((m: { id: number; subCategory: ContractSubCategory }) => (
<div key={m.id} className="p-2 grid grid-cols-[1fr,auto] gap-2 items-center">
<span className="text-sm">{m.subCategory.subCatCode} - {m.subCategory.subCatName}</span>
<Button variant="ghost" size="sm" onClick={() => deleteMutation.mutate(m.id)} disabled={deleteMutation.isPending}>
<Trash2 className="h-4 w-4 text-red-500" />
</Button>
</div>
))}
</div>
)}
</div>
</div>
)}
</div>
))}
</div>
)}
</div>
</div>
)}
</div>
)
);
}

44
frontend/app/(admin)/admin/doc-control/reference/page.tsx
View File

@@ -1,36 +1,36 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { BookOpen, Tag, Settings, Layers } from "lucide-react";
import Link from "next/link";
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { BookOpen, Tag, Settings, Layers } from 'lucide-react';
import Link from 'next/link';
const refMenu = [
{
title: "Disciplines",
description: "Manage system-wide disciplines (e.g., ARCH, STR)",
href: "/admin/reference/disciplines",
title: 'Disciplines',
description: 'Manage system-wide disciplines (e.g., ARCH, STR)',
href: '/admin/doc-control/reference/disciplines',
icon: Layers,
},
{
title: "RFA Types",
description: "Manage RFA types and approve codes",
href: "/admin/reference/rfa-types",
title: 'RFA Types',
description: 'Manage RFA types and approve codes',
href: '/admin/doc-control/reference/rfa-types',
icon: BookOpen,
},
{
title: "Correspondence Types",
description: "Manage generic correspondence types",
href: "/admin/reference/correspondence-types",
title: 'Correspondence Types',
description: 'Manage generic correspondence types',
href: '/admin/doc-control/reference/correspondence-types',
icon: Settings,
},
{
title: "Tags",
description: "Manage system tags for documents",
href: "/admin/reference/tags",
title: 'Tags',
description: 'Manage system tags for documents',
href: '/admin/doc-control/reference/tags',
icon: Tag,
},
{
title: "Drawing Categories",
description: "Manage drawing sub-types and classifications",
href: "/admin/reference/drawing-categories",
title: 'Drawing Categories',
description: 'Manage drawing sub-types and classifications',
href: '/admin/doc-control/reference/drawing-categories',
icon: Layers,
},
];
@@ -44,15 +44,11 @@ export default function ReferenceDataPage() {
<Link key={item.href} href={item.href}>
<Card className="hover:shadow-md transition-shadow cursor-pointer h-full">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
{item.title}
</CardTitle>
<CardTitle className="text-sm font-medium">{item.title}</CardTitle>
<item.icon className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<p className="text-xs text-muted-foreground">
{item.description}
</p>
<p className="text-xs text-muted-foreground">{item.description}</p>
</CardContent>
</Card>
</Link>