# Medesk dashboard A shadcn/ui block from the [@watermelon](https://ui.watermelon.sh) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/watermelon/medesk-dashboard). - Page, with a live preview: https://shadcn.exchange/r/watermelon/medesk-dashboard - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/watermelon/medesk-dashboard-light-c83d6bc642f5e4cb.png - Registry item: https://registry.watermelon.sh/r/medesk-dashboard.json - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://registry.watermelon.sh/r/medesk-dashboard.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `@fontsource/geist`, `@fontsource/geist-mono`, `@fontsource/instrument-serif`, `lucide-react`, `recharts` - Registry items: `avatar`, `button`, `collapsible`, `dropdown-menu`, `input-group`, `sheet`, `sidebar`, `utils` ## Files ### `src/components/dashboards/medesk-dashboard/components/medesk/dashboard-content.tsx` ```tsx import { useState } from "react"; import type { ComponentType, CSSProperties, ReactNode } from "react"; import { CheckCircle2Icon, CircleIcon, CircleDashedIcon, CircleCheckBigIcon, FileDownIcon, MessageCircleIcon, PencilIcon, PlusIcon, SlidersHorizontalIcon, TimerIcon, UserRoundIcon, XIcon, } from "lucide-react"; import type { TooltipContentProps } from "recharts"; import { Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, ReferenceLine, Tooltip, XAxis, YAxis, } from "recharts"; import { ArrowUpRightIcon, CalendarDotsIcon, CaretDownIcon, ClockIcon, FileArrowUpIcon, } from "./icons"; import { Button, buttonVariants } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { dashboardAppointmentStatusFilters, dashboardTimelineData, dashboardTimelineRanges, filterDashboardAppointments, staffDetails, } from "../../data"; import type { DashboardAppointmentStatus, DashboardAppointmentStatusFilter, DashboardTimelineRange, } from "../../data"; import { cn } from "@/lib/utils"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, } from "@/components/ui/sheet"; const dashboardColors = { scheduled: "var(--dashboard-scheduled)", completed: "var(--dashboard-completed)", noShow: "var(--dashboard-no-show)", secondary: "var(--dashboard-secondary)", destructive: "var(--destructive)", } as const; const chartSeries = [ { key: "scheduled", label: "Scheduled", color: dashboardColors.scheduled }, { key: "completed", label: "Completed", color: dashboardColors.completed }, { key: "noShow", label: "No-show", color: dashboardColors.noShow }, ] as const; const statusClassName: Record = { "In progress": "bg-[color-mix(in_oklch,var(--dashboard-scheduled)_14%,transparent)] text-[var(--dashboard-scheduled)]", Waiting: "bg-[color-mix(in_oklch,var(--dashboard-no-show)_14%,transparent)] text-[var(--dashboard-no-show)]", Confirmed: "bg-[color-mix(in_oklch,var(--dashboard-completed)_14%,transparent)] text-[var(--dashboard-completed)]", Done: "bg-[color-mix(in_oklch,var(--dashboard-completed)_14%,transparent)] text-[var(--dashboard-completed)]", }; const filterStatusIcons: Record< DashboardAppointmentStatusFilter, ComponentType<{ className?: string }> > = { all: SlidersHorizontalIcon, "In progress": TimerIcon, Waiting: CircleDashedIcon, Confirmed: CheckCircle2Icon, Done: CircleCheckBigIcon, }; function DashboardCard({ children, className, }: { children: ReactNode; className?: string; }) { return (
{children}
); } function CardHeader({ title, action, className, }: { title: ReactNode; action?: React.ReactNode; className?: string; }) { return (

{title}

{action ? (
{action}
) : null}
); } function MetricBars({ lastSixDays, className, }: { lastSixDays: readonly number[]; className: string; }) { const maximum = Math.max(...lastSixDays, 1); return (
{lastSixDays.map((value, index) => ( ))}
); } function ChartTooltip({ active, payload, label, }: Partial) { if (!active || !payload?.length) { return null; } return (

{label}

{payload.map((item, index) => (
{item.name} {item.value}
))}
); } type DashboardTimelineData = (typeof dashboardTimelineData)[DashboardTimelineRange]; type AppointmentVolumeDatum = { week: string; scheduled: number; completed: number; noShow: number; }; function AppointmentVolumeCard({ data }: { data: DashboardTimelineData }) { const appointmentVolume = [ ...data.appointmentVolume, ] as AppointmentVolumeDatum[]; return ( View all } />
{data.appointmentStats.map(([value, label]) => (

{value}

{label}

))}
{chartSeries.map((series) => (
{series.label}
))}
} />
); } function DepartmentLoadCard({ data }: { data: DashboardTimelineData }) { const departmentTotal = data.departmentLoad.reduce( (total, department) => total + department.value, 0, ); return ( Details } />
Total Cases {departmentTotal}
{data.departmentLoad.map((department, index) => ( ))}
{data.departmentLoad.map((department) => (
{department.label}
{department.value} {department.percent}
))}
); } function AppointmentsTableCard({ appointments, statusFilter, onStatusFilterChange, }: { appointments: ReturnType; statusFilter: DashboardAppointmentStatusFilter; onStatusFilterChange: ( statusFilter: DashboardAppointmentStatusFilter, ) => void; }) { return ( Today Today's appointments } action={ <> Filter Status onStatusFilterChange( value as DashboardAppointmentStatusFilter, ) } > {dashboardAppointmentStatusFilters.map((filter) => ( {(() => { const FilterIcon = filterStatusIcons[filter.value]; return ; })()} {filter.label} ))} } />
{appointments.map((appointment) => ( ))}
Time Patient Type Doctor Status
{appointment.time} {appointment.patient} {appointment.type} {appointment.doctor} {appointment.status}
); } type DashboardStaff = DashboardTimelineData["staffPerformance"][number]; function StaffDetailsSheet({ staff, open, onOpenChange, }: { staff: DashboardStaff | null; open: boolean; onOpenChange: (open: boolean) => void; }) { const details = staff ? staffDetails[staff.name as keyof typeof staffDetails] : null; return (
Staff Details
{staff && details ? (
Details for {staff.name}
{staff.name.slice(0, 1)}

{staff.name}

{details.specialty}

{details.department} {details.location}
{details.status} - {details.ward}

Today's Metric

{details.metrics.map((metric) => (

{metric.label}

{metric.value}

+ {metric.trend}

))}

Monthly Performance

{details.monthlyPerformance.patientSeenLabel} {details.monthlyPerformance.targetLabel}
} />

Staff Information

{details.information.map(([label, value], index) => (
= details.information.length - 2 && "md:col-span-3", )} > {label} {value}
))}
) : null}
); } function StaffPerformanceCard({ data, onStaffSelect, }: { data: DashboardTimelineData; onStaffSelect: (staff: DashboardStaff) => void; }) { return ( View all } />
{data.staffPerformance.map((staff, index) => ( ))}
); } function StatValue({ value, label, }: { value: string | number; label: string; }) { return (
{value} {label}
); } function ResourceUsageCard({ data }: { data: DashboardTimelineData }) { return ( View all } />
{data.resources.map((resource, index) => ( 0} /> ))}
); } function ResourceRow({ label, value, unit, Icon, color, withDivider, }: { label: string; value: number; unit: string; Icon: ComponentType<{ className?: string }>; color: string; withDivider: boolean; }) { return (
{label} {value}% {unit}
); } export function DashboardPage() { const [selectedRange, setSelectedRange] = useState("aug-2026"); const [appointmentStatusFilter, setAppointmentStatusFilter] = useState("all"); const [selectedStaff, setSelectedStaff] = useState( null, ); const selectedData = dashboardTimelineData[selectedRange]; const selectedRangeMeta = dashboardTimelineRanges.find( (range) => range.value === selectedRange, ); const visibleAppointments = filterDashboardAppointments( selectedData.appointments, appointmentStatusFilter, ); return (

Good Morning Dr. Reyes

Monday, Aug 04, 2025
{selectedRangeMeta?.label} setSelectedRange(value as DashboardTimelineRange) } > {dashboardTimelineRanges.map((range) => ( {range.label} ))}
{selectedData.metrics.map((metric) => (

{metric.label}

{metric.value} {metric.suffix ? ( {metric.suffix} ) : null}

{metric.trend.split(" ")[0]} {metric.trend.substring(metric.trend.indexOf(" ") + 1)}
))}
{ if (!open) { setSelectedStaff(null); } }} />
); } ``` ### `src/components/dashboards/medesk-dashboard/components/medesk/icons.tsx` ```tsx import type { SVGProps } from "react"; import { cn } from "@/lib/utils"; type IconProps = SVGProps; function Icon({ className, ...props }: IconProps) { return ( ); } export function HomeIcon({ className, ...props }: IconProps) { return ( ); } export function ClockIcon({ className, ...props }: IconProps) { return ( ); } export function WarningIcon({ className, ...props }: IconProps) { return ( ); } export function FileIcon({ className, ...props }: IconProps) { return ( ); } export function ShieldCheckIcon({ className, ...props }: IconProps) { return ( ); } export function PlayCircleIcon({ className, ...props }: IconProps) { return ( ); } export function FolderIcon({ className, ...props }: IconProps) { return ( ); } export function LinkIcon({ className, ...props }: IconProps) { return ( ); } export function UsersIcon({ className, ...props }: IconProps) { return ( ); } export function GearIcon({ className, ...props }: IconProps) { return ( ); } export function QuestionIcon({ className, ...props }: IconProps) { return ( ); } type ToggleIconProps = IconProps & { pressed?: boolean; }; export function ToggleIcon({ className, pressed = false, ...props }: ToggleIconProps) { return ( ); } export function UserIcon({ className, ...props }: IconProps) { return ( ); } export function SearchIcon({ className, ...props }: IconProps) { return ( ); } export function CommandIcon({ className, ...props }: IconProps) { return ( ); } export function BellIcon({ className, ...props }: IconProps) { return ( ); } export function CaretDownIcon({ className, ...props }: IconProps) { return ( ); } export function CloseIcon({ className, ...props }: IconProps) { return ( ); } export function SidebarCollapseIcon({ className, ...props }: IconProps) { return ( ); } function SmallIcon({ className, ...props }: IconProps) { return ( ); } export function PlayIcon({ className, ...props }: IconProps) { return ( ); } export function PauseIcon({ className, ...props }: IconProps) { return ( ); } export function ArrowUpRightIcon({ className, ...props }: IconProps) { return ( ); } export function SealCheckIcon({ className, ...props }: IconProps) { return ( ); } export function ArrowsCounterClockwiseIcon({ className, ...props }: IconProps) { return ( ); } export function SpinnerGapIcon({ className, ...props }: IconProps) { return ( ); } export function FadersHorizontalIcon({ className, ...props }: IconProps) { return ( ); } export function FileArrowUpIcon({ className, ...props }: IconProps) { return ( ); } export function CheckCircleIcon({ className, ...props }: IconProps) { return ( ); } export function TimelineCheckIcon({ className, ...props }: IconProps) { return ( ); } export function StatusWarningIcon({ className, ...props }: IconProps) { return ( ); } export function CalendarCheckIcon({ className, ...props }: IconProps) { return ( ); } export function CalendarDotsIcon({ className, ...props }: IconProps) { return ( ); } export function IdentificationBadgeIcon({ className, ...props }: IconProps) { return ( ); } export function HospitalIcon({ className, ...props }: IconProps) { return ( ); } export function StackIcon({ className, ...props }: IconProps) { return ( ); } export function ChartBarIcon({ className, ...props }: IconProps) { return ( ); } export function TrendUpIcon({ className, ...props }: IconProps) { return ( ); } export function SparkleIcon({ className, ...props }: IconProps) { return ( ); } export function SpinnerIcon({ className, ...props }: IconProps) { return ( ); } export function PlugsConnectedIcon({ className, ...props }: IconProps) { return ( ); } export function AccordionChevronIcon({ className, ...props }: IconProps) { return ( ); } ``` ### `src/components/dashboards/medesk-dashboard/components/medesk/logo.tsx` ```tsx import type { SVGProps } from "react"; import { cn } from "@/lib/utils"; export function MedeskLogo({ className, ...props }: SVGProps) { return ( ); } ``` ### `src/components/dashboards/medesk-dashboard/components/medesk/navigation.tsx` ```tsx import { createContext, useContext, useMemo, useState, type AnchorHTMLAttributes, type MouseEvent, type ReactNode, } from "react"; type DashboardNavigation = { pathname: string; navigate: (pathname: string) => void; }; const DashboardNavigationContext = createContext( null, ); export function DashboardNavigationProvider({ children, }: { children: ReactNode; }) { const [pathname, setPathname] = useState("/"); const value = useMemo( () => ({ pathname, navigate: setPathname }), [pathname], ); return ( {children} ); } export function useDashboardNavigation() { const context = useContext(DashboardNavigationContext); if (!context) { throw new Error( "useDashboardNavigation must be used within DashboardNavigationProvider", ); } return context; } export function DashboardLink({ href, onClick, ...props }: AnchorHTMLAttributes & { href: string }) { const { navigate } = useDashboardNavigation(); function handleClick(event: MouseEvent) { onClick?.(event); if ( event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey ) { return; } event.preventDefault(); navigate(href); } return ; } ``` ### `src/components/dashboards/medesk-dashboard/components/medesk/sidebar.tsx` ```tsx import { BookOpenIcon, ChevronRight, LogOutIcon, MessageCircleIcon, MoonIcon, SunIcon, } from "lucide-react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { MedeskLogo } from "./logo"; import { SidebarCollapseIcon } from "./icons"; import { DashboardLink, useDashboardNavigation } from "./navigation"; import { useTheme } from "./theme-provider"; import { Button } from "@/components/ui/button"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarRail, useSidebar, } from "@/components/ui/sidebar"; import { currentUser, navigationGroups, type NavigationItem } from "../../data"; import { cn } from "@/lib/utils"; const menuButtonClassName = cn( "h-12.5 gap-2.5 rounded-lg bg-transparent py-2.5 pl-3 pr-2 text-base font-normal text-muted-foreground transition-colors", "hover:!bg-transparent hover:text-foreground active:!bg-transparent", "aria-[current=page]:!bg-transparent aria-[current=page]:font-medium aria-[current=page]:text-foreground", "data-open:!bg-transparent data-open:hover:!bg-transparent data-open:text-foreground data-active:!bg-transparent", "[&_svg]:size-5! [&_svg]:shrink-0", "group-data-[collapsible=icon]:size-12.5! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:[&>span]:hidden", ); const sidebarGroupLabelClassName = "h-auto px-0 py-1 text-[1.0625rem] font-normal text-foreground/70 transition-colors"; const dropdownTriggerClassName = "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0"; function NavItem({ item }: { item: NavigationItem }) { const { pathname } = useDashboardNavigation(); const { isMobile, setOpenMobile } = useSidebar(); const isActive = item.href === "/" ? pathname === "/" : pathname === item.href || pathname.startsWith(`${item.href}/`); return ( { if (isMobile) setOpenMobile(false); }} > {item.name} {item.badge ? {item.badge} : null} ); } export function DashboardSidebar() { const { resolvedTheme, setTheme } = useTheme(); const { state, toggleSidebar } = useSidebar(); const isDark = resolvedTheme === "dark"; return (
Medesk
{navigationGroups.map((group) => { const isCollapsible = group.collapsible ?? false; if (isCollapsible) { return ( {group.label} {group.items.map((item) => ( ))} ); } return ( {group.label} {group.items.map((item) => ( ))} ); })} Account
{currentUser.name.slice(0, 1)} {currentUser.name}

{currentUser.name}

{currentUser.email}

setTheme(isDark ? "light" : "dark")} > {isDark ? : } {isDark ? "Light Mode" : "Dark Mode"} Documentation Contact support Log out ); } ``` ### `src/components/dashboards/medesk-dashboard/components/medesk/theme-provider.tsx` ```tsx import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode, } from "react"; export type Theme = "dark" | "light" | "system"; type ThemeProviderProps = { children: ReactNode; defaultTheme?: Theme; storageKey?: string; }; type ThemeProviderState = { theme: Theme; resolvedTheme: "dark" | "light"; setTheme: (theme: Theme) => void; }; const ThemeProviderContext = createContext(null); function getSystemTheme(): "dark" | "light" { return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; } function applyTheme(theme: "dark" | "light") { const root = window.document.documentElement; root.classList.remove("light", "dark"); root.classList.add(theme); } export function ThemeProvider({ children, defaultTheme = "system", storageKey = "medesk-theme", }: ThemeProviderProps) { const [theme, setThemeState] = useState(() => { const stored = localStorage.getItem(storageKey) as Theme | null; return stored ?? defaultTheme; }); const [systemTheme, setSystemTheme] = useState<"dark" | "light">( getSystemTheme, ); const resolvedTheme = theme === "system" ? systemTheme : theme; useEffect(() => { applyTheme(resolvedTheme); }, [resolvedTheme]); useEffect(() => { if (theme !== "system") return; const media = window.matchMedia("(prefers-color-scheme: dark)"); const onChange = () => setSystemTheme(getSystemTheme()); media.addEventListener("change", onChange); return () => media.removeEventListener("change", onChange); }, [theme]); const setTheme = useCallback( (next: Theme) => { localStorage.setItem(storageKey, next); setThemeState(next); }, [storageKey], ); const value = useMemo( () => ({ theme, resolvedTheme, setTheme }), [theme, resolvedTheme, setTheme], ); return ( {children} ); } export function useTheme() { const context = useContext(ThemeProviderContext); if (!context) { throw new Error("useTheme must be used within a ThemeProvider"); } return context; } ``` ### `src/components/dashboards/medesk-dashboard/components/medesk/topbar.tsx` ```tsx import { useEffect, useRef, useState } from "react"; import { CloseIcon, CommandIcon, SearchIcon } from "./icons"; import { useDashboardNavigation } from "./navigation"; import { Button } from "@/components/ui/button"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { SidebarTrigger } from "@/components/ui/sidebar"; import { navigationGroups } from "../../data"; export function DashboardTopbar() { const { pathname } = useDashboardNavigation(); const [searchQuery, setSearchQuery] = useState(""); const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false); const searchInputRef = useRef(null); const mobileSearchInputRef = useRef(null); const currentPage = navigationGroups .flatMap((group) => group.items) .find((item) => item.href === pathname) ?? navigationGroups[0].items[0]; const CurrentPageIcon = currentPage.icon; const openMobileSearch = () => { setIsMobileSearchOpen(true); requestAnimationFrame(() => { mobileSearchInputRef.current?.focus(); }); }; const closeMobileSearch = () => { setIsMobileSearchOpen(false); }; useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") { event.preventDefault(); if (window.matchMedia("(max-width: 767px)").matches) { setIsMobileSearchOpen(true); requestAnimationFrame(() => { mobileSearchInputRef.current?.focus(); }); return; } searchInputRef.current?.focus(); } if (event.key === "Escape") { setIsMobileSearchOpen(false); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, []); return (
{isMobileSearchOpen ? (
setSearchQuery(event.target.value)} />
) : ( <>
{currentPage.name}
Last synced{" "} 5 min ago
setSearchQuery(event.target.value)} /> {searchQuery === "" ? (
K
) : null} )}
); } ``` ### `src/components/dashboards/medesk-dashboard/dashboard-layout.tsx` ```tsx import type { CSSProperties, ReactNode } from "react"; import { DashboardSidebar } from "./components/medesk/sidebar"; import { DashboardTopbar } from "./components/medesk/topbar"; import { SidebarProvider } from "@/components/ui/sidebar"; import "./dashboard.css"; type DashboardLayoutProps = { children: ReactNode; }; export default function DashboardLayout({ children }: DashboardLayoutProps) { return (
{children}
 ); } ``` ### `src/components/dashboards/medesk-dashboard/dashboard.css` ```css .medesk-dashboard, body:has(.medesk-dashboard) [data-slot="sidebar"][data-mobile="true"], body:has(.medesk-dashboard) [data-slot="sheet-content"] { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(0.98 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.371 0 0); --chart-5: oklch(0.269 0 0); --radius: 0.625rem; --sidebar: oklch(0.975 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); --dashboard-scheduled: oklch(0.62325 0.14864 251.5); --dashboard-completed: oklch(0.62265 0.12424 165.02); --dashboard-no-show: oklch(0.76366 0.15429 69.59); --dashboard-secondary: oklch(0.59276 0.14905 282.66); } .medesk-dashboard.dark, .dark .medesk-dashboard, .dark body:has(.medesk-dashboard) [data-slot="sidebar"][data-mobile="true"], .dark body:has(.medesk-dashboard) [data-slot="sheet-content"] { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.371 0 0); --chart-5: oklch(0.269 0 0); --sidebar: oklch(0.18 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } .medesk-dashboard.no-scrollbar, .medesk-dashboard.no-scrollbar *, .medesk-dashboard .no-scrollbar, .medesk-dashboard .no-scrollbar * { -ms-overflow-style: none; scrollbar-width: none; } .medesk-dashboard .dashboard-load-segment { width: var(--department-width); animation: dashboard-load-grow 700ms ease-out both; } .medesk-dashboard .dashboard-resource-progress { transform-origin: left; animation: dashboard-resource-grow 700ms ease-out both; } @keyframes dashboard-load-grow { from { width: 0; } to { width: var(--department-width); } } @keyframes dashboard-resource-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .medesk-dashboard.no-scrollbar::-webkit-scrollbar, .medesk-dashboard.no-scrollbar *::-webkit-scrollbar, .medesk-dashboard .no-scrollbar::-webkit-scrollbar, .medesk-dashboard .no-scrollbar *::-webkit-scrollbar { display: none; } [data-slot="dropdown-menu-content"] [data-slot="dropdown-menu-item"], [data-slot="dropdown-menu-content"] [data-slot="dropdown-menu-sub-trigger"] { padding-inline: 0.625rem; padding-block: 0.625rem; } [data-slot="dropdown-menu-content"] [data-slot="dropdown-menu-checkbox-item"], [data-slot="dropdown-menu-content"] [data-slot="dropdown-menu-radio-item"] { padding-block: 0.625rem; padding-left: 0.625rem; padding-right: 2rem; } ``` ### `src/components/dashboards/medesk-dashboard/data.tsx` ```tsx import type { ComponentType, SVGProps } from "react"; import { BedIcon, Building2Icon, FlaskConicalIcon, PillIcon, } from "lucide-react"; const staffHarrison = "https://assets.watermelon.sh/components/doc-harrison-profile-picture.png"; const staffJefferson = "https://assets.watermelon.sh/components/doc-jeff-profile-picture.png"; const staffPatel = "https://assets.watermelon.sh/components/doc-anjali-profile-picture.png"; import * as Icons from "./components/medesk/icons"; export type NavIcon = ComponentType>; export type NavigationItem = { name: string; href: string; icon: NavIcon; badge?: string; }; export type NavigationGroup = { label: string; collapsible?: boolean; items: NavigationItem[]; }; export const navigationGroups: NavigationGroup[] = [ { label: "Overview", collapsible: false, items: [{ name: "Dashboard", href: "/", icon: Icons.HomeIcon }], }, { label: "Operations", collapsible: true, items: [ { name: "Appointment", href: "/appointment", icon: Icons.CalendarCheckIcon, }, { name: "Staff", href: "/staff", icon: Icons.IdentificationBadgeIcon }, { name: "Departments", href: "/departments", icon: Icons.HospitalIcon }, { name: "Resources", href: "/resources", icon: Icons.StackIcon }, ], }, { label: "Insights", collapsible: true, items: [ { name: "Analytics", href: "/analytics", icon: Icons.ChartBarIcon }, { name: "Reports", href: "/reports", icon: Icons.FileIcon }, { name: "Trends", href: "/trends", icon: Icons.TrendUpIcon }, ], }, { label: "Assistant", collapsible: true, items: [ { name: "AI Assistant", href: "/ai-assistant", icon: Icons.SparkleIcon }, { name: "Smart Queries", href: "/smart-queries", icon: Icons.SpinnerIcon, }, ], }, { label: "Admin", collapsible: true, items: [ { name: "Settings", href: "/settings", icon: Icons.GearIcon }, { name: "Integrations", href: "/integrations", icon: Icons.PlugsConnectedIcon, }, { name: "Permissions", href: "/permissions", icon: Icons.ShieldCheckIcon, }, ], }, ]; export const currentUser = { name: "Reyes Patel", email: "reyes@medesk.example", initials: "RP", avatar: `https://api.dicebear.com/9.x/avataaars/svg?seed=Reyes%20Patel`, }; export const notifications = [ { id: "exception-spike", title: "Exception volume spike", description: "3,154 open exceptions need review this week.", time: "2 min ago", }, { id: "audit-complete", title: "Audit run completed", description: "Controls audit finished with 12 flagged items.", time: "1 hour ago", }, { id: "integration-sync", title: "Integration synced", description: "ERP connector finished its latest sync.", time: "Yesterday", }, ] as const; export type SourceKind = "oracle" | "sharepoint" | "concur" | "email"; export type BatchStatus = "processing" | "completed" | "exception"; export const metrics = [ { id: "total-processed", label: "Total processed", value: "147,392", icon: "clock" as const, trend: { value: "+2.4%", label: "vs last run", tone: "up" as const }, }, { id: "matched", label: "Matched", value: "12,847", icon: "seal" as const, trend: { value: "+97.86%", label: "match rate" }, }, { id: "exceptions", label: "Exceptions", value: "12,847", icon: "warning" as const, trend: { value: "2.14%", label: "exception rate" }, }, { id: "processing", label: "Processing", value: "12,847", icon: "arrows" as const, trend: { value: "Live", label: "in queue", tone: "live" as const }, }, ] as const; export const batchTransactions = [ { id: "1", status: "processing" as BatchStatus, transactionId: "TXN-84921", po: "PO-6952", vendor: "Accenture LTD", amount: "$42,200.00", sources: ["oracle", "sharepoint"] as SourceKind[], confidence: 72, }, { id: "2", status: "processing" as BatchStatus, transactionId: "TXN-84921", po: "PO-6952", vendor: "Accenture LTD", amount: "$42,200.00", sources: ["oracle", "concur"] as SourceKind[], confidence: 58, }, { id: "3", status: "completed" as BatchStatus, transactionId: "TXN-84921", po: "PO-6952", vendor: "Accenture LTD", amount: "$42,200.00", sources: ["oracle", "concur", "email"] as SourceKind[], confidence: 99, }, { id: "4", status: "processing" as BatchStatus, transactionId: "TXN-84921", po: "PO-6952", vendor: "Accenture LTD", amount: "$42,200.00", sources: ["oracle", "concur"] as SourceKind[], confidence: 58, }, { id: "5", status: "processing" as BatchStatus, transactionId: "TXN-84921", po: "PO-6952", vendor: "Accenture LTD", amount: "$42,200.00", sources: ["oracle", "concur"] as SourceKind[], confidence: 58, }, { id: "6", status: "exception" as BatchStatus, transactionId: "TXN-84921", po: "PO-6952", vendor: "Accenture LTD", amount: "$42,200.00", sources: ["oracle", "email", "concur"] as SourceKind[], confidence: 34, confidenceNote: "Amount Variance", }, { id: "7", status: "completed" as BatchStatus, transactionId: "TXN-84921", po: "PO-6952", vendor: "Accenture LTD", amount: "$42,200.00", sources: ["oracle", "concur"] as SourceKind[], confidence: 97, }, ] as const; export const sourceLabels: Record = { oracle: "Oracle ERP", sharepoint: "Sharepoint", concur: "Concur", email: "Email", }; export const batchStatusFilters = [ { value: "all", label: "All statuses", icon: Icons.FadersHorizontalIcon }, { value: "processing", label: "Processing", icon: Icons.SpinnerGapIcon }, { value: "completed", label: "Completed", icon: Icons.CheckCircleIcon }, { value: "exception", label: "Exception", icon: Icons.StatusWarningIcon }, ] as const; export type BatchTransaction = (typeof batchTransactions)[number]; export type MatchLineStatus = "matched" | "mismatched" | "partial"; export type TransactionDetails = { customer: string; batchId: string; date: string; flagged: boolean; purchaseOrder: { status: MatchLineStatus; amount: string; reference: string; source: string; }; invoice: { status: MatchLineStatus; amount: string; reference: string; deltaVsPo: string; }; goodsReceipt: { status: MatchLineStatus; amount: string; reference: string; fulfillment: string; }; timeline: { title: string; parts: string[] }[]; }; export function getTransactionDetails( row: BatchTransaction, ): TransactionDetails { const isException = row.status === "exception"; const isComplete = row.status === "completed"; return { customer: "Consulting Corp", batchId: "BAT-2026-0407", date: "Apr 7, 2026", flagged: isException, purchaseOrder: { status: "matched", amount: isException ? "$417,301.00" : row.amount, reference: row.po.startsWith("PO") ? `PO-2026-${row.po.replace(/\D/g, "")}` : row.po, source: sourceLabels[row.sources[0] ?? "oracle"], }, invoice: { status: isException ? "mismatched" : isComplete ? "matched" : "partial", amount: row.amount, reference: `INV-CC-${row.id.padStart(4, "0")}`, deltaVsPo: isException ? "+$12,450" : isComplete ? "$0.00" : "+$420.00", }, goodsReceipt: { status: isException ? "partial" : isComplete ? "matched" : "partial", amount: isException ? "$394,100.00" : row.amount, reference: `GR-0407-${row.id.padStart(3, "0")}`, fulfillment: isException ? "91.7%" : isComplete ? "100%" : "86.4%", }, timeline: [ ...(isException ? [ { title: "Flagged as exception", parts: [ "Audit AI", "Audit AI", `Confidence dropped to ${row.confidence}%`, ], }, ] : []), { title: "Viewed by J. Hartwell", parts: ["Manual review", "Today 11:38 AM"], }, { title: "Three-way match processed", parts: ["Manual review", "Today 11:38 AM"], }, { title: isException ? "Flagged as exception" : "Match checks completed", parts: ["Automated", "Today 11:34 AM", "PO, Invoice, GR ingested"], }, { title: "Transaction Submitted", parts: ["Oracle ERP sync", "Today 11:30 AM", "BAT-2026-0407"], }, ], }; } export type BatchStatusFilter = (typeof batchStatusFilters)[number]["value"]; export const auditControls = { defaultLive: true, } as const; export const dashboardMetrics = [ { label: "Today's appointments", value: "48", suffix: undefined, trend: "6 more than yesterday", color: "bg-[var(--dashboard-scheduled)]", trendColor: "text-[var(--dashboard-completed)]", lastSixDays: [18, 31, 48, 39, 44, 32], }, { label: "Avg. wait time", value: "14", suffix: "min", trend: "3min above target", color: "bg-[var(--dashboard-no-show)]", trendColor: "text-[var(--dashboard-no-show)]", lastSixDays: [5, 11, 18, 14, 16, 12], }, { label: "Bed occupancy", value: "82", suffix: "%", trend: "+2.4% vs last run", color: "bg-[var(--dashboard-completed)]", trendColor: "text-[var(--dashboard-completed)]", lastSixDays: [36, 54, 79, 67, 73, 58], }, { label: "Patient satisfaction", value: "47", suffix: "/5", trend: "0.3pts this month", color: "bg-[var(--dashboard-secondary)]", trendColor: "text-[var(--dashboard-completed)]", lastSixDays: [14, 29, 45, 38, 41, 32], }, ] as const; export const dashboardAppointmentVolume = [ { week: "Week 1", scheduled: 230, completed: 187, noShow: 13 }, { week: "Week 2", scheduled: 196, completed: 162, noShow: 35 }, { week: "Week 3", scheduled: 201, completed: 176, noShow: 10 }, { week: "Week 4", scheduled: 224, completed: 154, noShow: 37 }, ] as const; export const dashboardAppointmentStats = [ ["1024", "Total this month"], ["91%", "Completion rate"], ["47", "No - shows"], ] as const; export const dashboardDepartmentLoad = [ { label: "General", value: 38, percent: "39.2%", progress: 39.2, color: "bg-[var(--dashboard-scheduled)]", }, { label: "Cardiology", value: 22, percent: "22.7%", progress: 22.7, color: "bg-[var(--dashboard-secondary)]", }, { label: "Paediatrics", value: 17, percent: "17.5%", progress: 17.5, color: "bg-[var(--dashboard-completed)]", }, { label: "Orthopaedics", value: 11, percent: "11.3%", progress: 11.3, color: "bg-[var(--dashboard-no-show)]", }, { label: "Obs/Gynae", value: 9, percent: "9.3%", progress: 9.3, color: "bg-destructive", }, ] as const; export type DashboardAppointmentStatus = | "In progress" | "Waiting" | "Confirmed" | "Done"; export type DashboardAppointment = { time: string; patient: string; type: string; doctor: string; status: DashboardAppointmentStatus; }; export const dashboardAppointments: readonly DashboardAppointment[] = [ { time: "10:30", patient: "Fatima Ali", type: "Oncology", doctor: "Dr. Johnson", status: "In progress" as DashboardAppointmentStatus, }, { time: "11:00", patient: "Oliver Wright", type: "General", doctor: "Dr. Thompson", status: "Waiting" as DashboardAppointmentStatus, }, { time: "11:30", patient: "Sophia Patel", type: "Neurology", doctor: "Dr. Garcia", status: "Confirmed" as DashboardAppointmentStatus, }, { time: "12:00", patient: "Ethan Lee", type: "Orthopedics", doctor: "Dr. Davis", status: "Confirmed" as DashboardAppointmentStatus, }, { time: "12:30", patient: "Isabella Kim", type: "General", doctor: "Dr. Martinez", status: "Confirmed" as DashboardAppointmentStatus, }, { time: "13:00", patient: "Liam Nguyen", type: "Endocrinology", doctor: "Dr. Brown", status: "Done" as DashboardAppointmentStatus, }, { time: "13:30", patient: "Ava Johnson", type: "Pediatric", doctor: "Dr. Wilson", status: "Confirmed" as DashboardAppointmentStatus, }, { time: "14:00", patient: "Noah Smith", type: "Urology", doctor: "Dr. Taylor", status: "Done" as DashboardAppointmentStatus, }, { time: "08:30", patient: "Kiana Bergson", type: "General", doctor: "Dr. Mensah", status: "Done" as DashboardAppointmentStatus, }, ] as const; export const dashboardAppointmentStatusFilters = [ { value: "all", label: "All statuses" }, { value: "In progress", label: "In progress" }, { value: "Waiting", label: "Waiting" }, { value: "Confirmed", label: "Confirmed" }, { value: "Done", label: "Done" }, ] as const; export type DashboardAppointmentStatusFilter = (typeof dashboardAppointmentStatusFilters)[number]["value"]; export function filterDashboardAppointments( appointments: readonly DashboardAppointment[], statusFilter: DashboardAppointmentStatusFilter, ) { if (statusFilter === "all") return [...appointments]; return appointments.filter( (appointment) => appointment.status === statusFilter, ); } export const dashboardStaffPerformance = [ { name: "Dr. Harrison", role: "Cardiologist", points: 18, rating: "94%", avatar: staffHarrison, }, { name: "Dr. Patel", role: "Cardiologist", points: 22, rating: "88%", avatar: staffPatel, }, { name: "Dr. Jefferson", role: "Cardiologist", points: 14, rating: "91%", avatar: staffJefferson, }, ] as const; export const staffDetails = { "Dr. Harrison": { specialty: "Senior Cardiologist", department: "Cardiology", location: "MedCore Clinic", status: "On Duty", ward: "Ward 3B", metrics: [ { label: "Patients seen", value: "18", trend: "3 vs avg." }, { label: "Satisfaction", value: "94%", trend: "2% this week" }, { label: "Avg. consult", value: "11 min", trend: "1 min target" }, ], monthlyPerformance: { patientSeenLabel: "Patient Seen", targetLabel: "Target", target: 110, points: [ { month: "Mar", patientsSeen: 48 }, { month: "Apr", patientsSeen: 96 }, { month: "May", patientsSeen: 72 }, { month: "Jun", patientsSeen: 100 }, { month: "Jul", patientsSeen: 146 }, { month: "Aug", patientsSeen: 98 }, ], }, information: [ ["Staff ID", "MC-2041"], ["Employment", "Full-time"], ["Joined", "Mar 12, 2019"], ["Contract End", "Dec 31, 2026"], ["Shift", "07:00 - 15:00"], ["Leave Balance", "14 Days"], ["Email", "a.harrison@medcore.ng"], ["Phone", "+1 903-4578-908"], ], }, "Dr. Patel": { specialty: "Cardiologist", department: "Cardiology", location: "MedCore Clinic", status: "On Duty", ward: "Ward 2A", metrics: [ { label: "Patients seen", value: "22", trend: "5 vs avg." }, { label: "Satisfaction", value: "88%", trend: "1% this week" }, { label: "Avg. consult", value: "13 min", trend: "2 min target" }, ], monthlyPerformance: { patientSeenLabel: "Patient Seen", targetLabel: "Target", target: 120, points: [ { month: "Mar", patientsSeen: 88 }, { month: "Apr", patientsSeen: 116 }, { month: "May", patientsSeen: 104 }, { month: "Jun", patientsSeen: 136 }, { month: "Jul", patientsSeen: 112 }, { month: "Aug", patientsSeen: 156 }, ], }, information: [ ["Staff ID", "MC-1928"], ["Employment", "Full-time"], ["Joined", "Jul 08, 2021"], ["Contract End", "Dec 31, 2026"], ["Shift", "09:00 - 17:00"], ["Leave Balance", "11 Days"], ["Email", "d.patel@medcore.ng"], ["Phone", "+1 903-4578-765"], ], }, "Dr. Jefferson": { specialty: "Cardiologist", department: "Cardiology", location: "MedCore Clinic", status: "On Duty", ward: "Ward 3A", metrics: [ { label: "Patients seen", value: "14", trend: "2 vs avg." }, { label: "Satisfaction", value: "91%", trend: "3% this week" }, { label: "Avg. consult", value: "12 min", trend: "1 min target" }, ], monthlyPerformance: { patientSeenLabel: "Patient Seen", targetLabel: "Target", target: 80, points: [ { month: "Mar", patientsSeen: 34 }, { month: "Apr", patientsSeen: 58 }, { month: "May", patientsSeen: 44 }, { month: "Jun", patientsSeen: 76 }, { month: "Jul", patientsSeen: 92 }, { month: "Aug", patientsSeen: 68 }, ], }, information: [ ["Staff ID", "MC-2156"], ["Employment", "Full-time"], ["Joined", "Nov 20, 2020"], ["Contract End", "Dec 31, 2026"], ["Shift", "08:00 - 16:00"], ["Leave Balance", "16 Days"], ["Email", "j.jefferson@medcore.ng"], ["Phone", "+1 903-4578-432"], ], }, } as const; export const dashboardResources = [ { label: "Beds", value: 82, unit: "Used", Icon: BedIcon, color: "bg-[var(--dashboard-scheduled)]", }, { label: "Lab Equipment", value: 67, unit: "Active", Icon: FlaskConicalIcon, color: "bg-[var(--dashboard-completed)]", }, { label: "Medication Stock", value: 91, unit: "Used", Icon: PillIcon, color: "bg-[var(--dashboard-secondary)]", }, { label: "Consult Rooms", value: 75, unit: "Occupied", Icon: Building2Icon, color: "bg-[var(--dashboard-no-show)]", }, ] as const; export const dashboardTimelineRanges = [ { value: "aug-2026", label: "Aug 1 - 14, 2026" }, { value: "jul-2026", label: "Jul 1 - 31, 2026" }, { value: "jun-2026", label: "Jun 1 - 30, 2026" }, { value: "may-2026", label: "May 1 - 31, 2026" }, { value: "apr-2026", label: "Apr 1 - 30, 2026" }, { value: "mar-2026", label: "Mar 1 - 31, 2026" }, { value: "feb-2026", label: "Feb 1 - 28, 2026" }, { value: "jan-2026", label: "Jan 1 - 31, 2026" }, ] as const; export type DashboardTimelineRange = (typeof dashboardTimelineRanges)[number]["value"]; export const dashboardTimelineData = { "jan-2026": { metrics: dashboardMetrics, appointmentVolume: dashboardAppointmentVolume, appointmentStats: dashboardAppointmentStats, departmentLoad: dashboardDepartmentLoad, appointments: dashboardAppointments, staffPerformance: dashboardStaffPerformance, resources: dashboardResources, }, "feb-2026": { metrics: dashboardMetrics, appointmentVolume: [ { week: "Week 1", scheduled: 205, completed: 169, noShow: 22 }, { week: "Week 2", scheduled: 224, completed: 186, noShow: 28 }, { week: "Week 3", scheduled: 211, completed: 177, noShow: 19 }, { week: "Week 4", scheduled: 238, completed: 192, noShow: 32 }, ], appointmentStats: [ ["984", "Total this month"], ["89%", "Completion rate"], ["51", "No - shows"], ], departmentLoad: dashboardDepartmentLoad, appointments: dashboardAppointments, staffPerformance: dashboardStaffPerformance, resources: dashboardResources, }, "mar-2026": { metrics: dashboardMetrics, appointmentVolume: [ { week: "Week 1", scheduled: 215, completed: 181, noShow: 19 }, { week: "Week 2", scheduled: 233, completed: 194, noShow: 24 }, { week: "Week 3", scheduled: 221, completed: 189, noShow: 17 }, { week: "Week 4", scheduled: 241, completed: 203, noShow: 27 }, ], appointmentStats: [ ["1048", "Total this month"], ["91%", "Completion rate"], ["43", "No - shows"], ], departmentLoad: dashboardDepartmentLoad, appointments: dashboardAppointments, staffPerformance: dashboardStaffPerformance, resources: dashboardResources, }, "apr-2026": { metrics: dashboardMetrics, appointmentVolume: dashboardAppointmentVolume, appointmentStats: dashboardAppointmentStats, departmentLoad: dashboardDepartmentLoad, appointments: dashboardAppointments, staffPerformance: dashboardStaffPerformance, resources: dashboardResources, }, "may-2026": { metrics: [ { label: "Today's appointments", value: "57", suffix: undefined, trend: "9 more than yesterday", color: "bg-[var(--dashboard-scheduled)]", trendColor: "text-[var(--dashboard-completed)]", lastSixDays: [22, 38, 57, 44, 51, 40], }, { label: "Avg. wait time", value: "11", suffix: "min", trend: "2min below target", color: "bg-[var(--dashboard-no-show)]", trendColor: "text-[var(--dashboard-completed)]", lastSixDays: [6, 13, 19, 12, 16, 10], }, { label: "Bed occupancy", value: "76", suffix: "%", trend: "-1.8% vs last run", color: "bg-[var(--dashboard-completed)]", trendColor: "text-[var(--dashboard-no-show)]", lastSixDays: [31, 48, 68, 76, 59, 66], }, { label: "Patient satisfaction", value: "49", suffix: "/5", trend: "0.6pts this month", color: "bg-[var(--dashboard-secondary)]", trendColor: "text-[var(--dashboard-completed)]", lastSixDays: [17, 31, 49, 36, 44, 33], }, ], appointmentVolume: [ { week: "Week 1", scheduled: 218, completed: 201, noShow: 18 }, { week: "Week 2", scheduled: 242, completed: 209, noShow: 21 }, { week: "Week 3", scheduled: 226, completed: 193, noShow: 29 }, { week: "Week 4", scheduled: 248, completed: 214, noShow: 16 }, ], appointmentStats: [ ["1098", "Total this month"], ["93%", "Completion rate"], ["38", "No - shows"], ], departmentLoad: [ { label: "General", value: 44, percent: "37.9%", progress: 37.9, color: "bg-[var(--dashboard-scheduled)]", }, { label: "Cardiology", value: 26, percent: "22.4%", progress: 22.4, color: "bg-[var(--dashboard-secondary)]", }, { label: "Paediatrics", value: 21, percent: "18.1%", progress: 18.1, color: "bg-[var(--dashboard-completed)]", }, { label: "Orthopaedics", value: 15, percent: "12.9%", progress: 12.9, color: "bg-[var(--dashboard-no-show)]", }, { label: "Obs/Gynae", value: 10, percent: "8.6%", progress: 8.6, color: "bg-destructive", }, ], appointments: [ { time: "09:00", patient: "Maya Rodriguez", type: "Cardiology", doctor: "Dr. Patel", status: "Confirmed" as DashboardAppointmentStatus, }, { time: "09:30", patient: "James Tan", type: "General", doctor: "Dr. Thompson", status: "Done" as DashboardAppointmentStatus, }, { time: "10:00", patient: "Emma Davis", type: "Pediatric", doctor: "Dr. Wilson", status: "In progress" as DashboardAppointmentStatus, }, { time: "10:30", patient: "Mason Brown", type: "Oncology", doctor: "Dr. Johnson", status: "Waiting" as DashboardAppointmentStatus, }, ], staffPerformance: [ { name: "Dr. Patel", role: "Cardiologist", points: 26, rating: "92%", avatar: staffPatel, }, { name: "Dr. Harrison", role: "Cardiologist", points: 21, rating: "95%", avatar: staffHarrison, }, { name: "Dr. Jefferson", role: "Cardiologist", points: 17, rating: "89%", avatar: staffJefferson, }, ], resources: [ { label: "Beds", value: 76, unit: "Used", Icon: BedIcon, color: "bg-[var(--dashboard-scheduled)]", }, { label: "Lab Equipment", value: 72, unit: "Active", Icon: FlaskConicalIcon, color: "bg-[var(--dashboard-completed)]", }, { label: "Medication Stock", value: 84, unit: "Used", Icon: PillIcon, color: "bg-[var(--dashboard-secondary)]", }, { label: "Consult Rooms", value: 69, unit: "Occupied", Icon: Building2Icon, color: "bg-[var(--dashboard-no-show)]", }, ], }, "jun-2026": { metrics: [ { label: "Today's appointments", value: "41", suffix: undefined, trend: "4 fewer than yesterday", color: "bg-[var(--dashboard-scheduled)]", trendColor: "text-[var(--dashboard-no-show)]", lastSixDays: [25, 41, 33, 47, 38, 29], }, { label: "Avg. wait time", value: "17", suffix: "min", trend: "5min above target", color: "bg-[var(--dashboard-no-show)]", trendColor: "text-[var(--dashboard-no-show)]", lastSixDays: [8, 15, 21, 16, 18, 13], }, { label: "Bed occupancy", value: "88", suffix: "%", trend: "+3.1% vs last run", color: "bg-[var(--dashboard-completed)]", trendColor: "text-[var(--dashboard-completed)]", lastSixDays: [41, 62, 88, 71, 79, 64], }, { label: "Patient satisfaction", value: "46", suffix: "/5", trend: "-0.2pts this month", color: "bg-[var(--dashboard-secondary)]", trendColor: "text-[var(--dashboard-no-show)]", lastSixDays: [20, 34, 46, 39, 44, 30], }, ], appointmentVolume: [ { week: "Week 1", scheduled: 188, completed: 154, noShow: 31 }, { week: "Week 2", scheduled: 207, completed: 168, noShow: 44 }, { week: "Week 3", scheduled: 191, completed: 162, noShow: 26 }, { week: "Week 4", scheduled: 214, completed: 171, noShow: 40 }, ], appointmentStats: [ ["932", "Total this month"], ["86%", "Completion rate"], ["61", "No - shows"], ], departmentLoad: [ { label: "General", value: 31, percent: "33.3%", progress: 33.3, color: "bg-[var(--dashboard-scheduled)]", }, { label: "Cardiology", value: 19, percent: "20.4%", progress: 20.4, color: "bg-[var(--dashboard-secondary)]", }, { label: "Paediatrics", value: 16, percent: "17.2%", progress: 17.2, color: "bg-[var(--dashboard-completed)]", }, { label: "Orthopaedics", value: 14, percent: "15.1%", progress: 15.1, color: "bg-[var(--dashboard-no-show)]", }, { label: "Obs/Gynae", value: 13, percent: "14%", progress: 14, color: "bg-destructive", }, ], appointments: [ { time: "08:45", patient: "Lucas Papadopoulos", type: "General", doctor: "Dr. Kline", status: "Waiting" as DashboardAppointmentStatus, }, { time: "09:15", patient: "Charlotte Wilson", type: "Neurology", doctor: "Dr. Harris", status: "Confirmed" as DashboardAppointmentStatus, }, { time: "10:00", patient: "Amelia Martinez", type: "Surgical", doctor: "Dr. Rivera", status: "In progress" as DashboardAppointmentStatus, }, { time: "10:30", patient: "Liam O'Sullivan", type: "General", doctor: "Dr. Patel", status: "Done" as DashboardAppointmentStatus, }, ], staffPerformance: [ { name: "Dr. Jefferson", role: "Cardiologist", points: 19, rating: "93%", avatar: staffJefferson, }, { name: "Dr. Harrison", role: "Cardiologist", points: 16, rating: "90%", avatar: staffHarrison, }, { name: "Dr. Patel", role: "Cardiologist", points: 15, rating: "87%", avatar: staffPatel, }, ], resources: [ { label: "Beds", value: 88, unit: "Used", Icon: BedIcon, color: "bg-[var(--dashboard-scheduled)]", }, { label: "Lab Equipment", value: 61, unit: "Active", Icon: FlaskConicalIcon, color: "bg-[var(--dashboard-completed)]", }, { label: "Medication Stock", value: 79, unit: "Used", Icon: PillIcon, color: "bg-[var(--dashboard-secondary)]", }, { label: "Consult Rooms", value: 82, unit: "Occupied", Icon: Building2Icon, color: "bg-[var(--dashboard-no-show)]", }, ], }, "jul-2026": { metrics: dashboardMetrics, appointmentVolume: [ { week: "Week 1", scheduled: 224, completed: 184, noShow: 23 }, { week: "Week 2", scheduled: 229, completed: 191, noShow: 30 }, { week: "Week 3", scheduled: 217, completed: 185, noShow: 18 }, { week: "Week 4", scheduled: 235, completed: 197, noShow: 25 }, ], appointmentStats: [ ["1012", "Total this month"], ["90%", "Completion rate"], ["46", "No - shows"], ], departmentLoad: dashboardDepartmentLoad, appointments: dashboardAppointments, staffPerformance: dashboardStaffPerformance, resources: dashboardResources, }, "aug-2026": { metrics: [ { label: "Today's appointments", value: "52", suffix: undefined, trend: "7 more than yesterday", color: "bg-[var(--dashboard-scheduled)]", trendColor: "text-[var(--dashboard-completed)]", lastSixDays: [20, 34, 52, 40, 47, 35], }, { label: "Avg. wait time", value: "13", suffix: "min", trend: "1min above target", color: "bg-[var(--dashboard-no-show)]", trendColor: "text-[var(--dashboard-no-show)]", lastSixDays: [7, 14, 20, 15, 18, 13], }, { label: "Bed occupancy", value: "84", suffix: "%", trend: "+1.4% vs last run", color: "bg-[var(--dashboard-completed)]", trendColor: "text-[var(--dashboard-completed)]", lastSixDays: [38, 59, 84, 66, 75, 61], }, { label: "Patient satisfaction", value: "48", suffix: "/5", trend: "0.4pts this month", color: "bg-[var(--dashboard-secondary)]", trendColor: "text-[var(--dashboard-completed)]", lastSixDays: [15, 27, 48, 35, 42, 30], }, ], appointmentVolume: [ { week: "Week 1", scheduled: 236, completed: 198, noShow: 17 }, { week: "Week 2", scheduled: 228, completed: 188, noShow: 24 }, { week: "Week 3", scheduled: 242, completed: 206, noShow: 13 }, { week: "Week 4", scheduled: 218, completed: 179, noShow: 26 }, ], appointmentStats: [ ["1064", "Total this month"], ["92%", "Completion rate"], ["40", "No - shows"], ], departmentLoad: [ { label: "General", value: 41, percent: "36.6%", progress: 36.6, color: "bg-[var(--dashboard-scheduled)]", }, { label: "Cardiology", value: 24, percent: "21.4%", progress: 21.4, color: "bg-[var(--dashboard-secondary)]", }, { label: "Paediatrics", value: 20, percent: "17.9%", progress: 17.9, color: "bg-[var(--dashboard-completed)]", }, { label: "Orthopaedics", value: 15, percent: "13.4%", progress: 13.4, color: "bg-[var(--dashboard-no-show)]", }, { label: "Obs/Gynae", value: 12, percent: "10.7%", progress: 10.7, color: "bg-destructive", }, ], appointments: dashboardAppointments, staffPerformance: dashboardStaffPerformance, resources: [ { label: "Beds", value: 84, unit: "Used", Icon: BedIcon, color: "bg-[var(--dashboard-scheduled)]", }, { label: "Lab Equipment", value: 70, unit: "Active", Icon: FlaskConicalIcon, color: "bg-[var(--dashboard-completed)]", }, { label: "Medication Stock", value: 88, unit: "Used", Icon: PillIcon, color: "bg-[var(--dashboard-secondary)]", }, { label: "Consult Rooms", value: 77, unit: "Occupied", Icon: Building2Icon, color: "bg-[var(--dashboard-no-show)]", }, ], }, } as const; export function filterBatchTransactions( transactions: typeof batchTransactions, statusFilter: BatchStatusFilter, ) { if (statusFilter === "all") return [...transactions]; return transactions.filter((row) => row.status === statusFilter); } export function buildBatchExportCsv( transactions: ReturnType, ) { const header = [ "Status", "Transaction ID", "PO", "Vendor", "Amount", "Sources", "Confidence", "Note", ]; const rows = transactions.map((row) => [ row.status, row.transactionId, row.po, row.vendor, row.amount, row.sources.map((source) => sourceLabels[source]).join(" | "), `${row.confidence}%`, "confidenceNote" in row && row.confidenceNote ? row.confidenceNote : "", ]); return [header, ...rows] .map((cells) => cells.map((cell) => `"${String(cell).replaceAll('"', '""')}"`).join(","), ) .join("\n"); } ``` ### `src/components/dashboards/medesk-dashboard/demo.tsx` ```tsx import type { ReactNode } from "react"; import DashboardLayout from "./dashboard-layout"; import { DashboardPage } from "./components/medesk/dashboard-content"; import { DashboardNavigationProvider, useDashboardNavigation, } from "./components/medesk/navigation"; import { ThemeProvider } from "./components/medesk/theme-provider"; const blankRoutes = new Set([ "/appointment", "/staff", "/departments", "/resources", "/analytics", "/reports", "/trends", "/ai-assistant", "/smart-queries", "/settings", "/integrations", "/permissions", ]); function DashboardRoute() { const { pathname } = useDashboardNavigation(); const content: ReactNode = blankRoutes.has(pathname) ? null : ( ); return {content}; } export default function MedeskDashboardDemo() { return ( ); } ```