initial commit

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

@@ -0,0 +1,199 @@
+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 { DeleteConfirmationDialog } from "../ui/deleteDialog";
+import { NpiProviderForm } from "./npiProviderForm";
+
+type NpiProvider = {
+  id: number;
+  npiNumber: string;
+  providerName: string;
+};
+
+export function NpiProviderTable() {
+  const queryClient = useQueryClient();
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingProvider, setEditingProvider] =
+    useState<NpiProvider | null>(null);
+
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [providerToDelete, setProviderToDelete] =
+    useState<NpiProvider | null>(null);
+
+  const providersPerPage = 5;
+
+  const {
+    data: providers = [],
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["/api/npiProviders/"],
+    queryFn: async () => {
+      const res = await apiRequest("GET", "/api/npiProviders/");
+      if (!res.ok) throw new Error("Failed to fetch NPI providers");
+      return res.json() as Promise<NpiProvider[]>;
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async (provider: NpiProvider) => {
+      const res = await apiRequest(
+        "DELETE",
+        `/api/npiProviders/${provider.id}`
+      );
+      if (!res.ok) throw new Error("Failed to delete NPI provider");
+      return true;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["/api/npiProviders/"],
+      });
+    },
+  });
+
+  const handleDeleteClick = (provider: NpiProvider) => {
+    setProviderToDelete(provider);
+    setIsDeleteDialogOpen(true);
+  };
+
+  const handleConfirmDelete = () => {
+    if (!providerToDelete) return;
+
+    deleteMutation.mutate(providerToDelete, {
+      onSuccess: () => {
+        setIsDeleteDialogOpen(false);
+        setProviderToDelete(null);
+      },
+    });
+  };
+
+  const indexOfLast = currentPage * providersPerPage;
+  const indexOfFirst = indexOfLast - providersPerPage;
+  const currentProviders = providers.slice(
+    indexOfFirst,
+    indexOfLast
+  );
+  const totalPages = Math.ceil(providers.length / providersPerPage);
+
+  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">
+          NPI Providers
+        </h2>
+        <Button
+          onClick={() => {
+            setEditingProvider(null);
+            setModalOpen(true);
+          }}
+        >
+          <Plus className="mr-2 h-4 w-4" /> Add NPI Provider
+        </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">
+                NPI Number
+              </th>
+              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                Provider Name
+              </th>
+              <th className="px-4 py-2" />
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {isLoading ? (
+              <tr>
+                <td colSpan={3} className="text-center py-4">
+                  Loading NPI providers...
+                </td>
+              </tr>
+            ) : error ? (
+              <tr>
+                <td colSpan={3} className="text-center py-4 text-red-600">
+                  Error loading NPI providers
+                </td>
+              </tr>
+            ) : currentProviders.length === 0 ? (
+              <tr>
+                <td colSpan={3} className="text-center py-4">
+                  No NPI providers found.
+                </td>
+              </tr>
+            ) : (
+              currentProviders.map((provider) => (
+                <tr key={provider.id}>
+                  <td className="px-4 py-2">
+                    {provider.npiNumber}
+                  </td>
+                  <td className="px-4 py-2">
+                    {provider.providerName}
+                  </td>
+                  <td className="px-4 py-2 text-right">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        setEditingProvider(provider);
+                        setModalOpen(true);
+                      }}
+                    >
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleDeleteClick(provider)}
+                    >
+                      <Delete className="h-4 w-4 text-red-600" />
+                    </Button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {providers.length > providersPerPage && (
+        <div className="px-4 py-3 border-t flex justify-between">
+          <Button
+            variant="ghost"
+            disabled={currentPage === 1}
+            onClick={() => setCurrentPage((p) => p - 1)}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="ghost"
+            disabled={currentPage === totalPages}
+            onClick={() => setCurrentPage((p) => p + 1)}
+          >
+            Next
+          </Button>
+        </div>
+      )}
+
+      {modalOpen && (
+        <NpiProviderForm
+          defaultValues={editingProvider || undefined}
+          onClose={() => setModalOpen(false)}
+        />
+      )}
+
+      <DeleteConfirmationDialog
+        isOpen={isDeleteDialogOpen}
+        onConfirm={handleConfirmDelete}
+        onCancel={() => setIsDeleteDialogOpen(false)}
+        entityName={providerToDelete?.providerName}
+      />
+    </div>
+  );
+}