diff --git a/frontend/app/(admin)/admin/doc-control/drawings/contract/categories/page.tsx b/frontend/app/(admin)/admin/doc-control/drawings/contract/categories/page.tsx
index 2334a54..557b336 100644
--- a/frontend/app/(admin)/admin/doc-control/drawings/contract/categories/page.tsx
+++ b/frontend/app/(admin)/admin/doc-control/drawings/contract/categories/page.tsx
@@ -101,7 +101,12 @@ export default function ContractCategoriesPage() {
         title="Contract Drawing Categories"
         description="Manage main categories (หมวดหมู่หลัก) for contract drawings"
         queryKey={['contract-drawing-categories', String(selectedProjectId)]}
-        fetchFn={() => drawingMasterDataService.getContractCategories(selectedProjectId)}
+        fetchFn={async () => {
+          console.log(`Fetching Contract Categories for project ${selectedProjectId}`);
+          const data = await drawingMasterDataService.getContractCategories(selectedProjectId);
+          console.log('Contract Categories Data:', data);
+          return data;
+        }}
         createFn={(data) => drawingMasterDataService.createContractCategory({ ...data, projectId: selectedProjectId })}
         updateFn={(id, data) => drawingMasterDataService.updateContractCategory(id, data)}
         deleteFn={(id) => drawingMasterDataService.deleteContractCategory(id)}
@@ -259,21 +264,23 @@ function ManageMappings({ projectId }: { projectId: number }) {
               <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>
-                ))}
+                {mappings
+                  .filter((m: any) => m && m.subCategory)
+                  .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 ?? 'Unknown'}
+                      </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>
diff --git a/frontend/app/(admin)/admin/doc-control/drawings/contract/sub-categories/page.tsx b/frontend/app/(admin)/admin/doc-control/drawings/contract/sub-categories/page.tsx
index 07a4a53..c42e77b 100644
--- a/frontend/app/(admin)/admin/doc-control/drawings/contract/sub-categories/page.tsx
+++ b/frontend/app/(admin)/admin/doc-control/drawings/contract/sub-categories/page.tsx
@@ -1,19 +1,13 @@
-"use client";
+'use client';
 
-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 } from "lucide-react";
-import { useProjects } from "@/hooks/use-master-data";
-import { drawingMasterDataService } from "@/lib/services/drawing-master-data.service";
-import { Badge } from "@/components/ui/badge";
+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 } from 'lucide-react';
+import { useProjects } from '@/hooks/use-master-data';
+import { drawingMasterDataService } from '@/lib/services/drawing-master-data.service';
+import { Badge } from '@/components/ui/badge';
 
 interface SubCategory {
   id: number;
@@ -29,33 +23,27 @@ export default function ContractSubCategoriesPage() {
 
   const columns: ColumnDef<SubCategory>[] = [
     {
-      accessorKey: "subCatCode",
-      header: "Code",
+      accessorKey: 'subCatCode',
+      header: 'Code',
       cell: ({ row }) => (
         <Badge variant="outline" className="font-mono">
-          {row.getValue("subCatCode")}
+          {row.getValue('subCatCode')}
         </Badge>
       ),
     },
     {
-      accessorKey: "subCatName",
-      header: "Sub-category Name",
+      accessorKey: 'subCatName',
+      header: 'Sub-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 +51,7 @@ export default function ContractSubCategoriesPage() {
     <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 +77,7 @@ export default function ContractSubCategoriesPage() {
       <div className="p-6 space-y-6">
         <div>
           <h1 className="text-2xl font-bold">Contract Drawing Sub-categories</h1>
-          <p className="text-muted-foreground mt-1">
-            Manage sub-categories (หมวดหมู่ย่อย) for contract drawings
-          </p>
+          <p className="text-muted-foreground mt-1">Manage sub-categories (หมวดหมู่ย่อย) for contract drawings</p>
         </div>
         {projectFilter}
         <div className="text-center py-12 text-muted-foreground border rounded-lg border-dashed">
@@ -107,17 +93,24 @@ export default function ContractSubCategoriesPage() {
         entityName="Sub-category"
         title="Contract Drawing Sub-categories"
         description="Manage sub-categories (หมวดหมู่ย่อย) for contract drawings"
-        queryKey={["contract-drawing-sub-categories", String(selectedProjectId)]}
-        fetchFn={() => drawingMasterDataService.getContractSubCategories(selectedProjectId)}
-        createFn={(data) => drawingMasterDataService.createContractSubCategory({ ...data, projectId: selectedProjectId })}
+        queryKey={['contract-drawing-sub-categories', String(selectedProjectId)]}
+        fetchFn={async () => {
+          console.log(`Fetching Contract Sub-Categories for project ${selectedProjectId}`);
+          const data = await drawingMasterDataService.getContractSubCategories(selectedProjectId);
+          console.log('Contract Sub-Categories Data:', data);
+          return data;
+        }}
+        createFn={(data) =>
+          drawingMasterDataService.createContractSubCategory({ ...data, projectId: selectedProjectId })
+        }
         updateFn={(id, data) => drawingMasterDataService.updateContractSubCategory(id, data)}
         deleteFn={(id) => drawingMasterDataService.deleteContractSubCategory(id)}
         columns={columns}
         fields={[
-          { name: "subCatCode", label: "Sub-category Code", type: "text", required: true },
-          { name: "subCatName", label: "Sub-category Name", type: "text", required: true },
-          { name: "description", label: "Description", type: "textarea" },
-          { name: "sortOrder", label: "Sort Order", type: "text", required: true },
+          { name: 'subCatCode', label: 'Sub-category Code', type: 'text', required: true },
+          { name: 'subCatName', label: 'Sub-category Name', type: 'text', required: true },
+          { name: 'description', label: 'Description', type: 'textarea' },
+          { name: 'sortOrder', label: 'Sort Order', type: 'text', required: true },
         ]}
         filters={projectFilter}
       />
diff --git a/frontend/app/(admin)/admin/doc-control/drawings/shop/main-categories/page.tsx b/frontend/app/(admin)/admin/doc-control/drawings/shop/main-categories/page.tsx
index 7dafdf0..a348a51 100644
--- a/frontend/app/(admin)/admin/doc-control/drawings/shop/main-categories/page.tsx
+++ b/frontend/app/(admin)/admin/doc-control/drawings/shop/main-categories/page.tsx
@@ -1,19 +1,13 @@
-"use client";
+'use client';
 
-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, CheckCircle, XCircle } from "lucide-react";
-import { useProjects } from "@/hooks/use-master-data";
-import { drawingMasterDataService } from "@/lib/services/drawing-master-data.service";
-import { Badge } from "@/components/ui/badge";
+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, CheckCircle, XCircle } from 'lucide-react';
+import { useProjects } from '@/hooks/use-master-data';
+import { drawingMasterDataService } from '@/lib/services/drawing-master-data.service';
+import { Badge } from '@/components/ui/badge';
 
 interface MainCategory {
   id: number;
@@ -30,44 +24,37 @@ export default function ShopMainCategoriesPage() {
 
   const columns: ColumnDef<MainCategory>[] = [
     {
-      accessorKey: "mainCategoryCode",
-      header: "Code",
+      accessorKey: 'mainCategoryCode',
+      header: 'Code',
       cell: ({ row }) => (
         <Badge variant="outline" className="font-mono">
-          {row.getValue("mainCategoryCode")}
+          {row.getValue('mainCategoryCode')}
         </Badge>
       ),
     },
     {
-      accessorKey: "mainCategoryName",
-      header: "Category Name",
+      accessorKey: 'mainCategoryName',
+      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: "isActive",
-      header: "Active",
-      cell: ({ row }) => (
-        row.getValue("isActive") ? (
+      accessorKey: 'isActive',
+      header: 'Active',
+      cell: ({ row }) =>
+        row.getValue('isActive') ? (
           <CheckCircle className="h-4 w-4 text-green-600" />
         ) : (
           <XCircle className="h-4 w-4 text-red-600" />
-        )
-      ),
+        ),
     },
     {
-      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>,
     },
   ];
 
@@ -75,7 +62,7 @@ export default function ShopMainCategoriesPage() {
     <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]">
@@ -101,9 +88,7 @@ export default function ShopMainCategoriesPage() {
       <div className="p-6 space-y-6">
         <div>
           <h1 className="text-2xl font-bold">Shop Drawing Main Categories</h1>
-          <p className="text-muted-foreground mt-1">
-            Manage main categories (หมวดหมู่หลัก) for shop drawings
-          </p>
+          <p className="text-muted-foreground mt-1">Manage main categories (หมวดหมู่หลัก) for shop drawings</p>
         </div>
         {projectFilter}
         <div className="text-center py-12 text-muted-foreground border rounded-lg border-dashed">
@@ -119,25 +104,34 @@ export default function ShopMainCategoriesPage() {
         entityName="Main Category"
         title="Shop Drawing Main Categories"
         description="Manage main categories (หมวดหมู่หลัก) for shop drawings"
-        queryKey={["shop-drawing-main-categories", String(selectedProjectId)]}
-        fetchFn={() => drawingMasterDataService.getShopMainCategories(selectedProjectId)}
-        createFn={(data) => drawingMasterDataService.createShopMainCategory({
-          ...data,
-          projectId: selectedProjectId,
-          isActive: data.isActive === "true" || data.isActive === true
-        })}
-        updateFn={(id, data) => drawingMasterDataService.updateShopMainCategory(id, {
-          ...data,
-          isActive: data.isActive === "true" || data.isActive === true
-        })}
+        queryKey={['shop-drawing-main-categories', String(selectedProjectId)]}
+        fetchFn={async () => {
+          console.log(`Fetching Shop Main Categories for project ${selectedProjectId}`);
+          const data = await drawingMasterDataService.getShopMainCategories(selectedProjectId);
+          console.log('Shop Main Categories Data:', data);
+          return data;
+        }}
+        createFn={(data) =>
+          drawingMasterDataService.createShopMainCategory({
+            ...data,
+            projectId: selectedProjectId,
+            isActive: data.isActive === 'true' || data.isActive === true,
+          })
+        }
+        updateFn={(id, data) =>
+          drawingMasterDataService.updateShopMainCategory(id, {
+            ...data,
+            isActive: data.isActive === 'true' || data.isActive === true,
+          })
+        }
         deleteFn={(id) => drawingMasterDataService.deleteShopMainCategory(id)}
         columns={columns}
         fields={[
-          { name: "mainCategoryCode", label: "Category Code", type: "text", required: true },
-          { name: "mainCategoryName", label: "Category Name", type: "text", required: true },
-          { name: "description", label: "Description", type: "textarea" },
-          { name: "isActive", label: "Active", type: "checkbox" },
-          { name: "sortOrder", label: "Sort Order", type: "text", required: true },
+          { name: 'mainCategoryCode', label: 'Category Code', type: 'text', required: true },
+          { name: 'mainCategoryName', label: 'Category Name', type: 'text', required: true },
+          { name: 'description', label: 'Description', type: 'textarea' },
+          { name: 'isActive', label: 'Active', type: 'checkbox' },
+          { name: 'sortOrder', label: 'Sort Order', type: 'text', required: true },
         ]}
         filters={projectFilter}
       />
diff --git a/frontend/app/(admin)/admin/doc-control/drawings/shop/sub-categories/page.tsx b/frontend/app/(admin)/admin/doc-control/drawings/shop/sub-categories/page.tsx
index 95a0e02..5459d17 100644
--- a/frontend/app/(admin)/admin/doc-control/drawings/shop/sub-categories/page.tsx
+++ b/frontend/app/(admin)/admin/doc-control/drawings/shop/sub-categories/page.tsx
@@ -107,7 +107,12 @@ export default function ShopSubCategoriesPage() {
         title="Shop Drawing Sub-categories"
         description="Manage sub-categories (หมวดหมู่ย่อย) for shop drawings"
         queryKey={['shop-drawing-sub-categories', String(selectedProjectId)]}
-        fetchFn={() => drawingMasterDataService.getShopSubCategories(selectedProjectId)}
+        fetchFn={async () => {
+          console.log(`Fetching Shop Sub-Categories for project ${selectedProjectId}`);
+          const data = await drawingMasterDataService.getShopSubCategories(selectedProjectId);
+          console.log('Shop Sub-Categories Data:', data);
+          return data;
+        }}
         createFn={(data) =>
           drawingMasterDataService.createShopSubCategory({
             ...data,