Reference

Components

Reusable UI primitives are located under src/components/ui/. They use the existing Radix UI and Tailwind conventions.

Component	Related file	Use
Buttons, alerts, badges	`button.tsx`, `alert.tsx`, `badge.tsx`	Actions and status messaging.
Cards, avatars, progress	`card.tsx`, `avatar.tsx`, `progress.tsx`	Content, identities, and status.
Dropdowns, dialogs, drawers	`dropdown-menu.tsx`, `dialog.tsx`, `drawer.tsx`	Context actions and layered flows.
Tabs, accordion, tooltip	`tabs.tsx`, `accordion.tsx`, `tooltip.tsx`	Organize information.
Pagination, breadcrumbs, table	`pagination.tsx`, `breadcrumb.tsx`, `table.tsx`	Navigation and tabular content.
Forms and controls	`form.tsx`, `input.tsx`, `select.tsx`	Accessible forms.
Toasts	`sonner.tsx`	Transient feedback.

Example pattern

import { Button } from "@/components/ui/button";

export function SaveAction() {
  return <Button>Save changes</Button>;
}

ChartsUse src/components/charts/ApexChart.tsx with src/lib/chart-config.ts.

Forms and state

New workspaces use React state and browser form validation, with additional checks for duplicate email, date ranges, overlapping requests, numeric limits, and duplicate appointments. Dedicated pages add review notes, activity logs, transfers, and undo where implemented. Do not treat UI state as authoritative server validation.

Connect a backend

Replace fixed arrays and component state with authenticated API reads and writes.
Validate permissions, record identity, dates, and conflicts on the server.
Define shared domain state when pages must reflect each other’s updates.
Add loading, failure, retry, empty, and concurrent-edit behavior.
Implement payments, dispatch, messages, AI inference, or file processing only through explicit service integrations.

Exports

Current CSV, JSON, and transcript exports create browser downloads. Validate and harden exported fields for your production data, especially values beginning with spreadsheet formula characters.

Dedicated workspace components

HospitalPages, HrmPages, and SchoolPages dispatch enhanced views to DoctorsPage, WardsPage, EmployeesPage, LeaveRequestsPage, and AttendancePage. AI Analytics uses dedicated insight, conversation, prediction, and model settings components. Reuse existing UI primitives for consistent dialogs, filtering, empty states, and accessible controls.