# LIS Kanban Redesign — Design Document

**Date:** 2026-03-07
**Status:** Approved
**Project:** LIS (Support Project ID: 3)

## Goal

Redesign the LIS kanban board to handle hundreds of daily tests across multiple sections. Replace the single-section, 3-column layout with a multi-section, date-aware, data-rich interface.

## Current Problems

- Only one section visible at a time — techs must switch constantly
- No date navigation — can only see today's work
- Cards show minimal info (sample ID only) — techs need more context
- Barcode scanner only works within selected section
- Completed column fills up fast, pushing active work out of view

## New Layout

### Structure: Section Rows

Each lab section gets a horizontal row containing 3 status columns:

```
┌─────────────────────────────────────────────────────┐
│ [< 2026-03-06] [Today 2026-03-07] [2026-03-08 >]   │
│ [Barcode Scanner Input]  [View: ☰ 🔳 📋]           │
├─────────────────────────────────────────────────────┤
│ Hematology                                          │
│  Received (12)  │  Processing (5)  │  Completed (45)│
│  [card] [card]  │  [card] [card]   │  [mini] [mini] │
├─────────────────────────────────────────────────────┤
│ Chemistry                                           │
│  Received (8)   │  Processing (3)  │  Completed (30)│
│  [card] [card]  │  [card] [card]   │  [mini] [mini] │
├─────────────────────────────────────────────────────┤
│ ...more sections...                                 │
└─────────────────────────────────────────────────────┘
```

- All sections visible simultaneously (vertical scroll)
- Each section row is collapsible (click header to toggle)
- Horizontal scroll within each status column if cards overflow

### Date Navigation

- Previous / Today / Next buttons at the top
- All days are actionable (can start/complete tests from any day)
- Date badge shows count of pending items per day (optional enhancement)

### Rich Cards

Each card displays:
- **Sample barcode** (prominent, top)
- **Patient name** (or external lab name)
- **Priority** — color-coded left border (urgent=red, stat=orange, routine=blue)
- **Investigation names** — comma-separated, truncated with tooltip
- **Test count** — badge showing number of investigations
- **Specimen type** — small icon or label
- **Doctor name** — small text, bottom
- **Time elapsed** — since received/since processing started (color shifts: green→yellow→red)

### Completed Column — Multi-View Toggle

Three view modes via icon toggle in the toolbar:

1. **Collapsed** (default) — just a count badge, no cards shown. Maximizes space for active work.
2. **Mini** — compact single-line items (barcode + patient + time). Good for quick reference.
3. **Full** — same rich cards as Received/Processing. For detailed review.

### Smart Barcode Scanner

- Single input field at the top (always visible)
- Auto-detects which section the scanned sample belongs to
- Workflow:
  - If sample is in Received → auto-start processing (move to Processing)
  - If sample is in Processing → auto-complete (move to Completed)
  - Visual + audio feedback on scan (success beep, error buzz)
  - Toast notification showing what happened: "Sample ABC-123 → Processing (Hematology)"

## Backend Requirements

### New: Date parameter on kanban API

```
GET /api/lis/sections/{sectionId}/kanban?date=2026-03-07
```

- Returns samples for the specified date (based on request date)
- Default: today if no date parameter
- Ticket needed for backend team

### Existing endpoints (no changes needed)

- `POST /api/lis/request-investigations/{id}/start-processing`
- `POST /api/lis/request-investigations/{id}/complete-processing`

## Frontend Components

### Modified: `lis-kanban.component.ts`

Complete rewrite of the kanban component:
- Load ALL sections on init (not just one)
- For each section, fetch kanban data in parallel
- Date signal for navigation
- Barcode scanner logic with section auto-detection
- View mode signal (collapsed/mini/full) for completed column

### New: `kanban-card.component.ts`

Reusable card component with:
- Inputs: sample data, view mode (full/mini)
- Priority color border
- Time elapsed pipe (auto-updates)
- Click handler for detail view

### Modified: `lis-kanban.service.ts`

- Add `date` parameter to `getKanban(sectionId, date)`
- Add method to fetch all sections' kanban data in parallel

## Tickets

### Phase 1: Backend

| # | Type | Title |
|---|------|-------|
| 1 | BE | Add date filter to kanban API endpoint |

### Phase 2: Frontend

| # | Type | Title |
|---|------|-------|
| 2 | FE | Kanban multi-section layout + date navigation |
| 3 | FE | Rich kanban cards + completed column multi-view |
| 4 | FE | Smart barcode scanner with section auto-detection |

## Dependencies

```
#BE-date-filter --> #FE-layout (needs date param)
#FE-layout --> #FE-cards (layout must exist first)
#FE-layout --> #FE-barcode (needs multi-section data)
```