539 lines
12 KiB
Svelte
539 lines
12 KiB
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-dest">
|
|||
|
|
<span class="cell-label">Destination</span>
|
|||
|
|
<div class="dest-rows">
|
|||
|
|
<div class="dest-line">
|
|||
|
|
<label class="dest-toggle" class:on={nForOrder}>
|
|||
|
|
<input type="checkbox" bind:checked={nForOrder} /> For an order
|
|||
|
|
</label>
|
|||
|
|
{#if nForOrder}
|
|||
|
|
<input
|
|||
|
|
class="dest-input"
|
|||
|
|
type="text"
|
|||
|
|
bind:value={nJobNumber}
|
|||
|
|
placeholder="Job number (Order Circle)"
|
|||
|
|
aria-label="Job number"
|
|||
|
|
/>
|
|||
|
|
{/if}
|
|||
|
|
</div>
|
|||
|
|
<div class="dest-line">
|
|||
|
|
<label class="dest-toggle" class:on={nForStock}>
|
|||
|
|
<input type="checkbox" bind:checked={nForStock} /> For stock
|
|||
|
|
</label>
|
|||
|
|
{#if isSplit}
|
|||
|
|
<input
|
|||
|
|
class="dest-input"
|
|||
|
|
type="number"
|
|||
|
|
min="0"
|
|||
|
|
step="0.01"
|
|||
|
|
inputmode="decimal"
|
|||
|
|
bind:value={nStockQty}
|
|||
|
|
placeholder={`To stock (${nType === 'bags' ? 'bags' : 'kg'})`}
|
|||
|
|
aria-label="Amount going to stock"
|
|||
|
|
/>
|
|||
|
|
{/if}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</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(7rem, 0.65fr) minmax(14rem, 1.2fr) 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-dest {
|
|||
|
|
gap: 0.4rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dest-rows {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.4rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dest-line {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dest-line .dest-toggle {
|
|||
|
|
flex: 0 0 auto;
|
|||
|
|
min-width: 8.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dest-line .dest-input {
|
|||
|
|
flex: 1 1 auto;
|
|||
|
|
min-width: 0;
|
|||
|
|
width: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dest-toggle {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.4rem;
|
|||
|
|
padding: 0.4rem 0.68rem;
|
|||
|
|
border: 1px solid color-mix(in srgb, var(--color-brand) 14%, var(--color-border));
|
|||
|
|
border-radius: 0.72rem;
|
|||
|
|
background: var(--color-bg-surface);
|
|||
|
|
font-size: 0.88rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--color-text-secondary);
|
|||
|
|
cursor: pointer;
|
|||
|
|
user-select: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dest-toggle input {
|
|||
|
|
width: 1.2rem;
|
|||
|
|
height: 1.2rem;
|
|||
|
|
min-height: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
accent-color: var(--color-brand);
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dest-toggle.on {
|
|||
|
|
border-color: var(--color-brand);
|
|||
|
|
background: var(--color-brand-tint);
|
|||
|
|
color: var(--color-success);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dest-input {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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-dest,
|
|||
|
|
.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-dest,
|
|||
|
|
.add-action {
|
|||
|
|
grid-column: 1 / -1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-entry-button {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|