fixed setting page

apps/Backend/src/routes/insuranceCreds.ts

@@ -39,12 +39,24 @@ router.post("/", async (req: Request, res: Response):Promise<any> => {
 
     const parseResult = insertInsuranceCredentialSchema.safeParse({ ...req.body, userId });
     if (!parseResult.success) {
-      return res.status(400).json({ error: parseResult.error.flatten() });
+      const flat = (parseResult as typeof parseResult & { error: z.ZodError<any> }).error.flatten();
+      const firstError =
+        Object.values(flat.fieldErrors)[0]?.[0] || "Invalid input";
+
+      return res.status(400).json({
+        message: firstError,
+        details: flat.fieldErrors,
+      });
     }
 
     const credential = await storage.createInsuranceCredential(parseResult.data);
     return res.status(201).json(credential);
-  } catch (err) {
+  } catch (err:any) {
+    if (err.code === "P2002") {
+    return res.status(400).json({
+      message: `Credential with this ${err.meta?.target?.join(", ")} already exists.`,
+    });
+  }
     return res.status(500).json({ error: "Failed to create credential", details: String(err) });
   }
 });

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) {
+export function CredentialForm({ onClose, userId, defaultValues }: CredentialFormProps) {
-  const [siteKey, setSiteKey] = useState("");
+  const [siteKey, setSiteKey] = useState(defaultValues?.siteKey || "");
-  const [username, setUsername] = useState("");
+  const [username, setUsername] = useState(defaultValues?.username || "");
-  const [password, setPassword] = useState("");
+  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}
+              disabled={mutation.isPending}
-              className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+              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>

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

@@ -1,7 +1,10 @@
-// components/CredentialTable.tsx
+import React, { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { apiRequest } from "@/lib/queryClient";
-import { toast } from "@/hooks/use-toast";
+import { Button } from "../ui/button";
+import { Edit, Delete, Plus } from "lucide-react";
+import { CredentialForm } from "./InsuranceCredForm";
+import { DeleteConfirmationDialog } from "../ui/deleteDialog";
 
 type Credential = {
   id: number;
@@ -11,47 +14,221 @@ type Credential = {
 };
 
 export function CredentialTable() {
-  const { data, isLoading, error } = useQuery({
+  const queryClient = useQueryClient();
-    queryKey: ["/api/credentials/"],
+
+  // Fetch current user
+  const {
+    data: currentUser,
+    isLoading: isUserLoading,
+    isError: isUserError,
+  } = useQuery({
+    queryKey: ["/api/users/"],
+    queryFn: async () => {
+      const res = await apiRequest("GET", "/api/users/");
+      if (!res.ok) throw new Error("Failed to fetch user");
+      return res.json();
+    },
+  });
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingCred, setEditingCred] = useState<Credential | null>(null);
+
+  const credentialsPerPage = 5;
+
+  const { data: credentials = [], isLoading, error } = useQuery({
+    queryKey: ["/api/insuranceCreds/"],
     queryFn: async () => {
       const res = await apiRequest("GET", "/api/insuranceCreds/");
-      if (!res.ok) {
+      if (!res.ok) throw new Error("Failed to fetch credentials");
-        throw new Error("Failed to fetch credentials");
-      }
       return res.json() as Promise<Credential[]>;
     },
   });
 
-  if (isLoading) return <p className="text-gray-600">Loading credentials...</p>;
+  const deleteMutation = useMutation({
-  if (error) return <p className="text-red-600">Failed to load credentials.</p>;
+    mutationFn: async (cred: Credential) => {
-  if (!data || data.length === 0)
+      const res = await apiRequest("DELETE", `/api/insuranceCreds/${cred.id}`);
-    return <p className="text-gray-600">No credentials found.</p>;
+      if (!res.ok) throw new Error("Failed to delete credential");
+      return true;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["/api/insuranceCreds/"] });
+    },
+  });
+
+   // New state for delete dialog
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [credentialToDelete, setCredentialToDelete] = useState<Credential | null>(null);
+
+  const handleDeleteClick = (cred: Credential) => {
+    setCredentialToDelete(cred);
+    setIsDeleteDialogOpen(true);
+  };
+
+  const handleConfirmDelete = () => {
+    if (credentialToDelete) {
+      deleteMutation.mutate(credentialToDelete, {
+        onSuccess: () => {
+          setIsDeleteDialogOpen(false);
+          setCredentialToDelete(null);
+        },
+      });
+    }
+  };
+
+  const handleCancelDelete = () => {
+    setIsDeleteDialogOpen(false);
+    setCredentialToDelete(null);
+  };
+
+  const indexOfLast = currentPage * credentialsPerPage;
+  const indexOfFirst = indexOfLast - credentialsPerPage;
+  const currentCredentials = credentials.slice(indexOfFirst, indexOfLast);
+  const totalPages = Math.ceil(credentials.length / credentialsPerPage);
+
+  if (isUserLoading) return <p>Loading user...</p>;
+  if (isUserError) return <p>Error loading user</p>;
 
   return (
-    <div className="overflow-x-auto">
+    <div className="bg-white shadow rounded-lg overflow-hidden">
-      <table className="min-w-full border rounded shadow">
+      <div className="flex justify-between items-center p-4 border-b border-gray-200">
-        <thead className="bg-gray-100">
+        <h2 className="text-lg font-semibold text-gray-900">Insurance Credentials</h2>
-          <tr>
+        <Button
-            <th className="px-4 py-2 text-left">Site</th>
+          onClick={() => {
-            <th className="px-4 py-2 text-left">Username</th>
+            setEditingCred(null);
-            <th className="px-4 py-2 text-left">Password</th>
+            setModalOpen(true);
-            <th className="px-4 py-2 text-right">Actions</th>
+          }}
-          </tr>
+        >
-        </thead>
+          <Plus className="mr-2 h-4 w-4" /> Add Credential
-        <tbody>
+        </Button>
-          {data.map((cred) => (
+      </div>
-            <tr key={cred.id} className="border-t">
+
-              <td className="px-4 py-2">{cred.siteKey}</td>
+      <div className="overflow-x-auto">
-              <td className="px-4 py-2">{cred.username}</td>
+        <table className="min-w-full divide-y divide-gray-200">
-              <td className="px-4 py-2 font-mono">{cred.password}</td>
+          <thead className="bg-gray-50">
-              <td className="px-4 py-2 text-right space-x-2">
+            <tr>
-                <button className="text-blue-600 hover:underline">Edit</button>
+              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                <button className="text-red-600 hover:underline">Delete</button>
+                Site Key
-              </td>
+              </th>
+              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Username
+              </th>
+              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Password
+              </th>
+              <th className="px-4 py-2" />
             </tr>
-          ))}
+          </thead>
-        </tbody>
+          <tbody className="bg-white divide-y divide-gray-200">
-      </table>
+            {isLoading ? (
+              <tr>
+                <td colSpan={4} className="text-center py-4">
+                  Loading credentials...
+                </td>
+              </tr>
+            ) : error ? (
+              <tr>
+                <td colSpan={4} className="text-center py-4 text-red-600">
+                  Error loading credentials
+                </td>
+              </tr>
+            ) : currentCredentials.length === 0 ? (
+              <tr>
+                <td colSpan={4} className="text-center py-4">
+                  No credentials found.
+                </td>
+              </tr>
+            ) : (
+              currentCredentials.map((cred) => (
+                <tr key={cred.id}>
+                  <td className="px-4 py-2">{cred.siteKey}</td>
+                  <td className="px-4 py-2">{cred.username}</td>
+                  <td className="px-4 py-2">••••••••</td>
+                  <td className="px-4 py-2 text-right">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        setEditingCred(cred);
+                        setModalOpen(true);
+                      }}
+                    >
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleDeleteClick(cred)}
+                    >
+                      <Delete className="h-4 w-4 text-red-600" />
+                    </Button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {credentials.length > credentialsPerPage && (
+        <div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200">
+          <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+            <p className="text-sm text-gray-700">
+              Showing <span className="font-medium">{indexOfFirst + 1}</span> to{" "}
+              <span className="font-medium">{Math.min(indexOfLast, credentials.length)}</span> of{" "}
+              <span className="font-medium">{credentials.length}</span> results
+            </p>
+
+            <nav className="inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
+              <a
+                href="#"
+                onClick={(e) => { e.preventDefault(); if (currentPage > 1) setCurrentPage(currentPage - 1); }}
+                className={`relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 ${currentPage === 1 ? "pointer-events-none opacity-50" : ""}`}
+              >
+                Previous
+              </a>
+
+              {Array.from({ length: totalPages }).map((_, i) => (
+                <a
+                  key={i}
+                  href="#"
+                  onClick={(e) => { e.preventDefault(); setCurrentPage(i + 1); }}
+                  className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${currentPage === i + 1
+                    ? "z-10 bg-blue-50 border-blue-500 text-blue-600"
+                    : "border-gray-300 text-gray-500 hover:bg-gray-50"}`}
+                >
+                  {i + 1}
+                </a>
+              ))}
+
+              <a
+                href="#"
+                onClick={(e) => { e.preventDefault(); if (currentPage < totalPages) setCurrentPage(currentPage + 1); }}
+                className={`relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 ${currentPage === totalPages ? "pointer-events-none opacity-50" : ""}`}
+              >
+                Next
+              </a>
+            </nav>
+          </div>
+        </div>
+      )}
+
+      {/* Modal for Add/Edit */}
+      {modalOpen && currentUser && (
+        <CredentialForm
+          userId={currentUser.id}
+          defaultValues={editingCred || undefined}
+          onClose={() => setModalOpen(false)}
+        />
+      )}
+
+      <DeleteConfirmationDialog
+        isOpen={isDeleteDialogOpen}
+        onConfirm={handleConfirmDelete}
+        onCancel={handleCancelDelete}
+        entityName={credentialToDelete?.siteKey}
+      />
     </div>
   );
 }

apps/Frontend/src/pages/settings-page.tsx

@@ -281,7 +281,6 @@ export default function SettingsPage() {
   });
 
 
-
   return (
     <div className="flex h-screen overflow-hidden bg-gray-100">
       <Sidebar
@@ -336,6 +335,7 @@ export default function SettingsPage() {
             </div>
           )}
 
+          {/* User Setting section */}
           <Card className="mt-6">
             <CardContent className="space-y-4 py-6">
               <h3 className="text-lg font-semibold">User Settings</h3>
@@ -399,31 +399,10 @@ export default function SettingsPage() {
             </CardContent>
           </Card>
 
-           {/* Credential Section */}
+          {/* Credential Section */}
-          <div className="mt-8">
+          <div className="mt-6">
-            <button
+            <CredentialTable />
-              onClick={() => setCredentialModalOpen(true)}
-              className="mb-4 bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700"
-            >
-              Add Credential
-            </button>
-
-            <Card>
-              <CardContent>
-                <h3 className="text-lg font-semibold mb-4">Saved Credentials</h3>
-                <CredentialTable />
-              </CardContent>
-            </Card>
           </div>
-            
-          {credentialModalOpen && currentUser?.id && (
-  <CredentialForm
-    userId={currentUser.id}
-    onClose={() => setCredentialModalOpen(false)}
-  />
-)}
-
-
         </main>
       </div>
     </div>