# CLQMS Frontend - Project Overview

## Project Purpose
CLQMS (Clinical Laboratory Quality Management System) frontend built with SvelteKit. This is a web application for managing clinical laboratory operations including patients, specimens, test orders, results, and laboratory workflows.

## Tech Stack
- **Framework**: SvelteKit (latest with Svelte 5 runes)
- **Styling**: TailwindCSS 4 + DaisyUI
- **Icons**: Lucide Svelte
- **Language**: JavaScript (no TypeScript - KISS principle)
- **Build Tool**: Vite
- **Package Manager**: pnpm
- **Authentication**: JWT tokens with HTTP-only cookies

## Architecture Principles
- **KISS**: Keep It Simple - plain JavaScript, minimal tooling
- **Manual API Wrapper**: No codegen, simple fetch-based API client
- **File-based Routing**: Standard SvelteKit routing patterns
- **Server-side Auth Check**: SvelteKit hooks for session validation

## Project Structure
```
src/
├── lib/
│   ├── api/              # API service functions (client.js, auth.js, valuesets.js, etc.)
│   ├── components/       # Reusable Svelte components (DataTable, Modal, SelectDropdown, Sidebar, etc.)
│   ├── stores/           # Svelte stores (auth.js, valuesets.js)
│   └── utils/            # Utility functions (toast.js)
├── routes/               # SvelteKit routes
│   ├── +layout.svelte    # Root layout
│   ├── login/            # Login page
│   └── (app)/            # Protected route group
│       ├── +layout.svelte # Auth check with sidebar
│       ├── dashboard/
│       ├── master-data/   # Locations, contacts, specialties, valuesets, geography, occupations, counters
│       └── patients/
├── app.css               # Global styles with Tailwind
└── app.html              # HTML template
```

## Key Features Implemented
- Phase 0: Foundation (Auth, base API client, layouts) ✅
- Phase 1: Foundation Data (ValueSets, Locations, Contacts, Occupations, Specialties, Counters, Geography) ✅
- Phase 2a: Patient CRUD ✅
- Phase 11: Authentication (login/logout, JWT handling) ✅

## Pending Features
- Phase 2b: Advanced Patient Features
- Phase 3: Patient Visits (list page exists, needs create/edit forms)
- Phase 4: Specimen Management
- Phase 5: Test Catalog
- Phase 6: Orders
- Phase 7: Results & Dashboard
- Phase 8: User-defined ValueSets
- Phase 9: Organization Structure
- Phase 10: Edge API (Instrument Integration)

## API Proxy Configuration
API requests to `/api` are proxied to `http://localhost:8000` in development mode (configured in vite.config.js).

## Environment Variables
- `VITE_API_URL`: Base URL for API (default: empty string, uses proxy in dev)