249 lines
8.8 KiB
TypeScript
249 lines
8.8 KiB
TypeScript
import React, { useState } from "react";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { apiRequest } from "@/lib/queryClient";
|
|
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;
|
|
siteKey: string;
|
|
username: string;
|
|
password: string;
|
|
};
|
|
|
|
// Map site keys to friendly labels
|
|
const SITE_KEY_LABELS: Record<string, string> = {
|
|
MH: "MassHealth",
|
|
DDMA: "Delta Dental MA",
|
|
DELTAINS: "Delta Dental Ins",
|
|
DENTAQUEST: "Tufts SCO / DentaQuest",
|
|
UNITEDSCO: "United SCO",
|
|
CCA: "CCA",
|
|
};
|
|
|
|
function getSiteKeyLabel(siteKey: string): string {
|
|
return SITE_KEY_LABELS[siteKey] || siteKey;
|
|
}
|
|
|
|
export function CredentialTable() {
|
|
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");
|
|
return res.json() as Promise<Credential[]>;
|
|
},
|
|
});
|
|
|
|
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="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">
|
|
Provider
|
|
</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 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">{getSiteKeyLabel(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 ? getSiteKeyLabel(credentialToDelete.siteKey) : undefined}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|