- Add all new Frontend source files (pages, components, hooks, utils) - Add selenium_MHBatchPaymentCheckWorker.py and MHSinglePaymentCheckWorker.py - Add install-steps-5-13.sh setup script - Update .gitignore to exclude runtime/sensitive data (backups, uploads, chat-history, keys, downloads, generated .d.ts files) while keeping folders - Add .gitkeep to preserve empty runtime folders in git Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
303 lines
13 KiB
JavaScript
303 lines
13 KiB
JavaScript
import { Link, useLocation } from "wouter";
|
|
import { LayoutDashboard, Users, Calendar, Settings, FileCheck, Shield, CreditCard, FolderOpen, Database, FileText, Cloud, Phone, Activity, ClipboardList, LayoutGrid, ListChecks, Pill, Microscope, ChevronDown, ChevronRight, UserCog, User, ShieldCheck, Stethoscope, Workflow, Bot, Clock, Building2, Timer, BookOpen, ShoppingCart, Search, KeyRound, } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { useMemo, useState, useEffect } from "react";
|
|
import { useSidebar } from "@/components/ui/sidebar";
|
|
import { useAuth } from "@/hooks/use-auth";
|
|
export function Sidebar() {
|
|
const [location] = useLocation();
|
|
const { state, openMobile, setOpenMobile } = useSidebar();
|
|
const { user } = useAuth();
|
|
const isAdmin = user?.username === "admin";
|
|
const [expandedPaths, setExpandedPaths] = useState(() => {
|
|
const s = new Set();
|
|
if (location.startsWith("/chart"))
|
|
s.add("/chart");
|
|
if (location.startsWith("/settings"))
|
|
s.add("/settings");
|
|
if (location.startsWith("/dental-shopping"))
|
|
s.add("/dental-shopping");
|
|
return s;
|
|
});
|
|
useEffect(() => {
|
|
if (location.startsWith("/chart")) {
|
|
setExpandedPaths((prev) => new Set([...prev, "/chart"]));
|
|
}
|
|
if (location.startsWith("/settings")) {
|
|
setExpandedPaths((prev) => new Set([...prev, "/settings"]));
|
|
}
|
|
if (location.startsWith("/dental-shopping")) {
|
|
setExpandedPaths((prev) => new Set([...prev, "/dental-shopping"]));
|
|
}
|
|
}, [location]);
|
|
const togglePath = (path) => {
|
|
setExpandedPaths((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(path))
|
|
next.delete(path);
|
|
else
|
|
next.add(path);
|
|
return next;
|
|
});
|
|
};
|
|
const navItems = useMemo(() => [
|
|
{
|
|
name: "Dashboard",
|
|
path: "/dashboard",
|
|
icon: <LayoutDashboard className="h-5 w-5 text-violet-500"/>,
|
|
},
|
|
{
|
|
name: "Patient Connection",
|
|
path: "/patient-connection",
|
|
icon: <Phone className="h-5 w-5 text-green-500"/>,
|
|
},
|
|
{
|
|
name: "Schedule",
|
|
path: "/appointments",
|
|
icon: <Calendar className="h-5 w-5 text-blue-500"/>,
|
|
},
|
|
{
|
|
name: "Patient Management",
|
|
path: "/patients",
|
|
icon: <Users className="h-5 w-5 text-indigo-500"/>,
|
|
},
|
|
{
|
|
name: "Chart",
|
|
path: "/chart",
|
|
icon: <ClipboardList className="h-5 w-5 text-teal-500"/>,
|
|
children: [
|
|
{
|
|
name: "Charting Map",
|
|
path: "/chart/charting",
|
|
icon: <LayoutGrid className="h-4 w-4 text-teal-400"/>,
|
|
},
|
|
{
|
|
name: "Treatment Plan",
|
|
path: "/chart/treatment-plan",
|
|
icon: <ListChecks className="h-4 w-4 text-orange-400"/>,
|
|
},
|
|
{
|
|
name: "Prescription",
|
|
path: "/chart/prescription",
|
|
icon: <Pill className="h-4 w-4 text-rose-400"/>,
|
|
},
|
|
{
|
|
name: "Lab Management",
|
|
path: "/chart/lab-management",
|
|
icon: <Microscope className="h-4 w-4 text-purple-400"/>,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Insurance Eligibility",
|
|
path: "/insurance-status",
|
|
icon: <Shield className="h-5 w-5 text-emerald-500"/>,
|
|
},
|
|
{
|
|
name: "Claims/PreAuth",
|
|
path: "/claims",
|
|
icon: <FileCheck className="h-5 w-5 text-orange-500"/>,
|
|
},
|
|
{
|
|
name: "Accounts/Payments",
|
|
path: "/payments",
|
|
icon: <CreditCard className="h-5 w-5 text-amber-500"/>,
|
|
},
|
|
{
|
|
name: "Documents",
|
|
path: "/documents",
|
|
icon: <FolderOpen className="h-5 w-5 text-yellow-500"/>,
|
|
},
|
|
{
|
|
name: "Reports",
|
|
path: "/reports",
|
|
icon: <FileText className="h-5 w-5 text-red-400"/>,
|
|
},
|
|
{
|
|
name: "Cloud storage",
|
|
path: "/cloud-storage",
|
|
icon: <Cloud className="h-5 w-5 text-sky-500"/>,
|
|
},
|
|
{
|
|
name: "AI Input Agent",
|
|
path: "/ai-input-agent",
|
|
icon: <Bot className="h-5 w-5 text-violet-500"/>,
|
|
},
|
|
{
|
|
name: "AI Dental Shopping",
|
|
path: "/dental-shopping",
|
|
icon: <ShoppingCart className="h-5 w-5 text-cyan-500"/>,
|
|
children: [
|
|
{
|
|
name: "Search / Tag",
|
|
path: "/dental-shopping/search-tag",
|
|
icon: <Search className="h-4 w-4 text-cyan-400"/>,
|
|
},
|
|
{
|
|
name: "Login Info",
|
|
path: "/dental-shopping/login-info",
|
|
icon: <KeyRound className="h-4 w-4 text-cyan-400"/>,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Activation",
|
|
path: "/activation",
|
|
icon: <KeyRound className="h-5 w-5 text-amber-500"/>,
|
|
adminOnly: true,
|
|
},
|
|
{
|
|
name: "Database Management",
|
|
path: "/database-management",
|
|
icon: <Database className="h-5 w-5 text-slate-500"/>,
|
|
adminOnly: true,
|
|
},
|
|
{
|
|
name: "Job Monitor",
|
|
path: "/job-monitor",
|
|
icon: <Activity className="h-5 w-5 text-rose-500"/>,
|
|
adminOnly: true,
|
|
},
|
|
{
|
|
name: "Settings",
|
|
path: "/settings",
|
|
icon: <Settings className="h-5 w-5 text-gray-400"/>,
|
|
adminOnly: true,
|
|
children: [
|
|
// ── General ──────────────────────────────────────────
|
|
{
|
|
groupLabel: "General",
|
|
name: "Staff Management",
|
|
path: "/settings/staff",
|
|
icon: <Users className="h-4 w-4 text-gray-400"/>,
|
|
},
|
|
{
|
|
name: "Manage Users",
|
|
path: "/settings/users",
|
|
icon: <UserCog className="h-4 w-4 text-gray-400"/>,
|
|
adminOnly: true,
|
|
},
|
|
{
|
|
name: "Account Settings",
|
|
path: "/settings/account",
|
|
icon: <User className="h-4 w-4 text-gray-400"/>,
|
|
},
|
|
{
|
|
name: "Insurance Credentials",
|
|
path: "/settings/credentials",
|
|
icon: <ShieldCheck className="h-4 w-4 text-gray-400"/>,
|
|
},
|
|
{
|
|
name: "NPI Providers",
|
|
path: "/settings/npi",
|
|
icon: <Stethoscope className="h-4 w-4 text-gray-400"/>,
|
|
},
|
|
{
|
|
name: "Program Bridge",
|
|
path: "/settings/programs",
|
|
icon: <Workflow className="h-4 w-4 text-gray-400"/>,
|
|
},
|
|
// ── Advanced ─────────────────────────────────────────
|
|
{
|
|
groupLabel: "Advanced",
|
|
name: "Office Hours",
|
|
path: "/settings/officehours",
|
|
icon: <Clock className="h-4 w-4 text-gray-400"/>,
|
|
},
|
|
{
|
|
name: "Office Contact",
|
|
path: "/settings/officecontact",
|
|
icon: <Building2 className="h-4 w-4 text-gray-400"/>,
|
|
},
|
|
{
|
|
name: "Insurance/Transportation Contact",
|
|
path: "/settings/insurancecontact",
|
|
icon: <BookOpen className="h-4 w-4 text-gray-400"/>,
|
|
},
|
|
{
|
|
name: "Procedure Duration/Time Slot",
|
|
path: "/settings/proceduretimeslot",
|
|
icon: <Timer className="h-4 w-4 text-gray-400"/>,
|
|
},
|
|
{
|
|
name: "Twilio Settings",
|
|
path: "/settings/twilio",
|
|
icon: <Phone className="h-4 w-4 text-gray-400"/>,
|
|
},
|
|
{
|
|
name: "AI API Setting",
|
|
path: "/settings/ai",
|
|
icon: <Bot className="h-4 w-4 text-gray-400"/>,
|
|
},
|
|
{
|
|
name: "AI Chat Settings",
|
|
path: "/settings/aichat",
|
|
icon: <Bot className="h-4 w-4 text-gray-400"/>,
|
|
},
|
|
],
|
|
},
|
|
], []);
|
|
return (<div className={cn("bg-white border-r border-gray-200 shadow-sm z-20", "overflow-x-hidden will-change-[width]", "transition-[width] duration-200 ease-in-out", openMobile
|
|
? "fixed top-16 left-0 h-[calc(100vh-4rem)] w-64 block md:hidden"
|
|
: "hidden md:block", "md:static md:top-auto md:h-full md:flex-shrink-0", state === "collapsed" ? "md:w-0 overflow-hidden" : "md:w-64")}>
|
|
<div className="p-2 h-full overflow-y-auto">
|
|
<nav role="navigation" aria-label="Main">
|
|
{navItems
|
|
.filter((item) => !item.adminOnly || isAdmin)
|
|
.map((item) => {
|
|
if (item.children) {
|
|
const isParentActive = location.startsWith(item.path);
|
|
const isExpanded = expandedPaths.has(item.path);
|
|
const visibleChildren = item.children.filter((c) => !c.adminOnly || isAdmin);
|
|
return (<div key={item.path}>
|
|
<div className={cn("flex items-center justify-between p-2 rounded-md pl-3 mb-1 transition-colors cursor-pointer select-none", isParentActive
|
|
? "text-primary font-medium bg-primary/5"
|
|
: "text-gray-600 hover:bg-gray-100")} onClick={() => togglePath(item.path)}>
|
|
<div className="flex items-center space-x-3">
|
|
{item.icon}
|
|
<span className="whitespace-nowrap">{item.name}</span>
|
|
</div>
|
|
{isExpanded ? (<ChevronDown className="h-4 w-4 flex-shrink-0 opacity-60"/>) : (<ChevronRight className="h-4 w-4 flex-shrink-0 opacity-60"/>)}
|
|
</div>
|
|
|
|
{isExpanded && (<div className="ml-4 border-l border-gray-200 pl-2 mb-1">
|
|
{visibleChildren.map((child) => {
|
|
const isActive = location === child.path ||
|
|
location.startsWith(child.path + "/");
|
|
return (<div key={child.path}>
|
|
{child.groupLabel && (<p className="text-[10px] font-semibold uppercase tracking-wider text-gray-400 px-2 pt-2 pb-0.5">
|
|
{child.groupLabel}
|
|
</p>)}
|
|
<Link to={child.path} onClick={() => setOpenMobile(false)}>
|
|
<div className={cn("flex items-center space-x-2 p-2 rounded-md pl-2 mb-0.5 transition-colors cursor-pointer", isActive
|
|
? "text-primary font-medium bg-primary/5 border-l-2 border-primary"
|
|
: "text-gray-500 hover:bg-gray-100 hover:text-gray-700")}>
|
|
{child.icon}
|
|
<span className="whitespace-nowrap select-none text-sm">
|
|
{child.name}
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
</div>);
|
|
})}
|
|
</div>)}
|
|
</div>);
|
|
}
|
|
return (<div key={item.path}>
|
|
<Link to={item.path} onClick={() => setOpenMobile(false)}>
|
|
<div className={cn("flex items-center space-x-3 p-2 rounded-md pl-3 mb-1 transition-colors cursor-pointer", location === item.path
|
|
? "text-primary font-medium border-l-2 border-primary"
|
|
: "text-gray-600 hover:bg-gray-100")}>
|
|
{item.icon}
|
|
<span className="whitespace-nowrap select-none">
|
|
{item.name}
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
</div>);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
</div>);
|
|
}
|