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

<script>
  import { onMount } from 'svelte';
  import { fetchTests, fetchTest, createTest, updateTest, deleteTest } 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 TestFormModal from './test-modal/TestFormModal.svelte';
  import TestTypePickerModal from './test-modal/modals/TestTypePickerModal.svelte';
  import { Plus, Edit2, Trash2, ArrowLeft, Search, Microscope, Variable, Calculator, Box, Layers, Loader2, Users } from 'lucide-svelte';

  let loading = $state(false);
  let tests = $state([]);
  let disciplines = $state([]);
  let departments = $state([]);
  let searchQuery = $state('');
  let modalOpen = $state(false);
  let modalMode = $state('create');
  let selectedTestId = $state(null);
  let selectedTestType = $state('TEST');
  let deleteConfirmOpen = $state(false);
  let deleteItem = $state(null);
  let deleting = $state(false);
  let testTypePickerOpen = $state(false);

  const testTypeConfig = {
    TEST: { label: 'Test', badgeClass: 'badge-primary', icon: Microscope, color: '#0066CC', bgColor: '#E6F2FF' },
    PARAM: { label: 'Parameter', badgeClass: 'badge-secondary', icon: Variable, color: '#3399FF', bgColor: '#F0F8FF' },
    CALC: { label: 'Calculated', badgeClass: 'badge-accent', icon: Calculator, color: '#9933CC', bgColor: '#F5E6FF' },
    GROUP: { label: 'Panel', badgeClass: 'badge-info', icon: Box, color: '#00AA44', bgColor: '#E6F9EE' },
    TITLE: { label: 'Header', badgeClass: 'badge-ghost', icon: Layers, color: '#666666', bgColor: '#F5F5F5' }
  };

  const columns = [
    { key: 'TestSiteCode', label: 'Code', class: 'font-medium w-24' },
    { key: 'TestSiteName', label: 'Name', class: 'min-w-[200px]' },
    { key: 'TestType', label: 'Type', class: 'w-28' },
    { key: 'DisciplineName', label: 'Discipline', class: 'w-32' },
    { key: 'DepartmentName', label: 'Department', class: 'w-32' },
    { key: 'Visible', label: 'Visible', class: 'w-24 text-center' },
    { key: 'actions', label: 'Actions', class: 'w-24 text-center' }
  ];

  const filteredTests = $derived.by(() => {
    if (!searchQuery.trim()) return tests;
    const query = searchQuery.toLowerCase().trim();
    return tests.filter(test => {
      const code = (test.TestSiteCode || '').toLowerCase();
      const name = (test.TestSiteName || '').toLowerCase();
      return code.includes(query) || name.includes(query);
    });
  });

  onMount(async () => {
    await Promise.all([loadTests(), loadDisciplines(), loadDepartments()]);
  });

  async function loadTests() {
    loading = true;
    try {
      const response = await fetchTests();
      tests = Array.isArray(response.data) ? response.data.filter(t => t.IsActive !== '0' && t.IsActive !== 0) : [];
    } 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) {
      console.error('Failed to load disciplines:', err);
      disciplines = [];
    }
  }

  async function loadDepartments() {
    try {
      const response = await fetchDepartments();
      departments = Array.isArray(response.data) ? response.data : [];
    } catch (err) {
      console.error('Failed to load departments:', err);
      departments = [];
    }
  }

  function openCreateModal() {
    testTypePickerOpen = true;
  }

  function handleTestTypeSelect(type) {
    selectedTestType = type;
    modalMode = 'create';
    selectedTestId = null;
    modalOpen = true;
  }

  async function openEditModal(row) {
    modalMode = 'edit';
    selectedTestId = row.TestSiteID;
    modalOpen = true;
  }

  function getTestTypeConfig(type) {
    return testTypeConfig[type] || testTypeConfig.TEST;
  }

  function confirmDelete(row) {
    deleteItem = row;
    deleteConfirmOpen = true;
  }

  async function handleDelete() {
    deleting = true;
    try {
      await deleteTest(deleteItem.TestSiteID);
      toastSuccess('Test deleted successfully');
      deleteConfirmOpen = false;
      await loadTests();
    } catch (err) {
      toastError(err.message || 'Failed to delete test');
    } finally {
      deleting = false;
    }
  }
</script>

<div class="p-4">
  <div class="flex items-center gap-4 mb-6">
    <a href="/master-data" class="btn btn-ghost btn-circle">
      <ArrowLeft class="w-5 h-5" />
    </a>
    <div class="flex-1">
      <h1 class="text-xl font-bold text-gray-800">Test Definitions</h1>
      <p class="text-sm text-gray-600">Manage laboratory tests, panels, and calculated values</p>
    </div>
    <button class="btn btn-primary" onclick={openCreateModal}>
      <Plus class="w-4 h-4 mr-2" />
      Add Test
    </button>
  </div>

  <div class="mb-4">
    <div class="max-w-md">
      <label class="input input-sm input-bordered w-full flex items-center gap-2">
        <Search class="w-5 h-5 text-gray-400" />
        <input
          type="text"
          class="grow"
          placeholder="Search by code or name..."
          bind:value={searchQuery}
        />
        {#if searchQuery}
          <button 
            class="btn btn-ghost btn-xs btn-circle"
            onclick={() => searchQuery = ''}
          >
            ×
          </button>
        {/if}
      </label>
    </div>
  </div>

  <div class="bg-base-100 rounded-lg shadow border border-base-200">
    {#if loading}
      <div class="flex items-center justify-center py-16">
        <Loader2 class="w-8 h-8 animate-spin text-primary mr-3" />
        <span class="text-gray-600">Loading tests...</span>
      </div>
    {:else if filteredTests.length === 0}
      <div class="flex flex-col items-center justify-center py-16 px-4">
        <div class="bg-base-200 rounded-full p-6 mb-4">
          <Microscope class="w-12 h-12 text-gray-400" />
        </div>
        <h3 class="text-base font-semibold text-gray-700 mb-1">
          {searchQuery ? 'No tests found' : 'No tests yet'}
        </h3>
        <p class="text-xs text-gray-500 text-center max-w-sm mb-4">
          {searchQuery 
            ? `No tests matching "${searchQuery}". Try a different search term.` 
            : 'Get started by adding your first laboratory test.'}
        </p>
        {#if !searchQuery}
          <button class="btn btn-primary" onclick={openCreateModal}>
            <Plus class="w-4 h-4 mr-2" />
            Add First Test
          </button>
        {/if}
      </div>
    {:else}
      <DataTable
        {columns}
        data={filteredTests}
        loading={false}
        emptyMessage="No tests found"
        hover={true}
        bordered={false}
      >
        {#snippet cell({ column, row, value })}
          {@const typeConfig = getTestTypeConfig(row.TestType)}
          {@const IconComponent = typeConfig.icon}
          {#if column.key === 'TestType'}
            <span class="badge gap-1" style="background-color: {typeConfig.bgColor}; color: {typeConfig.color}; border-color: {typeConfig.color};">
              <IconComponent class="w-3 h-3" />
              {typeConfig.label}
            </span>
          {:else if column.key === 'Visible'}
            <div class="flex justify-center gap-2">
              <span class="badge {row.VisibleScr === '1' || row.VisibleScr === 1 ? 'badge-success' : 'badge-ghost'} badge-sm">S</span>
              <span class="badge {row.VisibleRpt === '1' || row.VisibleRpt === 1 ? 'badge-success' : 'badge-ghost'} badge-sm">R</span>
            </div>
          {:else if column.key === 'actions'}
            <div class="flex justify-center gap-2">
              <button class="btn btn-sm btn-ghost" onclick={() => openEditModal(row)} title="Edit test">
                <Edit2 class="w-4 h-4" />
              </button>
              <button class="btn btn-sm btn-ghost text-error" onclick={() => confirmDelete(row)} title="Delete test">
                <Trash2 class="w-4 h-4" />
              </button>
            </div>
          {:else}
            {value || '-'}
          {/if}
        {/snippet}
      </DataTable>
    {/if}
  </div>
</div>

<TestTypePickerModal
  bind:open={testTypePickerOpen}
  onselect={handleTestTypeSelect}
/>

<TestFormModal
  bind:open={modalOpen}
  mode={modalMode}
  testId={selectedTestId}
  initialTestType={selectedTestType}
  {disciplines}
  {departments}
  {tests}
  onsave={async () => {
    modalOpen = false;
    await loadTests();
  }}
/>

<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?.TestSiteName}</strong>?
    </p>
    {#if deleteItem?.TestSiteCode}
      <p class="text-sm text-gray-500 mt-1">Code: {deleteItem.TestSiteCode}</p>
    {/if}
    <p class="text-sm text-error mt-3">This action cannot be undone.</p>
  </div>
  {#snippet footer()}
    <button class="btn btn-ghost" onclick={() => (deleteConfirmOpen = false)} type="button" disabled={deleting}>Cancel</button>
    <button class="btn btn-error" onclick={handleDelete} disabled={deleting} type="button">
      {#if deleting}
        <span class="loading loading-spinner loading-sm mr-2"></span>
      {/if}
      {deleting ? 'Deleting...' : 'Delete'}
    </button>
  {/snippet}
</Modal>