Internal Organisation Dashboard

An enterprise organization and team management interface that provides role-based visibility into operational structures, team hierarchies, and collaborative workflows. Built with Next.js 16 and dual AI backends (Google Gemini & DeepSeek), it enables administrators to manage departments, users, and organizational metadata while leveraging AI-powered insights for organizational optimization and team analytics.

Build StackNext.js 16, React 19, TypeScript, Tailwind CSS, React Query (TanStack Query 5), React Hook Form, Zod, Motion

Challenges

  • Rendering expandable org trees with lazy-loaded subtrees and role-based visibility without DOM bloat or re-render cascades.

  • Managing dual-model AI streaming inside a persistent drawer while preserving threads, form state, and focus across navigation.

  • Building permission matrices with nested access states without unclear validation or accidental permission escalation.

  • Displaying large user/team tables with badges, row actions, bulk controls, and keyboard-safe interactions at scale.

Solutions

  • Used a virtualized tree view with Radix collapsibles, TanStack Query subtree loading, Zustand expansion state, and layout-stable skeletons.

  • Built a Zustand-backed AI drawer with model-indexed history, auto-scroll, preserved prompts, model switching, and guarded close states.

  • Structured permissions with Radix checkbox groups, explicit parent-child logic, Zod validation, confirmation dialogs, and read-only previews.

  • Implemented virtualized tables with scoped row actions, accessible Radix dropdowns, select-all bulk states, ID truncation, and CLS-safe skeletons.