{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "employee-org-chart-tree", "title": "Employee Org Chart Tree", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/employee-org-chart-tree/EmployeeOrgChartTree.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { EmployeeProfileDrawer } from './EmployeeProfileDrawer'\nimport { OrgChartNodeCard, getDeptBadgeClasses } from './OrgChartNodeCard'\nimport { OrgChartToolbar } from './OrgChartToolbar'\nimport { DEFAULT_ORG_DATA } from './org-chart-data'\nimport type { EmployeeNode } from './org-chart-types'\n\nexport type { EmployeeNode }\n\nexport interface EmployeeOrgChartTreeProps {\n title?: string\n subtitle?: string\n orgData?: EmployeeNode\n initialSelectedId?: string\n initialDepartment?: string\n initialSearch?: string\n initialExpandedIds?: string[]\n initialDrawerOpen?: boolean\n className?: string\n}\n\nfunction flatten(node: EmployeeNode): EmployeeNode[] {\n const result: EmployeeNode[] = [node]\n if (node.children) {\n for (const child of node.children) {\n result.push(...flatten(child))\n }\n }\n return result\n}\n\nexport function EmployeeOrgChartTree({\n title = 'Company Organizational Chart',\n subtitle = '148 Employees across 5 Departments',\n orgData = DEFAULT_ORG_DATA,\n initialSelectedId = 'emp-ceo',\n initialDepartment = 'All',\n initialSearch = '',\n initialExpandedIds = ['emp-ceo', 'emp-eng-vp', 'emp-prod-vp', 'emp-ops-vp'],\n initialDrawerOpen = true,\n className,\n}: EmployeeOrgChartTreeProps) {\n const canvasRef = React.useRef(null)\n\n React.useEffect(() => {\n const el = canvasRef.current\n if (el) el.scrollLeft = Math.max(0, (el.scrollWidth - el.clientWidth) / 2)\n }, [])\n\n const allEmployees = React.useMemo(() => flatten(orgData), [orgData])\n\n const [selectedEmployeeId, setSelectedEmployeeId] = React.useState(initialSelectedId)\n const [selectedDepartment, setSelectedDepartment] = React.useState(initialDepartment)\n const [searchQuery, setSearchQuery] = React.useState(initialSearch)\n const [isDrawerOpen, setIsDrawerOpen] = React.useState(initialDrawerOpen)\n const [zoomLevel, setZoomLevel] = React.useState(100)\n const [emailCopied, setEmailCopied] = React.useState(false)\n const [expandedIds, setExpandedIds] = React.useState>(new Set(initialExpandedIds))\n\n const departmentCounts = React.useMemo(\n () => [\n { label: 'All', value: 'All', count: allEmployees.length },\n {\n label: 'Executive',\n value: 'Executive',\n count: allEmployees.filter((e) => e.department === 'Executive').length,\n },\n {\n label: 'Engineering',\n value: 'Engineering',\n count: allEmployees.filter((e) => e.department === 'Engineering').length,\n },\n { label: 'Design', value: 'Design', count: allEmployees.filter((e) => e.department === 'Design').length },\n { label: 'Product', value: 'Product', count: allEmployees.filter((e) => e.department === 'Product').length },\n {\n label: 'Operations',\n value: 'Operations',\n count: allEmployees.filter((e) => e.department === 'Operations').length,\n },\n ],\n [allEmployees],\n )\n\n const selectedEmployee = React.useMemo(() => {\n return allEmployees.find((e) => e.id === selectedEmployeeId) || orgData\n }, [allEmployees, selectedEmployeeId, orgData])\n\n const matchingEmployeeIds = React.useMemo(() => {\n const q = searchQuery.trim().toLowerCase()\n if (!q) return new Set()\n\n const matches = new Set()\n for (const emp of allEmployees) {\n if (\n emp.name.toLowerCase().includes(q) ||\n emp.role.toLowerCase().includes(q) ||\n emp.department.toLowerCase().includes(q) ||\n emp.location.toLowerCase().includes(q) ||\n emp.skills.some((s) => s.toLowerCase().includes(q))\n ) {\n matches.add(emp.id)\n }\n }\n return matches\n }, [allEmployees, searchQuery])\n\n React.useEffect(() => {\n if (searchQuery.trim()) {\n const allParentIds = allEmployees.filter((e) => e.children && e.children.length > 0).map((e) => e.id)\n setExpandedIds(new Set(allParentIds))\n }\n }, [searchQuery, allEmployees])\n\n const isExpanded = (id: string): boolean => expandedIds.has(id)\n\n const toggleExpand = (id: string) => {\n setExpandedIds((prev) => {\n const next = new Set(prev)\n if (next.has(id)) {\n next.delete(id)\n } else {\n next.add(id)\n }\n return next\n })\n }\n\n const expandAll = () => {\n const allParentIds = allEmployees.filter((e) => e.children && e.children.length > 0).map((e) => e.id)\n setExpandedIds(new Set(allParentIds))\n }\n\n const collapseAll = () => {\n setExpandedIds(new Set())\n }\n\n const selectEmployee = (emp: EmployeeNode) => {\n setSelectedEmployeeId(emp.id)\n setIsDrawerOpen(true)\n }\n\n const selectSelectedManager = () => {\n const manager = allEmployees.find((e) => e.id === selectedEmployee?.managerId)\n if (manager) selectEmployee(manager)\n }\n\n const copyEmail = (email: string) => {\n navigator.clipboard.writeText(email)\n setEmailCopied(true)\n setTimeout(() => {\n setEmailCopied(false)\n }, 2000)\n }\n\n const adjustZoom = (delta: number) => {\n setZoomLevel((prev) => Math.min(130, Math.max(70, prev + delta)))\n }\n\n const resetZoom = () => {\n setZoomLevel(100)\n }\n\n const isNodeDimmed = (node: EmployeeNode): boolean => {\n if (selectedDepartment !== 'All') {\n if (selectedDepartment === 'Executive' && node.department !== 'Executive') return true\n if (selectedDepartment === 'Engineering' && node.department !== 'Engineering' && node.department !== 'Executive')\n return true\n if (selectedDepartment === 'Design' && node.department !== 'Design' && node.department !== 'Executive')\n return true\n if (selectedDepartment === 'Product' && node.department !== 'Product' && node.department !== 'Executive')\n return true\n if (selectedDepartment === 'Operations' && node.department !== 'Operations' && node.department !== 'Executive')\n return true\n }\n\n if (searchQuery.trim().length > 0) {\n const isDirectMatch = matchingEmployeeIds.has(node.id)\n const hasMatchingDescendant = flatten(node).some((n) => matchingEmployeeIds.has(n.id))\n return !isDirectMatch && !hasMatchingDescendant\n }\n\n return false\n }\n\n const isNodeHighlighted = (node: EmployeeNode): boolean => {\n if (searchQuery.trim().length > 0) {\n return matchingEmployeeIds.has(node.id)\n }\n return false\n }\n\n return (\n \n {/* Header & Toolbar Controls */}\n setIsDrawerOpen((prev) => !prev)}\n onDepartmentSelect={setSelectedDepartment}\n onExpandAll={expandAll}\n onCollapseAll={collapseAll}\n onAdjustZoom={adjustZoom}\n onResetZoom={resetZoom}\n />\n\n {/* Main Content: Canvas & Quick Info Drawer */}\n
\n {/* Tree Hierarchy Node Canvas */}\n
\n \n {/* LEVEL 0: CEO Node */}\n
\n \n\n {/* Connector stem down from CEO */}\n {isExpanded(orgData.id) && Boolean(orgData.children?.length) &&
}\n\n {/* LEVEL 1: VPs and Directors */}\n {isExpanded(orgData.id) && Boolean(orgData.children?.length) && (\n
\n {/* Horizontal branching rail connecting Level 1 nodes */}\n {(orgData.children?.length ?? 0) > 1 && (\n
\n )}\n\n {/* Iterate Level 1 VPs */}\n {orgData.children?.map((vp) => (\n
\n {/* Top stem connecting rail to VP card */}\n
\n\n {/* VP Node Card */}\n \n\n {/* Connector down from VP */}\n {isExpanded(vp.id) && Boolean(vp.children?.length) &&
}\n\n {/* LEVEL 2: Staff Leads & Managers */}\n {isExpanded(vp.id) && Boolean(vp.children?.length) && (\n
\n {/* Horizontal rail for Level 2 nodes */}\n {vp.children?.length === 3 && (\n
\n )}\n {vp.children?.length === 2 && (\n
\n )}\n\n {/* Iterate Level 2 Leads */}\n {vp.children?.map((lead) => (\n
\n
\n\n {/* Lead Node Card */}\n \n\n {/* Connector down from Lead */}\n {isExpanded(lead.id) && Boolean(lead.children?.length) && (\n
\n )}\n\n {/* LEVEL 3: Team ICs / Senior Contributors */}\n {isExpanded(lead.id) && Boolean(lead.children?.length) && (\n
\n {lead.children?.length === 2 && (\n
\n )}\n\n {/* Iterate Level 3 ICs */}\n {lead.children?.map((ic) => (\n
\n
\n\n {/* IC Card */}\n \n
\n ))}\n
\n )}\n
\n ))}\n
\n )}\n
\n ))}\n
\n )}\n
\n
\n
\n\n {/* Quick Info Side Profile Drawer */}\n {isDrawerOpen && (\n setIsDrawerOpen(false)}\n onSelectEmployee={selectEmployee}\n onViewManager={selectSelectedManager}\n />\n )}\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/EmployeeOrgChartTree.tsx" }, { "path": "packages/registry-react/blocks/employee-org-chart-tree/EmployeeProfileDrawer.tsx", "content": "'use client'\n\nimport { ArrowRight, Briefcase, Calendar, Check, Copy, Mail, MapPin, User, Users, X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\nimport type { EmployeeNode } from './org-chart-types'\n\nexport interface EmployeeProfileDrawerProps {\n employee: EmployeeNode\n emailCopied: boolean\n onCopyEmail: (email: string) => void\n onClose: () => void\n getDeptBadgeClasses: (dept: string) => string\n onSelectEmployee: (employee: EmployeeNode) => void\n onViewManager: (managerId: string | undefined) => void\n}\n\nexport function EmployeeProfileDrawer({\n employee,\n emailCopied,\n onCopyEmail,\n onClose,\n getDeptBadgeClasses,\n onSelectEmployee,\n onViewManager,\n}: EmployeeProfileDrawerProps) {\n return (\n
\n {/* Drawer Header */}\n
\n
\n \n

Employee Profile

\n
\n onClose()}\n >\n \n \n
\n\n {/* Drawer Body */}\n
\n {/* Profile Identity Header */}\n
\n
\n \n \n {employee.initials}\n \n \n
\n
\n

{employee.name}

\n

{employee.role}

\n
\n \n {employee.department}\n \n \n Active ยท Full-time\n \n
\n
\n
\n\n {/* Quick Action Buttons */}\n
\n \n onCopyEmail(employee.email)}\n >\n {emailCopied ? : }\n {emailCopied ? 'Copied!' : 'Copy Email'}\n \n
\n\n \n\n {/* Bio / Leadership Scope */}\n
\n
About & Focus
\n

{employee.bio}

\n
\n\n {/* Key Details Grid */}\n
\n
Overview Details
\n
\n
\n
\n \n Team Scope\n
\n

{employee.teamHeadcount} Members

\n
\n\n
\n
\n \n Location\n
\n

{employee.location}

\n
\n\n
\n
\n \n Tenure\n
\n

{employee.tenure}

\n
\n\n
\n
\n \n Phone\n
\n

{employee.phone}

\n
\n
\n
\n\n {/* Reporting Manager Context (if applicable) */}\n {employee.managerName && (\n
\n
Reports To
\n
\n
\n

{employee.managerName}

\n

{employee.managerRole}

\n
\n onViewManager(employee.managerId)}\n >\n View\n \n \n
\n
\n )}\n\n {/* Direct Reports Roster (if has children) */}\n {employee.children && employee.children.length > 0 && (\n
\n
\n
\n Direct Reports ({employee.children.length})\n
\n {employee.reportsCount} reporting teams\n
\n\n
\n {employee.children.map((sub) => (\n onSelectEmployee(sub)}\n >\n
\n \n \n {sub.initials}\n \n
\n

{sub.name}

\n

{sub.role}

\n
\n
\n \n {sub.teamHeadcount} staff\n \n
\n ))}\n
\n
\n )}\n\n {/* Skills & Competencies */}\n
\n
Core Competencies
\n
\n {employee.skills.map((skill) => (\n \n {skill}\n \n ))}\n
\n
\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/EmployeeProfileDrawer.tsx" }, { "path": "packages/registry-react/blocks/employee-org-chart-tree/OrgChartToolbar.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { Building2, Minus, Plus, RotateCcw, Search, User, X, ZoomIn, ZoomOut } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\n\nexport interface DepartmentCount {\n label: string\n value: string\n count: number\n}\n\nexport interface OrgChartToolbarProps {\n title: string\n subtitle: string\n searchQuery: string\n isDrawerOpen: boolean\n departmentCounts: DepartmentCount[]\n selectedDepartment: string\n matchingCount: number\n zoomLevel: number\n onSearchChange: (value: string) => void\n onToggleDrawer: () => void\n onDepartmentSelect: (dept: string) => void\n onExpandAll: () => void\n onCollapseAll: () => void\n onAdjustZoom: (delta: number) => void\n onResetZoom: () => void\n}\n\nexport function OrgChartToolbar({\n title,\n subtitle,\n searchQuery,\n isDrawerOpen,\n departmentCounts,\n selectedDepartment,\n matchingCount,\n zoomLevel,\n onSearchChange,\n onToggleDrawer,\n onDepartmentSelect,\n onExpandAll,\n onCollapseAll,\n onAdjustZoom,\n onResetZoom,\n}: OrgChartToolbarProps) {\n return (\n
\n {/* Header Section */}\n
\n
\n
\n
\n \n
\n

{title}

\n
\n

{subtitle}

\n
\n\n {/* Header Action Controls */}\n
\n {/* Search input */}\n
\n \n onSearchChange(e.target.value)}\n placeholder=\"Search employee, title, skill...\"\n className=\"h-8 pr-7 pl-8 text-xs\"\n />\n {searchQuery && (\n onSearchChange('')}\n >\n \n \n )}\n
\n\n \n\n {/* Expand / Collapse All */}\n \n\n \n\n {/* Profile Drawer Toggle Button */}\n \n \n {isDrawerOpen ? 'Hide Profile' : 'View Profile'}\n \n
\n
\n\n {/* Filter & Toolbar Bar */}\n
\n {/* Department Filter Pills */}\n
\n Department:\n {departmentCounts.map((dept) => (\n onDepartmentSelect(dept.value)}\n >\n {dept.label}\n \n {{ dept: dept.count }.dept}\n \n \n ))}\n
\n\n {/* Zoom and Search Banner */}\n
\n {searchQuery.trim() && (\n
\n Found {matchingCount} matching member{matchingCount === 1 ? '' : 's'}\n
\n )}\n\n
\n onAdjustZoom(-10)}\n >\n \n \n {zoomLevel}%\n = 130}\n aria-label=\"Zoom in\"\n onClick={() => onAdjustZoom(10)}\n >\n \n \n \n \n \n \n
\n
\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/OrgChartToolbar.tsx" }, { "path": "packages/registry-react/blocks/employee-org-chart-tree/OrgChartNodeCard.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronDown, ChevronRight, Mail, MapPin, Users } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport type { EmployeeNode } from './org-chart-types'\n\nexport function getDeptBadgeClasses(dept: string): string {\n switch (dept) {\n case 'Executive':\n return 'border-chart-1/30 bg-chart-1/10 text-chart-1'\n case 'Engineering':\n return 'border-chart-2/30 bg-chart-2/10 text-chart-2'\n case 'Design':\n return 'border-chart-3/30 bg-chart-3/10 text-chart-3'\n case 'Product':\n return 'border-chart-4/30 bg-chart-4/10 text-chart-4'\n case 'Operations':\n return 'border-chart-5/30 bg-chart-5/10 text-chart-5'\n default:\n return 'border-border bg-muted text-muted-foreground'\n }\n}\n\nexport function getDeptTopStripClasses(dept: string): string {\n switch (dept) {\n case 'Executive':\n return 'bg-chart-1'\n case 'Engineering':\n return 'bg-chart-2'\n case 'Design':\n return 'bg-chart-3'\n case 'Product':\n return 'bg-chart-4'\n case 'Operations':\n return 'bg-chart-5'\n default:\n return 'bg-muted-foreground'\n }\n}\n\nexport interface OrgChartNodeCardProps {\n node: EmployeeNode\n isSelected: boolean\n isHighlighted: boolean\n isDimmed: boolean\n isExpanded?: boolean\n reportsLabel?: string\n headcountLabel?: string\n expandLabel?: string\n collapseLabel?: string\n onSelect: (node: EmployeeNode) => void\n onToggleExpand?: (id: string) => void\n}\n\nexport function OrgChartNodeCard({\n node,\n isSelected,\n isHighlighted,\n isDimmed,\n isExpanded = false,\n reportsLabel,\n headcountLabel,\n expandLabel,\n collapseLabel,\n onSelect,\n onToggleExpand,\n}: OrgChartNodeCardProps) {\n return (\n onSelect(node)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n onSelect(node)\n }\n }}\n >\n {/* Top department accent strip */}\n
\n\n
\n {/* Identity row */}\n
\n
\n
\n \n \n {node.initials}\n \n \n
\n
\n

{node.name}

\n

{node.role}

\n
\n
\n \n {node.department}\n \n
\n\n {/* Contact & Location info */}\n
\n
\n \n {node.location}\n
\n
\n \n {node.email}\n
\n
\n\n {/* Team Reports Count Pill */}\n
\n
\n \n {reportsLabel || `Direct reports: ${node.reportsCount}`}\n
\n {headcountLabel || `${node.teamHeadcount} staff`}\n
\n\n {/* Expand/Collapse Button (if has children) */}\n {node.children && node.children.length > 0 && onToggleExpand && (\n {\n e.stopPropagation()\n onToggleExpand(node.id)\n }}\n >\n \n {isExpanded ? : }\n \n {isExpanded ? collapseLabel || 'Collapse Branch' : expandLabel || `Expand (${node.children.length})`}\n \n \n {node.children.length}\n \n )}\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/OrgChartNodeCard.tsx" }, { "path": "packages/registry-react/blocks/employee-org-chart-tree/org-chart-types.ts", "content": "export interface EmployeeNode {\n id: string\n name: string\n role: string\n department: 'Executive' | 'Engineering' | 'Design' | 'Product' | 'Operations'\n email: string\n phone: string\n location: string\n avatar: string\n initials: string\n reportsCount: number\n teamHeadcount: number\n managerId?: string\n managerName?: string\n managerRole?: string\n startDate: string\n tenure: string\n bio: string\n skills: string[]\n status: 'active' | 'on-leave'\n children?: EmployeeNode[]\n}\n\nexport function getDeptBadgeClasses(dept: string): string {\n switch (dept) {\n case 'Executive':\n return 'border-chart-1/30 bg-chart-1/10 text-chart-1'\n case 'Engineering':\n return 'border-chart-2/30 bg-chart-2/10 text-chart-2'\n case 'Design':\n return 'border-chart-3/30 bg-chart-3/10 text-chart-3'\n case 'Product':\n return 'border-chart-4/30 bg-chart-4/10 text-chart-4'\n case 'Operations':\n return 'border-chart-5/30 bg-chart-5/10 text-chart-5'\n default:\n return 'border-border bg-muted text-muted-foreground'\n }\n}\n\nexport function getDeptTopStripClasses(dept: string): string {\n switch (dept) {\n case 'Executive':\n return 'bg-chart-1'\n case 'Engineering':\n return 'bg-chart-2'\n case 'Design':\n return 'bg-chart-3'\n case 'Product':\n return 'bg-chart-4'\n case 'Operations':\n return 'bg-chart-5'\n default:\n return 'bg-muted-foreground'\n }\n}\n", "type": "registry:block", "target": "~/components/blocks/org-chart-types.ts" }, { "path": "packages/registry-react/blocks/employee-org-chart-tree/org-chart-data.ts", "content": "import type { EmployeeNode } from './org-chart-types'\n\nexport const DEFAULT_ORG_DATA: EmployeeNode = {\n id: 'emp-ceo',\n name: 'Sarah Jenkins',\n role: 'Chief Executive Officer',\n department: 'Executive',\n email: 'sarah.jenkins@acme.corp',\n phone: '+1 (415) 890-1200',\n location: 'San Francisco, CA (HQ)',\n avatar: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=160&auto=format&fit=crop&q=80',\n initials: 'SJ',\n reportsCount: 3,\n teamHeadcount: 148,\n startDate: 'January 2019',\n tenure: '5 yrs 8 mos',\n bio: 'Directs company-wide vision, long-range enterprise roadmap, capital allocation, and executive leadership across 5 global divisions.',\n skills: ['Executive Leadership', 'Corporate Strategy', 'Enterprise SaaS', 'M&A', 'Culture'],\n status: 'active',\n children: [\n {\n id: 'emp-eng-vp',\n name: 'Marcus Vance',\n role: 'VP of Engineering',\n department: 'Engineering',\n email: 'marcus.vance@acme.corp',\n phone: '+1 (212) 745-9921',\n location: 'New York, NY',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=160&auto=format&fit=crop&q=80',\n initials: 'MV',\n reportsCount: 3,\n teamHeadcount: 64,\n managerId: 'emp-ceo',\n managerName: 'Sarah Jenkins',\n managerRole: 'Chief Executive Officer',\n startDate: 'March 2020',\n tenure: '4 yrs 6 mos',\n bio: 'Leads 64 engineers across platform architecture, frontend infrastructure, and Site Reliability Engineering with 99.99% uptime SLA.',\n skills: ['Distributed Systems', 'Cloud Architecture', 'Tech Strategy', 'Kubernetes', 'Scalability'],\n status: 'active',\n children: [\n {\n id: 'emp-eng-lead-1',\n name: 'Alex Rivera',\n role: 'Principal Architect',\n department: 'Engineering',\n email: 'alex.rivera@acme.corp',\n phone: '+1 (512) 634-1109',\n location: 'Austin, TX',\n avatar: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=160&auto=format&fit=crop&q=80',\n initials: 'AR',\n reportsCount: 2,\n teamHeadcount: 18,\n managerId: 'emp-eng-vp',\n managerName: 'Marcus Vance',\n managerRole: 'VP of Engineering',\n startDate: 'September 2020',\n tenure: '4 yrs',\n bio: 'Designs core distributed event pipelines, data mesh architecture, and multi-tenant database infrastructure.',\n skills: ['Go', 'Kafka', 'PostgreSQL', 'System Architecture', 'Event Streaming'],\n status: 'active',\n children: [\n {\n id: 'emp-eng-ic-1',\n name: 'Kai Zhang',\n role: 'Senior Backend Engineer',\n department: 'Engineering',\n email: 'kai.zhang@acme.corp',\n phone: '+1 (512) 634-1188',\n location: 'Austin, TX',\n avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=160&auto=format&fit=crop&q=80',\n initials: 'KZ',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-eng-lead-1',\n managerName: 'Alex Rivera',\n managerRole: 'Principal Architect',\n startDate: 'January 2022',\n tenure: '2 yrs 8 mos',\n bio: 'Builds low-latency gRPC services, consensus layers, and distributed caching protocols.',\n skills: ['Rust', 'gRPC', 'Raft', 'Redis', 'High Throughput'],\n status: 'active',\n },\n {\n id: 'emp-eng-ic-2',\n name: 'Hannah Schmidt',\n role: 'Staff Database Architect',\n department: 'Engineering',\n email: 'hannah.schmidt@acme.corp',\n phone: '+1 (512) 634-1192',\n location: 'Remote, US',\n avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=160&auto=format&fit=crop&q=80',\n initials: 'HS',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-eng-lead-1',\n managerName: 'Alex Rivera',\n managerRole: 'Principal Architect',\n startDate: 'May 2021',\n tenure: '3 yrs 4 mos',\n bio: 'Specializes in multi-master replication, query optimization, and automated sharding migrations.',\n skills: ['PostgreSQL', 'CockroachDB', 'Data Warehousing', 'Query Tuning'],\n status: 'active',\n },\n ],\n },\n {\n id: 'emp-eng-lead-2',\n name: 'Sofia Rossi',\n role: 'Staff Frontend Lead',\n department: 'Engineering',\n email: 'sofia.rossi@acme.corp',\n phone: '+49 30 2219 4481',\n location: 'Berlin, Germany',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=160&auto=format&fit=crop&q=80',\n initials: 'SR',\n reportsCount: 2,\n teamHeadcount: 24,\n managerId: 'emp-eng-vp',\n managerName: 'Marcus Vance',\n managerRole: 'VP of Engineering',\n startDate: 'November 2020',\n tenure: '3 yrs 10 mos',\n bio: 'Leads the unified component design system, micro-frontend architecture, and web accessibility standards.',\n skills: ['Vue 3', 'React', 'Design Systems', 'Web Performance', 'WCAG AA'],\n status: 'active',\n children: [\n {\n id: 'emp-eng-ic-3',\n name: 'Leo Garcia',\n role: 'Senior UI Engineer',\n department: 'Engineering',\n email: 'leo.garcia@acme.corp',\n phone: '+49 30 2219 4490',\n location: 'Berlin, Germany',\n avatar: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=160&auto=format&fit=crop&q=80',\n initials: 'LG',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-eng-lead-2',\n managerName: 'Sofia Rossi',\n managerRole: 'Staff Frontend Lead',\n startDate: 'February 2022',\n tenure: '2 yrs 7 mos',\n bio: 'Focuses on complex interactive data visualization canvases, charts, and keyboard shortcuts engine.',\n skills: ['TypeScript', 'Tailwind CSS', 'D3.js', 'Canvas API'],\n status: 'active',\n },\n {\n id: 'emp-eng-ic-4',\n name: 'Nina Patel',\n role: 'Frontend Platform Engineer',\n department: 'Engineering',\n email: 'nina.patel@acme.corp',\n phone: '+44 20 8123 9940',\n location: 'London, UK',\n avatar: 'https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=160&auto=format&fit=crop&q=80',\n initials: 'NP',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-eng-lead-2',\n managerName: 'Sofia Rossi',\n managerRole: 'Staff Frontend Lead',\n startDate: 'October 2022',\n tenure: '1 yr 11 mos',\n bio: 'Manages automated bundle size budgets, CI build plugins, and island rendering hydration pipelines.',\n skills: ['Vite', 'Turborepo', 'Playwright', 'ESBuild'],\n status: 'active',\n },\n ],\n },\n {\n id: 'emp-eng-lead-3',\n name: 'Tariq Mansour',\n role: 'DevOps & SRE Lead',\n department: 'Engineering',\n email: 'tariq.mansour@acme.corp',\n phone: '+1 (415) 555-8910',\n location: 'San Francisco, CA',\n avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=160&auto=format&fit=crop&q=80',\n initials: 'TM',\n reportsCount: 2,\n teamHeadcount: 22,\n managerId: 'emp-eng-vp',\n managerName: 'Marcus Vance',\n managerRole: 'VP of Engineering',\n startDate: 'January 2021',\n tenure: '3 yrs 8 mos',\n bio: 'Directs cloud infrastructure resilience, multi-region Kubernetes clusters, and automated zero-downtime rollouts.',\n skills: ['AWS', 'Terraform', 'Kubernetes', 'CI/CD', 'Observability'],\n status: 'active',\n children: [\n {\n id: 'emp-eng-ic-5',\n name: 'Kiran Rao',\n role: 'Senior SRE Engineer',\n department: 'Engineering',\n email: 'kiran.rao@acme.corp',\n phone: '+1 (415) 555-8933',\n location: 'San Francisco, CA',\n avatar: 'https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=160&auto=format&fit=crop&q=80',\n initials: 'KR',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-eng-lead-3',\n managerName: 'Tariq Mansour',\n managerRole: 'DevOps & SRE Lead',\n startDate: 'August 2022',\n tenure: '2 yrs 1 mo',\n bio: 'Maintains Prometheus/Grafana telemetry stacks, SLO/SLI tracking dashboards, and disaster drills.',\n skills: ['Prometheus', 'Grafana', 'OpenTelemetry', 'Chaos Engineering'],\n status: 'active',\n },\n {\n id: 'emp-eng-ic-6',\n name: 'Elena Dubois',\n role: 'Cloud Security Specialist',\n department: 'Engineering',\n email: 'elena.dubois@acme.corp',\n phone: '+33 1 42 68 55 00',\n location: 'Paris, France',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=160&auto=format&fit=crop&q=80',\n initials: 'ED',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-eng-lead-3',\n managerName: 'Tariq Mansour',\n managerRole: 'DevOps & SRE Lead',\n startDate: 'March 2023',\n tenure: '1 yr 6 mos',\n bio: 'Owns zero-trust cloud network topology, HashiCorp Vault key rotation, and automated CVE vulnerability audits.',\n skills: ['Vault', 'OIDC', 'IAM Hardening', 'SOC 2 Type II'],\n status: 'active',\n },\n ],\n },\n ],\n },\n {\n id: 'emp-prod-vp',\n name: 'Elena Rostova',\n role: 'VP of Product & Design',\n department: 'Product',\n email: 'elena.rostova@acme.corp',\n phone: '+44 20 7946 0912',\n location: 'London, UK',\n avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=160&auto=format&fit=crop&q=80',\n initials: 'ER',\n reportsCount: 2,\n teamHeadcount: 40,\n managerId: 'emp-ceo',\n managerName: 'Sarah Jenkins',\n managerRole: 'Chief Executive Officer',\n startDate: 'June 2020',\n tenure: '4 yrs 3 mos',\n bio: 'Guides end-to-end product vision, quarterly roadmap discovery cycles, and customer experience excellence across enterprise tools.',\n skills: ['Product Strategy', 'Design Leadership', 'User Research', 'PLG', 'Enterprise UX'],\n status: 'active',\n children: [\n {\n id: 'emp-prod-lead-1',\n name: 'Maya Patel',\n role: 'Head of Product Design',\n department: 'Design',\n email: 'maya.patel@acme.corp',\n phone: '+44 20 7946 0988',\n location: 'London, UK',\n avatar: 'https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?w=160&auto=format&fit=crop&q=80',\n initials: 'MP',\n reportsCount: 2,\n teamHeadcount: 18,\n managerId: 'emp-prod-vp',\n managerName: 'Elena Rostova',\n managerRole: 'VP of Product & Design',\n startDate: 'February 2021',\n tenure: '3 yrs 7 mos',\n bio: 'Leads our 18-member UI/UX and design research studio, creating intuitive interfaces for data-intensive enterprise users.',\n skills: ['Figma', 'UX Research', 'Design Systems', 'Design Operations'],\n status: 'active',\n children: [\n {\n id: 'emp-des-ic-1',\n name: 'Aria Thorne',\n role: 'Lead UX Researcher',\n department: 'Design',\n email: 'aria.thorne@acme.corp',\n phone: '+1 (415) 321-7789',\n location: 'San Francisco, CA',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=160&auto=format&fit=crop&q=80',\n initials: 'AT',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-prod-lead-1',\n managerName: 'Maya Patel',\n managerRole: 'Head of Product Design',\n startDate: 'July 2022',\n tenure: '2 yrs 2 mos',\n bio: 'Conducts qualitative enterprise customer interview loops, card sorting, and workflow pain-point mapping.',\n skills: ['Qualitative Analysis', 'Usability Testing', 'Personas', 'Journey Mapping'],\n status: 'active',\n },\n {\n id: 'emp-des-ic-2',\n name: 'Lucas Silva',\n role: 'Senior Interaction Designer',\n department: 'Design',\n email: 'lucas.silva@acme.corp',\n phone: '+351 21 098 7654',\n location: 'Lisbon, Portugal',\n avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=160&auto=format&fit=crop&q=80',\n initials: 'LS',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-prod-lead-1',\n managerName: 'Maya Patel',\n managerRole: 'Head of Product Design',\n startDate: 'November 2022',\n tenure: '1 yr 10 mos',\n bio: 'Architects micro-interactions, spring animation specs, and tactile feedback patterns across web and desktop.',\n skills: ['Framer', 'Prototyping', 'Micro-interactions', 'Token Systems'],\n status: 'active',\n },\n ],\n },\n {\n id: 'emp-prod-lead-2',\n name: 'Liam Tanaka',\n role: 'Principal Product Manager',\n department: 'Product',\n email: 'liam.tanaka@acme.corp',\n phone: '+81 3 5555 0142',\n location: 'Tokyo, Japan',\n avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=160&auto=format&fit=crop&q=80',\n initials: 'LT',\n reportsCount: 2,\n teamHeadcount: 22,\n managerId: 'emp-prod-vp',\n managerName: 'Elena Rostova',\n managerRole: 'VP of Product & Design',\n startDate: 'August 2021',\n tenure: '3 yrs 1 mo',\n bio: 'Spearheads core enterprise workflow automation, AI copilots, and monetization experiments across global markets.',\n skills: ['Product Roadmapping', 'AI Integration', 'Data Analytics', 'Enterprise Growth'],\n status: 'active',\n children: [\n {\n id: 'emp-prod-ic-1',\n name: 'Devon Vance',\n role: 'Senior Technical PM',\n department: 'Product',\n email: 'devon.vance@acme.corp',\n phone: '+1 (212) 745-3390',\n location: 'New York, NY',\n avatar: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=160&auto=format&fit=crop&q=80',\n initials: 'DV',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-prod-lead-2',\n managerName: 'Liam Tanaka',\n managerRole: 'Principal Product Manager',\n startDate: 'April 2023',\n tenure: '1 yr 5 mos',\n bio: 'Defines developer API contracts, webhook architectures, and 3rd party integration partner specifications.',\n skills: ['API Specs', 'OpenAPI', 'Webhooks', 'Partner Integrations'],\n status: 'active',\n },\n {\n id: 'emp-prod-ic-2',\n name: 'Sarah Lin',\n role: 'Product Analytics Lead',\n department: 'Product',\n email: 'sarah.lin@acme.corp',\n phone: '+81 3 5555 0199',\n location: 'Tokyo, Japan',\n avatar: 'https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=160&auto=format&fit=crop&q=80',\n initials: 'SL',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-prod-lead-2',\n managerName: 'Liam Tanaka',\n managerRole: 'Principal Product Manager',\n startDate: 'January 2023',\n tenure: '1 yr 8 mos',\n bio: 'Models customer retention cohorts, feature usage drop-off rates, and self-service conversion funnels.',\n skills: ['SQL', 'Mixpanel', 'Cohort Retention', 'A/B Testing'],\n status: 'active',\n },\n ],\n },\n ],\n },\n {\n id: 'emp-ops-vp',\n name: 'David Chen',\n role: 'VP of Operations & Finance',\n department: 'Operations',\n email: 'david.chen@acme.corp',\n phone: '+65 6789 0123',\n location: 'Singapore',\n avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=160&auto=format&fit=crop&q=80',\n initials: 'DC',\n reportsCount: 2,\n teamHeadcount: 44,\n managerId: 'emp-ceo',\n managerName: 'Sarah Jenkins',\n managerRole: 'Chief Executive Officer',\n startDate: 'August 2021',\n tenure: '3 yrs 1 mo',\n bio: 'Manages worldwide financial planning, global entity setup, real estate facilities, and international compliance operations.',\n skills: ['Financial Modeling', 'Corporate Finance', 'Global Compliance', 'Treasury', 'Operations'],\n status: 'active',\n children: [\n {\n id: 'emp-ops-lead-1',\n name: 'Chloe Dupont',\n role: 'Director of Finance',\n department: 'Operations',\n email: 'chloe.dupont@acme.corp',\n phone: '+33 1 42 68 90 12',\n location: 'Paris, France',\n avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=160&auto=format&fit=crop&q=80',\n initials: 'CD',\n reportsCount: 2,\n teamHeadcount: 20,\n managerId: 'emp-ops-vp',\n managerName: 'David Chen',\n managerRole: 'VP of Operations & Finance',\n startDate: 'March 2022',\n tenure: '2 yrs 6 mos',\n bio: 'Leads FP&A, annual budgeting models, GAAP audits, and international cross-border tax compliance.',\n skills: ['FP&A', 'GAAP Audits', 'Treasury Management', 'Tax Modeling'],\n status: 'active',\n children: [\n {\n id: 'emp-ops-ic-1',\n name: 'Arthur Leclerc',\n role: 'Senior Financial Analyst',\n department: 'Operations',\n email: 'arthur.leclerc@acme.corp',\n phone: '+33 1 42 68 90 33',\n location: 'Paris, France',\n avatar: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=160&auto=format&fit=crop&q=80',\n initials: 'AL',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-ops-lead-1',\n managerName: 'Chloe Dupont',\n managerRole: 'Director of Finance',\n startDate: 'November 2022',\n tenure: '1 yr 10 mos',\n bio: 'Analyzes recurring SaaS revenue trends, customer lifetime values, and department OPEX burn rates.',\n skills: ['Financial Forecasting', 'Excel Modeling', 'ARR Accounting'],\n status: 'active',\n },\n {\n id: 'emp-ops-ic-2',\n name: 'Zoe Martinez',\n role: 'Global Payroll & Benefits Lead',\n department: 'Operations',\n email: 'zoe.martinez@acme.corp',\n phone: '+34 91 555 0177',\n location: 'Madrid, Spain',\n avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=160&auto=format&fit=crop&q=80',\n initials: 'ZM',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-ops-lead-1',\n managerName: 'Chloe Dupont',\n managerRole: 'Director of Finance',\n startDate: 'June 2023',\n tenure: '1 yr 3 mos',\n bio: 'Oversees payroll runs across 12 countries, international equity plans, and local pension schemes.',\n skills: ['Global Payroll', 'Equity Schemes', 'Statutory Benefits'],\n status: 'active',\n },\n ],\n },\n {\n id: 'emp-ops-lead-2',\n name: 'James Wilson',\n role: 'Director of Global Operations',\n department: 'Operations',\n email: 'james.wilson@acme.corp',\n phone: '+1 (212) 745-8812',\n location: 'New York, NY',\n avatar: 'https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=160&auto=format&fit=crop&q=80',\n initials: 'JW',\n reportsCount: 2,\n teamHeadcount: 24,\n managerId: 'emp-ops-vp',\n managerName: 'David Chen',\n managerRole: 'VP of Operations & Finance',\n startDate: 'May 2022',\n tenure: '2 yrs 4 mos',\n bio: 'Oversees global facilities, vendor procurement relationships, workplace experience, and corporate IT hardware fleets.',\n skills: ['Vendor Negotiations', 'Facilities Management', 'Asset Tracking', 'Workplace Ops'],\n status: 'active',\n children: [\n {\n id: 'emp-ops-ic-3',\n name: 'Rachel Green',\n role: 'Workplace Experience Manager',\n department: 'Operations',\n email: 'rachel.green@acme.corp',\n phone: '+1 (212) 745-8833',\n location: 'New York, NY',\n avatar: 'https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?w=160&auto=format&fit=crop&q=80',\n initials: 'RG',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-ops-lead-2',\n managerName: 'James Wilson',\n managerRole: 'Director of Global Operations',\n startDate: 'January 2023',\n tenure: '1 yr 8 mos',\n bio: 'Coordinates global office events, collaborative space design, catering vendors, and team onsites.',\n skills: ['Event Planning', 'Space Management', 'Culture Initiatives'],\n status: 'active',\n },\n {\n id: 'emp-ops-ic-4',\n name: 'Vikram Seth',\n role: 'IT Systems & Security Lead',\n department: 'Operations',\n email: 'vikram.seth@acme.corp',\n phone: '+65 6789 0188',\n location: 'Singapore',\n avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=160&auto=format&fit=crop&q=80',\n initials: 'VS',\n reportsCount: 0,\n teamHeadcount: 1,\n managerId: 'emp-ops-lead-2',\n managerName: 'James Wilson',\n managerRole: 'Director of Global Operations',\n startDate: 'October 2022',\n tenure: '1 yr 11 mos',\n bio: 'Manages enterprise MDM configurations, Okta SSO provisioning, and hardware lifecycle deployment.',\n skills: ['Okta SSO', 'Jamf MDM', 'Endpoint Security', 'Hardware Logistics'],\n status: 'active',\n },\n ],\n },\n ],\n },\n ],\n}\n", "type": "registry:block", "target": "~/components/blocks/org-chart-data.ts" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/separator.json" ], "description": "Interactive organizational hierarchy tree with manager reporting lines, team counts, multi-level expandable branches, department filter pills, employee search, and an employee profile quick info drawer.", "categories": [ "hr", "app" ] }