Files
DentalManagementMH07/apps/Frontend/src/components/layout/sidebar.jsx
Gitead 1edf73fdc8 feat: add new frontend components, MH batch worker, and gitignore rules
- 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>
2026-06-26 00:23:43 -04:00

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>);
}