287 lines
14 KiB
TypeScript
Executable File
287 lines
14 KiB
TypeScript
Executable File
import React, { useState, useEffect } from "react";
|
|
import { Eye, EyeOff } from "lucide-react";
|
|
import { useQuery, useMutation } from "@tanstack/react-query";
|
|
import { useParams } from "wouter";
|
|
import { StaffTable } from "@/components/staffs/staff-table";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { apiRequest, queryClient } from "@/lib/queryClient";
|
|
import { StaffForm } from "@/components/staffs/staff-form";
|
|
import { DeleteConfirmationDialog } from "@/components/ui/deleteDialog";
|
|
import { CredentialTable } from "@/components/settings/insuranceCredTable";
|
|
import { useAuth } from "@/hooks/use-auth";
|
|
import { Staff } from "@repo/db/types";
|
|
import { NpiProviderTable } from "@/components/settings/npiProviderTable";
|
|
import { ProgramBridgeTable } from "@/components/settings/program-bridge-table";
|
|
import { TwilioSettingsCard } from "@/components/settings/twilio-settings-card";
|
|
import { AiSettingsCard } from "@/components/settings/ai-settings-card";
|
|
|
|
type SectionId =
|
|
| "staff"
|
|
| "users"
|
|
| "account"
|
|
| "credentials"
|
|
| "npi"
|
|
| "programs"
|
|
| "twilio"
|
|
| "ai";
|
|
|
|
export default function SettingsPage() {
|
|
const { toast } = useToast();
|
|
const { user: currentUser } = useAuth();
|
|
const isAdmin = currentUser?.username === "admin";
|
|
|
|
const params = useParams<{ section?: string }>();
|
|
const section = (params.section as SectionId | undefined) ?? "staff";
|
|
|
|
// Staff state
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const [editingStaff, setEditingStaff] = useState<Staff | null>(null);
|
|
const [isDeleteStaffOpen, setIsDeleteStaffOpen] = useState(false);
|
|
const [currentStaff, setCurrentStaff] = useState<Staff | undefined>(undefined);
|
|
|
|
// User management state
|
|
const [newUsername, setNewUsername] = useState("");
|
|
const [newPassword, setNewPassword] = useState("");
|
|
const [showNewUserPassword, setShowNewUserPassword] = useState(false);
|
|
const [showAdminPassword, setShowAdminPassword] = useState(false);
|
|
const [usernameUser, setUsernameUser] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (currentUser?.username) setUsernameUser(currentUser.username);
|
|
}, [currentUser]);
|
|
|
|
// ── Staff ──────────────────────────────────────────────────────
|
|
const { data: staff = [], isLoading: staffLoading, isError: staffError, error: staffErrorMsg } = useQuery<Staff[]>({
|
|
queryKey: ["/api/staffs/"],
|
|
queryFn: async () => {
|
|
const res = await apiRequest("GET", "/api/staffs/");
|
|
if (!res.ok) throw new Error("Failed to fetch staff");
|
|
return res.json();
|
|
},
|
|
staleTime: 1000 * 60 * 5,
|
|
});
|
|
|
|
const addStaffMutate = useMutation<Staff, Error, Omit<Staff, "id" | "userId" | "createdAt">>({
|
|
mutationFn: async (newStaff) => {
|
|
const res = await apiRequest("POST", "/api/staffs/", newStaff);
|
|
if (!res.ok) { const e = await res.json().catch(() => null); throw new Error(e?.message || "Failed to add staff"); }
|
|
return res.json();
|
|
},
|
|
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["/api/staffs/"] }); toast({ title: "Staff Added" }); },
|
|
onError: (e: any) => toast({ title: "Error", description: e?.message, variant: "destructive" }),
|
|
});
|
|
|
|
const updateStaffMutate = useMutation<Staff, Error, { id: number; updatedFields: Partial<Staff> }>({
|
|
mutationFn: async ({ id, updatedFields }) => {
|
|
const res = await apiRequest("PUT", `/api/staffs/${id}`, updatedFields);
|
|
if (!res.ok) { const e = await res.json().catch(() => null); throw new Error(e?.message || "Failed to update staff"); }
|
|
return res.json();
|
|
},
|
|
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["/api/staffs/"] }); toast({ title: "Staff Updated" }); },
|
|
onError: (e: any) => toast({ title: "Error", description: e?.message, variant: "destructive" }),
|
|
});
|
|
|
|
const deleteStaffMutation = useMutation<number, Error, number>({
|
|
mutationFn: async (id) => {
|
|
const res = await apiRequest("DELETE", `/api/staffs/${id}`);
|
|
if (!res.ok) { const e = await res.json().catch(() => null); throw new Error(e?.message || "Failed to delete staff"); }
|
|
return id;
|
|
},
|
|
onSuccess: () => { setIsDeleteStaffOpen(false); queryClient.invalidateQueries({ queryKey: ["/api/staffs/"] }); toast({ title: "Staff Removed" }); },
|
|
onError: (e: any) => toast({ title: "Error", description: e?.message, variant: "destructive" }),
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (addStaffMutate.status === "success" || updateStaffMutate.status === "success") setModalOpen(false);
|
|
}, [addStaffMutate.status, updateStaffMutate.status]);
|
|
|
|
// ── Users ──────────────────────────────────────────────────────
|
|
const { data: allUsers = [], refetch: refetchUsers } = useQuery<{ id: number; username: string }[]>({
|
|
queryKey: ["/api/users/list"],
|
|
queryFn: async () => { const res = await apiRequest("GET", "/api/users/list"); if (!res.ok) return []; return res.json(); },
|
|
enabled: false,
|
|
});
|
|
|
|
useEffect(() => { if (isAdmin) refetchUsers(); }, [isAdmin]);
|
|
|
|
const addUserMutation = useMutation({
|
|
mutationFn: async (data: { username: string; password: string }) => {
|
|
const res = await apiRequest("POST", "/api/users/", data);
|
|
if (!res.ok) { const e = await res.json().catch(() => null); throw new Error(e?.error || "Failed to create user"); }
|
|
return res.json();
|
|
},
|
|
onSuccess: () => { setNewUsername(""); setNewPassword(""); refetchUsers(); toast({ title: "User Created" }); },
|
|
onError: (e: any) => toast({ title: "Error", description: e?.message, variant: "destructive" }),
|
|
});
|
|
|
|
const deleteUserMutation = useMutation({
|
|
mutationFn: async (id: number) => { const res = await apiRequest("DELETE", `/api/users/${id}`); if (!res.ok) throw new Error("Failed to delete user"); },
|
|
onSuccess: () => { refetchUsers(); toast({ title: "User Deleted" }); },
|
|
onError: (e: any) => toast({ title: "Error", description: e?.message, variant: "destructive" }),
|
|
});
|
|
|
|
const updateUserMutate = useMutation({
|
|
mutationFn: async (updates: Partial<{ username: string; password: string }>) => {
|
|
if (!currentUser?.id) throw new Error("User not loaded");
|
|
const res = await apiRequest("PUT", `/api/users/${currentUser.id}`, updates);
|
|
if (!res.ok) { const e = await res.json().catch(() => null); throw new Error(e?.error || "Failed to update user"); }
|
|
return res.json();
|
|
},
|
|
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["/api/users/"] }); toast({ title: "Updated", description: "Your profile has been updated." }); },
|
|
onError: (e: any) => toast({ title: "Error", description: e?.message, variant: "destructive" }),
|
|
});
|
|
|
|
// ── Section renderer ───────────────────────────────────────────
|
|
const renderSection = () => {
|
|
switch (section) {
|
|
case "staff":
|
|
return (
|
|
<Card>
|
|
<CardContent>
|
|
<div className="mt-4">
|
|
<StaffTable
|
|
staff={staff}
|
|
isLoading={staffLoading}
|
|
isError={staffError}
|
|
onAdd={() => { setEditingStaff(null); setModalOpen(true); }}
|
|
onEdit={(s) => { setEditingStaff(s); setModalOpen(true); }}
|
|
onDelete={(s) => { setCurrentStaff(s); setIsDeleteStaffOpen(true); }}
|
|
onView={(s) => alert(`Viewing staff member:\n${s.name} (${s.email || "No email"})`)}
|
|
/>
|
|
{staffError && <p className="mt-4 text-red-600">{(staffErrorMsg as Error)?.message || "Failed to load staff data."}</p>}
|
|
<DeleteConfirmationDialog
|
|
isOpen={isDeleteStaffOpen}
|
|
onConfirm={() => { if (currentStaff?.id) deleteStaffMutation.mutate(currentStaff.id); }}
|
|
onCancel={() => setIsDeleteStaffOpen(false)}
|
|
entityName={currentStaff?.name}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
|
|
case "users":
|
|
return (
|
|
<Card>
|
|
<CardContent className="space-y-4 py-6">
|
|
<h3 className="text-lg font-semibold">Manage Users</h3>
|
|
<div className="border rounded divide-y">
|
|
{allUsers.length === 0 && <p className="text-sm text-gray-500 p-3">No users found.</p>}
|
|
{allUsers.map((u) => (
|
|
<div key={u.id} className="flex items-center justify-between px-3 py-2">
|
|
<span className="text-sm font-medium">{u.username}</span>
|
|
{u.username !== "admin" && (
|
|
<button className="text-sm text-red-600 hover:underline" onClick={() => deleteUserMutation.mutate(u.id)} disabled={deleteUserMutation.isPending}>
|
|
Delete
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<form className="space-y-3 pt-2" onSubmit={(e) => { e.preventDefault(); if (!newUsername.trim() || !newPassword.trim()) return; addUserMutation.mutate({ username: newUsername.trim(), password: newPassword.trim() }); }}>
|
|
<h4 className="text-sm font-semibold text-gray-700">Add New User</h4>
|
|
<div>
|
|
<label className="block text-sm font-medium">Username</label>
|
|
<input type="text" value={newUsername} onChange={(e) => setNewUsername(e.target.value)} className="mt-1 p-2 border rounded w-full" placeholder="Enter username" required />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium">Password</label>
|
|
<div className="relative mt-1">
|
|
<input type={showNewUserPassword ? "text" : "password"} value={newPassword} onChange={(e) => setNewPassword(e.target.value)} className="p-2 border rounded w-full pr-10" placeholder="••••••••" required />
|
|
<button type="button" onClick={() => setShowNewUserPassword((v) => !v)} className="absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-700" tabIndex={-1}>
|
|
{showNewUserPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button type="submit" className="bg-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700" disabled={addUserMutation.isPending}>
|
|
{addUserMutation.isPending ? "Adding..." : "Add User"}
|
|
</button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
|
|
case "account":
|
|
return (
|
|
<Card>
|
|
<CardContent className="space-y-4 py-6">
|
|
<h3 className="text-lg font-semibold">Account Settings</h3>
|
|
<form className="space-y-4" onSubmit={(e) => {
|
|
e.preventDefault();
|
|
const formData = new FormData(e.currentTarget);
|
|
const password = formData.get("password")?.toString().trim() || undefined;
|
|
updateUserMutate.mutate({ ...(isAdmin ? {} : { username: usernameUser?.trim() || undefined }), password: password || undefined });
|
|
}}>
|
|
<div>
|
|
<label className="block text-sm font-medium">Username</label>
|
|
<input type="text" name="username" value={usernameUser} onChange={(e) => setUsernameUser(e.target.value)} className="mt-1 p-2 border rounded w-full disabled:bg-gray-100 disabled:cursor-not-allowed disabled:text-gray-500" disabled={isAdmin} />
|
|
{isAdmin && <p className="text-xs text-gray-500 mt-1">Admin username cannot be changed.</p>}
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium">New Password</label>
|
|
<div className="relative mt-1">
|
|
<input type={showAdminPassword ? "text" : "password"} name="password" className="p-2 border rounded w-full pr-10" placeholder="••••••••" />
|
|
<button type="button" onClick={() => setShowAdminPassword((v) => !v)} className="absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-700" tabIndex={-1}>
|
|
{showAdminPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
|
</button>
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-1">Leave blank to keep current password.</p>
|
|
</div>
|
|
<button type="submit" className="bg-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700" disabled={updateUserMutate.isPending}>
|
|
{updateUserMutate.isPending ? "Saving..." : "Save Changes"}
|
|
</button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
|
|
case "credentials":
|
|
return <CredentialTable />;
|
|
|
|
case "npi":
|
|
return <NpiProviderTable />;
|
|
|
|
case "programs":
|
|
return <ProgramBridgeTable />;
|
|
|
|
case "twilio":
|
|
return <TwilioSettingsCard />;
|
|
|
|
case "ai":
|
|
return <AiSettingsCard />;
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{renderSection()}
|
|
|
|
{/* Staff add/edit modal */}
|
|
{modalOpen && (
|
|
<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">{editingStaff ? "Edit Staff" : "Add Staff"}</h2>
|
|
<StaffForm
|
|
initialData={editingStaff || undefined}
|
|
onSubmit={(formData) => {
|
|
if (editingStaff) {
|
|
if (!editingStaff.id) return;
|
|
updateStaffMutate.mutate({ id: editingStaff.id, updatedFields: formData });
|
|
} else {
|
|
addStaffMutate.mutate(formData);
|
|
}
|
|
}}
|
|
onCancel={() => setModalOpen(false)}
|
|
isLoading={addStaffMutate.status === "pending" || updateStaffMutate.status === "pending"}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|