251208:0010 Backend & Frontend Debug

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

@@ -1,21 +1,32 @@
-import { rfaApi } from "@/lib/api/rfas";
-import { RFADetail } from "@/components/rfas/detail";
-import { notFound } from "next/navigation";
+"use client";
 
-export default async function RFADetailPage({
-  params,
-}: {
-  params: { id: string };
-}) {
-  const id = parseInt(params.id);
-  if (isNaN(id)) {
-    notFound();
+import { RFADetail } from "@/components/rfas/detail";
+import { notFound, useParams } from "next/navigation";
+import { useRFA } from "@/hooks/use-rfa";
+import { Loader2 } from "lucide-react";
+
+export default function RFADetailPage() {
+  const { id } = useParams();
+
+  if (!id) notFound();
+
+  const { data: rfa, isLoading, isError } = useRFA(String(id));
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center py-20">
+        <Loader2 className="h-8 w-8 animate-spin" />
+      </div>
+    );
   }
 
-  const rfa = await rfaApi.getById(id);
-
-  if (!rfa) {
-    notFound();
+  if (isError || !rfa) {
+    // Check if error is 404
+    return (
+       <div className="text-center py-20 text-red-500">
+         RFA not found or failed to load.
+       </div>
+    );
   }
 
   return <RFADetail data={rfa} />;

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

@@ -1,21 +1,20 @@
-import { RFAList } from "@/components/rfas/list";
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
-import { Plus } from "lucide-react";
-import { rfaApi } from "@/lib/api/rfas";
-import { Pagination } from "@/components/common/pagination";
+"use client";
 
-export default async function RFAsPage({
-  searchParams,
-}: {
-  searchParams: { page?: string; status?: string; search?: string };
-}) {
-  const page = parseInt(searchParams.page || "1");
-  const data = await rfaApi.getAll({
-    page,
-    status: searchParams.status,
-    search: searchParams.search,
-  });
+import { RFAList } from '@/components/rfas/list';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+import { Plus, Loader2 } from 'lucide-react';
+import { useRFAs } from '@/hooks/use-rfa';
+import { useSearchParams } from 'next/navigation';
+import { Pagination } from '@/components/common/pagination';
+
+export default function RFAsPage() {
+  const searchParams = useSearchParams();
+  const page = parseInt(searchParams.get('page') || '1');
+  const status = searchParams.get('status') || undefined;
+  const search = searchParams.get('search') || undefined;
+
+  const { data, isLoading, isError } = useRFAs({ page, status, search });
 
   return (
     <div className="space-y-6">
@@ -34,15 +33,28 @@ export default async function RFAsPage({
         </Link>
       </div>
 
-      <RFAList data={data} />
+      {/* RFAFilters component could be added here if needed */}
 
-      <div className="mt-4">
-        <Pagination
-          currentPage={data.page}
-          totalPages={data.totalPages}
-          total={data.total}
-        />
-      </div>
+      {isLoading ? (
+        <div className="flex justify-center py-8">
+          <Loader2 className="h-8 w-8 animate-spin" />
+        </div>
+      ) : isError ? (
+        <div className="text-red-500 text-center py-8">
+          Failed to load RFAs.
+        </div>
+      ) : (
+        <>
+          <RFAList data={data} />
+           <div className="mt-4">
+            <Pagination
+              currentPage={data?.page || 1}
+              totalPages={data?.lastPage || data?.totalPages || 1}
+              total={data?.total || 0}
+            />
+          </div>
+        </>
+      )}
     </div>
   );
 }