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} />;

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

@@ -16,11 +16,30 @@ function RFAsContent() {
   const search = searchParams.get('search') || undefined;
   const projectId = searchParams.get('projectId') ? parseInt(searchParams.get('projectId')!) : undefined;
 
-  const { data, isLoading, isError } = useRFAs({ page, statusId, search, projectId });
+  const revisionStatus = (searchParams.get('revisionStatus') as 'CURRENT' | 'ALL' | 'OLD') || 'CURRENT';
+
+  const { data, isLoading, isError } = useRFAs({ page, statusId, search, projectId, revisionStatus });
+
+
 
   return (
     <>
-      {/* RFAFilters component could be added here if needed */}
+      <div className="mb-4 flex gap-2">
+        {/* Simple Filter Buttons using standard Buttons for now, or use a Select if imported */}
+        <div className="flex gap-1 bg-muted p-1 rounded-md">
+           {['ALL', 'CURRENT', 'OLD'].map((status) => (
+             <Link key={status} href={`?${new URLSearchParams({...Object.fromEntries(searchParams.entries()), revisionStatus: status, page: '1'}).toString()}`}>
+               <Button
+                 variant={revisionStatus === status ? 'default' : 'ghost'}
+                 size="sm"
+                 className="text-xs px-3"
+               >
+                 {status === 'CURRENT' ? 'Latest' : status === 'OLD' ? 'Previous' : 'All'}
+               </Button>
+             </Link>
+           ))}
+        </div>
+      </div>
 
       {isLoading ? (
         <div className="flex justify-center py-8">
@@ -32,12 +51,12 @@ function RFAsContent() {
         </div>
       ) : (
         <>
-          <RFAList data={data} />
+          <RFAList data={data?.data || []} />
            <div className="mt-4">
             <Pagination
-              currentPage={data?.page || 1}
-              totalPages={data?.lastPage || data?.totalPages || 1}
-              total={data?.total || 0}
+              currentPage={data?.meta?.page || 1}
+              totalPages={data?.meta?.totalPages || 1}
+              total={data?.meta?.total || 0}
             />
           </div>
         </>