# Library dashboard A shadcn/ui block from the [@watermelon](https://ui.watermelon.sh) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/watermelon/library-dashboard). - Page, with a live preview: https://shadcn.exchange/r/watermelon/library-dashboard - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/watermelon/library-dashboard-light-3b4579a476dce1da.png - Registry item: https://registry.watermelon.sh/r/library-dashboard.json - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://registry.watermelon.sh/r/library-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: `lucide-react`, `recharts` - Registry items: `button`, `card`, `chart`, `dropdown-menu`, `input-group`, `sheet`, `sidebar`, `tooltip`, `utils` ## Files ### `src/components/dashboards/library-dashboard/components/library/circulation-chart.tsx` ```tsx 'use client'; import { Calendar } from 'lucide-react'; import { useId, useState } from 'react'; import { Area, AreaChart, CartesianGrid, Line, ReferenceLine, XAxis, } from 'recharts'; import { buttonVariants } from '@/components/ui/button'; import { ArrowDown01Icon } from './icons'; import { type ChartConfig, ChartContainer, ChartTooltip, } from '@/components/ui/chart'; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { circulationData } from '../../data'; import { cn } from '@/lib/utils'; type CirculationTimeframe = 'weekly' | 'monthly' | 'yearly'; type CirculationDataPoint = { timestamp: number; checkouts: number; returns: number; }; const circulationChartConfig = { checkouts: { label: 'Checkouts', color: 'var(--primary)', }, returns: { label: 'Returns', color: 'color-mix(in oklch, var(--primary) 55%, black)', }, } satisfies ChartConfig; const chartTicks: Record = { weekly: circulationData.weekly.map((point) => point.timestamp), monthly: [0, 7, 14, 21].map( (dayIndex) => circulationData.monthly[dayIndex].timestamp, ), yearly: circulationData.yearly .filter((_, month) => month % 2 === 0) .map((point) => point.timestamp), }; const chartDomains: Record = { weekly: [ circulationData.weekly[0].timestamp, circulationData.weekly[circulationData.weekly.length - 1].timestamp, ], monthly: [ circulationData.monthly[0].timestamp, circulationData.monthly[circulationData.monthly.length - 1].timestamp, ], yearly: [ circulationData.yearly[0].timestamp, circulationData.yearly[circulationData.yearly.length - 1].timestamp, ], }; const chartMidpoints: Record = { weekly: getMidpoints(chartTicks.weekly, chartDomains.weekly[1]), monthly: getMidpoints(chartTicks.monthly, chartDomains.monthly[1]), yearly: getMidpoints(chartTicks.yearly, chartDomains.yearly[1]), }; function getMidpoints(ticks: number[], domainEnd: number) { const points = ticks.at(-1) === domainEnd ? ticks : [...ticks, domainEnd]; return points.slice(0, -1).map((tick, index) => { return tick + (points[index + 1] - tick) / 2; }); } const shortWeekdayFormatter = new Intl.DateTimeFormat('en-US', { weekday: 'short', timeZone: 'UTC', }); const shortDateFormatter = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', timeZone: 'UTC', }); const shortMonthFormatter = new Intl.DateTimeFormat('en-US', { month: 'short', timeZone: 'UTC', }); const chartFormatters: Record string> = { weekly: (value) => shortWeekdayFormatter.format(value), monthly: (value) => shortDateFormatter.format(value), yearly: (value) => shortMonthFormatter.format(value), }; const weeklyTooltipFormatter = new Intl.DateTimeFormat('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC', }); const datedTooltipFormatter = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC', }); const monthlyTooltipFormatter = new Intl.DateTimeFormat('en-US', { month: 'long', year: 'numeric', timeZone: 'UTC', }); function formatTooltipDate(timeframe: CirculationTimeframe, value: number) { if (timeframe === 'weekly') return weeklyTooltipFormatter.format(value); if (timeframe === 'monthly') return datedTooltipFormatter.format(value); return monthlyTooltipFormatter.format(value); } export function CirculationChart() { const [timeframe, setTimeframe] = useState('weekly'); const [activeLabel, setActiveLabel] = useState(null); const gradientId = useId().replace(/:/g, ''); return (

Collection Circulation

{timeframe} {(['weekly', 'monthly', 'yearly'] as const).map((option) => ( setTimeframe(option)} className={cn( 'rounded-lg capitalize', timeframe === option && 'text-primary font-medium', )} > {option} ))}
event.preventDefault()} > { const label = state?.activeLabel; setActiveLabel( typeof label === 'number' ? label : label != null ? Number(label) : null, ); }} onMouseLeave={() => setActiveLabel(null)} > {chartMidpoints[timeframe].map((midpoint) => ( ))} { const isActive = activeLabel === payload.value; return ( {chartFormatters[timeframe](payload.value)} ); }} /> { if (!active || !payload?.length) return null; const point = payload[0].payload as CirculationDataPoint; return (
{formatTooltipDate(timeframe, point.timestamp)}
Checkouts
{point.checkouts.toLocaleString()}
Returns
{point.returns.toLocaleString()}
); }} />
); } ``` ### `src/components/dashboards/library-dashboard/components/library/collection-donut-chart.tsx` ```tsx 'use client'; import { useState } from 'react'; import { Cell, Pie, PieChart, Tooltip } from 'recharts'; export type CollectionDonutDatum = { name: string; value: number; fill: string; }; type CollectionDonutChartProps = { data: CollectionDonutDatum[]; total: number; label: string; size?: number; activeIndex?: number | null; onActiveIndexChange?: (index: number | null) => void; }; export function CollectionDonutChart({ data, total, label, size = 180, activeIndex: activeIndexProp, onActiveIndexChange, }: CollectionDonutChartProps) { const [uncontrolledActiveIndex, setUncontrolledActiveIndex] = useState< number | null >(null); const isControlled = activeIndexProp !== undefined; const activeIndex = isControlled ? activeIndexProp : uncontrolledActiveIndex; const setActiveIndex = (index: number | null) => { if (!isControlled) setUncontrolledActiveIndex(index); onActiveIndexChange?.(index); }; const activeDatum = activeIndex !== null ? data[activeIndex] : null; const displayValue = activeDatum ? activeDatum.value : total; const displayLabel = activeDatum ? activeDatum.name : label; const center = size / 2; // Thin deep outer rim + thicker lighter body (proportions from data values) const deepOuter = center - 1; const deepInner = deepOuter - 8; const lightOuter = deepInner; const lightInner = deepOuter - 31; const paddingAngle = 2.5; const animationDuration = 800; return (
event.preventDefault()} > {/* Thick lighter inner body */} setActiveIndex(index)} onMouseLeave={() => setActiveIndex(null)} > {data.map((entry, index) => ( ))} {/* Thin deep outer strip — same data/angles as inner */} {data.map((entry, index) => ( ))} null} cursor={false} />
{displayValue.toLocaleString()} {displayLabel}
); } ``` ### `src/components/dashboards/library-dashboard/components/library/dashboard-content.tsx` ```tsx import { useState } from 'react'; import { CirculationChart } from './circulation-chart'; import { CollectionDonutChart } from './collection-donut-chart'; import { ArrowDown01Icon, BookPlusIcon, CancelIcon, CheckoutIcon, Download01Icon, ReturnIcon, SparklesIcon, UserAdd02Icon, } from './icons'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { collectionOverview, intelligenceCards, metrics, recentActivity, } from '../../data'; import { cn } from '@/lib/utils'; const quickActions = [ { label: 'Checkout Items', icon: CheckoutIcon }, { label: 'Process Return', icon: ReturnIcon }, { label: 'Add New Item', icon: BookPlusIcon }, { label: 'Add New Member', icon: UserAdd02Icon }, ]; export function DashboardContent() { return ( <>
Top Metrics
{metrics.map((metric) => ( ))}
Quick Actions
{quickActions.map((action) => (
{action.label}
))}
); } function SectionTitle({ children }: { children: React.ReactNode }) { return

{children}

; } function DashboardHeader() { return (

Good Morning Librarian

Springfield Public Library

Saturday, Feb 19, 2026

); } function MetricCard({ icon: Icon, iconClassName, label, note, noteIcon: NoteIcon, value, }: { label: string; value: string; note: string; icon: React.ComponentType<{ className?: string }>; iconClassName: string; noteIcon?: React.ComponentType<{ className?: string }>; }) { const noteParts = note.match(/^([+-]?\d+(?:\.\d+)?%?|↓\s*\d+)\s+(.*)$/); return (
{label}

{value}

{NoteIcon && } {noteParts ? ( <> {noteParts[1]} {' '} {noteParts[2]} ) : ( {note} )}

); } function CollectionOverview() { const [activeIndex, setActiveIndex] = useState(null); const total = collectionOverview.segments.reduce( (sum, segment) => sum + segment.count, 0, ); const segments = collectionOverview.segments.map((segment) => ({ ...segment, percentage: total > 0 ? (segment.count / total) * 100 : 0, })); const chartData = segments.map((segment) => ({ name: segment.label, value: segment.count, fill: segment.color, })); return (
Collection Overview
{segments.map((segment, index) => (
{segment.label}
{segment.count.toLocaleString()} {segment.percentage % 1 === 0 ? `${segment.percentage.toFixed(0)}%` : `${segment.percentage.toFixed(1)}%`}
))}
); } function RecentActivity() { return (
Recent Activity
{recentActivity.map((activity) => { const ActivityIcon = activity.icon; return (

{activity.parts.map((part, index) => ( {part.text} ))}

); })}
); } function LibraryIntelligence() { return (
Library Intelligence
{intelligenceCards.map((card) => (
{card.title}

{card.bodyParts.map((part, index) => ( {part.text} ))}

))}
); } ``` ### `src/components/dashboards/library-dashboard/components/library/icons.tsx` ```tsx import type { SVGProps } from "react" export type IconProps = SVGProps export function AiIdeaIcon(props: IconProps) { return ( ) } export function Alert02Icon(props: IconProps) { return ( ) } export function ArrowDown01Icon(props: IconProps) { return ( ) } export function ArrowDown02Icon(props: IconProps) { return ( ) } export function ArrowDownIcon(props: IconProps) { return ( ) } export function BackwardIcon(props: IconProps) { return ( ) } export function BellIcon(props: IconProps) { return ( ) } export function BookMinusIcon(props: IconProps) { return ( ) } export function BookOpen02Icon(props: IconProps) { return ( ) } export function BookPlusIcon(props: IconProps) { return ( ) } export function BuildingIcon(props: IconProps) { return ( ) } export function CancelIcon(props: IconProps) { return ( ) } export function CatalogIcon(props: IconProps) { return ( ) } export function CheckoutIcon(props: IconProps) { return ( ) } export function ChevronDownIcon(props: IconProps) { return ( ) } export function CirculationIcon(props: IconProps) { return ( ) } export function CollapseIcon(props: IconProps) { return ( ) } export function DashboardIcon(props: IconProps) { return ( ) } export function Download01Icon(props: IconProps) { return ( ) } export function HelpIcon(props: IconProps) { return ( ) } export function IntelligenceIcon(props: IconProps) { return ( ) } export function MembersIcon(props: IconProps) { return ( ) } export function OpacIcon(props: IconProps) { return ( ) } export function ReportsIcon(props: IconProps) { return ( ) } export function ReturnIcon(props: IconProps) { return ( ) } export function SettingsIcon(props: IconProps) { return ( ) } export function SparklesIcon(props: IconProps) { return ( ) } export function ThemeIcon(props: IconProps) { return ( ) } export function UserAdd02Icon(props: IconProps) { return ( ) } ``` ### `src/components/dashboards/library-dashboard/components/library/logo.tsx` ```tsx import type { SVGProps } from "react" export function Logo(props: SVGProps) { return ( ) } ``` ### `src/components/dashboards/library-dashboard/components/library/sidebar.tsx` ```tsx 'use client'; import { Check, Ellipsis } from 'lucide-react'; import { useRef, useState } from 'react'; import { Logo } from './logo'; import { useTheme } from './theme-provider'; import { ArrowDown01Icon, BackwardIcon, BuildingIcon, HelpIcon, SettingsIcon, ThemeIcon, } from './icons'; import { Button, buttonVariants } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useSidebar, } from '@/components/ui/sidebar'; import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, } from '@/components/ui/sheet'; import { cn } from '@/lib/utils'; import { type NavigationItem, organizations, primaryNavigation, } from '../../data'; const menuButtonBaseClassName = 'h-11 gap-3 rounded-lg border border-transparent px-3.5 font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground active:bg-muted active:text-foreground data-active:border-border data-active:bg-card data-active:text-primary data-active:shadow-[1.35px_2.7px_32.45px_rgba(158,158,158,0.08)] data-active:hover:bg-card data-active:hover:text-primary data-active:active:bg-card data-active:active:text-primary [&_svg]:size-5 [&_svg]:text-foreground data-active:[&_svg]:text-primary'; const sidebarMenuButtonClassName = cn( menuButtonBaseClassName, 'group-data-[collapsible=icon]:size-11! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0!', ); const sidebarMenuSubButtonClassName = cn( menuButtonBaseClassName, '[&_svg]:text-foreground! data-active:[&_svg]:text-primary!', ); const subItemsMenuContentClassName = 'z-100 w-48 p-1.5 shadow-lg'; const bottomNavItemClassName = cn( buttonVariants({ variant: 'ghost' }), 'text-foreground hover:text-primary h-full flex-1 px-0 hover:bg-transparent rounded-none', ); const moreNavItemClassName = cn( menuButtonBaseClassName, 'flex items-center text-sm', ); const mobilePrimaryNavigation = primaryNavigation.slice(0, 4); const mobileMoreNavigation = primaryNavigation.slice(4); type DashboardSidebarProps = { activeSection?: string; activeSubsection?: string; }; export function DashboardSidebar({ activeSection = 'dashboard', activeSubsection, }: DashboardSidebarProps) { const { state, toggleSidebar } = useSidebar(); const { toggleTheme } = useTheme(); const collapsed = state === 'collapsed'; return ( <> {!collapsed ? ( <> e.preventDefault()} > Library ) : (
)} {primaryNavigation.map((item) => ( ))} event.preventDefault()} > {!collapsed && Help & Support} event.preventDefault()} > {!collapsed && Settings} {!collapsed && ( )} ); } function MobileBottomNavigation({ activeSection, activeSubsection, }: { activeSection: string; activeSubsection?: string; }) { const { toggleTheme } = useTheme(); const [moreOpen, setMoreOpen] = useState(false); const [selectedOrg, setSelectedOrg] = useState(organizations[0]); const moreActive = mobileMoreNavigation.some( (item) => item.section === activeSection, ); return (
{mobilePrimaryNavigation.map((item) => { const active = item.section === activeSection; const activeSubItem = active && activeSubsection ? item.subItems?.find((subItem) => subItem.href.endsWith(`/${activeSubsection}`), ) : undefined; const Icon = activeSubItem?.icon ?? item.icon; const label = activeSubItem?.label ?? item.label; if (item.subItems?.length) { return ( active && href.endsWith(`/${activeSubsection}`) } /> ); } return ( e.preventDefault()} className={cn( bottomNavItemClassName, active && 'text-primary font-medium', )} > ); })}
More Library branch {selectedOrg} Select Branch {organizations.map((organization) => ( setSelectedOrg(organization)} className={cn( 'justify-between rounded-lg px-2 py-2.5', organization === selectedOrg ? 'text-primary font-semibold' : 'text-muted-foreground', )} > {organization} {organization === selectedOrg && ( )} ))}
); } type SidebarNavigationItemProps = { active: boolean; activeSubsection?: string; item: NavigationItem; }; function SidebarNavigationItem({ active, activeSubsection, item, }: SidebarNavigationItemProps) { const { state } = useSidebar(); const collapsed = state === 'collapsed'; const [open, setOpen] = useState(false); const [flyoutOpen, setFlyoutOpen] = useState(false); const flyoutCloseTimer = useRef | null>(null); const subItems = item.subItems; const hasSubItems = Boolean(subItems?.length); const showSubItems = !collapsed && open && hasSubItems; const activeChild = activeSubsection ? subItems?.find((subItem) => subItem.href.endsWith(`/${activeSubsection}`)) : undefined; const DisplayedIcon = active && activeChild ? activeChild.icon : item.icon; const displayedLabel = active && activeChild ? activeChild.label : item.label; const activeChildHref = activeChild?.href; const isActiveSubItem = (href: string) => active && href === activeChildHref; function toggleOpen() { setOpen((currentOpen) => !currentOpen); } function openFlyout() { if (flyoutCloseTimer.current) { clearTimeout(flyoutCloseTimer.current); } setFlyoutOpen(true); } function scheduleFlyoutClose() { flyoutCloseTimer.current = setTimeout(() => { setFlyoutOpen(false); }, 120); } return ( {collapsed && hasSubItems ? ( ) : hasSubItems ? ( {!collapsed && ( <> {displayedLabel} )} ) : ( event.preventDefault()} > {!collapsed && {displayedLabel}} )} {showSubItems ? ( {subItems?.map((subItem) => { const SubIcon = subItem.icon; return ( event.preventDefault()} > {subItem.label} ); })} ) : null} ); } function NavigationSubItemsMenu({ item, isSubItemActive, }: { item: NavigationItem; isSubItemActive: (href: string) => boolean; }) { return ( {item.label} {item.subItems?.map((subItem) => { const SubIcon = subItem.icon; return ( event.preventDefault()} className={cn( sidebarMenuSubButtonClassName, 'h-10 gap-2.5 px-3 focus:bg-muted focus:text-foreground data-active:focus:bg-card data-active:focus:text-primary', )} > {subItem.label} ); })} ); } ``` ### `src/components/dashboards/library-dashboard/components/library/theme-provider.tsx` ```tsx import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode, } from 'react'; type Theme = 'light' | 'dark'; type ThemeProviderProps = { children: ReactNode; defaultTheme?: Theme; storageKey?: string; }; type ThemeProviderState = { theme: Theme; setTheme: (theme: Theme) => void; toggleTheme: () => void; }; const ThemeProviderContext = createContext(null); export function ThemeProvider({ children, defaultTheme = 'light', storageKey = 'theme', }: ThemeProviderProps) { const [theme, setThemeState] = useState(() => { if (typeof window === 'undefined') return defaultTheme; const storedTheme = localStorage.getItem(storageKey); if (storedTheme === 'light' || storedTheme === 'dark') { return storedTheme; } return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : defaultTheme; }); useEffect(() => { document.documentElement.classList.toggle('dark', theme === 'dark'); }, [theme]); const setTheme = useCallback( (nextTheme: Theme) => { localStorage.setItem(storageKey, nextTheme); setThemeState(nextTheme); }, [storageKey], ); const toggleTheme = useCallback(() => { setThemeState((currentTheme) => { const nextTheme = currentTheme === 'dark' ? 'light' : 'dark'; localStorage.setItem(storageKey, nextTheme); return nextTheme; }); }, [storageKey]); const value = useMemo( () => ({ theme, setTheme, toggleTheme }), [setTheme, theme, toggleTheme], ); 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/library-dashboard/components/library/topbar.tsx` ```tsx 'use client'; import { useEffect, useRef, useState } from 'react'; import { Check, Search, X } from 'lucide-react'; import { ArrowDown01Icon, BellIcon, BuildingIcon, DashboardIcon, } from './icons'; import { Button, buttonVariants } from '@/components/ui/button'; import { InputGroup, InputGroupAddon, InputGroupInput, } from '@/components/ui/input-group'; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { SidebarTrigger } from '@/components/ui/sidebar'; import { organizations, topNavNotifications } from '../../data'; import { cn } from '@/lib/utils'; const searchPlaceholder = '“Search catalog, members, ISBN”'; export function DashboardTopbar() { const [selectedOrg, setSelectedOrg] = useState(organizations[0]); const [searchQuery, setSearchQuery] = useState(''); const [mobileSearchOpen, setMobileSearchOpen] = useState(false); const searchInputRef = useRef(null); useEffect(() => { if (mobileSearchOpen) { searchInputRef.current?.focus(); } }, [mobileSearchOpen]); return (
Dashboard
setSearchQuery(event.target.value)} aria-label="Search catalog, members, ISBN" className="h-full p-0 pl-0!" placeholder={searchPlaceholder} />
{topNavNotifications.some( (notification) => notification.unread, ) && ( )} Notifications { topNavNotifications.filter( (notification) => notification.unread, ).length }{' '} unread
{topNavNotifications.slice(0, 3).map((notif) => (
{notif.text} {notif.unread && ( )}
{notif.time} ))}
event.preventDefault()} > View all notifications
Select Branch {organizations.map((org) => ( setSelectedOrg(org)} className={cn( 'justify-between rounded-lg px-2 py-2.5', org === selectedOrg ? 'text-primary font-semibold' : 'text-muted-foreground', )} > {org} {org === selectedOrg && ( )} ))}
); } ``` ### `src/components/dashboards/library-dashboard/dashboard-layout.tsx` ```tsx import type { CSSProperties, ReactNode } from 'react'; import { DashboardSidebar } from './components/library/sidebar'; import { DashboardTopbar } from './components/library/topbar'; import { SidebarProvider } from '@/components/ui/sidebar'; import { TooltipProvider } from '@/components/ui/tooltip'; import './dashboard.css'; export default function DashboardLayout({ children }: { children: ReactNode }) { return (
{children}
); } ``` ### `src/components/dashboards/library-dashboard/dashboard.css` ```css .library-dashboard, body:has(.library-dashboard) [data-mobile='true'][data-sidebar='sidebar'], body:has(.library-dashboard) [data-slot='dropdown-menu-content'], body:has(.library-dashboard) [data-slot='sheet-content'], body:has(.library-dashboard) [data-slot='tooltip-content'] { --background: #ffffff; --foreground: #0a1b39; --card: #ffffff; --card-foreground: #0a1b39; --popover: #ffffff; --popover-foreground: #0a1b39; --primary: #ff5150; --primary-foreground: #ffffff; --secondary: #f7f7f7; --secondary-foreground: #242424; --muted: #f8f8f8; --muted-foreground: #858585; --accent: #edf3fc; --accent-foreground: #485066; --destructive: #ff5150; --border: #ededed; --input: var(--secondary); --ring: #ff5150; --chart-1: #ff5150; --chart-2: #0a1b39; --chart-3: #edf3fc; --chart-4: #858585; --chart-5: #242424; --radius: 0.5rem; --sidebar: #ffffff; --sidebar-foreground: #0a1b39; --sidebar-primary: #ff5150; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #fff2f2; --sidebar-accent-foreground: #ff5150; --sidebar-border: #e4e4e4; --sidebar-ring: #ff5150; --input-placeholder: #485066; background-color: var(--background); color: var(--foreground); } .library-dashboard.dark, .dark .library-dashboard, .dark body:has(.library-dashboard) [data-mobile='true'][data-sidebar='sidebar'], .dark body:has(.library-dashboard) [data-slot='dropdown-menu-content'], .dark body:has(.library-dashboard) [data-slot='sheet-content'], .dark body:has(.library-dashboard) [data-slot='tooltip-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: #ff5150; --primary-foreground: #ffffff; --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: var(--secondary); --ring: oklch(0.556 0 0); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: #ff5150; --sidebar-primary-foreground: #ffffff; --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); --input-placeholder: oklch(0.72 0.04 269); } body:has(.library-dashboard) [data-slot='tooltip-content'] { background-color: var(--foreground) !important; color: var(--background) !important; } body:has(.library-dashboard) [data-slot='tooltip-content'] > svg { background-color: var(--foreground) !important; fill: var(--foreground) !important; } .library-dashboard .bg-input { background-color: var(--input); } .library-dashboard input::placeholder, .library-dashboard textarea::placeholder { color: var(--input-placeholder); } .library-dashboard * { -ms-overflow-style: none; scrollbar-width: none; } .library-dashboard *::-webkit-scrollbar { display: none; } /* custom classes */ .no-scrollbar, .no-scrollbar * { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar, .no-scrollbar *::-webkit-scrollbar { display: none; } ``` ### `src/components/dashboards/library-dashboard/data.ts` ```ts import type { ComponentType, SVGProps } from 'react'; import { AiIdeaIcon, Alert02Icon, ArrowDown02Icon, BookMinusIcon, BookOpen02Icon, BookPlusIcon, CatalogIcon, CheckoutIcon, CirculationIcon, DashboardIcon, IntelligenceIcon, MembersIcon, OpacIcon, ReportsIcon, ReturnIcon, } from './components/library/icons'; export type NavigationIcon = ComponentType>; export type NavigationItem = { label: string; href: string; icon: NavigationIcon; section: string; subItems?: { label: string; href: string; icon: NavigationIcon; }[]; }; export const primaryNavigation: NavigationItem[] = [ { label: 'Dashboard', href: '/', icon: DashboardIcon, section: 'dashboard', }, { label: 'Catalog', href: '/catalog', icon: CatalogIcon, section: 'catalog', subItems: [ { label: 'Items', href: '/catalog/items', icon: CatalogIcon }, { label: 'Categories', href: '/catalog/categories', icon: ReportsIcon, }, { label: 'Authors', href: '/catalog/authors', icon: MembersIcon }, ], }, { label: 'Circulation', href: '/circulation', icon: CirculationIcon, section: 'circulation', }, { label: 'Members', href: '/members', icon: MembersIcon, section: 'members', }, { label: 'OPAC', href: '/opac', icon: OpacIcon, section: 'opac', }, { label: 'Library Intelligence', href: '/library-intelligence', icon: IntelligenceIcon, section: 'library-intelligence', }, { label: 'Reports', href: '/reports', icon: ReportsIcon, section: 'reports', }, ]; export const organizations = [ 'Springfield Public Library', 'Shelbyville Library', 'Capitol City Library', 'Ogdenville Archives', ] as const; export const topNavNotifications = [ { id: 1, text: 'New book added: "The Art of Computer Programming"', time: '2 min ago', unread: true, }, { id: 2, text: 'Sarah P. checked out "The Cartographer\'s Secret"', time: '12 min ago', unread: true, }, { id: 3, text: 'System generated 47 purchase recommendations', time: '1 hr ago', unread: false, }, { id: 4, text: 'Yuki K. returned "Silk Road Chronicles"', time: '2 hr ago', unread: false, }, ] as const; export const metrics = [ { label: 'Total Items', value: '12,847', note: '+34 vs last month', icon: BookOpen02Icon, iconClassName: 'text-[#3B82F6]', }, { label: 'Active Members', value: '140', note: '+12 today', icon: MembersIcon, iconClassName: 'text-[#A855F7]', }, { label: 'items Borrowed', value: '16', note: '9.3% of collection', icon: BookMinusIcon, iconClassName: 'text-[#22C55E]', }, { label: 'Overdue Items', value: '47', note: '8 from last week', icon: Alert02Icon, iconClassName: 'text-[#F59E0B]', noteIcon: ArrowDown02Icon, }, ]; type CirculationTimeframe = 'weekly' | 'monthly' | 'yearly'; type CirculationDataPoint = { timestamp: number; checkouts: number; returns: number; }; const DAY_IN_MS = 24 * 60 * 60 * 1000; function createDailyCirculationSeries( start: number, checkouts: number[], returns: number[], ): CirculationDataPoint[] { return checkouts.map((value, index) => ({ timestamp: start + index * DAY_IN_MS, checkouts: value, returns: returns[index], })); } function createMonthlyCirculationSeries( year: number, checkouts: number[], returns: number[], ): CirculationDataPoint[] { return checkouts.map((value, month) => ({ timestamp: Date.UTC(year, month, 1), checkouts: value, returns: returns[month], })); } export const circulationData: Record< CirculationTimeframe, CirculationDataPoint[] > = { weekly: createDailyCirculationSeries( Date.UTC(2026, 1, 15), [82, 88, 85, 91, 94, 90, 96], [68, 70, 73, 69, 77, 75, 80], ), monthly: createDailyCirculationSeries( Date.UTC(2026, 1, 1), [ 580, 592, 600, 594, 610, 625, 638, 646, 652, 660, 641, 632, 628, 620, 618, 630, 635, 632, 620, 610, 625, 640, 668, 690, 688, 695, 704, 698, ], [ 430, 438, 445, 448, 452, 460, 472, 480, 486, 490, 482, 475, 468, 472, 478, 481, 486, 480, 474, 470, 478, 490, 502, 515, 520, 524, 530, 528, ], ), yearly: createMonthlyCirculationSeries( 2026, [4800, 4920, 5100, 5050, 5280, 5400, 5520, 5680, 5900, 6120, 6240, 6380], [3600, 3680, 3760, 3820, 3900, 4020, 4100, 4210, 4380, 4500, 4620, 4700], ), }; export const collectionOverview = { label: 'Items', segments: [ { label: 'Print', count: 5245, color: '#f10806' }, { label: 'Digital', count: 4745, color: '#ff5150' }, { label: 'Media', count: 2497, color: '#ffacac' }, ], } as const; export const recentActivity = [ { id: 'book-added', icon: BookPlusIcon, parts: [ { text: 'New book added: ', muted: true }, { text: '"The Art of Computer Programming"' }, ], time: '2 min ago', dateTime: '2026-02-19T08:58:00', }, { id: 'checkout', icon: CheckoutIcon, parts: [ { text: 'Sarah P. ' }, { text: 'checked out ', muted: true }, { text: '"The Cartographer\u2019s Secret"' }, ], time: '2 min ago', dateTime: '2026-02-19T08:58:00', }, { id: 'titles-flagged', icon: AiIdeaIcon, parts: [ { text: 'Intelligence ' }, { text: 'flagged ', muted: true }, { text: '3,280 dormant titles ' }, { text: 'for collection review', muted: true }, ], time: '1 hr ago', dateTime: '2026-02-19T08:00:00', }, { id: 'return', icon: ReturnIcon, parts: [ { text: 'Yuki K. ' }, { text: 'returned ', muted: true }, { text: '\u201cSilk Road Chronicles\u201d' }, ], time: '2 hr ago', dateTime: '2026-02-19T07:00:00', }, { id: 'recommendations', icon: AiIdeaIcon, parts: [ { text: 'Intelligence ' }, { text: 'generated ', muted: true }, { text: '47 purchase recommendations' }, ], time: '3 hr ago', dateTime: '2026-02-19T06:00:00', }, ] as const; export const intelligenceCards = [ { tone: 'insight', title: 'High Demand Alert', bodyParts: [ { text: '"Project Hail Mary"', emphasis: true }, { text: ' has a 6-member waitlist. 2 additional copies would clear the backlog within 3 weeks.', }, ], }, { tone: 'warning', title: 'Collection Gap', bodyParts: [ { text: "Member searches for 'climate fiction' are up 340% this month, only 2 titles in collection. Consider acquiring more.", }, ], }, { tone: 'success', title: 'Auto-Sort', bodyParts: [ { text: '47 returned items have been categorised and shelf locations assigned. 3 items flagged for condition review.', }, ], }, ] as const; ``` ### `src/components/dashboards/library-dashboard/demo.tsx` ```tsx import DashboardLayout from './dashboard-layout'; import { DashboardContent } from './components/library/dashboard-content'; import { ThemeProvider } from './components/library/theme-provider'; export default function LibraryDashboardDemo() { return ( ); } ```