From 52d4fc73222b8acaac8841aec766f5296acfe6f8 Mon Sep 17 00:00:00 2001
From: mahdahar <89adham@gmail.com>
Date: Fri, 20 Feb 2026 16:49:34 +0700
Subject: [PATCH] feat(tests): add modals directory and update test management
 components

---
 docs/FRONTEND_TEST_MANAGEMENT_PROMPT.md       | 1581 -----------------
 src/lib/api/tests.js                          |    4 +-
 .../(app)/master-data/tests/+page.svelte      |   14 +
 .../tests/test-modal/TestFormModal.svelte     |   39 +-
 .../modals/TestTypePickerModal.svelte         |   68 +
 .../tests/test-modal/tabs/BasicInfoTab.svelte |  110 +-
 .../tests/test-modal/tabs/RefNumTab.svelte    |  725 ++++----
 .../tests/test-modal/tabs/RefTxtTab.svelte    |  148 +-
 .../test-modal/tabs/TechDetailsTab.svelte     |  591 +++++-
 9 files changed, 1262 insertions(+), 2018 deletions(-)
 delete mode 100644 docs/FRONTEND_TEST_MANAGEMENT_PROMPT.md
 create mode 100644 src/routes/(app)/master-data/tests/test-modal/modals/TestTypePickerModal.svelte

diff --git a/docs/FRONTEND_TEST_MANAGEMENT_PROMPT.md b/docs/FRONTEND_TEST_MANAGEMENT_PROMPT.md
deleted file mode 100644
index 4f51eb0..0000000
--- a/docs/FRONTEND_TEST_MANAGEMENT_PROMPT.md
+++ /dev/null
@@ -1,1581 +0,0 @@
-# CLQMS Master Data - Test Management Frontend Development Prompt
-
-## 📋 Project Overview
-
-Build a modern, responsive Svelte 5 frontend for CLQMS (Clinical Laboratory Quality Management System) Test Management module. The frontend will consume the existing REST API backend (`/api/tests`) and provide a comprehensive interface for managing laboratory test definitions across all test types.
-
----
-
-## 🎯 Objective
-
-Create a user-friendly, type-safe frontend application that enables laboratory administrators to:
-- Browse and search all test definitions with filtering
-- Create new tests of any type (TEST, PARAM, CALC, GROUP, TITLE)
-- Edit existing tests with type-specific configurations
-- Manage reference ranges (numeric and text-based)
-- Configure test mappings for external systems
-- Organize tests into groups and panels
-- Manage calculated test formulas
-
----
-
-## 🛠️ Technology Stack (Svelte 5)
-
-### Core Requirements
-- **Framework**: Svelte 5 with runes (`$state`, `$derived`, `$effect`)
-- **Meta-Framework**: SvelteKit (for routing and server-side features)
-- **Language**: TypeScript (strict mode enabled)
-- **Styling**: Tailwind CSS
-- **UI Components**: Skeleton UI (or Melt UI)
-- **Forms**: Headless form components with validation
-- **HTTP Client**: Axios (with request/response interceptors)
-- **State Management**: Svelte 5 runes (no external store library required)
-- **Build Tool**: Vite (comes with SvelteKit)
-
-### Recommended Dependencies
-```json
-{
-  "dependencies": {
-    "svelte": "^5.0.0",
-    "@sveltejs/kit": "^2.0.0",
-    "axios": "^1.6.0",
-    "zod": "^3.22.0",
-    "date-fns": "^3.0.0"
-  },
-  "devDependencies": {
-    "skeleton": "^2.8.0",
-    "@skeletonlabs/tw-plugin": "^0.3.0",
-    "tailwindcss": "^3.4.0",
-    "autoprefixer": "^10.4.0",
-    "postcss": "^8.4.0",
-    "typescript": "^5.3.0"
-  }
-}
-```
-
----
-
-## 📁 Project Structure
-
-```
-src/
-├── lib/
-│   ├── components/
-│   │   ├── test/
-│   │   │   ├── TestList.svelte                 # Main test listing page
-│   │   │   ├── TestForm.svelte                 # Main form container with tabs
-│   │   │   ├── TestCard.svelte                 # Single test card/row
-│   │   │   ├── TestFilterPanel.svelte          # Search/filter panel
-│   │   │   ├── SidebarTabs.svelte              # Left navigation tabs
-│   │   │   ├── tabs/
-│   │   │   │   ├── BasicInfoTab.svelte         # Basic test info
-│   │   │   │   ├── TechDetailsTab.svelte      # Technical specifications
-│   │   │   │   ├── CalcDetailsTab.svelte       # Calculated test formula
-│   │   │   │   ├── GroupMembersTab.svelte      # Group member management
-│   │   │   │   ├── MappingsTab.svelte          # System mappings
-│   │   │   │   ├── RefNumTab.svelte           # Numeric reference ranges
-│   │   │   │   └── RefTxtTab.svelte           # Text reference ranges
-│   │   │   └── modals/
-│   │   │       ├── RefNumModal.svelte          # Edit reference range modal
-│   │   │       ├── RefTxtModal.svelte          # Edit text reference modal
-│   │   │       ├── MappingModal.svelte         # Edit mapping modal
-│   │   │       └── MemberModal.svelte          # Add group member modal
-│   │   └── ui/                                 # Reusable UI components
-│   │       ├── Button.svelte
-│   │       ├── Input.svelte
-│   │       ├── Select.svelte
-│   │       ├── Checkbox.svelte
-│   │       ├── Table.svelte
-│   │       ├── Modal.svelte
-│   │       ├── Badge.svelte
-│   │       ├── Tabs.svelte
-│   │       ├── Alert.svelte
-│   │       └── Spinner.svelte
-│   ├── stores/
-│   │   ├── testStore.ts                        # Test form state with runes
-│   │   ├── valueSetStore.ts                    # ValueSet/dropdown data
-│   │   ├── authStore.ts                        # Authentication state
-│   │   └── uiStore.ts                         # UI state (modals, tabs)
-│   ├── services/
-│   │   ├── api.ts                              # Axios instance with interceptors
-│   │   ├── testService.ts                      # Test API operations
-│   │   ├── valueSetService.ts                  # ValueSet API calls
-│   │   └── validationService.ts                # Frontend validation logic
-│   ├── types/
-│   │   ├── test.types.ts                       # All test-related types
-│   │   ├── api.types.ts                        # API response/request types
-│   │   ├── valueset.types.ts                   # ValueSet types
-│   │   └── index.ts                           # Type exports
-│   └── utils/
-│       ├── validation.ts                       # Validation helpers
-│       ├── format.ts                           # Formatters (dates, numbers)
-│       ├── constants.ts                        # App constants
-│       └── helpers.ts                          # Utility functions
-├── routes/
-│   ├── +layout.svelte                          # Root layout with nav
-│   ├── +page.svelte                            # Landing page
-│   ├── tests/
-│   │   ├── +page.svelte                        # Test list page
-│   │   └── [id]/
-│   │       └── +page.svelte                    # Test detail/edit page
-│   └── login/
-│       └── +page.svelte                        # Login page
-├── app.html                                    # HTML template
-└── app.css                                     # Global styles
-```
-
----
-
-## 🔌 API Integration
-
-### Base Configuration
-
-**API Base URL**: `http://localhost:8080/api` (configurable via environment variable)
-
-**Authentication**: JWT token via HTTP header
-```
-Authorization: Bearer {token}
-```
-
-### Endpoints
-
-#### 1. List Tests
-```
-GET /api/tests
-Query Parameters:
-  - SiteID (optional): Filter by site
-  - TestType (optional): Filter by test type (TEST, PARAM, CALC, GROUP, TITLE)
-  - VisibleScr (optional): Filter by screen visibility (0/1)
-  - VisibleRpt (optional): Filter by report visibility (0/1)
-  - TestSiteName (optional): Search by test name (partial match)
-```
-
-**Response**:
-```typescript
-{
-  status: "success";
-  message: string;
-  data: TestSummary[];
-}
-
-interface TestSummary {
-  TestSiteID: number;
-  TestSiteCode: string;
-  TestSiteName: string;
-  TestType: string;
-  TestTypeLabel: string;
-  SeqScr: number;
-  SeqRpt: number;
-  VisibleScr: number;
-  VisibleRpt: number;
-  CountStat: number;
-  StartDate: string;
-  DisciplineID?: number;
-  DepartmentID?: number;
-  DisciplineName?: string;
-  DepartmentName?: string;
-}
-```
-
-#### 2. Get Single Test
-```
-GET /api/tests/:id
-```
-
-**Response**:
-```typescript
-{
-  status: "success";
-  message: string;
-  data: TestDetail;
-}
-
-interface TestDetail {
-  // Base fields
-  TestSiteID: number;
-  TestSiteCode: string;
-  TestSiteName: string;
-  TestType: string;
-  TestTypeLabel: string;
-  Description?: string;
-  SiteID: number;
-  SeqScr: number;
-  SeqRpt: number;
-  VisibleScr: number;
-  VisibleRpt: number;
-  CountStat: number;
-  StartDate: string;
-  EndDate?: string;
-
-  // Technical details (TEST/PARAM/CALC)
-  DisciplineID?: number;
-  DepartmentID?: number;
-  DisciplineName?: string;
-  DepartmentName?: string;
-  ResultType?: string;
-  RefType?: string;
-  VSet?: string;
-  Unit1?: string;
-  Factor?: number;
-  Unit2?: string;
-  Decimal?: number;
-  ReqQty?: number;
-  ReqQtyUnit?: string;
-  CollReq?: string;
-  Method?: string;
-  ExpectedTAT?: number;
-
-  // Nested data based on TestType
-  testdefcal?: Calculation[];      // For CALC type
-  testdefgrp?: GroupMember[];      // For GROUP type
-  testmap?: TestMapping[];         // For all types
-  testdeftech?: TechDetail[];      // For TEST/PARAM
-  refnum?: RefNumRange[];          // For TEST/PARAM (numeric ref)
-  reftxt?: RefTxtRange[];          // For TEST/PARAM (text ref)
-}
-
-interface RefNumRange {
-  RefNumID: number;
-  NumRefType: string;              // REF, CRTC, VAL, RERUN
-  NumRefTypeLabel: string;
-  RangeType: string;               // RANGE, THOLD
-  RangeTypeLabel: string;
-  Sex: string;                     // 0=All, 1=Female, 2=Male
-  SexLabel: string;
-  AgeStart: number;
-  AgeEnd: number;
-  LowSign?: string;                // =, <, <=
-  LowSignLabel?: string;
-  Low?: number;
-  HighSign?: string;               // =, >, >=
-  HighSignLabel?: string;
-  High?: number;
-  Flag?: string;                   // H, L, A, etc.
-  Interpretation?: string;
-}
-
-interface RefTxtRange {
-  RefTxtID: number;
-  TxtRefType: string;              // Normal, Abnormal, Critical
-  TxtRefTypeLabel: string;
-  Sex: string;
-  SexLabel: string;
-  AgeStart: number;
-  AgeEnd: number;
-  RefTxt: string;
-  Flag?: string;
-}
-```
-
-#### 3. Create Test
-```
-POST /api/tests
-Content-Type: application/json
-Body: CreateTestPayload
-```
-
-**Request**:
-```typescript
-interface CreateTestPayload {
-  SiteID: number;
-  TestSiteCode: string;
-  TestSiteName: string;
-  TestType: 'TEST' | 'PARAM' | 'CALC' | 'GROUP' | 'TITLE';
-  Description?: string;
-  SeqScr?: number;
-  SeqRpt?: number;
-  VisibleScr?: number;
-  VisibleRpt?: number;
-  CountStat?: number;
-  StartDate?: string;
-
-  // Nested details (based on TestType)
-  details?: {
-    // Technical (TEST/PARAM/CALC)
-    DisciplineID?: number;
-    DepartmentID?: number;
-    ResultType?: string;
-    RefType?: string;
-    VSet?: string;
-    Unit1?: string;
-    Factor?: number;
-    Unit2?: string;
-    Decimal?: number;
-    ReqQty?: number;
-    ReqQtyUnit?: string;
-    CollReq?: string;
-    Method?: string;
-    ExpectedTAT?: number;
-
-    // CALC only
-    FormulaInput?: string;
-    FormulaCode?: string;
-
-    // GROUP only
-    members?: number[];  // Array of TestSiteIDs
-  };
-
-  // Reference ranges (TEST/PARAM)
-  refnum?: Omit<RefNumRange, 'RefNumID' | 'NumRefTypeLabel' | 'RangeTypeLabel' | 'SexLabel' | 'LowSignLabel' | 'HighSignLabel'>[];
-  reftxt?: Omit<RefTxtRange, 'RefTxtID' | 'TxtRefTypeLabel' | 'SexLabel'>[];
-
-  // Mappings (all types)
-  testmap?: TestMapping[];
-}
-```
-
-**Response**:
-```typescript
-{
-  status: "created";
-  message: "Test created successfully";
-  data: { TestSiteId: number };
-}
-```
-
-#### 4. Update Test
-```
-PATCH /api/tests
-Content-Type: application/json
-Body: CreateTestPayload & { TestSiteID: number }
-```
-
-**Response**:
-```typescript
-{
-  status: "success";
-  message: "Test updated successfully";
-  data: { TestSiteId: number };
-}
-```
-
-#### 5. Delete Test (Soft Delete)
-```
-DELETE /api/tests
-Content-Type: application/json
-Body: { TestSiteID: number }
-```
-
-**Response**:
-```typescript
-{
-  status: "success";
-  message: "Test disabled successfully";
-  data: { TestSiteId: number; EndDate: string };
-}
-```
-
----
-
-## 🎨 UI/UX Design Specifications
-
-### Layout Architecture
-
-**Page Layout**: Fixed sidebar + scrollable content area
-
-```
-┌─────────────────────────────────────────────────────────────┐
-│  Header: CLQMS Test Management              [User] [Logout] │
-├────────────┬────────────────────────────────────────────────┤
-│            │                                                │
-│  Sidebar  │              Main Content Area                 │
-│  (Left)   │                                                │
-│            │                                                │
-│  Tab 1    │  ┌──────────────────────────────────────────┐  │
-│  Tab 2    │  │                                          │  │
-│  Tab 3    │  │        Dynamic Content                    │  │
-│  ...      │  │                                          │  │
-│            │  │                                          │  │
-│            │  │                                          │  │
-│            │  └──────────────────────────────────────────┘  │
-│            │                                                │
-│            │  [Save] [Cancel] [Delete]                      │
-│            │                                                │
-└────────────┴────────────────────────────────────────────────┘
-```
-
-### Test List Page
-
-**Components**:
-1. **Filter Panel** (top of page):
-   - Site dropdown (multi-select)
-   - Test Type dropdown (checkboxes)
-   - Visibility toggles (Screen/Report)
-   - Search input (debounced, 300ms)
-   - Clear filters button
-
-2. **Test Table/Card Grid**:
-   - Columns: Code, Name, Type, Discipline, Department, SeqScr, SeqRpt, Visibility, Actions
-   - Sortable headers (Code, Name, SeqScr, SeqRpt)
-   - Row actions: View, Edit, Delete (with confirmation)
-   - Row hover effect
-   - Test type badge with color coding
-
-3. **Pagination**:
-   - Show 20 items per page
-   - Page navigation buttons
-   - Page size selector (10, 20, 50, 100)
-   - Total count display
-
-**Table Design**:
-```
-┌─────────┬────────────────────┬───────┬────────────┬────────┬────────┬────────┬────────────┬─────────┐
-│ Code    │ Name               │ Type  │ Discipline │ Dept   │ ScrVis │ RptVis │ Actions    │         │
-├─────────┼────────────────────┼───────┼────────────┼────────┼────────┼────────┼────────────┼─────────┤
-│ CBC     │ Complete Blood     │ TEST  │ Hematology │ Hema   │ ☑      │ ☑      │ 👁️ ✏️ 🗑️ │         │
-│         │ Count              │       │            │        │        │        │            │         │
-│ HGB     │ Hemoglobin         │ PARAM │ Hematology │ Hema   │ ☑      │ ☑      │ 👁️ ✏️ 🗑️ │         │
-│ CALC_A1C│ A1C Calculated    │ CALC  │ Chemistry  │ Chem   │ ☑      │ ☑      │ 👁️ ✏️ 🗑️ │         │
-│ CMP_GRP │ Comprehensive     │ GROUP │ -          │ -      │ ☑      │ ☐      │ 👁️ ✏️ 🗑️ │         │
-│         │ Panel              │       │            │        │        │        │            │         │
-│ HEADER1 │ Chemistry Results  │ TITLE │ -          │ -      │ ☐      │ ☑      │ 👁️ ✏️ 🗑️ │         │
-└─────────┴────────────────────┴───────┴────────────┴────────┴────────┴────────┴────────────┴─────────┘
-```
-
-### Test Form Page
-
-**Left Sidebar Tabs** (Navigation):
-```
-┌──────────────┐
-│ Basic Info   │
-├──────────────┤
-│ Tech Details │
-├──────────────┤
-│ Calculations │ (CALC only)
-├──────────────┤
-│ Group Memb   │ (GROUP only)
-├──────────────┤
-│ Mappings     │
-├──────────────┤
-│ Ref Num      │ (TEST/PARAM/CALC)
-├──────────────┤
-│ Ref Txt      │ (TEST/PARAM)
-└──────────────┘
-```
-
-**Tab Visibility Rules**:
-| Tab | TEST | PARAM | CALC | GROUP | TITLE |
-|-----|------|-------|------|-------|-------|
-| Basic Info | ✅ | ✅ | ✅ | ✅ | ✅ |
-| Tech Details | ✅ | ✅ | ❌ | ❌ | ❌ |
-| Calculations | ❌ | ❌ | ✅ | ❌ | ❌ |
-| Group Members | ❌ | ❌ | ❌ | ✅ | ❌ |
-| Mappings | ✅ | ✅ | ✅ | ✅ | ✅ |
-| Ref Num | ✅ | ✅ | ✅ | ❌ | ❌ |
-| Ref Txt | ✅ | ✅ | ❌ | ❌ | ❌ |
-
-**Active Tab Styling**:
-- Left border accent color (primary theme color)
-- Light background highlight
-- Bold text
-- Icon indicator
-
-### Tab Content Specifications
-
-#### 1. Basic Info Tab
-
-**Form Layout** (Two-column grid):
-```
-┌──────────────────────────────────────────────────────────────────┐
-│  Test Code:    [CBC_______]    *Required                     │
-│  Test Name:    [Complete Blood Count________]    *Required    │
-│  Test Type:    [TEST ▼]      (dropdown)                         │
-│  Description:  [Standard hematology test_______________]         │
-│                                                               │
-│  Site:        [Main Lab ▼]                                     │
-│                                                               │
-│  Screen Seq:  [1___]  Report Seq:  [1___]                     │
-│                                                               │
-│  [☑] Visible on Screen    [☑] Visible on Report               │
-│                                                               │
-│  [☑] Count in Statistics                                     │
-│                                                               │
-│  Start Date:  [2024-01-01_______]                             │
-└──────────────────────────────────────────────────────────────────┘
-```
-
-**Fields**:
-- TestSiteCode (required, 3-6 chars, uppercase, unique validation)
-- TestSiteName (required, 3-255 chars)
-- TestType (required, dropdown: TEST, PARAM, CALC, GROUP, TITLE)
-- Description (optional, textarea, max 500 chars)
-- SiteID (required, dropdown from sites API)
-- SeqScr (optional, number, default 0)
-- SeqRpt (optional, number, default 0)
-- VisibleScr (checkbox, default true)
-- VisibleRpt (checkbox, default true)
-- CountStat (checkbox, default true)
-- StartDate (optional, datetime, default current)
-
-**Dynamic Behavior**:
-- When TestType changes → Show/hide relevant tabs
-- When TestType = CALC/PARAM/TEST → Auto-populate defaults
-- TestType change triggers confirmation if form has unsaved changes
-
-#### 2. Tech Details Tab
-
-**Form Layout** (Three sections):
-
-**Section 1: Categorization**
-```
-┌──────────────────────────────────────────────────────────────┐
-│  Discipline:   [Hematology ▼]                             │
-│  Department:  [CBC Dept ▼]                                │
-└──────────────────────────────────────────────────────────────┘
-```
-
-**Section 2: Result Configuration**
-```
-┌──────────────────────────────────────────────────────────────┐
-│  Result Type:  [Numeric ▼]   (dynamic based on TestType)  │
-│  Ref Type:     [Range ▼]     (dynamic based on ResultType) │
-│  Value Set:    [____________] (if ResultType = VSET)       │
-└──────────────────────────────────────────────────────────────┘
-```
-
-**Section 3: Units & Conversion**
-```
-┌──────────────────────────────────────────────────────────────┐
-│  Unit 1:       [g/dL ▼]                                 │
-│  Factor:       [1.0__]   (conversion factor)               │
-│  Unit 2:       [g/L ▼]                                   │
-│  Decimal:      [2__]     (decimal places)                 │
-└──────────────────────────────────────────────────────────────┘
-```
-
-**Section 4: Sample Requirements**
-```
-┌──────────────────────────────────────────────────────────────┐
-│  Required Qty: [5.0__]                                  │
-│  Qty Unit:     [mL ▼]                                    │
-│  Collection Req: [Fasting required_______________]        │
-└──────────────────────────────────────────────────────────────┘
-```
-
-**Section 5: Method & TAT**
-```
-┌──────────────────────────────────────────────────────────────┐
-│  Method:       [Automated Analyzer_______________]          │
-│  Expected TAT: [60__]   (minutes)                        │
-└──────────────────────────────────────────────────────────────┘
-```
-
-**Fields**:
-- DisciplineID (dropdown, optional)
-- DepartmentID (dropdown, optional)
-- ResultType (dropdown, dynamic options based on TestType)
-- RefType (dropdown, dynamic options based on ResultType)
-- VSet (text input, shown only if ResultType = VSET)
-- Unit1 (dropdown from units valueset)
-- Factor (number, optional)
-- Unit2 (dropdown from units valueset)
-- Decimal (number, default 2, min 0, max 6)
-- ReqQty (number, optional)
-- ReqQtyUnit (dropdown)
-- CollReq (textarea, optional)
-- Method (text input, optional)
-- ExpectedTAT (number, optional)
-
-**Dynamic Dropdown Logic**:
-```typescript
-// TestType → ResultType mapping
-const getResultTypeOptions = (testType: string) => {
-  switch (testType) {
-    case 'CALC': return ['NMRIC'];
-    case 'GROUP':
-    case 'TITLE': return ['NORES'];
-    default: return ['NMRIC', 'RANGE', 'TEXT', 'VSET'];
-  }
-};
-
-// ResultType → RefType mapping
-const getRefTypeOptions = (resultType: string) => {
-  switch (resultType) {
-    case 'NMRIC':
-    case 'RANGE': return ['RANGE', 'THOLD'];
-    case 'VSET': return ['VSET'];
-    case 'TEXT': return ['TEXT'];
-    case 'NORES': return ['NOREF'];
-    default: return [];
-  }
-};
-```
-
-#### 3. Calculations Tab (CALC only)
-
-**Form Layout**:
-```
-┌──────────────────────────────────────────────────────────────┐
-│  Formula Input:  [HGB + MCV + MCHC________]               │
-│                                                              │
-│  Formula Code:   [{HGB} + {MCV} + {MCHC}_____________]     │
-│                                                              │
-│  Discipline:    [Hematology ▼]                               │
-│  Department:    [CBC Dept ▼]                                  │
-│                                                              │
-│  Method:        [Calculated from components_______]            │
-│                                                              │
-│  Unit 1:        [g/dL ▼]                                    │
-│  Factor:        [1.0__]                                      │
-│  Unit 2:        [g/L ▼]                                     │
-│  Decimal:       [2__]                                        │
-│                                                              │
-│  Ref Type:      [Range ▼]                                    │
-└──────────────────────────────────────────────────────────────┘
-```
-
-**Fields**:
-- FormulaInput (text input, description of calculation)
-- FormulaCode (text input, actual formula with placeholders like {A}, {B})
-- DisciplineID (dropdown)
-- DepartmentID (dropdown)
-- Method (text input)
-- Unit1, Factor, Unit2, Decimal (same as Tech Details)
-- RefType (dropdown: RANGE, THOLD)
-
-**Validation**:
-- FormulaCode must contain valid syntax
-- FormulaCode must reference valid test codes
-- Test codes in formula must exist in system
-
-#### 4. Group Members Tab (GROUP only)
-
-**Form Layout**:
-```
-┌──────────────────────────────────────────────────────────────┐
-│  Group: CBC - Complete Blood Count                          │
-│                                                              │
-│  Current Members:                                            │
-│  ┌────────────────────────────────────────────────────────┐   │
-│  │ Code │ Name            │ Type   │ Seq │ Actions       │   │
-│  ├──────┼─────────────────┼────────┼─────┼───────────────┤   │
-│  │ HGB  │ Hemoglobin      │ PARAM  │ 1   │ [↑] [↓] [✕] │   │
-│  │ RBC  │ Red Blood Cells │ TEST   │ 2   │ [↑] [↓] [✕] │   │
-│  │ WBC  │ White Blood Cell│ TEST   │ 3   │ [↑] [↓] [✕] │   │
-│  └────────────────────────────────────────────────────────┘   │
-│                                                              │
-│  Add Member: [HGB ▼]  [Add Member +]                        │
-│                                                              │
-│  Available Tests: (searchable dropdown)                         │
-│  - HGB - Hemoglobin                                           │
-│  - RBC - Red Blood Cells                                     │
-│  - WBC - White Blood Cells                                    │
-└──────────────────────────────────────────────────────────────┘
-```
-
-**Features**:
-- List current members with Code, Name, Type
-- Reorder members (drag-and-drop or ↑↓ buttons)
-- Remove member button (with confirmation)
-- Add member dropdown (searchable, excludes current group and members)
-- Prevent circular references (group cannot contain itself)
-- Prevent duplicate members
-
-**Member Selection**:
-- Dropdown with search
-- Group by TestType (TEST, PARAM, CALC)
-- Show TestSiteCode - TestSiteName format
-- Filter out already added members
-- Filter out current group itself
-
-#### 5. Mappings Tab (All test types)
-
-**Form Layout**:
-```
-┌──────────────────────────────────────────────────────────────┐
-│  Test: CBC - Complete Blood Count                          │
-│                                                              │
-│  Current Mappings:                                          │
-│  ┌────────────────────────────────────────────────────────┐   │
-│  │ Host │ Host Code │ Client │ Client Code │ Actions   │   │
-│  ├──────┼───────────┼────────┼────────────┼───────────┤   │
-│  │ HIS   │ CBC       │ WST-1  │ CBC01      │ [✏️] [✕] │   │
-│  │ SITE  │ CBC       │ INST-1  │ CBC        │ [✏️] [✕] │   │
-│  └────────────────────────────────────────────────────────┘   │
-│                                                              │
-│  [Add Mapping +]                                             │
-└──────────────────────────────────────────────────────────────┘
-```
-
-**Add/Edit Mapping Modal**:
-```
-┌──────────────────────────────────────────────────────────────┐
-│  Add/Edit Mapping                                          │
-│                                                              │
-│  Host System:                                               │
-│  ┌────────────────────────────────────────────────────────┐   │
-│  │ Type:     [HIS ▼]                                    │   │
-│  │ ID:       [1____]                                     │   │
-│  │ Data Src: [DB____]                                    │   │
-│  │ Test Code:[CBC____]                                    │   │
-│  │ Test Name:[Complete Blood Count___________]              │   │
-│  └────────────────────────────────────────────────────────┘   │
-│                                                              │
-│  Client System:                                             │
-│  ┌────────────────────────────────────────────────────────┐   │
-│  │ Type:       [WST ▼]                                │   │
-│  │ ID:         [1____]                                  │   │
-│  │ Data Src:   [API____]                                │   │
-│  │ Container: [Tube1 ▼]                                │   │
-│  │ Test Code:  [CBC01____]                               │   │
-│  │ Test Name:  [CBC_____________]                         │   │
-│  └────────────────────────────────────────────────────────┘   │
-│                                                              │
-│                    [Save] [Cancel]                           │
-└──────────────────────────────────────────────────────────────┘
-```
-
-**Fields**:
-- HostType: dropdown (HIS, SITE, WST, INST)
-- HostID: text/number input
-- HostDataSource: text input
-- HostTestCode: text input
-- HostTestName: text input
-- ClientType: dropdown (HIS, SITE, WST, INST)
-- ClientID: text/number input
-- ClientDataSource: text input
-- ConDefID: dropdown (container definitions)
-- ClientTestCode: text input
-- ClientTestName: text input
-
-**Validation**:
-- At least one of Host or Client must be specified
-- Test codes must be unique per Host/Client combination
-
-#### 6. Ref Num Tab (Numeric Reference Ranges)
-
-**Form Layout**:
-```
-┌──────────────────────────────────────────────────────────────┐
-│  Test: CBC - Complete Blood Count                          │
-│  Numeric Reference Ranges                                    │
-│                                                              │
-│  ┌────────────────────────────────────────────────────────┐   │
-│  │Type   │Range │Sex │ Age   │ Low      │High     │Flag │   │
-│  │       │      │    │       │Bound     │Bound    │     │   │
-│  ├───────┼──────┼────┼───────┼──────────┼─────────┼─────┤   │
-│  │Ref    │RANGE │All │0-150  │[≥ 4.0]  │[< 5.5]  │ N   │   │
-│  │       │      │    │       │          │         │     │   │
-│  │Crtc   │THOLD │All │0-150  │[< 3.5]  │[> 6.0]  │ H/L │   │
-│  │       │      │    │       │          │         │     │   │
-│  │Ref    │RANGE │F   │18-150 │[≥ 4.5]  │[< 5.0]  │ N   │   │
-│  │       │      │    │       │          │         │     │   │
-│  │Crtc   │THOLD │M   │18-150 │[< 3.8]  │[> 5.8]  │ H/L │   │
-│  │       │      │    │       │          │         │     │   │
-│  └────────────────────────────────────────────────────────┘   │
-│                                                              │
-│  [Add Range] [Delete Selected] [Copy from Similar Test]        │
-│                                                              │
-│  Selected Ranges: 0                                          │
-└──────────────────────────────────────────────────────────────┘
-```
-
-**Add/Edit Reference Range Modal**:
-```
-┌──────────────────────────────────────────────────────────────┐
-│  Numeric Reference Range                                    │
-│                                                              │
-│  Reference Type:  [Reference ▼]                            │
-│                    (Reference, Critical, Validation, Rerun)   │
-│                                                              │
-│  Range Type:     [Range ▼]                                 │
-│                    (Range, Threshold)                        │
-│                                                              │
-│  Sex:            [All ▼]                                   │
-│                    (All, Female, Male)                       │
-│                                                              │
-│  Age Start:      [0__]  Age End: [150__]                    │
-│                                                              │
-│  Low Bound:                                                  │
-│  ┌────────────────────────────────────────────────────────┐   │
-│  │ Sign:  [≥ ▼]    Value: [4.0__]                    │   │
-│  └────────────────────────────────────────────────────────┘   │
-│                                                              │
-│  High Bound:                                                 │
-│  ┌────────────────────────────────────────────────────────┐   │
-│  │ Sign:  [< ▼]    Value: [5.5__]                    │   │
-│  └────────────────────────────────────────────────────────┘   │
-│                                                              │
-│  Flag:          [H/L/A/N___]   (High/Low/Abnormal/Normal)   │
-│                                                              │
-│  Interpretation:[Normal range for hemoglobin_______________]   │
-│                                                              │
-│                    [Save] [Cancel]                           │
-└──────────────────────────────────────────────────────────────┘
-```
-
-**Fields**:
-- NumRefType: dropdown (REF, CRTC, VAL, RERUN)
-- RangeType: dropdown (RANGE, THOLD)
-- Sex: dropdown (0=All, 1=Female, 2=Male)
-- AgeStart: number input (min 0, max 150)
-- AgeEnd: number input (min 0, max 150)
-- LowSign: dropdown (=, <, <=)
-- Low: number input (optional)
-- HighSign: dropdown (=, >, >=)
-- High: number input (optional)
-- Flag: text input (single char: H, L, A, N)
-- Interpretation: textarea (optional)
-
-**Validation**:
-- AgeStart must be less than AgeEnd
-- If both Low and High are present: Low must be less than High
-- LowSign must be appropriate for Low value (e.g., if Low = 4.0, LowSign should be >=)
-- HighSign must be appropriate for High value (e.g., if High = 5.5, HighSign should be <=)
-
-**Reference Range Logic**:
-- Reference (REF): Normal ranges for reporting
-- Critical (CRTC): Critical values requiring immediate notification
-- Validation (VAL): Validation checks for result entry
-- Rerun (RERUN): Conditions triggering automatic rerun
-
-**Range Type**:
-- RANGE: Standard range (Low to High)
-- THOLD: Threshold (single value with comparison)
-
-#### 7. Ref Txt Tab (Text Reference Ranges)
-
-**Form Layout**:
-```
-┌──────────────────────────────────────────────────────────────┐
-│  Test: URINE - Urinalysis                                  │
-│  Text Reference Ranges                                      │
-│                                                              │
-│  ┌────────────────────────────────────────────────────────┐   │
-│  │Type   │Sex │ Age   │ Reference Text   │ Flag        │   │
-│  ├───────┼────┼───────┼─────────────────┼─────────────┤   │
-│  │Normal │All │0-150  │Clear            │ N           │   │
-│  │       │    │       │                 │             │   │
-│  │Abnml  │All │0-150  │Cloudy           │ A           │   │
-│  │       │    │       │                 │             │   │
-│  │Crtc   │All │0-150  │Bloody           │ C           │   │
-│  │       │    │       │                 │             │   │
-│  └────────────────────────────────────────────────────────┘   │
-│                                                              │
-│  [Add Range] [Delete Selected] [Copy from Similar Test]        │
-└──────────────────────────────────────────────────────────────┘
-```
-
-**Add/Edit Text Reference Modal**:
-```
-┌──────────────────────────────────────────────────────────────┐
-│  Text Reference Range                                      │
-│                                                              │
-│  Reference Type:  [Normal ▼]                              │
-│                    (Normal, Abnormal, Critical)              │
-│                                                              │
-│  Sex:            [All ▼]                                   │
-│                    (All, Female, Male)                       │
-│                                                              │
-│  Age Start:      [0__]  Age End: [150__]                    │
-│                                                              │
-│  Reference Text: [Clear_______________]                        │
-│                                                              │
-│  Flag:           [N/A/C___]    (Normal/Abnormal/Critical)    │
-│                                                              │
-│                    [Save] [Cancel]                           │
-└──────────────────────────────────────────────────────────────┘
-```
-
-**Fields**:
-- TxtRefType: dropdown (Normal, Abnormal, Critical)
-- Sex: dropdown (0=All, 1=Female, 2=Male)
-- AgeStart: number input
-- AgeEnd: number input
-- RefTxt: text input
-- Flag: text input (N, A, C)
-
-**Validation**:
-- AgeStart must be less than AgeEnd
-- RefTxt is required
-- Flag must match TxtRefType (Normal=N, Abnormal=A, Critical=C)
-
----
-
-## 🏗️ Component Implementation
-
-### Core Component Requirements
-
-#### 1. State Management with Svelte 5 Runes
-
-**testStore.ts**:
-```typescript
-import { writable } from 'svelte/store';
-
-interface TestFormState {
-  TestSiteID?: number;
-  TestSiteCode: string;
-  TestSiteName: string;
-  TestType: 'TEST' | 'PARAM' | 'CALC' | 'GROUP' | 'TITLE';
-  Description?: string;
-  SiteID: number;
-  SeqScr: number;
-  SeqRpt: number;
-  VisibleScr: number;
-  VisibleRpt: number;
-  CountStat: number;
-  StartDate?: string;
-  details?: {
-    DisciplineID?: number;
-    DepartmentID?: number;
-    ResultType?: string;
-    RefType?: string;
-    VSet?: string;
-    Unit1?: string;
-    Factor?: number;
-    Unit2?: string;
-    Decimal?: number;
-    ReqQty?: number;
-    ReqQtyUnit?: string;
-    CollReq?: string;
-    Method?: string;
-    ExpectedTAT?: number;
-    FormulaInput?: string;
-    FormulaCode?: string;
-    members?: number[];
-  };
-  refnum?: RefNumRange[];
-  reftxt?: RefTxtRange[];
-  testmap?: TestMapping[];
-}
-
-export const testStore = writable<TestFormState>({
-  TestSiteCode: '',
-  TestSiteName: '',
-  TestType: 'TEST',
-  SiteID: 1,
-  SeqScr: 0,
-  SeqRpt: 0,
-  VisibleScr: 1,
-  VisibleRpt: 1,
-  CountStat: 1,
-  refnum: [],
-  reftxt: [],
-  testmap: [],
-});
-```
-
-**Derived Stores**:
-```typescript
-// Derive visible tabs based on TestType
-export const visibleTabs = derived(testStore, ($store) => {
-  const type = $store.TestType;
-  return allTabs.filter(tab => tab.isVisible(type));
-});
-
-// Derive valid ResultType options
-export const validResultTypes = derived(testStore, ($store) => {
-  const type = $store.TestType;
-  // Return options based on type
-});
-
-// Derive valid RefType options
-export const validRefTypes = derived([testStore, validResultTypes], ([$store, $resultTypes]) => {
-  const resultType = $store.details?.ResultType;
-  // Return options based on resultType
-});
-```
-
-#### 2. Reusable UI Components
-
-**Button.svelte**:
-```svelte
-<script lang="ts">
-  export let variant: 'primary' | 'secondary' | 'danger' | 'ghost' = 'primary';
-  export let size: 'sm' | 'md' | 'lg' = 'md';
-  export let disabled = false;
-  export let loading = false;
-  export let type: 'button' | 'submit' | 'reset' = 'button';
-</script>
-
-<button
-  {type}
-  {disabled}
-  class="btn btn-{variant} btn-{size}"
-  disabled={disabled || loading}
->
-  {#if loading}
-    <Spinner />
-  {:else}
-    <slot />
-  {/if}
-</button>
-```
-
-**Input.svelte**:
-```svelte
-<script lang="ts">
-  export let label = '';
-  export let value = '';
-  export let type = 'text';
-  export let required = false;
-  export let error = '';
-  export let placeholder = '';
-  export let disabled = false;
-</script>
-
-<div class="input-group">
-  {#if label}
-    <label class="input-label">
-      {label}
-      {#if required}<span class="required">*</span>{/if}
-    </label>
-  {/if}
-  <input
-    {type}
-    {value}
-    {placeholder}
-    {disabled}
-    {required}
-    class="input-field"
-    class:has-error={error}
-  />
-  {#if error}
-    <span class="input-error">{error}</span>
-  {/if}
-</div>
-```
-
-**Select.svelte**:
-```svelte
-<script lang="ts">
-  export let label = '';
-  export let value = '';
-  export let options: Array<{value: string, label: string}> = [];
-  export let required = false;
-  export let disabled = false;
-  export let placeholder = 'Select...';
-</script>
-
-<div class="select-group">
-  {#if label}
-    <label class="select-label">
-      {label}
-      {#if required}<span class="required">*</span>{/if}
-    </label>
-  {/if}
-  <select
-    bind:value
-    {disabled}
-    {required}
-    class="select-field"
-  >
-    <option value="">{placeholder}</option>
-    {#each options as option}
-      <option {value}>{option.label}</option>
-    {/each}
-  </select>
-</div>
-```
-
-#### 3. Test Form Component
-
-**TestForm.svelte** (Main container):
-```svelte
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { testStore, visibleTabs } from '$lib/stores/testStore';
-  import SidebarTabs from '$lib/components/test/SidebarTabs.svelte';
-  import BasicInfoTab from '$lib/components/test/tabs/BasicInfoTab.svelte';
-  // ... other tabs
-
-  let currentTab = 'basic';
-  let isLoading = false;
-  let isDirty = false;
-
-  onMount(async () => {
-    // Load existing test if editing
-    const id = params.id;
-    if (id) {
-      isLoading = true;
-      try {
-        const data = await testService.getById(id);
-        testStore.set(data);
-      } catch (error) {
-        // Handle error
-      } finally {
-        isLoading = false;
-      }
-    }
-  });
-
-  const handleTabChange = (tabId: string) => {
-    if (isDirty) {
-      // Confirm before changing tab if unsaved changes
-      if (!confirm('You have unsaved changes. Continue?')) {
-        return;
-      }
-    }
-    currentTab = tabId;
-  };
-
-  const handleSave = async () => {
-    // Validate form
-    // Call API
-    // Handle response
-  };
-</script>
-
-<div class="test-form-layout">
-  <SidebarTabs
-    tabs={$visibleTabs}
-    currentTab={currentTab}
-    onTabChange={handleTabChange}
-  />
-
-  <main class="test-form-content">
-    {#if isLoading}
-      <Spinner />
-    {:else}
-      <h2 class="form-title">
-        {$testStore.TestSiteID ? 'Edit Test' : 'New Test'}
-      </h2>
-
-      {#if currentTab === 'basic'}
-        <BasicInfoTab bind:dirty={isDirty} />
-      {:else if currentTab === 'tech'}
-        <TechDetailsTab bind:dirty={isDirty} />
-      {:else if currentTab === 'calc'}
-        <CalcDetailsTab bind:dirty={isDirty} />
-      {:else if currentTab === 'group'}
-        <GroupMembersTab bind:dirty={isDirty} />
-      {:else if currentTab === 'mappings'}
-        <MappingsTab bind:dirty={isDirty} />
-      {:else if currentTab === 'refnum'}
-        <RefNumTab bind:dirty={isDirty} />
-      {:else if currentTab === 'reftxt'}
-        <RefTxtTab bind:dirty={isDirty} />
-      {/if}
-
-      <div class="form-actions">
-        <Button variant="primary" on:click={handleSave}>
-          Save
-        </Button>
-        <Button variant="secondary" on:click={() => navigate('/tests')}>
-          Cancel
-        </Button>
-        {#if $testStore.TestSiteID}
-          <Button variant="danger" on:click={handleDelete}>
-            Delete
-          </Button>
-        {/if}
-      </div>
-    {/if}
-  </main>
-</div>
-```
-
----
-
-## ✅ Validation Requirements
-
-### Frontend Validation
-
-#### TestSiteCode
-- Required
-- 3-6 characters
-- Uppercase only
-- Alphanumeric only
-- Unique (check via API)
-- Regex: `^[A-Z0-9]{3,6}$`
-
-#### TestSiteName
-- Required
-- 3-255 characters
-- No special characters (except hyphen, space, parenthesis)
-- Regex: `^[a-zA-Z0-9\s\-\(\)]{3,255}$`
-
-#### TestType
-- Required
-- Must be one of: TEST, PARAM, CALC, GROUP, TITLE
-
-#### Type Combination Validation
-```typescript
-const validateTypeCombination = (testType: string, resultType: string, refType: string) => {
-  const valid = TestValidationService.validate(testType, resultType, refType);
-  if (!valid.valid) {
-    throw new Error(valid.error);
-  }
-};
-```
-
-#### Reference Range Validation
-
-**Numeric Ranges**:
-- AgeStart < AgeEnd (both 0-150)
-- If Low and High both present: Low < High
-- LowSign appropriate for Low value
-- HighSign appropriate for High value
-- Flag is single character (H, L, A, N)
-
-**Text Ranges**:
-- AgeStart < AgeEnd
-- RefTxt is required
-- Flag matches TxtRefType
-
-#### Group Validation
-- Group cannot contain itself
-- No circular references (Group A contains Group B, Group B contains Group A)
-- No duplicate members
-- Minimum 1 member for GROUP type
-
----
-
-## 🎨 Styling & Design System
-
-### Color Palette
-```css
-:root {
-  /* Primary */
-  --primary-50: #e0f2fe;
-  --primary-100: #bae6fd;
-  --primary-500: #0ea5e9;
-  --primary-600: #0284c7;
-  --primary-700: #0369a1;
-
-  /* Secondary */
-  --secondary-500: #64748b;
-  --secondary-600: #475569;
-
-  /* Success */
-  --success-500: #22c55e;
-  --success-600: #16a34a;
-
-  /* Danger */
-  --danger-500: #ef4444;
-  --danger-600: #dc2626;
-
-  /* Warning */
-  --warning-500: #f59e0b;
-  --warning-600: #d97706;
-
-  /* Neutral */
-  --gray-50: #f9fafb;
-  --gray-100: #f3f4f6;
-  --gray-200: #e5e7eb;
-  --gray-300: #d1d5db;
-  --gray-500: #6b7280;
-  --gray-700: #374151;
-  --gray-900: #111827;
-}
-```
-
-### Typography
-```css
-/* Font sizes */
---text-xs: 0.75rem;   /* 12px */
---text-sm: 0.875rem;  /* 14px */
---text-base: 1rem;     /* 16px */
---text-lg: 1.125rem;   /* 18px */
---text-xl: 1.25rem;    /* 20px */
---text-2xl: 1.5rem;   /* 24px */
---text-3xl: 1.875rem; /* 30px */
-```
-
-### Spacing
-```css
---space-1: 0.25rem;  /* 4px */
---space-2: 0.5rem;   /* 8px */
---space-3: 0.75rem;  /* 12px */
---space-4: 1rem;     /* 16px */
---space-6: 1.5rem;   /* 24px */
---space-8: 2rem;     /* 32px */
-```
-
-### Components
-
-**Buttons**:
-```css
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-2) var(--space-4);
-  border-radius: 0.375rem;
-  font-weight: 500;
-  transition: all 0.2s;
-  cursor: pointer;
-}
-
-.btn-primary {
-  background-color: var(--primary-600);
-  color: white;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background-color: var(--primary-700);
-}
-
-.btn-secondary {
-  background-color: var(--gray-200);
-  color: var(--gray-700);
-}
-
-.btn-danger {
-  background-color: var(--danger-600);
-  color: white;
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-```
-
-**Inputs**:
-```css
-.input-field {
-  width: 100%;
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--gray-300);
-  border-radius: 0.375rem;
-  font-size: var(--text-base);
-  transition: border-color 0.2s;
-}
-
-.input-field:focus {
-  outline: none;
-  border-color: var(--primary-500);
-  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-}
-
-.input-field.has-error {
-  border-color: var(--danger-500);
-}
-```
-
-**Sidebar Tabs**:
-```css
-.sidebar-tab {
-  padding: var(--space-3) var(--space-4);
-  border-left: 3px solid transparent;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.sidebar-tab:hover {
-  background-color: var(--gray-100);
-}
-
-.sidebar-tab.active {
-  background-color: var(--primary-50);
-  border-left-color: var(--primary-600);
-  font-weight: 600;
-}
-```
-
----
-
-## 📱 Responsive Design
-
-### Breakpoints
-```css
---breakpoint-sm: 640px;
---breakpoint-md: 768px;
---breakpoint-lg: 1024px;
---breakpoint-xl: 1280px;
-```
-
-### Responsive Behavior
-
-**Desktop (> 1024px)**:
-- Sidebar: Fixed width, visible
-- Content: Full width
-- Form: 2-column grid layout
-
-**Tablet (768px - 1024px)**:
-- Sidebar: Collapsible (hamburger menu)
-- Content: Full width
-- Form: Single column layout
-- Table: Horizontal scroll
-
-**Mobile (< 768px)**:
-- Sidebar: Off-canvas drawer
-- Content: Full width
-- Form: Single column, stacked
-- Table: Card view instead of table
-
----
-
-## 🚀 Implementation Checklist
-
-### Phase 1: Project Setup & Infrastructure
-- [ ] Initialize SvelteKit project with TypeScript
-- [ ] Install and configure Tailwind CSS
-- [ ] Set up Skeleton UI or Melt UI
-- [ ] Configure Axios with interceptors
-- [ ] Create type definitions (test.types.ts, api.types.ts)
-- [ ] Set up API service layer
-- [ ] Create auth store and testStore
-- [ ] Set up routing structure
-
-### Phase 2: Reusable Components
-- [ ] Button component
-- [ ] Input component
-- [ ] Select component
-- [ ] Checkbox component
-- [ ] Table component
-- [ ] Modal component
-- [ ] Badge component
-- [ ] Alert component
-- [ ] Spinner component
-- [ ] Tabs component
-
-### Phase 3: Test List Page
-- [ ] Test list page layout
-- [ ] Filter panel component
-- [ ] Test table component
-- [ ] Pagination component
-- [ ] Search functionality
-- [ ] Filter functionality
-- [ ] Sort functionality
-- [ ] Load test data from API
-
-### Phase 4: Test Form - Basic & Tech
-- [ ] Test form container with sidebar tabs
-- [ ] Basic Info tab
-- [ ] Tech Details tab
-- [ ] Dynamic dropdown logic
-- [ ] Form validation
-- [ ] Save functionality
-- [ ] Update functionality
-
-### Phase 5: Type-Specific Tabs
-- [ ] Calculations tab (CALC)
-- [ ] Group Members tab (GROUP)
-- [ ] Mappings tab (all types)
-- [ ] Member selection dropdown
-- [ ] Mapping add/edit modal
-
-### Phase 6: Reference Ranges
-- [ ] RefNum tab with table
-- [ ] RefTxt tab with table
-- [ ] Reference range modal
-- [ ] Reference range validation
-- [ ] Add/Edit/Delete operations
-
-### Phase 7: Polish & Testing
-- [ ] Responsive design
-- [ ] Loading states
-- [ ] Error handling
-- [ ] Form dirty state tracking
-- [ ] Confirmation dialogs
-- [ ] Toast notifications
-- [ ] Accessibility (ARIA labels)
-- [ ] Keyboard navigation
-- [ ] Cross-browser testing
-
-### Phase 8: Documentation
-- [ ] Component documentation
-- [ ] API integration guide
-- [ ] User guide
-- [ ] Deployment instructions
-
----
-
-## 📚 Additional Notes
-
-### ValueSet Integration
-- Use backend API `/api/valueset` to fetch dropdown options
-- Cache valuesets locally to reduce API calls
-- Transform labels: API returns both code and label (e.g., `TestType` and `TestTypeLabel`)
-- Display labels in UI, use codes for API calls
-
-### Authentication
-- JWT token stored in localStorage
-- Include token in Authorization header for all API calls
-- Handle token expiration and refresh
-- Redirect to login if unauthorized
-
-### Error Handling
-- Display user-friendly error messages
-- Log technical errors to console
-- Retry logic for failed requests (with backoff)
-- Show appropriate feedback for network errors
-
-### Performance
-- Implement debounced search (300ms)
-- Lazy load test data (pagination)
-- Optimize re-renders with Svelte 5 runes
-- Memoize expensive computations
-
-### Accessibility
-- ARIA labels for form inputs
-- Keyboard navigation support
-- Screen reader compatibility
-- Focus management in modals
-- Color contrast compliance (WCAG AA)
-
----
-
-## 🔗 References
-
-### Backend Documentation
-- API Endpoints: `/api/tests`
-- Models: `TestDefSiteModel`, `TestDefCalModel`, `TestDefGrpModel`, `TestMapModel`
-- Validation: `TestValidationService`
-
-### Type System
-- Test types: TEST, PARAM, CALC, GROUP, TITLE
-- Result types: NMRIC, RANGE, TEXT, VSET, NORES
-- Reference types: RANGE, THOLD, TEXT, VSET, NOREF
-
-### Business Rules
-- Soft deletes only (set EndDate)
-- Test type + ResultType + RefType must be valid combination
-- Reference ranges are type-specific (numeric vs text)
-- Calculations use formula placeholders like {A}, {B}
-
----
-
-## 🎯 Success Criteria
-
-The frontend is considered complete when:
-
-1. **Functional Requirements**
-   - All CRUD operations work for all test types
-   - Reference ranges can be managed (add/edit/delete)
-   - Group members can be added/removed/reordered
-   - Mappings can be configured for external systems
-   - Form validation prevents invalid data submission
-
-2. **User Experience**
-   - Intuitive navigation with sidebar tabs
-   - Clear visual feedback for actions
-   - Responsive design works on all devices
-   - Loading states indicate progress
-   - Error messages are helpful and actionable
-
-3. **Code Quality**
-   - TypeScript strict mode with no errors
-   - Component reusability and modularity
-   - Proper error handling throughout
-   - Clean, readable code with comments
-   - Efficient state management with Svelte 5 runes
-
-4. **Performance**
-   - Page load time < 2 seconds
-   - Search results appear within 300ms
-   - Form submissions complete within 1 second
-   - No memory leaks or performance degradation
-
-5. **Testing**
-   - Unit tests for components
-   - Integration tests for API calls
-   - E2E tests for critical user flows
-   - Cross-browser compatibility verified
-
----
-
-## 📞 Support
-
-For questions or issues during development:
-1. Review backend API documentation in `README.md`
-2. Check model definitions in `app/Models/Test/`
-3. Refer to validation service in `app/Libraries/TestValidationService.php`
-4. Test API endpoints directly using tools like Postman
-
----
-
-**Last Updated**: February 2025
-**Version**: 1.0
diff --git a/src/lib/api/tests.js b/src/lib/api/tests.js
index e9c8ac1..7b3e7e6 100644
--- a/src/lib/api/tests.js
+++ b/src/lib/api/tests.js
@@ -108,7 +108,7 @@ function buildPayload(formData, isUpdate = false) {
         RangeType: r.RangeType,
         Sex: r.Sex,
         AgeStart: parseInt(r.AgeStart) || 0,
-        AgeEnd: parseInt(r.AgeEnd) || 150,
+        AgeEnd: parseInt(r.AgeEnd) || 54750, // 150 years in days
         LowSign: r.LowSign || null,
         Low: r.Low !== null && r.Low !== undefined ? parseFloat(r.Low) : null,
         HighSign: r.HighSign || null,
@@ -123,7 +123,7 @@ function buildPayload(formData, isUpdate = false) {
         TxtRefType: r.TxtRefType,
         Sex: r.Sex,
         AgeStart: parseInt(r.AgeStart) || 0,
-        AgeEnd: parseInt(r.AgeEnd) || 150,
+        AgeEnd: parseInt(r.AgeEnd) || 54750, // 150 years in days
         RefTxt: r.RefTxt || '',
         Flag: r.Flag || null
       }));
diff --git a/src/routes/(app)/master-data/tests/+page.svelte b/src/routes/(app)/master-data/tests/+page.svelte
index a420623..788ec02 100644
--- a/src/routes/(app)/master-data/tests/+page.svelte
+++ b/src/routes/(app)/master-data/tests/+page.svelte
@@ -6,6 +6,7 @@
   import DataTable from '$lib/components/DataTable.svelte';
   import Modal from '$lib/components/Modal.svelte';
   import TestFormModal from './test-modal/TestFormModal.svelte';
+  import TestTypePickerModal from './test-modal/modals/TestTypePickerModal.svelte';
   import { Plus, Edit2, Trash2, ArrowLeft, Search, Microscope, Variable, Calculator, Box, Layers, Loader2, Users } from 'lucide-svelte';
 
   let loading = $state(false);
@@ -16,9 +17,11 @@
   let modalOpen = $state(false);
   let modalMode = $state('create');
   let selectedTestId = $state(null);
+  let selectedTestType = $state('TEST');
   let deleteConfirmOpen = $state(false);
   let deleteItem = $state(null);
   let deleting = $state(false);
+  let testTypePickerOpen = $state(false);
 
   const testTypeConfig = {
     TEST: { label: 'Test', badgeClass: 'badge-primary', icon: Microscope, color: '#0066CC', bgColor: '#E6F2FF' },
@@ -86,6 +89,11 @@
   }
 
   function openCreateModal() {
+    testTypePickerOpen = true;
+  }
+
+  function handleTestTypeSelect(type) {
+    selectedTestType = type;
     modalMode = 'create';
     selectedTestId = null;
     modalOpen = true;
@@ -222,10 +230,16 @@
   </div>
 </div>
 
+<TestTypePickerModal
+  bind:open={testTypePickerOpen}
+  onselect={handleTestTypeSelect}
+/>
+
 <TestFormModal
   bind:open={modalOpen}
   mode={modalMode}
   testId={selectedTestId}
+  initialTestType={selectedTestType}
   {disciplines}
   {departments}
   {tests}
diff --git a/src/routes/(app)/master-data/tests/test-modal/TestFormModal.svelte b/src/routes/(app)/master-data/tests/test-modal/TestFormModal.svelte
index 0e06e4c..739d827 100644
--- a/src/routes/(app)/master-data/tests/test-modal/TestFormModal.svelte
+++ b/src/routes/(app)/master-data/tests/test-modal/TestFormModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount } from 'svelte';
-  import { Info, Settings, Calculator, Users, Link } from 'lucide-svelte';
+  import { Info, Settings, Calculator, Users, Link, Hash, Type } from 'lucide-svelte';
   import { fetchTest, createTest, updateTest, validateTestCode, validateTestName } from '$lib/api/tests.js';
   import { success as toastSuccess, error as toastError } from '$lib/utils/toast.js';
   import Modal from '$lib/components/Modal.svelte';
@@ -9,8 +9,10 @@
   import CalcDetailsTab from './tabs/CalcDetailsTab.svelte';
   import GroupMembersTab from './tabs/GroupMembersTab.svelte';
   import MappingsTab from './tabs/MappingsTab.svelte';
+  import RefNumTab from './tabs/RefNumTab.svelte';
+  import RefTxtTab from './tabs/RefTxtTab.svelte';
 
-  let { open = $bindable(false), mode = 'create', testId = null, disciplines = [], departments = [], tests = [], onsave = null } = $props();
+  let { open = $bindable(false), mode = 'create', testId = null, initialTestType = 'TEST', disciplines = [], departments = [], tests = [], onsave = null } = $props();
 
   let currentTab = $state('basic');
   let loading = $state(false);
@@ -30,16 +32,29 @@
     { id: 'tech', label: 'Tech Details', component: Settings },
     { id: 'calc', label: 'Calculations', component: Calculator },
     { id: 'group', label: 'Group Members', component: Users },
-    { id: 'mappings', label: 'Mappings', component: Link }
+    { id: 'mappings', label: 'Mappings', component: Link },
+    { id: 'refnum', label: 'Num Refs', component: Hash },
+    { id: 'reftxt', label: 'Txt Refs', component: Type }
   ];
 
   const visibleTabs = $derived.by(() => {
     const type = formData.TestType;
+    const resultType = formData.details?.ResultType;
+    const refType = formData.details?.RefType;
+    
     return tabConfig.filter(tab => {
       if (tab.id === 'basic' || tab.id === 'mappings') return true;
       if (tab.id === 'tech') return ['TEST', 'PARAM', 'CALC'].includes(type);
       if (tab.id === 'calc') return type === 'CALC';
       if (tab.id === 'group') return type === 'GROUP';
+      if (tab.id === 'refnum') {
+        // Show for TEST/PARAM with numeric result types and RANGE/THOLD ref types
+        return ['TEST', 'PARAM'].includes(type) && ['NMRIC', 'RANGE'].includes(resultType) && ['RANGE', 'THOLD'].includes(refType);
+      }
+      if (tab.id === 'reftxt') {
+        // Show for TEST/PARAM with TEXT result type
+        return ['TEST', 'PARAM'].includes(type) && resultType === 'TEXT' && refType === 'TEXT';
+      }
       return false;
     });
   });
@@ -84,7 +99,7 @@
       TestSiteID: null,
       TestSiteCode: '',
       TestSiteName: '',
-      TestType: 'TEST',
+      TestType: initialTestType,
       Description: '',
       SiteID: 1,
       SeqScr: 0,
@@ -220,7 +235,7 @@
     if (!codeResult.valid) errors.TestSiteCode = codeResult.error;
 
     const nameResult = validateTestName(formData.TestSiteName);
-    if (!nameResult.valid) errors.TestSiteName = nameResult.valid;
+    if (!nameResult.valid) errors.TestSiteName = nameResult.error;
 
     if (!formData.TestType) {
       errors.TestType = 'Test type is required';
@@ -288,7 +303,7 @@
       </div>
     {/if}
 
-    <div class="flex flex-col" style="height: 60vh; max-height: 500px;">
+    <div class="flex flex-col" style="height: 75vh; max-height: 650px;">
       <!-- Top Tabs -->
       <div class="border-b border-base-200 bg-base-50">
         <div class="flex overflow-x-auto">
@@ -320,6 +335,7 @@
             bind:formData
             bind:isDirty
             onTypeChange={handleTypeChange}
+            {mode}
           />
         {:else if currentTab === 'tech'}
           <TechDetailsTab
@@ -327,6 +343,7 @@
             {disciplines}
             {departments}
             bind:isDirty
+            onSwitchTab={handleTabChange}
           />
         {:else if currentTab === 'calc'}
           <CalcDetailsTab
@@ -346,6 +363,16 @@
             bind:formData
             bind:isDirty
           />
+        {:else if currentTab === 'refnum'}
+          <RefNumTab
+            bind:formData
+            bind:isDirty
+          />
+        {:else if currentTab === 'reftxt'}
+          <RefTxtTab
+            bind:formData
+            bind:isDirty
+          />
         {/if}
       </div>
     </div>
diff --git a/src/routes/(app)/master-data/tests/test-modal/modals/TestTypePickerModal.svelte b/src/routes/(app)/master-data/tests/test-modal/modals/TestTypePickerModal.svelte
new file mode 100644
index 0000000..8bf41f1
--- /dev/null
+++ b/src/routes/(app)/master-data/tests/test-modal/modals/TestTypePickerModal.svelte
@@ -0,0 +1,68 @@
+<script>
+  import { Microscope, Variable, Calculator, Box, Layers } from 'lucide-svelte';
+  import Modal from '$lib/components/Modal.svelte';
+
+  let { open = $bindable(false), onselect = null } = $props();
+
+  const testTypes = [
+    { value: 'TEST', label: 'Test', description: 'Single Test', icon: Microscope, color: '#0066CC', bgColor: '#E6F2FF' },
+    { value: 'PARAM', label: 'Parameter', description: 'Test Parameter', icon: Variable, color: '#3399FF', bgColor: '#F0F8FF' },
+    { value: 'CALC', label: 'Calculated', description: 'Formula-based Test', icon: Calculator, color: '#9933CC', bgColor: '#F5E6FF' },
+    { value: 'GROUP', label: 'Panel', description: 'Test Group/Panel', icon: Box, color: '#00AA44', bgColor: '#E6F9EE' },
+    { value: 'TITLE', label: 'Header', description: 'Section Header', icon: Layers, color: '#666666', bgColor: '#F5F5F5' }
+  ];
+
+  function handleSelect(type) {
+    if (onselect) {
+      onselect(type.value);
+    }
+    open = false;
+  }
+
+  function handleClose() {
+    open = false;
+  }
+</script>
+
+<Modal bind:open size="md" title="Select Test Type">
+  <div class="py-4">
+    <p class="text-sm text-gray-600 mb-6">
+      Choose the type of test you want to create. This determines the available options and configuration.
+    </p>
+
+    <div class="grid grid-cols-1 gap-3">
+      {#each testTypes as type}
+        {@const IconComponent = type.icon}
+        <button
+          class="flex items-center gap-4 p-4 rounded-lg border-2 transition-all duration-200 text-left hover:shadow-md"
+          style="background-color: {type.bgColor}; border-color: {type.color};"
+          onclick={() => handleSelect(type)}
+        >
+          <div
+            class="flex items-center justify-center w-12 h-12 rounded-lg"
+            style="background-color: {type.color};"
+          >
+            <IconComponent class="w-6 h-6 text-white" />
+          </div>
+          <div class="flex-1">
+            <div class="font-semibold text-base" style="color: {type.color};">
+              {type.label}
+            </div>
+            <div class="text-sm text-gray-600">
+              {type.description}
+            </div>
+          </div>
+          <div class="text-gray-400">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+            </svg>
+          </div>
+        </button>
+      {/each}
+    </div>
+  </div>
+
+  {#snippet footer()}
+    <button class="btn btn-ghost" onclick={handleClose} type="button">Cancel</button>
+  {/snippet}
+</Modal>
diff --git a/src/routes/(app)/master-data/tests/test-modal/tabs/BasicInfoTab.svelte b/src/routes/(app)/master-data/tests/test-modal/tabs/BasicInfoTab.svelte
index 8d7a719..f0c0b15 100644
--- a/src/routes/(app)/master-data/tests/test-modal/tabs/BasicInfoTab.svelte
+++ b/src/routes/(app)/master-data/tests/test-modal/tabs/BasicInfoTab.svelte
@@ -2,7 +2,9 @@
   import { validateTestCode, validateTestName } from '$lib/api/tests.js';
   import { AlertCircle } from 'lucide-svelte';
 
-  let { formData = $bindable(), isDirty = $bindable(false), onTypeChange = null } = $props();
+  let { formData = $bindable(), isDirty = $bindable(false), mode = 'create' } = $props();
+
+  const isEditMode = $derived(mode === 'edit');
 
   let validationErrors = $state({
     TestSiteCode: '',
@@ -11,11 +13,11 @@
   });
 
   const testTypes = [
-    { value: 'TEST', label: 'Test - Single Test' },
-    { value: 'PARAM', label: 'Parameter - Test Parameter' },
-    { value: 'CALC', label: 'Calculated - Formula-based' },
-    { value: 'GROUP', label: 'Panel - Test Group' },
-    { value: 'TITLE', label: 'Header - Section Header' }
+    { value: 'TEST', label: 'Test', description: 'Single Test' },
+    { value: 'PARAM', label: 'Parameter', description: 'Test Parameter' },
+    { value: 'CALC', label: 'Calculated', description: 'Formula-based' },
+    { value: 'GROUP', label: 'Panel', description: 'Test Group' },
+    { value: 'TITLE', label: 'Header', description: 'Section Header' }
   ];
 
   function validateField(field) {
@@ -77,18 +79,42 @@
     handleFieldChange();
     validateField('TestSiteName');
   }
-
-  function handleTestTypeChange(event) {
-    const newType = event.target.value;
-    if (onTypeChange) {
-      onTypeChange(newType);
-    }
-    handleFieldChange();
-    validateField('TestType');
-  }
 </script>
 
 <div class="space-y-5">
+  <!-- Test Type Header -->
+  <div class="bg-base-100 border border-base-200 rounded-lg p-4">
+    {#if isEditMode}
+      {@const selectedType = testTypes.find(t => t.value === formData.TestType)}
+      <div class="flex items-center gap-3">
+        <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+          <span class="text-lg font-bold text-primary">{selectedType?.label?.[0] || '?'}</span>
+        </div>
+        <div class="flex-1">
+          <div class="flex items-center gap-2">
+            <span class="font-semibold text-base">{selectedType?.label || 'Unknown'}</span>
+            <span class="text-xs text-gray-500">({selectedType?.description || 'Unknown'})</span>
+          </div>
+          <span class="text-xs text-gray-500">Test type cannot be changed after creation</span>
+        </div>
+      </div>
+    {:else}
+      {@const selectedType = testTypes.find(t => t.value === formData.TestType)}
+      <div class="flex items-center gap-3">
+        <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+          <span class="text-lg font-bold text-primary">{selectedType?.label?.[0] || '?'}</span>
+        </div>
+        <div class="flex-1">
+          <div class="flex items-center gap-2">
+            <span class="font-semibold text-base">{selectedType?.label || 'Unknown'}</span>
+            <span class="text-xs text-gray-500">({selectedType?.description || 'Unknown'})</span>
+          </div>
+          <span class="text-xs text-gray-500">{formData.TestType}</span>
+        </div>
+      </div>
+    {/if}
+  </div>
+
   <!-- Test Identity -->
   <div>
     <h3 class="text-sm font-semibold text-gray-700 mb-3">Test Identity</h3>
@@ -142,49 +168,19 @@
         {/if}
       </div>
     </div>
-  </div>
 
-  <!-- Classification -->
-  <div>
-    <h3 class="text-sm font-semibold text-gray-700 mb-3">Classification</h3>
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-      <!-- Test Type -->
-      <div class="space-y-1">
-        <label for="testType" class="block text-sm font-medium text-gray-700">
-          Test Type <span class="text-error">*</span>
-        </label>
-        <select
-          id="testType"
-          class="select select-sm select-bordered w-full"
-          class:select-error={validationErrors.TestType}
-          bind:value={formData.TestType}
-          onchange={handleTestTypeChange}
-        >
-          {#each testTypes as type (type.value)}
-            <option value={type.value}>{type.label}</option>
-          {/each}
-        </select>
-        {#if validationErrors.TestType}
-          <span class="text-xs text-error flex items-center gap-1">
-            <AlertCircle class="w-3 h-3" />
-            {validationErrors.TestType}
-          </span>
-        {/if}
-      </div>
-
-      <!-- Description -->
-      <div class="space-y-1">
-        <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
-        <input
-          id="description"
-          type="text"
-          class="input input-sm input-bordered w-full"
-          bind:value={formData.Description}
-          placeholder="Optional description..."
-          maxlength="500"
-          oninput={handleFieldChange}
-        />
-      </div>
+    <!-- Description - moved under Test Identity -->
+    <div class="mt-4 space-y-1">
+      <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
+      <input
+        id="description"
+        type="text"
+        class="input input-sm input-bordered w-full"
+        bind:value={formData.Description}
+        placeholder="Optional description..."
+        maxlength="500"
+        oninput={handleFieldChange}
+      />
     </div>
   </div>
 
diff --git a/src/routes/(app)/master-data/tests/test-modal/tabs/RefNumTab.svelte b/src/routes/(app)/master-data/tests/test-modal/tabs/RefNumTab.svelte
index 342ba53..751bd56 100644
--- a/src/routes/(app)/master-data/tests/test-modal/tabs/RefNumTab.svelte
+++ b/src/routes/(app)/master-data/tests/test-modal/tabs/RefNumTab.svelte
@@ -1,39 +1,24 @@
 <script>
   import { Plus, Trash2, Hash, Calculator, Edit2 } from 'lucide-svelte';
-  import Modal from '$lib/components/Modal.svelte';
 
   let { formData = $bindable(), isDirty = $bindable(false) } = $props();
 
-  let modalOpen = $state(false);
-  let modalMode = $state('create');
-  let selectedRangeIndex = $state(null);
-  let validationError = $state('');
-
-  let editingRange = $state({
-    NumRefType: 'REF',
+  // Simple inline form state - only Low/High visible, rest collapsed
+  let simpleRefNum = $state({
+    Low: '',
+    High: '',
     RangeType: 'RANGE',
     Sex: '0',
-    AgeStart: 0,
-    AgeEnd: 150,
+    AgeStart: '',
+    AgeEnd: '',
+    AgeUnit: 'years',
     LowSign: 'GE',
-    Low: null,
-    HighSign: 'LE',
-    High: null,
-    Flag: 'N',
-    Interpretation: ''
+    HighSign: 'LE'
   });
 
-  const refTypes = [
-    { value: 'REF', label: 'Reference', desc: 'Normal reference range' },
-    { value: 'CRTC', label: 'Critical', desc: 'Critical value range' },
-    { value: 'VAL', label: 'Validation', desc: 'Validation check range' },
-    { value: 'RERUN', label: 'Rerun', desc: 'Auto-rerun condition' }
-  ];
-
-  const rangeTypes = [
-    { value: 'RANGE', label: 'Range', desc: 'Low to High range' },
-    { value: 'THOLD', label: 'Threshold', desc: 'Single threshold value' }
-  ];
+  let validationErrors = $state({
+    simple: ''
+  });
 
   const sexOptions = [
     { value: '0', label: 'All' },
@@ -49,133 +34,114 @@
     { value: 'GE', label: '≥' }
   ];
 
-  const flagOptions = [
-    { value: 'N', label: 'N - Normal' },
-    { value: 'H', label: 'H - High' },
-    { value: 'L', label: 'L - Low' },
-    { value: 'A', label: 'A - Abnormal' },
-    { value: 'C', label: 'C - Critical' }
+  const ageUnits = [
+    { value: 'days', label: 'Days' },
+    { value: 'weeks', label: 'Weeks' },
+    { value: 'months', label: 'Months' },
+    { value: 'years', label: 'Years' }
   ];
 
   function handleFieldChange() {
     isDirty = true;
   }
 
-  /**
-   * Validate the current reference range
-   * @returns {{ valid: boolean, error?: string }}
-   */
-  function validateRange() {
-    // Age validation per spec: AgeStart < AgeEnd
-    if (parseInt(editingRange.AgeStart) >= parseInt(editingRange.AgeEnd)) {
-      return { valid: false, error: 'Age start must be less than age end' };
+  // Convert age to days for storage
+  function convertAgeToDays(value, unit) {
+    if (!value && value !== 0) return null;
+    const num = parseInt(value);
+    switch (unit) {
+      case 'days': return num;
+      case 'weeks': return num * 7;
+      case 'months': return num * 30;
+      case 'years': return num * 365;
+      default: return num;
+    }
+  }
+
+  // Convert days to display unit
+  function convertDaysToUnit(days, unit) {
+    if (days === null || days === undefined) return '';
+    switch (unit) {
+      case 'days': return days;
+      case 'weeks': return Math.floor(days / 7);
+      case 'months': return Math.floor(days / 30);
+      case 'years': return Math.floor(days / 365);
+      default: return days;
+    }
+  }
+
+  function resetSimpleRefNum() {
+    simpleRefNum = {
+      Low: '',
+      High: '',
+      RangeType: formData.details?.RefType === 'THOLD' ? 'THOLD' : 'RANGE',
+      Sex: '0',
+      AgeStart: '',
+      AgeEnd: '',
+      AgeUnit: 'years',
+      LowSign: 'GE',
+      HighSign: 'LE'
+    };
+    validationErrors.simple = '';
+  }
+
+  function validateSimpleRefNum() {
+    if (!simpleRefNum.Low && !simpleRefNum.High) {
+      return { valid: false, error: 'Please enter at least one value' };
     }
 
-    // Age range validation per spec: 0-150
-    if (parseInt(editingRange.AgeStart) < 0 || parseInt(editingRange.AgeStart) > 150) {
-      return { valid: false, error: 'Age start must be between 0 and 150' };
-    }
-    if (parseInt(editingRange.AgeEnd) < 0 || parseInt(editingRange.AgeEnd) > 150) {
-      return { valid: false, error: 'Age end must be between 0 and 150' };
-    }
-
-    // Value validation per spec: If both Low and High present, Low < High
-    const low = editingRange.Low !== null && editingRange.Low !== '' ? parseFloat(editingRange.Low) : null;
-    const high = editingRange.High !== null && editingRange.High !== '' ? parseFloat(editingRange.High) : null;
+    const low = simpleRefNum.Low !== '' ? parseFloat(simpleRefNum.Low) : null;
+    const high = simpleRefNum.High !== '' ? parseFloat(simpleRefNum.High) : null;
 
     if (low !== null && high !== null && low >= high) {
       return { valid: false, error: 'Low value must be less than high value' };
     }
 
-    // Sign appropriateness validation per spec
-    if (low !== null) {
-      const validLowSigns = ['EQ', 'GE', 'GT'];
-      if (!validLowSigns.includes(editingRange.LowSign)) {
-        return { valid: false, error: 'Low sign should be =, ≥, or > for low bounds' };
+    // Validate age range if provided
+    if (simpleRefNum.AgeStart !== '' || simpleRefNum.AgeEnd !== '') {
+      const ageStart = simpleRefNum.AgeStart !== '' ? parseInt(simpleRefNum.AgeStart) : null;
+      const ageEnd = simpleRefNum.AgeEnd !== '' ? parseInt(simpleRefNum.AgeEnd) : null;
+
+      if (ageStart !== null && ageEnd !== null && ageStart >= ageEnd) {
+        return { valid: false, error: 'Age start must be less than age end' };
       }
     }
 
-    if (high !== null) {
-      const validHighSigns = ['EQ', 'LE', 'LT'];
-      if (!validHighSigns.includes(editingRange.HighSign)) {
-        return { valid: false, error: 'High sign should be =, ≤, or < for high bounds' };
-      }
-    }
-
-    // For THOLD type, validate that at least one bound is set
-    if (editingRange.RangeType === 'THOLD' && low === null && high === null) {
-      return { valid: false, error: 'Threshold requires at least one bound' };
-    }
-
-    // Flag validation per spec: single character
-    if (editingRange.Flag && editingRange.Flag.length !== 1) {
-      return { valid: false, error: 'Flag must be a single character' };
-    }
-
     return { valid: true };
   }
 
-  function openAddRange() {
-    modalMode = 'create';
-    selectedRangeIndex = null;
-    validationError = '';
-    editingRange = {
-      NumRefType: 'REF',
-      RangeType: 'RANGE',
-      Sex: '0',
-      AgeStart: 0,
-      AgeEnd: 150,
-      LowSign: 'GE',
-      Low: null,
-      HighSign: 'LE',
-      High: null,
-      Flag: 'N',
-      Interpretation: ''
-    };
-    modalOpen = true;
-  }
+  function addSimpleRefNum() {
+    const validation = validateSimpleRefNum();
+    if (!validation.valid) {
+      validationErrors.simple = validation.error;
+      return;
+    }
 
-  function openEditRange(index) {
-    modalMode = 'edit';
-    selectedRangeIndex = index;
-    validationError = '';
-    editingRange = { ...formData.refnum[index] };
-    modalOpen = true;
+    const newRef = {
+      NumRefType: 'REF',
+      RangeType: simpleRefNum.RangeType,
+      Sex: simpleRefNum.Sex,
+      AgeStart: convertAgeToDays(simpleRefNum.AgeStart, simpleRefNum.AgeUnit) || 0,
+      AgeEnd: convertAgeToDays(simpleRefNum.AgeEnd, simpleRefNum.AgeUnit) || 54750,
+      Low: simpleRefNum.Low !== '' ? parseFloat(simpleRefNum.Low) : null,
+      High: simpleRefNum.High !== '' ? parseFloat(simpleRefNum.High) : null,
+      LowSign: simpleRefNum.LowSign,
+      HighSign: simpleRefNum.HighSign,
+      Flag: null,
+      Interpretation: null
+    };
+
+    formData.refnum = [...(formData.refnum || []), newRef];
+    resetSimpleRefNum();
+    handleFieldChange();
   }
 
   function removeRange(index) {
-    if (!confirm('Are you sure you want to delete this reference range?')) {
-      return;
-    }
     const newRanges = formData.refnum?.filter((_, i) => i !== index) || [];
     formData.refnum = newRanges;
     handleFieldChange();
   }
 
-  function saveRange() {
-    const validation = validateRange();
-    if (!validation.valid) {
-      validationError = validation.error;
-      return;
-    }
-
-    if (modalMode === 'create') {
-      formData.refnum = [...(formData.refnum || []), { ...editingRange }];
-    } else {
-      const newRanges = formData.refnum?.map((r, i) => 
-        i === selectedRangeIndex ? { ...editingRange } : r
-      ) || [];
-      formData.refnum = newRanges;
-    }
-    modalOpen = false;
-    validationError = '';
-    handleFieldChange();
-  }
-
-  function getRefTypeLabel(type) {
-    return refTypes.find(t => t.value === type)?.label || type;
-  }
-
   function getSexLabel(sex) {
     return sexOptions.find(s => s.value === sex)?.label || sex;
   }
@@ -184,12 +150,18 @@
     return signOptions.find(s => s.value === sign)?.label || sign;
   }
 
+  function getAgeDisplay(ageDays) {
+    if (ageDays === null || ageDays === undefined) return '';
+    if (ageDays < 30) return `${ageDays}d`;
+    if (ageDays < 365) return `${Math.floor(ageDays / 30)}mo`;
+    return `${Math.floor(ageDays / 365)}y`;
+  }
+
   /**
    * Validate all reference ranges
    * @returns {boolean}
    */
   export function validateAll() {
-    // Check for duplicate ranges (same type, sex, age range)
     const seen = new Set();
     for (const range of formData.refnum || []) {
       const key = `${range.NumRefType}-${range.Sex}-${range.AgeStart}-${range.AgeEnd}`;
@@ -212,208 +184,313 @@
     </div>
   </div>
 
-  <div class="space-y-4">
-    <div class="flex justify-between items-center">
-      <h3 class="text-sm font-medium text-gray-600 uppercase tracking-wide">Current Ranges ({formData.refnum?.length || 0})</h3>
-    </div>
-    
-    {#if !formData.refnum || formData.refnum.length === 0}
-      <div class="text-center py-8 bg-base-200 rounded-lg">
-        <Calculator class="w-12 h-12 mx-auto text-gray-400 mb-2" />
-        <p class="text-sm text-gray-500">No numeric ranges defined</p>
-        <p class="text-xs text-gray-400">Add reference ranges for this test</p>
+  <!-- Simple Inline Form -->
+  <div class="bg-base-100 border border-base-300 rounded-lg p-4 space-y-4">
+    {#if formData.refnum?.length === 0}
+      <!-- First entry - full form with optional collapsed fields -->
+      <div class="space-y-4">
+        {#if validationErrors.simple}
+          <div class="alert alert-error alert-sm">
+            <span>{validationErrors.simple}</span>
+          </div>
+        {/if}
+
+        <!-- Primary: Just Low and High values -->
+        <div class="grid grid-cols-2 gap-4">
+          {#if simpleRefNum.RangeType === 'THOLD'}
+            <!-- THOLD: show signs with values -->
+            <div class="space-y-1">
+              <label class="block text-sm font-medium text-gray-700">Low Value</label>
+              <div class="flex gap-2">
+                <select class="select select-sm select-bordered w-16" bind:value={simpleRefNum.LowSign}>
+                  {#each signOptions as opt (opt.value)}
+                    <option value={opt.value}>{opt.label}</option>
+                  {/each}
+                </select>
+                <input
+                  type="number"
+                  step="0.01"
+                  class="input input-sm input-bordered flex-1"
+                  bind:value={simpleRefNum.Low}
+                />
+              </div>
+            </div>
+            <div class="space-y-1">
+              <label class="block text-sm font-medium text-gray-700">High Value</label>
+              <div class="flex gap-2">
+                <select class="select select-sm select-bordered w-16" bind:value={simpleRefNum.HighSign}>
+                  {#each signOptions as opt (opt.value)}
+                    <option value={opt.value}>{opt.label}</option>
+                  {/each}
+                </select>
+                    <input
+                      type="number"
+                      step="0.01"
+                      class="input input-sm input-bordered flex-1"
+                      bind:value={simpleRefNum.High}
+                      placeholder="High"
+                    />
+              </div>
+            </div>
+          {:else}
+            <!-- RANGE: just values -->
+            <div class="space-y-1">
+              <label class="block text-sm font-medium text-gray-700">Low Value</label>
+              <input
+                type="number"
+                step="0.01"
+                class="input input-sm input-bordered w-full"
+                bind:value={simpleRefNum.Low}
+              />
+            </div>
+            <div class="space-y-1">
+              <label class="block text-sm font-medium text-gray-700">High Value</label>
+              <input
+                type="number"
+                step="0.01"
+                class="input input-sm input-bordered w-full"
+                bind:value={simpleRefNum.High}
+              />
+            </div>
+          {/if}
+        </div>
+
+        <!-- Optional: Range Type, Sex and Age (collapsed by default) -->
+        <div class="border-t pt-3">
+          <details>
+            <summary class="text-sm text-gray-600 cursor-pointer hover:text-gray-800">
+              Advanced Options (Range Type, Sex, Age)
+            </summary>
+            <div class="mt-3 space-y-3">
+              <div class="grid grid-cols-3 gap-4">
+                <div class="space-y-1">
+                  <label class="block text-sm font-medium text-gray-700">Range Type</label>
+                  <select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.RangeType}>
+                    <option value="RANGE">Range</option>
+                    <option value="THOLD">Threshold</option>
+                  </select>
+                </div>
+                <div class="space-y-1">
+                  <label class="block text-sm font-medium text-gray-700">Sex</label>
+                  <select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.Sex}>
+                    {#each sexOptions as opt (opt.value)}
+                      <option value={opt.value}>{opt.label}</option>
+                    {/each}
+                  </select>
+                </div>
+                <div class="space-y-1">
+                  <label class="block text-sm font-medium text-gray-700">Age Unit</label>
+                  <select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.AgeUnit}>
+                    {#each ageUnits as opt (opt.value)}
+                      <option value={opt.value}>{opt.label}</option>
+                    {/each}
+                  </select>
+                </div>
+              </div>
+              <div class="grid grid-cols-2 gap-4">
+                <div class="space-y-1">
+                  <label class="block text-sm font-medium text-gray-700">From</label>
+                  <div class="flex items-center gap-2">
+                    <input
+                      type="number"
+                      class="input input-sm input-bordered flex-1"
+                      bind:value={simpleRefNum.AgeStart}
+                      min="0"
+                    />
+                    <span class="text-sm text-gray-600 whitespace-nowrap">{simpleRefNum.AgeUnit}</span>
+                  </div>
+                </div>
+                <div class="space-y-1">
+                  <label class="block text-sm font-medium text-gray-700">To</label>
+                  <div class="flex items-center gap-2">
+                    <input
+                      type="number"
+                      class="input input-sm input-bordered flex-1"
+                      bind:value={simpleRefNum.AgeEnd}
+                      min="0"
+                    />
+                    <span class="text-sm text-gray-600 whitespace-nowrap">{simpleRefNum.AgeUnit}</span>
+                  </div>
+                </div>
+              </div>
+              <!-- Quick Presets -->
+              <div class="pt-1">
+                <span class="text-xs text-gray-500 block mb-1">Quick presets:</span>
+                <div class="flex flex-wrap gap-1">
+                  <button class="btn btn-xs btn-ghost" onclick={() => { simpleRefNum.AgeStart = ''; simpleRefNum.AgeEnd = ''; }}>All ages</button>
+                  <button class="btn btn-xs btn-ghost" onclick={() => { simpleRefNum.AgeStart = 0; simpleRefNum.AgeEnd = 18; simpleRefNum.AgeUnit = 'years'; }}>0-18 years</button>
+                  <button class="btn btn-xs btn-ghost" onclick={() => { simpleRefNum.AgeStart = 18; simpleRefNum.AgeEnd = 150; simpleRefNum.AgeUnit = 'years'; }}>18+ years</button>
+                </div>
+              </div>
+            </div>
+          </details>
+        </div>
+
+        <div class="flex justify-end pt-2">
+          <button class="btn btn-sm btn-primary" onclick={addSimpleRefNum}>
+            <Plus class="w-4 h-4 mr-1" />
+            Add Range
+          </button>
+        </div>
       </div>
     {:else}
-      <div class="overflow-x-auto border border-base-200 rounded-lg">
-        <table class="table table-sm table-compact">
-          <thead>
-            <tr class="bg-base-200">
-              <th class="w-20">Type</th>
-              <th class="w-20">Range</th>
-              <th class="w-16">Sex</th>
-              <th class="w-24">Age</th>
-              <th>Low Bound</th>
-              <th>High Bound</th>
-              <th class="w-16">Flag</th>
-              <th class="w-24 text-center">Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            {#each formData.refnum as range, idx (idx)}
-              <tr class="hover:bg-base-100">
-                <td>
-                  <span class="badge badge-xs badge-ghost">{getRefTypeLabel(range.NumRefType)}</span>
-                </td>
-                <td>
-                  <span class="badge badge-xs badge-outline">{range.RangeType}</span>
-                </td>
-                <td>{getSexLabel(range.Sex)}</td>
-                <td class="text-sm">{range.AgeStart}-{range.AgeEnd}</td>
-                <td class="font-mono text-sm">
-                  {#if range.Low !== null && range.Low !== ''}
-                    {getSignLabel(range.LowSign)} {range.Low}
-                  {:else}
-                    -
-                  {/if}
-                </td>
-                <td class="font-mono text-sm">
-                  {#if range.High !== null && range.High !== ''}
-                    {getSignLabel(range.HighSign)} {range.High}
-                  {:else}
-                    -
-                  {/if}
-                </td>
-                <td>
-                  <span class="badge badge-xs badge-secondary">{range.Flag || '-'}</span>
-                </td>
-                <td>
-                  <div class="flex justify-center gap-1">
-                    <button
-                      class="btn btn-ghost btn-xs"
-                      onclick={() => openEditRange(idx)}
-                      title="Edit Range"
-                    >
-                      <Edit2 class="w-3 h-3" />
-                    </button>
-                    <button
-                      class="btn btn-ghost btn-xs text-error"
-                      onclick={() => removeRange(idx)}
-                      title="Remove Range"
-                    >
-                      <Trash2 class="w-3 h-3" />
-                    </button>
+      <!-- Show existing ranges as list -->
+      <div class="space-y-2">
+        {#each formData.refnum as ref, idx (idx)}
+          <div class="bg-base-100 border border-base-300 rounded-lg p-3 flex justify-between items-center">
+            <div class="flex items-center gap-3 text-sm">
+              <span class="font-mono bg-base-200 px-2 py-1 rounded">
+                {#if ref.RangeType === 'THOLD' && ref.LowSign}
+                  {getSignLabel(ref.LowSign)} 
+                {/if}
+                {ref.Low !== null && ref.Low !== '' ? ref.Low : '—'} 
+                - 
+                {#if ref.RangeType === 'THOLD' && ref.HighSign}
+                  {getSignLabel(ref.HighSign)} 
+                {/if}
+                {ref.High !== null && ref.High !== '' ? ref.High : '—'}
+              </span>
+              <span class="text-gray-600">
+                {getSexLabel(ref.Sex)}
+                {#if ref.AgeStart > 0 || ref.AgeEnd < 54750}
+                  · {getAgeDisplay(ref.AgeStart)}-{getAgeDisplay(ref.AgeEnd)}
+                {/if}
+              </span>
+            </div>
+            <button class="btn btn-ghost btn-xs text-error" onclick={() => removeRange(idx)} title="Remove">
+              <Trash2 class="w-3 h-3" />
+            </button>
+          </div>
+        {/each}
+        
+        <!-- Add another simple form -->
+        <div class="border-t pt-3">
+          {#if validationErrors.simple}
+            <div class="alert alert-error alert-sm mb-3">
+              <span>{validationErrors.simple}</span>
+            </div>
+          {/if}
+          
+          <div class="grid grid-cols-4 gap-2 items-end">
+            {#if simpleRefNum.RangeType === 'THOLD'}
+              <!-- THOLD: show signs with values -->
+              <div class="col-span-2 grid grid-cols-2 gap-2">
+                <div>
+                  <label class="block text-xs text-gray-600 mb-1">Low</label>
+                  <div class="flex gap-1">
+                    <select class="select select-sm select-bordered w-12" bind:value={simpleRefNum.LowSign}>
+                      {#each signOptions as opt (opt.value)}
+                        <option value={opt.value}>{opt.label}</option>
+                      {/each}
+                    </select>
+                    <input
+                      type="number"
+                      step="0.01"
+                      class="input input-sm input-bordered flex-1"
+                      bind:value={simpleRefNum.Low}
+                      placeholder="Low"
+                    />
                   </div>
-                </td>
-              </tr>
-            {/each}
-          </tbody>
-        </table>
+                </div>
+                <div>
+                  <label class="block text-xs text-gray-600 mb-1">High</label>
+                  <div class="flex gap-1">
+                    <select class="select select-sm select-bordered w-12" bind:value={simpleRefNum.HighSign}>
+                      {#each signOptions as opt (opt.value)}
+                        <option value={opt.value}>{opt.label}</option>
+                      {/each}
+                    </select>
+                    <input
+                      type="number"
+                      step="0.01"
+                      class="input input-sm input-bordered flex-1"
+                      bind:value={simpleRefNum.High}
+                      placeholder="High"
+                    />
+                  </div>
+                </div>
+              </div>
+            {:else}
+              <!-- RANGE: just values -->
+              <div>
+                <label class="block text-xs text-gray-600 mb-1">Low</label>
+                <input
+                  type="number"
+                  step="0.01"
+                  class="input input-sm input-bordered w-full"
+                  bind:value={simpleRefNum.Low}
+                  placeholder="Low"
+                />
+              </div>
+              <div>
+                <label class="block text-xs text-gray-600 mb-1">High</label>
+                <input
+                  type="number"
+                  step="0.01"
+                  class="input input-sm input-bordered w-full"
+                  bind:value={simpleRefNum.High}
+                  placeholder="High"
+                />
+              </div>
+            {/if}
+            <div>
+              <label class="block text-xs text-gray-600 mb-1">Sex</label>
+              <select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.Sex}>
+                {#each sexOptions as opt (opt.value)}
+                  <option value={opt.value}>{opt.label}</option>
+                {/each}
+              </select>
+            </div>
+            <button class="btn btn-sm btn-primary" onclick={addSimpleRefNum}>
+              <Plus class="w-4 h-4" />
+            </button>
+          </div>
+          
+          <!-- Optional: Range Type and Age -->
+          <details class="mt-2">
+            <summary class="text-xs text-gray-600 cursor-pointer hover:text-gray-800">
+              Advanced (Range Type, Age)
+            </summary>
+            <div class="mt-2 grid grid-cols-4 gap-2">
+              <div>
+                <label class="block text-xs text-gray-600 mb-1">Range Type</label>
+                <select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.RangeType}>
+                  <option value="RANGE">Range</option>
+                  <option value="THOLD">Threshold</option>
+                </select>
+              </div>
+              <div>
+                <label class="block text-xs text-gray-600 mb-1">Age Unit</label>
+                <select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.AgeUnit}>
+                  {#each ageUnits as opt (opt.value)}
+                    <option value={opt.value}>{opt.label}</option>
+                  {/each}
+                </select>
+              </div>
+              <div>
+                <label class="block text-xs text-gray-600 mb-1">From</label>
+                <input
+                  type="number"
+                  class="input input-sm input-bordered w-full"
+                  bind:value={simpleRefNum.AgeStart}
+                  placeholder="0"
+                  min="0"
+                />
+              </div>
+              <div>
+                <label class="block text-xs text-gray-600 mb-1">To</label>
+                <input
+                  type="number"
+                  class="input input-sm input-bordered w-full"
+                  bind:value={simpleRefNum.AgeEnd}
+                  placeholder="150"
+                  min="0"
+                />
+              </div>
+            </div>
+          </details>
+        </div>
       </div>
     {/if}
   </div>
-
-  <div class="flex justify-end">
-    <button class="btn btn-sm btn-primary" onclick={openAddRange}>
-      <Plus class="w-4 h-4 mr-2" />
-      Add Range
-    </button>
-  </div>
 </div>
-
-<Modal bind:open={modalOpen} title={modalMode === 'create' ? 'Add Numeric Range' : 'Edit Numeric Range'} size="md">
-  <div class="space-y-4 max-h-[500px] overflow-y-auto">
-    {#if validationError}
-      <div class="alert alert-error alert-sm">
-        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-4 w-4" fill="none" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-        <span>{validationError}</span>
-      </div>
-    {/if}
-
-    <div class="grid grid-cols-2 gap-4">
-      <div class="form-control">
-        <label class="label text-sm">
-          Reference Type
-          <span class="text-error">*</span>
-        </label>
-        <select class="select select-sm select-bordered" bind:value={editingRange.NumRefType}>
-          {#each refTypes as rt (rt.value)}
-            <option value={rt.value} title={rt.desc}>{rt.label}</option>
-          {/each}
-        </select>
-      </div>
-
-      <div class="form-control">
-        <label class="label text-sm">
-          Range Type
-          <span class="text-error">*</span>
-        </label>
-        <select class="select select-sm select-bordered" bind:value={editingRange.RangeType}>
-          {#each rangeTypes as rt (rt.value)}
-            <option value={rt.value} title={rt.desc}>{rt.label}</option>
-          {/each}
-        </select>
-      </div>
-    </div>
-
-    <div class="grid grid-cols-2 gap-4">
-      <div class="form-control">
-        <label class="label text-sm">
-          Sex
-          <span class="text-error">*</span>
-        </label>
-        <select class="select select-sm select-bordered" bind:value={editingRange.Sex}>
-          {#each sexOptions as opt (opt.value)}
-            <option value={opt.value}>{opt.label}</option>
-          {/each}
-        </select>
-      </div>
-
-      <div class="grid grid-cols-2 gap-2">
-        <div class="form-control">
-          <label class="label text-sm">
-            Age Start
-            <span class="text-error">*</span>
-          </label>
-          <input type="number" class="input input-sm input-bordered" bind:value={editingRange.AgeStart} min="0" max="150" />
-        </div>
-        <div class="form-control">
-          <label class="label text-sm">
-            Age End
-            <span class="text-error">*</span>
-          </label>
-          <input type="number" class="input input-sm input-bordered" bind:value={editingRange.AgeEnd} min="0" max="150" />
-        </div>
-      </div>
-    </div>
-
-    <div class="border-t pt-4">
-      <h4 class="text-sm font-medium mb-3">Low Bound</h4>
-      <div class="grid grid-cols-3 gap-2">
-        <select class="select select-sm select-bordered" bind:value={editingRange.LowSign}>
-          {#each signOptions as opt (opt.value)}
-            <option value={opt.value}>{opt.label}</option>
-          {/each}
-        </select>
-        <input type="number" step="0.01" class="input input-sm input-bordered col-span-2" bind:value={editingRange.Low} placeholder="Low value" />
-      </div>
-    </div>
-
-    <div class="border-t pt-4">
-      <h4 class="text-sm font-medium mb-3">High Bound</h4>
-      <div class="grid grid-cols-3 gap-2">
-        <select class="select select-sm select-bordered" bind:value={editingRange.HighSign}>
-          {#each signOptions as opt (opt.value)}
-            <option value={opt.value}>{opt.label}</option>
-          {/each}
-        </select>
-        <input type="number" step="0.01" class="input input-sm input-bordered col-span-2" bind:value={editingRange.High} placeholder="High value" />
-      </div>
-    </div>
-
-    <div class="grid grid-cols-2 gap-4">
-      <div class="form-control">
-        <label class="label text-sm">
-          Flag
-          <span class="label-text-alt text-xs text-gray-500">(H, L, A, N, C)</span>
-        </label>
-        <select class="select select-sm select-bordered" bind:value={editingRange.Flag}>
-          {#each flagOptions as opt (opt.value)}
-            <option value={opt.value}>{opt.label}</option>
-          {/each}
-        </select>
-      </div>
-
-      <div class="form-control">
-        <label class="label text-sm">Interpretation</label>
-        <input type="text" class="input input-sm input-bordered" bind:value={editingRange.Interpretation} placeholder="Optional interpretation" maxlength="255" />
-      </div>
-    </div>
-  </div>
-
-  {#snippet footer()}
-    <button class="btn btn-ghost" onclick={() => { modalOpen = false; validationError = ''; }}>Cancel</button>
-    <button class="btn btn-primary" onclick={saveRange}>Save</button>
-  {/snippet}
-</Modal>
\ No newline at end of file
diff --git a/src/routes/(app)/master-data/tests/test-modal/tabs/RefTxtTab.svelte b/src/routes/(app)/master-data/tests/test-modal/tabs/RefTxtTab.svelte
index 960c251..23ca865 100644
--- a/src/routes/(app)/master-data/tests/test-modal/tabs/RefTxtTab.svelte
+++ b/src/routes/(app)/master-data/tests/test-modal/tabs/RefTxtTab.svelte
@@ -12,8 +12,8 @@
     Sex: '0',
     AgeStart: 0,
     AgeEnd: 150,
-    RefTxt: '',
-    Flag: 'N'
+    AgeUnit: 'years',
+    RefTxt: ''
   });
 
   const refTypes = [
@@ -28,26 +28,42 @@
     { value: '2', label: 'Male' }
   ];
 
-  const flagOptions = $derived.by(() => {
-    const type = editingRange.TxtRefType;
-    if (type === 'Normal') return [{ value: 'N', label: 'N - Normal' }];
-    if (type === 'Abnormal') return [{ value: 'A', label: 'A - Abnormal' }];
-    if (type === 'Critical') return [{ value: 'C', label: 'C - Critical' }];
-    return [];
-  });
-
-  const autoFlag = $derived.by(() => {
-    const type = editingRange.TxtRefType;
-    if (type === 'Normal') return 'N';
-    if (type === 'Abnormal') return 'A';
-    if (type === 'Critical') return 'C';
-    return editingRange.Flag;
-  });
+  const ageUnits = [
+    { value: 'days', label: 'Days' },
+    { value: 'weeks', label: 'Weeks' },
+    { value: 'months', label: 'Months' },
+    { value: 'years', label: 'Years' }
+  ];
 
   function handleFieldChange() {
     isDirty = true;
   }
 
+  // Convert age to days for storage
+  function convertAgeToDays(value, unit) {
+    if (!value && value !== 0) return null;
+    const num = parseInt(value);
+    switch (unit) {
+      case 'days': return num;
+      case 'weeks': return num * 7;
+      case 'months': return num * 30;
+      case 'years': return num * 365;
+      default: return num;
+    }
+  }
+
+  // Convert days to display unit
+  function convertDaysToUnit(days, unit) {
+    if (days === null || days === undefined) return 0;
+    switch (unit) {
+      case 'days': return days;
+      case 'weeks': return Math.floor(days / 7);
+      case 'months': return Math.floor(days / 30);
+      case 'years': return Math.floor(days / 365);
+      default: return days;
+    }
+  }
+
   function openAddRange() {
     modalMode = 'create';
     selectedRangeIndex = null;
@@ -56,8 +72,8 @@
       Sex: '0',
       AgeStart: 0,
       AgeEnd: 150,
-      RefTxt: '',
-      Flag: 'N'
+      AgeUnit: 'years',
+      RefTxt: ''
     };
     modalOpen = true;
   }
@@ -65,7 +81,13 @@
   function openEditRange(index) {
     modalMode = 'edit';
     selectedRangeIndex = index;
-    editingRange = { ...formData.reftxt[index] };
+    const ref = formData.reftxt[index];
+    editingRange = { 
+      ...ref,
+      AgeUnit: 'years',
+      AgeStart: convertDaysToUnit(ref.AgeStart, 'years'),
+      AgeEnd: convertDaysToUnit(ref.AgeEnd, 'years')
+    };
     modalOpen = true;
   }
 
@@ -76,11 +98,17 @@
   }
 
   function saveRange() {
+    const dataToSave = {
+      ...editingRange,
+      AgeStart: convertAgeToDays(editingRange.AgeStart, editingRange.AgeUnit),
+      AgeEnd: convertAgeToDays(editingRange.AgeEnd, editingRange.AgeUnit)
+    };
+
     if (modalMode === 'create') {
-      formData.reftxt = [...(formData.reftxt || []), { ...editingRange, Flag: autoFlag }];
+      formData.reftxt = [...(formData.reftxt || []), dataToSave];
     } else {
       const newRanges = formData.reftxt?.map((r, i) => 
-        i === selectedRangeIndex ? { ...editingRange, Flag: autoFlag } : r
+        i === selectedRangeIndex ? dataToSave : r
       ) || [];
       formData.reftxt = newRanges;
     }
@@ -95,6 +123,13 @@
   function getSexLabel(sex) {
     return sexOptions.find(s => s.value === sex)?.label || sex;
   }
+
+  function getAgeDisplay(ageDays) {
+    if (ageDays === null || ageDays === undefined) return '';
+    if (ageDays < 30) return `${ageDays}d`;
+    if (ageDays < 365) return `${Math.floor(ageDays / 30)}mo`;
+    return `${Math.floor(ageDays / 365)}y`;
+  }
 </script>
 
 <div class="space-y-6">
@@ -125,7 +160,6 @@
               <th class="w-16">Sex</th>
               <th class="w-24">Age</th>
               <th>Reference Text</th>
-              <th class="w-16">Flag</th>
               <th class="w-24 text-center">Actions</th>
             </tr>
           </thead>
@@ -141,11 +175,8 @@
                   </span>
                 </td>
                 <td>{getSexLabel(range.Sex)}</td>
-                <td class="text-sm">{range.AgeStart}-{range.AgeEnd}</td>
+                <td class="text-sm">{getAgeDisplay(range.AgeStart)}-{getAgeDisplay(range.AgeEnd)}</td>
                 <td class="font-mono text-sm">{range.RefTxt || '-'}</td>
-                <td>
-                  <span class="badge badge-xs badge-secondary">{range.Flag}</span>
-                </td>
                 <td>
                   <div class="flex justify-center gap-1">
                     <button
@@ -153,7 +184,7 @@
                       onclick={() => openEditRange(idx)}
                       title="Edit Range"
                     >
-                      <Plus class="w-3 h-3" />
+                      <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
                     </button>
                     <button
                       class="btn btn-ghost btn-xs text-error"
@@ -180,7 +211,7 @@
   </div>
 </div>
 
-<Modal bind:open={modalOpen} title={modalMode === 'create' ? 'Add Text Range' : 'Edit Text Range'} size="md">
+<Modal bind:open={modalOpen} title={modalMode === 'create' ? 'Add Text Range' : 'Edit Text Range'} size="lg">
   <div class="space-y-4">
     <div class="form-control">
       <label class="label text-sm">Reference Type</label>
@@ -200,14 +231,49 @@
       </select>
     </div>
 
-    <div class="grid grid-cols-2 gap-4">
-      <div class="form-control">
-        <label class="label text-sm">Age Start</label>
-        <input type="number" class="input input-sm input-bordered" bind:value={editingRange.AgeStart} min="0" max="150" />
-      </div>
-      <div class="form-control">
-        <label class="label text-sm">Age End</label>
-        <input type="number" class="input input-sm input-bordered" bind:value={editingRange.AgeEnd} min="0" max="150" />
+    <!-- Age Range Section -->
+    <div class="border-t pt-4">
+      <h4 class="text-sm font-medium mb-3">Age Range</h4>
+      <div class="bg-base-200 p-4 rounded-lg space-y-3">
+        <!-- Age Unit Selector - Applied to both start and end -->
+        <div class="form-control">
+          <label class="label text-sm font-medium">Age Unit</label>
+          <select class="select select-sm select-bordered w-full" bind:value={editingRange.AgeUnit}>
+            {#each ageUnits as opt (opt.value)}
+              <option value={opt.value}>{opt.label}</option>
+            {/each}
+          </select>
+          <span class="label-text-alt text-xs text-gray-500 mt-1">Both age values will use this unit</span>
+        </div>
+
+        <!-- Age Start/End with Unit Display -->
+        <div class="grid grid-cols-2 gap-4">
+          <div class="form-control">
+            <label class="label text-sm">From</label>
+            <div class="flex items-center gap-2">
+              <input type="number" class="input input-sm input-bordered flex-1" bind:value={editingRange.AgeStart} min="0" placeholder="0" />
+              <span class="text-sm text-gray-600 whitespace-nowrap">{editingRange.AgeUnit}</span>
+            </div>
+          </div>
+          <div class="form-control">
+            <label class="label text-sm">To</label>
+            <div class="flex items-center gap-2">
+              <input type="number" class="input input-sm input-bordered flex-1" bind:value={editingRange.AgeEnd} min="0" placeholder="150" />
+              <span class="text-sm text-gray-600 whitespace-nowrap">{editingRange.AgeUnit}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Quick Presets -->
+        <div class="pt-2">
+          <span class="text-xs text-gray-500 block mb-2">Quick presets:</span>
+          <div class="flex flex-wrap gap-2">
+            <button class="btn btn-xs btn-ghost" onclick={() => { editingRange.AgeStart = 0; editingRange.AgeEnd = 150; editingRange.AgeUnit = 'years'; }}>All ages</button>
+            <button class="btn btn-xs btn-ghost" onclick={() => { editingRange.AgeStart = 0; editingRange.AgeEnd = 18; editingRange.AgeUnit = 'years'; }}>Pediatric (0-18y)</button>
+            <button class="btn btn-xs btn-ghost" onclick={() => { editingRange.AgeStart = 18; editingRange.AgeEnd = 150; editingRange.AgeUnit = 'years'; }}>Adult (18y+)</button>
+            <button class="btn btn-xs btn-ghost" onclick={() => { editingRange.AgeStart = 0; editingRange.AgeEnd = 30; editingRange.AgeUnit = 'days'; }}>Neonatal (0-30d)</button>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -224,14 +290,6 @@
         maxlength="255"
       />
     </div>
-
-    <div class="form-control">
-      <label class="label text-sm">Flag</label>
-      <input type="text" class="input input-sm input-bordered" value={autoFlag} readonly />
-      <label class="label">
-        <span class="label-text-alt text-xs text-gray-500">Flag is automatically set based on reference type</span>
-      </label>
-    </div>
   </div>
 
   {#snippet footer()}
diff --git a/src/routes/(app)/master-data/tests/test-modal/tabs/TechDetailsTab.svelte b/src/routes/(app)/master-data/tests/test-modal/tabs/TechDetailsTab.svelte
index 369d8b1..fd72362 100644
--- a/src/routes/(app)/master-data/tests/test-modal/tabs/TechDetailsTab.svelte
+++ b/src/routes/(app)/master-data/tests/test-modal/tabs/TechDetailsTab.svelte
@@ -1,13 +1,46 @@
 <script>
   import { getResultTypeOptions, getRefTypeOptions, validateTypeCombination } from '$lib/api/tests.js';
-  import { AlertCircle } from 'lucide-svelte';
+  import { AlertCircle, Hash, Type, Plus, ExternalLink, Trash2 } from 'lucide-svelte';
 
-  let { formData = $bindable(), disciplines = [], departments = [], isDirty = $bindable(false) } = $props();
+  let { formData = $bindable(), disciplines = [], departments = [], isDirty = $bindable(false), onSwitchTab = null } = $props();
+
+  // Simple inline state for single range entry
+  let simpleRefNum = $state({
+    Low: '',
+    High: '',
+    Sex: '0',
+    AgeStart: '',
+    AgeEnd: '',
+    AgeUnit: 'years'
+  });
+
+  let simpleRefTxt = $state({
+    RefTxt: '',
+    Sex: '0',
+    AgeStart: '',
+    AgeEnd: '',
+    AgeUnit: 'years'
+  });
 
   let validationErrors = $state({
-    typeCombination: ''
+    typeCombination: '',
+    simpleRefNum: '',
+    simpleRefTxt: ''
   });
 
+  const sexOptions = [
+    { value: '0', label: 'All' },
+    { value: '1', label: 'Female' },
+    { value: '2', label: 'Male' }
+  ];
+
+  const ageUnits = [
+    { value: 'days', label: 'Days' },
+    { value: 'weeks', label: 'Weeks' },
+    { value: 'months', label: 'Months' },
+    { value: 'years', label: 'Years' }
+  ];
+
   const disciplineOptions = $derived(disciplines.map(d => ({ value: d.DisciplineID, label: d.DisciplineName })));
   const departmentOptions = $derived(departments.map(d => ({ value: d.DepartmentID, label: d.DepartmentName })));
 
@@ -23,6 +56,25 @@
     return result;
   });
 
+  // Computed: Check if numeric reference ranges should be shown
+  const showRefNumSection = $derived.by(() => {
+    const resultType = formData.details?.ResultType;
+    const refType = formData.details?.RefType;
+    return ['NMRIC', 'RANGE'].includes(resultType) && ['RANGE', 'THOLD'].includes(refType);
+  });
+
+  // Computed: Check if text reference ranges should be shown
+  const showRefTxtSection = $derived.by(() => {
+    const resultType = formData.details?.ResultType;
+    const refType = formData.details?.RefType;
+    return resultType === 'TEXT' && refType === 'TEXT';
+  });
+
+  // Computed: Check if we should show sex/age (only if multiple ranges exist or user chooses to)
+  const showAdvancedRefFields = $derived.by(() => {
+    return (formData.refnum?.length > 1) || (formData.reftxt?.length > 1);
+  });
+
   function handleFieldChange() {
     isDirty = true;
     validationErrors.typeCombination = '';
@@ -44,9 +96,182 @@
       formData.details.VSet = '';
     }
     
+    // Clear references when type changes
+    formData.refnum = [];
+    formData.reftxt = [];
+    resetSimpleRefNum();
+    resetSimpleRefTxt();
+    
     handleFieldChange();
   }
 
+  function resetSimpleRefNum() {
+    simpleRefNum = {
+      Low: '',
+      High: '',
+      Sex: '0',
+      AgeStart: '',
+      AgeEnd: '',
+      AgeUnit: 'years'
+    };
+    validationErrors.simpleRefNum = '';
+  }
+
+  function resetSimpleRefTxt() {
+    simpleRefTxt = {
+      RefTxt: '',
+      Sex: '0',
+      AgeStart: '',
+      AgeEnd: '',
+      AgeUnit: 'years'
+    };
+    validationErrors.simpleRefTxt = '';
+  }
+
+  // Convert age to days for storage
+  function convertAgeToDays(value, unit) {
+    if (!value && value !== 0) return null;
+    const num = parseInt(value);
+    switch (unit) {
+      case 'days': return num;
+      case 'weeks': return num * 7;
+      case 'months': return num * 30;
+      case 'years': return num * 365;
+      default: return num;
+    }
+  }
+
+  // Convert days to display unit
+  function convertDaysToUnit(days, unit) {
+    if (days === null || days === undefined) return '';
+    switch (unit) {
+      case 'days': return days;
+      case 'weeks': return Math.floor(days / 7);
+      case 'months': return Math.floor(days / 30);
+      case 'years': return Math.floor(days / 365);
+      default: return days;
+    }
+  }
+
+  function validateSimpleRefNum() {
+    if (!simpleRefNum.Low && !simpleRefNum.High) {
+      return { valid: false, error: 'Please enter at least one value' };
+    }
+
+    const low = simpleRefNum.Low !== '' ? parseFloat(simpleRefNum.Low) : null;
+    const high = simpleRefNum.High !== '' ? parseFloat(simpleRefNum.High) : null;
+
+    if (low !== null && high !== null && low >= high) {
+      return { valid: false, error: 'Low value must be less than high value' };
+    }
+
+    // Validate age range if provided
+    if (simpleRefNum.AgeStart !== '' || simpleRefNum.AgeEnd !== '') {
+      const ageStart = simpleRefNum.AgeStart !== '' ? parseInt(simpleRefNum.AgeStart) : null;
+      const ageEnd = simpleRefNum.AgeEnd !== '' ? parseInt(simpleRefNum.AgeEnd) : null;
+
+      if (ageStart !== null && ageEnd !== null && ageStart >= ageEnd) {
+        return { valid: false, error: 'Age start must be less than age end' };
+      }
+    }
+
+    return { valid: true };
+  }
+
+  function addSimpleRefNum() {
+    const validation = validateSimpleRefNum();
+    if (!validation.valid) {
+      validationErrors.simpleRefNum = validation.error;
+      return;
+    }
+
+    const newRef = {
+      NumRefType: 'REF',
+      RangeType: 'RANGE',
+      Sex: simpleRefNum.Sex,
+      AgeStart: convertAgeToDays(simpleRefNum.AgeStart, simpleRefNum.AgeUnit) || 0,
+      AgeEnd: convertAgeToDays(simpleRefNum.AgeEnd, simpleRefNum.AgeUnit) || 54750, // 150 years in days
+      Low: simpleRefNum.Low !== '' ? parseFloat(simpleRefNum.Low) : null,
+      High: simpleRefNum.High !== '' ? parseFloat(simpleRefNum.High) : null,
+      Flag: null,
+      Interpretation: null
+    };
+
+    formData.refnum = [...(formData.refnum || []), newRef];
+    resetSimpleRefNum();
+    isDirty = true;
+  }
+
+  function validateSimpleRefTxt() {
+    if (!simpleRefTxt.RefTxt?.trim()) {
+      return { valid: false, error: 'Reference text is required' };
+    }
+
+    // Validate age range if provided
+    if (simpleRefTxt.AgeStart !== '' || simpleRefTxt.AgeEnd !== '') {
+      const ageStart = simpleRefTxt.AgeStart !== '' ? parseInt(simpleRefTxt.AgeStart) : null;
+      const ageEnd = simpleRefTxt.AgeEnd !== '' ? parseInt(simpleRefTxt.AgeEnd) : null;
+
+      if (ageStart !== null && ageEnd !== null && ageStart >= ageEnd) {
+        return { valid: false, error: 'Age start must be less than age end' };
+      }
+    }
+
+    return { valid: true };
+  }
+
+  function addSimpleRefTxt() {
+    const validation = validateSimpleRefTxt();
+    if (!validation.valid) {
+      validationErrors.simpleRefTxt = validation.error;
+      return;
+    }
+
+    const newRef = {
+      TxtRefType: 'Normal',
+      Sex: simpleRefTxt.Sex,
+      AgeStart: convertAgeToDays(simpleRefTxt.AgeStart, simpleRefTxt.AgeUnit) || 0,
+      AgeEnd: convertDaysToUnit(simpleRefTxt.AgeEnd, simpleRefTxt.AgeUnit) || 54750,
+      RefTxt: simpleRefTxt.RefTxt.trim(),
+      Flag: 'N'
+    };
+
+    formData.reftxt = [...(formData.reftxt || []), newRef];
+    resetSimpleRefTxt();
+    isDirty = true;
+  }
+
+  function removeRefNum(index) {
+    const newRanges = formData.refnum?.filter((_, i) => i !== index) || [];
+    formData.refnum = newRanges;
+    isDirty = true;
+  }
+
+  function removeRefTxt(index) {
+    const newRanges = formData.reftxt?.filter((_, i) => i !== index) || [];
+    formData.reftxt = newRanges;
+    isDirty = true;
+  }
+
+  function switchToRefNumTab() {
+    if (onSwitchTab) onSwitchTab('refnum');
+  }
+
+  function switchToRefTxtTab() {
+    if (onSwitchTab) onSwitchTab('reftxt');
+  }
+
+  function getSexLabel(sex) {
+    return sexOptions.find(s => s.value === sex)?.label || sex;
+  }
+
+  function getAgeDisplay(ageDays) {
+    if (ageDays === null || ageDays === undefined) return '';
+    if (ageDays < 30) return `${ageDays}d`;
+    if (ageDays < 365) return `${Math.floor(ageDays / 30)}mo`;
+    return `${Math.floor(ageDays / 365)}y`;
+  }
+
   export function validateAll() {
     validationErrors.typeCombination = '';
     
@@ -303,4 +528,364 @@
       </div>
     </div>
   </div>
+
+  <!-- Inline Numeric Reference Ranges - Simple Form -->
+  {#if showRefNumSection}
+    <div class="border-t pt-5">
+      <div class="flex justify-between items-center mb-3">
+        <h3 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
+          <Hash class="w-4 h-4" />
+          Reference Range
+          {#if formData.refnum?.length > 0}
+            <span class="badge badge-sm badge-primary">{formData.refnum.length}</span>
+          {/if}
+        </h3>
+        {#if formData.refnum?.length > 0}
+          <button class="btn btn-ghost btn-xs text-primary" onclick={switchToRefNumTab}>
+            <ExternalLink class="w-3 h-3 mr-1" />
+            Full Manager
+          </button>
+        {/if}
+      </div>
+
+      {#if formData.refnum?.length === 0}
+        <!-- Simple inline form for first entry -->
+        <div class="bg-base-100 border border-base-300 rounded-lg p-4 space-y-4">
+          {#if validationErrors.simpleRefNum}
+            <div class="alert alert-error alert-sm">
+              <span>{validationErrors.simpleRefNum}</span>
+            </div>
+          {/if}
+
+          <!-- Primary: Just Low and High values -->
+          <div class="grid grid-cols-2 gap-4">
+            <div class="space-y-1">
+              <label class="block text-sm font-medium text-gray-700">Low Value</label>
+              <input
+                type="number"
+                step="0.01"
+                class="input input-sm input-bordered w-full"
+                bind:value={simpleRefNum.Low}
+                placeholder="e.g., 10.5"
+              />
+            </div>
+            <div class="space-y-1">
+              <label class="block text-sm font-medium text-gray-700">High Value</label>
+              <input
+                type="number"
+                step="0.01"
+                class="input input-sm input-bordered w-full"
+                bind:value={simpleRefNum.High}
+                placeholder="e.g., 50.0"
+              />
+            </div>
+          </div>
+
+          <!-- Optional: Sex and Age (collapsed by default) -->
+          <div class="border-t pt-3">
+            <details>
+              <summary class="text-sm text-gray-600 cursor-pointer hover:text-gray-800">
+                Add Sex/Age Specific Ranges (Optional)
+              </summary>
+              <div class="mt-3 space-y-3">
+                <div class="grid grid-cols-2 gap-4">
+                  <div class="space-y-1">
+                    <label class="block text-sm font-medium text-gray-700">Sex</label>
+                    <select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.Sex}>
+                      {#each sexOptions as opt (opt.value)}
+                        <option value={opt.value}>{opt.label}</option>
+                      {/each}
+                    </select>
+                  </div>
+                  <div class="space-y-1">
+                    <label class="block text-sm font-medium text-gray-700">Age Unit</label>
+                    <select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.AgeUnit}>
+                      {#each ageUnits as opt (opt.value)}
+                        <option value={opt.value}>{opt.label}</option>
+                      {/each}
+                    </select>
+                  </div>
+                </div>
+                <div class="grid grid-cols-2 gap-4">
+                  <div class="space-y-1">
+                    <label class="block text-sm font-medium text-gray-700">From</label>
+                    <div class="flex items-center gap-2">
+                      <input
+                        type="number"
+                        class="input input-sm input-bordered flex-1"
+                        bind:value={simpleRefNum.AgeStart}
+                        placeholder="0"
+                        min="0"
+                      />
+                      <span class="text-sm text-gray-600 whitespace-nowrap">{simpleRefNum.AgeUnit}</span>
+                    </div>
+                  </div>
+                  <div class="space-y-1">
+                    <label class="block text-sm font-medium text-gray-700">To</label>
+                    <div class="flex items-center gap-2">
+                      <input
+                        type="number"
+                        class="input input-sm input-bordered flex-1"
+                        bind:value={simpleRefNum.AgeEnd}
+                        placeholder="150"
+                        min="0"
+                      />
+                      <span class="text-sm text-gray-600 whitespace-nowrap">{simpleRefNum.AgeUnit}</span>
+                    </div>
+                  </div>
+                </div>
+                <!-- Quick Presets -->
+                <div class="pt-1">
+                  <span class="text-xs text-gray-500 block mb-1">Quick presets:</span>
+                  <div class="flex flex-wrap gap-1">
+                    <button class="btn btn-xs btn-ghost" onclick={() => { simpleRefNum.AgeStart = ''; simpleRefNum.AgeEnd = ''; }}>All ages</button>
+                    <button class="btn btn-xs btn-ghost" onclick={() => { simpleRefNum.AgeStart = 0; simpleRefNum.AgeEnd = 18; simpleRefNum.AgeUnit = 'years'; }}>0-18 years</button>
+                    <button class="btn btn-xs btn-ghost" onclick={() => { simpleRefNum.AgeStart = 18; simpleRefNum.AgeEnd = 150; simpleRefNum.AgeUnit = 'years'; }}>18+ years</button>
+                  </div>
+                </div>
+              </div>
+            </details>
+          </div>
+
+          <div class="flex justify-end pt-2">
+            <button class="btn btn-sm btn-primary" onclick={addSimpleRefNum}>
+              <Plus class="w-4 h-4 mr-1" />
+              Add Range
+            </button>
+          </div>
+        </div>
+      {:else}
+        <!-- Show existing ranges as list -->
+        <div class="space-y-2">
+          {#each formData.refnum as ref, idx (idx)}
+            <div class="bg-base-100 border border-base-300 rounded-lg p-3 flex justify-between items-center">
+              <div class="flex items-center gap-3 text-sm">
+                <span class="font-mono bg-base-200 px-2 py-1 rounded">
+                  {ref.Low !== null ? ref.Low : '—'} - {ref.High !== null ? ref.High : '—'}
+                </span>
+                <span class="text-gray-600">
+                  {getSexLabel(ref.Sex)}
+                  {#if ref.AgeStart > 0 || ref.AgeEnd < 54750}
+                    · {getAgeDisplay(ref.AgeStart)}-{getAgeDisplay(ref.AgeEnd)}
+                  {/if}
+                </span>
+              </div>
+              <button class="btn btn-ghost btn-xs text-error" onclick={() => removeRefNum(idx)} title="Remove">
+                <Trash2 class="w-3 h-3" />
+              </button>
+            </div>
+          {/each}
+          
+          <!-- Add another simple form -->
+          <div class="border-t pt-3">
+            {#if validationErrors.simpleRefNum}
+              <div class="alert alert-error alert-sm mb-3">
+                <span>{validationErrors.simpleRefNum}</span>
+              </div>
+            {/if}
+            <div class="grid grid-cols-4 gap-2 items-end">
+              <div>
+                <label class="block text-xs text-gray-600 mb-1">Low</label>
+                <input
+                  type="number"
+                  step="0.01"
+                  class="input input-sm input-bordered w-full"
+                  bind:value={simpleRefNum.Low}
+                  placeholder="Low"
+                />
+              </div>
+              <div>
+                <label class="block text-xs text-gray-600 mb-1">High</label>
+                <input
+                  type="number"
+                  step="0.01"
+                  class="input input-sm input-bordered w-full"
+                  bind:value={simpleRefNum.High}
+                  placeholder="High"
+                />
+              </div>
+              <div>
+                <label class="block text-xs text-gray-600 mb-1">Sex</label>
+                <select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.Sex}>
+                  {#each sexOptions as opt (opt.value)}
+                    <option value={opt.value}>{opt.label}</option>
+                  {/each}
+                </select>
+              </div>
+              <button class="btn btn-sm btn-primary" onclick={addSimpleRefNum}>
+                <Plus class="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  <!-- Inline Text Reference Ranges - Simple Form -->
+  {#if showRefTxtSection}
+    <div class="border-t pt-5">
+      <div class="flex justify-between items-center mb-3">
+        <h3 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
+          <Type class="w-4 h-4" />
+          Text Reference
+          {#if formData.reftxt?.length > 0}
+            <span class="badge badge-sm badge-primary">{formData.reftxt.length}</span>
+          {/if}
+        </h3>
+        {#if formData.reftxt?.length > 0}
+          <button class="btn btn-ghost btn-xs text-primary" onclick={switchToRefTxtTab}>
+            <ExternalLink class="w-3 h-3 mr-1" />
+            Full Manager
+          </button>
+        {/if}
+      </div>
+
+      {#if formData.reftxt?.length === 0}
+        <!-- Simple inline form for first entry -->
+        <div class="bg-base-100 border border-base-300 rounded-lg p-4 space-y-4">
+          {#if validationErrors.simpleRefTxt}
+            <div class="alert alert-error alert-sm">
+              <span>{validationErrors.simpleRefTxt}</span>
+            </div>
+          {/if}
+
+          <!-- Primary: Just the text value -->
+          <div class="space-y-1">
+            <label class="block text-sm font-medium text-gray-700">Reference Text</label>
+            <input
+              type="text"
+              class="input input-sm input-bordered w-full"
+              bind:value={simpleRefTxt.RefTxt}
+              placeholder="e.g., Clear, Positive, Negative"
+            />
+          </div>
+
+          <!-- Optional: Sex and Age (collapsed by default) -->
+          <div class="border-t pt-3">
+            <details>
+              <summary class="text-sm text-gray-600 cursor-pointer hover:text-gray-800">
+                Add Sex/Age Specific References (Optional)
+              </summary>
+              <div class="mt-3 space-y-3">
+                <div class="grid grid-cols-2 gap-4">
+                  <div class="space-y-1">
+                    <label class="block text-sm font-medium text-gray-700">Sex</label>
+                    <select class="select select-sm select-bordered w-full" bind:value={simpleRefTxt.Sex}>
+                      {#each sexOptions as opt (opt.value)}
+                        <option value={opt.value}>{opt.label}</option>
+                      {/each}
+                    </select>
+                  </div>
+                  <div class="space-y-1">
+                    <label class="block text-sm font-medium text-gray-700">Age Unit</label>
+                    <select class="select select-sm select-bordered w-full" bind:value={simpleRefTxt.AgeUnit}>
+                      {#each ageUnits as opt (opt.value)}
+                        <option value={opt.value}>{opt.label}</option>
+                      {/each}
+                    </select>
+                  </div>
+                </div>
+                <div class="grid grid-cols-2 gap-4">
+                  <div class="space-y-1">
+                    <label class="block text-sm font-medium text-gray-700">From</label>
+                    <div class="flex items-center gap-2">
+                      <input
+                        type="number"
+                        class="input input-sm input-bordered flex-1"
+                        bind:value={simpleRefTxt.AgeStart}
+                        placeholder="0"
+                        min="0"
+                      />
+                      <span class="text-sm text-gray-600 whitespace-nowrap">{simpleRefTxt.AgeUnit}</span>
+                    </div>
+                  </div>
+                  <div class="space-y-1">
+                    <label class="block text-sm font-medium text-gray-700">To</label>
+                    <div class="flex items-center gap-2">
+                      <input
+                        type="number"
+                        class="input input-sm input-bordered flex-1"
+                        bind:value={simpleRefTxt.AgeEnd}
+                        placeholder="150"
+                        min="0"
+                      />
+                      <span class="text-sm text-gray-600 whitespace-nowrap">{simpleRefTxt.AgeUnit}</span>
+                    </div>
+                  </div>
+                </div>
+                <!-- Quick Presets -->
+                <div class="pt-1">
+                  <span class="text-xs text-gray-500 block mb-1">Quick presets:</span>
+                  <div class="flex flex-wrap gap-1">
+                    <button class="btn btn-xs btn-ghost" onclick={() => { simpleRefTxt.AgeStart = ''; simpleRefTxt.AgeEnd = ''; }}>All ages</button>
+                    <button class="btn btn-xs btn-ghost" onclick={() => { simpleRefTxt.AgeStart = 0; simpleRefTxt.AgeEnd = 18; simpleRefTxt.AgeUnit = 'years'; }}>0-18 years</button>
+                    <button class="btn btn-xs btn-ghost" onclick={() => { simpleRefTxt.AgeStart = 18; simpleRefTxt.AgeEnd = 150; simpleRefTxt.AgeUnit = 'years'; }}>18+ years</button>
+                  </div>
+                </div>
+              </div>
+            </details>
+          </div>
+
+          <div class="flex justify-end pt-2">
+            <button class="btn btn-sm btn-primary" onclick={addSimpleRefTxt}>
+              <Plus class="w-4 h-4 mr-1" />
+              Add Reference
+            </button>
+          </div>
+        </div>
+      {:else}
+        <!-- Show existing ranges as list -->
+        <div class="space-y-2">
+          {#each formData.reftxt as ref, idx (idx)}
+            <div class="bg-base-100 border border-base-300 rounded-lg p-3 flex justify-between items-center">
+              <div class="flex items-center gap-3 text-sm">
+                <span class="font-mono bg-base-200 px-2 py-1 rounded">{ref.RefTxt}</span>
+                <span class="text-gray-600">
+                  {getSexLabel(ref.Sex)}
+                  {#if ref.AgeStart > 0 || ref.AgeEnd < 54750}
+                    · {getAgeDisplay(ref.AgeStart)}-{getAgeDisplay(ref.AgeEnd)}
+                  {/if}
+                </span>
+              </div>
+              <button class="btn btn-ghost btn-xs text-error" onclick={() => removeRefTxt(idx)} title="Remove">
+                <Trash2 class="w-3 h-3" />
+              </button>
+            </div>
+          {/each}
+          
+          <!-- Add another simple form -->
+          <div class="border-t pt-3">
+            {#if validationErrors.simpleRefTxt}
+              <div class="alert alert-error alert-sm mb-3">
+                <span>{validationErrors.simpleRefTxt}</span>
+              </div>
+            {/if}
+            <div class="grid grid-cols-4 gap-2 items-end">
+              <div class="col-span-2">
+                <label class="block text-xs text-gray-600 mb-1">Reference Text</label>
+                <input
+                  type="text"
+                  class="input input-sm input-bordered w-full"
+                  bind:value={simpleRefTxt.RefTxt}
+                  placeholder="Text value"
+                />
+              </div>
+              <div>
+                <label class="block text-xs text-gray-600 mb-1">Sex</label>
+                <select class="select select-sm select-bordered w-full" bind:value={simpleRefTxt.Sex}>
+                  {#each sexOptions as opt (opt.value)}
+                    <option value={opt.value}>{opt.label}</option>
+                  {/each}
+                </select>
+              </div>
+              <button class="btn btn-sm btn-primary" onclick={addSimpleRefTxt}>
+                <Plus class="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
 </div>