260306:1535 20260306:1500 refactor tags

frontend/app/(admin)/admin/doc-control/reference/tags/page.tsx

@@ -2,14 +2,52 @@
 
 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 { CreateTagDto } from "@/types/dto/master/tag.dto";
 import { ColumnDef } from "@tanstack/react-table";
+import { useQuery } from "@tanstack/react-query";
 
 export default function TagsPage() {
-  const columns: ColumnDef<any>[] = [
+  const { data: projectsData } = useQuery({
+    queryKey: ["projects"],
+    queryFn: () => projectService.getAll(),
+  });
+
+  const projectOptions = [
+    { label: "Global (All Projects)", value: "" },
+    ...(projectsData || []).map((p: Record<string, unknown>) => ({
+      label: p.project_name || p.project_code || `Project ${p.id}`,
+      value: String(p.id),
+    })),
+  ];
+
+  const columns: ColumnDef<Record<string, unknown>>[] = [
+    {
+      accessorKey: "project_id",
+      header: "Project",
+      cell: ({ row }) => {
+        const pId = row.original.project_id;
+        if (!pId) return <span className="text-muted-foreground italic">Global</span>;
+        const p = (projectsData || []).find((proj: Record<string, unknown>) => proj.id === pId);
+        return p ? (p.project_name || p.project_code || `Project ${pId}`) as React.ReactNode : pId as React.ReactNode;
+      },
+    },
     {
       accessorKey: "tag_name",
       header: "Tag Name",
+      cell: ({ row }) => {
+        const color = row.original.color_code || 'default';
+        const isHex = color.startsWith('#');
+        return (
+          <div className="flex items-center gap-2">
+            <span
+              className="w-3 h-3 rounded-full border border-border"
+              style={{ backgroundColor: isHex ? color : (color === 'default' ? '#e2e8f0' : color) }}
+            />
+            {row.original.tag_name}
+          </div>
+        );
+      }
     },
     {
       accessorKey: "description",
@@ -17,24 +55,47 @@ export default function TagsPage() {
     },
   ];
 
+  const formatPayload = (data: Record<string, unknown>) => {
+    const payload = { ...data };
+    if (!payload.project_id || payload.project_id === "") {
+        payload.project_id = null;
+    } else {
+        payload.project_id = Number(payload.project_id);
+    }
+    return payload;
+  };
+
   return (
     <GenericCrudTable
       title="Tags"
-      description="Manage system tags."
+      description="Manage system tags, multi-tenant capable."
       entityName="Tag"
       queryKey={["tags"]}
       fetchFn={() => masterDataService.getTags()}
-      createFn={(data: Record<string, unknown>) => masterDataService.createTag(data as unknown as CreateTagDto)}
-      updateFn={(id, data) => masterDataService.updateTag(id, data)}
+      createFn={(data: Record<string, unknown>) => masterDataService.createTag(formatPayload(data) as unknown as CreateTagDto)}
+      updateFn={(id, data) => masterDataService.updateTag(id, formatPayload(data))}
       deleteFn={(id) => masterDataService.deleteTag(id)}
       columns={columns}
       fields={[
+        {
+          name: "project_id",
+          label: "Project Scope",
+          type: "select",
+          options: projectOptions,
+          required: false,
+        },
         {
           name: "tag_name",
           label: "Tag Name",
           type: "text",
           required: true,
         },
+        {
+          name: "color_code",
+          label: "Color Code (Hex or Name)",
+          type: "text",
+          required: false,
+        },
         {
           name: "description",
           label: "Description",