jolly-doctor

As a frontend developer, implement the LandingNavbar section for the Landing page. Build the responsive navigation bar using useState for mobileOpen and scrolled states, and useEffect for scroll event listener (passive, fires on window.scrollY > 8 to toggle ln-scrolled class) and body overflow lock when mobile menu is open. Render the ln-logo with inline SVG layers icon and 'jolly-doctor' text linking to /Landing. Map over navLinks array (Features, Use Cases, Pricing, Security with anchor hrefs) to render ln-nav-links. Include ln-actions with a theme toggle button that swaps between sun and moon inline SVGs based on isDark prop, and CTA buttons (sign in / get started). Implement hamburger menu button toggling mobileOpen for mobile drawer. Accept theme and onToggleTheme props. Apply LandingNavbar.css with ln-navbar, ln-scrolled, ln-inner, ln-logo, ln-logo-icon, ln-logo-text, ln-nav-links, ln-nav-link, ln-actions, ln-theme-toggle, ln-theme-icon class structure. Note: this Navbar is specific to the Landing page.

As a Backend Developer, implement the authentication and session management API endpoints using FastAPI and JWT. Include: POST /auth/login (email+password, returns access+refresh tokens), POST /auth/logout, POST /auth/refresh (rotate refresh token), POST /auth/register (new user/patient registration), POST /auth/password-reset-request, POST /auth/password-reset-confirm, GET /auth/me (current user profile), POST /auth/mfa/enable, POST /auth/mfa/verify, DELETE /auth/sessions/{id} (revoke session), GET /auth/sessions (list active sessions). Implement JWT with RS256, Redis-backed refresh token store, rate limiting on all public endpoints, and HIPAA-compliant audit logging on every auth event. Note: Frontend pages that depend on this API include Login, Register, Dashboard, Settings (AccountSecurity), Security (UserSessionTracking).

As a Data Engineer, design and implement the PostgreSQL database schema with Alembic migrations. Core tables: users (id, email, password_hash, role, status, mfa_secret, created_at), patients (id, user_id FK, demographics JSONB, insurance JSONB, emergency_contact JSONB), appointments (id, patient_id, provider_id, chair, scheduled_at CST, status, type, notes), treatment_plans (id, patient_id, phases JSONB, goals JSONB, status, created_by), clinical_notes (id, patient_id, provider_id, type, soap_fields JSONB, ai_generated bool, approved_by, approved_at), prescriptions (id, patient_id, prescriber_id, medication, dosage, status, audit_trail JSONB), inventory_items (id, sku, name, category, stock_qty, reorder_threshold, vendor_id), vendors (id, name, category, contact JSONB, rating, status), purchase_orders (id, vendor_id, items JSONB, status, placed_at), documents (id, patient_id, s3_key, name, type, category, size, version, shared_with JSONB), messages (id, thread_id, sender_id, content, sent_at), notifications (id, user_id, type, title, body, read, created_at), audit_logs (id, user_id, action, resource_type, resource_id, changes JSONB, ip, timestamp). Create seed data for dev environment.

As a DevOps Engineer, configure AWS S3 buckets for HIPAA-eligible file storage. Tasks: create a dedicated S3 bucket with server-side encryption (SSE-S3 or SSE-KMS), block all public access, enable versioning, configure lifecycle policies for archival (move to S3 Glacier after 90 days), set up presigned URL generation (15-minute expiry) for secure file upload/download, configure S3 bucket policy to restrict access to the FastAPI service IAM role only, enable S3 access logging to a separate audit bucket, configure CORS for the React SPA origin, set up AWS Macie for PHI detection in uploaded files. Document BAA requirements for AWS HIPAA workloads.

As a DevOps Engineer, configure a CI/CD pipeline using GitHub Actions. Implement the following workflows: (1) PR Checks workflow — runs on every pull request: Python linting (ruff), React linting (eslint), unit tests (pytest for backend, jest for frontend), type checking; (2) Integration Test workflow — builds docker-compose stack and runs API integration tests; (3) Staging Deploy workflow — triggered on merge to main: builds Docker images, pushes to ECR, updates k8s deployment with zero-downtime rolling update strategy; (4) Production Deploy workflow — triggered on release tag: runs security scan (Snyk/Trivy), integration tests, deploys to prod k8s cluster, sends deployment notification. Configure environment secrets: DATABASE_URL, REDIS_URL, JWT_SECRET, OPENAI_API_KEY, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY. Use environment-based configuration management (.env.staging, .env.production).

As a Frontend Developer, configure global state management for the React SPA. Implement: (1) Auth context (React Context + useReducer) storing current user, role, permissions, token expiry with auto-refresh logic; (2) Theme context managing dark/light theme with localStorage persistence and CSS variable injection matching the design system (Navy #1C2B4A, Coral #E8513A, etc.); (3) Notification context for real-time notification badge counts with Socket.io subscription; (4) React Query (TanStack Query) configuration for all API calls — configure queryClient with default staleTime (30s), retry (2), and error boundaries; (5) Axios instance configured with base URL, JWT bearer token injection from auth context, 401 interceptor for token refresh, and request/response logging; (6) React Router v6 setup with protected route wrappers enforcing RBAC per page. All pages and sections depend on this cross-cutting setup.

As a Frontend Developer, establish the global design system and CSS custom properties for the SPA. Tasks: (1) Create global CSS variables for all brand colors (--color-primary: #1C2B4A, --color-primary-light: #2E4A7A, --color-secondary: #4E7CC2, --color-accent: #E8513A, --color-highlight: #B8CFEE, --color-bg: #F3F6FB, --color-surface: #F3F6FB, --color-text: #FFFFFF, --color-text-muted: #FFECE8, --color-border: rgba(233,69,96,0.2)) with dark-mode overrides; (2) Base typography scale (Inter/system font stack, heading/body/caption sizes); (3) Shared component CSS: buttons (primary/secondary/outline/danger variants), form inputs, badges/chips, status dots, toast notifications, modal overlays, loading skeletons; (4) Framer-motion shared animation variants (fadeUp, slideIn, staggerContainer) exported from a single animations.js utility; (5) Shared lucide-react icon size/strokeWidth conventions; (6) Global scrollbar, focus ring, and accessibility baseline styles. This must be completed before all page section tasks.

Implement a dedicated NLU pipeline (separate from raw GPT-4 SOAP generation) that extracts structured entities from transcripts: POST /ai/nlu/extract returning symptoms, doctor observations, treatments, follow-ups as tagged spans with confidence scores. Include correlation hooks linking entities to imaging/video metadata.

Extend Clinical Notes API with immutable version storage per edit, diff computation between versions, and revert endpoint: GET /emr/notes/{id}/versions, POST /emr/notes/{id}/revert/{version_id}

As a frontend developer, implement the LandingHero section for the Landing page. Use framer-motion's useScroll and useTransform to create a two-layer parallax: lh-bg-layer translates Y by [0, -120] and lh-mid-layer by [0, -240] based on scrollYProgress from sectionRef. Use useInView with once:true and margin '-50px' for sectionRef (content animations) and '-80px' for mockupRef (bar chart animation). Implement staggerContainer and fadeUp framer-motion variants (staggerChildren 0.12, delayChildren 0.15; fadeUp: opacity 0→1, y 28→0, duration 0.6 cubic ease). Implement floatCardLeft (x -40→0, delay 0.8) and floatCardRight (x 40→0, delay 1.0) card entrance animations. Implement mockupReveal (opacity/y/scale, delay 0.4). Use useState barWidths initialized to [0,0,0], set to [78,62,91] after 400ms timeout when isMockupInView fires. Render lh-bg-grid, lh-bg-gradient-orb-1/2, four lh-float-shape elements, hero headline with gradient text, subheading, CTA buttons, trust badges, and a mockup UI card with animated progress bars. Apply LandingHero.css.

As a frontend developer, implement the LandingTrust section for the Landing page. Implement the custom useAnimatedCounter hook using requestAnimationFrame with cubic ease-out (1 - Math.pow(1-progress, 3)) over 1.8s duration, triggered by shouldAnimate flag and guarded by isNumeric. Build StatCard component that uses useAnimatedCounter to animate numeric stat values, formats output as prefix+counter+suffix, and animates via framer-motion (initial opacity 0 y:24, animate when isInView) with icon scaling from 0.6 to 1 at 0.15+index*0.12 delay. Define inline SVG icon components: IconBuilding, IconUptime, IconShield, IconUsers. Use useInView on the section ref to trigger all stat card animations simultaneously. Apply lt-stat-card, lt-stat-icon, lt-stat-value, lt-stat-label CSS classes from LandingTrust.css.

As a frontend developer, implement the LandingFeatures section for the Landing page. Define the features array with six entries: ai-documentation (pencil SVG), live-transcription (microphone SVG), treatment-planning (document SVG), inventory (box/package SVG), appointments (calendar SVG), and a sixth feature — each with id, title, description, and inline Icon arrow-function component. Use framer-motion motion.div for entrance animations on each feature card. Render a section header and a responsive grid of feature cards showing the SVG icon, title, and description text pulled from SRD content (e.g., 'Reduce charting time by up to 70%', 'Capture every word during patient consultations'). Apply LandingFeatures.css.

As a frontend developer, implement the LandingPersonas section for the Landing page. Define six inline SVG icon components: IconOwner (grid of four rects), IconDentist (figure with circle head), IconAssistant (document with lines), IconReceptionist (desk/monitor), IconInventory (3D box), IconPatient (person silhouette), plus IconChevronDown and IconArrowRight. Use useState for active persona selection. Use framer-motion AnimatePresence and LayoutGroup to animate persona panel transitions. Render a tab/card selector row with persona icons and labels; on selection, animate in the detail panel using AnimatePresence exit/enter (likely slide or fade). Detail panel shows persona title, description, key benefits list, and a CTA link. Apply LandingPersonas.css with full interactive tab switching behavior.

As a frontend developer, implement the LandingUseCases section for the Landing page. Define useCases array with four entries: Clinic Owner (Dr. Patel, 12-chair, multi-location, RBAC, links to /Dashboard), Dentist (Dr. Nguyen, AI SOAP notes, 60% doc time reduction, links to /AIAssistant), Receptionist (Maria, 80+ daily appointments, 40% wait time reduction, links to /Appointments), and Patient (James, orthodontic portal, HIPAA-compliant, links to /Portal). Define inline SVG icons: IconOwner (monitor), IconDentist (tooth), IconReceptionist (calendar grid), IconPatient (person). Use framer-motion motion.div for staggered card entrance animations. Render each use case as a card with role badge, icon, title, description, and a 'Learn more' link pointing to the respective internal route. Apply LandingUseCases.css.

As a frontend developer, implement the LandingBenefits section for the Landing page. Define six inline SVG icon components: IconOperations (gear/cog), IconPatientCare (heartbeat/waveform), IconAdmin (document with lines), IconInsights (bar chart ascending), IconCompliance (shield), IconScale (arrows expanding). Define benefits array with six entries: Streamlined Operations, Enhanced Patient Care, Reduced Administrative Burden, Data-Driven Insights, Built-In Compliance, and Scalable for Growth. Use useRef and framer-motion useInView to trigger staggered entrance animations on the benefits grid. Render section header and a responsive grid of benefit cards each showing the SVG icon, title, and description. Apply LandingBenefits.css.

As a frontend developer, implement the LandingSecurityCompliance section for the Landing page. Import both BadgeItem.css and LandingSecurityCompliance.css. Define complianceBadges array with six entries (HIPAA, SOC 2, ISO 27001, HITECH, GDPR, PCI DSS) each with label, detail tooltip text, and inline SVG icon. Define securityPoints array with entries like AES-256 Encryption. Use useState for hover/active badge state to show detail panels. Use framer-motion motion.div for badge entrance animations (staggered). Render a two-column layout: left side with the six compliance badge items (BadgeItem sub-component pattern with icon, label, and expandable detail), right side with security architecture points including encryption specs, MFA, RBAC, audit trails, and penetration testing callouts. Apply proper CSS classes from both imported stylesheets.

As a frontend developer, implement the LandingPricing section for the Landing page. Define tiers array with three objects: Starter (solo, $149/mo or $129/yr, 6 features), Professional (multi-chair, $349/mo or $299/yr, 8 features, popular:true), Enterprise (network, $699/mo or $599/yr, 9 features). Use useState for isAnnual toggle (monthly/annual billing switch) and selectedTier. Implement cardVariants with idle and selected states (scale 1.05, spring stiffness 300 damping 22 on selected). Implement priceVariants with AnimatePresence for price number swap animation (opacity/y enter/exit, duration 0.3). Implement featureContainerVariants with staggerChildren 0.06 and featureItemVariants (opacity 0→1, x -10→0). Render billing toggle switch, three pricing cards with popular badge on Professional, animated price display, staggered feature checklist with CheckIcon SVG, and CTA button per tier. Apply LandingPricing.css.

As a frontend developer, implement the LandingFAQ section for the Landing page. Define faqData array with seven FAQ entries covering: what jolly-doctor is, AI clinical documentation (speech-to-text SOAP notes, 60% time saving), HIPAA/HITECH compliance (AES-256, TLS 1.3, RBAC, MFA, audit trails, pen testing), integrations (DICOM, e-prescribing, insurance clearinghouses, REST API/webhooks), pricing tiers (Starter ≤3 users, Professional ≤15, Enterprise unlimited), onboarding timeline (7-14 days), and patient portal access. Use useState for tracking which FAQ item is open (accordion behavior). Use framer-motion AnimatePresence to animate answer panels open/close (height expand with opacity). Render each FAQ as an accordion item with question row (chevron icon rotating on open) and animated answer panel. Apply LandingFAQ.css.

As a frontend developer, implement the LandingFinalCTA section for the Landing page. Implement generateParticles() producing 8 particles with random angle offset (±0.2 rad), distance 40-90px, size 4-8px, and delay 0-0.08s. Build ParticleBurst component using AnimatePresence to mount/unmount particles; each particle animates from x:0 y:0 scale:1 opacity:1 to computed x/y scale:0.3 opacity:0 with easeOut over 0.55s. In LandingFinalCTA use useState for burstActive and useRef for burstTimeout. handlePrimaryHover resets burstActive, clears timeout, fires rAF to set burstActive true, then sets a 600ms timeout to reset. Render decorative lfcta-bg-layer (three orbs) and lfcta-mid-layer (four diagonal lines) with CSS translateY scroll parallax via --scroll custom property. Render motion.h2 headline (whileInView opacity/y, once, margin '-60px'), subheading, and primary CTA button with ParticleBurst overlay on hover. Apply LandingFinalCTA.css.

As a frontend developer, implement the LandingFooter section for the Landing page. Define linkColumns array with four column objects: Product (Dashboard /Dashboard, EMR /EMR, Chairside /Chairside, AI Assistant /AIAssistant, Treatment Plan /TreatmentPlan), Company (About/Careers/Blog/Press all linking to /Landing), Security (Compliance /Compliance, Security /Security, Privacy /PrivacyPage, Terms /TermsPage), Support (Help Center/Documentation /Documents, Contact/Status both /Landing). Define three inline SVG social icon components: IconLinkedIn (path+rect+circle), IconTwitter (bird path), IconGitHub (octocat path). Define IconTooth as a branded SVG with a 32x32 rounded rect (#4E7CC2 fill) and white tooth path. Render decorative laft-bg-layer parallax div, logo block with IconTooth and brand name, four-column link grid, social icon row, and bottom bar with copyright using new Date().getFullYear() and legal links. Apply LandingFooter.css with laft-root, laft-bg-layer class structure.

As a frontend developer, implement the LandingNavbar section for the Register page. This reuses the LandingNavbar component (may already exist from the Landing page task eb47b9ad-a66e-433e-8b3e-c8ee343e9436). The component uses useState for `scrolled` and `dark` state, a useEffect with a passive scroll listener that sets `scrolled` when window.scrollY > 8, and a dark/light theme toggle button using lucide-react Sun/Moon icons with an lnav-icon-stack overlay. The brand link renders a Stethoscope icon with DentOS wordmark and 'Clinic Operating System' tagline. Nav actions include a theme toggle button (aria-pressed), a Sign in anchor to /Login with LogIn icon, and a 'Get started' CTA anchor to /Register with ArrowRight icon. CSS classes lnav-root, lnav-scrolled, lnav-dark are conditionally applied. Import LandingNavbar.css.

As a frontend developer, implement the Navbar section for the Login page. This component uses useState hooks for isDark (theme toggle) and menuOpen (mobile drawer) state. It renders a nav-root with nav-inner containing: (1) a nav-brand anchor linking to /Dashboard with Activity icon from lucide-react and NovaDent OS branding text; (2) nav-links mapping PRIMARY_LINKS array (Dashboard, Appointments, Patients, EMR, Analytics, Inventory) as nav-link anchors; (3) nav-actions with a theme toggle button switching between Sun/Moon icons, a nav-cta 'Sign In' anchor to /Login, and a nav-burger button toggling Menu/X icons with aria-expanded; (4) a nav-drawer div with conditional 'open' class mapping DRAWER_LINKS (14 items including Schedule, Records, TreatmentPlan, Prescriptions, Reports, Compliance, Messaging, Settings). Note: this Navbar component may already exist from the Landing or Register pages — reuse if available, import from shared components. Apply Navbar.css styles.

As a Backend Developer, implement user management and RBAC endpoints using FastAPI. Include: GET /users (paginated, filterable by role/status), POST /users (create user), GET /users/{id}, PUT /users/{id}, DELETE /users/{id}, POST /users/bulk (bulk activate/deactivate/export), GET /roles, POST /roles, PUT /roles/{id}, GET /roles/{id}/permissions, PUT /roles/{id}/permissions (update permission matrix). Enforce RBAC middleware on all protected endpoints. Support role types: Super Admin, Dentist, Dental Assistant, Receptionist, Inventory Manager, Patient, Prospective Patient. Integrate HITECH minimum-necessary-access standard. Note: Frontend pages that depend on this API include Users (UsersTable, UsersPermissions, UsersRoleManager, UsersFilterBar, UsersBulkActions), Security (RolePermissionsMatrix).

As a Backend Developer, implement patient and medical records endpoints using FastAPI and PostgreSQL. Include: GET /patients (paginated, searchable), POST /patients (register patient), GET /patients/{id}, PUT /patients/{id}, DELETE /patients/{id}, GET /patients/{id}/history (treatment history), GET /patients/{id}/appointments, GET /patients/{id}/prescriptions, GET /patients/{id}/documents, GET /patients/{id}/notes, POST /patients/{id}/notes, GET /records (paginated, filterable), GET /records/{id}. All endpoints enforce RBAC. Return HIPAA-compliant audit trail entries for all record access. Note: Frontend pages that depend on this API include Patients, Records, EMR, Chairside, TreatmentPlan.

As a Backend Developer, implement inventory management endpoints using FastAPI and PostgreSQL. Include: GET /inventory (paginated, searchable, filterable by category/status/vendor), POST /inventory (add item), GET /inventory/{id}, PUT /inventory/{id} (update stock levels), DELETE /inventory/{id}, POST /inventory/bulk-update, GET /inventory/low-stock (reorder alerts), GET /inventory/stats (total/low-stock/reorder/vendor counts), POST /inventory/reorder (place reorder), GET /inventory/reorders (pending orders), GET /inventory/expiring (expiring items). Trigger reorder alerts when stock falls below threshold. Note: Frontend pages that depend on this API include Inventory, Forecasting, Dashboard (InventoryStatus), Portal, Reports (InventoryReport).

As a Backend Developer, implement real-time messaging and notifications endpoints using FastAPI and WebSocket (Socket.io). Include: GET /messages/threads (all conversation threads), GET /messages/threads/{id} (thread detail + messages), POST /messages/threads (start new thread), POST /messages/threads/{id}/messages (send message), GET /notifications (paginated, filterable by type/read status), PUT /notifications/{id}/read, PUT /notifications/read-all, DELETE /notifications/{id}, GET /notifications/preferences, PUT /notifications/preferences. Implement Socket.io events for real-time message delivery and notification push. Trigger email notifications via SES for appointment reminders, treatment updates, etc. Note: Frontend pages that depend on this API include Messaging, Notifications, Patients (MessagingSection), EMR (EMRNotifications), CheckIn (CheckInActions).

As a Backend Developer, configure Redis for the FastAPI backend. Implement: refresh token storage with TTL (7 days), session tracking (store session metadata: device, IP, last activity, user_id), rate limiting counters per IP and per user using Redis sliding window algorithm, API response caching for expensive analytics/reporting queries (TTL 5 minutes), real-time presence tracking for WebSocket connections, and appointment reminder job queue (using Redis Streams or Celery with Redis broker). Configure connection pooling via redis-py or aioredis. Ensure Redis is configured for persistence (AOF) to survive restarts. Note: depends on docker-compose Redis service already set up.

As a frontend developer, implement the RegisterContainer section for the Register page. The component manages a multi-step registration flow using useState for `accountType` ('patient'|'staff'), `step` (0-2 mapped to STEPS: ['Account','Profile','Complete']), `submitting`, `success`, `form` object (fullName, email, password, confirmPassword, clinicName, phone), `touched`, `focusedField`, and `showPassword`. ACCOUNT_TYPES renders Patient/Staff selector cards with lucide-react User and Stethoscope icons. STEP_FIELDS defines per-step field validation: step 0 covers fullName/email/password/confirmPassword; step 1 covers clinicName/phone; step 2 is the completion screen. Inline validation logic computes `errors` object from `touched` state — email regex, password min-length 8, confirmPassword match, clinicName required, phone format check. `getPasswordStrength` computes a 5-score metric (length ≥8, ≥12, uppercase, digit, special char) returning label/width/cls for a strength bar (rgc-strength-weak/fair/good/strong). Uses framer-motion `motion` and `AnimatePresence` for animated step transitions. Form controls include password visibility toggle with Eye/EyeOff icons, ArrowRight/ArrowLeft nav buttons between steps, Check icon on completion, AlertCircle for inline errors, Building2 and Phone icons for profile step fields. `useCallback` wraps `setField` and `handleBlur`. `submitting` triggers async submit with `setSuccess`. Import RegisterContainer.css.

As a frontend developer, implement the LoginHero section for the Login page. This is a static presentational section using className lh-root. It renders: (1) decorative aria-hidden lh-accent-ring and lh-accent-blob divs for background visual effects; (2) an lh-content div containing an lh-badge with an lh-badge-dot span and 'AI-Powered Platform' text; (3) an h1 with className lh-headline containing 'Welcome back to' and a highlighted span lh-headline-accent with 'DentalOS'; (4) a paragraph lh-subhead describing sign-in benefits (appointments, patient records, AI-assisted documentation); (5) a decorative aria-hidden lh-accent-bar div. Apply LoginHero.css styles.

As a frontend developer, implement the LoginForm section for the Login page. This is the core interactive form component using useState hooks for: email, password, remember (checkbox), showPassword (Eye/EyeOff toggle), isLoading (simulated 1800ms timeout on submit), and errors (object keyed by field). It renders an lf-card with: (1) lf-heading 'Welcome Back' and lf-subheading; (2) conditional lf-error-banner with AlertCircle icon when errors.general is present; (3) a form with noValidate and onSubmit calling validate() — email validated via regex, password minimum 6 chars — that sets errors state and short-circuits on validation failure; (4) email field group with Mail icon from lucide-react, input with lf-input--error conditional class, clearError('email') on onChange, autoComplete='email', disabled during isLoading; (5) password field group with Lock icon, Eye/EyeOff toggle button controlling showPassword state switching input type between 'password' and 'text', clearError('password') on onChange; (6) remember checkbox with lf-remember-row; (7) submit button with isLoading spinner state and 'Sign In' / loading text. Apply LoginForm.css styles.

As a frontend developer, implement the LoginSupport section for the Login page. This is a static presentational section using className lsu-root. It renders: (1) a decorative aria-hidden lsu-divider; (2) an lsu-content div with an lsu-text paragraph 'Need help signing in?'; (3) an lsu-links div containing three lsu-link anchors separated by aria-hidden lsu-separator spans — a Support Portal link to /Portal with HelpCircle icon, an email mailto link to support@novadentos.com with Mail icon, and a 'Create an account' link to /Register with ArrowUpRight icon — all icons from lucide-react with strokeWidth={2}; (4) an lsu-disclaimer paragraph referencing HIPAA inquiries and compliance team contact via support portal. Apply LoginSupport.css styles.

As a frontend developer, implement the Footer section for the Login page. This component uses new Date().getFullYear() for dynamic year. It renders an ftr-root footer with: (1) a decorative aria-hidden ftr-glow div; (2) ftr-inner with an ftr-brand-block containing Stethoscope icon (size 22, strokeWidth 2.2), ftr-brand-name 'DentalOS', ftr-tagline paragraph, and ftr-socials mapping socials array (Twitter, LinkedIn, GitHub icons to /Notifications and /Documents hrefs); (3) an ftr-cols nav mapping three columns — Clinical (Chairside, TreatmentPlan, Prescriptions, EMR, Records), Operations (Dashboard, Appointments, Inventory, Vendors, Analytics), Platform (AIAssistant, Compliance, Security, Settings, Portal) — each with ftr-col-title h3 and ftr-list ul; (4) compliance badges row mapping badges array (HIPAA Ready with ShieldCheck, HITECH Act with BadgeCheck, End-to-End Encrypted with Lock). All icons from lucide-react. Note: this Footer component may already exist from Landing or Register pages — reuse if available. Apply Footer.css styles.

As a frontend developer, implement the DashboardNavbar section for the Dashboard page. Build the `DashboardNavbar` component using `useState` for `openPanel` ('notif' | 'profile' | null) and `isDark` (boolean) state. Include a `dnav-backdrop` overlay that closes panels on click, a brand logo using the `Stethoscope` icon with 'NorthBay OS' branding and 'Clinical Workspace' sub-label, breadcrumb navigation with `dnav-crumbs`, and a `dnav-context` area rendering `pageTitle`. The actions area includes a dark/light theme toggle using `Moon`/`Sun` icons, a notifications bell using `Bell` with an `unreadCount` badge computed from the `NOTIFICATIONS` array (4 entries including CalendarCheck, FlaskConical, Package, Shield icons), and a profile dropdown with `ChevronDown`. Profile menu renders `LayoutDashboard`, `User`, `SettingsIcon`, `Shield`, and `LogOut` items. User initials are computed from `userName` prop. Component is themed via `is-dark` class on `dnav-root`. Note: a Navbar component may already exist from Landing/Register/Login pages — check for reuse opportunities.

As a frontend developer, implement the Navbar section for the Portal page. This component may already exist from previous pages (Vendors, Forecasting, TreatmentPlan). Uses useState for isDark (theme toggle) and menuOpen (mobile drawer). Renders PRIMARY_LINKS (Dashboard, Appointments, Patients, EMR, Analytics, Inventory) as nav-link anchors in nav-links container. Nav-actions includes a Sun/Moon theme toggle button using lucide-react icons, a Sign In CTA anchor to /Login, and a hamburger/X burger button (Menu/X icons) that toggles the nav-drawer. DRAWER_LINKS (14 items including Schedule, Records, TreatmentPlan, Prescriptions, Compliance, Messaging, Settings) render inside the animated nav-drawer div with conditional 'open' class. Brand mark uses Activity icon with nav-brand-name 'NovaDent OS' and sub 'Clinic Platform'. Imports from '../styles/Navbar.css'.

As a Backend Developer, implement appointment scheduling and schedule management endpoints using FastAPI. Include: GET /appointments (paginated, filterable by date/provider/status/type), POST /appointments (book), GET /appointments/{id}, PUT /appointments/{id} (update/reschedule), DELETE /appointments/{id} (cancel), POST /appointments/{id}/check-in, GET /appointments/today (today's queue), GET /schedule (weekly/daily/monthly grid), GET /schedule/providers (provider availability), POST /appointments/{id}/follow-up. Enforce CST timezone on all scheduling operations. Emit WebSocket events on appointment status changes. Note: Frontend pages that depend on this API include Appointments, Schedule, CheckIn, Dashboard (UpcomingAppointments), Portal (PortalMainContent).

As a Backend Developer, implement clinical documentation endpoints using FastAPI. Include: GET /emr/notes (paginated, filterable by type/provider/patient), POST /emr/notes (create SOAP note), GET /emr/notes/{id}, PUT /emr/notes/{id}, DELETE /emr/notes/{id}, POST /emr/notes/{id}/approve (dentist approval), GET /emr/notes/{id}/audit, GET /emr/soap-templates, POST /emr/transcriptions (save transcription session), GET /emr/upcoming-tasks (role-filtered task list), POST /emr/tasks/{id}/complete. Support SOAP note structure (subjective/objective/assessment/plan) and ICD-10/CDT code lookups. All note creation triggers AI recommendation pipeline. Note: Frontend pages that depend on this API include EMR, Chairside, Records, TreatmentPlan.

As a Backend Developer, implement prescription management endpoints using FastAPI. Include: GET /prescriptions (paginated, filterable by status/medication/patient/date), POST /prescriptions (issue new), GET /prescriptions/{id}, PUT /prescriptions/{id}, DELETE /prescriptions/{id} (revoke), POST /prescriptions/{id}/approve, GET /prescriptions/{id}/audit-trail, GET /prescriptions/{id}/approvals, GET /prescriptions/stats (active/pending/expiring counts). Validate prescriber role before creation. Log all state changes to audit trail. Note: Frontend pages that depend on this API include Prescriptions, Records, Chairside (ChairsideTreatmentDecision).

As a Backend Developer, implement treatment plan endpoints using FastAPI. Include: GET /treatment-plans (paginated, filterable by patient/phase/status), POST /treatment-plans (create), GET /treatment-plans/{id}, PUT /treatment-plans/{id}, GET /treatment-plans/{id}/phases, PUT /treatment-plans/{id}/phases/{phase_id} (update phase status/milestones), GET /treatment-plans/{id}/progress (metrics), POST /treatment-plans/{id}/notes, POST /treatment-plans/{id}/attachments. Return phase timeline, milestone completions, cost-vs-budget data, and compliance percent for progress metrics. Note: Frontend pages that depend on this API include TreatmentPlan, Patients (TreatmentOverview), Portal (PortalMainContent), Chairside.

As a Backend Developer, implement vendor and purchase order endpoints using FastAPI. Include: GET /vendors (paginated, filterable by category/status/rating), POST /vendors (add vendor), GET /vendors/{id}, PUT /vendors/{id}, DELETE /vendors/{id}, GET /vendors/{id}/orders (order history), POST /vendors/{id}/orders (place order), GET /orders (all purchase orders), GET /orders/{id}, PUT /orders/{id}/status. Include vendor performance metrics (on-time delivery %, accuracy, avg lead time). Note: Frontend pages that depend on this API include Vendors, Inventory, Forecasting, Reports (InventoryReport).

As a Backend Developer, implement document and file management endpoints using FastAPI and AWS S3 (HIPAA-eligible bucket). Include: GET /documents (paginated, filterable by category/patient/type/date), POST /documents/upload (presigned S3 URL generation), GET /documents/{id} (presigned download URL), DELETE /documents/{id}, PUT /documents/{id} (metadata update), GET /documents/{id}/versions, POST /documents/{id}/share, GET /documents/{id}/sharing, POST /documents/folders (create folder), GET /patients/{id}/documents. Enforce per-document RBAC. Log all access to audit trail. Enforce HIPAA-eligible S3 bucket configuration. Note: Frontend pages that depend on this API include Documents, Files, Records, Patients, TreatmentPlan, CheckIn (ConsentDocuments).

As a Backend Developer, implement analytics and reporting endpoints using FastAPI and PostgreSQL aggregation queries. Include: GET /analytics/metrics (patient count, revenue, treatment completion, inventory health with period filter), GET /analytics/charts/revenue (line chart data by period), GET /analytics/charts/appointments (bar chart data by period), GET /analytics/charts/patients (distribution doughnut data), GET /reports/financial (revenue/expense breakdown, transactions), GET /reports/inventory (stock movement, vendor performance), GET /reports/patients (patient metrics, engagement scores), GET /reports/compliance (audit log summary, checklist status), POST /reports/export (generate CSV/PDF export). All endpoints filtered by date range and clinic parameters. Note: Frontend pages that depend on this API include Analytics, Reports, Dashboard (AnalyticsSnapshot).

As a Backend Developer, implement compliance and audit trail endpoints using FastAPI. Include: GET /compliance/overview (score, HIPAA status, certifications, last audit date), GET /compliance/requirements (regulatory requirements list with status), GET /compliance/audit-trail (paginated, searchable audit log), POST /compliance/audit-trail/{id}/approve, POST /compliance/audit-trail/{id}/reject, GET /compliance/certifications (cert list with expiry), POST /compliance/audits/run (trigger audit job), GET /compliance/tasks (compliance task list), GET /security/sessions (active user sessions), DELETE /security/sessions/{id} (terminate session), GET /security/access-overview (stats: active users, roles, permissions). All user actions across the platform must write to the audit trail. Note: Frontend pages that depend on this API include Compliance, Security, Settings.

As a Backend Developer, implement clinic settings and configuration endpoints using FastAPI. Include: GET /settings/profile (current user profile), PUT /settings/profile (update profile), PUT /settings/password (change password), GET /settings/clinic (clinic configuration: name, timezone, hours, holidays, HIPAA toggle), PUT /settings/clinic, GET /settings/integrations (list integrations: OpenAI, S3, Google Workspace, Twilio with enabled/status), PUT /settings/integrations/{id} (enable/disable, update API key), POST /settings/integrations/{id}/test (test connection), GET /settings/notifications (notification preferences), PUT /settings/notifications, GET /settings/sessions (active sessions list). Note: Frontend pages that depend on this API include Settings.

As a Backend Developer, implement the real-time communication layer using Socket.io with the FastAPI backend (via python-socketio). Define Socket.io namespaces and events: /messaging namespace (join_thread, leave_thread, send_message, message_received, typing_indicator), /notifications namespace (subscribe, notification_push, mark_read), /appointments namespace (status_changed, new_booking, check_in_update), /chairside namespace (transcription_chunk, ai_recommendation_ready, session_status). Implement JWT authentication for Socket.io handshake. Broadcast appointment status changes to all connected clinic staff. Implement Redis pub/sub as the Socket.io adapter to support horizontal scaling. Note: Frontend Messaging page and Chairside TranscriptionPanel depend on this real-time layer.

As a frontend developer, implement the `DashboardSidebar` component for the Dashboard page. Uses `useState` for `mobileOpen` and `collapsed` state. Renders a `dsb-aside` element that gains the `dsb-collapsed` class when collapsed (desktop only). The `NAV_SECTIONS` constant defines three groups — Overview (Dashboard, Appointments), Clinical (Patients, Inventory), and Insights (Analytics, Settings) — each with lucide-react icons (`LayoutDashboard`, `CalendarDays`, `Users`, `Boxes`, `BarChart3`, `Settings`). Renders `dsb-brand` with `Stethoscope` icon and a `ChevronLeft` collapse toggle button that rotates 180° via inline transform when collapsed. Includes `dsb-role` block showing computed initials avatar, `userName`, and `role` props. Nav links use `dsb-active` class for the `activePage` prop match and `aria-current='page'`. Mobile drawer pattern uses `mobileOpen` with `Menu`/`X` toggle icons. Also includes a `LogOut` item at the bottom.

As a frontend developer, implement the `DashboardWelcomeBanner` section for the Dashboard page. The component is purely presentational with no internal state. Includes `getGreeting()` which derives 'Good morning/afternoon/evening' from `new Date().getHours()`, and `formatDate()` which formats the current date using `toLocaleDateString` with weekday/month/day/year options. Renders a `dwb-root` section with a `dwb-greeting-row` containing: a computed initials `dwb-avatar` div, a `dwb-greeting` block with salutation span and `h2` for `userName`, and a `dwb-role-badge` using the `Clock` lucide icon. Below the greeting row is a `dwb-date` element with a `CalendarCheck` icon. The `dwb-actions` block maps over `QUICK_ACTIONS` (View Schedule → /Schedule with CalendarCheck, Start Consultation → /Chairside with Video) rendering anchor tags with `dwb-action-btn` and `dwb-action-btn--primary` variants, each with a `ChevronRight` suffix icon.

As a frontend developer, implement the `DashboardMetricsCards` section for the Dashboard page. Stateless component that renders a `dmc-section` with a heading row showing 'Clinic Metrics' title and a live date string computed via `toLocaleDateString` with weekday/month/day format. Maps over the `METRICS` array (4 items: Today's Appointments with CalendarCheck, Active Patients with Users, Pending Inventory with Package, Monthly Revenue with DollarSign) to render `dmc-card` article elements. Each card has: a `dmc-card-top` with icon wrapped in `dmc-icon-wrap` and a `TrendIndicator` sub-component that renders `TrendingUp`, `TrendingDown`, or `Minus` icons based on `trendDir` ('up'/'down'/'neutral') with `dmc-trend--up/down` modifier classes. The `dmc-card-body` shows the formatted metric value via `formatMetricValue()` (handles numbers ≥1000 with locale string, millions as $XM) and a `dmc-label`. The `dmc-card-foot` displays `footLabel` and `footValue` metadata.

As a frontend developer, implement the `DashboardUpcomingAppointments` section for the Dashboard page. Uses `useState` to manage an expanded appointment detail state. Renders a list from the `APPOINTMENTS` array (8 entries: Maria Velasco, James Okafor, Lina Chen, Samuel Torres, Aisha Diallo, Robert Kim, Emily Hart, Carlos Mendez) each with `patientInitials`, `avatarClass` (dua-avatar--1 through 8), `time`/`timeEnd`, `dentist`, `chair`, `status` ('confirmed'/'pending'/'completed'), `treatment`, and `notes` fields. Each appointment row uses `Calendar`, `Clock`, `MapPin` lucide icons. Clicking a row expands inline detail showing treatment notes, phone, and chair assignment. `ChevronRight` icon rotates to indicate expanded state. Empty state renders an `Inbox` icon with message. Status badges use modifier classes for confirmed/pending/completed variants. Includes a header with date navigation and a 'View Full Schedule' CTA link.

As a frontend developer, implement the `DashboardPatientOverview` section for the Dashboard page. Uses `framer-motion` for staggered card entrance animations via `cardVariants` (`hidden: { opacity: 0, y: 24 }` → `visible` with `delay: i * 0.08` and cubic-bezier easing). Renders a grid of 6 patient cards from the `PATIENTS` array (Maria Velasco P-1042, Robert Chen P-2817, Aisha Williams P-3905, David Nakamura P-4612, Elena Torres P-5538, James Okonkwo P-6724), each with Unsplash avatar images, age/gender, `lastVisit`/`nextAppointment` dates, `status` badge ('active'/'followup'/'new'), and a tag from `TAG_CONFIG` (`visit`/`appointment`/`message` mapped to `UserRound`/`CalendarClock`/`MessageCircle` icons). Unread message badges display count > 0. `QUICK_STATS` bar renders 4 stats (Total Patients Today: 24, New Registrations: 3, Follow-ups Pending: 7, Unread Messages: 11) with `Users`, `UserRound`, `CalendarClock`, `MessageCircle` icons. Includes 'View All Patients' `ArrowRight` link.

As a frontend developer, implement the `DashboardInventoryStatus` section for the Dashboard page. Uses `useState` for `alertExpanded` to track which low-stock alert row is expanded (accordion pattern). Renders three data panels: (1) Low-Stock Alerts from `lowStockAlerts` array (3 items: Composite Resin A2 Syringe stock:3/threshold:10, Latex Exam Gloves stock:2/threshold:15, Topical Anesthetic Gel stock:1/threshold:5) — each is a clickable `role='button'` div that calls `handleAlertClick` (which navigates to /Inventory via `window.open`). (2) Stock level bars from `stockLevels` (5 items) using `getBarFillClass()` which computes `dinv-bar-fill--low/medium/full` based on stock/max ratio thresholds (≤0.25, ≤0.5). (3) Recent reorders from `recentReorders` (4 items) with 'pending'/'shipped' status badges. Header shows `Package` icon, 'Inventory Status' title, a `dinv-badge-count` with low-stock count, and 'Manage Inventory' `ArrowRight` link to /Inventory. Empty state handled for zero alerts.

As a frontend developer, implement the `DashboardAnalyticsSnapshot` section for the Dashboard page. Uses `useState` for `period` ('Today'/'Week'/'Month') period selector, `useRef` for Chart.js canvas, and a custom `useGaugeAnimate(targetScore, maxScore)` hook that uses `requestAnimationFrame` with cubic-ease-out over 800ms to animate SVG gauge `displayScore`. Registers Chart.js modules: `CategoryScale`, `LinearScale`, `PointElement`, `LineElement`, `ArcElement`, `Filler`, `Tooltip`, `Legend`. Renders three chart cards wrapped in `framer-motion` `motion` divs using `cardVariants` (`hidden: { opacity: 0, y: 20 }` → `visible` with `delay: i * 0.1`): (1) Revenue line chart using `react-chartjs-2` `Line` component from `REVENUE_DATA[period]` with gradient fill, showing `total` and `delta` with direction indicator; (2) Appointment completion donut/pie chart using `Pie` from `PIE_DATA[period]` showing completed/in-progress/pending breakdown with `pct` percentage; (3) Patient satisfaction SVG gauge (radius 54, circumference computed, `stroke-dashoffset` animated) from `SATISFACTION_DATA[period]`. `PERIODS` tab bar toggles between Today/Week/Month.

As a frontend developer, implement the `DashboardFooter` section for the Dashboard page. Stateless component rendering a `dft-footer` element with a `dft-inner` layout. The `dft-top` contains: a `dft-brand` column with an `Activity` icon logo linking to /Dashboard, the brand name 'Meridian Dental OS' with 'AI Clinic Operations' sub-label, a clinic description paragraph, and `dft-clinic-contact` with `MapPin` (420 Harborview Ave), `Phone` (+1 800-555-1200 tel link), and `Mail` (care@meridiandental.io mailto link) items using lucide icons. The `dft-cols` section renders two link columns: 'Workspace' (Dashboard, Appointments, Patients, Records from `quickLinks`) and 'Governance' (Compliance, Security, Reports, Settings from `resourceLinks`). The footer bottom bar shows a dynamic `year` via `new Date().getFullYear()`, copyright, and `ShieldCheck`/`Lock` compliance badges. Note: a Footer component may already exist from the Landing/Login pages — check for reuse or extension.

As a frontend developer, implement the Navbar section for the Users page. This component (Navbar.jsx) uses useState for isDark (theme toggle) and menuOpen (mobile drawer). Renders nav-root with nav-inner containing: nav-brand linking to /Dashboard with Activity lucide icon + NovaDent OS branding; nav-links mapping PRIMARY_LINKS (Dashboard, Appointments, Patients, EMR, Analytics, Inventory); nav-actions with Sun/Moon theme toggle button, Sign In CTA, and Menu/X burger button. Mobile nav-drawer slides open with DRAWER_LINKS (14 items including Schedule, Records, TreatmentPlan, Prescriptions, etc.). NOTE: This Navbar component likely already exists from Login and Dashboard pages — reuse if available. Depends on DashboardNavbar task from Dashboard page.

As a frontend developer, implement the AdminSidebar section for the Users page. This Sidebar.jsx component uses useState for roleOpen (role switcher dropdown) and activeRole (currently selected role from ROLES array: Super Admin, Dentist, Dental Assistant, Receptionist, Inventory Manager). Renders sb-root aside with: sb-brand block (Activity icon + DentalOS branding); NAV_GROUPS (4 groups: Overview, Clinical, Operations, Governance) each with heading and items — items include icon components from lucide-react, labels, page hrefs, and optional badges (Appointments: '8', Messaging: '3'); a role switcher dropdown toggled by ChevronDown showing ActiveRoleIcon; STATS strip (142 Active Patients, 8 Today's Visits, 5 Low Stock, 98% Compliance); and LogOut/UserCog action buttons. NOTE: May already exist from Dashboard page — reuse DashboardSidebar if available.

As a frontend developer, implement the TopBar section for the Analytics page. This component (TopBar.jsx) renders a fixed `<header className='tb-root'>` with a brand link to /Dashboard showing the Stethoscope icon and 'Cuspid Clinic OS' / 'AI Dental Operations' text. It includes an `openMenu` state (useState) controlling two dropdown panels: a notifications dropdown (Bell icon with badge showing NOTIFICATIONS.length, listing 4 items with CalendarCheck/AlertTriangle/MessageSquare icons, timestamps) and a profile dropdown (ChevronDown trigger with 'Lead Dentist' role badge, listing PROFILE_LINKS for My Profile/Account Settings/Security & MFA). A useEffect registers mousedown and Escape key listeners via rootRef to close menus on outside click. The Search icon button is also present. Note: this TopBar component may already exist from Dashboard or Users pages — verify before re-implementing. This section establishes the page-level chain to Dashboard; include the parent page dependency.

As a frontend developer, implement the Navbar section for the Inventory page. This component may already exist from previous pages (Analytics, Reports). It uses useState for isDark (theme toggle with Sun/Moon icons from lucide-react) and menuOpen (mobile drawer toggle with Menu/X icons). Renders nav-root with nav-inner containing: nav-brand with Activity icon linking to /Dashboard, nav-links mapping PRIMARY_LINKS (Dashboard, Appointments, Patients, EMR, Analytics, Inventory), nav-actions with theme toggle button, Sign In CTA linking to /Login, and hamburger button. Includes a nav-drawer with nav-drawer-inner mapping DRAWER_LINKS (14 routes including Schedule, Records, TreatmentPlan, Prescriptions, Reports, Compliance, Messaging, Settings). Drawer open state controlled via 'open' className. Reuse existing Navbar.css styles.

As a frontend developer, implement the Navbar section for the Settings page. This component may already exist from previous pages (Dashboard, Inventory, Compliance, etc.). It uses useState hooks for isDark (theme toggle) and menuOpen (mobile drawer). Renders a nav-root with nav-inner containing: nav-brand with Activity icon and 'NovaDent OS' branding, nav-links mapping PRIMARY_LINKS (Dashboard, Appointments, Patients, EMR, Analytics, Inventory), nav-actions with Sun/Moon theme toggle button, Sign In CTA, and a burger Menu/X button. A nav-drawer with class 'open' conditionally renders DRAWER_LINKS (14 items including Settings) when menuOpen is true. Uses lucide-react icons: Activity, Sun, Moon, Menu, X. Imports Navbar.css.

As a frontend developer, implement the Navbar section for the Appointments page. This component may already exist from Dashboard/previous pages — reuse or verify it renders correctly here. Uses useState for isDark (dark/light theme toggle via Sun/Moon icons from lucide-react) and menuOpen (hamburger/X drawer toggle). Renders nav-root with nav-inner containing: nav-brand linking to /Dashboard with Activity icon and 'NovaDent OS / Clinic Platform' branding; nav-links mapping PRIMARY_LINKS (Dashboard, Appointments, Patients, EMR, Analytics, Inventory); nav-actions with theme toggle button, Sign In CTA linking to /Login, and nav-burger button. Conditional nav-drawer with 'open' class when menuOpen, mapping DRAWER_LINKS (14 links including Schedule, Records, TreatmentPlan, Prescriptions, Reports, Compliance, Messaging, Settings). Imports Navbar.css.

As a frontend developer, implement the Navbar section for the Patients page. This component (imported from '../styles/Navbar.css') uses useState hooks for isDark and menuOpen state. It renders a nav-root container with: (1) a nav-brand linking to /Dashboard with an Activity icon from lucide-react and 'NovaDent OS / Clinic Platform' branding; (2) nav-links mapping PRIMARY_LINKS array (Dashboard, Appointments, Patients, EMR, Analytics, Inventory) as anchor tags; (3) nav-actions containing a Sun/Moon theme toggle button, a 'Sign In' CTA linking to /Login, and a Menu/X hamburger button; (4) a nav-drawer div with conditional 'open' class mapping DRAWER_LINKS (14 links including Schedule, Records, TreatmentPlan, Prescriptions, etc.). Note: this Navbar component likely already exists from Records and Files pages — reuse or adapt the existing component. Depends on Dashboard page task to establish page-level chain.

As a frontend developer, implement the Navbar section for the TreatmentPlan page. This component may already exist from previous pages (EMR, Prescriptions). Uses useState for isDark (theme toggle) and menuOpen (mobile drawer). Renders nav-root with nav-inner containing: nav-brand (Activity icon + NovaDent OS branding), nav-links mapping PRIMARY_LINKS (Dashboard, Appointments, Patients, EMR, Analytics, Inventory), nav-actions with Sun/Moon theme toggle button, Sign In CTA, and Menu/X burger button. Mobile nav-drawer renders DRAWER_LINKS including TreatmentPlan entry. CSS in Navbar.css (5097 chars). Lucide icons: Activity, Sun, Moon, Menu, X.

As a frontend developer, implement the Navbar section for the Vendors page. This component reuses the shared Navbar that may already exist from previous pages (TreatmentPlan, EMR, etc.). It uses useState for isDark (theme toggle) and menuOpen (mobile drawer). Renders nav-root with nav-inner containing: nav-brand with Activity icon linking to /Dashboard, nav-links mapping PRIMARY_LINKS (Dashboard, Appointments, Patients, EMR, Analytics, Inventory), nav-actions with Sun/Moon theme toggle button, Sign In CTA anchor, and Menu/X burger button. A nav-drawer with class 'open' toggled via menuOpen state renders DRAWER_LINKS (14 links including Schedule, Records, TreatmentPlan, Prescriptions, Compliance, Messaging, Settings). Import from '../styles/Navbar.css'. Verify component is consistent with prior page Navbar implementations.

As a frontend developer, implement the Navbar section for the Forecasting page. This component uses useState hooks for isDark (theme toggle) and menuOpen (mobile drawer) state. It renders a nav-root container with nav-inner containing: (1) a brand link with Activity icon from lucide-react and NovaDent OS / Clinic Platform branding, (2) PRIMARY_LINKS array mapping 6 links (Dashboard, Appointments, Patients, EMR, Analytics, Inventory) as nav-link anchors, (3) nav-actions with a theme toggle button switching between Sun/Moon icons, a Sign In CTA link, and a hamburger Menu/X burger button, (4) a nav-drawer that conditionally applies 'open' class when menuOpen is true, rendering 14 DRAWER_LINKS including Schedule, Records, TreatmentPlan, Prescriptions, Reports, Compliance, Messaging, Settings. Imports Navbar.css. Note: this component likely already exists from Dashboard and other previously implemented pages — reuse if available. Page-level dependency on Dashboard task must be respected.

As a frontend developer, implement the Navbar section for the CheckIn page. This component uses useState for isDark (theme toggle) and menuOpen (mobile drawer) state. Renders a nav-root with nav-inner containing: a nav-brand linking to /Dashboard with Activity icon and 'NovaDent OS / Clinic Platform' branding; nav-links mapping PRIMARY_LINKS (Dashboard, Appointments, Patients, EMR, Analytics, Inventory); nav-actions with Sun/Moon theme toggle button, 'Sign In' CTA linking to /Login, and a hamburger/X Menu button. A slide-out nav-drawer renders DRAWER_LINKS (14 items including Schedule, Records, TreatmentPlan, Prescriptions, Compliance, Messaging, Settings). Note: this Navbar component likely already exists from previous pages (Portal, Documents, Notifications) — reuse if available. Imports from '../styles/Navbar.css' and lucide-react (Activity, Sun, Moon, Menu, X).

As a frontend developer, implement the ScheduleHeader (ScheduleNavbar) section for the Schedule page. This section renders a full navigation bar with: (1) a branded logo link to /Dashboard using the Stethoscope icon; (2) a date stepper with ChevronLeft/ChevronRight buttons that call stepDate(dir) and update refDate state via setRefDate — supporting day (+1 day), week (+7 days), and month (+1 month) increments; (3) a formatted date display using formatMain() and formatSub() helpers derived from the MONTHS and WEEKDAYS arrays; (4) a view mode pill switcher (Day/Week/Month) using VIEW_MODES array with an animated sliding pill whose position is calculated via useLayoutEffect measuring .snv-active element's offsetLeft/offsetWidth and stored in pill state; (5) a filter dropdown toggled by filterOpen state with activeFilters toggled via toggleFilter() — using FILTER_OPTIONS array with color-coded checkboxes (Check icon from lucide-react) for checkups, orthodontics, surgery, hygiene, emergency; (6) outside-click dismissal of the filter dropdown via useEffect with mousedown listener on filterRef; (7) action buttons for Plus (new appointment) and Printer. Uses ScheduleNavbar.css. This is the primary layout/nav section; depends on Dashboard page task to chain pages.

As a Backend Developer (AI Engineer), implement AI integration endpoints using FastAPI, OpenAI API, and Whisper. Include: POST /ai/transcribe (upload audio → Whisper speech-to-text, returns transcript with speaker diarization), POST /ai/soap/generate (patient context + transcript → GPT-4 SOAP note draft), POST /ai/soap/{note_id}/approve (clinician approval with audit log), POST /ai/recommendations (patient chart → treatment recommendations with confidence scores), POST /ai/imaging/analyze (upload imaging file → vision model analysis for treatment monitoring), GET /ai/recommendations/{session_id} (retrieve AI recommendation set), POST /ai/forecasting/predict (inventory data → demand forecast for 30/60/90 days). All AI outputs require human clinician approval before being saved to EMR. Log AI model version, input hash, and output to audit trail. Note: Frontend pages that depend on this API include Chairside (TranscriptionPanel, AIAssistant), AIAssistant, EMR (ClinicalNotes), Forecasting (ForecastingCharts).

As a frontend developer, implement the UsersPageHeader section for the Users page. Renders a static header (uh-root) with uh-inner containing: uh-title-block with uh-heading-row (h1 'Users & Roles' + ShieldCheck badge showing '24 Users'); uh-subtitle paragraph describing RBAC management and compliance auditing; uh-stats row with three colored dot stats (18 Active with uh-stat-dot active, 4 Admins with uh-stat-dot admin, 2 Pending with uh-stat-dot pending). uh-actions block contains an uh-cta anchor linking to /Users with UserPlus icon and 'Add New User' label. No state hooks — fully static presentational component.

As a frontend developer, implement the UsersFilterBar section for the Users page. Uses useState for searchText, roleFilter ('all'), statusFilter ('all'), sortBy ('name'), roleOpen, and sortOpen. Uses useRef (roleRef, sortRef) with a useEffect mousedown outside-click handler to close dropdowns. Renders ufb-root with: ufb-search-wrap containing Search lucide icon and controlled text input (placeholder: 'Search users by name, email, role'); ufb-filters row with a custom role dropdown (ROLES: 8 options from all/super_admin/dentist/orthodontist/assistant/receptionist/inventory_manager/hygienist) using ChevronDown; STATUSES toggle pills (All/Active/Inactive/Pending with colored ufb-status-dot classes); sort dropdown (SORT_OPTIONS: name/email/role/last_login); active filter count badge; RotateCcw reset button calling handleReset() to clear all filters.

As a frontend developer, implement the UsersRoleManager section for the Users page. Static presentational section (urm-root) rendering ROLE_CATEGORIES (7 roles: Super Admin/ShieldCheck, Dentist/Stethoscope, Dental Assistant/HeartPulse, Receptionist/CalendarDays, Inventory Manager/Package, Patient/UserRound, Prospective Patient/UserPlus). Each role card shows: icon, name, user count badge, description text, permissions chip list (up to 6 shown + permOverflow count badge for extras). urm-header contains title block and a 'Create Role' CTA with Plus icon. Each card footer has action buttons: Pencil (edit), Copy (clone), Trash2 (delete) lucide icons. No state hooks — fully static layout component.

As a frontend developer, implement the Footer section for the Users page. Static Footer.jsx renders ftr-root with: ftr-glow decorative element; ftr-inner containing ftr-brand-block (Stethoscope icon + 'DentalOS' brand name, tagline paragraph, ftr-socials row with Twitter/Linkedin/Github lucide icons linking to /Notifications and /Documents); ftr-cols nav grid with 3 columns (Clinical: Chairside/TreatmentPlan/Prescriptions/EMR/Records; Operations: Dashboard/Appointments/Inventory/Vendors/Analytics; Platform: AIAssistant/Compliance/Security/Settings/Portal); compliance badges row (ShieldCheck 'HIPAA Ready', BadgeCheck 'HITECH Act', Lock 'End-to-End Encrypted'); copyright line using new Date().getFullYear(). NOTE: This Footer component likely already exists from Login/Dashboard pages — reuse if available.

As a frontend developer, implement the Navbar section for the Security page. This component (imported from '../styles/Navbar.css') uses useState hooks for isDark and menuOpen state. It renders a nav-root with the NovaDent OS brand (Activity icon), PRIMARY_LINKS array (Dashboard, Appointments, Patients, EMR, Analytics, Inventory) as nav-link anchors, a theme toggle button switching between Sun and Moon lucide icons, a Sign In CTA, and a hamburger/X menu burger button. A slide-out nav-drawer renders DRAWER_LINKS (14 links including Schedule, Records, TreatmentPlan, Prescriptions, Compliance, Messaging, Settings) when menuOpen is true. Note: this Navbar component likely already exists from Dashboard and Users pages — reuse or reference the existing component. Depends on Users page Navbar task to chain page sequence.

As a frontend developer, implement the InventorySidebar section for the Inventory page. Uses useState for collapsed (desktop collapse toggle with ChevronLeft button), mobileOpen (hamburger toggle with ChevronDown chevron rotation), and activeItem (currently 'Track Stock'). Renders an aside with ins-root and conditional 'collapsed' className. Contains: ins-collapse-btn for desktop collapse, ins-header with Package icon and 'Inventory / Stock & Supply' branding, ins-hamburger for mobile with ChevronDown animated chevron. NAV_GROUPS maps two groups ('Stock Management' with Track Stock/Update Levels/Reorder Management items — Reorder Management has badge '3', and 'Supply Chain' with Vendors/Forecasting). QUICK_LINKS renders Low Stock (badge '12'), Expiring Soon (badge '4'), Purchase Orders, Inventory Reports. STATS displays 4 mini-stat chips: 1,247 Total Items, 12 Low Stock (warn), 4 Expiring (warn), 98% In Stock (info). Uses framer-motion AnimatePresence for drawer animation.

As a frontend developer, implement the InventoryHeader section for the Inventory page. Uses useState for 'now' (Date) updated via setInterval every 1000ms in useEffect with cleanup via clearInterval. Renders header.ih-root with ih-inner containing: ih-top row with ih-title-block (Package icon badge + 'Inventory Management' h1 + subtitle 'Track stock levels, manage reorders, and monitor supplies') and ih-datetime (Calendar + formatDate, Clock + formatTime badges using en-US locale with weekday/year/month/day and 12-hour time format respectively). Includes ih-divider. Renders ih-actions nav with three quickActions buttons: 'New Item' (PlusCircle, ih-btn--primary), 'Import Stock' (Upload, ih-btn--secondary), 'Generate Report' (FileBarChart, ih-btn--tertiary).

As a frontend developer, implement the InventoryStats section for the Inventory page. Renders a static invs-root section with an invs-grid mapping STAT_CARDS (4 cards): Total Items (1247 SKUs, Package icon, invs-card--total, +12 this week up trend, 100% status bar primary fill, 24 active categories), Low Stock (23 items, AlertTriangle icon, invs-card--low, pulse: true, 35% status bar accent fill, 8 critical items), Reorder Pending (41 orders, ShoppingCart icon, invs-card--reorder, neutral trend, 62% secondary fill, 28 auto-approved), Vendor Orders (17 active, Truck icon, invs-card--vendor, +5 in transit up trend, 78% green fill, 8 suppliers). Each card renders: TrendBadge sub-component (TrendingUp/TrendingDown/Minus icons based on direction), invs-metric with value.toLocaleString() + unit, invs-label, invs-status-bar with dynamic width% fill div, and invs-sub secondary stats.

As a frontend developer, implement the InventoryTable section for the Inventory page. Uses useState for search, sortKey (default 'name'), sortDir ('asc'/'desc'), currentPage (default 1), and selected (Set for row checkboxes). Uses useMemo to filter INVENTORY_DATA (15 dental items including Composite Resin Kit, Surgical Gloves, Amalgam Capsules, etc.) by search term across name/sku/status, then sort by COLUMNS keys, then paginate at ITEMS_PER_PAGE=8. Renders: search input with Search icon, sortable column headers (ChevronUp/ChevronDown indicators) for Item Name, SKU, Current Stock, Min Level, Reorder Qty, Last Updated, Status, Actions. Each row uses framer-motion AnimatePresence for add/remove animation, shows status badges mapped via STATUS_LABELS ('in-stock', 'low-stock', 'out-of-stock', 'on-order'), Edit3 and Trash2 action buttons, RefreshCw reorder button. Pagination renders ChevronLeft/ChevronRight with page count. Empty state uses PackageOpen icon.

As a frontend developer, implement the InventoryFilters section for the Inventory page. Uses useState for: panelOpen (slide-out filter panel toggle), search, category (12 options including Restorative/Surgical/PPE & Safety), status (6 options), vendor (9 dental vendors including Dentsply Sirona/Henry Schein/3M), dateFrom, dateTo, appliedFilters (object), savedPresets (array), activePreset, savedFeedback (bool). useCallback buildFilters assembles active filter keys. Handlers: handleApply (builds and sets appliedFilters), handleReset (clears all), handleRemoveChip (removes individual filter key). Renders: search input with Search icon, SlidersHorizontal button with activeCount badge to open panel. AnimatePresence panel expands with selects for category/status/vendor, date range inputs, Apply/Reset buttons (RotateCcw icon), save preset with Bookmark icon and Check feedback animation. DEFAULT_PRESETS (Low Stock, Restock Needed, PPE, Surgical) and savedPresets rendered as clickable chips. Active filter chips rendered with X dismiss buttons (Trash2 for saved preset delete).

As a frontend developer, implement the ReorderAlerts section for the Inventory page. Uses useState for alerts (initialized from ALERTS_DATA — 4 items: Composite Resin Syringe A2 stock:3/reorderPoint:10, Disposable Prophy Angles stock:12/reorderPoint:50, Topical Anesthetic Gel stock:1/reorderPoint:8, Sterilization Pouches stock:40/reorderPoint:200) and dismissing (Set). handleDismiss adds id to dismissing Set then after 380ms filters alerts array and cleans dismissing. handlePlaceOrder logs vendor order intent (console.log stub for vendor API integration). getStockPercent computes Math.min((current/reorder)*100, 100) for progress bar. Renders: ra-root section with ra-header (AlertTriangle icon, 'Reorder Alerts' h2, animated activeCount badge with ra-badge-dot pulse). Empty state shows CheckCircle2 icon. Alert list maps each with isCritical flag (stock<=3), stock percent bar, vendor/leadTime metadata, X dismiss button, ShoppingCart 'Place Order' button calling handlePlaceOrder.

As a frontend developer, implement the InventoryActions section for the Inventory page. Uses useState, useRef, useCallback. Imports Three.js for ActionParticleField canvas background: creates THREE.Scene, PerspectiveCamera (FOV 60, z:30), WebGLRenderer with alpha:true, BufferGeometry with Float32Arrays for positions (80 particles, random spread ±25x, ±10y, ±5z), sizes (0.2–0.8), and speeds. Animated render loop via animRef. PRIMARY_ACTIONS (5): Bulk Update Stock (PackageOpen, primary), Export to CSV (FileSpreadsheet, primary), Sync Vendors (RefreshCw, secondary, href /Vendors), View Forecasting (TrendingUp, secondary, href /Forecasting), Print Barcode Labels (Printer, secondary). Each action card shows confirmLabel state on click with Loader2 spinner then CheckCircle success using framer-motion AnimatePresence. QUICK_STATS (4): Items Pending Sync (14, amber dot), Labels Queued (32, blue dot), Forecast Ready (47 items, green dot), Last Export (2h ago, coral dot). ArrowRight icon on action cards.

As a frontend developer, implement the Footer section for the Inventory page. This component may already exist from previous pages (Security, Analytics, Reports). Renders footer.ftr-root with ftr-glow decorative div (aria-hidden). ftr-inner contains: ftr-brand-block with Stethoscope icon (size 22), 'DentalOS' brand name, tagline about AI-powered dental OS, and ftr-socials (Twitter→/Notifications, LinkedIn→/Notifications, GitHub→/Documents). ftr-cols nav maps 3 columns: Clinical (Chairside, TreatmentPlan, Prescriptions, EMR, Records), Operations (Dashboard, Appointments, Inventory, Vendors, Analytics), Platform (AIAssistant, Compliance, Security, Settings, Portal). Each link rendered as ftr-link anchors. Badges row: HIPAA Ready (ShieldCheck), HITECH Act (BadgeCheck), End-to-End Encrypted (Lock). Bottom bar shows dynamic year via new Date().getFullYear() and copyright text. Reuse existing Footer.css.

As a frontend developer, implement the Navbar section for the Compliance page. This component reuses the shared Navbar already implemented in prior pages (Inventory, Reports). It uses useState for isDark (theme toggle with Sun/Moon icons from lucide-react) and menuOpen (mobile drawer with Menu/X icons). PRIMARY_LINKS renders 6 nav links (Dashboard, Appointments, Patients, EMR, Analytics, Inventory). DRAWER_LINKS renders 14 links including Compliance. The nav-drawer applies an 'open' CSS class conditionally. Includes a nav-cta 'Sign In' link and Activity brand icon. Note: this component likely already exists — verify reuse before reimplementing.

As a frontend developer, implement the SettingsSidebar section for the Settings page. Uses useState for activeItem (default 'profile') and mobileOpen (collapsible mobile nav). Renders an aside.ss-root with: a mobile ss-toggle button using ChevronDown icon and badge count '6'; a collapsible ss-body div that shows a ss-user card with avatar fallback 'DR', online dot, name 'Dr. Sarah Chen', and role 'Clinic Owner'; a ss-nav mapping NAV_ITEMS (Profile/User, Account Security/Shield, Notifications/Bell, Clinic Config/Building2, Integrations/Puzzle) with active state toggling via onClick; a separator hr; a Danger Zone link with AlertTriangle icon styled as ss-danger; and a ss-logout-wrap with LogOut button. Uses lucide-react: User, Shield, Bell, Building2, Puzzle, AlertTriangle, LogOut, ChevronDown. Imports SettingsSidebar.css.

As a frontend developer, implement the SettingsHeader section for the Settings page. A purely static presentational component with no state. Renders a div.sh-root containing sh-inner with: a breadcrumb nav using ChevronRight icon (size=13, strokeWidth=2) linking 'Dashboard' to /Dashboard and a current span 'Settings'; a sh-title-row with h1.sh-title 'Settings'; a descriptive sh-desc paragraph about managing account preferences, security, notifications, and clinic configuration; and a sh-divider. Uses lucide-react ChevronRight. Imports SettingsHeader.css.

As a frontend developer, implement the AppointmentsSidebar section for the Appointments page. Uses useState for activeView ('calendar'), openFilters (array defaulting to ['providers']), and selectedFilters (object with providers: ['dr_chen','dr_patel'], hygienists: [], specialists: [], treatment: ['cleaning']). Renders today stats row (total:24, pending:6, waiting:3) with blue/amber/coral icon classes. Renders viewModes toggle (calendar, list, staff — staff has badge '4'). Renders roleFilters accordion with framer-motion AnimatePresence for expand/collapse: Providers (3 doctors with counts), Hygienists (2 RDHs), Specialists (3 specialists), Treatment Type (5 treatment options). toggleFilter toggles openFilters array; toggleFilterOption toggles per-group selected IDs. Uses Calendar, List, Users, Clock, CalendarPlus, RefreshCw, AlertCircle, CheckCircle2, ChevronRight, UserCircle, Stethoscope, Syringe, Scissors, Baby, GraduationCap, Filter icons. Imports AppointmentsSidebar.css.

As a frontend developer, implement the AppointmentsHeader section for the Appointments page. Uses framer-motion stagger container (staggerChildren: 0.1) and fadeUp variants (opacity 0→1, y 18→0, duration 0.45, cubic-bezier ease). Renders aph-root header with aph-inner motion.div. Top row: breadcrumb nav (Dashboard → Appointments, with '/' separator, last item as span) and desktop CTA 'New Appointment' linking to /Appointments with CalendarPlus icon. Title row: h1 'Appointments', role badge with Stethoscope icon ('Receptionist View'), description text about managing clinic schedule. Mobile CTA variant (aph-cta-mobile). Quick stats row mapping 3 stats: Today/12 (aph-dot-today), Upcoming/47 (aph-dot-upcoming), Completed/1,284 (aph-dot-completed). Imports AppointmentsHeader.css.

As a frontend developer, implement the AppointmentsFilters section for the Appointments page. Uses useState for dateFrom, dateTo, provider ('All Providers'), patientSearch, activeStatus (null), and viewMode ('calendar'). Renders af-root with af-inner. Primary row: date range inputs (From/To) with Calendar icon, provider select dropdown mapping PROVIDERS array (6 providers including All Providers), patient search input with Search icon. Status pills row mapping STATUSES array (scheduled:48, confirmed:27, completed:92, cancelled:5) each with colored dot class (af-pill-dot--scheduled/confirmed/completed/cancelled). View mode toggle with LayoutGrid and List icons. handleClearAll resets all state; hasFilters computed boolean shows/hides X clear button with Filter icon. Imports AppointmentsFilters.css.

As a frontend developer, implement the Footer section for the Appointments page. This component may already exist from Inventory/Compliance/other pages — reuse or verify it renders correctly here. Renders ftr-root footer with ftr-glow decorative div. Brand block: Stethoscope icon (size 22), 'DentalOS' brand name, tagline about AI-powered dental OS. Socials row: Twitter→/Notifications, LinkedIn→/Notifications, GitHub→/Documents (each with respective lucide icon, size 18). Three nav columns: Clinical (Chairside, TreatmentPlan, Prescriptions, EMR, Records), Operations (Dashboard, Appointments, Inventory, Vendors, Analytics), Platform (AIAssistant, Compliance, Security, Settings, Portal). Compliance badges row: ShieldCheck 'HIPAA Ready', BadgeCheck 'HITECH Act', Lock 'End-to-End Encrypted'. Dynamic year via new Date().getFullYear(). Imports Footer.css.

As a frontend developer, implement the ChairsideHeader section (ChairsideNavbar component) for the Chairside page. This header includes: a live session elapsed timer using useState(0) and setInterval via useEffect that ticks every second and formats to HH:MM:SS; a brand logo with Stethoscope icon linking to /Dashboard with 'NovaDent OS' name and 'Chairside' sub-label; a breadcrumb patient context nav showing patient avatar initials 'MR', a link to /Patients, ChevronRight separator, current patient 'Maria Rodriguez', and an 'Op Room 3' chip badge; action buttons for Messaging (/Messaging) with a badge count of '3', Vitals & Records (/Records) with Activity icon, and an Emergency button with Siren icon and 'Emergency' label; and a staff profile link to /Settings showing 'Dr. Aisha Patel' / 'Lead Dentist' with avatar initials 'AP'. Apply ChairsideNavbar.css with csn- prefixed class names. Note: a Navbar component may already exist from the Appointments page — evaluate reuse vs. this specialized chairside variant.

As a frontend developer, implement the PatientSidebar section for the Patients page. This component (imported from '../styles/PatientSidebar.css') uses useState for menuOpen and activeLink state. It renders an aside.psb-root with: (1) a psb-mobile-bar containing an avatar (Unsplash image of 'Sarah Mitchell'), patient name, and a hamburger button toggling Menu/X icons with aria-expanded; (2) a psb-body div with conditional 'psb-body--open' class containing: a psb-profile block with avatar image, online status dot (psb-avatar-dot), patient name 'Sarah Mitchell', and patient ID '#PT-2847'; (3) a psb-nav mapping NAV_LINKS array (Dashboard, Appointments, Treatment Plan, Documents, Messaging, Settings) each with a lucide-react icon (LayoutDashboard, CalendarCheck, Stethoscope, FileText, MessageSquare, Settings) — active link gets 'psb-nav-link--active' class and sets activeLink state on click while closing the menu.

As a frontend developer, implement the PatientWelcome section for the Patients page. This component (imported from '../styles/PatientWelcome.css') uses useState for cstNow and a useEffect that sets a 30-second interval to update the current time. It uses Intl.DateTimeFormat with America/Chicago timezone to format date/time as CST. It renders a section.pw-root with a pw-inner flex container split into: (1) pw-left with an h1 greeting 'Welcome back, John' including a wave emoji span, and a pw-datetime div showing a Clock icon and the formatted CST time string; (2) pw-right with a pw-cta anchor linking to /Appointments with a CalendarPlus icon and 'Book Next Appointment' text, plus a pw-status span dynamically styled via statusConfig object (active/no-upcoming/complete variants with pw-status-dot indicator). The hardcoded status is 'active' rendering 'Active Treatment' with 'pw-status--active' class.

As a frontend developer, implement the AppointmentStatus section for the Patients page. This component (imported from '../styles/AppointmentStatus.css') manages expandedId, rescheduleTarget, and selectedSlot via useState. It renders an apt-root section with: (1) a header with title and subtitle; (2) APPOINTMENTS array (3 entries: Root Canal Follow-Up confirmed, Orthodontic Adjustment pending, Routine Cleaning completed) filtered into upcoming (confirmed/pending) and past (completed/cancelled) lists; (3) expandable appointment cards showing Calendar, Clock, User, MapPin, Stethoscope, FileText, ChevronRight, MoreHorizontal icons from lucide-react — clicking a card sets expandedId to expand details; (4) STATUS_META-driven badge rendering with apt-badge-dot indicators for confirmed/pending/completed/cancelled states; (5) a reschedule modal triggered by openReschedule(aptId) that renders RESCHEDULE_SLOTS (5 time options) as selectable radio-style options, with closeReschedule (X button) and confirmReschedule handlers; (6) a RefreshCw icon for refresh action.

As a frontend developer, implement the TreatmentOverview section for the Patients page. This component (imported from '../styles/TreatmentOverview.css') uses useState for hasLoaded and framer-motion for card animations. It renders a to-root section with: (1) cardVariants animation config using custom delay (i * 0.1) and ease [0.25, 0.46, 0.45, 0.94]; (2) three treatment cards from the treatments array (Full Arch Restoration 62% progress, Orthodontic Alignment 41% progress, Crown Tooth #14 CEREC 85% progress) each as motion.div with custom={i}; (3) each card shows treatment name, status badge, startDate, estCompletion, a progress bar, a phases list with completed/active/pending phase indicators (ArrowRight, Flag icons from lucide-react), a milestone block with Sparkles icon, and cost/costNote details; (4) an empty state branch (when !hasLoaded) with Stethoscope icon, 'No Active Treatments' message, and a link to /TreatmentPlan with Sparkles icon. Framer-motion AnimatePresence not required per current JSX but cardVariants with motion.div staggered entrance is key.

As a frontend developer, implement the DocumentsSection section for the Patients page. This component (imported from '../styles/DocumentsSection.css') uses useState for active filter tab and search query. It renders a documents section with: (1) a filter tab bar mapping DOCUMENT_TYPES (all/xray/scan/form/note/other with counts) — clicking a tab filters the displayed documents; (2) a search input with Search icon from lucide-react for filtering by document name; (3) an Upload button with Upload icon; (4) a document list rendering DOCUMENTS array (14 entries including .dcm X-ray files, .stl 3D scan files, .pdf forms/notes) — each row shows a type icon (FileImage for xray, ScanLine for scan, ClipboardList for form, FileText for note, FileArchive for other), document name, typeLabel badge, date (Calendar icon), size (HardDrive icon), uploadedBy, plus Download and Eye action buttons; (5) filtering logic combining active type tab and search term against document name.

As a frontend developer, implement the MessagingSection section for the Patients page. This component (imported from '../styles/MessagingSection.css') uses useState for threads (initialized from MESSAGE_THREADS) and framer-motion for animated thread entrance. It renders a msg-root section with: (1) a msg-header containing section label 'Messages', h2 title 'Clinic Conversations', and a dynamic subtitle showing totalUnread count (sum of all thread.unread values); (2) a motion.a 'New Message' button linking to /Messaging with a Plus icon; (3) five MESSAGE_THREADS rendered via AnimatePresence with threadVariants (x: -16 → 0, staggered delay i * 0.07) — each thread card shows avatar initials via avatarInitials() helper, senderName, senderRole, senderType-based styling, preview text, timestamp, an unread badge when t.unread > 0, and a ChevronRight icon linking to /Messaging; (4) an Inbox icon empty state. The avatarInitials() function splits name by space, takes first 2 chars, joins uppercase.

As a frontend developer, implement the NotificationsPreferences section for the Patients page. This component (imported from '../styles/NotificationsPreferences.css') uses useState for toggles object (appointments: true, treatment: true, billing: false, announcements: true), method ('email'), saved, and toast booleans; useCallback for handleToggle and handleSave; and a useEffect that auto-dismisses the toast after 2400ms. It renders a np-root section with: (1) a np-header with heading and subheading; (2) a np-grid of 4 TOGGLES cards (Appointment Reminders/Calendar, Treatment Updates/Stethoscope, Billing Alerts/CreditCard, Clinic Announcements/Megaphone) — each card shows an icon with iconClass color variant, title, description, and a toggle switch that calls handleToggle(key) updating the toggles state with setSaved(false); (3) a METHODS selector (email/sms/inapp with Mail/Smartphone/Bell icons) rendering method detail text and highlighting the active method via setMethod; (4) a Save button calling handleSave that sets saved and toast to true; (5) an AnimatePresence-wrapped toast notification with Check icon that auto-dismisses after 2.4s.

As a frontend developer, implement the Footer section for the Patients page. This component (imported from '../styles/Footer.css') is a static functional component that renders a footer.ftr-root with: (1) a decorative ftr-glow div; (2) a ftr-brand-block with a Stethoscope icon (size=22, strokeWidth=2.2) in ftr-mark, 'DentalOS' brand name, a tagline paragraph describing the AI-powered dental OS; (3) ftr-socials row with Twitter, Linkedin, Github icons linking to /Notifications and /Documents; (4) a ftr-cols nav mapping 3 columns — Clinical (Chairside, Treatment Plan, Prescriptions, EMR, Patient Records), Operations (Dashboard, Appointments, Inventory, Vendors, Analytics), Platform (AI Assistant, Compliance, Security, Settings, Patient Portal) — each as an ftr-list of anchor tags; (5) a compliance badges row with ShieldCheck ('HIPAA Ready'), BadgeCheck ('HITECH Act'), Lock ('End-to-End Encrypted'); (6) a copyright line using dynamic year via new Date().getFullYear(). Note: this Footer component likely already exists from Records and Files pages — reuse or adapt.

As a frontend developer, implement the CheckInHeader section for the CheckIn page. Uses useState for currentTime (new Date()) and queueCount (static 4), with a useEffect setInterval timer updating every 30 seconds. Renders a chh-root section containing: a chh-top-row with breadcrumb navigation (Dashboard → Appointments → CheckIn using ChevronRight separators) and a status row showing a dynamic clinic-open/closed badge (computed via isClinicOpen() checking hours 8–18, weekdays 1–5) with animated chh-status-dot, plus live time display. A chh-main-row renders an h1 title 'Patient Check-In' with accent span and a chh-queue-badge showing Users icon, queueCount (4), and 'in queue' label. A chh-quick-ref bar shows three ref-items: current time (Clock icon), date (CalendarCheck icon), and a third stat. Imports from '../styles/CheckInHeader.css' and lucide-react (Users, Clock, CalendarCheck, ChevronRight).

As a frontend developer, implement the CheckInQueue section for the CheckIn page. Renders a cq-root with a static QUEUE_PATIENTS array of 5 patients (Margaret Chen, James Rodriguez, Emily Hart, David Okonkwo, Sophia Nguyen) each with id, name, initials, time, provider, reason, status ('in-progress' | 'checked-in' | 'waiting'), and active flag. Includes empty-state rendering with User icon when no patients exist. Main render shows a cq-label-row with User icon and patient count badge, then a cq-track mapping patient cards with dynamic class cq-card--active for the active patient (Margaret Chen). Each card displays status icon (Clock for waiting, ClipboardList for checked-in, Stethoscope for in-progress from STATUS_ICONS map), initials avatar, patient name, time, provider, reason, and a ChevronRight. Cards are keyboard-accessible with role='button', tabIndex, onKeyDown, and aria-label. Imports from '../styles/CheckInQueue.css' and lucide-react (Clock, ChevronRight, User, ClipboardList, Stethoscope).

As a frontend developer, implement the CheckInForm section for the CheckIn page. Complex multi-step accordion form using useState for activeStep ('identity' | 'contact' | 'appointment'), completedSteps array, and errors object. Three STEPS defined (Identity Verification with User icon, Contact Information with Mail icon, Appointment Confirmation with Calendar icon). Identity step manages firstName, lastName, dob, phone state with formatPhone() helper (regex-based auto-formatter: '(XXX) XXX-XXXX'). Contact step manages address, city, state, zip, email, emergencyName, emergencyPhone, emergencyRelation. Appointment step shows static appointmentData (June 5 2026, 10:15 AM, Dr. Sarah Chen DDS, Routine Cleaning, Operatory 3) with appointmentConfirmed boolean toggle. Validation functions validateIdentity() and validateContact() set field-level errors. Step headers are clickable (handleStepClick), completed steps show CheckCircle2 icon. PHONE_REGEX and EMAIL_REGEX used for validation. Imports from '../styles/CheckInForm.css' and lucide-react (ChevronDown, CheckCircle2, User, Phone, Mail, MapPin, Calendar, Clock, Stethoscope, FileText).

As a frontend developer, implement the VerificationPanel section for the CheckIn page. Uses useState for expanded (currently open accordion item id or null) and framer-motion AnimatePresence for animated expand/collapse. Renders a vp-card with ShieldCheck heading, subtitle, and a vp-status-bar showing a progress track (vp-progress-fill width driven by progressPercent) and '{verifiedCount}/{total} verified' label. Maps verificationItems array (4 items: identity, insurance, consent, payment — all 'verified' status) as a ul. Each item has a StatusIcon component rendering CheckCircle2 (verified), AlertTriangle (warning), or Circle (pending). Items are toggleable via toggleItem(id), with AnimatePresence animating detail expansion showing bullet-point details arrays. Imports framer-motion (motion, AnimatePresence) and lucide-react (ShieldCheck, Clock, Info, ChevronDown, CheckCircle2, AlertTriangle, Circle). Imports from '../styles/VerificationPanel.css'.

As a frontend developer, implement the InsuranceReview section for the CheckIn page. Uses useState for expanded (secondary coverage accordion toggle) and framer-motion motion.div with initial={{ opacity: 0, y: 20 }} / animate={{ opacity: 1, y: 0 }} entry animation. Static insuranceData object contains primary (Delta Dental of California, PPO High, $25 copay, $150/$1000 deductible, Jan–Dec 2026, 80%/50% coverage, Visa 4821) and secondaryCoverage (MetLife Dental). Renders ir-header with patient avatar (User icon), ir-patient-name, ir-policy-tag (FileText icon), and Edit3 'Edit Insurance' button. Conditional ir-warning banner (AnimatePresence height animation) shown when insuranceData.insuranceExpired is true. ir-details grid displays policy fields: provider, memberId, groupId, copay, deductibleStatus, effectiveDate, expirationDate, planType, coveragePct using Hash icon for IDs. Secondary coverage section toggled by expanded state with ChevronDown rotation. Imports from '../styles/InsuranceReview.css', framer-motion, and lucide-react (User, ShieldCheck, AlertTriangle, Edit3, ChevronDown, FileText, Hash).

As a frontend developer, implement the ConsentDocuments section for the CheckIn page. Complex component using useState, useRef, useEffect, useCallback. DOCUMENTS array contains 3 items: HIPAA Privacy Practices (signed 2026-05-15), Financial Responsibility Agreement (signed 2026-05-15), and Office Policies & Procedures (unsigned). Each document has id, name, description, signedDate, signed boolean, and multi-line preview text string. Renders document cards with CheckCircle2 (signed) or AlertCircle (unsigned) status icons, document name, description, signedDate, and a ChevronRight expand trigger. Expanded documents show a preview panel with full text content. Unsigned documents render a signature capture canvas (useRef) with PenLine draw mode, Eraser tool, and X close button — useEffect sets up canvas mouse/touch drawing event listeners, useCallback handles draw operations. Signed documents show 'Signed on {date}' confirmation. Imports from '../styles/ConsentDocuments.css' and lucide-react (FileText, CheckCircle2, AlertCircle, ChevronRight, PenLine, X, Eraser).

As a frontend developer, implement the CheckInActions section for the CheckIn page. Uses useState for completing (boolean loading state) and framer-motion (motion, AnimatePresence) for staggered button entrance animations. buttonVariants defines initial={{ opacity: 0, y: 16 }} / animate={{ opacity: 1, y: 0 }}. shortcutVariants uses custom index prop for staggered delays (0.08 * i). cta-actions-row uses motion.div with staggerChildren: 0.1. Three primary action buttons: 'Complete Check-In' (CheckCircle icon, handleComplete sets completing=true for 1800ms, disabled during completing, whileTap scale 0.96, shows 'Processing...' text), 'Schedule Follow-up' (CalendarPlus icon, cta-btn--secondary), 'Send Reminder' (Bell icon, cta-btn--outline). A cta-divider separates the quick shortcuts section. quickShortcuts array of 3 items rendered as motion.a links: Messaging (/Messaging, MessageSquare), Patient History (/Records, ClipboardList), Treatment Notes (/EMR, FileText). Imports from '../styles/CheckInActions.css', framer-motion, and lucide-react.

As a frontend developer, implement the Footer section for the CheckIn page. Static functional component computing current year via new Date().getFullYear(). Renders ftr-root with a decorative ftr-glow aria-hidden element. ftr-inner contains: ftr-brand-block with Stethoscope icon (size 22), 'DentalOS' brand name, tagline paragraph about AI-powered dental OS, and ftr-socials row (Twitter→/Notifications, LinkedIn→/Notifications, GitHub→/Documents). ftr-cols nav renders 3 column groups — Clinical (Chairside, TreatmentPlan, Prescriptions, EMR, Records), Operations (Dashboard, Appointments, Inventory, Vendors, Analytics), Platform (AIAssistant, Compliance, Security, Settings, Portal) — each as h3 title + ul of ftr-link anchors. Compliance badges row shows ShieldCheck ('HIPAA Ready'), BadgeCheck ('HITECH Act'), Lock ('End-to-End Encrypted'). Copyright line shows dynamic year. Note: Footer component likely already exists from previous pages (Forecasting, Portal, Documents) — reuse if available. Imports from '../styles/Footer.css' and lucide-react (Stethoscope, Twitter, Linkedin, Github, ShieldCheck, Lock, BadgeCheck).

As a frontend developer, implement the ScheduleFilters sidebar section for the Schedule page. This section renders a collapsible filter panel (collapsed state toggled via setCollapsed) containing: (1) Provider multi-select using PROVIDERS array (6 providers: dr-chen, dr-patel, dr-nakamura, asst-maria, asst-james, hyg-lisa) with initials avatars and role labels, toggled via toggleProvider() with selectedProviders state initialized to all providers; (2) Room multi-select using ROOMS array (6 rooms: op1–op4, ortho1, surg1) with type badges (Op/Ortho/Surg), toggled via toggleRoom() with selectedRooms state; (3) Appointment type multi-select using APPT_TYPES array (consultation, treatment, follow-up, emergency, hygiene) with color swatches and appointment count badges, toggled via toggleType() with selectedTypes state; (4) Time range picker with timeFrom/timeTo time inputs and TIME_PRESETS buttons (Morning/Afternoon/All Day) that call applyPreset() to set preset time ranges and update activePreset state; (5) Reset-all button using RotateCcw icon restoring all initial selections; (6) ChevronDown icon for collapse toggle. Uses ScheduleFilters.css. Independent of other content sections — can be built in parallel.

As a frontend developer, implement the ScheduleViewControls toolbar section for the Schedule page. This section renders a view control bar with: (1) a date stepper with ChevronLeft/ChevronRight buttons that call stepDate(dir) — incrementing by day/week/month based on current view state; (2) a date display block showing formatMain() (e.g. 'Jun 5, 2026') and formatSub() (e.g. 'Week view') derived from MONTHS and WEEKDAYS arrays and refDate state initialized to new Date(2026, 5, 5); (3) a 'Today' jump button calling jumpToday() which resets refDate to new Date(2026, 5, 5); (4) a spacer element pushing view mode radios right; (5) an animated sliding pill view mode switcher for Day/Week/Month using VIEW_MODES array, with pill position calculated via useLayoutEffect measuring .svc-active element's offsetLeft/offsetWidth stored in pill state via useRef on viewsRef. Uses ScheduleViewControls.css. This is a standalone toolbar component — independent of ScheduleFilters, can be built in parallel.

As a frontend developer, implement the ScheduleFooter section for the Schedule page. This section renders a status footer bar with: (1) a sync status indicator using STATUS_COPY map (synced/syncing/offline states with label and sub-label text) driven by status state, with a pulsing dot animation (.sf-pulse/.sf-pulse-dot) and data-status attribute on the footer root for CSS state theming; (2) online/offline detection via window 'online'/'offline' event listeners in useEffect that call setStatus toggling between 'synced' and 'offline'; (3) a manual refresh button with RefreshCw icon that triggers handleRefresh() via useCallback — sets status to 'syncing', spinning state to true, then resolves after 1100ms timeout to 'synced' and updates lastUpdated timestamp; (4) spinning CSS class (.sf-spinning) applied to the refresh button during sync; (5) a last-updated Clock icon timestamp displaying formatTime(lastUpdated) in a time element; (6) a divider element; (7) a Help & Support link with LifeBuoy icon navigating to /Messaging. Uses ScheduleFooter.css.

Template storage per clinic/clinician, rendering API for short/long SOAP variants, EMR-compatible export formatting.

As a frontend developer, implement the UsersTable section for the Users page. Uses useState for selectedIds (Set) and currentPage; useMemo for paginatedUsers (ROWS_PER_PAGE=8 from 12 USERS); useCallback for event handlers. USERS array contains 12 mock staff entries with id, name, email, role, status (active/inactive/suspended), lastLogin, and initials. Renders rows with: colored initials avatar (getAvatarClass cycling AVATAR_COLORS: av-blue/av-coral/av-teal/av-purple/av-amber/av-indigo); name+email; role chip; status badge via formatStatusLabel; lastLogin; row action buttons (Pencil/Eye/UserX/Trash2 lucide icons). Checkbox-based row selection updating selectedIds Set. Pagination controls with ChevronLeft/ChevronRight and page indicators. AnimatePresence + motion.tr from framer-motion for row enter/exit animations.

As a frontend developer, implement the UsersPermissions section for the Users page. Uses useState for permissionMatrix (role×permission boolean grid) initialized from INITIAL_MATRIX and saveMessage; useCallback for handleToggle, handleSave, handleReset, and changedCount. ROLES array (5: super_admin/dentist/assistant/receptionist/inventory_mgr each with color hex). PERMISSIONS array (12 items: User Management, Financial Reports, Inventory Tracking, Patient Records, Appointment Scheduling, Prescription Management, Clinical Documentation, Audit Logs, System Configuration, AI Features, Billing & Insurance, Vendor Management). Renders an interactive permissions matrix grid: column headers per role (colored), row headers per permission, toggle cells using motion.button from framer-motion with Check icon for granted state. Header shows Shield icon, change count badge, Save button (Save lucide icon, disabled when no changes) and RotateCcw reset. AnimatePresence for saveMessage success notification. Info tooltip icon on header.

As a frontend developer, implement the Sidebar section for the Security page. This component uses useState for roleOpen and activeRole, rendering an aside.sb-root with NAV_GROUPS (4 groups: Overview, Clinical, Operations, Governance) each containing grouped nav items with lucide icons and badge counts (Appointments: '8', Messaging: '3'). The Security item under Governance is the active page (Lock icon). A role switcher dropdown renders ROLES array (Super Admin, Dentist, Dental Assistant, Receptionist, Inventory Manager) with ChevronDown toggle. STATS array (142 Active Patients, 8 Today's Visits, 5 Low Stock, 98% Compliance) renders as stat chips. Note: this Sidebar component likely already exists from Dashboard/Users pages — reuse or adapt the existing component.

As a frontend developer, implement the SecurityPageHeader section for the Security page. This purely presentational component renders an sph-root section with: a breadcrumb nav (Dashboard → Security) using ChevronRight separator, a header row containing an h1 'Security & Access Control' heading with a subtitle describing RBAC, audit trails, and HIPAA/HITECH readiness, plus an anchor CTA linking to /Compliance with a FileText icon ('View Compliance Report'). Below the header row, three info chips render using ShieldCheck ('HIPAA Compliant'), Lock ('Role-Based Access'), and BadgeCheck ('Full Audit Trail') lucide icons, followed by a decorative sph-divider.

As a frontend developer, implement the AccessControlOverview section for the Security page. Renders an aco-root section with a header row (h2 title, subtitle, and a 'Last audit: Jun 04, 2026' badge with Clock icon) and a 4-column aco-grid of anchor cards. Each card is built from the summaryCards array: Total Active Users (284, Users icon, links to /Users), Roles Configured (6, Shield icon), Permissions Granted (94 across 12 modules, Key icon), and Last Audit Date (Jun 04 2026, Clock icon, 5 findings 0 critical). Each card renders an icon row with a drill-down label and ArrowRight icon, a large metric value, a label, and a meta row that conditionally renders a CheckCheck icon. All cards are clickable anchor tags navigating to their respective href.

As a frontend developer, implement the RolePermissionsMatrix section for the Security page. This is a complex interactive component using useState for roles, searchQuery, activeFilter, editingRow, pendingChanges, toast state, and useRef/useCallback/useEffect for debouncing and outside-click detection. Renders a role-permission matrix with 6 roles (Admin, Dentist, Assistant, Receptionist, Inventory Manager, Patient) across 8 PERMISSION_COLUMNS (createUser, editUser, viewReports, manageInventory, approveTreatments, accessBilling, manageRoles, auditLogs). Features include: FILTERS tab bar (All Roles, Clinical, Operations, Admin) with search input (Search icon), per-row inline edit mode toggled by Pencil icon showing Save (Save icon) and Cancel (X icon) buttons, permission cell toggle between Check and Minus icons, role dot-class color coding (admin/dentist/assistant/receptionist/inventory/patient), and toast notifications using CheckCircle/AlertCircle icons for save confirmation/error states.

As a frontend developer, implement the UserSessionTracking section for the Security page. This component uses useState, useMemo, and useCallback with framer-motion (motion, AnimatePresence) for animated session cards. SESSIONS array contains 8 mock sessions with id, user, role, loginTime, lastActivity, ip, device, deviceType, and status fields. Renders device icons via getDeviceIcon helper (Smartphone/Tablet/Laptop/Monitor). Features: search input filtering by user/device/ip, role dropdown filter (ROLES array with 7 options), status filter tabs (All/Active/Idle/Expired using STATUSES array), a stats summary row showing active/idle/expired counts with Users icon. Session cards use AnimatePresence for enter/exit animations and display initials avatar, role badge, login/activity times via formatDateTime helper, IP address, and action buttons: LogOut (terminate session) and ShieldOff (revoke access) with AlertTriangle for suspicious sessions. An X button closes/dismisses individual cards.

As a frontend developer, implement the AuditLogsSection for the Security page. Uses useState and useMemo for filtering and pagination state. generateMockLogs function produces paginated audit log entries from POSSIBLE_ACTIONS (Create/Update/Delete/Login/Logout/Export), POSSIBLE_RESOURCES (10 types), POSSIBLE_USERS (8 usernames), and POSSIBLE_STATUSES arrays with realistic changesForAction before/after diff snapshots. Features: search input (Search icon) filtering by user/action/resource, action filter dropdown (ChevronDown), resource filter dropdown, status filter dropdown, date range inputs, reset filters button (RotateCcw icon) and clear (XCircle icon). Log rows render action-specific icons (Plus/Edit3/Trash2/LogIn/LogOut/FileOutput), timestamp, user, resource, status badge (Success/Failure/Pending), and expandable before/after change details. Pagination uses ChevronLeft/ChevronRight with page counter. Download button (Download icon) with FileText icon in section header for CSV export.

As a frontend developer, implement the ComplianceStatus section for the Security page. This component uses useEffect, useRef, and useMemo alongside framer-motion (motion) and THREE.js for a ParticleField background canvas. COMPLIANCE_ITEMS array defines 6 items (HIPAA Privacy & Security, HITECH Act, Disaster Recovery Plan, Encrypted Data Transmission, Audit Trail Completeness, Session Management & MFA) each with status ('pass'/'warn'/'fail'), lastVerified date, and auditor fields. STATUS_COUNTS and COMPLIANCE_SCORE (computed from pass×100 + warn×50 averaged over 6 items) drive a circular SVG progress gauge using CIRCUMFERENCE = 2π×42. StatusIcon component renders CheckCircle/AlertTriangle/XCircle based on status. ParticleField mounts a THREE.PerspectiveCamera scene on a canvas ref with animated particles, cleaning up on unmount. Compliance cards animate in via framer-motion with Calendar, Shield, FileCheck, Activity, Clock lucide icons in metadata rows.

As a frontend developer, implement the Footer section for the Security page. This presentational component renders an ftr-root footer with a decorative ftr-glow div, a brand block (Stethoscope icon, 'DentalOS' name, tagline about AI-powered dental OS), and social links (Twitter, LinkedIn, GitHub via lucide icons linking to /Notifications and /Documents). A 3-column nav (ftr-cols) renders Clinical (Chairside, TreatmentPlan, Prescriptions, EMR, Patient Records), Operations (Dashboard, Appointments, Inventory, Vendors, Analytics), and Platform (AI Assistant, Compliance, Security, Settings, Patient Portal) link groups. A bottom bar shows dynamic year via new Date().getFullYear(), copyright text, and three compliance badges: ShieldCheck ('HIPAA Ready'), BadgeCheck ('HITECH Act'), Lock ('End-to-End Encrypted'). Note: Footer component may already exist from Login/Users/Dashboard pages — reuse or reference existing component.

As a frontend developer, implement the ComplianceHero section for the Compliance page. This is a static hero section using ShieldCheck, ArrowRight, and ChevronRight icons from lucide-react. It renders three decorative background orbs (ch-bg-orb--1/2/3) and a grid overlay (ch-bg-grid) for visual depth. Includes a breadcrumb nav linking to /Dashboard with ChevronRight separator. The ch-title-row contains an h1 'Compliance Dashboard', subtitle text, and a 'Run Audit' CTA button with ShieldCheck and ArrowRight icons. A ch-status-row displays three status indicators: HIPAA Compliant (ok dot), HITECH Ready (ok dot), and Audit Pending (warn dot) using ch-status-dot CSS variants.

As a frontend developer, implement the ComplianceOverview section for the Compliance page. Uses ShieldCheck, BadgeCheck, CalendarCheck, FileCheck, CheckCircle2, and XCircle icons from lucide-react. Renders a coo-grid with multiple stat cards: (1) Overall Compliance Score card showing COMPLIANCE_SCORE (94%) with a coo-gauge-bar-fill div styled via inline width percentage; (2) HIPAA Status card showing a coo-badge with conditional pass/fail rendering using CheckCircle2 or XCircle; (3) Last Audit Date card referencing AUDIT_DATE constant ({day:12, month:'May', year:2026, daysAgo:24}); (4) Certifications card listing CERTIFICATIONS array ['ISO 27001', 'HIPAA', 'SOC 2 Type II', 'HITECH', 'GDPR']. All cards include a coo-card-accent decorative element. Static data, no state hooks.

As a frontend developer, implement the AuditTrail section for the Compliance page. This is a complex interactive table using useState, useMemo, and useCallback. Features include: a Search input filtering AUDIT_DATA (20+ entries) by action/user/details via useMemo; status filter tabs (All, Approved, Pending, Flagged, Rejected); paginated table with ChevronLeft/ChevronRight pagination controls; per-row action buttons using Eye (view details), Check (approve), X (reject), RotateCcw (reset); a detail panel toggled via Eye icon showing full audit details; column headers with ChevronDown sort indicators; user avatar initials badges; and status pills with color variants per status. AUDIT_DATA contains entries with id, date, action, user, initials, status, and details fields. FileSearch icon used for empty state.

As a frontend developer, implement the RegulatoryRequirements section for the Compliance page. Uses useState and useMemo with framer-motion AnimatePresence for animated accordion expansion. The requirements array contains 7+ items (hipaa, hitech, encryption, mfa, rbac, dr, baa) each with id, title, status ('compliant'|'pending'|'non-compliant'), description, lastAudit, owner, evidence, and criticality fields. Uses CheckCircle, AlertTriangle, XCircle icons for status indicators and Shield, Clock, FileText, UserCheck for metadata fields. ChevronDown rotates on accordion open/close via framer-motion animate. Filtering via useMemo by status tab. Each row expands to show owner, evidence, lastAudit, and criticality badge. Motion variants handle height/opacity transitions via AnimatePresence.

As a frontend developer, implement the ComplianceStatus section for the Compliance page. Integrates Chart.js (Bar chart via react-chartjs-2) with ChartJS.register for CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend. Uses useState for animated flag and tilt state, useEffect for a 200ms animation trigger, and useMemo for chartData and chartOptions. The TiltCard sub-component uses framer-motion animate with rotateX/rotateY driven by onMouseMove/onMouseLeave handlers computing tilt from bounding rect (±6deg). COMPLIANCE_HISTORY has 6 months of score data with optional audit markers. BREAKDOWN_CATEGORIES renders 4 progress bars (Policies 80%, Access Control 95%, Data Security 88%, Incident Response 92%) each with threshold lines. An SVG circular gauge shows OVERALL_SCORE (89%) using CIRCUMFERENCE = 2*PI*28 for stroke-dashoffset animation. ShieldCheck, AlertTriangle, TrendingUp, CheckCircle icons used for stat cards.

As a frontend developer, implement the SecurityCertifications section for the Compliance page. Renders a grid of 5 certification cards from the CERTIFICATIONS array (iso27001, hipaa, soc2, gdpr, hitech) each with name, org, issueDate, expiryDate, status ('active'|'warning'|'expired'), icon component reference, description, and certNumber. Helper functions: getStatusClass returns CSS modifier (sc-card--warning, sc-card--expired, sc-card--active); getPillClass returns pill modifier; getStatusLabel maps status to display text ('Renewal Due', 'Expired', 'Active'); getDaysUntil calculates days from expiry date; formatDate localizes to 'en-US' with year/month/day. Each card renders the cert's lucide icon (ShieldCheck, Lock, Server, FileCheck, BadgeCheck), status pill, org name, certNumber, description, issue/expiry dates, days-until countdown, and action buttons using Download, ArrowUpRight, RotateCw icons.

As a frontend developer, implement the ComplianceActions section for the Compliance page. Renders a two-column layout: left column with header (ca-title, ca-subtitle) and CTA action buttons using FileText (Generate Report), CalendarCheck (Schedule Audit), and Download (Export Data) icons; right column listing TASKS array (6 items) as a task list. Each task has id, name, desc, priority ('high'|'medium'|'low'), assignee, due date, and dueLabel. getDueClass helper computes CSS class ('overdue'|'soon'|'upcoming') by comparing due date to reference date '2026-06-05'. Each task card renders AlertCircle for overdue indicator, task name, description, Clock icon for due date, User icon for assignee, and ChevronRight for navigation. activeTasks counter shows TASKS.length. Static data, no state hooks.

As a frontend developer, implement the Footer section for the Compliance page. This shared Footer component reuses the same structure as Footer for Analytics (task 3f52dc11-bcba-44e7-9709-82c5395e9c40) — verify reuse before reimplementing. Uses Stethoscope, Twitter, Linkedin, Github, ShieldCheck, Lock, BadgeCheck icons from lucide-react. Renders ftr-brand-block with DentalOS brand name, tagline, and three social links (Twitter→/Notifications, LinkedIn→/Notifications, GitHub→/Documents). Three nav columns: Clinical (Chairside, TreatmentPlan, Prescriptions, EMR, Records), Operations (Dashboard, Appointments, Inventory, Vendors, Analytics), Platform (AIAssistant, Compliance, Security, Settings, Portal). Badges row shows HIPAA Ready (ShieldCheck), HITECH Act (BadgeCheck), End-to-End Encrypted (Lock). Footer bottom bar shows dynamic year via new Date().getFullYear() and copyright text.

As a frontend developer, implement the ProfileSettings section for the Settings page. This is the most complex section, featuring a 3D avatar rendered via @react-three/fiber Canvas and @react-three/drei OrbitControls. The AvatarHead component uses useRef and useFrame for smooth hover-rotation animation (targetRotY lerp logic) and renders a Three.js group with sphereGeometry head, cylinderGeometry neck, capsuleGeometry shoulders, and two eye sphere meshes using meshStandardMaterial. AvatarStage wraps the Canvas with hover state, file input ref for photo upload, and displays an img preview or 3D fallback. The main ProfileSettings component uses useState, useRef, useCallback, useEffect hooks for: avatarColor picker, imagePreview URL, hovered state, and a profile form. Uses framer-motion for animations and lucide-react: Upload, Trash2, Save, Camera, CheckCircle. Imports ProfileSettings.css and THREE from 'three'.

As a frontend developer, implement the AccountSecurity section for the Settings page. Uses useState for passwordForm ({current, newPass, confirm}), showPasswords (per-field toggles), errors object, mfaEnabled boolean, sessionList (4 SESSIONS with id, browser, ip, location, lastActive, isCurrent, device), toast string, and submitting boolean. Features: password change form with validatePassword logic (min 8 chars, uppercase, number, non-matching checks) and Eye/EyeOff toggle per field; MFA toggle with ShieldCheck/ShieldAlert status icons; RECOVERY_CODES display (6 codes); session management list rendering Monitor/Smartphone device icons, location/IP info, and LogOut button per session via handleLogoutSession filter. Uses framer-motion AnimatePresence for toast notifications. Uses lucide-react: Shield, Lock, Key, Eye, EyeOff, Smartphone, Monitor, Globe, LogOut, CheckCircle, ShieldCheck, ShieldAlert. Imports AccountSecurity.css.

As a frontend developer, implement the NotificationPrefs section for the Settings page. Uses useState for prefs object (email_enabled, appointment_reminders, treatment_updates, inventory_alerts, system_alerts, sms_enabled) and saveState ('idle' | 'saving' | 'saved'). Renders a motion.div card with opacity/y animation (framer-motion). Contains: card header with Bell icon and title/subtitle; EMAIL_TOGGLES list (4 items: Appointment Reminders, Treatment Updates, Inventory Alerts, System Alerts) each rendered as np-toggle-row with a custom ToggleSwitch component (role='switch', aria-checked, np-switch-thumb span); SMS notifications toggle row; and a save button with Check icon transitioning through saveState. The emailActive flag conditionally applies np-master CSS class to disable sub-toggles. Uses useCallback for handleToggle and handleSave. Uses lucide-react: Bell, Mail, MessageSquare, Check. Imports NotificationPrefs.css.

As a frontend developer, implement the ClincConfigSettings section for the Settings page. Uses useState for: clinicName string, timezone (from 10-item TIMEZONES array), hours object (7 days each with open/close time strings and enabled boolean), holidays array (3 preset entries with id/date/name), hipaaEnabled boolean, saving boolean, showToast boolean. Key interactions: toggleDay toggles individual day enabled state; updateDayTime updates open/close time per day; addHoliday appends new empty entry via Math.max id; updateHoliday maps to update field; removeHoliday filters by id. Renders tabs/sections for: Clinic Info (name input + timezone select), Hours of Operation (DAYS map with toggle chip + time inputs), Holiday Management (AnimatePresence list with Plus/Trash2 controls), HIPAA Compliance toggle with Shield icon, and audit info footer (lastUpdatedBy Dr. Sarah Chen, version 3.2.1). Save triggers setSaving with setTimeout and showToast. Uses framer-motion AnimatePresence, lucide-react: Building2, Clock, Calendar, Shield, Save, Check, Plus, Trash2, Eye, Clock3, User. Imports ClincConfigSettings.css.

As a frontend developer, implement the IntegrationSettings section for the Settings page. Initializes state from INTEGRATIONS array (4 entries: OpenAI, Amazon S3, Google Workspace, Twilio — each with id, name, description, iconClass, keyLabel, keyMasked, keyFull) mapped to include enabled, expanded, keyVisible, and testStatus (null | 'testing' | 'success' | 'fail'). Interaction handlers: toggleIntegration enables/disables and collapses; toggleExpand shows/hides API key panel; toggleKeyVisibility switches between keyMasked and keyFull display using Eye/EyeOff; testConnection sets testStatus to 'testing' then resolves to 'success' or 'fail' via 1500ms setTimeout with Math.random(); disconnectIntegration resets all fields to disabled. getStatusBadge returns label/CSS class based on enabled+testStatus. Renders integration cards with status badge, expand chevron, and conditionally rendered key management panel. Uses lucide-react: Plug, Plus, Eye, EyeOff, RefreshCw, Unplug, CheckCircle, XCircle, Loader2. Imports IntegrationSettings.css.

As a frontend developer, implement the DangerZone section for the Settings page. Uses useState for modal (null or a DANGER_ACTIONS item). DANGER_ACTIONS array defines 4 destructive actions: Reset Password (Lock icon, outline variant), Clear Application Cache (RotateCcw icon, outline variant), Export Account Data (Download icon, outline variant), Delete Account (Trash2 icon, danger variant). Renders a dz-card with dz-header containing AlertTriangle icon and warning text. Maps DANGER_ACTIONS into dz-action-row items each displaying the action icon, label, description, and a trigger button (variant-aware styling). openModal sets modal state; closeModal nulls it; handleConfirm calls closeModal. Modal overlay renders confirmTitle, confirmDesc, and a confirmBtn button (danger-styled for delete action). Uses lucide-react: AlertTriangle, Lock, Trash2, Download, RotateCcw. Imports DangerZone.css.

As a frontend developer, implement the AppointmentsCalendar section for the Appointments page. Uses useState, useCallback, useRef. Defines MONTHS (12), DOW (7), TODAY (Date with zeroed hours), HOUR_LABELS (7AM–6PM, 12 slots), and APPOINTMENTS_DATA (20+ appointments with id, patient, time, provider, status: scheduled/confirmed/urgent/completed/cancelled, date strings in 2026-06). Implements full monthly calendar grid: ChevronLeft/ChevronRight navigation for month/year, day cells highlighting today, rendering appointment chips per day with status-colored indicators. Day click opens detail panel or day-view. Time grid view (week/day) using HOUR_LABELS for hourly slot rows with appointments positioned by time. Appointment detail modal/panel with X close button showing patient, time, provider, status. All navigation via useCallback-memoized handlers, ref used for scroll/positioning. Imports AppointmentsCalendar.css.

As a frontend developer, implement the AppointmentsList section for the Appointments page. Uses useState for appointments (10-item APPOINTMENTS array with id, time, patient, patientId, provider, providerRole, service, status: confirmed/scheduled/checked-in/pending/cancelled, notes), selectedIds (Set), editingId, editValues, sortField ('time'), sortDir ('asc'), hoveredRow. Uses useMemo for sorted/filtered appointments and useCallback for handlers. Renders sortable table columns (time, patient, provider, service, status) with ArrowUpDown/ArrowUp/ArrowDown icons. Row-level inline editing via Edit3/Save/XCircle icons updating editValues state. Bulk selection via CheckSquare column with Set-based selectedIds toggle. Per-row action buttons: Eye (view), LogIn (check-in), RefreshCcw (reschedule), CalendarX (cancel). formatTime utility splits HH:MM into hour/minute/period. Status badges with color classes per status value. AnimatePresence from framer-motion for row enter/exit animations. Provider role chip with Stethoscope/User icons. Collapsible notes via ChevronDown. Imports AppointmentsList.css.

As a frontend developer, implement the ChairsidePatientPanel section for the Chairside page. This aside panel uses useState(false) for an expanded/collapsed mobile toggle controlled by a cpp-collapse-bar button with aria-expanded and ChevronDown icon. Static patient data object (PATIENT) contains name 'Maria Rodriguez', initials 'MR', patientId 'PT-082914', age 42, DOB, sex, blood type, and contact. Renders three data sub-sections: ALLERGIES array (Penicillin/severe/Anaphylaxis, Latex/moderate, Sulfa/moderate) with SEVERITY_ICON mapping AlertTriangle for severe and AlertCircle for moderate; CONDITIONS array with active/chronic/resolved status badges (Periodontitis Stage II, Type 2 Diabetes, Caries #14/#19, Gingival recession); TREATMENT_HISTORY array of 4 past procedures with formatDate() helper and a 'latest' chip flag; and NOTES array of 3 clinical notes with alert boolean flag, date, and author. Apply ChairsidePatientPanel.css with cpp- prefixed classes.

As a frontend developer, implement the ChairsideConsultationView section for the Chairside page. This is the most complex section, featuring: a Three.js/React Three Fiber 3D DentalModel component using useFrame for sinusoidal rotation and floating animation (groupRef with capsuleGeometry tooth, cylinderGeometry root, crown highlight mesh using meshStandardMaterial with transparency); a session timer with useState(timerRunning, elapsed) and setInterval control via Play/Pause/Square buttons; a chartTab state toggling between 'vitals' and other tabs displaying CHART_STATS (BP Sys, BP Dia, HR, SpO2); a whiteboard/annotation canvas using useRef and useCallback with WHITEBOARD_COLORS palette (6 colors), tool states for MousePointer/PenTool/SquareIcon/Circle/Type, and Palette color picker; video/camera controls with Mic/MicOff/Video/VideoOff toggle states; IMAGING_MODALITIES tab bar (Bitewing, Pano, CBCT, Intraoral) with Upload and Trash2 actions; and Framer Motion AnimatePresence for panel transitions. Requires three, @react-three/fiber, and framer-motion dependencies. Apply ChairsideConsultationView.css.

As a frontend developer, implement the ChairsideTranscriptionPanel section for the Chairside page. This panel renders INITIAL_TRANSCRIPTS (8 entries) with per-speaker color coding via SPEAKER_COLORS object (dentist '#1C2B4A', assistant '#4E7CC2', patient '#6c8ebf'). Each transcript entry shows speaker initials via getSpeakerInitials(), name, timestamp, text, and a confidence badge using getConfidenceLabel() (high: '98%+', medium: '87-97%', low: '<87%') and getConfidenceClass() for styling. Features inline edit mode per transcript entry using Edit3/Check/X icons with local edit state. Includes a Mic recording toggle button, ChevronDown/ChevronUp collapse control, and AlertCircle for low-confidence entries. Uses useState for editing state and useRef/useEffect/useCallback for scroll-to-bottom behavior on new transcript entries. Renders with ctp- prefixed classes from ChairsideTranscriptionPanel.css. MessageSquare icon used in panel header.

As a frontend developer, implement the ChairsideAIAssistant section for the Chairside page. This panel renders AI-generated clinical RECOMMENDATIONS (4 entries: composite restoration rec-1, periapical radiolucency rec-2, full-coverage crown rec-3, SOAP note draft rec-4) each with a confidence badge ('high'/'medium'), status ('pending'), suggestedText, and reasoning field. Features a TABS filter bar (All, Treatment, Imaging, SOAP Drafts) with useState for activeTab filtering of recommendations. Each recommendation card shows Sparkles icon branding, type-specific icons (Stethoscope for treatment, ScanEye for imaging, FileText for SOAP, Brain/Lightbulb for reasoning), ChevronUp/ChevronDown expand/collapse toggle per card, and Accept (Check)/Reject (X)/Edit (Edit3) action buttons that update individual recommendation status via useState. Apply ChairsideAIAssistant.css with card and tab styles.

As a frontend developer, implement the ChairsideSOAPNotes section for the Chairside page. The component uses useState for openSections (default ['subjective', 'objective']), notes object with four SOAP keys, and saveState ('saved'/'saving'/'unsaved'). SOAP_SECTIONS array (4 entries: S/O/A/P) drives accordion rendering with toggleSection() handler and ChevronDown expand indicators; aiPrefilled flag shown via Sparkles badge. Subjective section renders chief complaint and history fields. Objective shows clinical findings textarea and vitals string. Assessment renders DIAGNOSES array (3 ICD codes: K02.1, K05.1, K04.0) with 'confirmed'/'differential' status chips and a notes textarea. Plan renders PROCEDURES array (3 CDT codes: D2391, D4341, D0274) with tooth/status columns and a followUp textarea. handleNoteChange updates nested notes state; a Save button with RotateCcw/CheckCircle/Save icons reflects saveState. ClipboardList, User, Stethoscope, AlertCircle, Zap, Activity, Calendar icons used for section headers. Apply ChairsideSOAPNotes.css with csn- prefixed classes.

As a frontend developer, implement the ChairsideTreatmentDecision section for the Chairside page. This form panel manages: prescription selection via a custom dropdown (prescriptionOpen boolean state, PRESCRIPTIONS array of 7 Rx items with id/name/dosage/category, selectedRx computed value) rendered with ChevronDown, Pill, and X icons; follow-up scheduling with followupDate (date input), followupTime (default '10:00'), and followupType (FOLLOWUP_TYPES array: recall/suture/postop/adjusted) states with formatDate() helper; REQUIRED_DOCS checklist (3 items: Treatment Plan, Informed Consent, Clinical Notes) with docsApproved boolean state and ShieldCheck/AlertCircle validation icons; form validation via missingCount computed from 3 required fields; handleSaveDraft() async function with savingDraft state simulating 800ms network delay and setToastMsg toast notification; handleSubmit() async with submitting state and 1200ms delay; Save/Send/ClipboardList icons for action buttons. Apply ChairsideTreatmentDecision.css.

As a frontend developer, implement the ChairsideFooter section for the Chairside page. The component uses useState for now (Date), sessionLive (boolean, default true), and savedLabel string; lastSavedRef (useRef) tracks last-save timestamp. Two useEffect hooks: one ticks setInterval every 1000ms to update now clock formatted by formatClock(); another computes relative savedLabel ('just now', 'Xs ago', 'Xm ago') every 4000ms based on elapsed seconds since lastSavedRef.current. Renders compliance badges via COMPLIANCE_BADGES array (HIPAA/ShieldCheck, HITECH/Lock, RBAC Enforced/FileCheck2). QUICK_LINKS array (Records, Compliance, Security, Settings) renders nav links. Status cluster shows session dot (csf-dot--live vs csf-dot--idle), Activity clock, and Save last-saved label. A 'Pause Session'/'Resume Session' toggle button uses toggleSession() which resets lastSavedRef on resume. Apply ChairsideFooter.css with csf- prefixed classes. Note: a Footer component may exist from prior pages — this is a specialized chairside variant with HIPAA compliance badges and live session state.

As a frontend developer, implement the Navbar section for the Records page. This component (likely already exists from Appointments/Chairside pages) uses useState for isDark theme toggle and menuOpen drawer state. Renders nav-root with nav-brand (Activity icon + NovaDent OS branding), PRIMARY_LINKS array mapping 6 nav-links (Dashboard, Appointments, Patients, EMR, Analytics, Inventory), nav-actions with Sun/Moon theme toggle button, Sign In CTA anchor, and hamburger Menu/X toggle. DRAWER_LINKS array contains 14 links rendered in nav-drawer with conditional 'open' class. Imports Navbar.css. Reuse existing Navbar component if already built from prior pages.

As a frontend developer, implement the AIAssistantHero section for the AIAssistant page. This section uses framer-motion hooks (useScroll, useTransform, useInView, AnimatePresence) with a containerRef for scroll-driven parallax on two layers (bgTranslateY and shapesTranslateY shifting 0→-120px and 0→-240px respectively). Implement magnetic word-reveal animation using headlineWords array ['AI', 'Assistant', 'Module', 'Overview'] with per-word spring stagger via wordVariants (opacity/y/blur/scale, delay i*0.12). Include wordsRevealed state triggered on isInView with 200ms delay. Implement CTA pulse glow using ctaGlow state (set after 1200ms) with ctaGlowVariants cycling boxShadow with rgba(232,81,58,...) pulses. Add eyebrow badge (eyebrowVariants), subheadline (subVariants delay 0.6), description (descVariants delay 0.8), and CTA button (ctaVariants spring delay 1.0) all with AnimatePresence-aware entry animations. PAGE-LEVEL: This is the first/hero section — include depends_on parent page task ID ['15604f66-bdc2-4ded-9aa6-06669d60f965'].

As a frontend developer, implement the ScheduleCalendarGrid section for the Schedule page — the most complex section. This section renders a multi-provider weekly calendar grid with: (1) PROVIDERS array (dr-chen, dr-patel, dr-nguyen, hyg-williams) as column headers with color-coded initials avatars; (2) TIME_SLOTS array (8:00 AM–5:30 PM in 30-min increments) as row labels on the left axis; (3) APPOINTMENTS_DATA array (15+ appointments) rendered as colored blocks using APPOINTMENT_TYPES CSS classes (scg-appt-checkup, scg-appt-orthodontics, scg-appt-surgery, scg-appt-hygiene, scg-appt-emergency) positioned by startHour/startMin/duration pixel calculations; (4) appointment status badges from APPOINTMENT_STATUSES (confirmed/pending/in-progress/checked-in); (5) urgent flag indicator on appointments with urgent:true; (6) click-to-select appointment interaction with selected appointment state; (7) hover tooltip overlay showing patient name, type, time, note details with CalendarPlus/Clock/User/Calendar/Scissors/X/Edit3 lucide icons; (8) 'Add appointment' slot click via CalendarPlus icon on empty cells; (9) useCallback and useMemo for performance optimization of appointment filtering and layout calculations. Uses ScheduleCalendarGrid.css.

As a frontend developer, implement the UsersBulkActions section for the Users page. Uses useState for selectedUsers (DEMO_SELECTED: 3 users), visible, confirmMode, confirmActionLabel, isProcessing; useRef (panelRef); useCallback for handleDismiss, openConfirm, closeConfirm, handleConfirm; useEffect for Escape key listener (closes confirm modal or dismisses panel). Renders a floating uba-panel using motion.div with spring animation (y: 80→0, stiffness: 340, damping: 30) wrapped in motion.div uba-overlay. Panel shows selected user count, action buttons (CheckCircle 'Activate', XCircle 'Deactivate', Mail 'Email', UserCog 'Change Role', FileDown 'Export', X dismiss). openConfirm() triggers a modal overlay with motion.div (scale: 0.94→1, spring) showing AlertTriangle warning, confirmActionLabel, user list, and Confirm/Cancel buttons. isProcessing shows 800ms spinner delay via setTimeout. Returns null when !visible.

As a frontend developer, implement the RecordsSidebar section for the Records page. Uses useState for searchQuery, activeFilter ('active' default), selectedPatient ('PT-10482' default), and mobileOpen. Renders a mobile toggle button with Menu/X icons and 'Patient Records' label. The aside element gains 'open' class when mobileOpen is true. Includes rsb-search-box with Search icon and controlled text input filtering PATIENTS array by name and ID. 'New Record' button with Plus icon. FILTERS array renders 3 filter items (Active 124, Archived 48, Awaiting 17) each with colored dot indicators and counts. PATIENTS array of 10 patients rendered as list items with avatar initials (avatarClass A-G variants), patient name, and ID — clicking sets selectedPatient. Imports RecordsSidebar.css.

As a frontend developer, implement the RecordsHeader section for the Records page. Uses useState for hasDateFilter (false default) with handleClearDateFilter handler. Renders rh-root header with two rows: top row contains rh-breadcrumbs nav (Dashboard → Patients → Patient Records using ChevronRight separators and anchor links) and rh-actions div with Print (Printer icon), Export (Download icon), and Archive (Archive icon with rh-action-btn--accent modifier) buttons. Bottom row renders rh-title-group with h1 'Patient Records' title and rh-count-badge showing Users icon + '1,284 patients'. Conditionally renders rh-date-range pill with Calendar icon, date range text, and X clear button when hasDateFilter is true. Imports RecordsHeader.css.

As a frontend developer, implement the RecordsSearchFilter section for the Records page. Uses useState for searchQuery, activeFilters (object keyed by group), sortOpen, and sortBy ('recent' default). Uses useRef on sortRef and useEffect to close sort dropdown on outside click via mousedown listener. FILTER_GROUPS array has 4 groups (status, treatment, lastVisit, priority) each with labeled options and counts. toggleFilter handler adds/removes options from activeFilters object, deleting empty group keys. clearAllFilters resets all state. SORT_OPTIONS array of 6 items rendered in a dropdown toggled by sortOpen state. Displays activeFilterCount badge, totalFilteredRecords count ('462'), SlidersHorizontal and ArrowUpDown icons, Check icon for selected sort option, and RotateCcw reset button when hasActiveFilters is true. Imports RecordsSearchFilter.css.

As a frontend developer, implement the RecordsPatientOverview section for the Records page. Uses framer-motion (motion, AnimatePresence) and useState for expanded toggle. PATIENT object contains demographics (dob, age, gender, bloodType, phone, email, address, emergencyContact), insurance (provider, plan, memberId, groupNumber), and treatmentStatus (currentPhase, nextAppointment, primaryDentist, totalVisits, startedDate). Renders rpo-card with clickable rpo-header (role=button, aria-expanded) showing avatar initials 'MC', patient name, ID tag, status pill with rpo-status-dot, and animated ChevronDown chevron with 'open' class. Quick actions row has Message (link to /Messaging), Call (tel: link), and CalendarPlus appointment button with primary-action class. AnimatePresence wraps expanded details panel revealing demographics grid (User, Mail, Phone, MapPin, Cake, Heart icons), insurance block (Shield icon), and treatment status (FileText icon). Imports RecordsPatientOverview.css.

As a frontend developer, implement the RecordsTreatmentHistory section for the Records page. Uses framer-motion (motion, AnimatePresence), useState for expandedId and activeFilter, useRef for scroll container, useCallback for toggle handler, and useEffect for scroll behavior. treatmentEntries array contains 5+ clinical records with fields: id, date, procedure, status (completed/in-progress/pending), dentist, duration, teeth array, notes, anesthesia, followUp. Renders filter tabs for All/Completed/In Progress/Pending. Each entry renders as a timeline card with Calendar, Clock, User, Activity icons, status badge with color variants, teeth tags, and ChevronDown expand toggle. AnimatePresence wraps expanded detail panel showing full clinical notes, anesthesia info, follow-up text, and Stethoscope/ClipboardList/FileText icon sections. Imports RecordsTreatmentHistory.css.

As a frontend developer, implement the RecordsDocuments section for the Records page. Uses useState for activeCategory filter and drag-drop state, useCallback for drop handlers, and useRef for file input. DOCUMENT_FILTERS array has 6 categories (all, treatment-plan, imaging, consent, referral, insurance). DOCUMENTS array contains 9 files with id, name, type (pdf/xray/image/doc/other), category, size, date, and icon fields. getFileIconEl() maps file types to lucide icons (FileText, Image, ScanLine, FileArchive). Renders category filter tabs, drag-and-drop upload zone with CloudLightning/Upload icons that activates on dragover, Upload button triggering hidden file input. Document list renders each file with icon, name, size, formatDate() formatted date, and action buttons: Eye (preview), Download, Trash2 (delete). FolderOpen empty state shown when no documents match filter. Imports RecordsDocuments.css.

As a frontend developer, implement the RecordsPrescriptions section for the Records page. Uses useState for search string and activeFilter ('all' default). PRESCRIPTIONS array of 8 dental prescriptions with fields: id (RX-2026-XXXX), medication, dosage, dateIssued, dentist, status (active/fulfilled/expired), and type (antibiotic/analgesic/antimicrobial/anesthetic/corticosteroid). FILTER_OPTIONS array of 8 tabs filtering by both status and medication type. filteredPrescriptions computed by matching search against medication, dentist, and id fields AND matching activeFilter against status or type. Renders search input with Search icon, filter tab bar, and prescription card list. Each card shows Pill icon, RX id badge, medication name, dosage text, Calendar+date, User+dentist, Clock+dateIssued, status badge with color variants, and Printer/Eye action buttons. Imports RecordsPrescriptions.css.

As a frontend developer, implement the RecordsNotes section for the Records page. Uses useState for activeType filter, expandedId, and new note modal state. NOTE_TYPES array has 5 filter tabs (all, soap, progress, consult, referral). NOTES_DATA array contains rich note objects with: id, type, typeLabel, title, author, created, modified, hasAi flag, aiConfidence percentage, subjective, objective, assessment, plan (SOAP fields), aiRecommendation text, and annotations array. Renders filter tab bar and note cards. Each card shows type badge, title, author (User icon), created date (Calendar icon), modified time (Clock icon), AI confidence badge with Sparkles icon when hasAi is true. Expanded state reveals full SOAP sections (subjective/objective/assessment/plan) with CheckCircle/AlertCircle/FileText/MessageSquare icons, aiRecommendation panel with Sparkles, and annotations list with author initials avatars. Card actions: Edit3, Trash2, Eye, Share2 buttons. Plus button opens new note composer. Filter icon for Filter. Imports RecordsNotes.css.

As a frontend developer, implement the Footer section for the Records page. This component (likely already exists from Appointments page) is a static functional component that derives year via new Date().getFullYear(). Renders ftr-root with ftr-glow decorative element. ftr-brand-block contains Stethoscope icon (size 22), 'DentalOS' brand name, and tagline paragraph. ftr-socials renders 3 social links (Twitter, Linkedin, Github icons from lucide-react) linking to /Notifications and /Documents. ftr-cols nav renders 3 column groups — Clinical (Chairside, TreatmentPlan, Prescriptions, EMR, Patient Records), Operations (Dashboard, Appointments, Inventory, Vendors, Analytics), Platform (AIAssistant, Compliance, Security, Settings, Portal). badges array renders 3 compliance badges: HIPAA Ready (ShieldCheck), HITECH Act (BadgeCheck), End-to-End Encrypted (Lock). Imports Footer.css. Reuse existing Footer component if already built.

As a frontend developer, implement the Navbar section for the Files page. This component (reused from Records/other pages) uses useState for isDark (theme toggle) and menuOpen (mobile drawer). Renders nav-root with nav-inner containing: nav-brand with Activity icon and NovaDent OS branding, nav-links mapping PRIMARY_LINKS (Dashboard, Appointments, Patients, EMR, Analytics, Inventory), nav-actions with Sun/Moon theme toggle button, Sign In CTA anchor, and Menu/X burger button. A nav-drawer div conditionally applies 'open' class based on menuOpen state, rendering DRAWER_LINKS (14 links including Schedule, Records, TreatmentPlan, Prescriptions, Compliance, Messaging, Settings). Component may already exist from Records page (task 0f05248b). Apply Navbar.css styles.

As a frontend developer, implement the AIAssistantClinicModel section for the AIAssistant page. This section renders an interactive 3D clinic floor plan using @react-three/fiber Canvas with @react-three/drei components (PerspectiveCamera, Text, Box, RoundedBox, Plane, OrbitControls, Environment). Four ROOMS data objects (consultation, surgery, recovery, admin) each have id, label, name, shortDesc, features array, position [x,y,z], color hex, and emoji icon. Implement RoomMesh component using useFrame for smooth scale lerp (1→1.08 on hover) and Y-position float (+0.15 on hover), with isActive/dimmed/hoveredRoomId logic controlling visual state via THREE.Vector3. Wire up onRoomClick and onRoomHover callbacks from parent state. Manage activeRoom and hoveredRoomId state in parent AIAssistantClinicModel component. Use AnimatePresence + framer-motion for the 2D side-panel that appears when a room is selected, showing room.name, room.shortDesc, and room.features list. Import THREE for Vector3 lerp operations. Section is independent of other content sections — depends only on the Hero section establishing page context.

As a frontend developer, implement the AIAssistantFeatures section for the AIAssistant page. This is a static feature grid rendered with framer-motion entrance animations. Implement the features array of 6 items (SOAP Note Generation, Speech-to-Text Transcription, Treatment Recommendations, Imaging Analysis, Predictive Monitoring, Inventory Forecasting), each with a title, desc, and inline SVG icon component. Each feature card uses motion.div with whileInView viewport-triggered animations. SVG icons are hand-coded with viewBox='0 0 24 24', stroke-based paths (strokeWidth 1.8, strokeLinecap/strokeLinejoin round). No state or API calls — pure presentational grid. Section is independent of AIAssistantClinicModel and can be built in parallel.

As a frontend developer, implement the AIAssistantUseCases section for the AIAssistant page. Implement the useCases array of 3 workflow cards (dentist-consultation, inventory-forecasting, treatment-monitoring), each with id, icon emoji, step label, title, description, beforeValue/beforeUnit/beforeDetail, afterValue/afterUnit/afterDetail, and benefits string array. Implement UseCaseCard component as a motion.div with alternating x-slide entrance (index % 2 === 0 ? -60 : 60) using whileInView with once:true and margin '-60px', transition duration 0.7 with cubic-bezier [0.25,0.46,0.45,0.94] and delay index*0.18. Each card renders a header, a before/after comparison panel with arrowIcon SVG (path 'M4 10H16M16 10L11 5M16 10L11 15'), and a benefits chip list. Imports from both UseCaseCard.css and AIAssistantUseCases.css. No state management — pure presentational. Independent of AIAssistantClinicModel and AIAssistantFeatures sections — can be built in parallel with them.

As a frontend developer, implement the AIAssistantCTA section for the AIAssistant page. Implement ParticleBurst component that renders PARTICLE_COUNT=10 particles using AnimatePresence + motion.div with particleVariants (rest: opacity 0 / scale 0 / x,y 0; burst: opacity [0,1,0] / scale [0,1.2,0] / x and y computed via Math.cos/Math.sin over full circle * SPREAD_RANGE=80 * random 0.6–1.4 factor, duration 0.8 easeOut). ParticleBurst accepts colorClass and burstKey props, positioned at left/top 50% with translate(-50%,-50%). AIAssistantCTA manages primaryBurst and secondaryBurst integer states incremented via handlePrimaryClick (useCallback) and handleSecondaryClick (useCallback) on button clicks, passing burst count as burstKey to trigger re-mount particle bursts. Render aicta-root section with aicta-bg-layer (CSS var --scroll parallax -0.15), aicta-shapes-layer (--scroll parallax -0.3) with three shape divs, and aicta-content with headline, description, and two motion.button elements (whileHover scale 1.08, whileTap scale 0.95) — 'Access AI Assistant' (primary) and a secondary CTA. Inline SVG arrow icon on primary button.

As a frontend developer, implement the Navbar section for the EMR page. This component (shared across pages — may already exist from Files, Patients, or AIAssistant pages) uses useState hooks for isDark (theme toggle) and menuOpen (mobile drawer). Renders a nav-root with nav-inner containing: nav-brand with Activity icon and 'NovaDent OS' branding, nav-links mapping PRIMARY_LINKS (Dashboard, Appointments, Patients, EMR, Analytics, Inventory), nav-actions with Sun/Moon theme toggle button, Sign In CTA anchor, and Menu/X burger button. A conditional nav-drawer with nav-drawer-inner maps DRAWER_LINKS (14 items including Schedule, Records, TreatmentPlan, Prescriptions, Compliance, Messaging, Settings). Uses lucide-react icons Activity, Sun, Moon, Menu, X. Imports Navbar.css.

As a frontend developer, implement the ScheduleApptDetails slide-in panel section for the Schedule page. This section renders an animated appointment detail drawer using framer-motion AnimatePresence/motion for open/close transitions, with: (1) SAMPLE_APPOINTMENT data (apt-2047, Margaret Chen, Dr. Sarah Kim DDS, Orthodontic Adjustment, June 5 2026, 2:30–3:15 PM, Operatory 3) displayed in structured fields; (2) patient contact info with Phone/Mail/User lucide icons; (3) appointment metadata (Clock, Calendar, Stethoscope, FileText icons); (4) inline field editing — startEditField(field, value) sets editingField/editValue state, saveField() commits changes via setAppointment spread update, with inputRef auto-focused and auto-selected via useEffect; (5) notes textarea editing via editNotes/notesValue state with textareaRef focus via useEffect; (6) STATUS_OPTIONS dropdown (confirmed/pending/completed/cancelled with color-coded icons: CheckCircle/AlertCircle/XCircle) toggled via showStatusDropdown with outside-click dismissal via statusRef; (7) cancel confirmation flow via cancelConfirm state with MessageSquarePlus/RefreshCw action icons; (8) mobile responsive detection via isMobile state set by window resize listener; (9) close button via handleClose() setting isOpen false. Uses ScheduleApptDetails.css.

As a Tech Lead, verify the end-to-end integration between the Login/Register frontend implementation and the Auth backend API. Ensure: login form submits to POST /auth/login and receives JWT tokens stored in auth context; registration flow submits to POST /auth/register and redirects to login; refresh token interceptor silently refreshes expired tokens; protected routes redirect unauthenticated users to /Login; MFA verification flow wires to POST /auth/mfa/verify; session list in Settings/AccountSecurity fetches from GET /auth/sessions and DELETE /auth/sessions/{id} terminates sessions correctly; logout clears tokens and redirects. Note: depends on LoginForm (234af19e), RegisterContainer (722cc58b), AccountSecurity (307a59b8), and Auth API (temp_backend_auth).

As a Tech Lead, verify the end-to-end integration between the Appointments and Schedule frontend implementations and the Appointments backend API. Ensure: AppointmentsCalendar and AppointmentsList fetch from GET /appointments with correct date/provider/status filters; booking via AppointmentsList posts to POST /appointments; reschedule calls PUT /appointments/{id}; cancel calls DELETE /appointments/{id}; check-in action calls POST /appointments/{id}/check-in; CheckIn page queue fetches today's appointments from GET /appointments/today; Schedule page calendar grid loads from GET /schedule with provider-column layout; real-time status changes via WebSocket update the UI without page reload. Note: depends on AppointmentsCalendar (05fb81d0), AppointmentsList (f29abfe1), CheckInQueue (40d48761), ScheduleCalendarGrid (d5df99e1), and Appointments API (temp_backend_appointments).

As a frontend developer, implement the Sidebar section for the EMR page. This component (shared — may already exist from prior pages) uses useState for roleOpen (role dropdown toggle) and activeRole (selected role object from ROLES array with ShieldCheck, Stethoscope, HeartPulse, CalendarDays, Package icons). Renders sb-root aside with: sb-brand block with Activity icon and 'DentalOS' branding; NAV_GROUPS array (4 groups: Overview, Clinical, Operations, Governance) each with heading and items including icons from lucide-react and optional badge values (Appointments: '8', Messaging: '3'); STATS array rendering 4 stat tiles (142 Active Patients, 8 Today's Visits, 5 Low Stock, 98% Compliance) with cls variants; role switcher dropdown with ChevronDown toggle revealing ROLES list with active role icon display; UserCog and LogOut action buttons. Imports Sidebar.css.

As a frontend developer, implement the EMRWelcomeBanner section for the EMR page. Uses useState for currentTime (initialized via formatTime()) and alertDismissed (boolean). A useEffect sets a 30-second interval to update currentTime via setInterval/clearInterval. Renders ewb-root section with ewb-inner containing: ewb-top-row with ewb-greeting-block (avatar showing initials 'DS', greeting text from getTimeOfDayGreeting() returning Good Morning/Afternoon/Evening based on hour, and doctorName 'Dr. Smith') and ewb-meta-row (CalendarDays + formatDate(), Clock + currentTime, MapPin + clinicLocation '742 Evergreen Terrace'). Conditionally renders ewb-alert (role=alert) with AlertTriangle icon, critical notification title, maintenance window message, and X dismiss button that sets alertDismissed to true. Uses lucide-react icons CalendarDays, Clock, MapPin, AlertTriangle, X. Imports EMRWelcomeBanner.css.

As a frontend developer, implement the EMRQuickStats section for the EMR page. Uses useState for active role selection. Renders role-specific stat cards from ROLE_STATS object with four role keys: dentist (Patients Scheduled Today=12, Pending Documentation=4, Completed Today=6, Active Treatment Plans=38), receptionist (Upcoming Appointments=24, Check-Ins=9, New Registrations=5, Pending Follow-Ups=11), inventoryManager (Low Stock=7 with alert flag, Out of Stock=2 with alert flag, Pending Reorders=5, Total Inventory Value=$42,850), clinicOwner (Revenue YTD=$486,200, Pending Tasks=14, Active Patient Growth=+18, Compliance Score=98.5%). Each stat card includes value, trend indicator (TrendingUp/TrendingDown/Minus icons), trendLabel, footer note, and optional alert styling. Uses lucide-react icons BarChart3, Users, ClipboardCheck, TrendingUp, TrendingDown, Minus, DollarSign, Package, AlertTriangle, CalendarCheck. Imports EMRQuickStats.css.

As a frontend developer, implement the EMRPatientQueue section for the EMR page. Uses useState for activeView (clinical/reception toggle) and searchQuery, plus useMemo for filtered patient lists. Uses framer-motion (motion, AnimatePresence) for animated patient card entrance/exit. Renders two datasets: CLINICAL_PATIENTS (8 patients: Eleanor Vance in-progress Op1, Marcus Webb checked-in Op2, Sophia Torres checked-in Op3, James Okonkwo waiting Op4, Linh Nguyen completed, David Rosenthal no-show, Amara Osei checked-in Op2, Carlos Mendez checked-in Op3) with fields id/mrn/initials/avatarBg/time/wait/chair/procedure/dentist/status; and RECEPTION_PATIENTS (simplified check-in list). STATUS_LABELS map for 5 statuses. Search input with Search icon filters by patient name. ChevronRight navigation arrows for detail view. Calendar and UserPlus action icons. Status badge coloring per STATUS_LABELS. Imports EMRPatientQueue.css.

As a frontend developer, implement the EMRScheduleOverview section for the EMR page. Uses useState for baseDate (current date) and selectedDay. Implements buildWeekDays(baseDate) to generate 7-day week array with date/label/num/month/dayOfWeek, shiftWeek(baseDate, offset) for ±1 week navigation via ChevronLeft/ChevronRight buttons, formatWeekRange(days) for header display, and isToday(date) for today highlighting. Renders week day strip with clickable day cells. TIMELINE_SLOTS array (12 slots 8AM-5PM) with types: confirmed, blocked, pending, procedure — each with time/name/patient/staff/proc fields. AVAIL_SLOTS array showing open appointment slots with provider/role/chairs. Stats row showing CalendarDays, Clock, Users icons. Provider filter tabs with Monitor, Stethoscope, UserRound icons. Imports EMRScheduleOverview.css.

As a frontend developer, implement the EMRClinicalNotes section for the EMR page. Uses useState for activeFilter (from FILTERS: All Notes/Exams/Restorative/Surgery/Endo/Ortho), searchQuery, expandedNoteId (for AI suggestions accordion), and showAISuggestions. Renders NOTES array (5 notes: Sarah Chen Comprehensive Exam, Michael Torres Composite Restoration #14 MOD, Emily Davis Root Canal Therapy #30, James Wilson Implant Placement #19) each with patientName/patientAge/patientInitials/date/procedure/procedureType/summary/aiSummary/aiSuggestions array. Each note card shows patient avatar with initials, procedure badge, SOAP note summary text, and ewb-style AI summary strip with Sparkles icon. Expandable AI suggestions panel (Lightbulb icon) reveals suggestion list items with Check/ArrowRight icons. Plus button for new note creation. Search with Search icon. ChevronRight for detail navigation. X for dismissal. Imports EMRClinicalNotes.css.

As a frontend developer, implement the EMRUpcomingTasks section for the EMR page. Uses useState for activeFilter (FILTERS: all/high/documents/prescriptions/inventory/communications), tasks list (initialized from ALL_TASKS with 11 items), and expandedId for accordion row expansion. ALL_TASKS includes: t1 Approve clinical notes (high/documents/Dentist), t2 Send amoxicillin prescription (high/prescriptions/Dentist), t3 Reorder composite resin (high/inventory/InventoryManager), t4 Review ortho treatment plan (medium/documents/Dentist), t5 Send post-op instructions (medium/communications/Assistant), t6 Verify insurance pre-auth (medium/documents/Receptionist), t7 Restock sterilization supplies (low/inventory/Assistant), t8 Confirm schedule SMS reminders (low/communications/Receptionist), plus 3 pre-done tasks (t9/t10/t11). Check button (Check icon) toggles task done state. ChevronDown expands task detail row. PRIORITY_MAP renders HIGH/MEDIUM/LOW badges. MoreHorizontal kebab menu. User icon with role label. CheckCircle2 for completed tasks. Imports EMRUpcomingTasks.css.

As a frontend developer, implement the EMRNotifications section for the EMR page. Uses useState for notifications list (initialized from NOTIFICATIONS array, 8 items), activeFilter (all/unread/appointment/message/alert/document/system), and showFilterMenu. NOTIFICATIONS include: appointment confirmed (Sarah Chen, unread), message from Dr. Patel re TreatmentPlan (unread), low inventory alert composite resin (unread), documentation reminder Michael Torres (read), reschedule request David Kim (read), system update maintenance window (read), patient message Linda Garcia (read), insurance pre-auth alert (read). Each notification has type/icon component/title/description/time/unread flag/actions array with label+href pairs. CheckCheck button marks all as read. Filter button with Filter icon toggles filter dropdown. ExternalLink and ArrowRight icons on action buttons. Unread badge count display. Bell and Mail header icons. Imports EMRNotifications.css.

As a frontend developer, implement the Footer section for the EMR page. This component (shared — may already exist from Files or Patients pages) is a static footer with ftr-root containing: ftr-glow decorative element; ftr-brand-block with Stethoscope icon, 'DentalOS' brand name, tagline paragraph, and social links (Twitter, Linkedin, Github from lucide-react) mapping socials array; ftr-cols nav with 3 column groups — Clinical (Chairside, TreatmentPlan, Prescriptions, EMR, Records), Operations (Dashboard, Appointments, Inventory, Vendors, Analytics), Platform (AIAssistant, Compliance, Security, Settings, Portal); badges row with 3 compliance badges (ShieldCheck 'HIPAA Ready', BadgeCheck 'HITECH Act', Lock 'End-to-End Encrypted'); copyright line using dynamic year via new Date().getFullYear(). Imports Footer.css.

As a frontend developer, implement the PrescriptionsHeader section for the Prescriptions page. Build the `PrescriptionsHeader` component using framer-motion with: (1) a breadcrumb nav (`prh-breadcrumb`) linking Dashboard → Patients → Prescriptions with separator spans; (2) a title row containing an h1 with `prh-title-accent` span on 'Prescriptions' and a subtitle paragraph; (3) a `motion.button` CTA ('Issue New Prescription') with `whileHover={{ scale: 1.03 }}` and `whileTap={{ scale: 0.97 }}` spring transitions and an inline SVG plus icon; (4) a `prh-stats` grid mapping over the `statCards` array (Active=124, Pending=18, Expiring Soon=7) each rendered as a `motion.div` with `initial={{ opacity: 0, y: 12 }}` → `animate={{ opacity: 1, y: 0 }}` entrance animation, icon-wrap modifier classes (`prh-stat-icon-wrap--active/pending/expiring`), conditional SVG icons per `iconMod`, value, label, sub text, and `subWarn` styling for the expiring card. Wire CSS from `PrescriptionsHeader.css`. Note: Navbar component may already exist from EMR page.

As a frontend developer, implement the PrescriptionsFilters section for the Prescriptions page. Build the `PrescriptionsFilters` component with the following state hooks: `searchTerm`, `statusFilter` (default 'All Statuses'), `medicationFilter` (default 'All Types'), `patientName`, `dateFrom`, `dateTo`, and `isStuck` (boolean for sticky shadow). Implement an `IntersectionObserver`-based sticky detection via a sentinel `div` inserted before the root element using `useEffect` and a `rootRef`. Render: (1) a `pf-search-wrap` with lucide `Search` icon and controlled text input; (2) a `pf-select` for STATUS_OPTIONS ('All Statuses','Active','Expired','Draft','Approved'); (3) a `pf-select` for MEDICATION_TYPES (8 options); (4) a patient name text input; (5) date-from / date-to date inputs; (6) an `AnimatePresence`-wrapped clear-filters button that appears when `hasActiveFilters` is true (computed by checking all filter states), showing a badge with `activeFilterCount` and lucide `X` icon; (7) apply `pf-stuck` class on root when `isStuck` is true. Use `useCallback` for `handleClearFilters`. Wire CSS from `PrescriptionsFilters.css`.

As a frontend developer, implement the PrescriptionsTable section for the Prescriptions page. Build the `PrescriptionsTable` component using `useState` to manage selected row and sort/pagination state. Render a data table over the `prescriptionsData` mock array (8+ records) with columns: ID (e.g. RX-2026-0582), Patient Name, Medication + Dosage, Frequency, Issued Date, Expiry Date, Status badge, Prescriber, Pharmacy, Refills, and Notes. Implement status badge variants for 'active', 'pending', 'urgent', 'completed', and 'revoked' with distinct color classes. Support row selection (highlight selected row) and a clickable row that triggers detail view. Include column header sort indicators. Display urgency styling for 'urgent' status rows (e.g. David Reynolds / Clindamycin). Wire pagination controls (prev/next, page indicator). Wire CSS from `PrescriptionsTable.css`.