1558 lines
43 KiB
Svelte
1558 lines
43 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { api } from '$lib/api';
|
||
|
|
import Skeleton from '$lib/components/Skeleton.svelte';
|
||
|
|
import { toast } from '$lib/toast';
|
||
|
|
import type { ProductCostingInputs, ProductCostingItem, ProductCostingItemUpdateInput } from '$lib/types';
|
||
|
|
import {
|
||
|
|
AlertTriangle,
|
||
|
|
RefreshCcw,
|
||
|
|
Save,
|
||
|
|
Search,
|
||
|
|
X
|
||
|
|
} from 'lucide-svelte';
|
||
|
|
|
||
|
|
type ProductCostingData = {
|
||
|
|
items: ProductCostingItem[];
|
||
|
|
inputs: ProductCostingInputs | null;
|
||
|
|
};
|
||
|
|
|
||
|
|
let { data }: { data: ProductCostingData } = $props();
|
||
|
|
|
||
|
|
function initialItems() {
|
||
|
|
return data.items ?? [];
|
||
|
|
}
|
||
|
|
|
||
|
|
function initialInputs() {
|
||
|
|
return data.inputs ? structuredClone(data.inputs) : null;
|
||
|
|
}
|
||
|
|
|
||
|
|
function initialSelectedItem() {
|
||
|
|
return data.items?.[0] ?? null;
|
||
|
|
}
|
||
|
|
|
||
|
|
function initialEditDraft() {
|
||
|
|
const item = initialSelectedItem();
|
||
|
|
return item ? buildDraft(item) : null;
|
||
|
|
}
|
||
|
|
|
||
|
|
let items = $state<ProductCostingItem[]>(initialItems());
|
||
|
|
let inputs = $state<ProductCostingInputs | null>(initialInputs());
|
||
|
|
let query = $state('');
|
||
|
|
let clientFilter = $state('');
|
||
|
|
let unitFilter = $state('');
|
||
|
|
let statusFilter = $state<'all' | 'ready' | 'warnings'>('all');
|
||
|
|
let activeView = $state<'items' | 'inputs'>('items');
|
||
|
|
let selectedItem = $state<ProductCostingItem | null>(initialSelectedItem());
|
||
|
|
let editDraft = $state<ProductCostingItemUpdateInput | null>(initialEditDraft());
|
||
|
|
let recalculating = $state(false);
|
||
|
|
let savingInputs = $state(false);
|
||
|
|
let savingItem = $state(false);
|
||
|
|
let inputsDirty = $state(false);
|
||
|
|
let page = $state(1);
|
||
|
|
let pageSize = $state(25);
|
||
|
|
let tableLoading = $state(false);
|
||
|
|
|
||
|
|
const unitTypes = ['Standard', 'Bulka', '1.5 kg', 'Per Unit'];
|
||
|
|
const ownBagOptions = ['', 'Yes', 'No Bag'];
|
||
|
|
const clients = $derived(Array.from(new Set(items.map((item) => item.client_category))).sort());
|
||
|
|
const processOptions = $derived(Array.from(new Set([
|
||
|
|
...(inputs?.processes.map((process) => process.key) ?? []),
|
||
|
|
...items.map((item) => item.bagging_process).filter((value): value is string => Boolean(value))
|
||
|
|
])).sort());
|
||
|
|
const warningCount = $derived(items.filter((item) => item.warnings.length).length);
|
||
|
|
const readyCount = $derived(items.length - warningCount);
|
||
|
|
const averageDelivered = $derived(
|
||
|
|
average(items.map((item) => item.finished_product_delivered_cost).filter((value): value is number => value != null))
|
||
|
|
);
|
||
|
|
const missingLookupCount = $derived(items.filter((item) => hasWarning(item, 'lookup')).length);
|
||
|
|
const visibleItems = $derived(
|
||
|
|
items.filter((item) => {
|
||
|
|
const haystack =
|
||
|
|
`${item.client_category} ${item.item_id ?? ''} ${item.product_name} ${item.mix_product_name} ${item.unit_type}`.toLowerCase();
|
||
|
|
const matchesSearch = haystack.includes(query.trim().toLowerCase());
|
||
|
|
const matchesClient = !clientFilter || item.client_category === clientFilter;
|
||
|
|
const matchesUnit = !unitFilter || item.unit_type === unitFilter;
|
||
|
|
const matchesStatus =
|
||
|
|
statusFilter === 'all' ||
|
||
|
|
(statusFilter === 'ready' && !item.warnings.length) ||
|
||
|
|
(statusFilter === 'warnings' && item.warnings.length > 0);
|
||
|
|
|
||
|
|
return matchesSearch && matchesClient && matchesUnit && matchesStatus;
|
||
|
|
})
|
||
|
|
);
|
||
|
|
const totalPages = $derived(Math.max(1, Math.ceil(visibleItems.length / pageSize)));
|
||
|
|
const pageStart = $derived(visibleItems.length ? (page - 1) * pageSize + 1 : 0);
|
||
|
|
const pageEnd = $derived(Math.min(page * pageSize, visibleItems.length));
|
||
|
|
const pagedItems = $derived(visibleItems.slice((page - 1) * pageSize, page * pageSize));
|
||
|
|
|
||
|
|
$effect(() => {
|
||
|
|
query;
|
||
|
|
clientFilter;
|
||
|
|
unitFilter;
|
||
|
|
statusFilter;
|
||
|
|
pageSize;
|
||
|
|
page = 1;
|
||
|
|
});
|
||
|
|
|
||
|
|
$effect(() => {
|
||
|
|
if (page > totalPages) page = totalPages;
|
||
|
|
});
|
||
|
|
|
||
|
|
function average(values: number[]) {
|
||
|
|
return values.length ? values.reduce((sum, value) => sum + value, 0) / values.length : null;
|
||
|
|
}
|
||
|
|
|
||
|
|
function hasWarning(item: ProductCostingItem, pattern: string) {
|
||
|
|
return item.warnings.some((warning) => warning.toLowerCase().includes(pattern));
|
||
|
|
}
|
||
|
|
|
||
|
|
function money(value: number | null | undefined, digits = 2) {
|
||
|
|
return value == null ? 'N/A' : `$${value.toFixed(digits)}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function number(value: number | null | undefined, digits = 4) {
|
||
|
|
return value == null ? 'N/A' : value.toFixed(digits);
|
||
|
|
}
|
||
|
|
|
||
|
|
function cents(value: number | null | undefined) {
|
||
|
|
return value == null ? 'No value' : `${money(value, 4)} = ${(value * 100).toFixed(2)} cents`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function margin(value: number | null | undefined) {
|
||
|
|
return value == null ? 'Default' : `${(value * 100).toFixed(2)}%`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function marginHelp(value: number | null | undefined) {
|
||
|
|
return value == null ? 'Default margin' : `${value.toFixed(4)} = ${(value * 100).toFixed(2)}%`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function initials(name: string) {
|
||
|
|
return name
|
||
|
|
.split(/\s+/)
|
||
|
|
.filter(Boolean)
|
||
|
|
.map((piece) => piece[0])
|
||
|
|
.join('')
|
||
|
|
.slice(0, 2)
|
||
|
|
.toUpperCase();
|
||
|
|
}
|
||
|
|
|
||
|
|
function buildDraft(item: ProductCostingItem): ProductCostingItemUpdateInput {
|
||
|
|
return {
|
||
|
|
client_category: item.client_category,
|
||
|
|
item_id: item.item_id,
|
||
|
|
product_name: item.product_name,
|
||
|
|
mix_product_name: item.mix_product_name,
|
||
|
|
unit_type: item.unit_type,
|
||
|
|
own_bag: item.own_bag,
|
||
|
|
unit_kg: item.unit_kg,
|
||
|
|
items_per_pallet: item.items_per_pallet,
|
||
|
|
bagging_process: item.bagging_process,
|
||
|
|
manual_distributor_margin: item.manual_distributor_margin,
|
||
|
|
manual_wholesale_margin: item.manual_wholesale_margin
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function selectItem(item: ProductCostingItem) {
|
||
|
|
selectedItem = item;
|
||
|
|
editDraft = buildDraft(item);
|
||
|
|
}
|
||
|
|
|
||
|
|
function clearNullableText(value: string | null | undefined) {
|
||
|
|
const trimmed = value?.trim();
|
||
|
|
return trimmed ? trimmed : null;
|
||
|
|
}
|
||
|
|
|
||
|
|
function normalizeNumber(value: number | null | undefined) {
|
||
|
|
return value === undefined || value === null || Number.isNaN(Number(value)) ? null : Number(value);
|
||
|
|
}
|
||
|
|
|
||
|
|
function syncPerKgFromTonne(kind: 'grading' | 'cracking') {
|
||
|
|
if (!inputs) return;
|
||
|
|
inputsDirty = true;
|
||
|
|
if (kind === 'grading') {
|
||
|
|
inputs.base.grading_per_kg = Number((inputs.base.grading_per_tonne / 1000).toFixed(6));
|
||
|
|
} else {
|
||
|
|
inputs.base.cracking_per_kg = Number((inputs.base.cracking_per_tonne / 1000).toFixed(6));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function markInputsDirty() {
|
||
|
|
inputsDirty = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
function goToPage(nextPage: number) {
|
||
|
|
page = Math.min(Math.max(nextPage, 1), totalPages);
|
||
|
|
}
|
||
|
|
|
||
|
|
async function saveInputs() {
|
||
|
|
if (!inputs) return;
|
||
|
|
savingInputs = true;
|
||
|
|
tableLoading = true;
|
||
|
|
const tid = toast.loading('Saving Product Costing inputs...');
|
||
|
|
try {
|
||
|
|
inputs = await api.updateProductCostingInputs(inputs);
|
||
|
|
items = await api.productCostingItemsFresh();
|
||
|
|
if (selectedItem) {
|
||
|
|
selectedItem = items.find((item) => item.id === selectedItem?.id) ?? selectedItem;
|
||
|
|
editDraft = buildDraft(selectedItem);
|
||
|
|
}
|
||
|
|
inputsDirty = false;
|
||
|
|
toast.dismiss(tid);
|
||
|
|
toast.success('Inputs saved and product costs recalculated.');
|
||
|
|
} catch (error) {
|
||
|
|
toast.dismiss(tid);
|
||
|
|
toast.error(error instanceof Error ? error.message : 'Unable to save Product Costing inputs.');
|
||
|
|
} finally {
|
||
|
|
savingInputs = false;
|
||
|
|
tableLoading = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function saveSelectedItem() {
|
||
|
|
if (!selectedItem || !editDraft) return;
|
||
|
|
savingItem = true;
|
||
|
|
tableLoading = true;
|
||
|
|
const tid = toast.loading('Saving costing row...');
|
||
|
|
try {
|
||
|
|
const updated = await api.updateProductCostingItem(selectedItem.id, {
|
||
|
|
...editDraft,
|
||
|
|
item_id: clearNullableText(editDraft.item_id),
|
||
|
|
own_bag: clearNullableText(editDraft.own_bag),
|
||
|
|
bagging_process: clearNullableText(editDraft.bagging_process),
|
||
|
|
unit_kg: normalizeNumber(editDraft.unit_kg),
|
||
|
|
items_per_pallet: normalizeNumber(editDraft.items_per_pallet),
|
||
|
|
manual_distributor_margin: normalizeNumber(editDraft.manual_distributor_margin),
|
||
|
|
manual_wholesale_margin: normalizeNumber(editDraft.manual_wholesale_margin)
|
||
|
|
});
|
||
|
|
items = items.map((item) => (item.id === updated.id ? updated : item));
|
||
|
|
selectedItem = updated;
|
||
|
|
editDraft = buildDraft(updated);
|
||
|
|
toast.dismiss(tid);
|
||
|
|
toast.success('Costing row saved and recalculated.');
|
||
|
|
} catch (error) {
|
||
|
|
toast.dismiss(tid);
|
||
|
|
toast.error(error instanceof Error ? error.message : 'Unable to save costing row.');
|
||
|
|
} finally {
|
||
|
|
savingItem = false;
|
||
|
|
tableLoading = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function recalculateAll() {
|
||
|
|
recalculating = true;
|
||
|
|
tableLoading = true;
|
||
|
|
const tid = toast.loading('Recalculating product costs...');
|
||
|
|
try {
|
||
|
|
await api.recalculateProductCosting();
|
||
|
|
items = await api.productCostingItemsFresh();
|
||
|
|
if (selectedItem) {
|
||
|
|
selectedItem = items.find((item) => item.id === selectedItem?.id) ?? null;
|
||
|
|
editDraft = selectedItem ? buildDraft(selectedItem) : null;
|
||
|
|
}
|
||
|
|
toast.dismiss(tid);
|
||
|
|
toast.success('Product costing recalculated.');
|
||
|
|
} catch (error) {
|
||
|
|
toast.dismiss(tid);
|
||
|
|
toast.error(error instanceof Error ? error.message : 'Unable to recalculate product costing.');
|
||
|
|
} finally {
|
||
|
|
recalculating = false;
|
||
|
|
tableLoading = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<section class="costing-shell">
|
||
|
|
<header class="page-head">
|
||
|
|
<div>
|
||
|
|
<span class="eyebrow">Alpha</span>
|
||
|
|
<h2>Product Costing</h2>
|
||
|
|
<p>Check prices, fix warnings, and update costing settings.</p>
|
||
|
|
</div>
|
||
|
|
<div class="head-actions">
|
||
|
|
<button class="primary-button" disabled={recalculating} type="button" onclick={recalculateAll}>
|
||
|
|
<span class:spin={recalculating} aria-hidden="true"><RefreshCcw size={17} /></span>
|
||
|
|
{recalculating ? 'Updating' : 'Update Prices'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section class="health-strip" aria-label="Product costing health summary">
|
||
|
|
<article class="health-card">
|
||
|
|
<span>Products</span>
|
||
|
|
<strong>{items.length}</strong>
|
||
|
|
<p>{readyCount} ready</p>
|
||
|
|
</article>
|
||
|
|
<article class="health-card warning">
|
||
|
|
<span>Need Review</span>
|
||
|
|
<strong>{warningCount}</strong>
|
||
|
|
<p>{missingLookupCount} missing cost{missingLookupCount === 1 ? '' : 's'}</p>
|
||
|
|
</article>
|
||
|
|
<article class="health-card">
|
||
|
|
<span>Average Cost</span>
|
||
|
|
<strong>{money(averageDelivered)}</strong>
|
||
|
|
<p>Delivered</p>
|
||
|
|
</article>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="workspace-grid">
|
||
|
|
<div class="main-column">
|
||
|
|
<nav class="view-tabs" aria-label="Product Costing views">
|
||
|
|
<button class:active={activeView === 'items'} type="button" onclick={() => (activeView = 'items')}>
|
||
|
|
Products
|
||
|
|
</button>
|
||
|
|
<button class:active={activeView === 'inputs'} type="button" onclick={() => (activeView = 'inputs')}>
|
||
|
|
Settings
|
||
|
|
</button>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
{#if activeView === 'inputs'}
|
||
|
|
<section class="panel inputs-panel">
|
||
|
|
<div class="section-toolbar">
|
||
|
|
<div>
|
||
|
|
<h3>Settings</h3>
|
||
|
|
<p>Change the standard costs used to calculate product prices.</p>
|
||
|
|
</div>
|
||
|
|
<div class="toolbar-actions">
|
||
|
|
{#if inputsDirty}
|
||
|
|
<span class="dirty-pill">Unsaved changes</span>
|
||
|
|
{/if}
|
||
|
|
<button class="primary-button compact" disabled={!inputs || savingInputs} type="button" onclick={saveInputs}>
|
||
|
|
<Save size={16} />
|
||
|
|
{savingInputs ? 'Saving' : 'Save Settings'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{#if inputs}
|
||
|
|
<div class="input-block base-costs">
|
||
|
|
<div class="block-heading">
|
||
|
|
<strong>Work Costs</strong>
|
||
|
|
<span>Enter dollars for grading and cracking.</span>
|
||
|
|
</div>
|
||
|
|
<div class="input-grid four">
|
||
|
|
<label>
|
||
|
|
<span>Grading ($/tonne)</span>
|
||
|
|
<div class="money-field">
|
||
|
|
<i>$</i>
|
||
|
|
<input type="number" step="0.0001" bind:value={inputs.base.grading_per_tonne} oninput={() => syncPerKgFromTonne('grading')} />
|
||
|
|
</div>
|
||
|
|
<small>{money(inputs.base.grading_per_tonne, 2)} per tonne</small>
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<span>Grading ($/kg)</span>
|
||
|
|
<div class="money-field">
|
||
|
|
<i>$</i>
|
||
|
|
<input type="number" step="0.000001" bind:value={inputs.base.grading_per_kg} oninput={markInputsDirty} />
|
||
|
|
</div>
|
||
|
|
<small>{cents(inputs.base.grading_per_kg)} per kg</small>
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<span>Cracking ($/tonne)</span>
|
||
|
|
<div class="money-field">
|
||
|
|
<i>$</i>
|
||
|
|
<input type="number" step="0.0001" bind:value={inputs.base.cracking_per_tonne} oninput={() => syncPerKgFromTonne('cracking')} />
|
||
|
|
</div>
|
||
|
|
<small>{money(inputs.base.cracking_per_tonne, 2)} per tonne</small>
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<span>Cracking ($/kg)</span>
|
||
|
|
<div class="money-field">
|
||
|
|
<i>$</i>
|
||
|
|
<input type="number" step="0.000001" bind:value={inputs.base.cracking_per_kg} oninput={markInputsDirty} />
|
||
|
|
</div>
|
||
|
|
<small>{cents(inputs.base.cracking_per_kg)} per kg</small>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-columns">
|
||
|
|
<div class="input-block">
|
||
|
|
<div class="block-heading">
|
||
|
|
<strong>Bagging Processes</strong>
|
||
|
|
<span>Dollars per kg. Example: 0.0400 is 4 cents.</span>
|
||
|
|
</div>
|
||
|
|
<div class="input-list">
|
||
|
|
{#each inputs.processes as process}
|
||
|
|
<label class="inline-field">
|
||
|
|
<span>{process.label}<small>{cents(process.cost)} / kg</small></span>
|
||
|
|
<div class="money-field compact-field">
|
||
|
|
<i>$</i>
|
||
|
|
<input type="number" step="0.0001" bind:value={process.cost} oninput={markInputsDirty} />
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-block">
|
||
|
|
<div class="block-heading">
|
||
|
|
<strong>Bag Costs</strong>
|
||
|
|
<span>Dollars per bag or unit. Example: 2.0000 is two dollars.</span>
|
||
|
|
</div>
|
||
|
|
<div class="input-list">
|
||
|
|
{#each inputs.bags as bag}
|
||
|
|
<label class="inline-field">
|
||
|
|
<span>{bag.label}<small>{money(bag.cost, 4)} per bag/unit</small></span>
|
||
|
|
<div class="money-field compact-field">
|
||
|
|
<i>$</i>
|
||
|
|
<input type="number" step="0.0001" bind:value={bag.cost} oninput={markInputsDirty} />
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-block">
|
||
|
|
<div class="block-heading">
|
||
|
|
<strong>Freight</strong>
|
||
|
|
<span>Dollars per pallet.</span>
|
||
|
|
</div>
|
||
|
|
<div class="input-list">
|
||
|
|
{#each inputs.freight as freight}
|
||
|
|
<label class="inline-field">
|
||
|
|
<span>{freight.label}<small>{money(freight.cost, 2)} per pallet</small></span>
|
||
|
|
<div class="money-field compact-field">
|
||
|
|
<i>$</i>
|
||
|
|
<input type="number" step="0.0001" bind:value={freight.cost} oninput={markInputsDirty} />
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-block">
|
||
|
|
<div class="block-heading">
|
||
|
|
<strong>Client Margins</strong>
|
||
|
|
<span>Enter decimals. Example: 0.2000 is 20%.</span>
|
||
|
|
</div>
|
||
|
|
<div class="margin-table">
|
||
|
|
{#each inputs.clients as client}
|
||
|
|
<div class="margin-row">
|
||
|
|
<strong>{client.client_category}</strong>
|
||
|
|
<label>
|
||
|
|
<span>Distributor</span>
|
||
|
|
<input type="number" min="0" max="0.9999" step="0.000001" bind:value={client.distributor_margin} oninput={markInputsDirty} />
|
||
|
|
<small>{marginHelp(client.distributor_margin)}</small>
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<span>Wholesale</span>
|
||
|
|
<input type="number" min="0" max="0.9999" step="0.000001" bind:value={client.wholesale_margin} oninput={markInputsDirty} />
|
||
|
|
<small>{marginHelp(client.wholesale_margin)}</small>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{:else}
|
||
|
|
<div class="empty-state">
|
||
|
|
<strong>No input records loaded</strong>
|
||
|
|
<span>Refresh after the backend has seeded Product Costing inputs.</span>
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
</section>
|
||
|
|
{:else}
|
||
|
|
<section class="panel">
|
||
|
|
<div class="section-toolbar">
|
||
|
|
<div>
|
||
|
|
<h3>Products</h3>
|
||
|
|
<p>Select a product to see or change its details.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="filter-bar">
|
||
|
|
<label class="search-field">
|
||
|
|
<span>Search</span>
|
||
|
|
<Search size={17} />
|
||
|
|
<input bind:value={query} placeholder="Search product, mix, client, item id" />
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<span>Client</span>
|
||
|
|
<select bind:value={clientFilter}>
|
||
|
|
<option value="">All clients</option>
|
||
|
|
{#each clients as client}
|
||
|
|
<option value={client}>{client}</option>
|
||
|
|
{/each}
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<span>Show</span>
|
||
|
|
<select bind:value={statusFilter}>
|
||
|
|
<option value="all">All products</option>
|
||
|
|
<option value="warnings">Need review</option>
|
||
|
|
<option value="ready">Ready</option>
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
<label class="page-size-field">
|
||
|
|
<span>Rows per page</span>
|
||
|
|
<select bind:value={pageSize}>
|
||
|
|
<option value={15}>15</option>
|
||
|
|
<option value={25}>25</option>
|
||
|
|
<option value={50}>50</option>
|
||
|
|
<option value={100}>100</option>
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="table-wrap">
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Product</th>
|
||
|
|
<th>Delivered</th>
|
||
|
|
<th>Distributor</th>
|
||
|
|
<th>Wholesale</th>
|
||
|
|
<th>Review</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{#if tableLoading}
|
||
|
|
{#each Array(8) as _}
|
||
|
|
<tr class="skeleton-row">
|
||
|
|
<td class="product-cell" data-label="Product">
|
||
|
|
<div class="product-token">
|
||
|
|
<Skeleton variant="circle" width="1.9rem" height="1.9rem" radius="0.65rem" />
|
||
|
|
<div class="skeleton-lines">
|
||
|
|
<Skeleton width="11rem" height="0.72rem" />
|
||
|
|
<Skeleton width="7rem" height="0.58rem" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td data-label="Delivered"><Skeleton width="5.5rem" height="0.72rem" /></td>
|
||
|
|
<td data-label="Distributor"><Skeleton width="5.5rem" height="0.72rem" /></td>
|
||
|
|
<td data-label="Wholesale"><Skeleton width="5.5rem" height="0.72rem" /></td>
|
||
|
|
<td data-label="Review"><Skeleton variant="pill" width="4.8rem" height="1.25rem" /></td>
|
||
|
|
</tr>
|
||
|
|
{/each}
|
||
|
|
{:else if pagedItems.length}
|
||
|
|
{#each pagedItems as item}
|
||
|
|
<tr class:active={selectedItem?.id === item.id} class:warn={item.warnings.length > 0} onclick={() => selectItem(item)}>
|
||
|
|
<td class="product-cell" data-label="Product">
|
||
|
|
<div class="product-token">
|
||
|
|
<span>{initials(item.product_name)}</span>
|
||
|
|
<div>
|
||
|
|
<strong>{item.product_name}</strong>
|
||
|
|
<small>{item.client_category} · {item.mix_product_name}</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td data-label="Delivered">
|
||
|
|
<strong class="money">{money(item.finished_product_delivered_cost)}</strong>
|
||
|
|
</td>
|
||
|
|
<td data-label="Distributor">
|
||
|
|
<strong>{money(item.distributor_price)}</strong>
|
||
|
|
</td>
|
||
|
|
<td data-label="Wholesale">
|
||
|
|
<strong>{money(item.wholesale_price, 1)}</strong>
|
||
|
|
</td>
|
||
|
|
<td data-label="Review">
|
||
|
|
<span class={`status-pill ${item.warnings.length ? 'warning' : 'positive'}`}>
|
||
|
|
{item.warnings.length ? 'Needs review' : 'Ready'}
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
{/each}
|
||
|
|
{:else}
|
||
|
|
<tr class="empty-row">
|
||
|
|
<td colspan="7">
|
||
|
|
<strong>No costing rows found</strong>
|
||
|
|
<small>Adjust the filters or search term.</small>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
{/if}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="pagination-bar">
|
||
|
|
<span>{pageStart}-{pageEnd} of {visibleItems.length}</span>
|
||
|
|
<div class="pagination-controls">
|
||
|
|
<button type="button" disabled={page <= 1 || tableLoading} onclick={() => goToPage(1)}>First</button>
|
||
|
|
<button type="button" disabled={page <= 1 || tableLoading} onclick={() => goToPage(page - 1)}>Prev</button>
|
||
|
|
<strong>Page {page} of {totalPages}</strong>
|
||
|
|
<button type="button" disabled={page >= totalPages || tableLoading} onclick={() => goToPage(page + 1)}>Next</button>
|
||
|
|
<button type="button" disabled={page >= totalPages || tableLoading} onclick={() => goToPage(totalPages)}>Last</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<aside class="inspector" aria-label="Selected product costing detail">
|
||
|
|
{#if selectedItem && editDraft}
|
||
|
|
<div class="inspector-head">
|
||
|
|
<div>
|
||
|
|
<span>{selectedItem.client_category}</span>
|
||
|
|
<h3>{selectedItem.product_name}</h3>
|
||
|
|
</div>
|
||
|
|
<button class="icon-button" type="button" aria-label="Clear selected product" onclick={() => (selectedItem = null)}>
|
||
|
|
<X size={17} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{#if selectedItem.warnings.length}
|
||
|
|
<div class="warning-box">
|
||
|
|
<AlertTriangle size={17} />
|
||
|
|
<div>
|
||
|
|
{#each selectedItem.warnings as warning}
|
||
|
|
<span>{warning}</span>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
<div class="price-stack">
|
||
|
|
<div>
|
||
|
|
<span>Delivered</span>
|
||
|
|
<strong>{money(selectedItem.finished_product_delivered_cost)}</strong>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>Distributor</span>
|
||
|
|
<strong>{money(selectedItem.distributor_price)}</strong>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span>Wholesale</span>
|
||
|
|
<strong>{money(selectedItem.wholesale_price, 1)}</strong>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="inspector-section">
|
||
|
|
<div class="block-heading">
|
||
|
|
<strong>Product Details</strong>
|
||
|
|
<span>Change these when the product setup is wrong.</span>
|
||
|
|
</div>
|
||
|
|
<div class="drawer-form">
|
||
|
|
<label>
|
||
|
|
<span>Client</span>
|
||
|
|
<input bind:value={editDraft.client_category} />
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<span>Item ID</span>
|
||
|
|
<input bind:value={editDraft.item_id} />
|
||
|
|
</label>
|
||
|
|
<label class="wide">
|
||
|
|
<span>Product name</span>
|
||
|
|
<input bind:value={editDraft.product_name} />
|
||
|
|
</label>
|
||
|
|
<label class="wide">
|
||
|
|
<span>Mix name</span>
|
||
|
|
<input bind:value={editDraft.mix_product_name} />
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<span>Unit type</span>
|
||
|
|
<select bind:value={editDraft.unit_type}>
|
||
|
|
{#each unitTypes as unit}
|
||
|
|
<option value={unit}>{unit}</option>
|
||
|
|
{/each}
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<span>Own bag</span>
|
||
|
|
<select bind:value={editDraft.own_bag}>
|
||
|
|
{#each ownBagOptions as option}
|
||
|
|
<option value={option}>{option || 'Default'}</option>
|
||
|
|
{/each}
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<span>Bag size kg</span>
|
||
|
|
<input type="number" min="0" step="0.001" bind:value={editDraft.unit_kg} />
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<span>Bags per pallet</span>
|
||
|
|
<input type="number" min="0" step="1" bind:value={editDraft.items_per_pallet} />
|
||
|
|
</label>
|
||
|
|
<label class="wide">
|
||
|
|
<span>Bagging process</span>
|
||
|
|
<select bind:value={editDraft.bagging_process}>
|
||
|
|
<option value="">No process</option>
|
||
|
|
{#each processOptions as process}
|
||
|
|
<option value={process}>{process}</option>
|
||
|
|
{/each}
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<span>Distributor margin override</span>
|
||
|
|
<input type="number" min="0" max="0.9999" step="0.000001" bind:value={editDraft.manual_distributor_margin} />
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<span>Wholesale margin override</span>
|
||
|
|
<input type="number" min="0" max="0.9999" step="0.000001" bind:value={editDraft.manual_wholesale_margin} />
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<button class="primary-button full" disabled={savingItem} type="button" onclick={saveSelectedItem}>
|
||
|
|
<Save size={16} />
|
||
|
|
{savingItem ? 'Saving' : 'Save Product'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="inspector-section">
|
||
|
|
<div class="block-heading">
|
||
|
|
<strong>Cost Details</strong>
|
||
|
|
<span>These numbers make up the delivered cost.</span>
|
||
|
|
</div>
|
||
|
|
<div class="breakdown-grid">
|
||
|
|
<div><span>Cleaned</span><strong>{number(selectedItem.cleaned_product_cost_per_kg)}</strong></div>
|
||
|
|
<div><span>Grading</span><strong>{number(selectedItem.grading_cost_per_kg)}</strong></div>
|
||
|
|
<div><span>Bagging</span><strong>{number(selectedItem.bagging_cost_per_kg)}</strong></div>
|
||
|
|
<div><span>Cracking</span><strong>{number(selectedItem.cracking_cost_per_kg)}</strong></div>
|
||
|
|
<div><span>Bag</span><strong>{money(selectedItem.bag_cost_per_unit)}</strong></div>
|
||
|
|
<div><span>Freight</span><strong>{money(selectedItem.freight_cost_per_unit)}</strong></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{:else}
|
||
|
|
<div class="empty-inspector">
|
||
|
|
<Calculator size={24} />
|
||
|
|
<strong>Select a costing row</strong>
|
||
|
|
<span>Use the table to inspect pricing and edit assumptions.</span>
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
</aside>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
:global(.spin) {
|
||
|
|
animation: spin 900ms linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2,
|
||
|
|
h3,
|
||
|
|
p {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
button,
|
||
|
|
input,
|
||
|
|
select {
|
||
|
|
font: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
.costing-shell {
|
||
|
|
--costing-ink: oklch(25% 0.018 155);
|
||
|
|
--costing-muted: oklch(52% 0.022 155);
|
||
|
|
--costing-panel: oklch(99% 0.004 145);
|
||
|
|
--costing-soft: oklch(96.8% 0.008 145);
|
||
|
|
--costing-line: oklch(88% 0.014 145);
|
||
|
|
--costing-line-strong: oklch(78% 0.02 145);
|
||
|
|
--costing-warn: oklch(58% 0.14 72);
|
||
|
|
display: grid;
|
||
|
|
gap: 1.05rem;
|
||
|
|
color: var(--costing-ink);
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-head,
|
||
|
|
.health-strip,
|
||
|
|
.workspace-grid,
|
||
|
|
.section-toolbar,
|
||
|
|
.filter-bar,
|
||
|
|
.head-actions,
|
||
|
|
.pagination-bar,
|
||
|
|
.pagination-controls,
|
||
|
|
.warning-box {
|
||
|
|
display: flex;
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-head {
|
||
|
|
align-items: flex-end;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 0.35rem 0 0.15rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-head p,
|
||
|
|
.section-toolbar p,
|
||
|
|
.block-heading span,
|
||
|
|
small,
|
||
|
|
.health-card p,
|
||
|
|
.health-card span,
|
||
|
|
.inspector-head span,
|
||
|
|
.breakdown-grid span,
|
||
|
|
.price-stack span,
|
||
|
|
.empty-inspector span {
|
||
|
|
color: var(--costing-muted);
|
||
|
|
}
|
||
|
|
|
||
|
|
.eyebrow {
|
||
|
|
display: inline-flex;
|
||
|
|
margin-bottom: 0.12rem;
|
||
|
|
color: var(--green-deep);
|
||
|
|
font-size: 0.74rem;
|
||
|
|
font-weight: 800;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-head h2 {
|
||
|
|
font-size: 1.85rem;
|
||
|
|
font-weight: 750;
|
||
|
|
letter-spacing: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.head-actions {
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar-actions {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-end;
|
||
|
|
gap: 0.6rem;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dirty-pill {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
min-height: 2rem;
|
||
|
|
padding: 0.38rem 0.62rem;
|
||
|
|
border-radius: 999px;
|
||
|
|
color: var(--costing-warn);
|
||
|
|
background: oklch(95% 0.055 82);
|
||
|
|
font-size: 0.8rem;
|
||
|
|
font-weight: 800;
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary-button,
|
||
|
|
.icon-button,
|
||
|
|
.view-tabs button {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 0.45rem;
|
||
|
|
min-height: 2.55rem;
|
||
|
|
border-radius: 0.72rem;
|
||
|
|
font-weight: 750;
|
||
|
|
cursor: pointer;
|
||
|
|
transition:
|
||
|
|
background-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
|
||
|
|
border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
|
||
|
|
transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary-button {
|
||
|
|
padding: 0.72rem 0.9rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary-button {
|
||
|
|
border: 1px solid var(--green-deep);
|
||
|
|
background: var(--color-brand);
|
||
|
|
color: oklch(99% 0.004 145);
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary-button:hover:not(:disabled) {
|
||
|
|
background: var(--green-deep);
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary-button:disabled {
|
||
|
|
opacity: 0.62;
|
||
|
|
cursor: progress;
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary-button.compact {
|
||
|
|
min-height: 2.35rem;
|
||
|
|
padding: 0.62rem 0.78rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary-button.full {
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 0.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.health-strip {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
|
|
gap: 0.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.health-card,
|
||
|
|
.panel,
|
||
|
|
.inspector {
|
||
|
|
border: 1px solid var(--costing-line);
|
||
|
|
background: var(--costing-panel);
|
||
|
|
box-shadow: var(--shadow);
|
||
|
|
}
|
||
|
|
|
||
|
|
.health-card {
|
||
|
|
min-height: 7.2rem;
|
||
|
|
padding: 1rem;
|
||
|
|
border-radius: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.health-card.warning {
|
||
|
|
background: color-mix(in srgb, oklch(91% 0.08 80) 34%, var(--costing-panel));
|
||
|
|
}
|
||
|
|
|
||
|
|
.health-card strong {
|
||
|
|
display: block;
|
||
|
|
margin: 0.35rem 0 0.12rem;
|
||
|
|
font-size: 1.7rem;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.workspace-grid {
|
||
|
|
align-items: start;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.34fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-column {
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.view-tabs {
|
||
|
|
display: inline-flex;
|
||
|
|
gap: 0.25rem;
|
||
|
|
padding: 0.28rem;
|
||
|
|
margin-bottom: 0.85rem;
|
||
|
|
border: 1px solid var(--costing-line);
|
||
|
|
border-radius: 0.9rem;
|
||
|
|
background: var(--costing-soft);
|
||
|
|
}
|
||
|
|
|
||
|
|
.view-tabs button,
|
||
|
|
.icon-button {
|
||
|
|
border: none;
|
||
|
|
background: transparent;
|
||
|
|
color: var(--costing-muted);
|
||
|
|
}
|
||
|
|
|
||
|
|
.view-tabs button {
|
||
|
|
padding: 0.58rem 0.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.view-tabs button.active {
|
||
|
|
background: var(--costing-panel);
|
||
|
|
color: var(--green-deep);
|
||
|
|
box-shadow: inset 0 0 0 1px var(--costing-line);
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel,
|
||
|
|
.inspector {
|
||
|
|
border-radius: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel {
|
||
|
|
padding: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-toolbar {
|
||
|
|
align-items: flex-start;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 0.95rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-toolbar h3,
|
||
|
|
.inspector-head h3 {
|
||
|
|
font-size: 1.08rem;
|
||
|
|
font-weight: 750;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-bar {
|
||
|
|
align-items: end;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
padding: 0.62rem;
|
||
|
|
margin-bottom: 0.6rem;
|
||
|
|
border: 1px solid var(--costing-line);
|
||
|
|
border-radius: 0.9rem;
|
||
|
|
background: var(--costing-soft);
|
||
|
|
}
|
||
|
|
|
||
|
|
label {
|
||
|
|
display: grid;
|
||
|
|
gap: 0.32rem;
|
||
|
|
min-width: 10rem;
|
||
|
|
font-size: 0.84rem;
|
||
|
|
font-weight: 750;
|
||
|
|
}
|
||
|
|
|
||
|
|
label span {
|
||
|
|
color: var(--costing-muted);
|
||
|
|
}
|
||
|
|
|
||
|
|
input,
|
||
|
|
select {
|
||
|
|
min-height: 2.4rem;
|
||
|
|
width: 100%;
|
||
|
|
padding: 0.55rem 0.65rem;
|
||
|
|
border: 1px solid var(--costing-line-strong);
|
||
|
|
border-radius: 0.66rem;
|
||
|
|
background: oklch(99% 0.004 145);
|
||
|
|
color: var(--costing-ink);
|
||
|
|
}
|
||
|
|
|
||
|
|
input:focus,
|
||
|
|
select:focus {
|
||
|
|
outline: none;
|
||
|
|
border-color: var(--color-brand);
|
||
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent);
|
||
|
|
}
|
||
|
|
|
||
|
|
.money-field {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1.65rem minmax(0, 1fr);
|
||
|
|
align-items: center;
|
||
|
|
border: 1px solid var(--costing-line-strong);
|
||
|
|
border-radius: 0.66rem;
|
||
|
|
background: oklch(99% 0.004 145);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.money-field i {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
min-height: 2.4rem;
|
||
|
|
color: var(--green-deep);
|
||
|
|
background: color-mix(in srgb, var(--color-brand) 8%, var(--costing-panel));
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 850;
|
||
|
|
}
|
||
|
|
|
||
|
|
.money-field input {
|
||
|
|
border: none;
|
||
|
|
border-radius: 0;
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.money-field:focus-within {
|
||
|
|
border-color: var(--color-brand);
|
||
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent);
|
||
|
|
}
|
||
|
|
|
||
|
|
.compact-field {
|
||
|
|
min-width: 8.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-field {
|
||
|
|
position: relative;
|
||
|
|
flex: 1 1 18rem;
|
||
|
|
min-width: min(100%, 18rem);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-field :global(svg) {
|
||
|
|
position: absolute;
|
||
|
|
left: 0.68rem;
|
||
|
|
bottom: 0.68rem;
|
||
|
|
color: var(--costing-muted);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-field input {
|
||
|
|
padding-left: 2.05rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-size-field {
|
||
|
|
min-width: 5.4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-wrap {
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
min-width: 72rem;
|
||
|
|
border-collapse: separate;
|
||
|
|
border-spacing: 0 0.36rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
th,
|
||
|
|
td {
|
||
|
|
padding: 0.54rem 0.68rem;
|
||
|
|
text-align: left;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
th {
|
||
|
|
color: var(--costing-muted);
|
||
|
|
font-size: 0.68rem;
|
||
|
|
font-weight: 800;
|
||
|
|
letter-spacing: 0.06em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody tr {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody tr:hover td {
|
||
|
|
background: color-mix(in srgb, var(--color-brand) 5%, var(--costing-soft));
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody tr.active td {
|
||
|
|
background: color-mix(in srgb, var(--color-brand) 9%, var(--costing-panel));
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody tr.warn td {
|
||
|
|
background: color-mix(in srgb, oklch(93% 0.08 83) 45%, var(--costing-panel));
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody td {
|
||
|
|
border-top: 1px solid var(--costing-line);
|
||
|
|
border-bottom: 1px solid var(--costing-line);
|
||
|
|
background: var(--costing-soft);
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody td:first-child {
|
||
|
|
border-left: 1px solid var(--costing-line);
|
||
|
|
border-radius: 0.62rem 0 0 0.62rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody td:last-child {
|
||
|
|
border-right: 1px solid var(--costing-line);
|
||
|
|
border-radius: 0 0.62rem 0.62rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
td strong,
|
||
|
|
td small {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
td strong {
|
||
|
|
max-width: 18rem;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
font-size: 0.88rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
td small {
|
||
|
|
margin-top: 0.08rem;
|
||
|
|
font-size: 0.72rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-cell {
|
||
|
|
min-width: 17rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-token {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.58rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-token > span {
|
||
|
|
width: 1.9rem;
|
||
|
|
height: 1.9rem;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-shrink: 0;
|
||
|
|
border-radius: 0.62rem;
|
||
|
|
color: var(--green-deep);
|
||
|
|
background: color-mix(in srgb, var(--color-brand) 13%, var(--costing-panel));
|
||
|
|
font-size: 0.68rem;
|
||
|
|
font-weight: 850;
|
||
|
|
}
|
||
|
|
|
||
|
|
.money {
|
||
|
|
color: var(--green-deep);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-pill {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 0.28rem 0.5rem;
|
||
|
|
border-radius: 999px;
|
||
|
|
font-size: 0.72rem;
|
||
|
|
font-weight: 800;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-pill.positive {
|
||
|
|
color: var(--green-deep);
|
||
|
|
background: var(--green-soft);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-pill.warning {
|
||
|
|
color: var(--costing-warn);
|
||
|
|
background: oklch(95% 0.055 82);
|
||
|
|
}
|
||
|
|
|
||
|
|
.skeleton-row td {
|
||
|
|
cursor: progress;
|
||
|
|
}
|
||
|
|
|
||
|
|
.skeleton-lines {
|
||
|
|
display: grid;
|
||
|
|
gap: 0.24rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.empty-row td,
|
||
|
|
.empty-row:hover td {
|
||
|
|
padding: 1.4rem;
|
||
|
|
text-align: center;
|
||
|
|
background: var(--costing-soft);
|
||
|
|
}
|
||
|
|
|
||
|
|
.empty-row strong,
|
||
|
|
.empty-row small {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination-bar {
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 0.75rem;
|
||
|
|
margin-top: 0.75rem;
|
||
|
|
color: var(--costing-muted);
|
||
|
|
font-size: 0.82rem;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination-controls {
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: flex-end;
|
||
|
|
gap: 0.35rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination-controls button {
|
||
|
|
min-height: 2rem;
|
||
|
|
padding: 0.38rem 0.58rem;
|
||
|
|
border: 1px solid var(--costing-line);
|
||
|
|
border-radius: 0.55rem;
|
||
|
|
background: var(--costing-panel);
|
||
|
|
color: var(--costing-ink);
|
||
|
|
font-size: 0.78rem;
|
||
|
|
font-weight: 800;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination-controls button:disabled {
|
||
|
|
opacity: 0.45;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination-controls strong {
|
||
|
|
padding: 0 0.35rem;
|
||
|
|
color: var(--costing-ink);
|
||
|
|
font-size: 0.78rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inspector {
|
||
|
|
position: sticky;
|
||
|
|
top: 1rem;
|
||
|
|
max-height: calc(100vh - 2rem);
|
||
|
|
overflow: auto;
|
||
|
|
padding: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inspector-head {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 0.85rem;
|
||
|
|
margin-bottom: 0.85rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-button {
|
||
|
|
width: 2.25rem;
|
||
|
|
min-height: 2.25rem;
|
||
|
|
border: 1px solid var(--costing-line);
|
||
|
|
background: var(--costing-soft);
|
||
|
|
}
|
||
|
|
|
||
|
|
.warning-box {
|
||
|
|
align-items: flex-start;
|
||
|
|
padding: 0.78rem;
|
||
|
|
margin-bottom: 0.85rem;
|
||
|
|
border: 1px solid oklch(84% 0.085 78);
|
||
|
|
border-radius: 0.82rem;
|
||
|
|
color: var(--costing-warn);
|
||
|
|
background: oklch(96% 0.045 84);
|
||
|
|
font-size: 0.85rem;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.warning-box div {
|
||
|
|
display: grid;
|
||
|
|
gap: 0.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-stack {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
gap: 0.55rem;
|
||
|
|
margin-bottom: 0.95rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-stack div,
|
||
|
|
.breakdown-grid div,
|
||
|
|
.empty-inspector {
|
||
|
|
border: 1px solid var(--costing-line);
|
||
|
|
border-radius: 0.78rem;
|
||
|
|
background: var(--costing-soft);
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-stack div {
|
||
|
|
display: flex;
|
||
|
|
align-items: baseline;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 0.7rem;
|
||
|
|
padding: 0.7rem 0.78rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-stack strong {
|
||
|
|
font-size: 1.12rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inspector-section {
|
||
|
|
padding-top: 0.9rem;
|
||
|
|
margin-top: 0.9rem;
|
||
|
|
border-top: 1px solid var(--costing-line);
|
||
|
|
}
|
||
|
|
|
||
|
|
.block-heading {
|
||
|
|
display: grid;
|
||
|
|
gap: 0.18rem;
|
||
|
|
margin-bottom: 0.72rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer-form,
|
||
|
|
.input-grid,
|
||
|
|
.input-columns,
|
||
|
|
.breakdown-grid {
|
||
|
|
display: grid;
|
||
|
|
gap: 0.65rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer-form {
|
||
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
|
||
|
|
.drawer-form .wide {
|
||
|
|
grid-column: 1 / -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.breakdown-grid {
|
||
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
|
||
|
|
.breakdown-grid div {
|
||
|
|
padding: 0.68rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.breakdown-grid strong {
|
||
|
|
margin-top: 0.12rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.empty-inspector {
|
||
|
|
display: grid;
|
||
|
|
justify-items: center;
|
||
|
|
gap: 0.38rem;
|
||
|
|
padding: 2rem 1rem;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.empty-inspector :global(svg) {
|
||
|
|
color: var(--green-deep);
|
||
|
|
}
|
||
|
|
|
||
|
|
.inputs-panel {
|
||
|
|
display: grid;
|
||
|
|
gap: 0.9rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-block {
|
||
|
|
padding: 0.92rem;
|
||
|
|
border: 1px solid var(--costing-line);
|
||
|
|
border-radius: 0.9rem;
|
||
|
|
background: var(--costing-soft);
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-grid.four {
|
||
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-columns {
|
||
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-list {
|
||
|
|
display: grid;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inline-field,
|
||
|
|
.margin-row {
|
||
|
|
display: grid;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.55rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inline-field {
|
||
|
|
grid-template-columns: minmax(0, 1fr) 8.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inline-field input {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inline-field > span {
|
||
|
|
display: grid;
|
||
|
|
gap: 0.12rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inline-field small,
|
||
|
|
label small {
|
||
|
|
color: var(--costing-muted);
|
||
|
|
font-size: 0.74rem;
|
||
|
|
font-weight: 650;
|
||
|
|
}
|
||
|
|
|
||
|
|
.margin-table {
|
||
|
|
display: grid;
|
||
|
|
gap: 0.55rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.margin-row {
|
||
|
|
grid-template-columns: minmax(12rem, 1fr) minmax(9rem, 0.7fr) minmax(9rem, 0.7fr);
|
||
|
|
padding: 0.68rem;
|
||
|
|
border: 1px solid var(--costing-line);
|
||
|
|
border-radius: 0.76rem;
|
||
|
|
background: var(--costing-panel);
|
||
|
|
}
|
||
|
|
|
||
|
|
.empty-state {
|
||
|
|
display: grid;
|
||
|
|
gap: 0.25rem;
|
||
|
|
padding: 1rem;
|
||
|
|
border: 1px solid var(--costing-line);
|
||
|
|
border-radius: 0.82rem;
|
||
|
|
background: var(--costing-soft);
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
to {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 1240px) {
|
||
|
|
.workspace-grid {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inspector {
|
||
|
|
position: static;
|
||
|
|
max-height: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 980px) {
|
||
|
|
.page-head,
|
||
|
|
.section-toolbar {
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
|
||
|
|
.health-strip,
|
||
|
|
.input-grid.four,
|
||
|
|
.input-columns {
|
||
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 760px) {
|
||
|
|
.health-strip,
|
||
|
|
.input-grid.four,
|
||
|
|
.input-columns,
|
||
|
|
.drawer-form,
|
||
|
|
.margin-row,
|
||
|
|
.breakdown-grid {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.head-actions,
|
||
|
|
.filter-bar,
|
||
|
|
.pagination-bar {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.head-actions .primary-button,
|
||
|
|
.filter-bar label {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination-bar,
|
||
|
|
.pagination-controls {
|
||
|
|
align-items: stretch;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination-controls {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination-controls strong {
|
||
|
|
grid-column: 1 / -1;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
table,
|
||
|
|
thead,
|
||
|
|
tbody,
|
||
|
|
tr,
|
||
|
|
td {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
table {
|
||
|
|
min-width: 0;
|
||
|
|
border-spacing: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
thead {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody {
|
||
|
|
display: grid;
|
||
|
|
gap: 0.78rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody tr {
|
||
|
|
padding: 0.35rem;
|
||
|
|
border: 1px solid var(--costing-line);
|
||
|
|
border-radius: 0.9rem;
|
||
|
|
background: var(--costing-soft);
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody td,
|
||
|
|
tbody td:first-child,
|
||
|
|
tbody td:last-child {
|
||
|
|
padding: 0.74rem 0.78rem;
|
||
|
|
white-space: normal;
|
||
|
|
border: none;
|
||
|
|
border-radius: 0;
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody td + td {
|
||
|
|
border-top: 1px solid var(--costing-line);
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody td::before {
|
||
|
|
content: attr(data-label);
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 0.34rem;
|
||
|
|
color: var(--costing-muted);
|
||
|
|
font-size: 0.72rem;
|
||
|
|
font-weight: 800;
|
||
|
|
letter-spacing: 0.06em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
td strong {
|
||
|
|
max-width: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.product-cell {
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|