1+import { useState } from 'react'
1012 employees: Employee[]
1315 export function EmployeeDirectory({ employees }: Props) {
16+ const [search, setSearch] = useState('')
17+ const [sortBy, setSortBy] = useState<'name' | 'joinedAt'>('name')
19+ const fuzzyMatch = (query: string, target: string): boolean => {
20+ const q = query.toLowerCase()
21+ const t = target.toLowerCase()
23+ for (let ti = 0; ti < t.length && qi < q.length; ti++) {
24+ if (t[ti] === q[qi]) qi++
26+ return qi === q.length
29+ const filtered = employees.filter((e) => fuzzyMatch(search, e.name + ' ' + e.email))
30+ const sorted = [...filtered].sort((a, b) => {
31+ if (sortBy === 'name') return a.name.localeCompare(b.name)
32+ return new Date(a.joinedAt).getTime() - new Date(b.joinedAt).getTime()
36+ total: employees.length,
37+ departments: [...new Set(employees.map((e) => e.department))].length,
41+ sum + (Date.now() - new Date(e.joinedAt).getTime()),
45+ (1000 * 60 * 60 * 24 * 365),
16- {employees.map((e) => (
18- {e.name} — {e.department}
52+ onChange={(e) => setSearch(e.target.value)}
53+ placeholder="Search..."
56+ Total: {stats.total} / Departments: {stats.departments} / Avg tenure:{' '}
57+ {stats.avgTenure.toFixed(1)} years
62+ {e.name} — {e.department}
