260318:0931 Fix UUID and UTF

frontend/app/(dashboard)/drawings/[uuid]/page.tsx

@@ -1,33 +1,87 @@
+"use client";
+
+import { use } from "react";
 import { notFound } from "next/navigation";
 import { Button } from "@/components/ui/button";
-import { ArrowLeft, Download, FileText, GitCompare } from "lucide-react";
+import { ArrowLeft, Download, FileText, Loader2 } from "lucide-react";
 import Link from "next/link";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { RevisionHistory } from "@/components/drawings/revision-history";
 import { format } from "date-fns";
-import { drawingApi } from "@/lib/api/drawings";
+import { useQuery } from "@tanstack/react-query";
+import { contractDrawingService } from "@/lib/services/contract-drawing.service";
+import { shopDrawingService } from "@/lib/services/shop-drawing.service";
+import { asBuiltDrawingService } from "@/lib/services/asbuilt-drawing.service";
 
-export default async function DrawingDetailPage({
+async function fetchDrawingByUuid(uuid: string) {
+  // Try each drawing type until one succeeds
+  try {
+    const result = await contractDrawingService.getByUuid(uuid);
+    if (result?.data) return { ...result.data, _type: "CONTRACT" };
+  } catch { /* not found in contract drawings */ }
+
+  try {
+    const result = await shopDrawingService.getByUuid(uuid);
+    if (result?.data) return { ...result.data, _type: "SHOP" };
+  } catch { /* not found in shop drawings */ }
+
+  try {
+    const result = await asBuiltDrawingService.getByUuid(uuid);
+    if (result?.data) return { ...result.data, _type: "AS_BUILT" };
+  } catch { /* not found in asbuilt drawings */ }
+
+  return null;
+}
+
+export default function DrawingDetailPage({
   params,
 }: {
   params: Promise<{ uuid: string }>;
 }) {
-  const { uuid } = await params;
+  const { uuid } = use(params);
+
+  const { data: drawing, isLoading } = useQuery({
+    queryKey: ["drawing-detail", uuid],
+    queryFn: () => fetchDrawingByUuid(uuid),
+    enabled: !!uuid,
+  });
+
   if (!uuid) {
     notFound();
   }
 
-  // TODO: Replace mock drawingApi with real service call using UUID
-  // For now, keep using the mock API with a numeric fallback
-  const drawingId = parseInt(uuid);
-  const drawing = !isNaN(drawingId) ? await drawingApi.getById(drawingId) : undefined;
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-24">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
 
   if (!drawing) {
-    notFound();
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-4">
+          <Link href="/drawings">
+            <Button variant="ghost" size="icon">
+              <ArrowLeft className="h-5 w-5" />
+            </Button>
+          </Link>
+          <h1 className="text-2xl font-bold">Drawing Not Found</h1>
+        </div>
+        <p className="text-muted-foreground">
+          The drawing with UUID <code>{uuid}</code> could not be found.
+        </p>
+      </div>
+    );
   }
 
+  const drawingNumber = drawing.contractDrawingNo || drawing.drawingNumber || "N/A";
+  const title = drawing.title || drawing.currentRevision?.title || "Untitled";
+  const revisions = drawing.revisions || [];
+
   return (
     <div className="space-y-6">
       {/* Header */}
@@ -39,10 +93,8 @@ export default async function DrawingDetailPage({
             </Button>
           </Link>
           <div>
-            <h1 className="text-2xl font-bold">{drawing.drawingNumber}</h1>
-            <p className="text-muted-foreground">
-              {drawing.title}
-            </p>
+            <h1 className="text-2xl font-bold">{drawingNumber}</h1>
+            <p className="text-muted-foreground">{title}</p>
           </div>
         </div>
 
@@ -51,12 +103,6 @@ export default async function DrawingDetailPage({
             <Download className="mr-2 h-4 w-4" />
             Download Current
           </Button>
-          {(drawing.revisionCount ?? 0) > 1 && (
-            <Button variant="outline">
-              <GitCompare className="mr-2 h-4 w-4" />
-              Compare Revisions
-            </Button>
-          )}
         </div>
       </div>
 
@@ -67,31 +113,31 @@ export default async function DrawingDetailPage({
             <CardHeader>
               <div className="flex justify-between items-start">
                 <CardTitle className="text-xl">Drawing Details</CardTitle>
-                <Badge>{drawing.type}</Badge>
+                <Badge>{drawing._type}</Badge>
               </div>
             </CardHeader>
             <CardContent className="space-y-6">
               <div className="grid grid-cols-2 gap-6">
                 <div>
-                  <p className="text-sm font-medium text-muted-foreground">Discipline</p>
+                  <p className="text-sm font-medium text-muted-foreground">Drawing Number</p>
+                  <p className="font-medium mt-1">{drawingNumber}</p>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">Type</p>
+                  <p className="font-medium mt-1">{drawing._type}</p>
+                </div>
+                {drawing.volumePage && (
+                  <div>
+                    <p className="text-sm font-medium text-muted-foreground">Volume Page</p>
+                    <p className="font-medium mt-1">{drawing.volumePage}</p>
+                  </div>
+                )}
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">Created</p>
                   <p className="font-medium mt-1">
-                    {typeof drawing.discipline === 'object' && drawing.discipline
-                      ? `${drawing.discipline.disciplineName} (${drawing.discipline.disciplineCode})`
-                      : drawing.discipline || 'N/A'}
+                    {drawing.createdAt ? format(new Date(drawing.createdAt), "dd MMM yyyy") : "N/A"}
                   </p>
                 </div>
-                <div>
-                  <p className="text-sm font-medium text-muted-foreground">Sheet Number</p>
-                  <p className="font-medium mt-1">{drawing.sheetNumber}</p>
-                </div>
-                <div>
-                  <p className="text-sm font-medium text-muted-foreground">Scale</p>
-                  <p className="font-medium mt-1">{drawing.scale || "N/A"}</p>
-                </div>
-                <div>
-                  <p className="text-sm font-medium text-muted-foreground">Latest Issue Date</p>
-                  <p className="font-medium mt-1">{drawing.issueDate ? format(new Date(drawing.issueDate), "dd MMM yyyy") : 'N/A'}</p>
-                </div>
               </div>
 
               <Separator />
@@ -111,7 +157,7 @@ export default async function DrawingDetailPage({
 
         {/* Revisions */}
         <div className="space-y-6">
-          <RevisionHistory revisions={drawing.revisions || []} />
+          <RevisionHistory revisions={revisions} />
         </div>
       </div>
     </div>

frontend/app/(dashboard)/drawings/page.tsx

@@ -16,7 +16,7 @@ import Link from "next/link";
 import { useProjects } from "@/hooks/use-master-data";
 
 export default function DrawingsPage() {
-  const [selectedProjectId, setSelectedProjectId] = useState<number | undefined>(undefined);
+  const [selectedProjectUuid, setSelectedProjectUuid] = useState<string | undefined>(undefined);
   const { data: projects = [], isLoading: isLoadingProjects } = useProjects();
 
   return (
@@ -40,8 +40,8 @@ export default function DrawingsPage() {
       <div className="flex items-center gap-4">
         <span className="text-sm font-medium">Project:</span>
         <Select
-          value={selectedProjectId?.toString() ?? ""}
-          onValueChange={(v) => setSelectedProjectId(v ? parseInt(v) : undefined)}
+          value={selectedProjectUuid ?? ""}
+          onValueChange={(v) => setSelectedProjectUuid(v || undefined)}
         >
           <SelectTrigger className="w-[300px]">
             {isLoadingProjects ? (
@@ -51,8 +51,8 @@ export default function DrawingsPage() {
             )}
           </SelectTrigger>
           <SelectContent>
-            {projects.map((project: { id: number; projectName: string; projectCode: string }) => (
-              <SelectItem key={project.id} value={String(project.id)}>
+            {projects.map((project: { id: string; projectName: string; projectCode: string }) => (
+              <SelectItem key={project.id} value={project.id}>
                 {project.projectCode} - {project.projectName}
               </SelectItem>
             ))}
@@ -60,18 +60,18 @@ export default function DrawingsPage() {
         </Select>
       </div>
 
-      {!selectedProjectId ? (
+      {!selectedProjectUuid ? (
         <div className="text-center py-12 text-muted-foreground border rounded-lg border-dashed">
           Please select a project to view drawings.
         </div>
       ) : (
-        <DrawingTabs projectId={selectedProjectId} />
+        <DrawingTabs projectUuid={selectedProjectUuid} />
       )}
     </div>
   );
 }
 
-function DrawingTabs({ projectId }: { projectId: number }) {
+function DrawingTabs({ projectUuid }: { projectUuid: string }) {
   const [search, setSearch] = useState("");
   // We can add more specific filters here (e.g. category) later
 
@@ -98,15 +98,15 @@ function DrawingTabs({ projectId }: { projectId: number }) {
           </div>
 
           <TabsContent value="contract" className="mt-0">
-            <DrawingList type="CONTRACT" projectId={projectId} filters={{ search }} />
+            <DrawingList type="CONTRACT" projectUuid={projectUuid} filters={{ search }} />
           </TabsContent>
 
           <TabsContent value="shop" className="mt-0">
-            <DrawingList type="SHOP" projectId={projectId} filters={{ search }} />
+            <DrawingList type="SHOP" projectUuid={projectUuid} filters={{ search }} />
           </TabsContent>
 
           <TabsContent value="asbuilt" className="mt-0">
-            <DrawingList type="AS_BUILT" projectId={projectId} filters={{ search }} />
+            <DrawingList type="AS_BUILT" projectUuid={projectUuid} filters={{ search }} />
           </TabsContent>
         </Tabs>
   )

frontend/components/drawings/list.tsx

@@ -14,11 +14,11 @@ type DrawingSearchParams = SearchContractDrawingDto | SearchShopDrawingDto | Sea
 
 interface DrawingListProps {
   type: 'CONTRACT' | 'SHOP' | 'AS_BUILT';
-  projectId: number;
+  projectUuid: string;
   filters?: Partial<DrawingSearchParams>;
 }
 
-export function DrawingList({ type, projectId, filters }: DrawingListProps) {
+export function DrawingList({ type, projectUuid, filters }: DrawingListProps) {
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 20,
@@ -30,7 +30,7 @@ export function DrawingList({ type, projectId, filters }: DrawingListProps) {
     data: response,
     isLoading,
   } = useDrawings(type, {
-    projectId,
+    projectUuid,
     ...filters,
     page: pagination.pageIndex + 1, // API is 1-based
     limit: pagination.pageSize,

frontend/types/dto/drawing/asbuilt-drawing.dto.ts

@@ -32,9 +32,9 @@ export interface CreateAsBuiltDrawingRevisionDto {
 
 // --- Search ---
 export interface SearchAsBuiltDrawingDto {
-  projectId: number;
+  projectUuid: string;
   search?: string;
 
   page?: number;     // Default: 1
-  pageSize?: number; // Default: 20
+  limit?: number;    // Default: 20
 }

frontend/types/dto/drawing/contract-drawing.dto.ts

@@ -29,13 +29,13 @@ export type UpdateContractDrawingDto = Partial<CreateContractDrawingDto>;
 
 // --- Search ---
 export interface SearchContractDrawingDto {
-  /** จำเป็นต้องระบุ Project ID เสมอ */
-  projectId: number;
+  /** จำเป็นต้องระบุ Project UUID เสมอ */
+  projectUuid: string;
 
   volumeId?: number;
   mapCatId?: number;
   search?: string; // ค้นหาจาก Title หรือ Number
 
   page?: number;     // Default: 1
-  pageSize?: number; // Default: 20
+  limit?: number;    // Default: 20
 }

frontend/types/dto/drawing/shop-drawing.dto.ts

@@ -30,11 +30,11 @@ export interface CreateShopDrawingRevisionDto {
 
 // --- Search ---
 export interface SearchShopDrawingDto {
-  projectId: number;
+  projectUuid: string;
   mainCategoryId?: number;
   subCategoryId?: number;
   search?: string;
 
   page?: number;     // Default: 1
-  pageSize?: number; // Default: 20
+  limit?: number;    // Default: 20
 }