feat(organization): add CRUD operations for disciplines and departments

src/lib/api/organization.js

@@ -10,6 +10,29 @@ export async function fetchDiscipline(id) {
   return get(`/api/organization/discipline/${id}`);
 }
 
+export async function createDiscipline(data) {
+  const payload = {
+    DisciplineCode: data.DisciplineCode,
+    DisciplineName: data.DisciplineName,
+    Parent: data.Parent || null,
+  };
+  return post('/api/organization/discipline', payload);
+}
+
+export async function updateDiscipline(data) {
+  const payload = {
+    id: data.DisciplineID,
+    DisciplineCode: data.DisciplineCode,
+    DisciplineName: data.DisciplineName,
+    Parent: data.Parent || null,
+  };
+  return patch('/api/organization/discipline', payload);
+}
+
+export async function deleteDiscipline(id) {
+  return del('/api/organization/discipline', { id });
+}
+
 // Departments
 export async function fetchDepartments(params = {}) {
   const query = new URLSearchParams(params).toString();
@@ -19,3 +42,26 @@ export async function fetchDepartments(params = {}) {
 export async function fetchDepartment(id) {
   return get(`/api/organization/department/${id}`);
 }
+
+export async function createDepartment(data) {
+  const payload = {
+    DepartmentCode: data.DepartmentCode,
+    DepartmentName: data.DepartmentName,
+    DisciplineID: data.DisciplineID,
+  };
+  return post('/api/organization/department', payload);
+}
+
+export async function updateDepartment(data) {
+  const payload = {
+    id: data.DepartmentID,
+    DepartmentCode: data.DepartmentCode,
+    DepartmentName: data.DepartmentName,
+    DisciplineID: data.DisciplineID,
+  };
+  return patch('/api/organization/department', payload);
+}
+
+export async function deleteDepartment(id) {
+  return del('/api/organization/department', { id });
+}

src/lib/components/Sidebar.svelte

@@ -1,8 +1,7 @@
 <script>
-  import {
+import {
     LayoutDashboard,
     Database,
-    FileText,
     Printer,
     Users,
     ClipboardList,
@@ -18,7 +17,10 @@
     Hash,
     Globe,
     ChevronDown,
-    TestTube
+    TestTube,
+    ShieldCheck,
+    FileText,
+    X
   } from 'lucide-svelte';
   import { auth } from '$lib/stores/auth.js';
   import { goto } from '$app/navigation';
@@ -26,20 +28,22 @@
 
   let { isOpen = $bindable(false) } = $props();
 
-  // Collapsible section states - default collapsed
+// Collapsible section states - default collapsed
-  let masterDataExpanded = $state(false);
   let laboratoryExpanded = $state(false);
+  let qualityControlExpanded = $state(false);
+  let masterDataExpanded = $state(false);
   let administrationExpanded = $state(false);
 
-  // Load states from localStorage on mount
+// Load states from localStorage on mount
   $effect(() => {
     if (browser) {
       const savedStates = localStorage.getItem('sidebar_section_states');
       if (savedStates) {
         try {
           const parsed = JSON.parse(savedStates);
-          masterDataExpanded = parsed.masterData ?? false;
           laboratoryExpanded = parsed.laboratory ?? false;
+          qualityControlExpanded = parsed.qualityControl ?? false;
+          masterDataExpanded = parsed.masterData ?? false;
           administrationExpanded = parsed.administration ?? false;
         } catch (e) {
           // Keep defaults if parsing fails
@@ -48,22 +52,24 @@
     }
   });
 
-  // Save states to localStorage when they change
+// Save states to localStorage when they change
   $effect(() => {
     if (browser) {
       localStorage.setItem('sidebar_section_states', JSON.stringify({
-        masterData: masterDataExpanded,
         laboratory: laboratoryExpanded,
+        qualityControl: qualityControlExpanded,
+        masterData: masterDataExpanded,
         administration: administrationExpanded
       }));
     }
   });
 
-  // Close all sections when sidebar collapses
+// Close all sections when sidebar collapses
   $effect(() => {
     if (!isOpen) {
-      masterDataExpanded = false;
       laboratoryExpanded = false;
+      qualityControlExpanded = false;
+      masterDataExpanded = false;
       administrationExpanded = false;
     }
   });
@@ -73,11 +79,30 @@
     isOpen = true;
   }
 
+  // Function to close sidebar (for mobile)
+  function closeSidebar() {
+    isOpen = false;
+  }
+
   function handleLogout() {
     auth.logout();
     goto('/login');
   }
 
+function toggleLaboratory() {
+    if (!isOpen) {
+      expandSidebar();
+    }
+    laboratoryExpanded = !laboratoryExpanded;
+  }
+
+  function toggleQualityControl() {
+    if (!isOpen) {
+      expandSidebar();
+    }
+    qualityControlExpanded = !qualityControlExpanded;
+  }
+
   function toggleMasterData() {
     if (!isOpen) {
       expandSidebar();
@@ -85,13 +110,6 @@
     masterDataExpanded = !masterDataExpanded;
   }
 
-  function toggleLaboratory() {
-    if (!isOpen) {
-      expandSidebar();
-    }
-    laboratoryExpanded = !laboratoryExpanded;
-  }
-
   function toggleAdministration() {
     if (!isOpen) {
       expandSidebar();
@@ -100,18 +118,40 @@
   }
 </script>
 
+<!-- Mobile Overlay Backdrop -->
+{#if isOpen}
+  <div 
+    class="sidebar-backdrop lg:hidden"
+    onclick={closeSidebar}
+    role="button"
+    aria-label="Close sidebar"
+  ></div>
+{/if}
+
 <!-- Sidebar -->
 <div 
   class="sidebar-container fixed lg:sticky left-0 top-0 h-screen max-h-screen z-40 bg-base-200 border-r border-base-300 transition-all duration-300 ease-out"
   class:sidebar-expanded={isOpen}
   class:sidebar-collapsed={!isOpen}
+  class:sidebar-hidden-mobile={!isOpen}
 >
   <div class="h-screen overflow-y-auto flex flex-col sidebar-content" class:expanded={isOpen} class:collapsed={!isOpen}>
+    <!-- Mobile Close Button -->
+    <div class="lg:hidden flex justify-end p-2">
+      <button 
+        onclick={closeSidebar}
+        class="btn btn-sm btn-ghost btn-square"
+        aria-label="Close sidebar"
+      >
+        <X size={20} />
+      </button>
+    </div>
+    
     <div>
-      <!-- Navigation Menu -->
+<!-- Navigation Menu -->
       <ul class="menu w-full gap-1" class:menu-collapsed={!isOpen}>
         {#if isOpen}
-          <li class="menu-title uppercase font-bold text-xs text-secondary/70 mt-2">Main</li>
+          <li class="menu-title uppercase font-bold text-xs text-secondary/70 mt-2">Operations</li>
         {/if}
         
         <!-- Dashboard -->
@@ -129,66 +169,6 @@
           </a>
         </li>
 
-        <!-- Master Data -->
-        <li class="nav-group" class:collapsed={!isOpen}>
-          <button 
-            onclick={toggleMasterData}
-            class="nav-link"
-            class:centered={!isOpen}
-            title={!isOpen ? 'Master Data' : ''}
-          >
-            <Database size={20} class="text-secondary flex-shrink-0" />
-            {#if isOpen}
-              <span class="nav-text">Master Data</span>
-              <ChevronDown size={16} class="chevron {masterDataExpanded ? 'expanded' : ''}" />
-            {/if}
-          </button>
-          
-          {#if isOpen && masterDataExpanded}
-            <ul class="submenu">
-              <li><a href="/master-data/containers" class="submenu-link"><FlaskConical size={16} /> Containers</a></li>
-              <li><a href="/master-data/tests" class="submenu-link"><TestTube size={16} /> Test Definitions</a></li>
-              <li><a href="/master-data/valuesets" class="submenu-link"><List size={16} /> ValueSets</a></li>
-              <li><a href="/master-data/locations" class="submenu-link"><MapPin size={16} /> Locations</a></li>
-              <li><a href="/master-data/contacts" class="submenu-link"><Users size={16} /> Contacts</a></li>
-              <li><a href="/master-data/specialties" class="submenu-link"><Stethoscope size={16} /> Specialties</a></li>
-              <li><a href="/master-data/occupations" class="submenu-link"><Briefcase size={16} /> Occupations</a></li>
-              <li><a href="/master-data/counters" class="submenu-link"><Hash size={16} /> Counters</a></li>
-              <li><a href="/master-data/geography" class="submenu-link"><Globe size={16} /> Geography</a></li>
-            </ul>
-          {/if}
-        </li>
-
-        <!-- Result Entry -->
-        <li>
-          <a 
-            href="/result-entry"
-            class="nav-link"
-            class:centered={!isOpen}
-            title={!isOpen ? 'Result Entry' : ''}
-          >
-            <FileText size={20} class="text-secondary flex-shrink-0" />
-            {#if isOpen}
-              <span class="nav-text">Result Entry</span>
-            {/if}
-          </a>
-        </li>
-
-        <!-- Reports -->
-        <li>
-          <a 
-            href="/reports" 
-            class="nav-link"
-            class:centered={!isOpen}
-            title={!isOpen ? 'Reports' : ''}
-          >
-            <Printer size={20} class="text-secondary flex-shrink-0" />
-            {#if isOpen}
-              <span class="nav-text">Reports</span>
-            {/if}
-          </a>
-        </li>
-
         <!-- Laboratory -->
         <li class="nav-group" class:collapsed={!isOpen}>
           <button 
@@ -209,11 +189,86 @@
               <li><a href="/patients" class="submenu-link"><Users size={16} /> Patients</a></li>
               <li><a href="/orders" class="submenu-link"><ClipboardList size={16} /> Orders</a></li>
               <li><a href="/specimens" class="submenu-link"><FlaskConical size={16} /> Specimens</a></li>
+              <li><a href="/result-entry" class="submenu-link"><FileText size={16} /> Result Entry</a></li>
               <li><a href="/results" class="submenu-link"><CheckCircle2 size={16} /> Results</a></li>
             </ul>
           {/if}
         </li>
 
+        <!-- Quality Control -->
+        <li class="nav-group" class:collapsed={!isOpen}>
+          <button 
+            onclick={toggleQualityControl}
+            class="nav-link"
+            class:centered={!isOpen}
+            title={!isOpen ? 'Quality Control' : ''}
+          >
+            <ShieldCheck size={20} class="text-secondary flex-shrink-0" />
+            {#if isOpen}
+              <span class="nav-text">Quality Control</span>
+              <ChevronDown size={16} class="chevron {qualityControlExpanded ? 'expanded' : ''}" />
+            {/if}
+          </button>
+          
+          {#if isOpen && qualityControlExpanded}
+            <ul class="submenu">
+              <li><a href="/master-data/tests" class="submenu-link"><TestTube size={16} /> Test Definitions</a></li>
+            </ul>
+          {/if}
+        </li>
+
+        {#if isOpen}
+          <li class="menu-title uppercase font-bold text-xs text-secondary/70 mt-4">Analytics</li>
+        {/if}
+
+        <!-- Reports -->
+        <li>
+          <a 
+            href="/reports" 
+            class="nav-link"
+            class:centered={!isOpen}
+            title={!isOpen ? 'Reports' : ''}
+          >
+            <Printer size={20} class="text-secondary flex-shrink-0" />
+            {#if isOpen}
+              <span class="nav-text">Reports</span>
+            {/if}
+          </a>
+        </li>
+
+        {#if isOpen}
+          <li class="menu-title uppercase font-bold text-xs text-secondary/70 mt-4">Configuration</li>
+        {/if}
+
+        <!-- Master Data -->
+        <li class="nav-group" class:collapsed={!isOpen}>
+          <button 
+            onclick={toggleMasterData}
+            class="nav-link"
+            class:centered={!isOpen}
+            title={!isOpen ? 'Master Data' : ''}
+          >
+            <Database size={20} class="text-secondary flex-shrink-0" />
+            {#if isOpen}
+              <span class="nav-text">Master Data</span>
+              <ChevronDown size={16} class="chevron {masterDataExpanded ? 'expanded' : ''}" />
+            {/if}
+          </button>
+          
+          {#if isOpen && masterDataExpanded}
+            <ul class="submenu">
+              <li><a href="/master-data/organization" class="submenu-link"><Building2 size={16} /> Organization</a></li>
+              <li><a href="/master-data/containers" class="submenu-link"><FlaskConical size={16} /> Containers</a></li>
+              <li><a href="/master-data/valuesets" class="submenu-link"><List size={16} /> ValueSets</a></li>
+              <li><a href="/master-data/locations" class="submenu-link"><MapPin size={16} /> Locations</a></li>
+              <li><a href="/master-data/contacts" class="submenu-link"><Users size={16} /> Contacts</a></li>
+              <li><a href="/master-data/specialties" class="submenu-link"><Stethoscope size={16} /> Specialties</a></li>
+              <li><a href="/master-data/occupations" class="submenu-link"><Briefcase size={16} /> Occupations</a></li>
+              <li><a href="/master-data/geography" class="submenu-link"><Globe size={16} /> Geography</a></li>
+            </ul>
+          {/if}
+        </li>
+
         <!-- Administration -->
         <li class="nav-group" class:collapsed={!isOpen}>
           <button 
@@ -233,6 +288,7 @@
             <ul class="submenu">
               <li><a href="/organization" class="submenu-link"><Building2 size={16} /> Organization</a></li>
               <li><a href="/users" class="submenu-link"><UserCircle size={16} /> Users</a></li>
+              <li><a href="/master-data/counters" class="submenu-link"><Hash size={16} /> Counters</a></li>
             </ul>
           {/if}
         </li>
@@ -262,7 +318,7 @@
 <style>
   .sidebar-container {
     overflow: visible;
-    transition: width 300ms ease-out;
+    transition: width 300ms ease-out, transform 300ms ease-out;
   }
 
   .sidebar-expanded {
@@ -273,6 +329,32 @@
     width: 3.5rem;
   }
 
+  /* Mobile: Hide sidebar completely when collapsed */
+  @media (max-width: 1023px) {
+    .sidebar-hidden-mobile {
+      width: 0;
+      transform: translateX(-100%);
+      opacity: 0;
+      pointer-events: none;
+    }
+    
+    .sidebar-expanded {
+      width: 16rem;
+      transform: translateX(0);
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  /* Mobile backdrop overlay */
+  .sidebar-backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 30;
+    cursor: pointer;
+  }
+
   .sidebar-content {
     transition: width 300ms ease-out;
   }

src/routes/(app)/+layout.svelte

@@ -2,11 +2,13 @@
   import { goto } from '$app/navigation';
   import { auth } from '$lib/stores/auth.js';
   import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
   import Sidebar from '$lib/components/Sidebar.svelte';
   import { Menu, BarChart3, User, Settings, LogOut } from 'lucide-svelte';
 
   let { children } = $props();
   let checking = $state(true);
+  // Start closed on mobile, open on desktop
   let sidebarOpen = $state(true);
 
   onMount(() => {
@@ -16,6 +18,11 @@
     } else {
       checking = false;
     }
+
+    // On mobile, start with sidebar closed
+    if (browser && window.innerWidth < 1024) {
+      sidebarOpen = false;
+    }
   });
 
   function toggleSidebar() {
@@ -35,7 +42,7 @@
 {:else}
   <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-emerald-50/20 flex">
     <!-- Sidebar - Fixed on mobile, sticky on desktop -->
-    <div class="lg:sticky lg:top-0 lg:h-screen lg:self-start flex-shrink-0">
+    <div class="lg:sticky lg:top-0 lg:h-screen lg:self-start flex-shrink-0 overflow-visible w-0 lg:w-auto">
       <Sidebar bind:isOpen={sidebarOpen} />
     </div>
     

src/routes/(app)/master-data/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { 
+import { 
     List, 
     MapPin, 
     Users, 
@@ -9,10 +9,18 @@
     Globe,
     ChevronRight,
     FlaskConical,
-    TestTube
+    TestTube,
+    Building2
   } from 'lucide-svelte';
 
-  const modules = [
+const modules = [
+    {
+      title: 'Organization',
+      description: 'Manage disciplines and departments structure',
+      icon: Building2,
+      href: '/master-data/organization',
+      color: 'bg-indigo-500',
+    },
     {
       title: 'Containers',
       description: 'Manage specimen containers and tubes',

src/routes/(app)/master-data/organization/+page.svelte

@@ -0,0 +1,674 @@
+<script>
+  import { onMount } from 'svelte';
+  import {
+    fetchDisciplines,
+    createDiscipline,
+    updateDiscipline,
+    deleteDiscipline,
+    fetchDepartments,
+    createDepartment,
+    updateDepartment,
+    deleteDepartment,
+  } from '$lib/api/organization.js';
+  import { success as toastSuccess, error as toastError } from '$lib/utils/toast.js';
+  import DataTable from '$lib/components/DataTable.svelte';
+  import Modal from '$lib/components/Modal.svelte';
+  import { Plus, Edit2, Trash2, ArrowLeft, Search, Building2, Users } from 'lucide-svelte';
+
+  // Active tab state
+  let activeTab = $state('disciplines');
+
+  // Loading states
+  let loadingDisciplines = $state(false);
+  let loadingDepartments = $state(false);
+
+  // Data states
+  let disciplines = $state([]);
+  let departments = $state([]);
+
+  // Modal states - Disciplines
+  let disciplineModalOpen = $state(false);
+  let disciplineModalMode = $state('create');
+  let disciplineFormData = $state({
+    DisciplineID: null,
+    DisciplineCode: '',
+    DisciplineName: '',
+    Parent: null,
+  });
+  let savingDiscipline = $state(false);
+  let deleteDisciplineConfirmOpen = $state(false);
+  let deleteDisciplineItem = $state(null);
+  let deletingDiscipline = $state(false);
+
+  // Modal states - Departments
+  let departmentModalOpen = $state(false);
+  let departmentModalMode = $state('create');
+  let departmentFormData = $state({
+    DepartmentID: null,
+    DepartmentCode: '',
+    DepartmentName: '',
+    DisciplineID: null,
+  });
+  let savingDepartment = $state(false);
+  let deleteDepartmentConfirmOpen = $state(false);
+  let deleteDepartmentItem = $state(null);
+  let deletingDepartment = $state(false);
+
+  // Search states
+  let disciplineSearch = $state('');
+  let departmentSearch = $state('');
+
+  // Table columns
+  const disciplineColumns = [
+    { key: 'DisciplineCode', label: 'Code', class: 'font-medium w-32' },
+    { key: 'DisciplineName', label: 'Name' },
+    { key: 'ParentName', label: 'Parent Discipline', class: 'w-48' },
+    { key: 'actions', label: 'Actions', class: 'w-24 text-center' },
+  ];
+
+  const departmentColumns = [
+    { key: 'DepartmentCode', label: 'Code', class: 'font-medium w-32' },
+    { key: 'DepartmentName', label: 'Name' },
+    { key: 'DisciplineName', label: 'Discipline', class: 'w-48' },
+    { key: 'actions', label: 'Actions', class: 'w-24 text-center' },
+  ];
+
+  // Derived data with computed fields
+  let disciplinesWithParentName = $derived(
+    disciplines.map((d) => ({
+      ...d,
+      ParentName: d.Parent
+        ? disciplines.find((p) => p.DisciplineID === d.Parent)?.DisciplineName || '-'
+        : '-',
+    }))
+  );
+
+  let departmentsWithDisciplineName = $derived(
+    departments.map((d) => ({
+      ...d,
+      DisciplineName:
+        disciplines.find((disc) => disc.DisciplineID === d.DisciplineID)?.DisciplineName || '-',
+    }))
+  );
+
+  // Filtered data
+  let filteredDisciplines = $derived(
+    disciplineSearch.trim()
+      ? disciplinesWithParentName.filter(
+          (d) =>
+            d.DisciplineCode?.toLowerCase().includes(disciplineSearch.toLowerCase()) ||
+            d.DisciplineName?.toLowerCase().includes(disciplineSearch.toLowerCase())
+        )
+      : disciplinesWithParentName
+  );
+
+  let filteredDepartments = $derived(
+    departmentSearch.trim()
+      ? departmentsWithDisciplineName.filter(
+          (d) =>
+            d.DepartmentCode?.toLowerCase().includes(departmentSearch.toLowerCase()) ||
+            d.DepartmentName?.toLowerCase().includes(departmentSearch.toLowerCase())
+        )
+      : departmentsWithDisciplineName
+  );
+
+  onMount(async () => {
+    await loadDisciplines();
+    await loadDepartments();
+  });
+
+  async function loadDisciplines() {
+    loadingDisciplines = true;
+    try {
+      const response = await fetchDisciplines();
+      disciplines = Array.isArray(response.data) ? response.data : [];
+    } catch (err) {
+      toastError(err.message || 'Failed to load disciplines');
+      disciplines = [];
+    } finally {
+      loadingDisciplines = false;
+    }
+  }
+
+  async function loadDepartments() {
+    loadingDepartments = true;
+    try {
+      const response = await fetchDepartments();
+      departments = Array.isArray(response.data) ? response.data : [];
+    } catch (err) {
+      toastError(err.message || 'Failed to load departments');
+      departments = [];
+    } finally {
+      loadingDepartments = false;
+    }
+  }
+
+  // Discipline handlers
+  function openCreateDisciplineModal() {
+    disciplineModalMode = 'create';
+    disciplineFormData = {
+      DisciplineID: null,
+      DisciplineCode: '',
+      DisciplineName: '',
+      Parent: null,
+    };
+    disciplineModalOpen = true;
+  }
+
+  function openEditDisciplineModal(row) {
+    disciplineModalMode = 'edit';
+    disciplineFormData = {
+      DisciplineID: row.DisciplineID,
+      DisciplineCode: row.DisciplineCode,
+      DisciplineName: row.DisciplineName,
+      Parent: row.Parent || null,
+    };
+    disciplineModalOpen = true;
+  }
+
+  async function handleSaveDiscipline() {
+    savingDiscipline = true;
+    try {
+      if (disciplineModalMode === 'create') {
+        await createDiscipline(disciplineFormData);
+        toastSuccess('Discipline created successfully');
+      } else {
+        await updateDiscipline(disciplineFormData);
+        toastSuccess('Discipline updated successfully');
+      }
+      disciplineModalOpen = false;
+      await loadDisciplines();
+    } catch (err) {
+      toastError(err.message || 'Failed to save discipline');
+    } finally {
+      savingDiscipline = false;
+    }
+  }
+
+  function confirmDeleteDiscipline(row) {
+    deleteDisciplineItem = row;
+    deleteDisciplineConfirmOpen = true;
+  }
+
+  async function handleDeleteDiscipline() {
+    deletingDiscipline = true;
+    try {
+      await deleteDiscipline(deleteDisciplineItem.DisciplineID);
+      toastSuccess('Discipline deleted successfully');
+      deleteDisciplineConfirmOpen = false;
+      deleteDisciplineItem = null;
+      await loadDisciplines();
+    } catch (err) {
+      toastError(err.message || 'Failed to delete discipline');
+    } finally {
+      deletingDiscipline = false;
+    }
+  }
+
+  // Department handlers
+  function openCreateDepartmentModal() {
+    departmentModalMode = 'create';
+    departmentFormData = {
+      DepartmentID: null,
+      DepartmentCode: '',
+      DepartmentName: '',
+      DisciplineID: null,
+    };
+    departmentModalOpen = true;
+  }
+
+  function openEditDepartmentModal(row) {
+    departmentModalMode = 'edit';
+    departmentFormData = {
+      DepartmentID: row.DepartmentID,
+      DepartmentCode: row.DepartmentCode,
+      DepartmentName: row.DepartmentName,
+      DisciplineID: row.DisciplineID,
+    };
+    departmentModalOpen = true;
+  }
+
+  async function handleSaveDepartment() {
+    savingDepartment = true;
+    try {
+      if (departmentModalMode === 'create') {
+        await createDepartment(departmentFormData);
+        toastSuccess('Department created successfully');
+      } else {
+        await updateDepartment(departmentFormData);
+        toastSuccess('Department updated successfully');
+      }
+      departmentModalOpen = false;
+      await loadDepartments();
+    } catch (err) {
+      toastError(err.message || 'Failed to save department');
+    } finally {
+      savingDepartment = false;
+    }
+  }
+
+  function confirmDeleteDepartment(row) {
+    deleteDepartmentItem = row;
+    deleteDepartmentConfirmOpen = true;
+  }
+
+  async function handleDeleteDepartment() {
+    deletingDepartment = true;
+    try {
+      await deleteDepartment(deleteDepartmentItem.DepartmentID);
+      toastSuccess('Department deleted successfully');
+      deleteDepartmentConfirmOpen = false;
+      deleteDepartmentItem = null;
+      await loadDepartments();
+    } catch (err) {
+      toastError(err.message || 'Failed to delete department');
+    } finally {
+      deletingDepartment = false;
+    }
+  }
+</script>
+
+<div class="p-4">
+  <!-- Header -->
+  <div class="flex items-center gap-4 mb-6">
+    <a href="/master-data" class="btn btn-ghost btn-circle">
+      <ArrowLeft class="w-5 h-5" />
+    </a>
+    <div class="flex-1">
+      <h1 class="text-xl font-bold text-gray-800">Organization Structure</h1>
+      <p class="text-sm text-gray-600">Manage disciplines and departments</p>
+    </div>
+  </div>
+
+  <!-- Tabs -->
+  <div class="tabs tabs-boxed bg-base-200 mb-4">
+    <button
+      class="tab gap-2 {activeTab === 'disciplines' ? 'tab-active' : ''}"
+      onclick={() => (activeTab = 'disciplines')}
+    >
+      <Building2 class="w-4 h-4" />
+      Disciplines
+      <span class="badge badge-sm">{disciplines.length}</span>
+    </button>
+    <button
+      class="tab gap-2 {activeTab === 'departments' ? 'tab-active' : ''}"
+      onclick={() => (activeTab = 'departments')}
+    >
+      <Users class="w-4 h-4" />
+      Departments
+      <span class="badge badge-sm">{departments.length}</span>
+    </button>
+  </div>
+
+  <!-- Disciplines Tab -->
+  {#if activeTab === 'disciplines'}
+    <div class="space-y-4">
+      <!-- Search and Add -->
+      <div class="flex flex-col sm:flex-row gap-4">
+        <div class="flex-1 relative">
+          <Search class="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+          <input
+            type="text"
+            placeholder="Search disciplines by code or name..."
+            class="input input-bordered w-full pl-10"
+            bind:value={disciplineSearch}
+          />
+        </div>
+        <button class="btn btn-primary" onclick={openCreateDisciplineModal}>
+          <Plus class="w-4 h-4 mr-2" />
+          Add Discipline
+        </button>
+      </div>
+
+      <!-- Disciplines Table -->
+      <div class="bg-base-100 rounded-lg shadow border border-base-200">
+        <DataTable
+          columns={disciplineColumns}
+          data={filteredDisciplines}
+          loading={loadingDisciplines}
+          emptyMessage="No disciplines found"
+          hover={true}
+          bordered={false}
+        >
+          {#snippet cell({ column, row })}
+            {#if column.key === 'actions'}
+              <div class="flex justify-center gap-2">
+                <button
+                  class="btn btn-sm btn-ghost"
+                  onclick={() => openEditDisciplineModal(row)}
+                  title="Edit discipline"
+                >
+                  <Edit2 class="w-4 h-4" />
+                </button>
+                <button
+                  class="btn btn-sm btn-ghost text-error"
+                  onclick={() => confirmDeleteDiscipline(row)}
+                  title="Delete discipline"
+                >
+                  <Trash2 class="w-4 h-4" />
+                </button>
+              </div>
+            {:else}
+              {row[column.key] || '-'}
+            {/if}
+          {/snippet}
+        </DataTable>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Departments Tab -->
+  {#if activeTab === 'departments'}
+    <div class="space-y-4">
+      <!-- Search and Add -->
+      <div class="flex flex-col sm:flex-row gap-4">
+        <div class="flex-1 relative">
+          <Search class="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+          <input
+            type="text"
+            placeholder="Search departments by code or name..."
+            class="input input-bordered w-full pl-10"
+            bind:value={departmentSearch}
+          />
+        </div>
+        <button class="btn btn-primary" onclick={openCreateDepartmentModal}>
+          <Plus class="w-4 h-4 mr-2" />
+          Add Department
+        </button>
+      </div>
+
+      <!-- Departments Table -->
+      <div class="bg-base-100 rounded-lg shadow border border-base-200">
+        <DataTable
+          columns={departmentColumns}
+          data={filteredDepartments}
+          loading={loadingDepartments}
+          emptyMessage="No departments found"
+          hover={true}
+          bordered={false}
+        >
+          {#snippet cell({ column, row })}
+            {#if column.key === 'actions'}
+              <div class="flex justify-center gap-2">
+                <button
+                  class="btn btn-sm btn-ghost"
+                  onclick={() => openEditDepartmentModal(row)}
+                  title="Edit department"
+                >
+                  <Edit2 class="w-4 h-4" />
+                </button>
+                <button
+                  class="btn btn-sm btn-ghost text-error"
+                  onclick={() => confirmDeleteDepartment(row)}
+                  title="Delete department"
+                >
+                  <Trash2 class="w-4 h-4" />
+                </button>
+              </div>
+            {:else}
+              {row[column.key] || '-'}
+            {/if}
+          {/snippet}
+        </DataTable>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- Discipline Modal -->
+<Modal
+  bind:open={disciplineModalOpen}
+  title={disciplineModalMode === 'create' ? 'Add Discipline' : 'Edit Discipline'}
+  size="md"
+>
+  <form class="space-y-4" onsubmit={(e) => { e.preventDefault(); handleSaveDiscipline(); }}>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="form-control">
+        <label class="label" for="disciplineCode">
+          <span class="label-text text-sm font-medium">Discipline Code</span>
+          <span class="label-text-alt text-xs text-error">*</span>
+        </label>
+        <input
+          id="disciplineCode"
+          type="text"
+          class="input input-sm input-bordered w-full"
+          bind:value={disciplineFormData.DisciplineCode}
+          placeholder="e.g., HEM, CHEM"
+          required
+        />
+        <span class="label-text-alt text-xs text-gray-500">Unique code for this discipline</span>
+      </div>
+      <div class="form-control">
+        <label class="label" for="disciplineName">
+          <span class="label-text text-sm font-medium">Discipline Name</span>
+          <span class="label-text-alt text-xs text-error">*</span>
+        </label>
+        <input
+          id="disciplineName"
+          type="text"
+          class="input input-sm input-bordered w-full"
+          bind:value={disciplineFormData.DisciplineName}
+          placeholder="e.g., Hematology"
+          required
+        />
+        <span class="label-text-alt text-xs text-gray-500">Display name</span>
+      </div>
+    </div>
+    <div class="form-control">
+      <label class="label" for="parentDiscipline">
+        <span class="label-text text-sm font-medium">Parent Discipline</span>
+      </label>
+      <select
+        id="parentDiscipline"
+        class="select select-sm select-bordered w-full"
+        bind:value={disciplineFormData.Parent}
+      >
+        <option value={null}>None (Top-level discipline)</option>
+        {#each disciplines.filter((d) => d.DisciplineID !== disciplineFormData.DisciplineID) as discipline}
+          <option value={discipline.DisciplineID}>{discipline.DisciplineName}</option>
+        {/each}
+      </select>
+      <span class="label-text-alt text-xs text-gray-500">Optional parent for hierarchical structure</span>
+    </div>
+  </form>
+  {#snippet footer()}
+    <button
+      class="btn btn-ghost"
+      onclick={() => (disciplineModalOpen = false)}
+      type="button"
+      disabled={savingDiscipline}
+    >
+      Cancel
+    </button>
+    <button
+      class="btn btn-primary"
+      onclick={handleSaveDiscipline}
+      disabled={savingDiscipline}
+      type="button"
+    >
+      {#if savingDiscipline}
+        <span class="loading loading-spinner loading-sm mr-2"></span>
+      {/if}
+      {savingDiscipline ? 'Saving...' : 'Save'}
+    </button>
+  {/snippet}
+</Modal>
+
+<!-- Department Modal -->
+<Modal
+  bind:open={departmentModalOpen}
+  title={departmentModalMode === 'create' ? 'Add Department' : 'Edit Department'}
+  size="md"
+>
+  <form class="space-y-4" onsubmit={(e) => { e.preventDefault(); handleSaveDepartment(); }}>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="form-control">
+        <label class="label" for="departmentCode">
+          <span class="label-text text-sm font-medium">Department Code</span>
+          <span class="label-text-alt text-xs text-error">*</span>
+        </label>
+        <input
+          id="departmentCode"
+          type="text"
+          class="input input-sm input-bordered w-full"
+          bind:value={departmentFormData.DepartmentCode}
+          placeholder="e.g., HEM-OUT"
+          required
+        />
+        <span class="label-text-alt text-xs text-gray-500">Unique code for this department</span>
+      </div>
+      <div class="form-control">
+        <label class="label" for="departmentName">
+          <span class="label-text text-sm font-medium">Department Name</span>
+          <span class="label-text-alt text-xs text-error">*</span>
+        </label>
+        <input
+          id="departmentName"
+          type="text"
+          class="input input-sm input-bordered w-full"
+          bind:value={departmentFormData.DepartmentName}
+          placeholder="e.g., Outpatient Hematology"
+          required
+        />
+        <span class="label-text-alt text-xs text-gray-500">Display name</span>
+      </div>
+    </div>
+    <div class="form-control">
+      <label class="label" for="discipline">
+        <span class="label-text text-sm font-medium">Discipline</span>
+        <span class="label-text-alt text-xs text-error">*</span>
+      </label>
+      <select
+        id="discipline"
+        class="select select-sm select-bordered w-full"
+        bind:value={departmentFormData.DisciplineID}
+        required
+      >
+        <option value={null}>Select discipline...</option>
+        {#each disciplines as discipline}
+          <option value={discipline.DisciplineID}>{discipline.DisciplineName}</option>
+        {/each}
+      </select>
+      <span class="label-text-alt text-xs text-gray-500">The discipline this department belongs to</span>
+    </div>
+  </form>
+  {#snippet footer()}
+    <button
+      class="btn btn-ghost"
+      onclick={() => (departmentModalOpen = false)}
+      type="button"
+      disabled={savingDepartment}
+    >
+      Cancel
+    </button>
+    <button
+      class="btn btn-primary"
+      onclick={handleSaveDepartment}
+      disabled={savingDepartment}
+      type="button"
+    >
+      {#if savingDepartment}
+        <span class="loading loading-spinner loading-sm mr-2"></span>
+      {/if}
+      {savingDepartment ? 'Saving...' : 'Save'}
+    </button>
+  {/snippet}
+</Modal>
+
+<!-- Delete Discipline Confirmation -->
+<Modal bind:open={deleteDisciplineConfirmOpen} title="Confirm Delete Discipline" size="sm">
+  <div class="py-2">
+    <p class="text-base-content/80">Are you sure you want to delete this discipline?</p>
+    <div class="bg-base-200 rounded-lg p-3 mt-3">
+      <p class="text-sm">
+        <span class="text-gray-500">Code:</span>
+        <strong class="text-base-content font-mono">{deleteDisciplineItem?.DisciplineCode}</strong>
+      </p>
+      <p class="text-sm mt-1">
+        <span class="text-gray-500">Name:</span>
+        <strong class="text-base-content">{deleteDisciplineItem?.DisciplineName}</strong>
+      </p>
+    </div>
+    <p class="text-sm text-error mt-3 flex items-center gap-2">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+        />
+      </svg>
+      This action cannot be undone.
+    </p>
+  </div>
+  {#snippet footer()}
+    <button
+      class="btn btn-ghost"
+      onclick={() => (deleteDisciplineConfirmOpen = false)}
+      type="button"
+      disabled={deletingDiscipline}
+    >
+      Cancel
+    </button>
+    <button
+      class="btn btn-error"
+      onclick={handleDeleteDiscipline}
+      disabled={deletingDiscipline}
+      type="button"
+    >
+      {#if deletingDiscipline}
+        <span class="loading loading-spinner loading-sm mr-2"></span>
+      {/if}
+      {deletingDiscipline ? 'Deleting...' : 'Delete'}
+    </button>
+  {/snippet}
+</Modal>
+
+<!-- Delete Department Confirmation -->
+<Modal bind:open={deleteDepartmentConfirmOpen} title="Confirm Delete Department" size="sm">
+  <div class="py-2">
+    <p class="text-base-content/80">Are you sure you want to delete this department?</p>
+    <div class="bg-base-200 rounded-lg p-3 mt-3">
+      <p class="text-sm">
+        <span class="text-gray-500">Code:</span>
+        <strong class="text-base-content font-mono">{deleteDepartmentItem?.DepartmentCode}</strong>
+      </p>
+      <p class="text-sm mt-1">
+        <span class="text-gray-500">Name:</span>
+        <strong class="text-base-content">{deleteDepartmentItem?.DepartmentName}</strong>
+      </p>
+    </div>
+    <p class="text-sm text-error mt-3 flex items-center gap-2">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+        />
+      </svg>
+      This action cannot be undone.
+    </p>
+  </div>
+  {#snippet footer()}
+    <button
+      class="btn btn-ghost"
+      onclick={() => (deleteDepartmentConfirmOpen = false)}
+      type="button"
+      disabled={deletingDepartment}
+    >
+      Cancel
+    </button>
+    <button
+      class="btn btn-error"
+      onclick={handleDeleteDepartment}
+      disabled={deletingDepartment}
+      type="button"
+    >
+      {#if deletingDepartment}
+        <span class="loading loading-spinner loading-sm mr-2"></span>
+      {/if}
+      {deletingDepartment ? 'Deleting...' : 'Delete'}
+    </button>
+  {/snippet}
+</Modal>

src/routes/(app)/master-data/tests/test-modal/TestFormModal.svelte

@@ -38,9 +38,9 @@
   ];
 
   const visibleTabs = $derived.by(() => {
-    const type = formData.TestType;
+    const type = formData?.TestType;
-    const resultType = formData.details?.ResultType;
+    const resultType = formData?.details?.ResultType;
-    const refType = formData.details?.RefType;
+    const refType = formData?.details?.RefType;
     
     return tabConfig.filter(tab => {
       if (tab.id === 'basic' || tab.id === 'mappings') return true;
@@ -186,6 +186,12 @@
         testmap: test.testmap || []
       };
       
+      // Set defaults for CALC tests
+      if (formData.TestType === 'CALC') {
+        formData.details.ResultType = 'NMRIC';
+        formData.details.RefType = 'RANGE';
+      }
+      
       lastLoadedTestId = testId;
       currentTab = 'basic';
       isDirty = false;
@@ -345,6 +351,17 @@
             bind:isDirty
             onSwitchTab={handleTabChange}
           />
+        {:else if currentTab === 'calc'}
+          <CalcDetailsTab
+            bind:formData
+            bind:isDirty
+          />
+        {:else if currentTab === 'group'}
+          <GroupMembersTab
+            bind:formData
+            {tests}
+            bind:isDirty
+          />
         {:else if currentTab === 'calc'}
           <CalcDetailsTab
             bind:formData

src/routes/(app)/master-data/tests/test-modal/tabs/CalcDetailsTab.svelte

@@ -1,13 +1,5 @@
 <script>
-  let { formData = $bindable(), disciplines = [], departments = [], isDirty = $bindable(false) } = $props();
+  let { formData = $bindable(), isDirty = $bindable(false) } = $props();
-
-  const disciplineOptions = $derived(disciplines.map(d => ({ value: d.DisciplineID, label: d.DisciplineName })));
-  const departmentOptions = $derived(departments.map(d => ({ value: d.DepartmentID, label: d.DepartmentName })));
-
-  const refTypeOptions = [
-    { value: 'RANGE', label: 'Range' },
-    { value: 'THOLD', label: 'Threshold' }
-  ];
 
   function handleFieldChange() {
     isDirty = true;
@@ -55,15 +47,15 @@
           id="formulaCode"
           class="textarea textarea-sm textarea-bordered w-full font-mono text-sm"
           bind:value={formData.details.FormulaCode}
-          placeholder="e.g., {HGB} + {MCV} + {MCHC}"
+          placeholder="e.g., {'{HGB}'} + {'{MCV}'} + {'{MCHC}'}"
           rows="3"
           oninput={handleFieldChange}
           required
         ></textarea>
         <span class="text-xs">
-          {#if formData.details.FormulaCode && validateFormula(formData.details.FormulaCode)}
+          {#if formData?.details?.FormulaCode && validateFormula(formData.details.FormulaCode)}
             <span class="text-success">Valid formula syntax</span>
-          {:else if formData.details.FormulaCode}
+          {:else if formData?.details?.FormulaCode}
             <span class="text-warning">No test references found</span>
           {:else}
             <span class="text-gray-500">Enter formula with test code references</span>
@@ -72,126 +64,4 @@
       </div>
     </div>
   </div>
-
-  <!-- Categorization -->
-  <div>
-    <h3 class="text-sm font-semibold text-gray-700 mb-3">Categorization</h3>
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-      <div class="space-y-1">
-        <label for="calcDiscipline" class="block text-sm font-medium text-gray-700">Discipline</label>
-        <select
-          id="calcDiscipline"
-          class="select select-sm select-bordered w-full"
-          bind:value={formData.details.DisciplineID}
-          onchange={handleFieldChange}
-        >
-          <option value="">Select discipline...</option>
-          {#each disciplineOptions as opt (opt.value)}
-            <option value={opt.value}>{opt.label}</option>
-          {/each}
-        </select>
-      </div>
-
-      <div class="space-y-1">
-        <label for="calcDepartment" class="block text-sm font-medium text-gray-700">Department</label>
-        <select
-          id="calcDepartment"
-          class="select select-sm select-bordered w-full"
-          bind:value={formData.details.DepartmentID}
-          onchange={handleFieldChange}
-        >
-          <option value="">Select department...</option>
-          {#each departmentOptions as opt (opt.value)}
-            <option value={opt.value}>{opt.label}</option>
-          {/each}
-        </select>
-      </div>
-    </div>
-  </div>
-
-  <!-- Method -->
-  <div>
-    <h3 class="text-sm font-semibold text-gray-700 mb-3">Method</h3>
-    <div class="space-y-1">
-      <label for="calcMethod" class="block text-sm font-medium text-gray-700">Calculation Method</label>
-      <input
-        id="calcMethod"
-        type="text"
-        class="input input-sm input-bordered w-full"
-        bind:value={formData.details.Method}
-        placeholder="e.g., Calculated from components"
-        oninput={handleFieldChange}
-      />
-    </div>
-  </div>
-
-  <!-- Result Configuration -->
-  <div>
-    <h3 class="text-sm font-semibold text-gray-700 mb-3">Result Configuration</h3>
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-      <div class="space-y-1">
-        <label for="calcUnit1" class="block text-sm font-medium text-gray-700">Unit 1</label>
-        <input
-          id="calcUnit1"
-          type="text"
-          class="input input-sm input-bordered w-full"
-          bind:value={formData.details.Unit1}
-          placeholder="e.g., g/dL"
-          oninput={handleFieldChange}
-        />
-      </div>
-
-      <div class="space-y-1">
-        <label for="calcFactor" class="block text-sm font-medium text-gray-700">Factor</label>
-        <input
-          id="calcFactor"
-          type="number"
-          step="0.01"
-          class="input input-sm input-bordered w-full"
-          bind:value={formData.details.Factor}
-          placeholder="1.0"
-          oninput={handleFieldChange}
-        />
-      </div>
-
-      <div class="space-y-1">
-        <label for="calcUnit2" class="block text-sm font-medium text-gray-700">Unit 2</label>
-        <input
-          id="calcUnit2"
-          type="text"
-          class="input input-sm input-bordered w-full"
-          bind:value={formData.details.Unit2}
-          placeholder="e.g., g/L"
-          oninput={handleFieldChange}
-        />
-      </div>
-
-      <div class="space-y-1">
-        <label for="calcDecimal" class="block text-sm font-medium text-gray-700">Decimal</label>
-        <input
-          id="calcDecimal"
-          type="number"
-          class="input input-sm input-bordered w-full"
-          bind:value={formData.details.Decimal}
-          min="0"
-          max="6"
-          oninput={handleFieldChange}
-        />
-      </div>
-    </div>
-
-    <div class="mt-4 space-y-1">
-      <label for="calcRefType" class="block text-sm font-medium text-gray-700">Reference Type</label>
-      <select
-        id="calcRefType"
-        class="select select-sm select-bordered w-full md:w-1/2"
-        bind:value={formData.details.RefType}
-        onchange={handleFieldChange}
-      >
-        {#each refTypeOptions as opt (opt.value)}
-          <option value={opt.value}>{opt.label}</option>
-        {/each}
-      </select>
-    </div>
-  </div>
 </div>

src/routes/(app)/master-data/tests/test-modal/tabs/RefNumTab.svelte

@@ -257,71 +257,75 @@
 
         <!-- Optional: Range Type, Sex and Age (collapsed by default) -->
         <div class="border-t pt-3">
-          <details>
+          <details class="w-full">
             <summary class="text-sm text-gray-600 cursor-pointer hover:text-gray-800">
-              Advanced Options (Range Type, Sex, Age)
+              Advanced Options
             </summary>
-            <div class="mt-3 space-y-3">
+            <div class="mt-2 flex flex-wrap items-end gap-2 justify-between">
-              <div class="grid grid-cols-3 gap-4">
+              <div class="flex flex-wrap items-end gap-2">
-                <div class="space-y-1">
+                <div class="flex flex-col">
-                  <label class="block text-sm font-medium text-gray-700">Range Type</label>
+                  <label class="text-xs text-gray-600 mb-0.5">Type</label>
-                  <select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.RangeType}>
+                  <select class="select select-xs select-bordered w-20" bind:value={simpleRefNum.RangeType}>
                     <option value="RANGE">Range</option>
-                    <option value="THOLD">Threshold</option>
+                    <option value="THOLD">Thold</option>
                   </select>
                 </div>
-                <div class="space-y-1">
+                <div class="flex flex-col">
-                  <label class="block text-sm font-medium text-gray-700">Sex</label>
+                  <label class="text-xs text-gray-600 mb-0.5">Sex</label>
-                  <select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.Sex}>
+                  <select class="select select-xs select-bordered w-16" 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">
+                <div class="flex flex-col">
-                  <label class="block text-sm font-medium text-gray-700">Age Unit</label>
+                  <label class="text-xs text-gray-600 mb-0.5">Age Unit</label>
-                  <select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.AgeUnit}>
+                  <select class="select select-xs select-bordered w-16" bind:value={simpleRefNum.AgeUnit}>
                     {#each ageUnits as opt (opt.value)}
+                      <option value={opt.value}>{opt.label.substring(0,1)}</option>
+                    {/each}
+                  </select>
+                </div>
+                <div class="flex flex-col">
+                  <label class="text-xs text-gray-600 mb-0.5">From</label>
+                  <input
+                    type="number"
+                    class="input input-xs input-bordered w-16"
+                    bind:value={simpleRefNum.AgeStart}
+                    min="0"
+                  />
+                </div>
+                <div class="flex flex-col">
+                  <label class="text-xs text-gray-600 mb-0.5">To</label>
+                  <input
+                    type="number"
+                    class="input input-xs input-bordered w-16"
+                    bind:value={simpleRefNum.AgeEnd}
+                    min="0"
+                  />
+                </div>
+              </div>
+              <!-- Low/High signs for THOLD -->
+              {#if simpleRefNum.RangeType === 'THOLD'}
+                <div class="flex flex-wrap items-end gap-2">
+                  <div class="flex flex-col">
+                    <label class="text-xs text-gray-600 mb-0.5">Low Sign</label>
+                    <select class="select select-xs select-bordered w-14" bind:value={simpleRefNum.LowSign}>
+                      {#each signOptions as opt (opt.value)}
+                        <option value={opt.value}>{opt.label}</option>
+                      {/each}
+                    </select>
+                  </div>
+                  <div class="flex flex-col">
+                    <label class="text-xs text-gray-600 mb-0.5">High Sign</label>
+                    <select class="select select-xs select-bordered w-14" bind:value={simpleRefNum.HighSign}>
+                      {#each signOptions as opt (opt.value)}
                         <option value={opt.value}>{opt.label}</option>
                       {/each}
                     </select>
                   </div>
                 </div>
-              <div class="grid grid-cols-2 gap-4">
+              {/if}
-                <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>
@@ -447,47 +451,70 @@
           </div>
           
           <!-- Optional: Range Type and Age -->
-          <details class="mt-2">
+          <details class="mt-2 w-full">
             <summary class="text-xs text-gray-600 cursor-pointer hover:text-gray-800">
-              Advanced (Range Type, Age)
+              Advanced
             </summary>
-            <div class="mt-2 grid grid-cols-4 gap-2">
+            <div class="mt-2 flex flex-wrap items-end gap-2 justify-between">
-              <div>
+              <div class="flex flex-wrap items-end gap-2">
-                <label class="block text-xs text-gray-600 mb-1">Range Type</label>
+                <div class="flex flex-col">
-                <select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.RangeType}>
+                  <label class="text-xs text-gray-600 mb-0.5">Type</label>
+                  <select class="select select-xs select-bordered w-20" bind:value={simpleRefNum.RangeType}>
                     <option value="RANGE">Range</option>
-                  <option value="THOLD">Threshold</option>
+                    <option value="THOLD">Thold</option>
                   </select>
                 </div>
-              <div>
+                <div class="flex flex-col">
-                <label class="block text-xs text-gray-600 mb-1">Age Unit</label>
+                  <label class="text-xs text-gray-600 mb-0.5">Age Unit</label>
-                <select class="select select-sm select-bordered w-full" bind:value={simpleRefNum.AgeUnit}>
+                  <select class="select select-xs select-bordered w-16" bind:value={simpleRefNum.AgeUnit}>
                     {#each ageUnits as opt (opt.value)}
-                    <option value={opt.value}>{opt.label}</option>
+                      <option value={opt.value}>{opt.label.substring(0,1)}</option>
                     {/each}
                   </select>
                 </div>
-              <div>
+                <div class="flex flex-col">
-                <label class="block text-xs text-gray-600 mb-1">From</label>
+                  <label class="text-xs text-gray-600 mb-0.5">From</label>
                   <input
                     type="number"
-                  class="input input-sm input-bordered w-full"
+                    class="input input-xs input-bordered w-16"
                     bind:value={simpleRefNum.AgeStart}
                     placeholder="0"
                     min="0"
                   />
                 </div>
-              <div>
+                <div class="flex flex-col">
-                <label class="block text-xs text-gray-600 mb-1">To</label>
+                  <label class="text-xs text-gray-600 mb-0.5">To</label>
                   <input
                     type="number"
-                  class="input input-sm input-bordered w-full"
+                    class="input input-xs input-bordered w-16"
                     bind:value={simpleRefNum.AgeEnd}
                     placeholder="150"
                     min="0"
                   />
                 </div>
               </div>
+              <!-- Low/High signs for THOLD -->
+              {#if simpleRefNum.RangeType === 'THOLD'}
+                <div class="flex flex-wrap items-end gap-2">
+                  <div class="flex flex-col">
+                    <label class="text-xs text-gray-600 mb-0.5">Low Sign</label>
+                    <select class="select select-xs select-bordered w-14" bind:value={simpleRefNum.LowSign}>
+                      {#each signOptions as opt (opt.value)}
+                        <option value={opt.value}>{opt.label}</option>
+                      {/each}
+                    </select>
+                  </div>
+                  <div class="flex flex-col">
+                    <label class="text-xs text-gray-600 mb-0.5">High Sign</label>
+                    <select class="select select-xs select-bordered w-14" bind:value={simpleRefNum.HighSign}>
+                      {#each signOptions as opt (opt.value)}
+                        <option value={opt.value}>{opt.label}</option>
+                      {/each}
+                    </select>
+                  </div>
+                </div>
+              {/if}
+            </div>
           </details>
         </div>
       </div>

src/routes/(app)/master-data/tests/test-modal/tabs/TechDetailsTab.svelte

@@ -342,6 +342,12 @@
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
       <div class="space-y-1">
         <label for="resultType" class="block text-sm font-medium text-gray-700">Result Type</label>
+        {#if formData.TestType === 'CALC'}
+          <div class="input input-sm input-bordered w-full bg-base-200 text-gray-600 flex items-center">
+            Numeric
+          </div>
+          <input type="hidden" bind:value={formData.details.ResultType} />
+        {:else}
           <select
             id="resultType"
             class="select select-sm select-bordered w-full"
@@ -353,8 +359,6 @@
               <option value={opt.value}>{opt.label}</option>
             {/each}
           </select>
-        {#if formData.TestType === 'CALC'}
-          <span class="text-xs text-gray-500">CALC type always uses Numeric Reference</span>
         {/if}
       </div>
 
@@ -454,7 +458,8 @@
     </div>
   </div>
 
-  <!-- Sample Requirements -->
+  <!-- Sample Requirements (hidden for CALC tests) -->
+  {#if formData.TestType !== 'CALC'}
     <div>
       <h3 class="text-sm font-semibold text-gray-700 mb-3">Sample Requirements</h3>
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -497,6 +502,7 @@
         ></textarea>
       </div>
     </div>
+  {/if}
 
   <!-- Method & TAT -->
   <div>