251208:0010 Backend & Frontend Debug

frontend/components/rfas/detail.tsx

@@ -18,8 +18,9 @@ import {
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { rfaApi } from "@/lib/api/rfas";
+import { rfaApi } from "@/lib/api/rfas"; // Deprecated, remove if possible
 import { useRouter } from "next/navigation";
+import { useProcessRFA } from "@/hooks/use-rfa";
 
 interface RFADetailProps {
   data: RFA;
@@ -29,21 +30,26 @@ export function RFADetail({ data }: RFADetailProps) {
   const router = useRouter();
   const [approvalDialog, setApprovalDialog] = useState<"approve" | "reject" | null>(null);
   const [comments, setComments] = useState("");
-  const [isProcessing, setIsProcessing] = useState(false);
+  const processMutation = useProcessRFA();
 
   const handleApproval = async (action: "approve" | "reject") => {
-    setIsProcessing(true);
-    try {
-      const newStatus = action === "approve" ? "APPROVED" : "REJECTED";
-      await rfaApi.updateStatus(data.rfa_id, newStatus, comments);
-      setApprovalDialog(null);
-      router.refresh();
-    } catch (error) {
-      console.error(error);
-      alert("Failed to update status");
-    } finally {
-      setIsProcessing(false);
-    }
+    const apiAction = action === "approve" ? "APPROVE" : "REJECT";
+
+    processMutation.mutate(
+      {
+        id: data.rfa_id,
+        data: {
+          action: apiAction,
+          comments: comments,
+        },
+      },
+      {
+        onSuccess: () => {
+          setApprovalDialog(null);
+          // Query invalidation handled in hook
+        },
+      }
+    );
   };
 
   return (
@@ -181,16 +187,16 @@ export function RFADetail({ data }: RFADetailProps) {
             </div>
           </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setApprovalDialog(null)} disabled={isProcessing}>
+            <Button variant="outline" onClick={() => setApprovalDialog(null)} disabled={processMutation.isPending}>
               Cancel
             </Button>
             <Button
               variant={approvalDialog === "approve" ? "default" : "destructive"}
               onClick={() => handleApproval(approvalDialog!)}
-              disabled={isProcessing}
+              disabled={processMutation.isPending}
               className={approvalDialog === "approve" ? "bg-green-600 hover:bg-green-700" : ""}
             >
-              {isProcessing && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {processMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
               {approvalDialog === "approve" ? "Confirm Approval" : "Confirm Rejection"}
             </Button>
           </DialogFooter>

frontend/components/rfas/form.tsx

@@ -16,7 +16,8 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { useRouter } from "next/navigation";
-import { rfaApi } from "@/lib/api/rfas";
+import { useCreateRFA } from "@/hooks/use-rfa";
+import { useDisciplines } from "@/hooks/use-master-data";
 import { useState } from "react";
 
 const rfaItemSchema = z.object({
@@ -38,7 +39,11 @@ type RFAFormData = z.infer<typeof rfaSchema>;
 
 export function RFAForm() {
   const router = useRouter();
-  const [isSubmitting, setIsSubmitting] = useState(false);
+  const createMutation = useCreateRFA();
+
+  // Fetch Disciplines (Assuming Contract 1 for now, or dynamic)
+  const selectedContractId = 1;
+  const { data: disciplines, isLoading: isLoadingDisciplines } = useDisciplines(selectedContractId);
 
   const {
     register,
@@ -49,6 +54,7 @@ export function RFAForm() {
   } = useForm<RFAFormData>({
     resolver: zodResolver(rfaSchema),
     defaultValues: {
+      contract_id: 1,
       items: [{ item_no: "1", description: "", quantity: 0, unit: "" }],
     },
   });
@@ -58,18 +64,12 @@ export function RFAForm() {
     name: "items",
   });
 
-  const onSubmit = async (data: RFAFormData) => {
-    setIsSubmitting(true);
-    try {
-      await rfaApi.create(data as any);
-      router.push("/rfas");
-      router.refresh();
-    } catch (error) {
-      console.error(error);
-      alert("Failed to create RFA");
-    } finally {
-      setIsSubmitting(false);
-    }
+  const onSubmit = (data: RFAFormData) => {
+    createMutation.mutate(data as any, {
+      onSuccess: () => {
+        router.push("/rfas");
+      },
+    });
   };
 
   return (
@@ -99,13 +99,14 @@ export function RFAForm() {
               <Label>Contract *</Label>
               <Select
                 onValueChange={(v) => setValue("contract_id", parseInt(v))}
+                defaultValue="1"
               >
                 <SelectTrigger>
                   <SelectValue placeholder="Select Contract" />
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="1">Main Construction Contract</SelectItem>
-                  <SelectItem value="2">Subcontract A</SelectItem>
+                  {/* Additional contracts can be fetched via API too */}
                 </SelectContent>
               </Select>
               {errors.contract_id && (
@@ -117,15 +118,20 @@ export function RFAForm() {
               <Label>Discipline *</Label>
               <Select
                 onValueChange={(v) => setValue("discipline_id", parseInt(v))}
+                disabled={isLoadingDisciplines}
               >
                 <SelectTrigger>
-                  <SelectValue placeholder="Select Discipline" />
+                  <SelectValue placeholder={isLoadingDisciplines ? "Loading..." : "Select Discipline"} />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="1">Civil</SelectItem>
-                  <SelectItem value="2">Structural</SelectItem>
-                  <SelectItem value="3">Electrical</SelectItem>
-                  <SelectItem value="4">Mechanical</SelectItem>
+                  {disciplines?.map((d: any) => (
+                    <SelectItem key={d.id} value={String(d.id)}>
+                      {d.name} ({d.code})
+                    </SelectItem>
+                  ))}
+                  {!isLoadingDisciplines && !disciplines?.length && (
+                     <SelectItem value="0" disabled>No disciplines found</SelectItem>
+                  )}
                 </SelectContent>
               </Select>
               {errors.discipline_id && (
@@ -227,8 +233,8 @@ export function RFAForm() {
         <Button type="button" variant="outline" onClick={() => router.back()}>
           Cancel
         </Button>
-        <Button type="submit" disabled={isSubmitting}>
-          {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+        <Button type="submit" disabled={createMutation.isPending}>
+          {createMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
           Create RFA
         </Button>
       </div>