Add containers and tests master data modules

- Add containers management page with CRUD operations
- Add tests management page with test configuration
- Add organization API client
- Update SelectDropdown and Sidebar components
- Enhance PatientFormModal and VisitListModal
- Add VisitFormModal for visit management

src/lib/api/containers.js

@@ -0,0 +1,39 @@
+import { get, post, patch, del } from './client.js';
+
+export async function fetchContainers(params = {}) {
+  const query = new URLSearchParams(params).toString();
+  return get(query ? `/api/specimen/container?${query}` : '/api/specimen/container');
+}
+
+export async function fetchContainer(id) {
+  return get(`/api/specimen/container/${id}`);
+}
+
+export async function createContainer(data) {
+  const payload = {
+    ConCode: data.ConCode,
+    ConName: data.ConName,
+    ConDesc: data.ConDesc,
+    ConClass: data.ConClass,
+    Additive: data.Additive,
+    Color: data.Color,
+  };
+  return post('/api/specimen/container', payload);
+}
+
+export async function updateContainer(data) {
+  const payload = {
+    ConDefID: data.ConDefID,
+    ConCode: data.ConCode,
+    ConName: data.ConName,
+    ConDesc: data.ConDesc,
+    ConClass: data.ConClass,
+    Additive: data.Additive,
+    Color: data.Color,
+  };
+  return patch('/api/specimen/container', payload);
+}
+
+export async function deleteContainer(id) {
+  return del('/api/specimen/container', { body: JSON.stringify({ ConDefID: id }) });
+}

src/lib/api/organization.js

@@ -0,0 +1,21 @@
+import { get, post, patch, del } from './client.js';
+
+// Disciplines
+export async function fetchDisciplines(params = {}) {
+  const query = new URLSearchParams(params).toString();
+  return get(query ? `/api/organization/discipline?${query}` : '/api/organization/discipline');
+}
+
+export async function fetchDiscipline(id) {
+  return get(`/api/organization/discipline/${id}`);
+}
+
+// Departments
+export async function fetchDepartments(params = {}) {
+  const query = new URLSearchParams(params).toString();
+  return get(query ? `/api/organization/department?${query}` : '/api/organization/department');
+}
+
+export async function fetchDepartment(id) {
+  return get(`/api/organization/department/${id}`);
+}

src/lib/api/tests.js

@@ -0,0 +1,41 @@
+import { get, post, patch } from './client.js';
+
+export async function fetchTests(params = {}) {
+  const query = new URLSearchParams(params).toString();
+  return get(query ? `/api/tests?${query}` : '/api/tests');
+}
+
+export async function fetchTest(id) {
+  return get(`/api/tests/${id}`);
+}
+
+export async function createTest(data) {
+  const payload = {
+    TestSiteCode: data.TestSiteCode,
+    TestSiteName: data.TestSiteName,
+    TestType: data.TestType,
+    DisciplineID: data.DisciplineID,
+    DepartmentID: data.DepartmentID,
+    SeqScr: data.SeqScr,
+    SeqRpt: data.SeqRpt,
+    VisibleScr: data.VisibleScr ? '1' : '0',
+    VisibleRpt: data.VisibleRpt ? '1' : '0',
+  };
+  return post('/api/tests', payload);
+}
+
+export async function updateTest(data) {
+  const payload = {
+    TestSiteID: data.TestSiteID,
+    TestSiteCode: data.TestSiteCode,
+    TestSiteName: data.TestSiteName,
+    TestType: data.TestType,
+    DisciplineID: data.DisciplineID,
+    DepartmentID: data.DepartmentID,
+    SeqScr: data.SeqScr,
+    SeqRpt: data.SeqRpt,
+    VisibleScr: data.VisibleScr ? '1' : '0',
+    VisibleRpt: data.VisibleRpt ? '1' : '0',
+  };
+  return patch('/api/tests', payload);
+}

src/lib/components/SelectDropdown.svelte

@@ -64,9 +64,9 @@
     }
   });
 
-  // Check if current value exists in options
+  // Check if current value exists in options (empty string is always valid)
   let hasValidValue = $derived(
-    !value || dropdownOptions.some(opt => opt.value === value)
+    value === '' || value === null || value === undefined || dropdownOptions.some(opt => opt.value === value)
   );
 </script>
 
@@ -81,25 +81,23 @@
   </label>
   
   <div class="relative">
-    <select
-      {name}
-      id={name}
-      bind:value
-      {required}
-      {disabled}
-      class="select select-bordered w-full pr-10 {error ? 'select-error' : ''}"
-      class:opacity-50={loading}
-    >
-      <option value="">{placeholder}</option>
-      
-      {#if value && !hasValidValue}
-        <option value={value} selected>{value}</option>
-      {/if}
-      
-      {#each dropdownOptions as option (option.value)}
-        <option value={option.value}>{option.label}</option>
-      {/each}
-    </select>
+    {#key `${value}-${dropdownOptions.length}`}
+      <select
+        {name}
+        id={name}
+        bind:value
+        {required}
+        {disabled}
+        class="select select-bordered w-full pr-10 {error ? 'select-error' : ''}"
+        class:opacity-50={loading}
+      >
+        <option value="">{placeholder}</option>
+        
+        {#each dropdownOptions as option (option.value)}
+          <option value={option.value}>{option.label}</option>
+        {/each}
+      </select>
+    {/key}
     
     <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
       {#if loading}

src/lib/components/Sidebar.svelte

@@ -17,7 +17,8 @@
     Briefcase,
     Hash,
     Globe,
-    ChevronDown
+    ChevronDown,
+    TestTube
   } from 'lucide-svelte';
   import { auth } from '$lib/stores/auth.js';
   import { goto } from '$app/navigation';
@@ -130,6 +131,24 @@
           </button>
           {#if isOpen && masterDataExpanded}
             <ul class="ml-6 mt-1 space-y-1 collapsible-content">
+              <li>
+                <a
+                  href="/master-data/containers"
+                  class="menu-item py-1 px-2 text-sm text-gray-600 hover:bg-emerald-50 hover:text-emerald-700"
+                >
+                  <FlaskConical class="w-4 h-4 flex-shrink-0" />
+                  <span>Containers</span>
+                </a>
+              </li>
+              <li>
+                <a
+                  href="/master-data/tests"
+                  class="menu-item py-1 px-2 text-sm text-gray-600 hover:bg-emerald-50 hover:text-emerald-700"
+                >
+                  <TestTube class="w-4 h-4 flex-shrink-0" />
+                  <span>Test Definitions</span>
+                </a>
+              </li>
               <li>
                 <a 
                   href="/master-data/valuesets" 

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

@@ -7,10 +7,26 @@
     Stethoscope, 
     Hash,
     Globe,
-    ChevronRight 
+    ChevronRight,
+    FlaskConical,
+    TestTube
   } from 'lucide-svelte';
 
   const modules = [
+    {
+      title: 'Containers',
+      description: 'Manage specimen containers and tubes',
+      icon: FlaskConical,
+      href: '/master-data/containers',
+      color: 'bg-cyan-500',
+    },
+    {
+      title: 'Test Definitions',
+      description: 'Manage laboratory tests, panels, and calculated values',
+      icon: TestTube,
+      href: '/master-data/tests',
+      color: 'bg-rose-500',
+    },
     {
       title: 'ValueSets',
       description: 'System lookup values and dropdown options (GENDER, MARITAL_STATUS, etc.)',

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

@@ -0,0 +1,261 @@
+<script>
+  import { onMount } from 'svelte';
+  import { fetchContainers, createContainer, updateContainer, deleteContainer } from '$lib/api/containers.js';
+  import { success as toastSuccess, error as toastError } from '$lib/utils/toast.js';
+  import { valueSets } from '$lib/stores/valuesets.js';
+  import DataTable from '$lib/components/DataTable.svelte';
+  import Modal from '$lib/components/Modal.svelte';
+  import SelectDropdown from '$lib/components/SelectDropdown.svelte';
+  import { Plus, Edit2, Trash2, ArrowLeft } from 'lucide-svelte';
+
+  let loading = $state(false);
+  let containers = $state([]);
+  let modalOpen = $state(false);
+  let modalMode = $state('create');
+  let saving = $state(false);
+  let formData = $state({ ConDefID: null, ConCode: '', ConName: '', ConDesc: '', ConClass: '', Additive: '', Color: '' });
+  let deleteConfirmOpen = $state(false);
+  let deleteItem = $state(null);
+
+  const columns = [
+    { key: 'ConCode', label: 'Code', class: 'font-medium' },
+    { key: 'ConName', label: 'Name' },
+    { key: 'ConDesc', label: 'Description' },
+    { key: 'ConClass', label: 'Class' },
+    { key: 'Additive', label: 'Additive' },
+    { key: 'Color', label: 'Color' },
+    { key: 'actions', label: 'Actions', class: 'w-32 text-center' },
+  ];
+
+  function getValueSetLabel(key, value) {
+    if (!value) return '-';
+    const items = valueSets.getSync(key);
+    const item = items.find((i) => String(i.value || i.Value || i.code || i.Code || i.ItemCode) === String(value));
+    return item?.label || item?.Label || item?.description || item?.Description || item?.name || item?.Name || value;
+  }
+
+  onMount(async () => {
+    // Preload valuesets for dropdowns
+    await Promise.all([
+      valueSets.load('container_class'),
+      valueSets.load('additive'),
+      valueSets.load('container_cap_color'),
+    ]);
+    await loadContainers();
+  });
+
+  async function loadContainers() {
+    loading = true;
+    try {
+      const response = await fetchContainers();
+      containers = Array.isArray(response.data) ? response.data : [];
+    } catch (err) {
+      toastError(err.message || 'Failed to load containers');
+      containers = [];
+    } finally {
+      loading = false;
+    }
+  }
+
+  function openCreateModal() {
+    modalMode = 'create';
+    formData = { ConDefID: null, ConCode: '', ConName: '', ConDesc: '', ConClass: '', Additive: '', Color: '' };
+    modalOpen = true;
+  }
+
+  function openEditModal(row) {
+    modalMode = 'edit';
+    formData = {
+      ConDefID: row.ConDefID,
+      ConCode: row.ConCode,
+      ConName: row.ConName,
+      ConDesc: row.ConDesc || '',
+      ConClass: row.ConClass || '',
+      Additive: row.Additive || '',
+      Color: row.Color || '',
+    };
+    modalOpen = true;
+  }
+
+  async function handleSave() {
+    saving = true;
+    try {
+      if (modalMode === 'create') {
+        await createContainer(formData);
+        toastSuccess('Container created successfully');
+      } else {
+        await updateContainer(formData);
+        toastSuccess('Container updated successfully');
+      }
+      modalOpen = false;
+      await loadContainers();
+    } catch (err) {
+      toastError(err.message || 'Failed to save container');
+    } finally {
+      saving = false;
+    }
+  }
+
+  function confirmDelete(row) {
+    deleteItem = row;
+    deleteConfirmOpen = true;
+  }
+
+  async function handleDelete() {
+    try {
+      await deleteContainer(deleteItem.ConDefID);
+      toastSuccess('Container deleted successfully');
+      deleteConfirmOpen = false;
+      await loadContainers();
+    } catch (err) {
+      toastError(err.message || 'Failed to delete container');
+    }
+  }
+</script>
+
+<div class="p-6">
+  <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-3xl font-bold text-gray-800">Containers</h1>
+      <p class="text-gray-600">Manage specimen containers and tubes</p>
+    </div>
+    <button class="btn btn-primary" onclick={openCreateModal}>
+      <Plus class="w-4 h-4 mr-2" />
+      Add Container
+    </button>
+  </div>
+
+  <div class="bg-base-100 rounded-lg shadow border border-base-200">
+    <DataTable
+      {columns}
+      data={containers}
+      {loading}
+      emptyMessage="No containers found"
+      hover={true}
+      bordered={false}
+    >
+      {#snippet cell({ column, row, value })}
+        {#if column.key === 'actions'}
+          <div class="flex justify-center gap-2">
+            <button class="btn btn-sm btn-ghost" onclick={() => openEditModal(row)}>
+              <Edit2 class="w-4 h-4" />
+            </button>
+            <button class="btn btn-sm btn-ghost text-error" onclick={() => confirmDelete(row)}>
+              <Trash2 class="w-4 h-4" />
+            </button>
+          </div>
+        {:else if column.key === 'ConClass'}
+          {getValueSetLabel('container_class', value)}
+        {:else if column.key === 'Additive'}
+          {getValueSetLabel('additive', value)}
+        {:else if column.key === 'Color'}
+          {#if value}
+            <span class="inline-flex items-center gap-2">
+              <span class="w-4 h-4 rounded-full border border-gray-300" style="background-color: {value.toLowerCase()};"></span>
+              {getValueSetLabel('container_cap_color', value)}
+            </span>
+          {:else}
+            -
+          {/if}
+        {:else}
+          {value || '-'}
+        {/if}
+      {/snippet}
+    </DataTable>
+  </div>
+</div>
+
+<Modal bind:open={modalOpen} title={modalMode === 'create' ? 'Add Container' : 'Edit Container'} size="md">
+  <form class="space-y-5" onsubmit={(e) => { e.preventDefault(); handleSave(); }}>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="form-control">
+          <label class="label" for="code">
+            <span class="label-text font-medium">Code</span>
+            <span class="label-text-alt text-error">*</span>
+          </label>
+          <input
+            id="code"
+            type="text"
+            class="input input-bordered w-full"
+            bind:value={formData.ConCode}
+            placeholder="e.g., 1"
+            required
+          />
+        </div>
+        <div class="form-control">
+          <label class="label" for="name">
+            <span class="label-text font-medium">Name</span>
+            <span class="label-text-alt text-error">*</span>
+          </label>
+          <input
+            id="name"
+            type="text"
+            class="input input-bordered w-full"
+            bind:value={formData.ConName}
+            placeholder="e.g., SST"
+            required
+          />
+        </div>
+      </div>
+      <div class="form-control">
+        <label class="label" for="desc">
+          <span class="label-text font-medium">Description</span>
+        </label>
+        <input
+          id="desc"
+          type="text"
+          class="input input-bordered w-full"
+          bind:value={formData.ConDesc}
+          placeholder="e.g., Evacuated blood collection tube"
+        />
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <SelectDropdown
+          label="Class"
+          name="class"
+          valueSetKey="container_class"
+          bind:value={formData.ConClass}
+          placeholder="Select Class..."
+        />
+        <SelectDropdown
+          label="Additive"
+          name="additive"
+          valueSetKey="additive"
+          bind:value={formData.Additive}
+          placeholder="Select Additive..."
+        />
+        <SelectDropdown
+          label="Cap Color"
+          name="color"
+          valueSetKey="container_cap_color"
+          bind:value={formData.Color}
+          placeholder="Select Color..."
+        />
+      </div>
+  </form>
+  {#snippet footer()}
+    <button class="btn btn-ghost" onclick={() => (modalOpen = false)} type="button">Cancel</button>
+    <button class="btn btn-primary" onclick={handleSave} disabled={saving} type="button">
+      {#if saving}
+        <span class="loading loading-spinner loading-sm mr-2"></span>
+      {/if}
+      {saving ? 'Saving...' : 'Save'}
+    </button>
+  {/snippet}
+</Modal>
+
+<Modal bind:open={deleteConfirmOpen} title="Confirm Delete" size="sm">
+  <div class="py-2">
+    <p class="text-base-content/80">
+      Are you sure you want to delete <strong class="text-base-content">{deleteItem?.ConName}</strong>?
+    </p>
+    <p class="text-sm text-error mt-2">This action cannot be undone.</p>
+  </div>
+  {#snippet footer()}
+    <button class="btn btn-ghost" onclick={() => (deleteConfirmOpen = false)} type="button">Cancel</button>
+    <button class="btn btn-error" onclick={handleDelete} type="button">Delete</button>
+  {/snippet}
+</Modal>

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

@@ -0,0 +1,389 @@
+<script>
+  import { onMount } from 'svelte';
+  import { fetchTests, createTest, updateTest } from '$lib/api/tests.js';
+  import { fetchDisciplines, fetchDepartments } 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 SelectDropdown from '$lib/components/SelectDropdown.svelte';
+  import { Plus, Edit2, ArrowLeft, Filter } from 'lucide-svelte';
+
+  let loading = $state(false);
+  let tests = $state([]);
+  let disciplines = $state([]);
+  let departments = $state([]);
+  let modalOpen = $state(false);
+  let modalMode = $state('create');
+  let saving = $state(false);
+  
+  // Filter states
+  let selectedType = $state('');
+  let searchQuery = $state('');
+  
+  let formData = $state({
+    TestSiteID: null,
+    TestSiteCode: '',
+    TestSiteName: '',
+    TestType: 'TEST',
+    DisciplineID: null,
+    DepartmentID: null,
+    SeqScr: '0',
+    SeqRpt: '0',
+    VisibleScr: '1',
+    VisibleRpt: '1'
+  });
+
+  const testTypeLabels = {
+    TEST: 'Test',
+    PARAM: 'Param',
+    CALC: 'Calc',
+    GROUP: 'Panel',
+    TITLE: 'Title'
+  };
+
+  const testTypeBadges = {
+    TEST: 'badge-primary',
+    PARAM: 'badge-secondary',
+    CALC: 'badge-accent',
+    GROUP: 'badge-info',
+    TITLE: 'badge-ghost'
+  };
+
+  const columns = [
+    { key: 'TestSiteCode', label: 'Code', class: 'font-medium' },
+    { key: 'TestSiteName', label: 'Name' },
+    { key: 'TestType', label: 'Type', class: 'w-32' },
+    { key: 'DisciplineName', label: 'Discipline' },
+    { key: 'DepartmentName', label: 'Department' },
+    { key: 'SeqScr', label: 'Seq', class: 'w-16 text-center' },
+    { key: 'actions', label: 'Actions', class: 'w-24 text-center' },
+  ];
+
+  onMount(async () => {
+    await Promise.all([
+      loadTests(),
+      loadDisciplines(),
+      loadDepartments()
+    ]);
+  });
+
+  async function loadTests() {
+    loading = true;
+    try {
+      const params = {};
+      if (selectedType) params.TestType = selectedType;
+      if (searchQuery) params.TestSiteName = searchQuery;
+      
+      const response = await fetchTests(params);
+      tests = Array.isArray(response.data) ? response.data : [];
+    } catch (err) {
+      toastError(err.message || 'Failed to load tests');
+      tests = [];
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function loadDisciplines() {
+    try {
+      const response = await fetchDisciplines();
+      disciplines = Array.isArray(response.data) ? response.data : [];
+    } catch (err) {
+      disciplines = [];
+    }
+  }
+
+  async function loadDepartments() {
+    try {
+      const response = await fetchDepartments();
+      departments = Array.isArray(response.data) ? response.data : [];
+    } catch (err) {
+      departments = [];
+    }
+  }
+
+  function openCreateModal() {
+    modalMode = 'create';
+    formData = {
+      TestSiteID: null,
+      TestSiteCode: '',
+      TestSiteName: '',
+      TestType: 'TEST',
+      DisciplineID: null,
+      DepartmentID: null,
+      SeqScr: '0',
+      SeqRpt: '0',
+      VisibleScr: '1',
+      VisibleRpt: '1'
+    };
+    modalOpen = true;
+  }
+
+  function openEditModal(row) {
+    modalMode = 'edit';
+    formData = {
+      TestSiteID: row.TestSiteID,
+      TestSiteCode: row.TestSiteCode,
+      TestSiteName: row.TestSiteName,
+      TestType: row.TestType,
+      DisciplineID: row.DisciplineID,
+      DepartmentID: row.DepartmentID,
+      SeqScr: row.SeqScr || '0',
+      SeqRpt: row.SeqRpt || '0',
+      VisibleScr: row.VisibleScr || '1',
+      VisibleRpt: row.VisibleRpt || '1'
+    };
+    modalOpen = true;
+  }
+
+  async function handleSave() {
+    saving = true;
+    try {
+      if (modalMode === 'create') {
+        await createTest(formData);
+        toastSuccess('Test created successfully');
+      } else {
+        await updateTest(formData);
+        toastSuccess('Test updated successfully');
+      }
+      modalOpen = false;
+      await loadTests();
+    } catch (err) {
+      toastError(err.message || 'Failed to save test');
+    } finally {
+      saving = false;
+    }
+  }
+
+  function handleFilter() {
+    loadTests();
+  }
+
+  function handleSearchKeydown(event) {
+    if (event.key === 'Enter') {
+      loadTests();
+    }
+  }
+
+  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 filteredDepartments = $derived(
+    formData.DisciplineID
+      ? departments.filter(d => d.DisciplineID === formData.DisciplineID)
+      : departments
+  );
+
+  const filteredDepartmentOptions = $derived(
+    filteredDepartments.map(d => ({ value: d.DepartmentID, label: d.DepartmentName }))
+  );
+</script>
+
+<div class="p-6">
+  <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-3xl font-bold text-gray-800">Test Definitions</h1>
+      <p class="text-gray-600">Manage laboratory tests and panels</p>
+    </div>
+    <button class="btn btn-primary" onclick={openCreateModal}>
+      <Plus class="w-4 h-4 mr-2" />
+      Add Test
+    </button>
+  </div>
+
+  <!-- Filters -->
+  <div class="bg-base-100 rounded-lg shadow border border-base-200 p-4 mb-4">
+    <div class="flex flex-col sm:flex-row gap-4">
+      <div class="flex-1">
+        <input
+          type="text"
+          placeholder="Search by code or name..."
+          class="input input-bordered w-full"
+          bind:value={searchQuery}
+          onkeydown={handleSearchKeydown}
+        />
+      </div>
+      <div class="w-full sm:w-48">
+        <select
+          class="select select-bordered w-full"
+          bind:value={selectedType}
+          onchange={handleFilter}
+        >
+          <option value="">All Types</option>
+          <option value="TEST">Technical Test</option>
+          <option value="PARAM">Parameter</option>
+          <option value="CALC">Calculated</option>
+          <option value="GROUP">Panel/Profile</option>
+          <option value="TITLE">Section Header</option>
+        </select>
+      </div>
+      <button class="btn btn-outline" onclick={handleFilter}>
+        <Filter class="w-4 h-4 mr-2" />
+        Filter
+      </button>
+    </div>
+  </div>
+
+  <div class="bg-base-100 rounded-lg shadow border border-base-200">
+    <DataTable
+      {columns}
+      data={tests.map(t => ({
+        ...t,
+        DisciplineName: disciplines.find(d => d.DisciplineID === t.DisciplineID)?.DisciplineName || '-',
+        DepartmentName: departments.find(d => d.DepartmentID === t.DepartmentID)?.DepartmentName || '-'
+      }))}
+      {loading}
+      emptyMessage="No tests found"
+      hover={true}
+      bordered={false}
+    >
+      {#snippet cell({ column, row, value })}
+        {#if column.key === 'TestType'}
+          <span class="badge {testTypeBadges[value] || 'badge-ghost'}">
+            {testTypeLabels[value] || value}
+          </span>
+        {:else if column.key === 'actions'}
+          <div class="flex justify-center gap-2">
+            <button class="btn btn-sm btn-ghost" onclick={() => openEditModal(row)}>
+              <Edit2 class="w-4 h-4" />
+            </button>
+          </div>
+        {:else}
+          {value || '-'}
+        {/if}
+      {/snippet}
+    </DataTable>
+  </div>
+</div>
+
+<Modal bind:open={modalOpen} title={modalMode === 'create' ? 'Add Test' : 'Edit Test'} size="lg">
+  <form class="space-y-5" onsubmit={(e) => { e.preventDefault(); handleSave(); }}>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="form-control">
+        <label class="label" for="testCode">
+          <span class="label-text font-medium">Test Code</span>
+          <span class="label-text-alt text-error">*</span>
+        </label>
+        <input
+          id="testCode"
+          type="text"
+          class="input input-bordered w-full"
+          bind:value={formData.TestSiteCode}
+          placeholder="e.g., GLU"
+          required
+        />
+      </div>
+      <div class="form-control">
+        <label class="label" for="testName">
+          <span class="label-text font-medium">Test Name</span>
+          <span class="label-text-alt text-error">*</span>
+        </label>
+        <input
+          id="testName"
+          type="text"
+          class="input input-bordered w-full"
+          bind:value={formData.TestSiteName}
+          placeholder="e.g., Glucose"
+          required
+        />
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="form-control">
+        <label class="label" for="testType">
+          <span class="label-text font-medium">Test Type</span>
+          <span class="label-text-alt text-error">*</span>
+        </label>
+        <select
+          id="testType"
+          class="select select-bordered w-full"
+          bind:value={formData.TestType}
+          required
+        >
+          <option value="TEST">Technical Test</option>
+          <option value="PARAM">Parameter</option>
+          <option value="CALC">Calculated</option>
+          <option value="GROUP">Panel/Profile</option>
+          <option value="TITLE">Section Header</option>
+        </select>
+      </div>
+      <div class="form-control">
+        <label class="label" for="seqScr">
+          <span class="label-text font-medium">Screen Sequence</span>
+        </label>
+        <input
+          id="seqScr"
+          type="number"
+          class="input input-bordered w-full"
+          bind:value={formData.SeqScr}
+          placeholder="0"
+        />
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <SelectDropdown
+        label="Discipline"
+        name="discipline"
+        bind:value={formData.DisciplineID}
+        options={disciplineOptions}
+        placeholder="Select discipline..."
+      />
+      <SelectDropdown
+        label="Department"
+        name="department"
+        bind:value={formData.DepartmentID}
+        options={filteredDepartmentOptions}
+        placeholder="Select department..."
+      />
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="form-control">
+        <label class="label" for="seqRpt">
+          <span class="label-text font-medium">Report Sequence</span>
+        </label>
+        <input
+          id="seqRpt"
+          type="number"
+          class="input input-bordered w-full"
+          bind:value={formData.SeqRpt}
+          placeholder="0"
+        />
+      </div>
+      <div class="form-control">
+        <label class="label">
+          <span class="label-text font-medium">Visibility</span>
+        </label>
+        <div class="flex gap-4 mt-2">
+          <label class="label cursor-pointer gap-2">
+            <input type="checkbox" class="checkbox" bind:checked={formData.VisibleScr} value="1" />
+            <span class="label-text">Screen</span>
+          </label>
+          <label class="label cursor-pointer gap-2">
+            <input type="checkbox" class="checkbox" bind:checked={formData.VisibleRpt} value="1" />
+            <span class="label-text">Report</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </form>
+  {#snippet footer()}
+    <button class="btn btn-ghost" onclick={() => (modalOpen = false)} type="button">Cancel</button>
+    <button class="btn btn-primary" onclick={handleSave} disabled={saving} type="button">
+      {#if saving}
+        <span class="loading loading-spinner loading-sm mr-2"></span>
+      {/if}
+      {saving ? 'Saving...' : 'Save'}
+    </button>
+  {/snippet}
+</Modal>

src/routes/(app)/patients/PatientFormModal.svelte

@@ -5,6 +5,7 @@
   import { success as toastSuccess, error as toastError } from '$lib/utils/toast.js';
   import Modal from '$lib/components/Modal.svelte';
   import SelectDropdown from '$lib/components/SelectDropdown.svelte';
+  import { User, MapPin, Contact } from 'lucide-svelte';
 
   /** @type {{ open: boolean, patient: any | null, onSave: () => void, patientLoading?: boolean }} */
   let { open = $bindable(false), patient = null, onSave, patientLoading = false } = $props();
@@ -14,6 +15,7 @@
   let provinces = $state([]);
   let cities = $state([]);
   let formErrors = $state({});
+  let activeTab = $state('personal'); // 'personal' or 'location'
 
   let formData = $state({
     InternalPID: null,
@@ -239,11 +241,12 @@
     const province = formData.Province;
     if (province && province !== lastLoadedProvince) {
       lastLoadedProvince = province;
-      // Clear city when province changes (only after form is initialized)
-      if (initializedPatientId !== null) {
-        formData.City = '';
-      }
-      loadCities(province);
+      // Load cities first, then clear city (prevents empty string display during loading)
+      loadCities(province).then(() => {
+        if (initializedPatientId !== null) {
+          formData.City = '';
+        }
+      });
     } else if (!province) {
       cities = [];
       lastLoadedProvince = '';
@@ -265,348 +268,384 @@
     </div>
   {:else}
   <form class="space-y-6" onsubmit={(e) => e.preventDefault()}>
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-      <div class="form-control">
-        <label class="label" for="patientId">
-          <span class="label-text font-medium">Patient ID</span>
-          <span class="label-text-alt text-error">*</span>
-        </label>
-        <input
-          id="patientId"
-          type="text"
-          class="input input-bordered w-full"
-          class:input-error={formErrors.PatientID}
-          bind:value={formData.PatientID}
-          placeholder="Enter patient ID"
-          disabled={isEdit}
-        />
-        {#if formErrors.PatientID}
-          <span class="text-error text-sm mt-1">{formErrors.PatientID}</span>
-        {/if}
-      </div>
-
-      <SelectDropdown
-        label="Prefix"
-        name="prefix"
-        bind:value={formData.Prefix}
-        options={prefixOptions}
-        placeholder="Select..."
-      />
+    <!-- DaisyUI Tabs -->
+    <div class="tabs tabs-bordered">
+      <button
+        type="button"
+        class="tab tab-lg {activeTab === 'personal' ? 'tab-active' : ''}"
+        onclick={() => activeTab = 'personal'}
+      >
+        <User class="w-4 h-4 mr-2" />
+        Personal Info
+      </button>
+      <button
+        type="button"
+        class="tab tab-lg {activeTab === 'location' ? 'tab-active' : ''}"
+        onclick={() => activeTab = 'location'}
+      >
+        <MapPin class="w-4 h-4 mr-2" />
+        Location & Contact
+      </button>
     </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-      <div class="form-control">
-        <label class="label" for="nameFirst">
-          <span class="label-text font-medium">First Name</span>
-          <span class="label-text-alt text-error">*</span>
-        </label>
-        <input
-          id="nameFirst"
-          type="text"
-          class="input input-bordered w-full"
-          class:input-error={formErrors.NameFirst}
-          bind:value={formData.NameFirst}
-          placeholder="Enter first name"
-        />
-        {#if formErrors.NameFirst}
-          <span class="text-error text-sm mt-1">{formErrors.NameFirst}</span>
-        {/if}
-      </div>
+    <!-- Personal Info Tab (Basic + Demographics) -->
+    {#if activeTab === 'personal'}
+      <div class="space-y-6">
+        <!-- Basic Info Section -->
+        <div>
+          <h4 class="font-medium text-gray-700 mb-4">Basic Information</h4>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="form-control">
+              <label class="label" for="patientId">
+                <span class="label-text font-medium">Patient ID</span>
+                <span class="label-text-alt text-error">*</span>
+              </label>
+              <input
+                id="patientId"
+                type="text"
+                class="input input-bordered w-full"
+                class:input-error={formErrors.PatientID}
+                bind:value={formData.PatientID}
+                placeholder="Enter patient ID"
+                disabled={isEdit}
+              />
+              {#if formErrors.PatientID}
+                <span class="text-error text-sm mt-1">{formErrors.PatientID}</span>
+              {/if}
+            </div>
 
-      <div class="form-control">
-        <label class="label" for="nameMiddle">
-          <span class="label-text font-medium">Middle Name</span>
-        </label>
-        <input
-          id="nameMiddle"
-          type="text"
-          class="input input-bordered w-full"
-          bind:value={formData.NameMiddle}
-          placeholder="Enter middle name"
-        />
-      </div>
+            <SelectDropdown
+              label="Prefix"
+              name="prefix"
+              bind:value={formData.Prefix}
+              options={prefixOptions}
+              placeholder="Select..."
+            />
+          </div>
 
-      <div class="form-control">
-        <label class="label" for="nameLast">
-          <span class="label-text font-medium">Last Name</span>
-        </label>
-        <input
-          id="nameLast"
-          type="text"
-          class="input input-bordered w-full"
-          bind:value={formData.NameLast}
-          placeholder="Enter last name"
-        />
-      </div>
-    </div>
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
+            <div class="form-control">
+              <label class="label" for="nameFirst">
+                <span class="label-text font-medium">First Name</span>
+                <span class="label-text-alt text-error">*</span>
+              </label>
+              <input
+                id="nameFirst"
+                type="text"
+                class="input input-bordered w-full"
+                class:input-error={formErrors.NameFirst}
+                bind:value={formData.NameFirst}
+                placeholder="Enter first name"
+              />
+              {#if formErrors.NameFirst}
+                <span class="text-error text-sm mt-1">{formErrors.NameFirst}</span>
+              {/if}
+            </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-      <div class="form-control">
-        <label class="label" for="nameMaiden">
-          <span class="label-text font-medium">Maiden Name</span>
-        </label>
-        <input
-          id="nameMaiden"
-          type="text"
-          class="input input-bordered w-full"
-          bind:value={formData.NameMaiden}
-          placeholder="Enter maiden name"
-        />
-      </div>
+            <div class="form-control">
+              <label class="label" for="nameMiddle">
+                <span class="label-text font-medium">Middle Name</span>
+              </label>
+              <input
+                id="nameMiddle"
+                type="text"
+                class="input input-bordered w-full"
+                bind:value={formData.NameMiddle}
+                placeholder="Enter middle name"
+              />
+            </div>
 
-      <div class="form-control">
-        <label class="label" for="suffix">
-          <span class="label-text font-medium">Suffix</span>
-        </label>
-        <input
-          id="suffix"
-          type="text"
-          class="input input-bordered w-full"
-          bind:value={formData.Suffix}
-          placeholder="Enter suffix (e.g., Jr, Sr, III)"
-        />
-      </div>
-    </div>
+            <div class="form-control">
+              <label class="label" for="nameLast">
+                <span class="label-text font-medium">Last Name</span>
+              </label>
+              <input
+                id="nameLast"
+                type="text"
+                class="input input-bordered w-full"
+                bind:value={formData.NameLast}
+                placeholder="Enter last name"
+              />
+            </div>
+          </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-      <SelectDropdown
-          label="Sex"
-          name="sex"
-          bind:value={formData.Sex}
-          valueSetKey="sex"
-          placeholder="Select sex..."
-          required={true}
-          error={formErrors.Sex}
-        />
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
+            <div class="form-control">
+              <label class="label" for="nameMaiden">
+                <span class="label-text font-medium">Maiden Name</span>
+              </label>
+              <input
+                id="nameMaiden"
+                type="text"
+                class="input input-bordered w-full"
+                bind:value={formData.NameMaiden}
+                placeholder="Enter maiden name"
+              />
+            </div>
 
-      <div class="form-control">
-        <label class="label" for="birthdate">
-          <span class="label-text font-medium">Birthdate</span>
-          <span class="label-text-alt text-error">*</span>
-        </label>
-        <input
-          id="birthdate"
-          type="date"
-          class="input input-bordered w-full"
-          class:input-error={formErrors.Birthdate}
-          bind:value={formData.Birthdate}
-        />
-        {#if formErrors.Birthdate}
-          <span class="text-error text-sm mt-1">{formErrors.Birthdate}</span>
-        {/if}
-      </div>
+            <div class="form-control">
+              <label class="label" for="suffix">
+                <span class="label-text font-medium">Suffix</span>
+              </label>
+              <input
+                id="suffix"
+                type="text"
+                class="input input-bordered w-full"
+                bind:value={formData.Suffix}
+                placeholder="Enter suffix (e.g., Jr, Sr, III)"
+              />
+            </div>
+          </div>
 
-      <div class="form-control">
-        <label class="label" for="placeOfBirth">
-          <span class="label-text font-medium">Place of Birth</span>
-        </label>
-        <input
-          id="placeOfBirth"
-          type="text"
-          class="input input-bordered w-full"
-          bind:value={formData.PlaceOfBirth}
-          placeholder="Enter place of birth"
-        />
-      </div>
-    </div>
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
+            <SelectDropdown
+                label="Sex"
+                name="sex"
+                bind:value={formData.Sex}
+                valueSetKey="sex"
+                placeholder="Select sex..."
+                required={true}
+                error={formErrors.Sex}
+              />
 
-    <div class="border-t border-base-200 pt-6">
-      <h4 class="font-medium text-gray-700 mb-4">Demographics</h4>
+            <div class="form-control">
+              <label class="label" for="birthdate">
+                <span class="label-text font-medium">Birthdate</span>
+                <span class="label-text-alt text-error">*</span>
+              </label>
+              <input
+                id="birthdate"
+                type="date"
+                class="input input-bordered w-full"
+                class:input-error={formErrors.Birthdate}
+                bind:value={formData.Birthdate}
+              />
+              {#if formErrors.Birthdate}
+                <span class="text-error text-sm mt-1">{formErrors.Birthdate}</span>
+              {/if}
+            </div>
 
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
-        <SelectDropdown
-          label="Race"
-          name="race"
-          bind:value={formData.Race}
-          valueSetKey="race"
-          placeholder="Select race..."
-        />
-
-        <SelectDropdown
-          label="Marital Status"
-          name="maritalStatus"
-          bind:value={formData.MaritalStatus}
-          valueSetKey="marital_status"
-          placeholder="Select marital status..."
-        />
-
-        <SelectDropdown
-          label="Religion"
-          name="religion"
-          bind:value={formData.Religion}
-          valueSetKey="religion"
-          placeholder="Select religion..."
-        />
-      </div>
-
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <SelectDropdown
-          label="Ethnicity"
-          name="ethnic"
-          bind:value={formData.Ethnic}
-          valueSetKey="ethnic"
-          placeholder="Select ethnicity..."
-        />
-
-        <div class="form-control">
-          <label class="label" for="citizenship">
-            <span class="label-text font-medium">Citizenship</span>
-          </label>
-          <input
-            id="citizenship"
-            type="text"
-            class="input input-bordered w-full"
-            bind:value={formData.Citizenship}
-            placeholder="Enter citizenship"
-          />
-        </div>
-      </div>
-    </div>
-
-    <div class="border-t border-base-200 pt-6">
-      <h4 class="font-medium text-gray-700 mb-4">Address Information</h4>
-
-      <div class="form-control mb-4">
-        <label class="label" for="street1">
-          <span class="label-text font-medium">Street Address</span>
-        </label>
-        <input
-          id="street1"
-          type="text"
-          class="input input-bordered w-full"
-          bind:value={formData.Street_1}
-          placeholder="Enter street address"
-        />
-      </div>
-
-      <div class="form-control mb-4">
-        <label class="label" for="street2">
-          <span class="label-text font-medium">Street Address Line 2</span>
-        </label>
-        <input
-          id="street2"
-          type="text"
-          class="input input-bordered w-full"
-          bind:value={formData.Street_2}
-          placeholder="Enter street address line 2"
-        />
-      </div>
-
-      <div class="form-control mb-4">
-        <label class="label" for="street3">
-          <span class="label-text font-medium">Street Address Line 3</span>
-        </label>
-        <input
-          id="street3"
-          type="text"
-          class="input input-bordered w-full"
-          bind:value={formData.Street_3}
-          placeholder="Enter street address line 3"
-        />
-      </div>
-
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <SelectDropdown
-          label="Province"
-          name="province"
-          bind:value={formData.Province}
-          options={provinceOptions}
-          placeholder="Select province..."
-        />
-
-        <SelectDropdown
-          label="City"
-          name="city"
-          bind:value={formData.City}
-          options={cityOptions}
-          placeholder={formData.Province ? "Select city..." : "Select province first"}
-          disabled={!formData.Province}
-        />
-
-        <div class="form-control">
-          <label class="label" for="zip">
-            <span class="label-text font-medium">ZIP Code</span>
-          </label>
-          <input
-            id="zip"
-            type="text"
-            class="input input-bordered w-full"
-            bind:value={formData.ZIP}
-            placeholder="Enter ZIP code"
-          />
-        </div>
-      </div>
-
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
-        <SelectDropdown
-          label="Country"
-          name="country"
-          bind:value={formData.Country}
-          valueSetKey="country"
-          placeholder="Select country..."
-        />
-      </div>
-    </div>
-
-    <div class="border-t border-base-200 pt-6">
-      <h4 class="font-medium text-gray-700 mb-4">Contact Information</h4>
-      
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div class="form-control">
-          <label class="label" for="phone">
-            <span class="label-text font-medium">Phone</span>
-          </label>
-          <input
-            id="phone"
-            type="tel"
-            class="input input-bordered w-full"
-            bind:value={formData.Phone}
-            placeholder="Enter phone number"
-          />
+            <div class="form-control">
+              <label class="label" for="placeOfBirth">
+                <span class="label-text font-medium">Place of Birth</span>
+              </label>
+              <input
+                id="placeOfBirth"
+                type="text"
+                class="input input-bordered w-full"
+                bind:value={formData.PlaceOfBirth}
+                placeholder="Enter place of birth"
+              />
+            </div>
+          </div>
         </div>
 
-        <div class="form-control">
-          <label class="label" for="mobilePhone">
-            <span class="label-text font-medium">Mobile Phone</span>
-          </label>
-          <input
-            id="mobilePhone"
-            type="tel"
-            class="input input-bordered w-full"
-            bind:value={formData.MobilePhone}
-            placeholder="Enter mobile number"
-          />
+        <!-- Demographics Section -->
+        <div class="border-t border-base-200 pt-6">
+          <h4 class="font-medium text-gray-700 mb-4">Demographics</h4>
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <SelectDropdown
+              label="Race"
+              name="race"
+              bind:value={formData.Race}
+              valueSetKey="race"
+              placeholder="Select race..."
+            />
+
+            <SelectDropdown
+              label="Marital Status"
+              name="maritalStatus"
+              bind:value={formData.MaritalStatus}
+              valueSetKey="marital_status"
+              placeholder="Select marital status..."
+            />
+
+            <SelectDropdown
+              label="Religion"
+              name="religion"
+              bind:value={formData.Religion}
+              valueSetKey="religion"
+              placeholder="Select religion..."
+            />
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
+            <SelectDropdown
+              label="Ethnicity"
+              name="ethnic"
+              bind:value={formData.Ethnic}
+              valueSetKey="ethnic"
+              placeholder="Select ethnicity..."
+            />
+
+            <div class="form-control">
+              <label class="label" for="citizenship">
+                <span class="label-text font-medium">Citizenship</span>
+              </label>
+              <input
+                id="citizenship"
+                type="text"
+                class="input input-bordered w-full"
+                bind:value={formData.Citizenship}
+                placeholder="Enter citizenship"
+              />
+            </div>
+          </div>
         </div>
       </div>
+    {/if}
 
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-        <div class="form-control">
-          <label class="label" for="email1">
-            <span class="label-text font-medium">Email Address</span>
-          </label>
-          <input
-            id="email1"
-            type="email"
-            class="input input-bordered w-full"
-            bind:value={formData.EmailAddress1}
-            placeholder="Enter email address"
-          />
+    <!-- Location & Contact Tab -->
+    {#if activeTab === 'location'}
+      <div class="space-y-6">
+        <!-- Address Section -->
+        <div>
+          <h4 class="font-medium text-gray-700 mb-4">Address Information</h4>
+
+          <div class="form-control mb-4">
+            <label class="label" for="street1">
+              <span class="label-text font-medium">Street Address</span>
+            </label>
+            <input
+              id="street1"
+              type="text"
+              class="input input-bordered w-full"
+              bind:value={formData.Street_1}
+              placeholder="Enter street address"
+            />
+          </div>
+
+          <div class="form-control mb-4">
+            <label class="label" for="street2">
+              <span class="label-text font-medium">Street Address Line 2</span>
+            </label>
+            <input
+              id="street2"
+              type="text"
+              class="input input-bordered w-full"
+              bind:value={formData.Street_2}
+              placeholder="Enter street address line 2"
+            />
+          </div>
+
+          <div class="form-control mb-4">
+            <label class="label" for="street3">
+              <span class="label-text font-medium">Street Address Line 3</span>
+            </label>
+            <input
+              id="street3"
+              type="text"
+              class="input input-bordered w-full"
+              bind:value={formData.Street_3}
+              placeholder="Enter street address line 3"
+            />
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <SelectDropdown
+              label="Province"
+              name="province"
+              bind:value={formData.Province}
+              options={provinceOptions}
+              placeholder="Select province..."
+            />
+
+            <SelectDropdown
+              label="City"
+              name="city"
+              bind:value={formData.City}
+              options={cityOptions}
+              placeholder={formData.Province ? "Select city..." : "Select province first"}
+              disabled={!formData.Province}
+            />
+
+            <div class="form-control">
+              <label class="label" for="zip">
+                <span class="label-text font-medium">ZIP Code</span>
+              </label>
+              <input
+                id="zip"
+                type="text"
+                class="input input-bordered w-full"
+                bind:value={formData.ZIP}
+                placeholder="Enter ZIP code"
+              />
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
+            <SelectDropdown
+              label="Country"
+              name="country"
+              bind:value={formData.Country}
+              valueSetKey="country"
+              placeholder="Select country..."
+            />
+          </div>
         </div>
 
-        <div class="form-control">
-          <label class="label" for="email2">
-            <span class="label-text font-medium">Secondary Email</span>
-          </label>
-          <input
-            id="email2"
-            type="email"
-            class="input input-bordered w-full"
-            bind:value={formData.EmailAddress2}
-            placeholder="Enter secondary email"
-          />
+        <!-- Contact Section -->
+        <div class="border-t border-base-200 pt-6">
+          <h4 class="font-medium text-gray-700 mb-4">Contact Information</h4>
+          
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="form-control">
+              <label class="label" for="phone">
+                <span class="label-text font-medium">Phone</span>
+              </label>
+              <input
+                id="phone"
+                type="tel"
+                class="input input-bordered w-full"
+                bind:value={formData.Phone}
+                placeholder="Enter phone number"
+              />
+            </div>
+
+            <div class="form-control">
+              <label class="label" for="mobilePhone">
+                <span class="label-text font-medium">Mobile Phone</span>
+              </label>
+              <input
+                id="mobilePhone"
+                type="tel"
+                class="input input-bordered w-full"
+                bind:value={formData.MobilePhone}
+                placeholder="Enter mobile number"
+              />
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+            <div class="form-control">
+              <label class="label" for="email1">
+                <span class="label-text font-medium">Email Address</span>
+              </label>
+              <input
+                id="email1"
+                type="email"
+                class="input input-bordered w-full"
+                bind:value={formData.EmailAddress1}
+                placeholder="Enter email address"
+              />
+            </div>
+
+            <div class="form-control">
+              <label class="label" for="email2">
+                <span class="label-text font-medium">Secondary Email</span>
+              </label>
+              <input
+                id="email2"
+                type="email"
+                class="input input-bordered w-full"
+                bind:value={formData.EmailAddress2}
+                placeholder="Enter secondary email"
+              />
+            </div>
+          </div>
         </div>
       </div>
-    </div>
+    {/if}
   </form>
   {/if}
   {#snippet footer()}

src/routes/(app)/patients/VisitFormModal.svelte

@@ -0,0 +1,389 @@
+<script>
+  import { createVisit, updateVisit, fetchVisit } from '$lib/api/visits.js';
+  import { fetchLocations } from '$lib/api/locations.js';
+  import { fetchContacts } from '$lib/api/contacts.js';
+  import { success as toastSuccess, error as toastError } from '$lib/utils/toast.js';
+  import Modal from '$lib/components/Modal.svelte';
+  import SelectDropdown from '$lib/components/SelectDropdown.svelte';
+  import { Calendar, MapPin, User, FileText, Activity } from 'lucide-svelte';
+
+  /** @type {{ open: boolean, patient: any | null, visit: any | null, onSave: () => void }} */
+  let { open = $bindable(false), patient = null, visit = null, onSave } = $props();
+
+  let loading = $state(false);
+  let saving = $state(false);
+  let locations = $state([]);
+  let contacts = $state([]);
+  let formErrors = $state({});
+  let activeTab = $state('info'); // 'info', 'diagnosis'
+
+  let formData = $state({
+    InternalPVID: null,
+    PatientID: '',
+    PVCreateDate: '',
+    ADTCode: '',
+    LocationID: '',
+    LocCode: '',
+    AttDoc: '',
+    AdmDoc: '',
+    RefDoc: '',
+    CnsDoc: '',
+    DiagCode: '',
+    Diagnosis: '',
+    EndDate: '',
+    ArchivedDate: '',
+  });
+
+  const isEdit = $derived(!!visit?.InternalPVID);
+
+  const adtTypeOptions = [
+    { value: 'OPD', label: 'Outpatient (OPD)' },
+    { value: 'IPD', label: 'Inpatient (IPD)' },
+    { value: 'ER', label: 'Emergency (ER)' },
+    { value: 'ADM', label: 'Admission (ADM)' },
+    { value: 'DIS', label: 'Discharge (DIS)' },
+    { value: 'TRF', label: 'Transfer (TRF)' },
+  ];
+
+  $effect(() => {
+    if (open) {
+      loadLocations();
+      loadContacts();
+      if (visit) {
+        // Edit mode - populate form
+        formData = {
+          InternalPVID: visit.InternalPVID || null,
+          PatientID: visit.PatientID || patient?.PatientID || '',
+          PVCreateDate: visit.PVCreateDate || visit.PVACreateDate || '',
+          ADTCode: visit.ADTCode || '',
+          LocationID: visit.LocationID || '',
+          LocCode: visit.LocCode || '',
+          AttDoc: visit.AttDoc || '',
+          AdmDoc: visit.AdmDoc || '',
+          RefDoc: visit.RefDoc || '',
+          CnsDoc: visit.CnsDoc || '',
+          DiagCode: visit.DiagCode || '',
+          Diagnosis: visit.Diagnosis || '',
+          EndDate: visit.EndDate || '',
+          ArchivedDate: visit.ArchivedDate || '',
+        };
+      } else {
+        // Create mode - reset form
+        formData = {
+          InternalPVID: null,
+          PatientID: patient?.PatientID || '',
+          PVCreateDate: new Date().toISOString().slice(0, 16),
+          ADTCode: '',
+          LocationID: '',
+          LocCode: '',
+          AttDoc: '',
+          AdmDoc: '',
+          RefDoc: '',
+          CnsDoc: '',
+          DiagCode: '',
+          Diagnosis: '',
+          EndDate: '',
+          ArchivedDate: '',
+        };
+      }
+    }
+  });
+
+  async function loadLocations() {
+    try {
+      const response = await fetchLocations();
+      locations = Array.isArray(response.data) ? response.data : [];
+    } catch (err) {
+      console.error('Failed to load locations:', err);
+    }
+  }
+
+  async function loadContacts() {
+    try {
+      const response = await fetchContacts();
+      contacts = Array.isArray(response.data) ? response.data : [];
+    } catch (err) {
+      console.error('Failed to load contacts:', err);
+    }
+  }
+
+  const locationOptions = $derived(
+    locations.map((l) => ({
+      value: l.LocationID || l.LocCode || '',
+      label: l.LocFull || l.LocCode || 'Unknown',
+    }))
+  );
+
+  const doctorOptions = $derived(
+    contacts.map((c) => ({
+      value: c.ContactID || c.ContactCode || '',
+      label: [c.NamePrefix, c.NameFirst, c.NameMiddle, c.NameLast].filter(Boolean).join(' ') || c.ContactCode || 'Unknown',
+    }))
+  );
+
+  function validateForm() {
+    const errors = {};
+    if (!formData.PatientID?.trim()) {
+      errors.PatientID = 'Patient ID is required';
+    }
+    if (!formData.PVCreateDate) {
+      errors.PVCreateDate = 'Visit date is required';
+    }
+    if (!formData.ADTCode?.trim()) {
+      errors.ADTCode = 'Visit type is required';
+    }
+    formErrors = errors;
+    return Object.keys(errors).length === 0;
+  }
+
+  async function handleSubmit() {
+    if (!validateForm()) return;
+
+    saving = true;
+    try {
+      const payload = { ...formData };
+
+      // Remove empty fields
+      Object.keys(payload).forEach((key) => {
+        if (payload[key] === '' || payload[key] === null) {
+          delete payload[key];
+        }
+      });
+
+      if (isEdit) {
+        await updateVisit(payload);
+        toastSuccess('Visit updated successfully');
+      } else {
+        await createVisit(payload);
+        toastSuccess('Visit created successfully');
+      }
+      open = false;
+      onSave?.();
+    } catch (err) {
+      toastError(err.message || 'Failed to save visit');
+    } finally {
+      saving = false;
+    }
+  }
+</script>
+
+<Modal bind:open title={isEdit ? 'Edit Visit' : 'New Visit'} size="lg">
+  {#if loading}
+    <div class="flex items-center justify-center py-12">
+      <span class="loading loading-spinner loading-lg text-primary"></span>
+    </div>
+  {:else}
+    <form class="space-y-6" onsubmit={(e) => e.preventDefault()}>
+      <!-- Patient Info Display -->
+      {#if patient}
+        <div class="p-4 bg-base-200 rounded-lg">
+          <div class="flex items-center gap-2">
+            <User class="w-4 h-4 text-gray-500" />
+            <span class="font-medium">
+              {[patient.Prefix, patient.NameFirst, patient.NameMiddle, patient.NameLast].filter(Boolean).join(' ')}
+            </span>
+            <span class="text-gray-500">({patient.PatientID})</span>
+          </div>
+        </div>
+      {/if}
+
+      <!-- Tabs -->
+      <div class="tabs tabs-bordered">
+        <button
+          type="button"
+          class="tab tab-lg {activeTab === 'info' ? 'tab-active' : ''}"
+          onclick={() => activeTab = 'info'}
+        >
+          <Calendar class="w-4 h-4 mr-2" />
+          Visit Info
+        </button>
+        <button
+          type="button"
+          class="tab tab-lg {activeTab === 'diagnosis' ? 'tab-active' : ''}"
+          onclick={() => activeTab = 'diagnosis'}
+        >
+          <Activity class="w-4 h-4 mr-2" />
+          Diagnosis & Status
+        </button>
+      </div>
+
+      <!-- Tab: Visit Info -->
+      {#if activeTab === 'info'}
+        <div class="space-y-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="form-control">
+              <label class="label" for="patientId">
+                <span class="label-text font-medium">Patient ID</span>
+                <span class="label-text-alt text-error">*</span>
+              </label>
+              <input
+                id="patientId"
+                type="text"
+                class="input input-bordered w-full"
+                class:input-error={formErrors.PatientID}
+                bind:value={formData.PatientID}
+                placeholder="Enter patient ID"
+                disabled={!!patient}
+              />
+              {#if formErrors.PatientID}
+                <span class="text-error text-sm mt-1">{formErrors.PatientID}</span>
+              {/if}
+            </div>
+
+            <div class="form-control">
+              <label class="label" for="visitDate">
+                <span class="label-text font-medium">Visit Date</span>
+                <span class="label-text-alt text-error">*</span>
+              </label>
+              <input
+                id="visitDate"
+                type="datetime-local"
+                class="input input-bordered w-full"
+                class:input-error={formErrors.PVCreateDate}
+                bind:value={formData.PVCreateDate}
+              />
+              {#if formErrors.PVCreateDate}
+                <span class="text-error text-sm mt-1">{formErrors.PVCreateDate}</span>
+              {/if}
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <SelectDropdown
+              label="Visit Type"
+              name="adtCode"
+              bind:value={formData.ADTCode}
+              options={adtTypeOptions}
+              placeholder="Select visit type..."
+              required={true}
+              error={formErrors.ADTCode}
+            />
+
+            <SelectDropdown
+              label="Location"
+              name="location"
+              bind:value={formData.LocationID}
+              options={locationOptions}
+              placeholder="Select location..."
+            />
+          </div>
+
+          <div class="border-t border-base-200 pt-4 mt-4">
+            <h4 class="font-medium text-gray-700 mb-4">Doctors</h4>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <SelectDropdown
+                label="Attending Doctor"
+                name="attDoc"
+                bind:value={formData.AttDoc}
+                options={doctorOptions}
+                placeholder="Select attending doctor..."
+              />
+
+              <SelectDropdown
+                label="Admitting Doctor"
+                name="admDoc"
+                bind:value={formData.AdmDoc}
+                options={doctorOptions}
+                placeholder="Select admitting doctor..."
+              />
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+              <SelectDropdown
+                label="Referring Doctor"
+                name="refDoc"
+                bind:value={formData.RefDoc}
+                options={doctorOptions}
+                placeholder="Select referring doctor..."
+              />
+
+              <SelectDropdown
+                label="Consulting Doctor"
+                name="cnsDoc"
+                bind:value={formData.CnsDoc}
+                options={doctorOptions}
+                placeholder="Select consulting doctor..."
+              />
+            </div>
+          </div>
+        </div>
+      {/if}
+
+      <!-- Tab: Diagnosis & Status -->
+      {#if activeTab === 'diagnosis'}
+        <div class="space-y-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="form-control">
+              <label class="label" for="diagCode">
+                <span class="label-text font-medium">Diagnosis Code</span>
+              </label>
+              <input
+                id="diagCode"
+                type="text"
+                class="input input-bordered w-full"
+                bind:value={formData.DiagCode}
+                placeholder="Enter diagnosis code"
+              />
+            </div>
+          </div>
+
+          <div class="form-control">
+            <label class="label" for="diagnosis">
+              <span class="label-text font-medium">Diagnosis Description</span>
+            </label>
+            <textarea
+              id="diagnosis"
+              class="textarea textarea-bordered w-full"
+              bind:value={formData.Diagnosis}
+              placeholder="Enter diagnosis description"
+              rows="3"
+            ></textarea>
+          </div>
+
+          <div class="border-t border-base-200 pt-4 mt-4">
+            <h4 class="font-medium text-gray-700 mb-4">Visit Status</h4>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="form-control">
+                <label class="label" for="endDate">
+                  <span class="label-text font-medium">End Date</span>
+                </label>
+                <input
+                  id="endDate"
+                  type="datetime-local"
+                  class="input input-bordered w-full"
+                  bind:value={formData.EndDate}
+                />
+              </div>
+
+              <div class="form-control">
+                <label class="label" for="archivedDate">
+                  <span class="label-text font-medium">Archived Date</span>
+                </label>
+                <input
+                  id="archivedDate"
+                  type="datetime-local"
+                  class="input input-bordered w-full"
+                  bind:value={formData.ArchivedDate}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      {/if}
+    </form>
+  {/if}
+
+  {#snippet footer()}
+    <div class="flex justify-end gap-2">
+      <button class="btn btn-ghost" onclick={() => (open = false)} type="button">
+        Cancel
+      </button>
+      <button class="btn btn-primary" onclick={handleSubmit} disabled={saving} type="button">
+        {#if saving}
+          <span class="loading loading-spinner loading-sm mr-2"></span>
+        {/if}
+        {saving ? 'Saving...' : 'Save'}
+      </button>
+    </div>
+  {/snippet}
+</Modal>

src/routes/(app)/patients/VisitListModal.svelte

@@ -3,13 +3,16 @@
   import { fetchVisitsByPatient } from '$lib/api/visits.js';
   import { error as toastError } from '$lib/utils/toast.js';
   import Modal from '$lib/components/Modal.svelte';
-  import { Calendar, Clock, MapPin, FileText, Plus } from 'lucide-svelte';
+  import VisitFormModal from './VisitFormModal.svelte';
+  import { Calendar, Clock, MapPin, FileText, Plus, Edit2 } from 'lucide-svelte';
 
   /** @type {{ open: boolean, patient: any | null }} */
   let { open = $bindable(false), patient = null } = $props();
 
   let visits = $state([]);
   let loading = $state(false);
+  let visitFormOpen = $state(false);
+  let selectedVisit = $state(null);
 
   onMount(() => {
     if (patient && open) {
@@ -29,7 +32,20 @@
     loading = true;
     try {
       const response = await fetchVisitsByPatient(patient.InternalPID);
-      visits = Array.isArray(response.data) ? response.data : [];
+      console.log('Visit API response:', response);
+      
+      // Handle different response structures
+      if (Array.isArray(response)) {
+        visits = response;
+      } else if (response.data && Array.isArray(response.data)) {
+        visits = response.data;
+      } else if (response.visits && Array.isArray(response.visits)) {
+        visits = response.visits;
+      } else {
+        visits = [];
+      }
+      
+      console.log('Processed visits:', visits);
     } catch (err) {
       toastError(err.message || 'Failed to load visits');
       visits = [];
@@ -47,18 +63,36 @@
     if (!dateStr) return '-';
     return new Date(dateStr).toLocaleString();
   }
+
+  function openCreateModal() {
+    selectedVisit = null;
+    visitFormOpen = true;
+  }
+
+  function openEditModal(visit) {
+    selectedVisit = visit;
+    visitFormOpen = true;
+  }
+
+  function handleVisitSaved() {
+    loadVisits();
+  }
 </script>
 
 <Modal bind:open title="Patient Visits" size="xl">
   {#if patient}
     <div class="mb-4 p-4 bg-base-200 rounded-lg">
-      <div class="flex items-center gap-4">
+      <div class="flex items-center justify-between">
         <div>
           <h3 class="font-bold text-lg">
             {[patient.Prefix, patient.NameFirst, patient.NameMiddle, patient.NameLast].filter(Boolean).join(' ')}
           </h3>
           <p class="text-sm text-gray-600">Patient ID: {patient.PatientID}</p>
         </div>
+        <button class="btn btn-primary btn-sm" onclick={openCreateModal}>
+          <Plus class="w-4 h-4 mr-1" />
+          New Visit
+        </button>
       </div>
     </div>
 
@@ -81,57 +115,70 @@
                 <div class="flex-1">
                   <div class="flex items-center gap-2 mb-2">
                     <Calendar class="w-4 h-4 text-primary" />
-                    <span class="font-semibold">{formatDate(visit.AdmissionDateTime)}</span>
-                    {#if visit.VisitStatus}
-                      <span class="badge badge-sm {visit.VisitStatus === 'Active' ? 'badge-success' : 'badge-ghost'}">
-                        {visit.VisitStatus}
-                      </span>
+                    <span class="font-semibold">{formatDate(visit.PVACreateDate || visit.PVCreateDate)}</span>
+                    {#if !visit.EndDate && !visit.ArchivedDate}
+                      <span class="badge badge-sm badge-success">Active</span>
+                    {:else}
+                      <span class="badge badge-sm badge-ghost">Closed</span>
                     {/if}
                   </div>
                   
                   <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-                    {#if visit.AdmissionType}
+                    {#if visit.ADTCode}
                       <div>
                         <span class="text-gray-500">Type:</span>
-                        <span class="ml-1">{visit.AdmissionType}</span>
+                        <span class="ml-1">{visit.ADTCode}</span>
                       </div>
                     {/if}
                     
-                    {#if visit.Location}
+                    {#if visit.LocCode || visit.LocationID}
                       <div class="flex items-center gap-1">
                         <MapPin class="w-3 h-3 text-gray-400" />
                         <span class="text-gray-500">Location:</span>
-                        <span class="ml-1">{visit.Location}</span>
+                        <span class="ml-1">{visit.LocCode || visit.LocationID || '-'}</span>
                       </div>
                     {/if}
                     
-                    {#if visit.DoctorName}
+                    {#if visit.AttDoc || visit.AdmDoc || visit.RefDoc || visit.CnsDoc}
                       <div>
                         <span class="text-gray-500">Doctor:</span>
-                        <span class="ml-1">{visit.DoctorName}</span>
+                        <span class="ml-1">{visit.AttDoc || visit.AdmDoc || visit.RefDoc || visit.CnsDoc || '-'}</span>
                       </div>
                     {/if}
                     
-                    {#if visit.AdmissionDateTime}
+                    {#if visit.PVACreateDate || visit.PVCreateDate}
                       <div class="flex items-center gap-1">
                         <Clock class="w-3 h-3 text-gray-400" />
                         <span class="text-gray-500">Time:</span>
-                        <span class="ml-1">{formatDateTime(visit.AdmissionDateTime)}</span>
+                        <span class="ml-1">{formatDateTime(visit.PVACreateDate || visit.PVCreateDate)}</span>
                       </div>
                     {/if}
                   </div>
 
-                  {#if visit.Diagnosis}
+                  {#if visit.DiagCode || visit.Diagnosis}
                     <div class="mt-3 pt-3 border-t border-base-200">
                       <div class="flex items-start gap-2">
                         <FileText class="w-4 h-4 text-gray-400 mt-0.5" />
                         <div>
                           <span class="text-gray-500 text-sm">Diagnosis:</span>
-                          <p class="text-sm mt-1">{visit.Diagnosis}</p>
+                          <p class="text-sm mt-1">{visit.DiagCode || visit.Diagnosis || '-'}</p>
                         </div>
                       </div>
                     </div>
                   {/if}
+                  
+                  <div class="mt-2 text-xs text-gray-400">
+                    Visit ID: {visit.PVID || visit.InternalPVID || '-'}
+                  </div>
+                </div>
+                <div class="flex gap-1 ml-4">
+                  <button
+                    class="btn btn-sm btn-ghost"
+                    title="Edit"
+                    onclick={() => openEditModal(visit)}
+                  >
+                    <Edit2 class="w-4 h-4" />
+                  </button>
                 </div>
               </div>
             </div>
@@ -141,13 +188,9 @@
     {/if}
   {/if}
 
+  <VisitFormModal bind:open={visitFormOpen} {patient} visit={selectedVisit} onSave={handleVisitSaved} />
+
   {#snippet footer()}
-    <div class="flex justify-between items-center w-full">
-      <button class="btn btn-primary btn-sm" onclick={() => {}} disabled>
-        <Plus class="w-4 h-4 mr-1" />
-        New Visit
-      </button>
-      <button class="btn btn-ghost" onclick={() => (open = false)} type="button">Close</button>
-    </div>
+    <button class="btn btn-ghost" onclick={() => (open = false)} type="button">Close</button>
   {/snippet}
 </Modal>