================================================================================ DENTEFLOW CLINICAL SUITE - IMPLEMENTATION PLAN Mapping Google Stitch Prototype → Laravel/Vue/FormBuilder/PrimeVue ================================================================================ Prepared: 2026-03-25 Stack: Laravel 11 + Vue 3 + Inertia.js + PrimeVue 4.3.3 + TailwindCSS + FormBuilder Real-time: Laravel Reverb (WebSocket server) + Laravel Echo ================================================================================ TABLE OF CONTENTS ================================================================================ 1. Executive Summary 2. Existing System Capabilities (What We Already Have) 3. Data Model Architecture (New Models & Migrations) 4. FormBuilder Configuration Strategy 5. Theme & Design System (Tailwind + PrimeVue Theming) 6. Module Breakdown (7 Modules) 7. Shared Components 8. Route Structure 9. Permissions & Roles 10. Implementation Phases & Order 11. Technical Decisions & Risks ================================================================================ 1. EXECUTIVE SUMMARY ================================================================================ DenteFlow is a dental clinic management system with 7 core modules: - Dashboard (executive overview) - Patients (records, odontogram, treatment plans) - Calendar (multi-doctor scheduling) - Billing (invoices, revenue, insurance) - Lab Works (restorations tracking) - Inventory (stock management) - Procedures Catalog (ADA codes, protocols, pricing) + Analytics (cross-module reporting, deferred to later phase) We leverage only specific parts of the existing FormBuilder system: - Models with their relationships (schema definitions, migrations, Eloquent model generation) - Roles & permissions (Spatie integration) - Widgets (for dashboard stat cards and charts) All pages, dashboards, and CRUD interfaces will be CUSTOM-BUILT to match the Google Stitch prototype pixel-for-pixel. The generic CRUD builder will NOT be used for the final UI — every page is hand-crafted with custom helper components to achieve identical design fidelity. STRATEGY: 1. Use FormBuilder to generate the data layer (models, migrations, Eloquent models with relationships) only. 2. Build ALL pages as custom Vue components matching the Stitch designs. 3. Use Inertia.js for page navigation and initial data loading. 4. Use API routes for all live/dynamic data (charts, calendar feeds, real-time updates, AJAX operations within pages). 5. Use Laravel Reverb WebSocket server to instantly propagate ALL data changes to every connected staff member viewing affected pages. ================================================================================ 2. EXISTING SYSTEM CAPABILITIES (What We Already Have) ================================================================================ LEVERAGING FROM EXISTING SYSTEM (selective use): [x] User authentication (Laravel Sanctum + Spatie roles/permissions) [x] Model + migration generation (FormBuilder code generator) [x] Eloquent model generation with relationships (FormBuilder) [x] Roles & permissions framework (Spatie, already integrated) [x] Widget system (counter, chart, card, table widget types) [x] PrimeVue 4.3.3 component library (all components available) [x] Chart.js integration for charts [x] File management (Laravel File Manager) [x] Email templates & triggers NOT USING FROM EXISTING SYSTEM: ✗ Generic CRUD page generation (pages must match Stitch prototype) ✗ Dynamic form rendering (Form.vue) — forms will be custom-built ✗ Dynamic sidebar menu system — DenteFlow has its own sidebar ✗ Pusher for broadcasting — replaced by Laravel Reverb NEEDS CREATION: [ ] DenteFlow-specific data models (Patients, Appointments, etc.) [ ] DenteFlow dark theme (Tailwind + PrimeVue Noir adaptation) [ ] ALL custom page components (every page matches Stitch prototype) [ ] ALL custom helper components for design fidelity [ ] Dental-specific components (Odontogram SVG, Tooth Chart, Timeline) [ ] Clinic switching / multi-clinic support [ ] DenteFlow sidebar & topbar navigation [ ] Laravel Reverb setup + broadcast events for all data changes [ ] API controllers for all live data endpoints [ ] Laravel Echo channel subscriptions in every Vue page ================================================================================ 3. DATA MODEL ARCHITECTURE ================================================================================ Below are the models needed, organized by module. Each model lists its key fields and relationships. These will be created via FormBuilder's model definition system, which generates migrations and Eloquent models. ------------------------------------------------------------------------------- 3.1 CLINIC (Multi-Clinic Support) ------------------------------------------------------------------------------- Model: Clinic - id, name, address, phone, email, logo - timezone, currency, tax_rate - settings (JSON) - timestamps, soft_deletes Model: ClinicUser (pivot) - clinic_id → Clinic - user_id → User - role (enum: owner, admin, dentist, hygienist, assistant, receptionist) NOTE: All tenant-scoped models below include clinic_id. ------------------------------------------------------------------------------- 3.2 PROVIDERS / STAFF ------------------------------------------------------------------------------- Model: Provider - id, clinic_id → Clinic, user_id → User (nullable) - first_name, last_name, title (Dr., etc.) - specialty (enum: general, orthodontist, periodontist, endodontist, prosthodontist, oral_surgeon, pediatric, hygienist) - license_number, npi_number - bay_assignment (string, e.g. "Bay 1") - color (hex, for calendar display) - is_active (boolean) - avatar (string, file path) - timestamps, soft_deletes ------------------------------------------------------------------------------- 3.3 PATIENTS ------------------------------------------------------------------------------- Model: Patient - id, clinic_id → Clinic - first_name, last_name, date_of_birth, gender - phone, email, address, city, state, zip - emergency_contact_name, emergency_contact_phone - insurance_provider, insurance_policy_number, insurance_status (enum: active, inactive, pending) - risk_level (enum: low, moderate, high) - is_vip (boolean) - tags (JSON array, e.g. ["periodontics", "vip_member"]) - next_recall_date - avatar (string) - notes (text) - timestamps, soft_deletes Model: PatientAllergy - id, patient_id → Patient - allergy_name, severity (enum: mild, moderate, severe) - notes Model: PatientMedicalHistory - id, patient_id → Patient - condition_name, status (enum: active, controlled, resolved) - notes, diagnosed_date Model: PatientDentalRecord (Odontogram / Tooth Chart) - id, patient_id → Patient - tooth_number (integer, FDI notation: 11-48) - condition (enum: healthy, caries, filling, crown, bridge, implant, missing, root_canal, extraction) - surface (string, e.g. "MOD" for mesial-occlusal-distal) - notes, last_updated - timestamps Model: PatientDocument - id, patient_id → Patient - title, file_path, file_type (enum: xray, photo, document, scan) - description, taken_date - uploaded_by → User - timestamps ------------------------------------------------------------------------------- 3.4 PROCEDURES ------------------------------------------------------------------------------- Model: Procedure - id, clinic_id → Clinic - name, ada_code (string, e.g. "D2331") - category (enum: diagnostic, preventive, restorative, endodontic, periodontic, prosthodontic, oral_surgery, orthodontic) - duration_minutes (integer) - material_cost (decimal 10,2) - clinic_price (decimal 10,2) - description (text) - status (enum: active, maintenance, deprecated) - timestamps, soft_deletes Model: TreatmentProtocol - id, procedure_id → Procedure - name, description - timestamps Model: TreatmentProtocolStep - id, treatment_protocol_id → TreatmentProtocol - step_number (integer) - name, description, duration_minutes - timestamps ------------------------------------------------------------------------------- 3.5 TREATMENT PLANS ------------------------------------------------------------------------------- Model: TreatmentPlan - id, patient_id → Patient, provider_id → Provider - name, description - total_cost (decimal 10,2) - status (enum: proposed, approved, in_progress, completed, cancelled) - pre_auth_status (enum: not_sent, sent, approved, denied) - completion_percentage (integer, 0-100) - start_date, estimated_end_date - timestamps, soft_deletes Model: TreatmentPlanItem - id, treatment_plan_id → TreatmentPlan - procedure_id → Procedure - tooth_number (integer, nullable) - surface (string, nullable) - status (enum: pending, scheduled, in_progress, completed) - cost (decimal 10,2) - notes - sort_order (integer) - timestamps ------------------------------------------------------------------------------- 3.6 APPOINTMENTS / CALENDAR ------------------------------------------------------------------------------- Model: Appointment - id, clinic_id → Clinic - patient_id → Patient - provider_id → Provider - procedure_id → Procedure (nullable) - treatment_plan_item_id → TreatmentPlanItem (nullable) - start_time (datetime), end_time (datetime) - bay (string, e.g. "Bay 1") - status (enum: scheduled, confirmed, in_chair, completed, cancelled, no_show, rescheduled) - is_urgent (boolean) - notes (text) - timestamps, soft_deletes ------------------------------------------------------------------------------- 3.7 BILLING / INVOICES ------------------------------------------------------------------------------- Model: Invoice - id, clinic_id → Clinic - patient_id → Patient - invoice_number (string, auto-generated "INV-YYYY-XXXX") - subtotal, tax_amount, total (decimal 10,2) - amount_paid (decimal 10,2) - status (enum: draft, sent, paid, partial, overdue, cancelled, refunded) - due_date, paid_date - notes - timestamps, soft_deletes Model: InvoiceItem - id, invoice_id → Invoice - procedure_id → Procedure (nullable) - appointment_id → Appointment (nullable) - description (string) - quantity (integer), unit_price, total (decimal 10,2) - timestamps Model: Payment - id, invoice_id → Invoice - amount (decimal 10,2) - payment_method (enum: cash, credit_card, debit_card, insurance, bank_transfer, check) - payment_date (date) - reference_number (string, nullable) - notes - timestamps Model: InsuranceClaim - id, invoice_id → Invoice, patient_id → Patient - claim_number, insurance_provider - amount_claimed, amount_approved (decimal 10,2) - status (enum: pending, submitted, approved, denied, appealed) - submitted_date, response_date - notes - timestamps ------------------------------------------------------------------------------- 3.8 LAB WORKS / RESTORATIONS ------------------------------------------------------------------------------- Model: LabPartner - id, clinic_id → Clinic - name, contact_person, phone, email, address - specialty (string) - on_time_percentage (decimal 5,2) - is_active (boolean) - timestamps, soft_deletes Model: LabOrder - id, clinic_id → Clinic - order_number (string, auto "ORD-XXXX") - patient_id → Patient - provider_id → Provider - lab_partner_id → LabPartner - restoration_type (enum: crown, bridge, denture, implant, veneer, inlay, onlay, retainer, night_guard, other) - material (string, e.g. "Zirconia Monolithic", "e.max Lithium Disilicate") - tooth_numbers (JSON array) - shade (string, e.g. "A2") - status (enum: draft, sent_to_lab, in_fabrication, received, fitted, delay_reported, rejected) - cost (decimal 10,2) - sent_date, expected_date, received_date, fitted_date - notes - timestamps, soft_deletes ------------------------------------------------------------------------------- 3.9 INVENTORY ------------------------------------------------------------------------------- Model: InventoryCategory - id, clinic_id → Clinic - name (string), type (enum: tools, materials, medications) - description - timestamps Model: InventoryItem - id, clinic_id → Clinic - inventory_category_id → InventoryCategory - name, description - sku (string, unique per clinic) - quantity (integer) - unit (string, e.g. "units", "vials", "packs") - min_threshold (integer, triggers low-stock alert) - cost_per_unit (decimal 10,2) - supplier_id → Supplier - status (computed: in_stock, low_stock, out_of_stock) - expiry_date (date, nullable) - last_count_date (date) - location (string, e.g. "Cabinet A, Shelf 2") - timestamps, soft_deletes Model: Supplier - id, clinic_id → Clinic - name, contact_person, phone, email, address, website - is_active (boolean) - timestamps, soft_deletes Model: InventoryTransaction - id, inventory_item_id → InventoryItem - type (enum: purchase, usage, adjustment, return, write_off) - quantity_change (integer, positive or negative) - reference (string, e.g. appointment ID or PO number) - performed_by → User - notes - timestamps ------------------------------------------------------------------------------- 3.10 CLINICAL NOTES / ACTIVITY LOG ------------------------------------------------------------------------------- Model: ClinicalNote - id, patient_id → Patient, provider_id → Provider - appointment_id → Appointment (nullable) - note_text (text) - note_type (enum: general, treatment, observation, follow_up) - is_urgent (boolean) - timestamps Model: ActivityLog - id, clinic_id → Clinic, user_id → User - loggable_type, loggable_id (polymorphic) - action (string, e.g. "updated_treatment_plan", "marked_paid") - description (text) - metadata (JSON) - timestamps ================================================================================ TOTAL NEW MODELS: ~25 TOTAL NEW MIGRATIONS: ~25 ================================================================================ ================================================================================ 4. FORMBUILDER USAGE (Models + Roles + Widgets ONLY) ================================================================================ The FormBuilder system is used ONLY for: 1. DEFINE MODEL SCHEMAS: Create all 25+ model definitions via the FormBuilder admin UI or seeder. This gives us the data structure. 2. GENERATE MIGRATIONS: Use the code generator to produce migration files for all models. 3. GENERATE ELOQUENT MODELS: Auto-generate model classes with fillable, casts, and relationships. 4. ROLES & PERMISSIONS: Use the existing Spatie integration to define DenteFlow-specific roles and permissions. 5. WIDGETS: Use the Widget system for dashboard stat cards and chart data sources. The FormBuilder will NOT be used for: ✗ CRUD page generation — all pages are custom-built ✗ Form rendering — forms are hand-crafted to match Stitch designs ✗ Menu generation — DenteFlow has its own hardcoded sidebar ✗ DataTable configuration — tables are custom-styled per prototype ALL PAGES ARE CUSTOM-BUILT: Every DenteFlow page will be a hand-crafted Vue component that matches the Google Stitch prototype pixel-for-pixel. This includes: - Custom layouts, cards, tables, forms, modals - Custom helper components for design elements (badges, charts, stat cards, glass panels, avatar initials, etc.) - Custom controllers with Inertia responses + API endpoints SEED DATA: DatabaseSeeder will create: - DenteFlow roles (clinic_admin, dentist, hygienist, assistant, receptionist) - DenteFlow permissions (per module) - Sample clinic + providers - Default dashboard widgets ================================================================================ 4.1 DATA FLOW ARCHITECTURE ================================================================================ ┌─────────────────────────────────────────────────────────────────┐ │ DATA FLOW PATTERN │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ PAGE LOAD (Inertia): │ │ Browser → Inertia Request → Laravel Controller │ │ → Eloquent queries → Inertia::render('Page', $data) │ │ → Vue page receives props (initial data) │ │ │ │ LIVE DATA (API + Axios): │ │ Vue component → axios.get('/api/denteflow/...') │ │ → API Controller → JSON response │ │ → Vue reactively updates UI │ │ Used for: charts, calendar feeds, search, filters, │ │ pagination, inline edits, modal data loads │ │ │ │ MUTATIONS (API + Reverb broadcast): │ │ Vue component → axios.post/put/delete('/api/denteflow/...') │ │ → API Controller → saves to DB → dispatches Broadcast Event │ │ → Laravel Reverb pushes event to all connected clients │ │ → Laravel Echo listeners in Vue update reactive state │ │ │ │ REAL-TIME FLOW (Reverb WebSocket): │ │ Laravel Event → Reverb Server → WebSocket → All clients │ │ Every staff member on an affected page gets instant updates │ │ Examples: │ │ - Receptionist cancels appointment → Calendar updates live │ │ - Payment recorded → Billing dashboard updates live │ │ - Lab order status changes → Lab Works page updates live │ │ - Stock adjusted → Inventory alerts update live │ │ │ └─────────────────────────────────────────────────────────────────┘ ================================================================================ 4.2 REVERB BROADCASTING ARCHITECTURE ================================================================================ Broadcasting Driver: Laravel Reverb (self-hosted WebSocket server) Client: Laravel Echo (already available in package.json) BROADCAST EVENTS (one per entity mutation): App\Events\DenteFlow\AppointmentChanged → Channel: private clinic.{clinic_id}.appointments → Payload: { action: 'created|updated|cancelled', appointment: {...} } → Listeners: Calendar page, Dashboard (today's schedule), Patient profile (appointment tab) App\Events\DenteFlow\PatientChanged → Channel: private clinic.{clinic_id}.patients → Payload: { action: 'created|updated|deleted', patient: {...} } → Listeners: Patient list, Dashboard (new patients count) App\Events\DenteFlow\InvoiceChanged → Channel: private clinic.{clinic_id}.invoices → Payload: { action: 'created|updated|paid', invoice: {...} } → Listeners: Billing page, Dashboard (revenue), Patient billing tab App\Events\DenteFlow\LabOrderChanged → Channel: private clinic.{clinic_id}.lab-orders → Payload: { action: 'created|status_changed', labOrder: {...} } → Listeners: Lab Works page, Dashboard (pending count) App\Events\DenteFlow\InventoryChanged → Channel: private clinic.{clinic_id}.inventory → Payload: { action: 'adjusted|restocked|alert', item: {...} } → Listeners: Inventory page, Dashboard (alerts) App\Events\DenteFlow\ClinicalNoteAdded → Channel: private clinic.{clinic_id}.notes → Payload: { note: {...}, patient_id: X } → Listeners: Dashboard (clinical updates), Patient profile CHANNEL AUTHORIZATION: Each private channel verifies the user belongs to the clinic: Broadcast::channel('clinic.{clinicId}.appointments', function ($user, $clinicId) { return $user->clinics()->where('clinic_id', $clinicId)->exists(); }); VUE ECHO COMPOSABLE: Create a reusable composable useClinicChannel(channelSuffix, eventHandler) that subscribes/unsubscribes on mount/unmount and handles reconnection. ================================================================================ 5. THEME & DESIGN SYSTEM ================================================================================ The prototype uses a sophisticated dark theme ("Clinical Conductor") that maps cleanly to PrimeVue's Noir preset + Tailwind customization. ------------------------------------------------------------------------------- 5.1 TAILWIND CONFIG CHANGES ------------------------------------------------------------------------------- File: tailwind.config.js Add DenteFlow color tokens: colors: { 'df-background': '#0c0e12', 'df-surface': '#0c0e12', 'df-surface-container-lowest':'#000000', 'df-surface-container-low': '#111319', 'df-surface-container': '#161a21', 'df-surface-container-high': '#1b2029', 'df-surface-container-highest':'#202631', 'df-surface-bright': '#252c39', 'df-primary': '#c800ff', 'df-primary-dim': '#b000e0', 'df-on-surface': '#e0e5f5', 'df-on-surface-variant': '#a5abb9', 'df-outline': '#6f7683', 'df-outline-variant': '#424854', 'df-error': '#ee7d77', 'df-error-dim': '#bb5551', 'df-secondary': '#9e9da1', 'df-tertiary': '#efe7ff', } Font: 'Inter' (already partially configured, needs to be set as default) ------------------------------------------------------------------------------- 5.2 PRIMEVUE THEME CUSTOMIZATION ------------------------------------------------------------------------------- File: resources/js/app.js Modify the PrimeVue Noir preset to use DenteFlow purple primary: - Replace Zinc primary with custom purple scale based on #c800ff - Surface colors: map to df-surface-* tokens - Dark mode as default (class-based) Key PrimeVue component overrides: - DataTable: dark row backgrounds, no borders (per "No Divider" rule) - Cards: surface-container bg, no drop shadow (tonal layering) - Buttons: gradient primary (from-primary to-primary-dim) - Inputs: surface-container-highest fill, no border, focus ring purple ------------------------------------------------------------------------------- 5.3 MATERIAL SYMBOLS ICONS ------------------------------------------------------------------------------- The prototype uses Google Material Symbols Outlined. Options: A) Keep Material Symbols (add font link to app.blade.php) B) Map to PrimeIcons equivalents → RECOMMENDATION: Use Material Symbols (better medical icon coverage). Add to resources/views/app.blade.php: ================================================================================ 6. MODULE BREAKDOWN ================================================================================ Each module lists: Vue pages, components, API endpoints, and FormBuilder usage. =============================================================================== 6.1 MODULE: DASHBOARD =============================================================================== Source: main_dashboard_theme_updated/code.html Vue Page: resources/js/Pages/DenteFlow/Dashboard.vue Components: - StatCard.vue (reuse existing Statistics/StatCard.vue, restyle) - TodaySchedule.vue (appointment list with status badges) - ClinicalUpdates.vue (activity feed table) - QuickActions.vue (action buttons panel) - WeeklyRevenueChart.vue (bar chart via Chart.js) - PendingLabWorksCard.vue (summary card) API Endpoints: GET /api/denteflow/dashboard/stats → appointments_today, revenue_mtd, new_patients, pending_lab_works GET /api/denteflow/dashboard/today-schedule → list of today's appointments GET /api/denteflow/dashboard/clinical-updates → recent activity log entries GET /api/denteflow/dashboard/revenue-chart → weekly revenue data points Data Sources: - Widget system for stat card definitions - API endpoints for live data (charts, schedule, activity feed) - Reverb channels for real-time stat updates - Activity log feeds from ActivityLog model =============================================================================== 6.2 MODULE: PATIENTS =============================================================================== Source: patient_profile_theme_updated/code.html Vue Pages: resources/js/Pages/DenteFlow/Patients/Index.vue (patient list) resources/js/Pages/DenteFlow/Patients/Show.vue (patient profile) resources/js/Pages/DenteFlow/Patients/Create.vue (new patient form) resources/js/Pages/DenteFlow/Patients/Edit.vue (edit patient form) Components: - PatientHeader.vue (photo, name, allergy alert, contact, tags) - PatientVitals.vue (vitals sidebar card) - MedicalHistory.vue (condition list) - InteractiveOdontogram.vue (** reusable SVG component **) → SVG template approach: each tooth is a separate SVG path/group → Standalone reusable component (used in Patient Profile, Treatment Plan creation, Dental Chart tab, and potentially print views) → FDI numbering system (11-48) → Click to select tooth, show condition popup/overlay → Color coded: red=caries, purple=filling, grey=healthy → Props: dental records array, readonly mode, highlight teeth → Events: @tooth-click, @tooth-hover, @condition-changed - AppointmentTimeline.vue (vertical timeline of visits) - TreatmentPlansList.vue (pending plans with progress bars) - DiagnosticImages.vue (image gallery with dates) - ClinicalNotesEditor.vue (textarea with save) - PatientProfileTabs.vue (Overview, Dental Chart, Treatment Plans, Billing, Files) API Endpoints: Standard CRUD: GET/POST/PUT/DELETE /api/denteflow/patients GET /api/denteflow/patients/{id}/dental-records PUT /api/denteflow/patients/{id}/dental-records/{tooth} GET /api/denteflow/patients/{id}/appointments GET /api/denteflow/patients/{id}/treatment-plans GET /api/denteflow/patients/{id}/invoices GET /api/denteflow/patients/{id}/documents POST /api/denteflow/patients/{id}/clinical-notes Data Sources: - Patient model generated via FormBuilder (model + migration only) - ALL pages (Index, Show, Create, Edit) are fully custom-built Vue - Custom patient list with DenteFlow-styled DataTable - Custom create/edit forms matching Stitch design - Profile page is fully custom with tabbed layout =============================================================================== 6.3 MODULE: CALENDAR =============================================================================== Source: clinic_calendar_theme_updated/code.html Vue Pages: resources/js/Pages/DenteFlow/Calendar/Index.vue Components: - MiniCalendar.vue (month view with date selection) - ClinicFlowStats.vue (confirmed/urgent/completed counts) - ActiveStaff.vue (avatar stack of on-duty providers) - MultiLaneCalendar.vue (** complex custom component **) → Time grid (08:00-18:00) with provider columns/lanes → Drag-and-drop appointment blocks → Color-coded by status (confirmed, urgent, completed) → Current time indicator line → Click to create new appointment - AppointmentBlock.vue (individual calendar appointment card) - CalendarToolbar.vue (week navigation, print, export) API Endpoints: GET /api/denteflow/calendar?date=YYYY-MM-DD&view=week → appointments grouped by provider for the week GET /api/denteflow/calendar/providers → active providers for column headers PUT /api/denteflow/appointments/{id}/reschedule → update start_time, end_time, provider_id (drag-and-drop) POST /api/denteflow/appointments → create new appointment Data Sources: - Appointment model generated via FormBuilder (model + migration only) - New Appointment form is custom-built modal matching Stitch design - Calendar page is fully custom - Reverb broadcasts for instant cross-staff updates Technology Notes: - Custom-built multi-lane calendar component (no FullCalendar dependency) - Drag-and-drop: use @vueuse/core useDraggable or native HTML5 DnD - Real-time updates via Laravel Echo + Reverb for multi-user scheduling - When receptionist cancels/reschedules → AppointmentChanged event fires → all staff viewing Calendar see instant update without page refresh =============================================================================== 6.4 MODULE: BILLING & FINANCIALS =============================================================================== Source: billing_financials_theme_updated/code.html Vue Pages: resources/js/Pages/DenteFlow/Billing/Index.vue (financial overview) resources/js/Pages/DenteFlow/Billing/Invoices.vue (invoice list) resources/js/Pages/DenteFlow/Billing/Show.vue (invoice detail) resources/js/Pages/DenteFlow/Billing/Create.vue (new invoice) Components: - RevenueStats.vue (4 stat cards: revenue MTD, outstanding, recent payments, tax estimates) - RevenueFlowChart.vue (bar chart, weekly/monthly toggle) - PendingApprovals.vue (lab invoices + insurance claims list) - InvoiceTable.vue (PrimeVue DataTable with status badges) - InvoiceStatusBadge.vue (paid=green, partial=amber, overdue=red) API Endpoints: Standard CRUD: GET/POST/PUT/DELETE /api/denteflow/invoices GET /api/denteflow/billing/stats → revenue_mtd, outstanding, recent_payments, tax_estimate GET /api/denteflow/billing/revenue-chart?period=weekly|monthly GET /api/denteflow/billing/pending-approvals POST /api/denteflow/invoices/{id}/payments Data Sources: - Invoice model generated via FormBuilder (model + migration only) - ALL billing pages are fully custom-built Vue components - Invoice creation form is custom-built matching Stitch design - Reverb broadcasts for live revenue dashboard updates =============================================================================== 6.5 MODULE: LAB WORKS =============================================================================== Source: lab_works_tracker_theme_updated/code.html Vue Pages: resources/js/Pages/DenteFlow/LabWorks/Index.vue Components: - LabStatusPipeline.vue (5-column status strip with counts + progress) - ActiveRestorationsTable.vue (DataTable with status badges) - LabQuickInsights.vue (3 insight cards: cost, turnaround, vendor) - LabOrderStatusBadge.vue (color-coded status chips) - NewLabOrderModal.vue (creation form) API Endpoints: Standard CRUD: GET/POST/PUT/DELETE /api/denteflow/lab-orders GET /api/denteflow/lab-works/stats → counts by status, weekly cost, avg turnaround GET /api/denteflow/lab-works/vendor-analytics PUT /api/denteflow/lab-orders/{id}/status → update order status (state machine transitions) Data Sources: - LabOrder, LabPartner models generated via FormBuilder (models only) - ALL lab works pages are fully custom-built Vue components - New Lab Order form is custom-built matching Stitch design - Reverb broadcasts for live status pipeline updates =============================================================================== 6.6 MODULE: INVENTORY =============================================================================== Source: inventory_stock_theme_updated/code.html Vue Pages: resources/js/Pages/DenteFlow/Inventory/Index.vue Components: - LowStockAlerts.vue (critical alerts card with items) - CategoryStats.vue (3 stat cards: tools, materials, medications) - InventoryTable.vue (DataTable with category tabs + status badges) - InventoryStatusBadge.vue (in_stock=green, low=amber, out=red) - AddStockModal.vue (stock addition form) - NewOrderModal.vue (supplier order form) API Endpoints: Standard CRUD: GET/POST/PUT/DELETE /api/denteflow/inventory GET /api/denteflow/inventory/stats → category counts, low stock alerts GET /api/denteflow/inventory/low-stock → items below min_threshold POST /api/denteflow/inventory/{id}/adjust → stock adjustment (add/remove) Data Sources: - InventoryItem, InventoryCategory, Supplier models via FormBuilder (models + migrations only) - ALL inventory pages are fully custom-built Vue components - Add Stock / New Item forms are custom-built matching Stitch design - Reverb broadcasts for live stock alerts and count updates =============================================================================== 6.7 MODULE: PROCEDURES CATALOG =============================================================================== Source: procedures_catalog_theme_updated/code.html Vue Pages: resources/js/Pages/DenteFlow/Procedures/Index.vue Components: - ProcedureStats.vue (3 stat cards + most-performed highlight) - ProcedureCatalogTable.vue (DataTable with ADA codes, pricing) - TreatmentProtocols.vue (searchable protocol list sidebar) - ProfitMarginChart.vue (horizontal bar chart) API Endpoints: Standard CRUD: GET/POST/PUT/DELETE /api/denteflow/procedures GET /api/denteflow/procedures/stats → total count, avg revenue, efficiency % GET /api/denteflow/procedures/{id}/protocols GET /api/denteflow/procedures/profit-margins Data Sources: - Procedure, TreatmentProtocol models generated via FormBuilder (models + migrations only) - ALL procedures pages are fully custom-built Vue components - Catalog page is custom with stats + protocol sidebar - No generic CRUD — everything matches Stitch prototype design ================================================================================ 7. SHARED COMPONENTS ================================================================================ These components are used across multiple modules and are extracted as standalone reusable pieces. Every UI element appearing in 2+ pages gets its own component to ensure design consistency and reduce duplication. resources/js/Components/DenteFlow/ ├── Layout/ │ ├── DenteFlowLayout.vue (main layout with dark theme wrapper) │ ├── DenteFlowSidebar.vue (sidebar navigation per prototype) │ ├── DenteFlowTopbar.vue (search, clinic switcher, notifications) │ ├── ClinicSwitcher.vue (multi-clinic dropdown) │ └── ConnectionIndicator.vue (Reverb WebSocket status indicator) ├── Common/ │ ├── StatCard.vue (metric card with icon + trend arrow) │ ├── StatusBadge.vue (configurable color-coded status chip) │ ├── AvatarInitials.vue (colored circle with initials, e.g. "JW") │ ├── FAB.vue (floating action button, bottom-right) │ ├── GlassPanel.vue (glassmorphism modal/panel backdrop-blur) │ ├── EmptyState.vue (empty data placeholder with icon) │ ├── PageHeader.vue (page title + subtitle + action buttons) │ ├── BentoGrid.vue (asymmetric card grid layout) │ ├── DataCard.vue (surface-container card with no borders) │ └── SearchInput.vue (recessed search bar per design system) ├── Charts/ │ ├── BarChart.vue (Chart.js bar chart wrapper, themed) │ ├── LineChart.vue (Chart.js line chart wrapper, themed) │ ├── AreaChart.vue (Chart.js area chart wrapper, themed) │ ├── HorizontalBarChart.vue (Chart.js horizontal bar wrapper) │ └── PieChart.vue (Chart.js pie/doughnut wrapper) ├── Dental/ │ ├── InteractiveOdontogram.vue (** standalone SVG tooth chart **) │ │ → Props: dentalRecords[], readonly, highlightTeeth[] │ │ → Events: @tooth-click, @tooth-hover, @condition-changed │ │ → Used in: Patient Profile, Treatment Plans, Dental Chart tab │ ├── ToothSVG.vue (single tooth SVG template component) │ └── ToothConditionPopup.vue (popup overlay for tooth details) ├── Schedule/ │ ├── AppointmentBlock.vue (calendar + dashboard appointment card) │ ├── TimeSlot.vue (time grid slot in calendar) │ └── ScheduleTimeline.vue (vertical timeline for today's schedule) └── Composables/ ├── useClinicChannel.js (Reverb/Echo subscription composable) │ → Auto-subscribes to clinic-scoped private channel │ → Handles mount/unmount cleanup and reconnection ├── useApiData.js (axios wrapper with loading/error state) │ → Provides reactive data, loading, error refs │ → Auto-refresh capability for live data └── useClinicContext.js (current clinic accessor composable) ================================================================================ 8. ROUTE STRUCTURE ================================================================================ All DenteFlow routes will be under a /denteflow prefix with clinic context. Web Routes (Inertia pages): /denteflow/dashboard → Dashboard /denteflow/patients → Patients Index /denteflow/patients/create → Create Patient /denteflow/patients/{patient} → Patient Profile /denteflow/patients/{patient}/edit → Edit Patient /denteflow/calendar → Calendar /denteflow/billing → Billing Overview /denteflow/billing/invoices → Invoice List /denteflow/billing/invoices/create → Create Invoice /denteflow/billing/invoices/{id} → Invoice Detail /denteflow/lab-works → Lab Works Tracker /denteflow/lab-works/create → New Lab Order /denteflow/inventory → Inventory Management /denteflow/procedures → Procedures Catalog /denteflow/settings → Clinic Settings API Routes (data endpoints): /api/denteflow/dashboard/* → Dashboard data /api/denteflow/patients/* → Patient CRUD + sub-resources /api/denteflow/appointments/* → Appointment CRUD /api/denteflow/calendar/* → Calendar-specific queries /api/denteflow/invoices/* → Invoice CRUD /api/denteflow/billing/* → Billing stats /api/denteflow/lab-orders/* → Lab Order CRUD /api/denteflow/lab-works/* → Lab Works stats /api/denteflow/inventory/* → Inventory CRUD + adjustments /api/denteflow/procedures/* → Procedure CRUD + protocols /api/denteflow/providers/* → Provider CRUD /api/denteflow/clinics/* → Clinic management Middleware: auth, verified, clinic.context (new middleware to scope queries) ================================================================================ 9. PERMISSIONS & ROLES ================================================================================ New DenteFlow Roles: - clinic_owner → Full access to all modules + clinic settings - clinic_admin → Full access to all modules - dentist → Dashboard, Patients, Calendar, Procedures, Lab Works - hygienist → Dashboard, Patients, Calendar, limited Procedures - assistant → Dashboard, Calendar, Inventory, Lab Works - receptionist → Dashboard, Patients, Calendar, Billing New DenteFlow Permissions (per module): denteflow.dashboard.view denteflow.patients.view|create|edit|delete denteflow.calendar.view|create|edit|delete denteflow.billing.view|create|edit|delete denteflow.lab-works.view|create|edit|delete denteflow.inventory.view|create|edit|delete|adjust denteflow.procedures.view|create|edit|delete denteflow.settings.view|edit denteflow.reports.view|export ================================================================================ 10. IMPLEMENTATION PHASES & ORDER ================================================================================ PHASE 0: FOUNDATION (Infrastructure) ───────────────────────────────────── Tasks: □ 0.1 Update tailwind.config.js with DenteFlow color tokens □ 0.2 Customize PrimeVue theme preset (purple primary, dark surfaces) □ 0.3 Add Material Symbols Outlined font to app.blade.php □ 0.4 Create DenteFlowLayout.vue (sidebar + topbar + main content area) □ 0.5 Create DenteFlowSidebar.vue (navigation per prototype) □ 0.6 Create DenteFlowTopbar.vue (search, clinic switcher, notifications) □ 0.7 Create shared components (StatCard, StatusBadge, AvatarInitials, FAB) □ 0.8 Create chart wrapper components (Bar, Line, HorizontalBar) □ 0.9 Create DenteFlow web route file (routes/denteflow.php) □ 0.10 Create DenteFlow API route file (routes/api_denteflow.php) □ 0.11 Create ClinicContext middleware (scopes queries to current clinic) □ 0.12 Set up Inter font as primary in Tailwind and PrimeVue Dependencies: None Deliverable: Empty DenteFlow shell with working navigation and theme PHASE 1: DATA LAYER (Models & Database) ──────────────────────────────────────── Tasks: □ 1.1 Define all model schemas in FormBuilder (or create seeder) □ 1.2 Generate migrations for all 25+ models □ 1.3 Run migrations □ 1.4 Generate Eloquent models with relationships □ 1.5 Create DenteFlow roles & permissions in seeder □ 1.6 Create sample seed data (demo clinic, providers, patients, appointments, invoices, lab orders, inventory items, procedures) □ 1.7 Test: verify all models, relationships, seeders work Dependencies: Phase 0 complete Deliverable: Full database schema with seed data PHASE 2: REVERB + BROADCASTING SETUP ───────────────────────────────────── Tasks: □ 2.1 Install & configure Laravel Reverb WebSocket server □ 2.2 Configure Laravel Echo client in app.js (switch from Pusher) □ 2.3 Create broadcast events for each entity: - AppointmentChanged, PatientChanged, InvoiceChanged, LabOrderChanged, InventoryChanged, ClinicalNoteAdded □ 2.4 Create private channel authorization rules □ 2.5 Create useClinicChannel() Vue composable for Echo subscriptions □ 2.6 Create API controllers skeleton (all endpoints, empty methods) □ 2.7 Wire up broadcast dispatching in model observers or controller methods (every create/update/delete fires an event) □ 2.8 Test: verify WebSocket connection and event propagation Dependencies: Phase 1 complete Deliverable: Working real-time infrastructure, all events propagating PHASE 3: CUSTOM PAGES (Core Modules — All Pixel-Perfect) ───────────────────────────────────────────────────────── Every page must match the Google Stitch prototype exactly. Each page includes: Inertia controller, API controller, Vue page, custom helper components, Reverb event listeners. Order by complexity (simplest first): □ 3.1 PROCEDURES CATALOG page → Custom stats cards + Custom DataTable + Protocol sidebar → Profit margin chart + treatment protocol steps → Helper components: ProcedureRow, ProtocolCard, MarginBar → Reverb: listen for procedure price/status changes → Complexity: LOW (mostly data display) □ 3.2 INVENTORY MANAGEMENT page → Custom low stock alerts card + Category stat cards → Custom tabbed DataTable (All/Materials/Tools/Medications) → Stock adjustment modal + supplier order modal → Helper components: StockAlert, InventoryRow, AdjustmentForm → Reverb: listen for stock level changes, new alerts → Complexity: LOW-MEDIUM □ 3.3 LAB WORKS TRACKER page → Custom status pipeline strip (5 columns with progress) → Custom active restorations table with status transitions → Quick insights cards (cost, turnaround, vendor) → Helper components: StatusPipelineCard, RestorationRow → Reverb: listen for lab order status changes → Complexity: MEDIUM □ 3.4 BILLING OVERVIEW page → Custom revenue stat cards + Revenue flow bar chart → Pending approvals list + Custom invoice table → Payment recording modal + invoice detail view → Helper components: RevenueCard, ApprovalItem, InvoiceRow → Reverb: listen for payment/invoice changes (live revenue) → Complexity: MEDIUM □ 3.5 DASHBOARD page → Custom bento grid with stat cards + today's schedule timeline → Clinical updates feed + Quick action buttons → Weekly revenue chart + Pending lab works card → Helper components: ScheduleItem, UpdateRow, ActionButton → Reverb: listen on ALL channels (dashboard aggregates everything) → Complexity: MEDIUM (aggregation queries + multi-channel Echo) □ 3.6 PATIENT PROFILE page → Custom profile header (photo, allergy alert, tags, actions) → Custom tab system (Overview, Dental Chart, Treatment Plans, Billing, Files) → Interactive Odontogram (reusable SVG component) → Appointment timeline + Treatment plans with progress bars → Diagnostic images gallery + Clinical notes editor → Helper components: AllergyBadge, VitalsCard, ToothTooltip, TimelineEntry, TreatmentProgressBar, ImageThumbnail → Reverb: listen for patient-specific changes → Complexity: HIGH (SVG odontogram is the main challenge) □ 3.7 CALENDAR page → Custom multi-lane weekly calendar (provider columns) → Custom drag-and-drop appointment blocks → Mini calendar sidebar + Clinic flow stats + Active staff → Appointment creation/edit modal → Helper components: TimeSlot, AppointmentBlock, ProviderLane, TimeIndicator, DragGhost → Reverb: listen for appointment changes (CRITICAL — this is the primary real-time use case. Receptionist cancellation must appear instantly on dentist's calendar) → Complexity: HIGH (most complex — DnD + real-time + multi-lane) PHASE 4: INTEGRATIONS & POLISH ─────────────────────────────── Tasks: □ 4.1 Clinic switcher functionality (multi-clinic dropdown in topbar) □ 4.2 Email notifications (appointment reminders, invoice due, lab order status — using existing email trigger system) □ 4.3 PDF invoice generation □ 4.4 CSV/PDF export for all tables (print schedule, export view) □ 4.5 Global search functionality (patients, appointments, invoices) □ 4.6 Mobile-responsive adjustments □ 4.7 Analytics module (cross-module reporting, deferred) □ 4.8 End-to-end real-time testing (multi-browser, verify all events propagate correctly across staff roles) ================================================================================ 11. TECHNICAL DECISIONS & RISKS ================================================================================ DECISIONS: 1. FormBuilder is used ONLY for model/migration/relationship generation. All pages, forms, and CRUD interfaces are custom-built to match the Stitch prototype pixel-for-pixel. No generic CRUD builder output. 2. Create a separate DenteFlow layout (DenteFlowLayout.vue) rather than modifying the existing AuthenticatedLayout. This keeps the FormBuilder admin and DenteFlow app cleanly separated. 3. DUAL DATA LOADING PATTERN: - Inertia.js for page navigation and initial data (props on page load) - API routes (Axios) for all live/dynamic data within pages (charts, calendar feeds, search/filter, inline edits, modals) This gives us the best of both: SEO-friendly initial loads via Inertia and responsive live updates via API. 4. REAL-TIME BROADCASTING via Laravel Reverb (NOT Pusher): - Self-hosted WebSocket server (no external dependency) - Every data mutation fires a broadcast event - All connected staff receive instant updates - Use case: receptionist cancels appointment → dentist's calendar updates instantly without page refresh - Private channels scoped per clinic for data isolation 5. Multi-clinic: Implement via middleware-based scoping. A ClinicContext middleware reads the active clinic from session/header and applies global scopes to all DenteFlow models. 6. Odontogram: Build as a REUSABLE SVG TEMPLATE component. - Separate standalone component (InteractiveOdontogram.vue) - Each tooth is an SVG group with its own path and click handler - Reusable across: Patient Profile, Treatment Plan creation, Dental Chart tab, print views - Props-driven: pass dental records array, get events back - The SVG template approach means the tooth shapes are defined once and instantiated with dynamic data/colors 7. Calendar: Fully custom-built (NO FullCalendar dependency). Custom build gives complete control over: - The dark DenteFlow theme (no CSS override fighting) - Multi-lane provider columns matching the Stitch prototype exactly - Drag-and-drop behavior tailored to dental workflows - Deep Reverb integration for instant cross-staff updates 8. REUSABLE COMPONENT STRATEGY: Every UI element that appears in 2+ places is extracted into a standalone component: - StatusBadge (used in invoices, lab orders, appointments, inventory) - StatCard (used in dashboard, billing, procedures, inventory) - AvatarInitials (used in patient lists, calendar, activity feed) - GlassPanel (used in modals, sidebars) - BarChart/LineChart (used in dashboard, billing, procedures) - InteractiveOdontogram (used in patient profile, treatment plans) - AppointmentBlock (used in calendar, dashboard schedule) - FAB (used on every page) RISKS: - Interactive Odontogram complexity: Mitigated by SVG template approach. Each tooth is a reusable SVG group with standard click handlers. Build and test as isolated component before integrating. - Calendar drag-and-drop: Complex for multi-provider lanes. Mitigate by using Vue composables for drag behavior, test early in isolation. - Reverb stability: WebSocket connections can drop. Mitigate with Echo's auto-reconnection and a "connection lost" indicator in the UI. - Data volume: Large clinics may have 1000+ patients, 50+ daily appointments. Mitigate with pagination, lazy loading, database indexing. - FormBuilder model count: 25+ models is significant. Generate in batches, test relationships after each batch. - Pixel-perfect fidelity: Translating Stitch HTML/Tailwind to PrimeVue + custom components requires careful attention. Use the prototype HTML as direct reference during development. ================================================================================ END OF IMPLEMENTATION PLAN ================================================================================