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)

2.7 KiB Raw Blame History