data-entry-app/frontend/src/lib/components/throughput/ThroughputComposer.svelte

<script lang="ts">
  import { Plus, TriangleAlert, X } from 'lucide-svelte';

  import ThroughputProductPicker from '$lib/components/throughput/ThroughputProductPicker.svelte';
  import type { ThroughputProduct, ThroughputQuantityType } from '$lib/types';

  let {
    products,
    editingId,
    saving,
    nDate = $bindable(''),
    nProductId = $bindable(''),
    nQuantity = $bindable(''),
    nType = $bindable<ThroughputQuantityType>('bags'),
    nBagSize = $bindable(''),
    nStaff = $bindable(''),
    nNotes = $bindable(''),
    nForOrder = $bindable(false),
    nForStock = $bindable(false),
    nJobNumber = $bindable(''),
    nStockQty = $bindable(''),
    showNote = $bindable(false),
    addError,
    isSplit,
    addTotalKg,
    formatNumber,
    onSubmit,
    onDismissNote,
    onCancelEdit,
    composerRef = $bindable<HTMLElement | null>(null)
  }: {
    products: ThroughputProduct[];
    editingId: number | null;
    saving: boolean;
    nDate?: string;
    nProductId?: string;
    nQuantity?: string;
    nType?: ThroughputQuantityType;
    nBagSize?: string;
    nStaff?: string;
    nNotes?: string;
    nForOrder?: boolean;
    nForStock?: boolean;
    nJobNumber?: string;
    nStockQty?: string;
    showNote?: boolean;
    addError: string;
    isSplit: boolean;
    addTotalKg: number | null;
    formatNumber: (value: number | null | undefined, digits?: number) => string;
    onSubmit: () => void;
    onDismissNote: () => void;
    onCancelEdit: () => void;
    composerRef?: HTMLElement | null;
  } = $props();
</script>

<div class="composer" class:editing={editingId != null} bind:this={composerRef}>
  <div class="composer-head">
    <div class="composer-title">
      <h2>{editingId != null ? 'Edit packing run' : 'Add a packing run'}</h2>
    </div>
    {#if editingId != null}
      <button type="button" class="cancel-edit" onclick={onCancelEdit}>
        <X size={16} strokeWidth={2.4} /> Cancel edit
      </button>
    {/if}
  </div>

  <form class="add-row" onsubmit={(e) => { e.preventDefault(); onSubmit(); }}>
    <div class="add-cell">
      <span class="cell-label">Date</span>
      <input type="date" bind:value={nDate} aria-label="Production date" />
    </div>
    <div class="add-cell add-product">
      <span class="cell-label">Product</span>
      <ThroughputProductPicker {products} bind:productId={nProductId} inputId="throughput-add-product" />
    </div>
    <div class="add-cell">
      <span class="cell-label">Packed</span>
      <div class="packed-inputs">
        <input
          class="qty"
          type="number"
          min="0"
          step="0.01"
          inputmode="decimal"
          bind:value={nQuantity}
          placeholder={nType === 'bags' ? 'Bags' : 'Total kg'}
          aria-label={nType === 'bags' ? 'Number of bags' : 'Total kilograms'}
        />
        <select class="unit" bind:value={nType} aria-label="Bags or kilograms">
          <option value="bags">bags</option>
          <option value="kg">kg (bulka)</option>
        </select>
        {#if nType === 'bags'}
          <span class="times" aria-hidden="true">×</span>
          <input
            class="bag"
            type="number"
            min="0"
            step="0.01"
            inputmode="decimal"
            bind:value={nBagSize}
            placeholder="kg/bag"
            aria-label="Kilograms per bag"
          />
        {/if}
      </div>
      {#if nType === 'bags' && addTotalKg !== null}
        <span class="packed-total">= {formatNumber(addTotalKg)} kg total</span>
      {/if}
    </div>
    <div class="add-cell">
      <span class="cell-label">Packed by</span>
      <input type="text" bind:value={nStaff} placeholder="Name" aria-label="Packed by" />
    </div>
    <div class="add-cell add-action">
      <button type="submit" class="add-entry-button" disabled={saving}>
        <Plus size={18} strokeWidth={2.6} />
        <span>{saving ? 'Saving…' : editingId != null ? 'Save' : 'Add'}</span>
      </button>
    </div>

    <div class="add-extra">
      {#if showNote}
        <div class="note-field">
          <input
            class="note-input"
            type="text"
            bind:value={nNotes}
            placeholder="Note (optional)"
            aria-label="Note"
          />
          <button
            type="button"
            class="note-dismiss"
            title="Remove note"
            aria-label="Remove note"
            onclick={onDismissNote}
          >
            <X size={16} strokeWidth={2.4} />
          </button>
        </div>
      {:else}
        <button type="button" class="link-button" onclick={() => (showNote = true)}>+ Add a note</button>
      {/if}
      {#if addError}
        <span class="add-error"><TriangleAlert size={15} strokeWidth={2.4} /> {addError}</span>
      {/if}
    </div>
  </form>
</div>

<style>
  .composer {
    display: grid;
    gap: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--color-brand) 16%, var(--color-border));
    border-radius: 1rem;
    background: var(--color-bg-surface);
    box-shadow: 0 16px 34px -28px rgba(15, 23, 42, 0.28);
    /* The product picker menu is absolutely positioned and needs to escape the
       card bounds without being cut off. */
    overflow: visible;
  }

  .composer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.45rem 0;
  }

  .composer-title h2 {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .add-row {
    display: grid;
    grid-template-columns: 7.5rem minmax(19rem, 1.7fr) minmax(14rem, 1.15fr) minmax(10rem, 0.9fr) auto;
    gap: 0.75rem 0.85rem;
    align-items: start;
    padding: 0 1.45rem 1.25rem;
  }

  .add-cell {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
  }

  .add-row input:not([type='checkbox']),
  .add-row select {
    width: 100%;
    min-height: 48px;
    padding: 0.62rem 0.78rem;
    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, var(--color-border));
    border-radius: 0.8rem;
    font-size: 0.98rem;
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
  }

  .add-row input:not([type='checkbox']):focus-visible,
  .add-row select:focus-visible,
  .cancel-edit:focus-visible,
  .add-entry-button:focus-visible,
  .note-dismiss:focus-visible {
    outline: 3px solid var(--color-brand);
    outline-offset: 2px;
  }

  .packed-inputs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .packed-inputs .qty {
    flex: 1 1 4.5rem;
    min-width: 0;
  }

  .packed-inputs .unit {
    flex: 0 0 4.7rem;
    width: 4.7rem;
  }

  .packed-inputs .bag {
    flex: 0 0 6rem;
    width: 6rem;
  }

  .packed-inputs .times {
    flex: 0 0 auto;
    color: var(--color-text-secondary);
    font-weight: 700;
  }

  .packed-total {
    margin-top: 0.3rem;
    font-size: 0.84rem;
    font-weight: 650;
    color: var(--color-success);
    font-variant-numeric: tabular-nums;
  }

  .add-action {
    justify-content: center;
  }

  .add-entry-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 48px;
    padding: 0.62rem 1.28rem;
    background: var(--color-brand);
    color: #fff;
    border: 1px solid var(--color-brand);
    border-radius: 0.8rem;
    font-size: 0.98rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease;
  }

  .add-entry-button:hover:not(:disabled) {
    background: #126a33;
  }

  .add-entry-button:disabled {
    opacity: 0.65;
    cursor: progress;
  }

  .add-extra {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 0.15rem;
  }

  .link-button {
    padding: 0.25rem 0;
    background: none;
    border: 0;
    color: var(--color-success);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
  }

  .link-button:hover {
    text-decoration: underline;
  }

  .note-field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 16rem;
    max-width: 28rem;
  }

  .note-input {
    flex: 1 1 auto;
    min-width: 0;
  }

  .note-dismiss,
  .cancel-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
  }

  .note-dismiss {
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border-radius: 0.55rem;
    transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
  }

  .cancel-edit {
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.6rem;
    font-size: 0.92rem;
    font-weight: 600;
  }

  .note-dismiss:hover,
  .cancel-edit:hover {
    color: var(--color-text-primary);
    border-color: var(--color-text-muted);
    background: #fafbfc;
  }

  .add-error {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #8a1622;
    font-weight: 650;
    font-size: 0.95rem;
  }

  .cell-label {
    display: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .composer.editing {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 1px var(--color-brand) inset;
  }

  @media (max-width: 1440px) {
    .add-row {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem 1rem;
    }

    .add-action {
      justify-content: flex-end;
    }

    .add-entry-button {
      width: 100%;
    }
  }

  @media (max-width: 1040px) {
    .add-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.9rem 1rem;
    }

    .add-cell:nth-child(2),
    .add-cell:nth-child(3),
    .add-action {
      grid-column: 1 / -1;
    }

    .add-entry-button {
      width: 100%;
    }
  }

  @media (max-width: 760px) {
    .composer-head {
      padding-left: 1.15rem;
      padding-right: 1.15rem;
    }

    .composer-title h2 {
      font-size: 1.28rem;
    }

    .add-row {
      grid-template-columns: 1fr 1fr;
      gap: 0.85rem 1rem;
      padding: 0 1.15rem 1.15rem;
    }

    .add-cell .cell-label {
      display: block;
    }

    .add-cell:nth-child(2),
    .add-action {
      grid-column: 1 / -1;
    }

    .add-entry-button {
      width: 100%;
    }
  }
</style>