feat: add Chart section, colorize sidebar icons, rename nav items, patient action buttons, program bridge
This commit is contained in:
Gitead
@@ -13,86 +13,155 @@ import {
|
||||
Cloud,
|
||||
Phone,
|
||||
Activity,
|
||||
ClipboardList,
|
||||
LayoutGrid,
|
||||
ListChecks,
|
||||
Pill,
|
||||
Microscope,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useMemo } from "react";
|
||||
import { useMemo, useState, useEffect } from "react";
|
||||
import { useSidebar } from "@/components/ui/sidebar";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
|
||||
type NavChild = {
|
||||
name: string;
|
||||
path: string;
|
||||
icon: React.ReactNode;
|
||||
};
|
||||
|
||||
type NavItem = {
|
||||
name: string;
|
||||
path: string;
|
||||
icon: React.ReactNode;
|
||||
adminOnly?: boolean;
|
||||
children?: NavChild[];
|
||||
};
|
||||
|
||||
export function Sidebar() {
|
||||
const [location] = useLocation();
|
||||
const { state, openMobile, setOpenMobile } = useSidebar(); // "expanded" | "collapsed"
|
||||
const { user } = useAuth();
|
||||
const isAdmin = user?.username === "admin";
|
||||
|
||||
const navItems = useMemo(
|
||||
const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => {
|
||||
const s = new Set<string>();
|
||||
if (location.startsWith("/chart")) s.add("/chart");
|
||||
return s;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (location.startsWith("/chart")) {
|
||||
setExpandedPaths((prev) => new Set([...prev, "/chart"]));
|
||||
}
|
||||
}, [location]);
|
||||
|
||||
const togglePath = (path: string) => {
|
||||
setExpandedPaths((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(path)) next.delete(path);
|
||||
else next.add(path);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const navItems: NavItem[] = useMemo(
|
||||
() => [
|
||||
{
|
||||
name: "Dashboard",
|
||||
path: "/dashboard",
|
||||
icon: <LayoutDashboard className="h-5 w-5" />,
|
||||
icon: <LayoutDashboard className="h-5 w-5 text-violet-500" />,
|
||||
},
|
||||
{
|
||||
name: "Patient Connection",
|
||||
path: "/patient-connection",
|
||||
icon: <Phone className="h-5 w-5" />,
|
||||
icon: <Phone className="h-5 w-5 text-green-500" />,
|
||||
},
|
||||
{
|
||||
name: "Appointments",
|
||||
name: "Schedule",
|
||||
path: "/appointments",
|
||||
icon: <Calendar className="h-5 w-5" />,
|
||||
icon: <Calendar className="h-5 w-5 text-blue-500" />,
|
||||
},
|
||||
{
|
||||
name: "Patients",
|
||||
name: "Patient Management",
|
||||
path: "/patients",
|
||||
icon: <Users className="h-5 w-5" />,
|
||||
icon: <Users className="h-5 w-5 text-indigo-500" />,
|
||||
},
|
||||
{
|
||||
name: "Eligibility",
|
||||
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" />,
|
||||
icon: <Shield className="h-5 w-5 text-emerald-500" />,
|
||||
},
|
||||
{
|
||||
name: "Claims/PreAuth",
|
||||
path: "/claims",
|
||||
icon: <FileCheck className="h-5 w-5" />,
|
||||
icon: <FileCheck className="h-5 w-5 text-orange-500" />,
|
||||
},
|
||||
{
|
||||
name: "Payments",
|
||||
name: "Accounts/Payments",
|
||||
path: "/payments",
|
||||
icon: <CreditCard className="h-5 w-5" />,
|
||||
icon: <CreditCard className="h-5 w-5 text-amber-500" />,
|
||||
},
|
||||
{
|
||||
name: "Documents",
|
||||
path: "/documents",
|
||||
icon: <FolderOpen className="h-5 w-5" />,
|
||||
icon: <FolderOpen className="h-5 w-5 text-yellow-500" />,
|
||||
},
|
||||
{
|
||||
name: "Reports",
|
||||
path: "/reports",
|
||||
icon: <FileText className="h-5 w-5" />,
|
||||
icon: <FileText className="h-5 w-5 text-red-400" />,
|
||||
},
|
||||
{
|
||||
name: "Cloud storage",
|
||||
path: "/cloud-storage",
|
||||
icon: <Cloud className="h-5 w-5" />,
|
||||
icon: <Cloud className="h-5 w-5 text-sky-500" />,
|
||||
},
|
||||
{
|
||||
name: "Database Management",
|
||||
path: "/database-management",
|
||||
icon: <Database className="h-5 w-5" />,
|
||||
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" />,
|
||||
icon: <Activity className="h-5 w-5 text-rose-500" />,
|
||||
adminOnly: true,
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
path: "/settings",
|
||||
icon: <Settings className="h-5 w-5" />,
|
||||
icon: <Settings className="h-5 w-5 text-gray-400" />,
|
||||
adminOnly: true,
|
||||
},
|
||||
],
|
||||
@@ -102,43 +171,100 @@ export function Sidebar() {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
// original look
|
||||
"bg-white border-r border-gray-200 shadow-sm z-20",
|
||||
// clip during width animation to avoid text peeking
|
||||
"overflow-hidden will-change-[width]",
|
||||
// animate width only
|
||||
"transition-[width] duration-200 ease-in-out",
|
||||
// MOBILE: overlay below topbar (h = 100vh - 4rem)
|
||||
openMobile
|
||||
? "fixed top-16 left-0 h-[calc(100vh-4rem)] w-64 block md:hidden"
|
||||
: "hidden md:block",
|
||||
// DESKTOP: participates in row layout
|
||||
"md:static md:top-auto md:h-auto md:flex-shrink-0",
|
||||
state === "collapsed" ? "md:w-0 overflow-hidden" : "md:w-64"
|
||||
)}
|
||||
>
|
||||
<div className="p-2">
|
||||
<nav role="navigation" aria-label="Main">
|
||||
{navItems.filter((item) => !item.adminOnly || isAdmin).map((item) => (
|
||||
<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}
|
||||
{/* show label only after expand animation completes */}
|
||||
<span className="whitespace-nowrap select-none">
|
||||
{item.name}
|
||||
</span>
|
||||
{navItems
|
||||
.filter((item) => !item.adminOnly || isAdmin)
|
||||
.map((item) => {
|
||||
if (item.children) {
|
||||
const isParentActive = location.startsWith(item.path);
|
||||
const isExpanded = expandedPaths.has(item.path);
|
||||
|
||||
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">
|
||||
{item.children.map((child) => {
|
||||
const isActive = location === child.path || location.startsWith(child.path + "/");
|
||||
return (
|
||||
<Link
|
||||
to={child.path}
|
||||
key={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>
|
||||
);
|
||||
}
|
||||
|
||||
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}
|
||||
{/* show label only after expand animation completes */}
|
||||
<span className="whitespace-nowrap select-none">
|
||||
{item.name}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user