# LIS Frontend Implementation Plan

## Overview
Build the complete LIS (Laboratory Information System) frontend module following the same patterns as the HR module. 19 screens total, 78 backend API endpoints ready.

**Reference file:** `/home/moonui/public_html/full_html_system1220enhanced_lab_requests_v26.html`
**API prefix:** `/api/lis/`
**Permission prefix:** `lab.` (matching backend)
**Route prefix:** `/lis/`

---

## Phase 1: Module Scaffolding + Navigation + Dashboard (Foundation)

### 1.1 Directory Structure
Create `src/app/features/lis/` with these subdirectories:
```
lis/
├── dashboard/
├── sections/
├── investigation-categories/
├── specimen-types/
├── investigations/
├── patients/
├── doctors/
├── requests/
├── visits/
├── samples/
├── results/
├── qc/
├── machines/
├── price-lists/
├── invoices/
├── compliance/
├── reagents/
├── reports/
├── settings/
└── portal/
```

### 1.2 Services (under `src/app/core/services/`)
Create 18 LIS services following HR pattern:
- `lis-section.service.ts` → `/api/lis/sections`
- `lis-investigation-category.service.ts` → `/api/lis/investigation-categories`
- `lis-specimen-type.service.ts` → `/api/lis/specimen-types`
- `lis-investigation.service.ts` → `/api/lis/investigations`
- `lis-patient.service.ts` → `/api/lis/patients`
- `lis-doctor.service.ts` → `/api/lis/doctors`
- `lis-request.service.ts` → `/api/lis/requests` (+ cancel, add/remove investigations)
- `lis-visit.service.ts` → `/api/lis/visits` (+ complete)
- `lis-sample.service.ts` → `/api/lis/samples` (+ collect, receive, reject)
- `lis-result.service.ts` → `/api/lis/results` (+ enter, validate, approve, release)
- `lis-qc.service.ts` → `/api/lis/qc-lots` (+ results, levey-jennings)
- `lis-machine.service.ts` → `/api/lis/machines` + `/api/lis/machine-results`
- `lis-price-list.service.ts` → `/api/lis/price-lists`
- `lis-insurance-contract.service.ts` → `/api/lis/insurance-contracts`
- `lis-invoice.service.ts` → `/api/lis/invoices` (+ post, cancel)
- `lis-compliance.service.ts` → `/api/lis/compliance/*` (audit-logs, checklists, custody-logs, retention-policies)
- `lis-reagent.service.ts` → `/api/lis/reagents` (+ batches, consume, alerts)
- `lis-report.service.ts` → `/api/lis/reports/*` (6 reports)

### 1.3 Routing (in `app.routes.ts`)
Add LIS routes block after HR (before POS):
```typescript
{
  path: 'lis',
  children: [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', loadComponent: ... },
    { path: 'sections', permissions: ['lab.sections'], ... },
    { path: 'investigation-categories', permissions: ['lab.investigation-categories'], ... },
    { path: 'specimen-types', permissions: ['lab.specimen-types'], ... },
    { path: 'investigations', permissions: ['lab.investigations'], ... },
    { path: 'patients', permissions: ['lab.patients'], ... },
    { path: 'doctors', permissions: ['lab.doctors'], ... },
    { path: 'requests', permissions: ['lab.requests'], ... },
    { path: 'visits', permissions: ['lab.visits'], ... },
    { path: 'samples', permissions: ['lab.samples'], ... },
    { path: 'results', permissions: ['lab.results'], ... },
    { path: 'qc', permissions: ['lab.qc'], ... },
    { path: 'machines', permissions: ['lab.machines'], ... },
    { path: 'price-lists', permissions: ['lab.price-lists'], ... },
    { path: 'invoices', permissions: ['lab.invoices'], ... },
    { path: 'compliance', permissions: ['lab.compliance'], ... },
    { path: 'reagents', permissions: ['lab.reagents'], ... },
    { path: 'reports', permissions: ['lab.reports'], ... },
    { path: 'settings', permissions: ['lab.settings'], ... },
  ],
}
```

### 1.4 Navigation Integration

**Sidebar** (`sidebar.component.ts` — add after HR block):
```
LIS Module (pi pi-microchip)
├── Dashboard (pi pi-chart-bar)
├── Lab Setup
│   ├── Sections (pi pi-th-large)
│   ├── Investigation Categories (pi pi-tags)
│   ├── Specimen Types (pi pi-eyedropper)
│   └── Investigations (pi pi-list-check)
├── Reception
│   ├── Patients (pi pi-users)
│   ├── Doctors (pi pi-user)
│   ├── Visits (pi pi-calendar-plus)
│   └── Requests (pi pi-file-edit)
├── Laboratory
│   ├── Samples (pi pi-barcode [or pi pi-qrcode])
│   └── Results (pi pi-check-square)
├── Quality & Machines
│   ├── QC Module (pi pi-verified)
│   └── Machines (pi pi-desktop)
├── Pricing & Billing
│   ├── Price Lists (pi pi-dollar)
│   ├── Invoices (pi pi-receipt)
│   └── Reagents (pi pi-box)
├── Compliance (pi pi-shield)
├── Reports (pi pi-chart-bar)
└── Settings (pi pi-cog)
```

**Mega-menu** (`nav-items.config.ts` — add LIS module):
Same groups as sidebar in NavModule format.

**Settings page** (`settings.component.ts` — add tab):
```typescript
{ label: 'LIS', value: 'lis', icon: 'pi pi-microchip' }
```

### 1.5 Translation Keys
Add `LIS` section in both `ar.json` and `en.json` with:
- NAV keys (sidebar + mega-menu labels)
- Common CRUD keys (similar to HR pattern)
- Per-screen field labels, statuses, messages

### 1.6 Dashboard (LIS-FE-17)
KPI cards from 6 report endpoints (forkJoin):
- Today Requests (`reports/test-volume`)
- Finished Today (`reports/test-volume`)
- Pending (`reports/test-volume`)
- Revenue (`reports/revenue`)
- QC Pass Rate (`reports/qc-summary`)
- Abnormal Results (`reports/abnormals`)

Charts:
- Top Ordered Tests (bar chart from `reports/test-volume`)
- Weekly Revenue (line chart from `reports/revenue`)
- TAT Stats (from `reports/turnaround-time`)

Quick actions + recent requests table.

---

## Phase 2: Core Setup Screens (LIS-FE-01 to LIS-FE-04)

### 2.1 Sections (LIS-FE-01) — Simple CRUD
- Table: code, name_ar, name_en, description, is_active
- FormDialog: name_ar, name_en, code, description, is_active toggle
- API: GET/POST `/sections`, GET/PUT/DELETE `/sections/{id}`

### 2.2 Investigation Categories (LIS-FE-04) — Simple CRUD
- Table: code, name_ar, name_en, section, is_active
- FormDialog: name_ar, name_en, code, section_id dropdown, description, is_active
- API: GET/POST `/investigation-categories`, GET/PUT/DELETE `/investigation-categories/{category}`

### 2.3 Specimen Types (LIS-FE-03) — Simple CRUD
- Table: code, name_ar, name_en, container_type, color, is_active
- FormDialog: name_ar, name_en, code, container_type, color, volume, instructions, is_active
- API: GET/POST `/specimen-types`, GET/PUT/DELETE `/specimen-types/{id}`

### 2.4 Investigations (LIS-FE-02) — Complex
- Table: code, name, category, section, type, specimen_type, price, is_active
- Type badges: single, panel, calculated, profile
- FormDialog with tabs:
  - Basic Info: name_ar, name_en, code, category_id, section_id, type, specimen_type_id, unit, price, method, sort_order
  - Normal Ranges: table with gender/age/min/max/critical values — PUT `/investigations/{id}/normal-ranges`
  - Panel Members (for panel type): multi-select of investigations — PUT `/investigations/{id}/panel-members`
- API: CRUD + normal-ranges + panel-members

---

## Phase 3: Patient & Doctor Management (LIS-FE-05, LIS-FE-08)

### 3.1 Patients (LIS-FE-05)
- Table: MRN, name, gender, age, mobile, blood_group, nationality
- FormDialog: name_ar, name_en, gender, date_of_birth, mobile, email, national_id, blood_group, nationality, address, insurance_info (JSON)
- API: CRUD `/patients`

### 3.2 Doctors (LIS-FE-08)
- Table: code, name, specialty, phone, hospital, is_active
- FormDialog: name_ar, name_en, code, specialty, phone, email, hospital, license_number, is_active
- API: CRUD `/doctors`

---

## Phase 4: Lab Request Workflow (LIS-FE-06, LIS-FE-07)

### 4.1 Lab Request Wizard (LIS-FE-06) — 4-Step Stepper
Uses PrimeNG `Stepper` component:

**Step 1: Patient Selection**
- Search existing patient or create new inline
- Display patient info card

**Step 2: Tests Selection**
- Multi-select investigations (with category/section filter)
- Show specimen types needed
- Investigation chips with prices

**Step 3: Pricing & Discounts**
- Price summary table (test, price, discount, net)
- Total amount, discount input
- Payment status selector

**Step 4: Confirmation**
- Review all selections
- Submit → POST `/requests` with items
- Show barcode/print option

### 4.2 Lab Requests List (LIS-FE-07)
- Status tabs: All, Draft, Confirmed, In Progress, Completed, Cancelled
- Filters: date range, patient, doctor, priority, status, source
- Table: request_number, patient, date, priority, status, tests count, total, actions
- Row expand: show request items with individual statuses
- Actions: view, edit (draft only), cancel, add investigations
- API: GET `/requests`, PUT `/requests/{id}`, POST `/requests/{id}/cancel`, POST `/requests/{id}/investigations`

---

## Phase 5: Sampling & Results (LIS-FE-09, LIS-FE-10)

### 5.1 Sample Collection (LIS-FE-09)
**Collection Queue:**
- List pending samples grouped by patient
- Patient card with info + required tests
- Collect button → POST `/samples` then POST `/samples/{id}/collect`

**Receiving Area:**
- Barcode scan input
- Pending receipt list
- Receive → POST `/samples/{id}/receive` with quality_status
- Reject → POST `/samples/{id}/reject` with reason

### 5.2 Results Workspace (LIS-FE-10) — Most Complex Screen
**Dual view toggle:**

**Kanban Board:**
- 3 columns: New, In Progress, Finished
- Cards show patient, tests, TAT, priority badge
- Click card → open result entry

**Result Entry:**
- Select request → show items
- For each item: result_value input, auto-flag (normal/abnormal/critical)
- Enter → POST `/results/{id}/enter`
- Validate → POST `/results/{id}/validate`
- Approve → POST `/results/{id}/approve`
- Release → POST `/results/{id}/release`
- Workflow badges showing current status

---

## Phase 6: QC & Machines (LIS-FE-11, LIS-FE-12)

### 6.1 QC Module (LIS-FE-11)
**QC Lots Management:**
- CRUD for QC lots (material, target, SD, levels)
- API: CRUD `/qc-lots`

**QC Results Entry:**
- Select lot → enter measured_value
- Auto-calculates z-score, applies Westgard rules
- POST `/qc-lots/{lot}/results`

**Levey-Jennings Chart:**
- Line chart with ±1SD, ±2SD, ±3SD bands
- GET `/qc-lots/{lot}/levey-jennings`
- Use Chart.js with annotation plugin

### 6.2 Machine Management (LIS-FE-12)
- Machine list: name, type, model, serial, connection status
- CRUD `/machines`
- Machine Results tab:
  - GET `/machine-results` and `/machine-results/unmatched`
  - Actions: approve, match to request, reject

---

## Phase 7: Pricing & Invoicing (LIS-FE-13)

### 7.1 Price Lists
- CRUD `/price-lists` — name, effective_date, is_default
- Price list items with investigation prices

### 7.2 Insurance Contracts
- CRUD `/insurance-contracts` — company, discount rates, coverage

### 7.3 Invoices
- List with status tabs: Draft, Posted, Cancelled
- Create from request
- Post invoice → POST `/invoices/{id}/post`
- Cancel → POST `/invoices/{id}/cancel` with reason
- Invoice detail view with items, totals

---

## Phase 8: Reports, Compliance, Portal (LIS-FE-14, LIS-FE-16, LIS-FE-19)

### 8.1 Reports Center (LIS-FE-19)
6 report types with date range filters:
- Workload Report (`/reports/workload`)
- Turnaround Time (`/reports/turnaround-time`)
- Test Volume (`/reports/test-volume`)
- Revenue (`/reports/revenue`)
- QC Summary (`/reports/qc-summary`)
- Abnormals (`/reports/abnormals`)

Each with table display + chart visualization + Excel/PDF export.

### 8.2 Compliance (LIS-FE-14)
- Checklists CRUD + complete action
- Audit logs viewer (read-only)
- Custody logs
- Retention policies CRUD

### 8.3 Patient Portal (LIS-FE-16)
- Portal login form (patient credentials)
- Results viewer (published results only)
- Print/download PDF

---

## Phase 9: Settings & Inventory (LIS-FE-15, LIS-FE-18)

### 9.1 LIS Settings (LIS-FE-15)
Add LIS tab in main settings page:
- Lab Name, Lab Code, Lab License
- Default TAT (minutes)
- Report header configuration
- Result publishing settings
- Barcode format settings

### 9.2 Reagent Inventory (LIS-FE-18)
- Reagent CRUD with batches
- POST `/reagents/{id}/batches` — add batch
- POST `/reagents/{id}/consume` — record consumption
- GET `/reagents/{id}/consumption-report`
- Low stock alerts: GET `/reagents/alerts/low-stock`
- Expiring alerts: GET `/reagents/alerts/expiring`

---

## File Count Estimate
- **Services:** 18 files
- **Components:** 20 directories × 3 files (ts, html, scss) = 60 files
- **Models:** ~15 interface files
- **Translations:** Updates to ar.json + en.json (~300+ keys)
- **Config updates:** app.routes.ts, nav-items.config.ts, sidebar.component.ts, settings.component.ts

**Total: ~95 new files + 6 modified files**

---

## Implementation Order
1. Phase 1 → Scaffolding + Nav + Dashboard (sets up everything)
2. Phase 2 → Core setup (data needed by all other screens)
3. Phase 3 → Patients & Doctors (needed for requests)
4. Phase 4 → Requests & Visits (core workflow)
5. Phase 5 → Samples & Results (core workflow continued)
6. Phase 6 → QC & Machines
7. Phase 7 → Pricing & Invoicing
8. Phase 8 → Reports, Compliance, Portal
9. Phase 9 → Settings & Inventory

Build & deploy after each phase.