feat(tests): update RefNumTab component in test modal

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

@@ -107,6 +107,47 @@
     showAdvanced = false;
   }
 
+  function sexOverlaps(sex1, sex2) {
+    if (sex1 === '0' || sex2 === '0') return true;
+    return sex1 === sex2;
+  }
+
+  function specimenOverlaps(spec1, spec2) {
+    if (!spec1 && !spec2) return true;
+    if ((!spec1 && spec2) || (spec1 && !spec2)) return false;
+    return spec1 === spec2;
+  }
+
+  function ageOverlaps(start1, end1, start2, end2) {
+    const s1 = start1 || 0;
+    const e1 = end1 || 54750;
+    const s2 = start2 || 0;
+    const e2 = end2 || 54750;
+    return s1 < e2 && e1 > s2;
+  }
+
+  function findOverlappingRange(newRef, excludeIndex = null) {
+    const ageStart = convertAgeToDays(simpleRefNum.AgeStart, simpleRefNum.AgeUnit) || 0;
+    const ageEnd = convertAgeToDays(simpleRefNum.AgeEnd, simpleRefNum.AgeUnit) || 54750;
+
+    for (let i = 0; i < (formData.refnum?.length || 0); i++) {
+      if (excludeIndex !== null && i === excludeIndex) continue;
+
+      const existing = formData.refnum[i];
+
+      if (existing.NumRefType !== newRef.NumRefType) continue;
+
+      if (!sexOverlaps(existing.Sex, newRef.Sex)) continue;
+
+      if (!specimenOverlaps(existing.SpcType, newRef.SpcType)) continue;
+
+      if (ageOverlaps(existing.AgeStart, existing.AgeEnd, ageStart, ageEnd)) {
+        return existing;
+      }
+    }
+    return null;
+  }
+
   function validateSimpleRefNum() {
     if (!simpleRefNum.Low && !simpleRefNum.High) {
       return { valid: false, error: 'Please enter at least one value' };
@@ -128,6 +169,24 @@
       }
     }
 
+    const newRef = {
+      NumRefType: simpleRefNum.NumRefType,
+      Sex: simpleRefNum.Sex,
+      SpcType: simpleRefNum.SpcType || null,
+      AgeStart: convertAgeToDays(simpleRefNum.AgeStart, simpleRefNum.AgeUnit) || 0,
+      AgeEnd: convertAgeToDays(simpleRefNum.AgeEnd, simpleRefNum.AgeUnit) || 54750
+    };
+
+    const excludeIndex = isEditing ? editingIndex : null;
+    const overlap = findOverlappingRange(newRef, excludeIndex);
+
+    if (overlap) {
+      return {
+        valid: false,
+        error: `Overlaps with existing range: ${getNumRefTypeLabel(overlap.NumRefType)}, ${getSexLabel(overlap.Sex)}, ${getAgeDisplay(overlap.AgeStart)}-${getAgeDisplay(overlap.AgeEnd)}`
+      };
+    }
+
     return { valid: true };
   }
 
@@ -447,46 +506,47 @@
           <thead>
             <tr class="bg-base-200">
               <th class="w-16">Type</th>
-              <th class="w-24">Range</th>
               <th class="w-16">Sex</th>
               <th class="w-24">Age</th>
               <th class="w-20">Specimen</th>
               <th class="w-16">Flag</th>
               <th class="w-12">Disp</th>
-              <th class="w-24 text-center">Actions</th>
+              <th class="w-24">Range</th>
+              <th class="w-24 text-center">Edit</th>
+              <th class="w-12 text-center">Del</th>
             </tr>
           </thead>
           <tbody>
             {#each formData.refnum as ref, idx (idx)}
               <tr class="hover:bg-base-100">
                 <td class="text-xs">{getNumRefTypeLabel(ref.NumRefType)}</td>
-                <td class="font-mono text-sm">
-                  {ref.Low !== null && ref.Low !== '' ? ref.Low : '—'} 
-                  - 
-                  {ref.High !== null && ref.High !== '' ? ref.High : '—'}
-                </td>
                 <td>{getSexLabel(ref.Sex)}</td>
                 <td class="text-sm">{getAgeDisplay(ref.AgeStart)}-{getAgeDisplay(ref.AgeEnd)}</td>
                 <td class="text-sm">{ref.SpcType || '—'}</td>
                 <td class="text-sm">{ref.Flag || '—'}</td>
                 <td class="text-sm">{getDisplayLabel(ref.Display)}</td>
-                <td>
+                <td class="font-mono text-sm">
-                  <div class="flex justify-center gap-1">
+                  {ref.Low !== null && ref.Low !== '' ? ref.Low : '—'} 
-                    <button
+                  - 
-                      class="btn btn-ghost btn-xs"
+                  {ref.High !== null && ref.High !== '' ? ref.High : '—'}
-                      onclick={() => editRange(idx)}
+                </td>
-                      title="Edit Range"
+                <td class="text-center">
-                    >
+                  <button
-                      <Edit2 class="w-3 h-3" />
+                    class="btn btn-ghost btn-xs"
-                    </button>
+                    onclick={() => editRange(idx)}
-                    <button
+                    title="Edit Range"
-                      class="btn btn-ghost btn-xs text-error"
+                  >
-                      onclick={() => removeRange(idx)}
+                    <Edit2 class="w-3 h-3" />
-                      title="Remove Range"
+                  </button>
-                    >
+                </td>
-                      <Trash2 class="w-3 h-3" />
+                <td class="text-center">
-                    </button>
+                  <button
-                  </div>
+                    class="btn btn-ghost btn-xs text-error"
+                    onclick={() => removeRange(idx)}
+                    title="Remove Range"
+                  >
+                    <Trash2 class="w-3 h-3" />
+                  </button>
                 </td>
               </tr>
             {/each}