Frontend Documentation

Welcome to the CPR (Computerized Patient Record) frontend documentation. This guide covers everything a developer needs to work on the frontend codebase.

Tech Stack

Technology	Version	Purpose
Nuxt	4.x	Full-stack Vue framework (SPA mode)
Vue	3.5+	Reactive UI framework
TypeScript	5.x	Type-safe JavaScript
Pinia	3.x	State management
Tailwind CSS	via @nuxtjs/tailwindcss	Utility-first CSS
Heroicons	@heroicons/vue	Icon library
Sentry	@sentry/nuxt	Error tracking
Vitest	4.x	Unit & component testing
ESLint + Prettier	Latest	Code linting & formatting

Quick Start

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Run linting
npm run lint

# Format code
npm run format:fix

Project Structure Overview

app/
├── assets/css/         # Global styles (Tailwind entry)
├── components/         # Vue components (auto-imported)
│   ├── ui/             # Reusable base components (UiButton, UiInput, UiModal...)
│   ├── auth/           # Authentication components
│   ├── patient/        # Patient module components
│   ├── queue/          # Queue module components
│   ├── pharmacy/       # Pharmacy module components
│   ├── configuration/  # Configuration module components
│   ├── surgery/        # Surgery schedule components
│   ├── profile/        # User profile components
│   ├── report/         # Report layout components
│   └── utils/          # Shared utility components
├── composables/        # Reusable composition functions
├── constants/          # Static data and constants
├── data/               # Static datasets (e.g., address data)
├── layouts/            # Page layouts (default, auth, pharmacy, queue, print)
├── middleware/         # Route middleware (auth, reset-password)
├── pages/              # File-based routing
├── plugins/            # Nuxt plugins (permissions)
├── sevices/            # API service classes
├── stores/             # Pinia stores
├── types/              # TypeScript type definitions
└── utils/              # Utility functions

Application Modules

The CPR system is organized into these main modules:

• Dashboard — Overview and statistics
• Patient — Patient records, visits, medical history, certificates
• Queue — Patient queue management, billing, medicine purchases
• Surgery Schedule — Surgery scheduling and tracking
• Pharmacy — Inventory, items, purchase orders, deliveries, stock movement, suppliers, transactions
• Configuration — System settings (doctors, procedures, insurances, billing items, surgery locations)
• Profile — User profile and password management

Key Architecture Patterns

1. Service Layer — API calls go through service classes in sevices/
2. Composables — Business logic is encapsulated in composables per domain
3. Pinia Stores — Global state management for each module
4. Permission-based Access — UI elements guarded by $can() / useCanAccess()
5. Multi-branch Support — Users can switch between clinic branches

Documentation Sections

How-To Guides ⭐

Task-oriented recipes for the Nuxt frontend. (For Inertia admin-panel screens, see backend admin guides.)

• Consume a paginated typeahead
• Confirm + toast pattern for destructive actions
• Verify a UI change end-to-end
• See all how-to guides →

Guidelines

• Coding Standards — Code style, TypeScript usage, and conventions
• Best Practices — Patterns to follow and anti-patterns to avoid
• Naming Conventions — File, component, and variable naming rules
• Code Review — What to look for during reviews

Workflow

• Development Process — Day-to-day development workflow
• Git Workflow — Branch strategy and commit conventions
• Deployment — Build and deploy process
• Release Process — Versioning and release steps

Standards

• File Structure — Directory organization and file placement rules
• Component Architecture — How components are structured
• API Integration — API client, services, and data fetching patterns
• Error Handling — Error handling strategies across the app

Components

• Overview — Component organization and auto-import
• Base Components — Ui* component library reference
• Layouts — Layout system and available layouts
• Forms — Form patterns, validation, and composables

State Management

• Overview — State management strategy
• Pinia — Store patterns and conventions
• Composables State — Composable-based state and shared state

Styling

• Overview — Styling approach and tools
• CSS Methodology — Tailwind layer system and custom classes
• Tailwind CSS — Tailwind configuration and usage
• Theming — Color palette and brand theming

Testing

• Overview — Testing strategy and tools
• Unit Testing — Testing composables and utilities
• Component Testing — Testing Vue components
• E2E Testing — End-to-end testing approach

Performance

• Optimization — General performance guidelines
• Lazy Loading — Code splitting and lazy loading
• Caching Strategies — Client-side caching
• Bundle Optimization — Build output optimization

Accessibility

• Overview — Accessibility standards
• WCAG Guidelines — WCAG compliance
• ARIA Practices — ARIA attributes and patterns

Security

• Overview — Security considerations
• Authentication — Auth flow and token management
• XSS Prevention — XSS prevention strategies

Tooling

• ESLint — Linting configuration
• Prettier — Code formatting
• TypeScript — TypeScript configuration
• Vite — Build tool configuration