251211:1622 Frontend: refactor Dashboard (not finish)

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

@@ -0,0 +1,44 @@
+"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/[id]/page.tsx

@@ -1,23 +1,45 @@
-import { correspondenceApi } from "@/lib/api/correspondences";
+"use client";
+
 import { CorrespondenceDetail } from "@/components/correspondences/detail";
-import { notFound } from "next/navigation";
+import { useCorrespondence } from "@/hooks/use-correspondence";
+import { Loader2 } from "lucide-react";
+import { notFound, useParams } from "next/navigation";
 
-export const dynamic = "force-dynamic";
+export default function CorrespondenceDetailPage() {
+  const params = useParams();
+  const id = Number(params?.id); // useParams returns string | string[]
 
-export default async function CorrespondenceDetailPage({
-  params,
-}: {
-  params: { id: string };
-}) {
-  const id = parseInt(params.id);
   if (isNaN(id)) {
-    notFound();
+    // 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.
+    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>
+       </div>
+    );
   }
 
-  const correspondence = await correspondenceApi.getById(id);
+  const { data: correspondence, isLoading, isError } = useCorrespondence(id);
 
-  if (!correspondence) {
-    notFound();
+  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) {
+    // 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>
+       </div>
+    );
   }
 
   return <CorrespondenceDetail data={correspondence} />;