fixed setting page

2025-06-03 19:07:57 +05:30
parent 8945e56f14
commit 3a18bbedd9
4 changed files with 280 additions and 77 deletions
--- a/apps/Frontend/src/components/settings/InsuranceCredForm.tsx
+++ b/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>
--- a/apps/Frontend/src/components/settings/insuranceCredTable.tsx
+++ b/apps/Frontend/src/components/settings/insuranceCredTable.tsx
@@ -1,7 +1,10 @@
-// components/CredentialTable.tsx
-import { useQuery } from "@tanstack/react-query";
+import React, { useState } from "react";
+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({
-    queryKey: ["/api/credentials/"],
+  const queryClient = useQueryClient();
+
+  // 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) {
-        throw new Error("Failed to fetch credentials");
-      }
+      if (!res.ok) throw new Error("Failed to fetch credentials");
      return res.json() as Promise<Credential[]>;
    },
  });

-  if (isLoading) return <p className="text-gray-600">Loading credentials...</p>;
-  if (error) return <p className="text-red-600">Failed to load credentials.</p>;
-  if (!data || data.length === 0)
-    return <p className="text-gray-600">No credentials found.</p>;
+  const deleteMutation = useMutation({
+    mutationFn: async (cred: Credential) => {
+      const res = await apiRequest("DELETE", `/api/insuranceCreds/${cred.id}`);
+      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">
-      <table className="min-w-full border rounded shadow">
-        <thead className="bg-gray-100">
-          <tr>
-            <th className="px-4 py-2 text-left">Site</th>
-            <th className="px-4 py-2 text-left">Username</th>
-            <th className="px-4 py-2 text-left">Password</th>
-            <th className="px-4 py-2 text-right">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {data.map((cred) => (
-            <tr key={cred.id} className="border-t">
-              <td className="px-4 py-2">{cred.siteKey}</td>
-              <td className="px-4 py-2">{cred.username}</td>
-              <td className="px-4 py-2 font-mono">{cred.password}</td>
-              <td className="px-4 py-2 text-right space-x-2">
-                <button className="text-blue-600 hover:underline">Edit</button>
-                <button className="text-red-600 hover:underline">Delete</button>
-              </td>
+    <div className="bg-white shadow rounded-lg overflow-hidden">
+      <div className="flex justify-between items-center p-4 border-b border-gray-200">
+        <h2 className="text-lg font-semibold text-gray-900">Insurance Credentials</h2>
+        <Button
+          onClick={() => {
+            setEditingCred(null);
+            setModalOpen(true);
+          }}
+        >
+          <Plus className="mr-2 h-4 w-4" /> Add Credential
+        </Button>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Site Key
+              </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>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {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>
  );
 }
--- a/apps/Frontend/src/pages/settings-page.tsx
+++ b/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 */}
-          <div className="mt-8">
-            <button
-              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>
+          {/* Credential Section */}
+          <div className="mt-6">
+            <CredentialTable />
          </div>
-            
-          {credentialModalOpen && currentUser?.id && (
-  <CredentialForm
-    userId={currentUser.id}
-    onClose={() => setCredentialModalOpen(false)}
-  />
-)}
-
-
        </main>
      </div>
    </div>