Frontend Overview

The MedRegia frontend is a Vue 3 Single Page Application built with Vite and TypeScript, following the Feature-Sliced Design (FSD) architecture methodology.

Tech Stack

Technology	Version	Purpose
Vue 3	3.x	UI framework (Composition API)
TypeScript	5.x	Static typing
Vite	6.x	Build tool & dev server
Tailwind CSS	v4	Utility-first CSS
Vue Router	4.x	Client-side routing
Pinia	2.x	State management
Axios	1.x	HTTP client
Vitest	Latest	Unit testing

Project Structure

frontend/src/
├── app/             ← Router, plugins, global styles (wiring only — no business logic)
├── pages/           ← Route-level page shells (~50 lines max, compose widgets/features)
│   ├── auth/
│   ├── dashboard/
│   ├── vendors/
│   ├── invoices/
│   ├── transactions/
│   ├── settings/
│   ├── reports/
│   └── profile/
├── widgets/         ← Composite layout blocks used by multiple pages
│   ├── AppLayout.vue
│   ├── AppSidebar.vue
│   ├── AppHeader.vue
│   └── QuickActions.vue
├── features/        ← Domain slices (one per bounded context)
│   ├── auth/
│   ├── vendors/
│   ├── invoices/
│   ├── transactions/
│   ├── dashboard/
│   ├── settings/
│   ├── reports/
│   └── profile/
└── shared/          ← Cross-cutting utilities and primitives
    ├── api/         ← HTTP client + API factories
    ├── composables/ ← Reusable Vue composables
    ├── ui/          ← Generic UI components (AppButton, AppModal, etc.)
    ├── types/       ← Shared TypeScript interfaces
    └── utils/       ← Pure utility functions

Import Direction (strict)

graph TD
    P["pages/"] -->|"can import"| W["widgets/"]
    P --> F["features/"]
    P --> S["shared/"]
    W --> F
    W --> E["entities/"]
    W --> S
    F --> E
    F --> S
    E --> S

    style P fill:#4f46e5,color:#fff
    style W fill:#7c3aed,color:#fff
    style F fill:#db2777,color:#fff
    style E fill:#ea580c,color:#fff
    style S fill:#16a34a,color:#fff

• Never import upward (e.g. shared importing from features)
• Never import laterally between features (e.g. vendors importing from invoices)
• Always import a feature through its index.ts barrel — never its internal files