fixed setting page

apps/Frontend/src/components/settings/InsuranceCredForm.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { apiRequest } from "@/lib/queryClient";
 import { toast } from "@/hooks/use-toast";
@@ -6,15 +6,23 @@ import { toast } from "@/hooks/use-toast";
 type CredentialFormProps = {
   onClose: () => void;
   userId: number;
+  defaultValues?: {
+    id?: number;
+    siteKey: string;
+    username: string;
+    password: string;
+  };
 };
 
-export function CredentialForm({ onClose, userId }: CredentialFormProps) {
-  const [siteKey, setSiteKey] = useState("");
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
+export function CredentialForm({ onClose, userId, defaultValues }: CredentialFormProps) {
+  const [siteKey, setSiteKey] = useState(defaultValues?.siteKey || "");
+  const [username, setUsername] = useState(defaultValues?.username || "");
+  const [password, setPassword] = useState(defaultValues?.password || "");
+
   const queryClient = useQueryClient();
 
-  const createCredentialMutation = useMutation({
+  // Create or Update Mutation inside form
+  const mutation = useMutation({
     mutationFn: async () => {
       const payload = {
         siteKey: siteKey.trim(),
@@ -23,15 +31,24 @@ export function CredentialForm({ onClose, userId }: CredentialFormProps) {
         userId,
       };
 
-      const res = await apiRequest("POST", "/api/insuranceCreds/", payload);
+      const url = defaultValues?.id
+        ? `/api/insuranceCreds/${defaultValues.id}`
+        : "/api/insuranceCreds/";
+
+      const method = defaultValues?.id ? "PUT" : "POST";
+
+      const res = await apiRequest(method, url, payload);
+
       if (!res.ok) {
         const errorData = await res.json().catch(() => null);
-        throw new Error(errorData?.message || "Failed to create credential");
+        throw new Error(errorData?.message || "Failed to save credential");
       }
       return res.json();
     },
     onSuccess: () => {
-      toast({ title: "Credential created." });
+      toast({
+        title: `Credential ${defaultValues?.id ? "updated" : "created"}.`,
+      });
       queryClient.invalidateQueries({ queryKey: ["/api/insuranceCreds/"] });
       onClose();
     },
@@ -44,8 +61,16 @@ export function CredentialForm({ onClose, userId }: CredentialFormProps) {
     },
   });
 
+  // Reset form on defaultValues change (edit mode)
+  useEffect(() => {
+    setSiteKey(defaultValues?.siteKey || "");
+    setUsername(defaultValues?.username || "");
+    setPassword(defaultValues?.password || "");
+  }, [defaultValues]);
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+
     if (!siteKey || !username || !password) {
       toast({
         title: "Error",
@@ -54,13 +79,16 @@ export function CredentialForm({ onClose, userId }: CredentialFormProps) {
       });
       return;
     }
-    createCredentialMutation.mutate();
+
+    mutation.mutate();
   };
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
       <div className="bg-white rounded-lg p-6 w-full max-w-md shadow-lg">
-        <h2 className="text-lg font-bold mb-4">Create Credential</h2>
+        <h2 className="text-lg font-bold mb-4">
+          {defaultValues?.id ? "Edit Credential" : "Create Credential"}
+        </h2>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
             <label className="block text-sm font-medium">Site Key</label>
@@ -69,7 +97,7 @@ export function CredentialForm({ onClose, userId }: CredentialFormProps) {
               value={siteKey}
               onChange={(e) => setSiteKey(e.target.value)}
               className="mt-1 p-2 border rounded w-full"
-              placeholder="e.g., github, slack"
+              placeholder="e.g., MH, Delta MA, (keep the site key exact same)"
             />
           </div>
           <div>
@@ -95,15 +123,22 @@ export function CredentialForm({ onClose, userId }: CredentialFormProps) {
               type="button"
               onClick={onClose}
               className="text-gray-600 hover:underline"
+              disabled={mutation.isPending}
             >
               Cancel
             </button>
             <button
               type="submit"
-              disabled={createCredentialMutation.isPending}
-              className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+              disabled={mutation.isPending}
+              className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
             >
-              {createCredentialMutation.isPending ? "Creating..." : "Create"}
+              {mutation.isPending
+                ? defaultValues?.id
+                  ? "Updating..."
+                  : "Creating..."
+                : defaultValues?.id
+                ? "Update"
+                : "Create"}
             </button>
           </div>
         </form>