# Hrm A shadcn/ui block from the [@watermelon](https://ui.watermelon.sh) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/watermelon/hrm). - Page, with a live preview: https://shadcn.exchange/r/watermelon/hrm - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/watermelon/hrm-light-9da146403e68c591.png - Registry item: https://registry.watermelon.sh/r/hrm.json - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://registry.watermelon.sh/r/hrm.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: `@radix-ui/react-avatar`, `@radix-ui/react-collapsible`, `@radix-ui/react-dialog`, `@radix-ui/react-dropdown-menu`, `@radix-ui/react-scroll-area`, `@radix-ui/react-select`, `@radix-ui/react-separator`, `@radix-ui/react-slot`, `@radix-ui/react-tabs`, `@radix-ui/react-tooltip`, `class-variance-authority`, `lucide-react`, `next-themes`, `recharts` - Registry items: `avatar`, `badge`, `button`, `card`, `chart`, `collapsible`, `dropdown-menu`, `input`, `label`, `popover`, `scroll-area`, `select`, `separator`, `sheet`, `sidebar`, `skeleton`, `table`, `tabs`, `tooltip`, `utils` ## Files ### `src/components/dashboards/hrm/components/app-sidebar.tsx` ```tsx "use client"; import { Home, Users, Building2, FolderKanban, SunMoon, Calendar, Clock, UserSearch, FileUser, MessageSquare, Wallet, BarChart3, Link2, CalendarClock, GraduationCap, TrendingUp, Receipt, FileText, Settings, HelpCircle, ChevronDown, Star, Bell, Headphones, X, } from "lucide-react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { useTheme } from "next-themes"; interface NavItem { // eslint-disable-next-line @typescript-eslint/no-explicit-any icon: any; label: string; href: string; isActive?: boolean; isDisabled?: boolean; bgColor?: string; } const mainNavItems: NavItem[] = [ { icon: Home, label: "Dashboard", href: "/dashboard" }, { icon: Users, label: "Employees", href: "#", isDisabled: true }, { icon: Building2, label: "Clients", href: "#", isDisabled: true }, { icon: FolderKanban, label: "Projects", href: "#", isDisabled: true }, ]; const workforceItems: NavItem[] = [ { icon: Calendar, label: "Calendrer", href: "#", isDisabled: true }, { icon: Clock, label: "Attendance", href: "#", isDisabled: true }, { icon: UserSearch, label: "Interviews", href: "#", isDisabled: true }, { icon: FileUser, label: "Job & Applications", href: "#", isDisabled: true }, ]; const communicationItems: NavItem[] = [ { icon: MessageSquare, label: "Chat Hub", href: "#", isDisabled: true }, { icon: Wallet, label: "Payroll & Finance", href: "#", isDisabled: true }, { icon: BarChart3, label: "Reports & Analytics", href: "#", isDisabled: true }, { icon: Link2, label: "Integrations", href: "#", isDisabled: true }, ]; const projectItems: NavItem[] = [ { icon: CalendarClock, label: "Shift Planner", href: "#", bgColor: "bg-orange-500", isDisabled: true, }, { icon: GraduationCap, label: "Training Portal", href: "#", bgColor: "bg-purple-500", isDisabled: true, }, { icon: TrendingUp, label: "Performance Hub", href: "#", bgColor: "bg-emerald-500", isDisabled: true, }, { icon: Receipt, label: "Expense Claims", href: "#", bgColor: "bg-blue-500", isDisabled: true }, ]; const adminItems: NavItem[] = [ { icon: FileText, label: "Documents", href: "#", isDisabled: true }, { icon: Settings, label: "Settings", href: "#", isDisabled: true }, { icon: HelpCircle, label: "Help & Center", href: "#", isDisabled: true }, ]; const iconRailItems = [ { icon: Home, label: "Home" }, { icon: FolderKanban, label: "Projects" }, { icon: Bell, label: "Notifications" }, { icon: MessageSquare, label: "Chat" }, ]; const secondaryIconItems = [ { icon: Headphones, label: "Support" }, { icon: Settings, label: "Settings" }, { icon: SunMoon, label: "Toggle Theme", isThemeToggle: true }, ]; // Icon Rail - Panel 1 (Always visible, with toggle rail on right edge) export function IconRail({ onToggle, }: { onToggle: () => void; isExpanded: boolean; }) { return (
{/* Logo */}
{/* Navigation Icons */}
{iconRailItems.map((item) => ( {item.label} ))}
{secondaryIconItems.map((item) => ( ))}
); } export function SecondarySidebar({ isOpen, onToggle, onNavigate, currentView }: { isOpen: boolean; onToggle: () => void; onNavigate?: (view: string) => void; currentView?: string; }) { return (
{/* Header */}
Logo
GR8R HRM
Admin
{/* Main Nav */}
{mainNavItems.map((item) => ( { if (item.isDisabled) { e.preventDefault(); return; } if (onNavigate) { e.preventDefault(); onNavigate(item.label); } }} className={cn( "flex items-center gap-2 rounded-md px-2.5 py-2 text-sm transition-colors duration-300 cursor-pointer", (currentView ? currentView === item.label : item.isActive) ? "bg-sidebar-primary text-sidebar-primary-foreground font-medium" : "text-muted-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground" )} > {item.label} ))}
); } function ThemeIconButton({ item }: { item: typeof secondaryIconItems[0] }) { const { setTheme, theme } = useTheme(); if (item.isThemeToggle) { return ( {item.label} ); } return ( {item.label} ); } function CollapsibleSection({ title, items, onNavigate, }: { title: string; items: NavItem[]; onNavigate?: (view: string) => void; }) { return ( {title} {items.map((item) => ( { if (item.isDisabled) { e.preventDefault(); return; } if (onNavigate) { e.preventDefault(); onNavigate(item.label); } }} className="flex items-center gap-1.5 rounded-md px-2 pl-3 py-1.5 text-sm transition-colors duration-300 cursor-pointer text-sidebar-foreground/55 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground" > {item.label} ))} ); } ``` ### `src/components/dashboards/hrm/components/employee-table.tsx` ```tsx "use client"; import { cn } from "@/lib/utils"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { type Employee } from "../data"; interface EmployeeTableProps { employees: Employee[]; selectedId?: string; } const statusStyles: Record = { Active: "bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/10", "On Leave": "bg-amber-500/10 text-amber-500 hover:bg-amber-500/10", Absent: "bg-rose-500/10 text-rose-500 hover:bg-rose-500/10", }; export function EmployeeTable({ employees }: EmployeeTableProps) { return (
#ID Name Email Department Position Join Date Status {employees.map((employee) => ( {employee.id}
{employee.avatar} {employee.name}
{employee.email} {employee.department} {employee.position} {employee.joinDate} {employee.status} ))}
); } ``` ### `src/components/dashboards/hrm/dashboardLayout.tsx` ```tsx import { IconRail, SecondarySidebar } from "./components/app-sidebar" import { TooltipProvider } from "@/components/ui/tooltip"; import { Button } from "@/components/ui/button"; import { Sheet, SheetContent, SheetTrigger, SheetTitle } from "@/components/ui/sheet"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Menu, User, Settings, LogOut } from "lucide-react"; import { useState } from "react"; export const DashboardLayout = ({ children, onNavigate, currentView }: { children: React.ReactNode; onNavigate?: (view: string) => void; currentView?: string }) => { const [sidebarOpen, setSidebarOpen] = useState(true); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const handleNavigate = (view: string) => { setIsMobileMenuOpen(false); if (onNavigate) { onNavigate(view); } }; return (
{/* Desktop Sidebar */}
setSidebarOpen(!sidebarOpen)} isExpanded={sidebarOpen} /> setSidebarOpen(!sidebarOpen)} onNavigate={handleNavigate} currentView={currentView} />
{/* Mobile Navigation Trigger */} Navigation Menu setIsMobileMenuOpen(false)} isExpanded={true} /> setIsMobileMenuOpen(false)} onNavigate={handleNavigate} currentView={currentView} /> {currentView || "Dashboard"}
User
Admin User admin@gr8r.io
My Profile Account Settings
Log out
{children}
) } ``` ### `src/components/dashboards/hrm/dashboardView.tsx` ```tsx "use client"; import { Users, Calendar, BriefcaseBusiness, Info, ScanFace, } from "lucide-react"; import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart"; import { Area, AreaChart, XAxis, YAxis, CartesianGrid, PieChart, Pie, Cell, Label as RechartsLabel, } from "recharts"; import { Filter, List, LayoutGrid } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { EmployeeTable } from "./components/employee-table"; import { employees, dashboardCards, attendanceData, attendanceChartConfig, workingFormatData, jobOverviewData, jobChartConfig, totalJobs } from "./data"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { Label } from "@/components/ui/label"; import { Input } from "@/components/ui/input"; export const DashboardView = () => { return (

Welcome To, GR8R HRM!

Manage candidate and track application

{dashboardCards.map((card) => { const IconComponent = card.icon; return (

{card.title}

{card.value}

{card.subtitle}

); })}
{/* Charts Section */}
{/* Attendance Overview Chart */}

Attendance Overview

Last 7 days Last 30 days Last Year
`${value}%`} domain={[0, 100]} dx={-10} /> { if (name === "attendance") { return (
Present: 180
Absent: 40
On Leave: 08
); } return null; }} /> } /> {/* Legend and Footer */}
Attendance
Late arrival
78% Attendance Today
{/* Right Side Charts */}
{/* Working Format */}

Working Format

TOTAL EMPLOYEES {workingFormatData.total}
{/* Progress Bar */}
{/* Legend */}
{workingFormatData.onSite.percentage}% On Site
{workingFormatData.hybrid.percentage}% Hybrid
{/* Job Overview */}

Job Overview

{jobOverviewData.map((entry, index) => ( ))} { if (viewBox && "cx" in viewBox && "cy" in viewBox) { return ( {totalJobs} TOTAL JOBS ); } }} /> {/* Legend */}
40 Active Jobs
20 Interview
{/* Left - View Tabs */}

Employee Activities

List View Board View

Filter Employees

Set the properties to refine the list.

); }; ``` ### `src/components/dashboards/hrm/data.ts` ```ts import { Users, CheckCircle, Briefcase, LogIn, Clock, } from "lucide-react"; import { type ChartConfig } from "@/components/ui/chart"; export interface Employee { id: string; name: string; email: string; department: string; position: string; joinDate: string; status: "Active" | "On Leave" | "Absent"; avatar: string; } export const employees: Employee[] = [ { id: "#001", name: "John Doe", email: "john@example.com", department: "Engineering", position: "Senior Developer", joinDate: "02 Jan, 2026", status: "Active", avatar: "JD", }, { id: "#002", name: "Mike Johnson", email: "mike@example.com", department: "Marketing", position: "Marketing Manager", joinDate: "04 Jan, 2026", status: "Active", avatar: "MJ", }, { id: "#003", name: "David Kim", email: "david@example.com", department: "Finance", position: "Accountant", joinDate: "02 Feb, 2026", status: "On Leave", avatar: "DK", }, { id: "#004", name: "Alex Turner", email: "alexr@example.com", department: "HR", position: "HR Specialist", joinDate: "08 Feb, 2026", status: "Active", avatar: "AT", }, { id: "#005", name: "Ryan Pate", email: "ryan@example.com", department: "Engineering", position: "Frontend Developer", joinDate: "10 Feb, 2026", status: "Absent", avatar: "RP", }, { id: "#006", name: "Mason Reed", email: "mason@example.com", department: "Sales", position: "Sales Representative", joinDate: "31 Dec, 2025", status: "Active", avatar: "MR", }, { id: "#007", name: "James Smith", email: "james@example.com", department: "Sales", position: "Sales Representative", joinDate: "31 Dec, 2025", status: "On Leave", avatar: "JS", }, { id: "#008", name: "Emily Johnson", email: "emily@example.com", department: "Operations", position: "Sales Representative", joinDate: "25 Nov, 2025", status: "Active", avatar: "EJ", }, { id: "#009", name: "Michael Williams", email: "michael@example.com", department: "Engineering", position: "Data Analyst", joinDate: "24 Nov, 2025", status: "On Leave", avatar: "MW", }, { id: "#010", name: "Sarah Brown", email: "sarah@example.com", department: "Operations", position: "SaaS Product Designer", joinDate: "20 Nov, 2025", status: "Active", avatar: "SB", }, { id: "#011", name: "David Jones", email: "jones@example.com", department: "Product", position: "Software Developer", joinDate: "02 Nov, 2025", status: "On Leave", avatar: "DJ", }, { id: "#012", name: "Jessica Garcia", email: "garcia@example.com", department: "Product", position: "UI/UX Designer", joinDate: "12 Oct, 2025", status: "Active", avatar: "JG", }, ]; export const dashboardCards = [ { id: 1, title: "TOTAL EMPLOYEES", value: "230", subtitle: "This month", icon: Users, bgColor: "bg-blue-500/20", iconColor: "text-blue-400", }, { id: 2, title: "ATTENDANCE TODAY", value: "78%", subtitle: "228 / 248", icon: CheckCircle, bgColor: "bg-green-500/20", iconColor: "text-green-400", }, { id: 3, title: "TOTAL PROJECT", value: "120", subtitle: "This month", icon: Briefcase, bgColor: "bg-purple-500/20", iconColor: "text-purple-400", }, { id: 4, title: "OPEN POSITIONS", value: "18", subtitle: "5+ Urgent", icon: LogIn, bgColor: "bg-yellow-500/20", iconColor: "text-yellow-400", }, { id: 5, title: "PENDING APPROVALS", value: "14", subtitle: "6 Leaves", icon: Clock, bgColor: "bg-red-500/20", iconColor: "text-red-400", }, ]; export const attendanceData = [ { day: "Monday", attendance: 65, lateArrival: 45 }, { day: "Tuesday", attendance: 72, lateArrival: 38 }, { day: "Wednesday", attendance: 68, lateArrival: 42 }, { day: "Thursday", attendance: 78, lateArrival: 55 }, { day: "Friday", attendance: 55, lateArrival: 48 }, { day: "Saturday", attendance: 48, lateArrival: 35 }, { day: "Sunday", attendance: 52, lateArrival: 40 }, ]; export const attendanceChartConfig = { attendance: { label: "Attendance", color: "hsl(0, 0%, 100%)", }, lateArrival: { label: "Late arrival", color: "hsl(0, 0%, 40%)", }, } satisfies ChartConfig; export const workingFormatData = { total: 230, onSite: { percentage: 46.8, color: "#3b82f6" }, hybrid: { percentage: 26.8, color: "#a855f7" }, remote: { percentage: 26.4, color: "#06b6d4" }, }; export const jobOverviewData = [ { name: "Active Jobs", value: 40, fill: "#f59e0b" }, { name: "Interview", value: 20, fill: "#3b82f6" }, { name: "Remaining", value: 10, fill: "#374151" }, ]; export const jobChartConfig = { activeJobs: { label: "Active Jobs", color: "#f59e0b", }, interview: { label: "Interview", color: "#3b82f6", }, } satisfies ChartConfig; export const totalJobs = 70; ``` ### `src/components/dashboards/hrm/demo.tsx` ```tsx "use client"; import { useState } from "react"; import { DashboardLayout } from "./dashboardLayout"; import { DashboardView } from "./dashboardView"; export default function HrmDashboardDemo() { const [currentView, setCurrentView] = useState("Dashboard"); const renderContent = () => { switch (currentView) { case "Dashboard": return ; default: return ; } }; return ( {renderContent()} ); } ```