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

<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>