[V0_FILE]typescriptreact:file="org-chart.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronDown, ChevronUp, Users } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { cn } from "@/lib/utils" interface Person { id: string name: string role: string department: string email: string image?: string children?: Person[] } interface OrgNodeProps { person: Person level: number isLast: boolean } const OrgNode = ({ person, level, isLast }: OrgNodeProps) => { const [expanded, setExpanded] = useState(true) const hasChildren = person.children && person.children.length > 0 return (

0 && "pl-6 relative")}> {level > 0 && ( <>

)}

{person.name .split(" ") .map((part) => part[0]) .join("")}

{person.name}

{hasChildren && ( )}

{person.role}

{person.email}

{person.department} {hasChildren && ( • {person.children.length} direct report{person.children.length !== 1 ? "s" : ""} )}

{hasChildren && expanded && (

{person.children.map((child, index) => ( ))}

)}

) } export default function OrgChart() { // Sample data with a deep org structure const orgData: Person = { id: "1", name: "Eleanor Rosevelt", role: "Chief Executive Officer", department: "Executive", email: "eleanor.rosevelt@company.com", image: "/placeholder.svg?height=40&width=40", children: [ { id: "2", name: "Marcus Chen", role: "Chief Technology Officer", department: "Technology", email: "marcus.chen@company.com", image: "/placeholder.svg?height=40&width=40", children: [ { id: "6", name: "Sarah Johnson", role: "VP of Engineering", department: "Engineering", email: "sarah.johnson@company.com", image: "/placeholder.svg?height=40&width=40", children: [ { id: "10", name: "Michael Green", role: "Engineering Manager", department: "Engineering", email: "michael.green@company.com", image: "/placeholder.svg?height=40&width=40", children: [ { id: "15", name: "Aisha Patel", role: "Senior Developer", department: "Engineering", email: "aisha.patel@company.com", image: "/placeholder.svg?height=40&width=40", children: [ { id: "20", name: "Ryan Cooper", role: "Junior Developer", department: "Engineering", email: "ryan.cooper@company.com", image: "/placeholder.svg?height=40&width=40", }, { id: "21", name: "Emma Mitchell", role: "Junior Developer", department: "Engineering", email: "emma.mitchell@company.com", image: "/placeholder.svg?height=40&width=40", }, ], }, { id: "16", name: "David Kim", role: "Senior Developer", department: "Engineering", email: "david.kim@company.com", image: "/placeholder.svg?height=40&width=40", }, ], }, { id: "11", name: "Jessica Taylor", role: "Engineering Manager", department: "Engineering", email: "jessica.taylor@company.com", image: "/placeholder.svg?height=40&width=40", children: [ { id: "17", name: "Carlos Rodriguez", role: "Senior QA Engineer", department: "Quality Assurance", email: "carlos.rodriguez@company.com", image: "/placeholder.svg?height=40&width=40", children: [ { id: "22", name: "Linda Hayes", role: "QA Engineer", department: "Quality Assurance", email: "linda.hayes@company.com", image: "/placeholder.svg?height=40&width=40", }, ], }, ], }, ], }, { id: "7", name: "John Adams", role: "VP of Infrastructure", department: "Infrastructure", email: "john.adams@company.com", image: "/placeholder.svg?height=40&width=40", children: [ { id: "12", name: "Patricia Morris", role: "Cloud Infrastructure Lead", department: "Infrastructure", email: "patricia.morris@company.com", image: "/placeholder.svg?height=40&width=40", children: [ { id: "18", name: "Thomas Wilson", role: "DevOps Engineer", department: "Infrastructure", email: "thomas.wilson@company.com", image: "/placeholder.svg?height=40&width=40", }, ], }, ], }, ], }, { id: "3", name: "Sophia Williams", role: "Chief Financial Officer", department: "Finance", email: "sophia.williams@company.com", image: "/placeholder.svg?height=40&width=40", children: [ { id: "8", name: "Robert Brown", role: "Finance Director", department: "Finance", email: "robert.brown@company.com", image: "/placeholder.svg?height=40&width=40", children: [ { id: "13", name: "Jennifer Lopez", role: "Senior Accountant", department: "Finance", email: "jennifer.lopez@company.com", image: "/placeholder.svg?height=40&width=40", }, ], }, ], }, { id: "4", name: "James Wilson", role: "Chief Marketing Officer", department: "Marketing", email: "james.wilson@company.com", image: "/placeholder.svg?height=40&width=40", children: [ { id: "9", name: "Elizabeth Clark", role: "Marketing Director", department: "Marketing", email: "elizabeth.clark@company.com", image: "/placeholder.svg?height=40&width=40", children: [ { id: "14", name: "Daniel Lee", role: "Marketing Manager", department: "Marketing", email: "daniel.lee@company.com", image: "/placeholder.svg?height=40&width=40", children: [ { id: "19", name: "Olivia Martinez", role: "Marketing Specialist", department: "Marketing", email: "olivia.martinez@company.com", image: "/placeholder.svg?height=40&width=40", }, ], }, ], }, ], }, { id: "5", name: "Alexandra Peterson", role: "Chief People Officer", department: "Human Resources", email: "alexandra.peterson@company.com", image: "/placeholder.svg?height=40&width=40", children: [ { id: "23", name: "William Thompson", role: "HR Director", department: "Human Resources", email: "william.thompson@company.com", image: "/placeholder.svg?height=40&width=40", children: [ { id: "24", name: "Mia Jackson", role: "HR Manager", department: "Human Resources", email: "mia.jackson@company.com", image: "/placeholder.svg?height=40&width=40", }, ], }, ], }, ], } const [expanded, setExpanded] = useState(true) return (

Company Organization Chart

) } [V0_FILE]typescriptreact:file="org-tree-canvas.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useRef, useState, useEffect } from "react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Card } from "@/components/ui/card" import { ZoomIn, ZoomOut, Move } from "lucide-react" import { Button } from "@/components/ui/button" interface Person { id: string name: string role: string department: string image?: string children?: Person[] } interface NodePosition { x: number y: number width: number height: number } interface NodeMap { [key: string]: NodePosition } export default function OrgTreeCanvas() { const containerRef = useRef(null) const canvasRef = useRef(null) const [scale, setScale] = useState(1) const [positions, setPositions] = useState({}) const [isDragging, setIsDragging] = useState(false) const [startPos, setStartPos] = useState({ x: 0, y: 0 }) const [translate, setTranslate] = useState({ x: 0, y: 0 }) const [canvasSize, setCanvasSize] = useState({ width: 3000, height: 2000 }) // Sample organization data const orgData: Person = { id: "1", name: "Eleanor Rosevelt", role: "Chief Executive Officer", department: "Executive", image: "/placeholder.svg?height=40&width=40", children: [ { id: "2", name: "Marcus Chen", role: "Chief Technology Officer", department: "Technology", image: "/placeholder.svg?height=40&width=40", children: [ { id: "6", name: "Sarah Johnson", role: "VP of Engineering", department: "Engineering", image: "/placeholder.svg?height=40&width=40", children: [ { id: "10", name: "Michael Green", role: "Engineering Manager", department: "Engineering", image: "/placeholder.svg?height=40&width=40", }, { id: "11", name: "Jessica Taylor", role: "Engineering Manager", department: "Engineering", image: "/placeholder.svg?height=40&width=40", }, ], }, { id: "7", name: "John Adams", role: "VP of Infrastructure", department: "Infrastructure", image: "/placeholder.svg?height=40&width=40", }, ], }, { id: "3", name: "Sophia Williams", role: "Chief Financial Officer", department: "Finance", image: "/placeholder.svg?height=40&width=40", children: [ { id: "8", name: "Robert Brown", role: "Finance Director", department: "Finance", image: "/placeholder.svg?height=40&width=40", }, ], }, { id: "4", name: "James Wilson", role: "Chief Marketing Officer", department: "Marketing", image: "/placeholder.svg?height=40&width=40", children: [ { id: "9", name: "Elizabeth Clark", role: "Marketing Director", department: "Marketing", image: "/placeholder.svg?height=40&width=40", }, ], }, { id: "5", name: "Alexandra Peterson", role: "Chief People Officer", department: "Human Resources", image: "/placeholder.svg?height=40&width=40", }, ], } // Calculate tree layout useEffect(() => { const calculateTreeLayout = () => { const nodeWidth = 220 const nodeHeight = 100 const horizontalSpacing = 60 const verticalSpacing = 100 const positions: NodeMap = {} // Calculate tree depth and width const getTreeDimensions = (node: Person) => { if (!node.children || node.children.length === 0) { return { depth: 0, width: 1 } } let width = 0 let maxDepth = 0 for (const child of node.children) { const dimensions = getTreeDimensions(child) width += dimensions.width maxDepth = Math.max(maxDepth, dimensions.depth) } return { depth: maxDepth + 1, width } } // Position nodes const positionNode = (node: Person, depth: number, horizontalOffset: number, widthUnits: number) => { const x = horizontalOffset + (widthUnits * (nodeWidth + horizontalSpacing)) / 2 - nodeWidth / 2 const y = depth * (nodeHeight + verticalSpacing) positions[node.id] = { x, y, width: nodeWidth, height: nodeHeight } if (!node.children || node.children.length === 0) { return widthUnits } let currentOffset = horizontalOffset for (const child of node.children) { const childDimensions = getTreeDimensions(child) const childWidthUnits = childDimensions.width || 1 positionNode(child, depth + 1, currentOffset, childWidthUnits) currentOffset += childWidthUnits * (nodeWidth + horizontalSpacing) } return widthUnits } const dimensions = getTreeDimensions(orgData) positionNode(orgData, 0, 0, dimensions.width || 1) // Calculate canvas size based on node positions let maxX = 0 let maxY = 0 Object.values(positions).forEach((pos) => { maxX = Math.max(maxX, pos.x + pos.width + horizontalSpacing) maxY = Math.max(maxY, pos.y + pos.height + verticalSpacing) }) setCanvasSize({ width: maxX, height: maxY }) setPositions(positions) } calculateTreeLayout() }, []) // Handle mouse events for panning const handleMouseDown = (e: React.MouseEvent) => { if (e.button !== 0) return // Only left mouse button setIsDragging(true) setStartPos({ x: e.clientX, y: e.clientY }) } const handleMouseMove = (e: React.MouseEvent) => { if (!isDragging) return const dx = e.clientX - startPos.x const dy = e.clientY - startPos.y setTranslate((prev) => ({ x: prev.x + dx, y: prev.y + dy })) setStartPos({ x: e.clientX, y: e.clientY }) } const handleMouseUp = () => { setIsDragging(false) } // Zoom controls const handleZoomIn = () => { setScale((prev) => Math.min(prev + 0.1, 2)) } const handleZoomOut = () => { setScale((prev) => Math.max(prev - 0.1, 0.5)) } // Reset view const handleResetView = () => { setScale(1) setTranslate({ x: 0, y: 0 }) } // Render connections between nodes const renderConnections = () => { const connections: React.ReactNode[] = [] const addConnection = (parent: Person, child: Person) => { const parentPos = positions[parent.id] const childPos = positions[child.id] if (!parentPos || !childPos) return const startX = parentPos.x + parentPos.width / 2 const startY = parentPos.y + parentPos.height const endX = childPos.x + childPos.width / 2 const endY = childPos.y // Draw vertical line from parent connections.push( , ) // Draw horizontal line connections.push( , ) // Draw vertical line to child connections.push( , ) } const traverseTree = (node: Person) => { if (node.children) { node.children.forEach((child) => { addConnection(node, child) traverseTree(child) }) } } traverseTree(orgData) return connections } // Render nodes const renderNodes = () => { const nodes: React.ReactNode[] = [] const traverseTree = (node: Person) => { const pos = positions[node.id] if (!pos) return nodes.push(

{node.name .split(" ") .map((part) => part[0]) .join("")}

{node.name}

{node.role}

{node.department}

, ) if (node.children) { node.children.forEach(traverseTree) } } traverseTree(orgData) return nodes } return (

{/* Canvas */}

{/* Grid background */}

{/* SVG for connections */} {/* Nodes */} {renderNodes()}

{/* Controls */}

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .bg-grid-pattern { background-size: 40px 40px; background-image: linear-gradient(to right, rgba(128, 128, 128, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(128, 128, 128, 0.1) 1px, transparent 1px); } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" import OrgTreeCanvas from "../org-tree-canvas" export default function Page() { return (

) }

About

About