Employee Hierarchy Visualization Application

A React + TypeScript application that visualizes a company's organizational structure. Users can log in, view a hierarchical org chart (CEO → Managers → Employees), search and focus on employees, and toggle light/dark themes. UI combines MUI components with TailwindCSS layout utilities.

How to Run

1. Install dependencies

   npm install

2. Start the development server

   npm start

   • App runs at http://localhost:3000
   • Public mock APIs are served from public/data/*

Demo Credentials

Use any of the following credentials on the login page:

• admin / admin123
• johndoe / password123
• janedoe / password123

Features Implemented

• Authentication (mock)

  • Login/logout with dummy users (public/data/users.json)
  • Session persists via localStorage
  • Protected routes block access until authenticated

• Employee Hierarchy Chart

  • Loads employees from public/data/employees.json
  • Builds a tree (CEO → Managers → Employees)
  • Expand/collapse via MUI X TreeView
  • Employee nodes rendered as memoized MUI Cards

• Search and Focus

  • Search by name with live feedback
  • Auto-expands nodes during search
  • Uses refs to scroll/focus to the first match

• Theme Management

  • Light/Dark theme toggle stored in global context
  • Persists to localStorage
  • Integrated with MUI theme + CssBaseline

• Styling

  • TailwindCSS for layout (containers, spacing, flex, responsiveness)
  • MUI for components (AppBar, Card, TextField, Snackbar, Progress, TreeView)

Where Each Skill Is Demonstrated

• React functional components + hooks

  • useState, useEffect: src/pages/Dashboard.tsx, src/pages/Login.tsx, src/components/EmployeeHierarchy.tsx
  • useContext: src/hooks/useAuth.ts, src/hooks/useTheme.ts, providers in src/context/*
  • useRef: Node focus/scroll in src/components/EmployeeHierarchy.tsx

• Custom hooks

  • useAuth: src/hooks/useAuth.ts (wraps AuthContext)
  • useTheme: src/hooks/useTheme.ts (wraps ThemeContext)

• Context (global state)

  • Auth: src/context/AuthContext.tsx (login/logout, persistence, exposure to app)
  • Theme: src/context/ThemeContext.tsx (toggle/reset, MUI theme integration)

• Async operations (simulated APIs)

  • Login mock: src/api/auth.ts fetches public/data/users.json
  • Employees load: src/pages/Dashboard.tsx fetches public/data/employees.json

• Memoization (pure components)

  • EmployeeCard: React.memo to reduce re-renders (src/components/EmployeeCard.tsx)

• Hierarchy building logic

  • buildEmployeeHierarchy: src/utils/employeeUtils.ts

• Protected routes

  • ProtectedRoute: src/components/ProtectedRoute.tsx
  • Route wiring: src/App.tsx

• TailwindCSS + MUI usage

  • Tailwind setup: tailwind.config.js, postcss.config.js, directives in src/index.css
  • Tailwind classes applied in: src/pages/Login.tsx, src/pages/Dashboard.tsx, src/components/EmployeeHierarchy.tsx
  • MUI components across app (Header/AppBar, Card, TreeView, etc.)

Project Structure (Key Files)

• public/data/users.json — mock users for login
• public/data/employees.json — mock employees for org tree
• src/context/AuthContext.tsx — auth state and actions
• src/context/ThemeContext.tsx — theme state and MUI theme
• src/hooks/useAuth.ts, src/hooks/useTheme.ts — custom hooks
• src/pages/Login.tsx — login page
• src/pages/Dashboard.tsx — org chart page
• src/components/EmployeeHierarchy.tsx — tree rendering + focus
• src/components/EmployeeCard.tsx — memoized employee card
• src/components/ProtectedRoute.tsx — route guard
• src/utils/employeeUtils.ts — hierarchy builder, search helper
• src/App.tsx — routing and providers