From 8f75a1339cd33968621a8ca623a7130b94544e23 Mon Sep 17 00:00:00 2001
From: mahdahar <89adham@gmail.com>
Date: Tue, 24 Feb 2026 06:12:17 +0700
Subject: [PATCH] feat(testmap): update test map page and modal components

---
 AGENTS.md                                     | 250 +++++++-----------
 .../(app)/master-data/testmap/+page.svelte    | 155 +++++++++--
 .../master-data/testmap/TestMapModal.svelte   |  95 ++++---
 3 files changed, 291 insertions(+), 209 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 195984a..3cb17f6 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,114 +1,79 @@
 # AGENTS.md - Coding Guidelines for CLQMS Frontend
 
-## Project Overview
+SvelteKit frontend for Clinical Laboratory Quality Management System. Uses Svelte 5 runes, TailwindCSS 4, DaisyUI, and Lucide icons.
 
-SvelteKit frontend for Clinical Laboratory Quality Management System (CLQMS). Uses Svelte 5 runes, TailwindCSS 4, DaisyUI, and Lucide icons.
-
-## Build Commands
+## Commands
 
 ```bash
-# Development server
-pnpm run dev
-
-# Production build
-pnpm run build
-
-# Preview production build
-pnpm run preview
-
-# Sync SvelteKit (runs automatically on install)
-pnpm run prepare
+pnpm run dev        # Development server
+pnpm run build      # Production build
+pnpm run preview    # Preview production build
+pnpm run prepare    # Sync SvelteKit
 ```
 
-## Testing
+**No test framework yet.** When adding: use Vitest (`vitest run src/path/to/test.js`), Playwright for E2E.
 
-**No test framework configured yet.** When adding tests:
-- Use Vitest for unit tests (recommended with SvelteKit)
-- Use Playwright for E2E tests
-- Run single test: `vitest run src/path/to/test.js`
-- Run tests in watch mode: `vitest`
+## Code Style
 
-## Code Style Guidelines
-
-### JavaScript/TypeScript
-
-- **ES Modules**: Always use `import`/`export` (type: "module" in package.json)
-- **Semicolons**: Use semicolons consistently
-- **Quotes**: Use single quotes for strings
+- **ES Modules**: `import`/`export` (type: "module")
+- **Semicolons**: Required
+- **Quotes**: Single quotes
 - **Indentation**: 2 spaces
-- **Trailing commas**: Use in multi-line objects/arrays
-- **JSDoc**: Document all exported functions with JSDoc comments
+- **Trailing commas**: In multi-line objects/arrays
+- **JSDoc**: Document all exported functions
 
-### Svelte Components
+## Naming Conventions
+
+- **Components**: PascalCase (`LoginForm.svelte`)
+- **Files/Routes**: lowercase with hyphens (`+page.svelte`)
+- **Variables**: camelCase (`isLoading`, `userName`)
+- **Constants**: UPPER_SNAKE_CASE (`API_URL`)
+- **Stores**: camelCase (`auth`, `config`)
+- **Handlers**: prefix with `handle` (`handleSubmit`)
+- **Form state**: `formLoading`, `formError`
+
+## Imports Order
+
+1. Svelte (`svelte`, `$app/*`)
+2. `$lib/*` (stores, api, components, utils)
+3. External libraries (`lucide-svelte`)
+4. Relative imports (minimize, prefer `$lib`)
+
+## Svelte 5 Components
 
 ```svelte
 <script>
-  // 1. Imports - Svelte, $app, $lib, external
+  // 1. Imports
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
-  import { browser } from '$app/environment';
   import { auth } from '$lib/stores/auth.js';
-  import { login } from '$lib/api/auth.js';
-  import { User, Lock } from 'lucide-svelte';
+  import { User } from 'lucide-svelte';
 
-  // 2. Props with $bindable for two-way binding
-  let { open = $bindable(false), title = '', children, footer } = $props();
+  // 2. Props with $bindable
+  let { open = $bindable(false), title = '', children } = $props();
 
   // 3. State
   let loading = $state(false);
-  let error = $state('');
+  let formData = $state({ name: '' });
 
-  // 4. Derived state (if needed)
-  let isValid = $derived(username.length > 0);
+  // 4. Derived
+  let isValid = $derived(formData.name.length > 0);
 
   // 5. Effects
   $effect(() => { /* side effects */ });
 
-  // 6. Functions - prefix handlers with 'handle'
-  function handleSubmit() { /* implementation */ }
+  // 6. Handlers
+  function handleSubmit() { /* impl */ }
 </script>
 ```
 
-### Naming Conventions
-
-- **Components**: PascalCase (`LoginForm.svelte`, `PatientFormModal.svelte`)
-- **Files/Routes**: lowercase with hyphens (`+page.svelte`, `user-profile/`)
-- **Variables**: camelCase (`isLoading`, `userName`)
-- **Constants**: UPPER_SNAKE_CASE (`API_URL`, `STORAGE_KEY`)
-- **Stores**: camelCase, descriptive (`auth`, `userStore`)
-- **Event handlers**: prefix with `handle` (`handleSubmit`, `handleClick`)
-- **Form state**: `formLoading`, `formError`, `deleteConfirmOpen`
-
-### Imports Order
-
-1. Svelte imports (`svelte`, `$app/*`)
-2. $lib aliases (`$lib/stores/*`, `$lib/api/*`, `$lib/components/*`, `$lib/utils/*`)
-3. External libraries (`lucide-svelte`)
-4. Relative imports (minimize these, prefer `$lib`)
-
-### Project Structure
-
-```
-src/
-  lib/
-    api/          # API client and endpoints (per feature)
-    stores/       # Svelte stores (auth, config, valuesets)
-    components/   # Reusable components (DataTable, Modal, Sidebar)
-    utils/        # Utilities (toast, helpers)
-    assets/       # Static assets
-  routes/         # SvelteKit routes
-    (app)/        # Route groups (protected)
-    login/
-    dashboard/
-```
-
-### API Client Patterns
+## API Patterns
 
 ```javascript
-// src/lib/api/client.js - Base client handles auth, 401 redirects
-import { apiClient, get, post, put, patch, del } from '$lib/api/client.js';
+// src/lib/api/client.js - Use these helpers
+import { get, post, put, patch, del } from '$lib/api/client.js';
 
-// src/lib/api/feature.js - Feature-specific endpoints with JSDoc
+// Feature endpoints (with JSDoc)
 export async function fetchItems(params = {}) {
   const query = new URLSearchParams(params).toString();
   return get(query ? `/api/items?${query}` : '/api/items');
@@ -118,8 +83,8 @@ export async function createItem(data) {
   return post('/api/items', data);
 }
 
-export async function updateItem(data) {
-  return patch('/api/items', data);
+export async function updateItem(id, data) {
+  return patch(`/api/items/${id}`, data);
 }
 
 export async function deleteItem(id) {
@@ -127,45 +92,46 @@ export async function deleteItem(id) {
 }
 ```
 
-### Store Patterns
+## Store Patterns
 
 ```javascript
-// Use writable for stores with localStorage persistence
 import { writable } from 'svelte/store';
 import { browser } from '$app/environment';
 
 function createStore() {
   const getInitialState = () => {
     if (!browser) return { data: null };
-    return { data: JSON.parse(localStorage.getItem('key')) };
+    return JSON.parse(localStorage.getItem('key'));
   };
 
-  const { subscribe, set, update } = writable(getInitialState());
+  const { subscribe, set } = writable(getInitialState());
 
   return {
     subscribe,
     setData: (data) => {
       if (browser) localStorage.setItem('key', JSON.stringify(data));
-      set({ data });
+      set(data);
     }
   };
 }
 ```
 
-### Component Patterns
+## Component Patterns
 
 ```svelte
-<!-- Use $bindable for two-way props -->
-let { open = $bindable(false), selected = $bindable(null) } = $props();
+<!-- Modal with $bindable props -->
+<Modal bind:open={showModal} title="Edit" size="lg">
+  {#snippet children()}
+    <form>...</form>
+  {/snippet}
+  {#snippet footer()}
+    <button class="btn btn-primary">Save</button>
+  {/snippet}
+</Modal>
 
-<!-- Use snippets for slot content -->
-{@render children?.()}
-{@render footer()}
-
-<!-- Dialog with backdrop handling -->
-<dialog class="modal" class:modal-open={open}>
+<!-- Dialog with backdrop -->
+<dialog class="modal modal-open">
   <div class="modal-box">
-    <button onclick={close}>X</button>
     {@render children?.()}
   </div>
   <form method="dialog" class="modal-backdrop" onclick={handleBackdropClick}>
@@ -174,52 +140,22 @@ let { open = $bindable(false), selected = $bindable(null) } = $props();
 </dialog>
 ```
 
-### Error Handling
+## Error Handling
 
 ```javascript
 try {
   const result = await api.fetchData();
-  toastSuccess('Operation successful');
+  success('Operation successful');
 } catch (err) {
   const message = err.message || 'An unexpected error occurred';
-  toastError(message);
+  error(message);
   console.error('Operation failed:', err);
 }
 ```
 
-### Styling with Tailwind & DaisyUI
-
-- DaisyUI components: `btn`, `card`, `alert`, `input`, `navbar`, `modal`, `dropdown`, `menu`
-- Color scheme: `primary` (emerald), `secondary` (dark blue), `accent` (royal blue)
-- Custom compact classes: `.compact-y`, `.compact-p`, `.compact-input`, `.compact-btn`, `.compact-card`
-- Size modifiers: `.btn-sm`, `.input-sm`, `.select-sm` for compact forms
-
-### Authentication Patterns
-
-- Auth state in `$lib/stores/auth.js` using writable store
-- Check `$auth.isAuthenticated` in layout `onMount`
-- Redirect to `/login` if unauthenticated using `goto('/login')`
-- API client auto-redirects on 401 responses
-
-### Runtime Config Pattern
+## Form Patterns
 
 ```javascript
-// Use runtime config for API URL that can be changed at runtime
-import { config } from '$lib/stores/config.js';
-function getApiUrl() {
-  return config.getApiUrl() || import.meta.env.VITE_API_URL || '';
-}
-```
-
-### LocalStorage
-
-- Only access in browser: check `browser` from `$app/environment`
-- Use descriptive keys: `clqms_username`, `clqms_remember`, `auth_token`
-
-### Form Handling Patterns
-
-```javascript
-// Form state with validation
 let formLoading = $state(false);
 let formError = $state('');
 let formData = $state({ username: '', password: '' });
@@ -238,7 +174,7 @@ async function handleSubmit() {
   formLoading = true;
   try {
     await api.submit(formData);
-    toastSuccess('Success');
+    success('Success');
   } catch (err) {
     formError = err.message;
   } finally {
@@ -247,31 +183,43 @@ async function handleSubmit() {
 }
 ```
 
-### Toast/Notification System
+## Styling (DaisyUI + Tailwind)
 
-```javascript
-import { success, error, info, warning } from '$lib/utils/toast.js';
+- **Components**: `btn`, `card`, `alert`, `input`, `navbar`, `modal`, `dropdown`
+- **Colors**: `primary` (emerald), `secondary` (dark blue), `accent` (royal blue)
+- **Sizes**: `btn-sm`, `input-sm`, `select-sm` for compact forms
+- **Custom**: `.compact-y`, `.compact-p`, `.compact-input`
+
+## Authentication
+
+- Check `$auth.isAuthenticated` in layout `onMount`
+- Redirect to `/login` if unauthenticated using `goto('/login')`
+- API client auto-redirects on 401
+
+## LocalStorage
+
+- Only access in browser: check `browser` from `$app/environment`
+- Use descriptive keys: `clqms_username`, `auth_token`
+
+## Project Structure
 
-// Use toast notifications for user feedback
-success('Item created successfully');
-error('Failed to create item');
-info('New message received');
-warning('Action requires confirmation');
 ```
-
-## Proxy Configuration
-
-API requests to `/api` are proxied to `http://localhost:8000` in dev. See `vite.config.js`.
-
-## API Documentation
-
-API Reference (Swagger UI): https://clqms01-api.services-summit.my.id/swagger/
+src/
+  lib/
+    api/          # API clients per feature
+    stores/       # Svelte stores
+    components/   # Reusable components
+    utils/        # Utilities (toast, helpers)
+  routes/         # SvelteKit routes
+    (app)/        # Route groups (protected)
+    login/
+    dashboard/
+```
 
 ## Important Notes
 
-- No ESLint or Prettier configured yet - add if needed
-- No test framework configured yet
-- Uses Svelte 5 runes: `$props`, `$state`, `$derived`, `$effect`, `$bindable`
-- SvelteKit file-based routing with `+page.svelte`, `+layout.svelte`
+- Uses Svelte 5: `$props`, `$state`, `$derived`, `$effect`, `$bindable`
 - Static adapter configured for static export
 - Runtime config allows API URL changes without rebuild
+- API proxy: `/api` → `http://localhost:8000` (dev)
+- API Docs: https://clqms01-api.services-summit.my.id/swagger/
diff --git a/src/routes/(app)/master-data/testmap/+page.svelte b/src/routes/(app)/master-data/testmap/+page.svelte
index 478f811..e8bfb4e 100644
--- a/src/routes/(app)/master-data/testmap/+page.svelte
+++ b/src/routes/(app)/master-data/testmap/+page.svelte
@@ -19,6 +19,7 @@
     Monitor,
     Filter,
     X,
+    FileText,
   } from 'lucide-svelte';
 
   let loading = $state(false);
@@ -27,9 +28,11 @@
   let modalOpen = $state(false);
   let modalMode = $state('create');
   let modalData = $state(null);
+  let modalGroupData = $state(null);
   let deleting = $state(false);
   let deleteConfirmOpen = $state(false);
   let deleteItem = $state(null);
+  let deleteGroupMode = $state(false);
 
   // Filter states
   let filterHostType = $state('');
@@ -38,28 +41,57 @@
   let filterClientID = $state('');
 
   const columns = [
-    { key: 'HostType', label: 'Host Type', class: 'w-20' },
-    { key: 'HostID', label: 'Host ID', class: 'w-32' },
-    { key: 'ClientType', label: 'Client Type', class: 'w-24' },
-    { key: 'ClientID', label: 'Client ID', class: 'w-32' },
-    { key: 'actions', label: 'Actions', class: 'w-24 text-center' },
+    { key: 'HostInfo', label: 'Host System', class: 'w-48' },
+    { key: 'ClientInfo', label: 'Client System', class: 'w-48' },
+    { key: 'TestCount', label: 'Tests', class: 'w-24 text-center' },
+    { key: 'TestPreview', label: 'Test Codes', class: 'flex-1' },
+    { key: 'actions', label: 'Actions', class: 'w-32 text-center' },
   ];
 
-  // Derived filtered test maps
-  let filteredTestMaps = $derived(
-    testMaps.filter((mapping) => {
+  // Group test mappings by HostType/HostID/ClientType/ClientID
+  let groupedTestMaps = $derived(() => {
+    const groups = new Map();
+
+    testMaps.forEach((mapping) => {
+      const key = `${mapping.HostType || ''}|${mapping.HostID || ''}|${mapping.ClientType || ''}|${mapping.ClientID || ''}`;
+
+      if (!groups.has(key)) {
+        groups.set(key, {
+          key,
+          HostType: mapping.HostType || '',
+          HostID: mapping.HostID || '',
+          ClientType: mapping.ClientType || '',
+          ClientID: mapping.ClientID || '',
+          mappings: [],
+          testCodes: [],
+        });
+      }
+
+      const group = groups.get(key);
+      group.mappings.push(mapping);
+      if (mapping.HostTestCode) {
+        group.testCodes.push(mapping.HostTestCode);
+      }
+    });
+
+    return Array.from(groups.values());
+  });
+
+  // Derived filtered grouped test maps
+  let filteredGroupedTestMaps = $derived(
+    groupedTestMaps().filter((group) => {
       const matchesHostType =
         !filterHostType ||
-        (mapping.HostType && mapping.HostType.toLowerCase().includes(filterHostType.toLowerCase()));
+        (group.HostType && group.HostType.toLowerCase().includes(filterHostType.toLowerCase()));
       const matchesHostID =
         !filterHostID ||
-        (mapping.HostID && mapping.HostID.toLowerCase().includes(filterHostID.toLowerCase()));
+        (group.HostID && group.HostID.toLowerCase().includes(filterHostID.toLowerCase()));
       const matchesClientType =
         !filterClientType ||
-        (mapping.ClientType && mapping.ClientType.toLowerCase().includes(filterClientType.toLowerCase()));
+        (group.ClientType && group.ClientType.toLowerCase().includes(filterClientType.toLowerCase()));
       const matchesClientID =
         !filterClientID ||
-        (mapping.ClientID && mapping.ClientID.toLowerCase().includes(filterClientID.toLowerCase()));
+        (group.ClientID && group.ClientID.toLowerCase().includes(filterClientID.toLowerCase()));
 
       return matchesHostType && matchesHostID && matchesClientType && matchesClientID;
     })
@@ -95,12 +127,15 @@
   function openCreateModal() {
     modalMode = 'create';
     modalData = null;
+    modalGroupData = null;
     modalOpen = true;
   }
 
-  function openEditModal(row) {
+  function openEditGroupModal(group) {
     modalMode = 'edit';
-    modalData = row;
+    modalGroupData = group;
+    // Pass the first mapping as initial data, modal will handle the rest
+    modalData = group.mappings[0] || null;
     modalOpen = true;
   }
 
@@ -108,21 +143,33 @@
     loadTestMaps();
   }
 
-  function confirmDelete(row) {
-    deleteItem = row;
+  function confirmDeleteGroup(group) {
+    deleteItem = group;
+    deleteGroupMode = true;
     deleteConfirmOpen = true;
   }
 
   async function handleDelete() {
     deleting = true;
     try {
-      await deleteTestMap(deleteItem.TestMapID);
-      toastSuccess('Test mapping deleted successfully');
+      if (deleteGroupMode && deleteItem) {
+        // Delete all mappings in the group
+        const deletePromises = deleteItem.mappings.map((mapping) =>
+          deleteTestMap(mapping.TestMapID)
+        );
+        await Promise.all(deletePromises);
+        toastSuccess(`Deleted ${deleteItem.mappings.length} test mapping(s) successfully`);
+      } else if (deleteItem?.TestMapID) {
+        // Delete single mapping (fallback)
+        await deleteTestMap(deleteItem.TestMapID);
+        toastSuccess('Test mapping deleted successfully');
+      }
       deleteConfirmOpen = false;
       deleteItem = null;
+      deleteGroupMode = false;
       await loadTestMaps();
     } catch (err) {
-      toastError(err.message || 'Failed to delete test mapping');
+      toastError(err.message || 'Failed to delete test mapping(s)');
     } finally {
       deleting = false;
     }
@@ -134,6 +181,16 @@
     filterClientType = '';
     filterClientID = '';
   }
+
+  function getTestCodesPreview(testCodes, maxCount = 3) {
+    if (!testCodes || testCodes.length === 0) return '-';
+    const displayCodes = testCodes.slice(0, maxCount);
+    const remaining = testCodes.length - maxCount;
+    if (remaining > 0) {
+      return `${displayCodes.join(', ')} +${remaining} more`;
+    }
+    return displayCodes.join(', ');
+  }
 </script>
 
 <div class="p-4">
@@ -213,7 +270,7 @@
 
   <!-- Data Table -->
   <div class="bg-base-100 rounded-lg shadow border border-base-200">
-    {#if !loading && filteredTestMaps.length === 0}
+    {#if !loading && filteredGroupedTestMaps.length === 0}
       <!-- Empty State -->
       <div class="flex flex-col items-center justify-center py-16 px-4">
         <div class="bg-base-200 rounded-full p-6 mb-4">
@@ -247,26 +304,55 @@
     {:else}
       <DataTable
         {columns}
-        data={filteredTestMaps}
+        data={filteredGroupedTestMaps}
         {loading}
         emptyMessage="No test mappings found"
         hover={true}
         bordered={false}
       >
         {#snippet cell({ column, row, value })}
-          {#if column.key === 'actions'}
+          {#if column.key === 'HostInfo'}
+            <div class="flex items-center gap-2">
+              <Server class="w-4 h-4 text-primary flex-shrink-0" />
+              <div>
+                <div class="font-medium text-sm">{row.HostType || '-'}</div>
+                <div class="text-xs text-gray-500">{row.HostID || '-'}</div>
+              </div>
+            </div>
+          {:else if column.key === 'ClientInfo'}
+            <div class="flex items-center gap-2">
+              <Monitor class="w-4 h-4 text-secondary flex-shrink-0" />
+              <div>
+                <div class="font-medium text-sm">{row.ClientType || '-'}</div>
+                <div class="text-xs text-gray-500">{row.ClientID || '-'}</div>
+              </div>
+            </div>
+          {:else if column.key === 'TestCount'}
+            <div class="flex justify-center">
+              <span class="badge badge-primary badge-sm">
+                {row.mappings.length}
+              </span>
+            </div>
+          {:else if column.key === 'TestPreview'}
+            <div class="flex items-center gap-2 text-sm">
+              <FileText class="w-4 h-4 text-gray-400 flex-shrink-0" />
+              <span class="text-gray-600 truncate" title={row.testCodes.join(', ')}>
+                {getTestCodesPreview(row.testCodes)}
+              </span>
+            </div>
+          {:else if column.key === 'actions'}
             <div class="flex justify-center gap-1">
               <button
                 class="btn btn-sm btn-ghost"
-                onclick={() => openEditModal(row)}
-                title="Edit mapping"
+                onclick={() => openEditGroupModal(row)}
+                title="Edit all {row.mappings.length} test mapping(s)"
               >
                 <Edit2 class="w-4 h-4" />
               </button>
               <button
                 class="btn btn-sm btn-ghost text-error"
-                onclick={() => confirmDelete(row)}
-                title="Delete mapping"
+                onclick={() => confirmDeleteGroup(row)}
+                title="Delete all {row.mappings.length} test mapping(s)"
               >
                 <Trash2 class="w-4 h-4" />
               </button>
@@ -285,14 +371,21 @@
   bind:open={modalOpen}
   mode={modalMode}
   initialData={modalData}
+  groupData={modalGroupData}
   {containers}
   onSave={handleModalSave}
 />
 
 <!-- Delete Confirmation Modal -->
-<Modal bind:open={deleteConfirmOpen} title="Confirm Delete Mapping" size="sm">
+<Modal bind:open={deleteConfirmOpen} title={deleteGroupMode ? 'Confirm Delete Group' : 'Confirm Delete Mapping'} size="sm">
   <div class="py-2">
-    <p class="text-base-content/80">Are you sure you want to delete this test mapping?</p>
+    <p class="text-base-content/80">
+      {#if deleteGroupMode}
+        Are you sure you want to delete all {deleteItem?.mappings?.length || 0} test mapping(s) in this group?
+      {:else}
+        Are you sure you want to delete this test mapping?
+      {/if}
+    </p>
     <div class="bg-base-200 rounded-lg p-3 mt-3 space-y-1">
       <p class="text-sm">
         <span class="text-gray-500">Host:</span>
@@ -302,6 +395,12 @@
         <span class="text-gray-500">Client:</span>
         <strong class="text-base-content">{deleteItem?.ClientType} / {deleteItem?.ClientID}</strong>
       </p>
+      {#if deleteGroupMode && deleteItem?.testCodes?.length > 0}
+        <p class="text-sm">
+          <span class="text-gray-500">Tests:</span>
+          <strong class="text-base-content">{deleteItem.testCodes.slice(0, 5).join(', ')}{deleteItem.testCodes.length > 5 ? '...' : ''}</strong>
+        </p>
+      {/if}
     </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">
diff --git a/src/routes/(app)/master-data/testmap/TestMapModal.svelte b/src/routes/(app)/master-data/testmap/TestMapModal.svelte
index b795d5d..8e421b5 100644
--- a/src/routes/(app)/master-data/testmap/TestMapModal.svelte
+++ b/src/routes/(app)/master-data/testmap/TestMapModal.svelte
@@ -8,9 +8,10 @@
     Server,
     Monitor,
     FlaskConical,
+    AlertCircle,
   } from 'lucide-svelte';
 
-  let { open = $bindable(false), mode = 'create', initialData = null, containers = [], onSave } = $props();
+  let { open = $bindable(false), mode = 'create', initialData = null, groupData = null, containers = [], onSave } = $props();
 
   let saving = $state(false);
 
@@ -41,7 +42,27 @@
   function initializeModal() {
     formErrors = {};
     
-    if (mode === 'edit' && initialData) {
+    if (mode === 'edit' && groupData) {
+      // Edit mode with group data - load all mappings in the group
+      modalContext = {
+        HostType: groupData.HostType || '',
+        HostID: groupData.HostID || '',
+        ClientType: groupData.ClientType || '',
+        ClientID: groupData.ClientID || '',
+      };
+      
+      // Load all mappings from the group
+      modalRows = groupData.mappings.map((mapping) => ({
+        TestMapID: mapping.TestMapID,
+        HostTestCode: mapping.HostTestCode || '',
+        HostTestName: mapping.HostTestName || '',
+        ConDefID: mapping.ConDefID || null,
+        ClientTestCode: mapping.ClientTestCode || '',
+        ClientTestName: mapping.ClientTestName || '',
+        isNew: false,
+      }));
+    } else if (mode === 'edit' && initialData) {
+      // Legacy edit mode (single mapping)
       modalContext = {
         HostType: initialData.HostType || '',
         HostID: initialData.HostID || '',
@@ -58,6 +79,7 @@
         isNew: false,
       }];
     } else {
+      // Create mode
       modalContext = {
         HostType: '',
         HostID: '',
@@ -184,12 +206,25 @@
 
 <Modal
   bind:open
-  title={mode === 'create' ? 'Add Test Mapping' : 'Edit Test Mapping'}
+  title={mode === 'create' ? 'Add Test Mapping' : `Edit Test Mapping${groupData ? 's' : ''} (${modalRows.length})`}
   size="xl"
 >
-  <div class="space-y-4 max-h-[70vh] overflow-y-auto">
-    <!-- Top Section: Host and Client side-by-side -->
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-b border-base-300 pb-4">
+  <div class="flex flex-col max-h-[70vh]">
+    <!-- Sticky Top Section: Info banner + Host and Client -->
+    <div class="flex-shrink-0 bg-base-100 z-10">
+      <!-- Info banner for group editing -->
+      {#if mode === 'edit' && groupData}
+        <div class="alert alert-info alert-sm mb-4">
+          <AlertCircle class="w-4 h-4" />
+          <div>
+            <span class="font-medium">Editing {modalRows.length} test mapping(s)</span>
+            <span class="text-sm opacity-80">in this host-client group</span>
+          </div>
+        </div>
+      {/if}
+
+      <!-- Top Section: Host and Client side-by-side -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-b border-base-300 pb-4">
       <!-- Host Section -->
       <div class="space-y-2">
         <h3 class="text-xs font-medium text-gray-600 uppercase tracking-wide flex items-center gap-1">
@@ -289,8 +324,8 @@
       </div>
     </div>
 
-    <!-- Middle Section: Editable Table -->
-    <div class="space-y-2">
+    <!-- Scrollable Middle Section: Editable Table -->
+    <div class="flex-1 overflow-y-auto space-y-1 py-2">
       <h3 class="text-xs font-medium text-gray-600 uppercase tracking-wide flex items-center gap-1">
         <FlaskConical class="w-3 h-3" />
         Test Mappings
@@ -298,40 +333,40 @@
       </h3>
 
       <div class="overflow-x-auto border border-base-300 rounded-lg">
-        <table class="table table-compact w-full">
+        <table class="table table-compact w-full [&_td]:py-1 [&_th]:py-1">
           <thead class="bg-base-200">
             <tr>
-              <th class="text-xs">Host Test Code</th>
-              <th class="text-xs">Host Test Name</th>
-              <th class="text-xs w-48">Container</th>
-              <th class="text-xs">Client Test Code</th>
-              <th class="text-xs">Client Test Name</th>
-              <th class="text-xs w-10"></th>
+              <th class="text-xs px-2">Host Test Code</th>
+              <th class="text-xs px-2">Host Test Name</th>
+              <th class="text-xs w-48 px-2">Container</th>
+              <th class="text-xs px-2">Client Test Code</th>
+              <th class="text-xs px-2">Client Test Name</th>
+              <th class="text-xs w-10 px-2"></th>
             </tr>
           </thead>
           <tbody>
             {#each modalRows as row, index (index)}
               <tr class="hover:bg-base-100">
-                <td>
+                <td class="px-2">
                   <input
                     type="text"
-                    class="input input-xs input-bordered w-full"
+                    class="input input-xs input-bordered w-full m-0"
                     bind:value={row.HostTestCode}
                     placeholder="Code"
                   />
                 </td>
-                <td>
+                <td class="px-2">
                   <input
                     type="text"
-                    class="input input-xs input-bordered w-full"
+                    class="input input-xs input-bordered w-full m-0"
                     bind:value={row.HostTestName}
                     placeholder="Name"
                   />
                 </td>
-                <td>
+                <td class="px-2">
                   {#if modalContext.ClientType === 'INST'}
                     <select
-                      class="select select-xs select-bordered w-full"
+                      class="select select-xs select-bordered w-full m-0"
                       bind:value={row.ConDefID}
                     >
                       <option value={null}>Select container...</option>
@@ -345,32 +380,32 @@
                       <span class="text-xs text-error">{formErrors.rows[index].ConDefID}</span>
                     {/if}
                   {:else}
-                    <select class="select select-xs select-bordered w-full" disabled>
+                    <select class="select select-xs select-bordered w-full m-0" disabled>
                       <option>Only for INST</option>
                     </select>
                   {/if}
                 </td>
-                <td>
+                <td class="px-2">
                   <input
                     type="text"
-                    class="input input-xs input-bordered w-full"
+                    class="input input-xs input-bordered w-full m-0"
                     bind:value={row.ClientTestCode}
                     placeholder="Code"
                   />
                 </td>
-                <td>
+                <td class="px-2">
                   <input
                     type="text"
-                    class="input input-xs input-bordered w-full"
+                    class="input input-xs input-bordered w-full m-0"
                     bind:value={row.ClientTestName}
                     placeholder="Name"
                   />
                 </td>
-                <td>
+                <td class="px-2">
                   <button
                     class="btn btn-ghost btn-xs text-error"
                     onclick={() => removeMappingRow(index)}
-                    disabled={modalRows.length === 1}
+                    disabled={modalRows.length === 1 && mode === 'edit'}
                     title="Remove row"
                   >
                     <Trash2 class="w-3 h-3" />
@@ -391,8 +426,8 @@
       {/if}
     </div>
 
-    <!-- Bottom Section: Add Button -->
-    <div class="flex justify-center pt-2 border-t border-base-300">
+    <!-- Sticky Bottom Section: Add Button -->
+    <div class="flex-shrink-0 flex justify-center pt-2 border-t border-base-300 bg-base-100 pb-2">
       <button class="btn btn-sm btn-outline" onclick={addMappingRow}>
         <Plus class="w-4 h-4 mr-1" />
         Add Mapping