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>
This commit is contained in:
302
apps/Frontend/src/components/layout/sidebar.jsx
Normal file
302
apps/Frontend/src/components/layout/sidebar.jsx
Normal file
@@ -0,0 +1,302 @@
|
||||
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>);
|
||||
}
|
||||
Reference in New Issue
Block a user