260316:1117 20260316:1100 Refactor UUID

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { circulationService } from "@/lib/services/circulation.service";
 import { Circulation, UpdateCirculationRoutingDto } from "@/types/circulation";
@@ -42,14 +42,13 @@ function getStatusVariant(status: string): "default" | "secondary" | "destructiv
 
 export default function CirculationDetailPage() {
   const params = useParams();
-  const router = useRouter();
   const queryClient = useQueryClient();
-  const id = params.id as string;
+  const uuid = params.uuid as string;
 
   const { data: circulation, isLoading, error } = useQuery<Circulation>({
-    queryKey: ["circulation", id],
-    queryFn: () => circulationService.getById(id),
-    enabled: !!id,
+    queryKey: ["circulation", uuid],
+    queryFn: () => circulationService.getByUuid(uuid),
+    enabled: !!uuid,
   });
 
   const completeMutation = useMutation({
@@ -57,7 +56,7 @@ export default function CirculationDetailPage() {
       circulationService.updateRouting(routingId, data),
     onSuccess: () => {
       toast.success("Task completed successfully");
-      queryClient.invalidateQueries({ queryKey: ["circulation", id] });
+      queryClient.invalidateQueries({ queryKey: ["circulation", uuid] });
     },
     onError: () => {
       toast.error("Failed to update task status");
@@ -146,7 +145,7 @@ export default function CirculationDetailPage() {
             <div>
               <p className="text-sm text-muted-foreground">Linked Document</p>
               <Link
-                href={`/correspondences/${circulation.correspondenceId}`}
+                href={`/correspondences/${circulation.correspondence.uuid}`}
                 className="font-medium text-primary hover:underline"
               >
                 {circulation.correspondence.correspondence_number}

frontend/app/(dashboard)/circulation/new/page.tsx

@@ -83,7 +83,7 @@ export default function CreateCirculationPage() {
     mutationFn: (data: CreateCirculationDto) => circulationService.create(data),
     onSuccess: (result) => {
       toast.success("Circulation created successfully");
-      router.push(`/circulation/${result.id}`);
+      router.push(`/circulation/${result.uuid}`);
     },
     onError: () => {
       toast.error("Failed to create circulation");
@@ -232,7 +232,7 @@ export default function CreateCirculationPage() {
                               <div className="flex flex-wrap gap-1">
                                 {selectedAssignees.map((userId) => {
                                   const user = users.find(
-                                    (u: { userId: number }) => u.userId === userId
+                                    (u) => u.userId === userId
                                   );
                                   return user ? (
                                     <Badge
@@ -267,16 +267,16 @@ export default function CreateCirculationPage() {
                           <CommandList>
                             <CommandEmpty>No user found.</CommandEmpty>
                             <CommandGroup>
-                              {users.map((user: { userId: number; username: string; firstName?: string; lastName?: string }) => (
+                              {users.map((user) => (
                                 <CommandItem
-                                  key={user.userId}
+                                  key={user.userId ?? user.uuid}
                                   value={user.username}
-                                  onSelect={() => toggleAssignee(user.userId)}
+                                  onSelect={() => user.userId && toggleAssignee(user.userId)}
                                 >
                                   <Check
                                     className={cn(
                                       "mr-2 h-4 w-4",
-                                      selectedAssignees.includes(user.userId)
+                                      user.userId != null && selectedAssignees.includes(user.userId)
                                         ? "opacity-100"
                                         : "opacity-0"
                                     )}

frontend/app/(dashboard)/correspondences/[id]/edit/page.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import { CorrespondenceForm } from "@/components/correspondences/form";
-import { useCorrespondence } from "@/hooks/use-correspondence";
-import { Loader2 } from "lucide-react";
-import { useParams } from "next/navigation";
-
-export default function EditCorrespondencePage() {
-  const params = useParams();
-  const id = Number(params?.id);
-
-  const { data: correspondence, isLoading, isError } = useCorrespondence(id);
-
-  if (isLoading) {
-    return (
-       <div className="flex bg-muted/20 min-h-screen justify-center items-center">
-          <Loader2 className="h-8 w-8 animate-spin" />
-       </div>
-    );
-  }
-
-  if (isError || !correspondence) {
-    return (
-       <div className="flex flex-col items-center justify-center min-h-screen">
-          <h1 className="text-xl font-bold text-red-500">Failed to load correspondence</h1>
-       </div>
-    );
-  }
-
-  return (
-    <div className="max-w-4xl mx-auto py-6">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold">Edit Correspondence</h1>
-        <p className="text-muted-foreground mt-1">
-          {correspondence.correspondenceNumber}
-        </p>
-      </div>
-
-      <div className="bg-card border rounded-lg p-6 shadow-sm">
-        <CorrespondenceForm initialData={correspondence} id={id} />
-      </div>
-    </div>
-  );
-}

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

@@ -3,27 +3,22 @@
 import { CorrespondenceDetail } from "@/components/correspondences/detail";
 import { useCorrespondence } from "@/hooks/use-correspondence";
 import { Loader2 } from "lucide-react";
-import { notFound, useParams } from "next/navigation";
+import { useParams } from "next/navigation";
 
 export default function CorrespondenceDetailPage() {
   const params = useParams();
-  const id = Number(params?.id); // useParams returns string | string[]
+  const uuid = (params?.uuid as string) ?? '';
 
-  if (isNaN(id)) {
-    // We can't use notFound() directly in client component render without breaking sometimes,
-    // but typically it works. Better to handle gracefully or redirect.
-    // For now, let's keep it or return 404 UI.
-    // Actually notFound() is for server components mostly.
-    // Let's just return our error UI if ID is invalid.
+  const { data: correspondence, isLoading, isError } = useCorrespondence(uuid);
+
+  if (!uuid) {
     return (
        <div className="flex flex-col items-center justify-center min-h-screen">
-          <h1 className="text-xl font-bold text-red-500">Invalid Correspondence ID</h1>
+          <h1 className="text-xl font-bold text-red-500">Invalid Correspondence UUID</h1>
        </div>
     );
   }
 
-  const { data: correspondence, isLoading, isError } = useCorrespondence(id);
-
   if (isLoading) {
     return (
        <div className="flex bg-muted/20 min-h-screen justify-center items-center">
@@ -33,11 +28,10 @@ export default function CorrespondenceDetailPage() {
   }
 
   if (isError || !correspondence) {
-    // Optionally handle 404 vs other errors differently, but for now simple handling
     return (
        <div className="flex flex-col items-center justify-center min-h-screen">
           <h1 className="text-xl font-bold text-red-500">Failed to load correspondence</h1>
-          <p>Please try again later or verify the ID.</p>
+          <p>Please try again later or verify the UUID.</p>
        </div>
     );
   }

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

@@ -1,4 +1,3 @@
-import { drawingApi } from "@/lib/api/drawings";
 import { notFound } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { ArrowLeft, Download, FileText, GitCompare } from "lucide-react";
@@ -8,19 +7,22 @@ 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";
 
 export default async function DrawingDetailPage({
   params,
 }: {
-  params: Promise<{ id: string }>;
+  params: Promise<{ uuid: string }>;
 }) {
-  const { id: rawId } = await params;
-  const id = parseInt(rawId);
-  if (isNaN(id)) {
+  const { uuid } = await params;
+  if (!uuid) {
     notFound();
   }
 
-  const drawing = await drawingApi.getById(id);
+  // 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 (!drawing) {
     notFound();