v1.2 scaffold
This commit is contained in:
Generated
+1315
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "data-entry-app-frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^3.2.0",
|
||||
"@sveltejs/kit": "^2.7.1",
|
||||
"svelte": "^5.0.0",
|
||||
"typescript": "^5.5.4",
|
||||
"vite": "^8.0.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
import { env } from '$env/dynamic/public';
|
||||
import { mockCosts, mockMixes, mockProducts, mockRawMaterials, mockScenarios } from '$lib/mock';
|
||||
import type {
|
||||
LoginResponse,
|
||||
Product,
|
||||
ProductCostBreakdown,
|
||||
RawMaterial,
|
||||
RawMaterialCreateInput,
|
||||
RawMaterialPriceCreateInput,
|
||||
Scenario
|
||||
} from '$lib/types';
|
||||
|
||||
const API_BASE_URL = env.PUBLIC_API_BASE_URL || 'http://localhost:8000';
|
||||
|
||||
async function fetchJson<T>(path: string, fallback: T): Promise<T> {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}${path}`);
|
||||
if (!response.ok) {
|
||||
return fallback;
|
||||
}
|
||||
return (await response.json()) as T;
|
||||
} catch {
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
async function request<T>(path: string, options: RequestInit): Promise<T> {
|
||||
const response = await fetch(`${API_BASE_URL}${path}`, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(options.headers ?? {})
|
||||
},
|
||||
...options
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
let message = 'Request failed';
|
||||
|
||||
try {
|
||||
const body = (await response.json()) as { detail?: string };
|
||||
message = body.detail ?? message;
|
||||
} catch {
|
||||
message = response.statusText || message;
|
||||
}
|
||||
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
return (await response.json()) as T;
|
||||
}
|
||||
|
||||
export const api = {
|
||||
rawMaterials: () => fetchJson<RawMaterial[]>('/api/raw-materials', mockRawMaterials),
|
||||
mixes: () => fetchJson('/api/mixes', mockMixes),
|
||||
products: () => fetchJson<Product[]>('/api/products', mockProducts),
|
||||
productCosts: () => fetchJson<ProductCostBreakdown[]>('/api/powerbi/product-costs', mockCosts),
|
||||
scenarios: () => fetchJson<Scenario[]>('/api/scenarios', mockScenarios),
|
||||
dataQuality: () => fetchJson('/api/powerbi/data-quality-issues', []),
|
||||
login: (email: string, password: string) =>
|
||||
request<LoginResponse>('/api/auth/login', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ email, password })
|
||||
}),
|
||||
createRawMaterial: (payload: RawMaterialCreateInput) =>
|
||||
request<RawMaterial>('/api/raw-materials', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload)
|
||||
}),
|
||||
addRawMaterialPrice: (rawMaterialId: number, payload: RawMaterialPriceCreateInput) =>
|
||||
request(`/api/raw-materials/${rawMaterialId}/prices`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload)
|
||||
})
|
||||
};
|
||||
@@ -0,0 +1,96 @@
|
||||
import type { Mix, Product, ProductCostBreakdown, RawMaterial, Scenario } from '$lib/types';
|
||||
|
||||
export const mockRawMaterials: RawMaterial[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Maize',
|
||||
unit_of_measure: 'tonne',
|
||||
kg_per_unit: 1000,
|
||||
status: 'active',
|
||||
current_price: {
|
||||
market_value: 520,
|
||||
waste_percentage: 0.02,
|
||||
cost_per_kg: 0.5304,
|
||||
effective_date: '2026-04-01'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Barley',
|
||||
unit_of_measure: 'tonne',
|
||||
kg_per_unit: 1000,
|
||||
status: 'active',
|
||||
current_price: {
|
||||
market_value: 470,
|
||||
waste_percentage: 0.015,
|
||||
cost_per_kg: 0.4771,
|
||||
effective_date: '2026-04-01'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
export const mockMixes: Mix[] = [
|
||||
{
|
||||
id: 1,
|
||||
client_name: 'Specialty Feeds',
|
||||
name: 'Pigeon Mix',
|
||||
status: 'active',
|
||||
ingredients: [
|
||||
{
|
||||
id: 1,
|
||||
raw_material_id: 1,
|
||||
raw_material_name: 'Maize',
|
||||
quantity_kg: 180,
|
||||
cost_per_kg: 0.5304,
|
||||
line_cost: 95.472
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
raw_material_id: 2,
|
||||
raw_material_name: 'Barley',
|
||||
quantity_kg: 100,
|
||||
cost_per_kg: 0.4771,
|
||||
line_cost: 47.71
|
||||
}
|
||||
],
|
||||
total_mix_kg: 280,
|
||||
total_mix_cost: 143.18,
|
||||
mix_cost_per_kg: 0.5114,
|
||||
warnings: []
|
||||
}
|
||||
];
|
||||
|
||||
export const mockProducts: Product[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Specialty Pigeon Breeder 20kg',
|
||||
client_name: 'Specialty Feeds',
|
||||
mix_id: 1,
|
||||
mix_name: 'Pigeon Mix',
|
||||
sale_type: 'standard',
|
||||
unit_of_measure: '20kg bag',
|
||||
distributor_margin: 0.225,
|
||||
wholesale_margin: 0.18
|
||||
}
|
||||
];
|
||||
|
||||
export const mockCosts: ProductCostBreakdown[] = [
|
||||
{
|
||||
product_id: 1,
|
||||
product_name: 'Specialty Pigeon Breeder 20kg',
|
||||
finished_product_delivered: 14.208,
|
||||
distributor_price: 18.3329,
|
||||
wholesale_price: 17.3268,
|
||||
warnings: []
|
||||
}
|
||||
];
|
||||
|
||||
export const mockScenarios: Scenario[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Current Standard',
|
||||
status: 'approved',
|
||||
description: 'Baseline approved pricing',
|
||||
overrides: {}
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,58 @@
|
||||
import { browser } from '$app/environment';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export type OperatorSession = {
|
||||
name: string;
|
||||
email: string;
|
||||
role: string;
|
||||
};
|
||||
|
||||
const STORAGE_KEY = 'data-entry-app-operator-session';
|
||||
|
||||
function readSession(): OperatorSession | null {
|
||||
if (!browser) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const value = localStorage.getItem(STORAGE_KEY);
|
||||
if (!value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
return JSON.parse(value) as OperatorSession;
|
||||
} catch {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function createOperatorSessionStore() {
|
||||
const store = writable<OperatorSession | null>(readSession());
|
||||
|
||||
if (browser) {
|
||||
window.addEventListener('storage', (event) => {
|
||||
if (event.key === STORAGE_KEY) {
|
||||
store.set(readSession());
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe: store.subscribe,
|
||||
set(session: OperatorSession) {
|
||||
if (browser) {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(session));
|
||||
}
|
||||
store.set(session);
|
||||
},
|
||||
clear() {
|
||||
if (browser) {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
}
|
||||
store.set(null);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export const operatorSession = createOperatorSessionStore();
|
||||
@@ -0,0 +1,121 @@
|
||||
export type RawMaterial = {
|
||||
id: number;
|
||||
tenant_id?: string;
|
||||
name: string;
|
||||
supplier?: string | null;
|
||||
unit_of_measure: string;
|
||||
kg_per_unit: number;
|
||||
status: string;
|
||||
notes?: string | null;
|
||||
created_at?: string;
|
||||
current_price?: {
|
||||
id?: number;
|
||||
market_value: number;
|
||||
waste_percentage: number;
|
||||
cost_per_kg: number;
|
||||
effective_date: string;
|
||||
status?: string;
|
||||
notes?: string | null;
|
||||
created_at?: string;
|
||||
loss_cost?: number;
|
||||
cost_per_unit?: number;
|
||||
} | null;
|
||||
};
|
||||
|
||||
export type MixIngredient = {
|
||||
id: number;
|
||||
raw_material_id: number;
|
||||
raw_material_name: string;
|
||||
quantity_kg: number;
|
||||
cost_per_kg: number | null;
|
||||
line_cost: number | null;
|
||||
notes?: string | null;
|
||||
};
|
||||
|
||||
export type Mix = {
|
||||
id: number;
|
||||
tenant_id?: string;
|
||||
client_name: string;
|
||||
name: string;
|
||||
status: string;
|
||||
version?: number;
|
||||
notes?: string | null;
|
||||
created_at?: string;
|
||||
ingredients: MixIngredient[];
|
||||
total_mix_kg: number;
|
||||
total_mix_cost: number;
|
||||
mix_cost_per_kg: number | null;
|
||||
warnings: string[];
|
||||
};
|
||||
|
||||
export type Product = {
|
||||
id: number;
|
||||
tenant_id?: string;
|
||||
name: string;
|
||||
client_name: string;
|
||||
mix_id?: number;
|
||||
mix_name: string;
|
||||
sale_type: string;
|
||||
own_bag?: boolean;
|
||||
unit_of_measure: string;
|
||||
items_per_pallet?: number;
|
||||
bagging_process?: string | null;
|
||||
distributor_margin: number | null;
|
||||
wholesale_margin: number | null;
|
||||
notes?: string | null;
|
||||
created_at?: string;
|
||||
};
|
||||
|
||||
export type ProductCostBreakdown = {
|
||||
product_id: number;
|
||||
product_name: string;
|
||||
cleaned_product_cost?: number;
|
||||
grading_cost?: number;
|
||||
bagging_cost?: number;
|
||||
cracking_cost?: number;
|
||||
bag_cost?: number;
|
||||
freight_cost?: number;
|
||||
finished_product_delivered: number;
|
||||
distributor_price: number | null;
|
||||
wholesale_price: number | null;
|
||||
warnings: string[];
|
||||
inputs?: Record<string, unknown>;
|
||||
};
|
||||
|
||||
export type Scenario = {
|
||||
id: number;
|
||||
name: string;
|
||||
status: string;
|
||||
description?: string | null;
|
||||
overrides: Record<string, unknown>;
|
||||
};
|
||||
|
||||
export type LoginResponse = {
|
||||
name: string;
|
||||
email: string;
|
||||
role: string;
|
||||
};
|
||||
|
||||
export type RawMaterialCreateInput = {
|
||||
name: string;
|
||||
supplier?: string | null;
|
||||
unit_of_measure: string;
|
||||
kg_per_unit: number;
|
||||
status?: string;
|
||||
notes?: string | null;
|
||||
initial_price: {
|
||||
market_value: number;
|
||||
waste_percentage: number;
|
||||
effective_date: string;
|
||||
status?: string;
|
||||
notes?: string | null;
|
||||
};
|
||||
};
|
||||
|
||||
export type RawMaterialPriceCreateInput = {
|
||||
market_value: number;
|
||||
waste_percentage: number;
|
||||
effective_date: string;
|
||||
status?: string;
|
||||
notes?: string | null;
|
||||
};
|
||||
@@ -0,0 +1,194 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { operatorSession } from '$lib/session';
|
||||
|
||||
const links = [
|
||||
{ href: '/', label: 'Home' },
|
||||
{ href: '/raw-materials', label: 'Raw Materials' },
|
||||
{ href: '/mixes', label: 'Mix Master' },
|
||||
{ href: '/products', label: 'Products' },
|
||||
{ href: '/scenarios', label: 'Scenarios' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Data Entry App</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="shell">
|
||||
<header class="topbar">
|
||||
<div class="brand-block">
|
||||
<a class="brand" href="/">Data Entry App</a>
|
||||
<p>Operator costing workflow</p>
|
||||
</div>
|
||||
|
||||
<nav class="topnav" aria-label="Primary navigation">
|
||||
{#each links as link}
|
||||
<a class:active={page.url.pathname === link.href} href={link.href}>{link.label}</a>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<div class="session-panel">
|
||||
{#if $operatorSession}
|
||||
<div>
|
||||
<span>Signed in</span>
|
||||
<strong>{$operatorSession.name}</strong>
|
||||
</div>
|
||||
<button type="button" onclick={() => operatorSession.clear()}>Sign out</button>
|
||||
{:else}
|
||||
<a class="login-link" href="/">Operator login</a>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(:root) {
|
||||
--canvas: #f5efe4;
|
||||
--canvas-strong: #fffaf1;
|
||||
--ink: #20170f;
|
||||
--muted: #695746;
|
||||
--line: rgba(74, 53, 31, 0.14);
|
||||
--brand: #8f4f1f;
|
||||
--brand-deep: #5a2d18;
|
||||
--accent: #d9a441;
|
||||
--shadow: 0 18px 50px rgba(56, 38, 19, 0.12);
|
||||
}
|
||||
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
font-family: "Segoe UI", "Helvetica Neue", sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(217, 164, 65, 0.22), transparent 24rem),
|
||||
radial-gradient(circle at left center, rgba(143, 79, 31, 0.1), transparent 28rem),
|
||||
linear-gradient(180deg, #f7f1e7 0%, #efe5d3 100%);
|
||||
}
|
||||
|
||||
:global(*) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.shell {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
backdrop-filter: blur(16px);
|
||||
background: rgba(247, 241, 231, 0.88);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.brand-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.brand {
|
||||
color: var(--brand-deep);
|
||||
text-decoration: none;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.brand-block p,
|
||||
.session-panel span {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.topnav a,
|
||||
.login-link,
|
||||
button {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 999px;
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--brand-deep);
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
background-color 160ms ease,
|
||||
transform 160ms ease;
|
||||
}
|
||||
|
||||
.topnav a:hover,
|
||||
.topnav a.active,
|
||||
.login-link:hover,
|
||||
button:hover {
|
||||
background: rgba(143, 79, 31, 0.08);
|
||||
border-color: rgba(143, 79, 31, 0.18);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.topnav a.active {
|
||||
background: linear-gradient(135deg, rgba(143, 79, 31, 0.14), rgba(217, 164, 65, 0.18));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.session-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.session-panel strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--brand-deep);
|
||||
color: #fff7ef;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #472213;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.topbar {
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: start;
|
||||
padding: 1rem 1rem 0.9rem;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,587 @@
|
||||
<script lang="ts">
|
||||
import { api } from '$lib/api';
|
||||
import { operatorSession } from '$lib/session';
|
||||
import type { Mix, ProductCostBreakdown, RawMaterial } from '$lib/types';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
let email = $state('operator@example.com');
|
||||
let password = $state('changeme');
|
||||
let isLoggingIn = $state(false);
|
||||
let loginError = $state('');
|
||||
|
||||
function currency(value: number | null | undefined, digits = 2) {
|
||||
if (value === null || value === undefined) {
|
||||
return 'N/A';
|
||||
}
|
||||
|
||||
return `$${value.toFixed(digits)}`;
|
||||
}
|
||||
|
||||
function findHighestProduct(products: ProductCostBreakdown[]) {
|
||||
return [...products].sort((left, right) => right.finished_product_delivered - left.finished_product_delivered)[0];
|
||||
}
|
||||
|
||||
function findMostExpensiveMix(mixes: Mix[]) {
|
||||
return [...mixes].sort((left, right) => (right.mix_cost_per_kg ?? 0) - (left.mix_cost_per_kg ?? 0))[0];
|
||||
}
|
||||
|
||||
function findLatestMaterial(materials: RawMaterial[]) {
|
||||
return [...materials].sort((left, right) => {
|
||||
const leftDate = left.current_price?.effective_date ?? '';
|
||||
const rightDate = right.current_price?.effective_date ?? '';
|
||||
return rightDate.localeCompare(leftDate);
|
||||
})[0];
|
||||
}
|
||||
|
||||
async function handleLogin(event: SubmitEvent) {
|
||||
event.preventDefault();
|
||||
loginError = '';
|
||||
isLoggingIn = true;
|
||||
|
||||
try {
|
||||
const session = await api.login(email, password);
|
||||
operatorSession.set(session);
|
||||
} catch (error) {
|
||||
loginError = error instanceof Error ? error.message : 'Unable to sign in';
|
||||
} finally {
|
||||
isLoggingIn = false;
|
||||
}
|
||||
}
|
||||
|
||||
const featuredProduct = $derived(findHighestProduct(data.productCosts));
|
||||
const featuredMix = $derived(findMostExpensiveMix(data.mixes));
|
||||
const featuredMaterial = $derived(findLatestMaterial(data.rawMaterials));
|
||||
</script>
|
||||
|
||||
{#if !$operatorSession}
|
||||
<section class="hero-grid">
|
||||
<article class="hero-panel intro">
|
||||
<p class="eyebrow">Costing control room</p>
|
||||
<h1>Sign in to manage raw materials and push updates through Mix Master automatically.</h1>
|
||||
<p class="lede">
|
||||
This workflow is for operators maintaining input costs. Update a raw material once, then review the refreshed
|
||||
mix cost per kg and finished product pricing in the same session.
|
||||
</p>
|
||||
|
||||
<div class="workflow">
|
||||
<article>
|
||||
<span>01</span>
|
||||
<h2>Log in</h2>
|
||||
<p>Enter the operator account to unlock material maintenance and costing review.</p>
|
||||
</article>
|
||||
<article>
|
||||
<span>02</span>
|
||||
<h2>Update inputs</h2>
|
||||
<p>Record a new market value or waste percentage for any raw material.</p>
|
||||
</article>
|
||||
<article>
|
||||
<span>03</span>
|
||||
<h2>Review impact</h2>
|
||||
<p>Check Mix Master and downstream product pricing immediately after the save.</p>
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="hero-panel login-panel">
|
||||
<div class="panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Operator login</p>
|
||||
<h2>Use the seeded prototype account</h2>
|
||||
</div>
|
||||
<span class="badge">Backend-backed</span>
|
||||
</div>
|
||||
|
||||
<form class="login-form" onsubmit={handleLogin}>
|
||||
<label>
|
||||
Email
|
||||
<input bind:value={email} type="email" autocomplete="username" />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Password
|
||||
<input bind:value={password} type="password" autocomplete="current-password" />
|
||||
</label>
|
||||
|
||||
{#if loginError}
|
||||
<p class="form-error">{loginError}</p>
|
||||
{/if}
|
||||
|
||||
<button type="submit" disabled={isLoggingIn}>
|
||||
{isLoggingIn ? 'Signing in...' : 'Sign in'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="credentials">
|
||||
<p>Default email: <strong>operator@example.com</strong></p>
|
||||
<p>Default password: <strong>changeme</strong></p>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
{:else}
|
||||
<section class="signed-in-banner">
|
||||
<div>
|
||||
<p class="eyebrow">Active operator</p>
|
||||
<h1>Welcome back, {$operatorSession.name}.</h1>
|
||||
<p>Manage raw materials first, then review Mix Master and product pricing before publishing changes.</p>
|
||||
</div>
|
||||
<a class="primary-link" href="/raw-materials">Open raw material manager</a>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<section class="metric-row">
|
||||
{#each [
|
||||
{ label: 'Raw materials', value: data.rawMaterials.length, hint: 'Maintain live input costs' },
|
||||
{ label: 'Mixes', value: data.mixes.length, hint: 'Recipes recalculated from inputs' },
|
||||
{ label: 'Products', value: data.productCosts.length, hint: 'Delivered pricing outputs' },
|
||||
{ label: 'Warnings', value: data.dataQuality.length, hint: 'Items needing review' }
|
||||
] as card}
|
||||
<article class="metric-card">
|
||||
<p>{card.label}</p>
|
||||
<strong>{card.value}</strong>
|
||||
<span>{card.hint}</span>
|
||||
</article>
|
||||
{/each}
|
||||
</section>
|
||||
|
||||
<section class="overview-grid">
|
||||
<article class="surface-card">
|
||||
<div class="panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Latest input</p>
|
||||
<h2>{featuredMaterial?.name ?? 'No materials loaded'}</h2>
|
||||
</div>
|
||||
<a href="/raw-materials">Manage inputs</a>
|
||||
</div>
|
||||
|
||||
{#if featuredMaterial?.current_price}
|
||||
<dl class="split-stats">
|
||||
<div>
|
||||
<dt>Market value</dt>
|
||||
<dd>{currency(featuredMaterial.current_price.market_value)}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Waste</dt>
|
||||
<dd>{(featuredMaterial.current_price.waste_percentage * 100).toFixed(1)}%</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Cost per kg</dt>
|
||||
<dd>{currency(featuredMaterial.current_price.cost_per_kg, 4)}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
{:else}
|
||||
<p class="empty">No active price version is available for this material.</p>
|
||||
{/if}
|
||||
</article>
|
||||
|
||||
<article class="surface-card">
|
||||
<div class="panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Mix master</p>
|
||||
<h2>{featuredMix?.name ?? 'No mixes loaded'}</h2>
|
||||
</div>
|
||||
<a href="/mixes">Review mixes</a>
|
||||
</div>
|
||||
|
||||
{#if featuredMix}
|
||||
<dl class="split-stats">
|
||||
<div>
|
||||
<dt>Client</dt>
|
||||
<dd>{featuredMix.client_name}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Total mix cost</dt>
|
||||
<dd>{currency(featuredMix.total_mix_cost)}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Cost per kg</dt>
|
||||
<dd>{currency(featuredMix.mix_cost_per_kg, 4)}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
{/if}
|
||||
</article>
|
||||
|
||||
<article class="surface-card">
|
||||
<div class="panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Delivered output</p>
|
||||
<h2>{featuredProduct?.product_name ?? 'No product costs loaded'}</h2>
|
||||
</div>
|
||||
<a href="/products">Review products</a>
|
||||
</div>
|
||||
|
||||
{#if featuredProduct}
|
||||
<dl class="split-stats">
|
||||
<div>
|
||||
<dt>Delivered</dt>
|
||||
<dd>{currency(featuredProduct.finished_product_delivered)}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Distributor</dt>
|
||||
<dd>{currency(featuredProduct.distributor_price)}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Wholesale</dt>
|
||||
<dd>{currency(featuredProduct.wholesale_price)}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
{/if}
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="detail-grid">
|
||||
<article class="surface-card">
|
||||
<div class="panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Current cascade</p>
|
||||
<h2>Raw material updates flow straight into Mix Master</h2>
|
||||
</div>
|
||||
<a href="/raw-materials">Edit materials</a>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Mix</th>
|
||||
<th>Ingredients</th>
|
||||
<th>Total Cost</th>
|
||||
<th>Cost/Kg</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.mixes as mix}
|
||||
<tr>
|
||||
<td>{mix.name}</td>
|
||||
<td>{mix.ingredients.length}</td>
|
||||
<td>{currency(mix.total_mix_cost)}</td>
|
||||
<td>{currency(mix.mix_cost_per_kg, 4)}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</article>
|
||||
|
||||
<article class="surface-card">
|
||||
<div class="panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Output pricing</p>
|
||||
<h2>Finished products</h2>
|
||||
</div>
|
||||
<a href="/products">Open products</a>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Product</th>
|
||||
<th>Delivered</th>
|
||||
<th>Distributor</th>
|
||||
<th>Wholesale</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.productCosts as row}
|
||||
<tr>
|
||||
<td>{row.product_name}</td>
|
||||
<td>{currency(row.finished_product_delivered)}</td>
|
||||
<td>{currency(row.distributor_price)}</td>
|
||||
<td>{currency(row.wholesale_price)}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
h1,
|
||||
h2,
|
||||
p,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--brand);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero-grid,
|
||||
.overview-grid,
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
grid-template-columns: minmax(0, 1.6fr) minmax(20rem, 0.9fr);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.overview-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
grid-template-columns: 1.3fr 1fr;
|
||||
}
|
||||
|
||||
.hero-panel,
|
||||
.surface-card,
|
||||
.metric-card,
|
||||
.signed-in-banner {
|
||||
background: rgba(255, 250, 241, 0.82);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 1.5rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.intro,
|
||||
.login-panel,
|
||||
.surface-card,
|
||||
.signed-in-banner {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.4rem;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(90, 45, 24, 0.95), rgba(143, 79, 31, 0.88)),
|
||||
linear-gradient(180deg, rgba(217, 164, 65, 0.18), transparent);
|
||||
color: #fff7ef;
|
||||
}
|
||||
|
||||
.intro .eyebrow,
|
||||
.intro .lede,
|
||||
.intro .workflow p {
|
||||
color: rgba(255, 247, 239, 0.8);
|
||||
}
|
||||
|
||||
.intro h1 {
|
||||
font-size: clamp(2rem, 4vw, 3.6rem);
|
||||
max-width: 11ch;
|
||||
line-height: 0.95;
|
||||
}
|
||||
|
||||
.lede {
|
||||
max-width: 52rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.workflow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.workflow article {
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
background: rgba(255, 247, 239, 0.08);
|
||||
border: 1px solid rgba(255, 247, 239, 0.12);
|
||||
}
|
||||
|
||||
.workflow span {
|
||||
display: inline-flex;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
background: rgba(217, 164, 65, 0.18);
|
||||
margin-bottom: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.workflow h2 {
|
||||
margin-bottom: 0.45rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.panel-heading,
|
||||
.signed-in-banner {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.badge,
|
||||
.primary-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
padding: 0.7rem 1rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: rgba(143, 79, 31, 0.08);
|
||||
color: var(--brand-deep);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.primary-link {
|
||||
background: var(--brand-deep);
|
||||
color: #fff7ef;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.login-form label {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.login-form input {
|
||||
width: 100%;
|
||||
padding: 0.9rem 1rem;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(90, 45, 24, 0.16);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.login-form button {
|
||||
padding: 0.95rem 1.1rem;
|
||||
border: none;
|
||||
border-radius: 1rem;
|
||||
background: linear-gradient(135deg, var(--brand-deep), var(--brand));
|
||||
color: #fff7ef;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-form button:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
color: #a3301d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.credentials {
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
background: rgba(143, 79, 31, 0.06);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.credentials strong {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.signed-in-banner {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.signed-in-banner p:last-child {
|
||||
color: var(--muted);
|
||||
margin-top: 0.45rem;
|
||||
}
|
||||
|
||||
.metric-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
padding: 1.1rem 1.2rem;
|
||||
}
|
||||
|
||||
.metric-card p,
|
||||
.metric-card span,
|
||||
.empty,
|
||||
dt {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.metric-card strong {
|
||||
display: block;
|
||||
margin: 0.35rem 0;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.split-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-top: 0.2rem;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.85rem 0.4rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.hero-grid,
|
||||
.overview-grid,
|
||||
.detail-grid,
|
||||
.metric-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.workflow,
|
||||
.split-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.panel-heading,
|
||||
.signed-in-banner {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,20 @@
|
||||
import { api } from '$lib/api';
|
||||
|
||||
export async function load() {
|
||||
const [rawMaterials, mixes, productCosts, scenarios, dataQuality] = await Promise.all([
|
||||
api.rawMaterials(),
|
||||
api.mixes(),
|
||||
api.productCosts(),
|
||||
api.scenarios(),
|
||||
api.dataQuality()
|
||||
]);
|
||||
|
||||
return {
|
||||
rawMaterials,
|
||||
mixes,
|
||||
productCosts,
|
||||
scenarios,
|
||||
dataQuality
|
||||
};
|
||||
}
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
<script lang="ts">
|
||||
let { data } = $props();
|
||||
</script>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Mix Master</h2>
|
||||
<p>Recipes are structured as ingredient rows instead of spreadsheet columns.</p>
|
||||
|
||||
<div class="cards">
|
||||
{#each data.mixes as mix}
|
||||
<article class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<h3>{mix.name}</h3>
|
||||
<p>{mix.client_name}</p>
|
||||
</div>
|
||||
<span>{mix.status}</span>
|
||||
</div>
|
||||
<dl>
|
||||
<div>
|
||||
<dt>Total Kg</dt>
|
||||
<dd>{mix.total_mix_kg}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Total Cost</dt>
|
||||
<dd>${mix.total_mix_cost.toFixed(2)}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Cost/Kg</dt>
|
||||
<dd>{mix.mix_cost_per_kg ? `$${mix.mix_cost_per_kg.toFixed(4)}` : 'N/A'}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
{#if mix.warnings.length}
|
||||
<ul>
|
||||
{#each mix.warnings as warning}
|
||||
<li>{warning}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(255, 251, 244, 0.82);
|
||||
border-radius: 1.2rem;
|
||||
padding: 1.1rem;
|
||||
border: 1px solid rgba(91, 69, 40, 0.12);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
p,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
dt {
|
||||
color: #5f5245;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 1rem 0 0;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
import { api } from '$lib/api';
|
||||
|
||||
export async function load() {
|
||||
return {
|
||||
mixes: await api.mixes()
|
||||
};
|
||||
}
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
<script lang="ts">
|
||||
let { data } = $props();
|
||||
</script>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Products</h2>
|
||||
<p>Transparent delivered cost and pricing outputs from backend calculations.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Product</th>
|
||||
<th>Mix</th>
|
||||
<th>Sale Type</th>
|
||||
<th>Delivered Cost</th>
|
||||
<th>Distributor</th>
|
||||
<th>Wholesale</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.products as product}
|
||||
{@const cost = data.productCosts.find((item) => item.product_id === product.id)}
|
||||
<tr>
|
||||
<td>{product.name}</td>
|
||||
<td>{product.mix_name}</td>
|
||||
<td>{product.sale_type}</td>
|
||||
<td>{cost ? `$${cost.finished_product_delivered.toFixed(2)}` : 'N/A'}</td>
|
||||
<td>{cost?.distributor_price ? `$${cost.distributor_price.toFixed(2)}` : 'N/A'}</td>
|
||||
<td>{cost?.wholesale_price ? `$${cost.wholesale_price.toFixed(2)}` : 'N/A'}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.panel {
|
||||
background: rgba(255, 251, 244, 0.82);
|
||||
border-radius: 1.2rem;
|
||||
padding: 1.2rem;
|
||||
border: 1px solid rgba(91, 69, 40, 0.12);
|
||||
}
|
||||
|
||||
h2,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 0.85rem 0.4rem;
|
||||
border-bottom: 1px solid rgba(91, 69, 40, 0.1);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,10 @@
|
||||
import { api } from '$lib/api';
|
||||
|
||||
export async function load() {
|
||||
const [products, productCosts] = await Promise.all([api.products(), api.productCosts()]);
|
||||
return {
|
||||
products,
|
||||
productCosts
|
||||
};
|
||||
}
|
||||
|
||||
@@ -0,0 +1,633 @@
|
||||
<script lang="ts">
|
||||
import { invalidateAll } from '$app/navigation';
|
||||
import { api } from '$lib/api';
|
||||
import { operatorSession } from '$lib/session';
|
||||
import type { Mix, Product, ProductCostBreakdown } from '$lib/types';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
let isCreating = $state(false);
|
||||
let pendingMaterialId = $state<number | null>(null);
|
||||
let successMessage = $state('');
|
||||
let errorMessage = $state('');
|
||||
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
|
||||
function currency(value: number | null | undefined, digits = 2) {
|
||||
if (value === null || value === undefined) {
|
||||
return 'N/A';
|
||||
}
|
||||
|
||||
return `$${value.toFixed(digits)}`;
|
||||
}
|
||||
|
||||
function getImpactedMixes(materialId: number): Mix[] {
|
||||
return data.mixes.filter((mix: Mix) => mix.ingredients.some((ingredient) => ingredient.raw_material_id === materialId));
|
||||
}
|
||||
|
||||
function getImpactedProducts(materialId: number): Array<Product & { deliveredCost: ProductCostBreakdown | undefined }> {
|
||||
const mixIds = new Set(getImpactedMixes(materialId).map((mix) => mix.id));
|
||||
|
||||
return data.products
|
||||
.filter((product: Product) => mixIds.has(product.mix_id ?? -1))
|
||||
.map((product: Product) => ({
|
||||
...product,
|
||||
deliveredCost: data.productCosts.find((row: ProductCostBreakdown) => row.product_id === product.id)
|
||||
}));
|
||||
}
|
||||
|
||||
async function handleCreateMaterial(event: SubmitEvent) {
|
||||
event.preventDefault();
|
||||
successMessage = '';
|
||||
errorMessage = '';
|
||||
isCreating = true;
|
||||
|
||||
const form = event.currentTarget as HTMLFormElement;
|
||||
const formData = new FormData(form);
|
||||
|
||||
try {
|
||||
await api.createRawMaterial({
|
||||
name: String(formData.get('name') ?? '').trim(),
|
||||
supplier: String(formData.get('supplier') ?? '').trim() || null,
|
||||
unit_of_measure: String(formData.get('unit_of_measure') ?? '').trim(),
|
||||
kg_per_unit: Number(formData.get('kg_per_unit')),
|
||||
status: String(formData.get('status') ?? 'active'),
|
||||
notes: String(formData.get('notes') ?? '').trim() || null,
|
||||
initial_price: {
|
||||
market_value: Number(formData.get('market_value')),
|
||||
waste_percentage: Number(formData.get('waste_percentage')),
|
||||
effective_date: String(formData.get('effective_date') ?? today),
|
||||
status: 'active',
|
||||
notes: String(formData.get('price_notes') ?? '').trim() || null
|
||||
}
|
||||
});
|
||||
|
||||
form.reset();
|
||||
const effectiveDate = form.elements.namedItem('effective_date');
|
||||
if (effectiveDate instanceof HTMLInputElement) {
|
||||
effectiveDate.value = today;
|
||||
}
|
||||
successMessage = 'Raw material created and added to the costing model.';
|
||||
await invalidateAll();
|
||||
} catch (error) {
|
||||
errorMessage = error instanceof Error ? error.message : 'Unable to create raw material';
|
||||
} finally {
|
||||
isCreating = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAddPrice(event: SubmitEvent, rawMaterialId: number) {
|
||||
event.preventDefault();
|
||||
successMessage = '';
|
||||
errorMessage = '';
|
||||
pendingMaterialId = rawMaterialId;
|
||||
|
||||
const form = event.currentTarget as HTMLFormElement;
|
||||
const formData = new FormData(form);
|
||||
|
||||
try {
|
||||
await api.addRawMaterialPrice(rawMaterialId, {
|
||||
market_value: Number(formData.get('market_value')),
|
||||
waste_percentage: Number(formData.get('waste_percentage')),
|
||||
effective_date: String(formData.get('effective_date') ?? today),
|
||||
status: 'active',
|
||||
notes: String(formData.get('notes') ?? '').trim() || null
|
||||
});
|
||||
|
||||
form.reset();
|
||||
const effectiveDate = form.elements.namedItem('effective_date');
|
||||
if (effectiveDate instanceof HTMLInputElement) {
|
||||
effectiveDate.value = today;
|
||||
}
|
||||
successMessage = 'Price version saved. Mix and product costs have been refreshed.';
|
||||
await invalidateAll();
|
||||
} catch (error) {
|
||||
errorMessage = error instanceof Error ? error.message : 'Unable to add price version';
|
||||
} finally {
|
||||
pendingMaterialId = null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if !$operatorSession}
|
||||
<section class="locked-panel">
|
||||
<p class="eyebrow">Operator access required</p>
|
||||
<h1>Sign in from the homepage before managing raw materials.</h1>
|
||||
<p>This page is the input maintenance area for Mix Master and downstream product pricing.</p>
|
||||
<a href="/">Return to login</a>
|
||||
</section>
|
||||
{:else}
|
||||
<section class="page-header">
|
||||
<div>
|
||||
<p class="eyebrow">Raw material manager</p>
|
||||
<h1>Maintain input costs and watch the costing model update downstream.</h1>
|
||||
<p>
|
||||
Every active price version feeds the existing mix calculation engine. Save a new price, then review the
|
||||
impacted mixes and finished product outputs below.
|
||||
</p>
|
||||
</div>
|
||||
<div class="header-status">
|
||||
<span>{$operatorSession.email}</span>
|
||||
<strong>{data.rawMaterials.length} materials under control</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{#if successMessage}
|
||||
<p class="feedback success">{successMessage}</p>
|
||||
{/if}
|
||||
|
||||
{#if errorMessage}
|
||||
<p class="feedback error">{errorMessage}</p>
|
||||
{/if}
|
||||
|
||||
<section class="top-grid">
|
||||
<article class="surface-card">
|
||||
<div class="panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Add raw material</p>
|
||||
<h2>Create a new tracked input</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="material-form" onsubmit={handleCreateMaterial}>
|
||||
<div class="form-grid">
|
||||
<label>
|
||||
Name
|
||||
<input name="name" required />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Supplier
|
||||
<input name="supplier" />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Unit of measure
|
||||
<input name="unit_of_measure" value="tonne" required />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Kg per unit
|
||||
<input name="kg_per_unit" type="number" min="0.0001" step="0.0001" value="1000" required />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Market value
|
||||
<input name="market_value" type="number" min="0.0001" step="0.0001" required />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Waste percentage
|
||||
<input name="waste_percentage" type="number" min="0" max="1" step="0.0001" value="0" required />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Effective date
|
||||
<input name="effective_date" type="date" value={today} required />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Status
|
||||
<select name="status">
|
||||
<option value="active">Active</option>
|
||||
<option value="draft">Draft</option>
|
||||
<option value="inactive">Inactive</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
Material notes
|
||||
<textarea name="notes" rows="3"></textarea>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Price notes
|
||||
<textarea name="price_notes" rows="2"></textarea>
|
||||
</label>
|
||||
|
||||
<button type="submit" disabled={isCreating}>
|
||||
{isCreating ? 'Creating material...' : 'Create raw material'}
|
||||
</button>
|
||||
</form>
|
||||
</article>
|
||||
|
||||
<article class="surface-card">
|
||||
<div class="panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Downstream view</p>
|
||||
<h2>Current mix and product snapshot</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="snapshot-list">
|
||||
<article>
|
||||
<h3>Mix Master</h3>
|
||||
<ul>
|
||||
{#each data.mixes as mix}
|
||||
<li>
|
||||
<strong>{mix.name}</strong>
|
||||
<span>{currency(mix.mix_cost_per_kg, 4)} / kg</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h3>Finished products</h3>
|
||||
<ul>
|
||||
{#each data.productCosts as row}
|
||||
<li>
|
||||
<strong>{row.product_name}</strong>
|
||||
<span>{currency(row.finished_product_delivered)}</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="material-list">
|
||||
{#each data.rawMaterials as material}
|
||||
{@const impactedMixes = getImpactedMixes(material.id)}
|
||||
{@const impactedProducts = getImpactedProducts(material.id)}
|
||||
|
||||
<article class="surface-card material-card">
|
||||
<div class="panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Tracked input</p>
|
||||
<h2>{material.name}</h2>
|
||||
<p class="subtle">
|
||||
{material.supplier || 'Supplier not set'} · {material.unit_of_measure} · {material.kg_per_unit} kg per
|
||||
unit
|
||||
</p>
|
||||
</div>
|
||||
<span class:inactive={material.status !== 'active'} class="status-pill">{material.status}</span>
|
||||
</div>
|
||||
|
||||
<div class="material-grid">
|
||||
<section class="detail-panel">
|
||||
<div class="detail-row">
|
||||
<span>Current market value</span>
|
||||
<strong>{currency(material.current_price?.market_value)}</strong>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span>Current waste</span>
|
||||
<strong>
|
||||
{material.current_price ? `${(material.current_price.waste_percentage * 100).toFixed(1)}%` : 'N/A'}
|
||||
</strong>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span>Cost per kg</span>
|
||||
<strong>{currency(material.current_price?.cost_per_kg, 4)}</strong>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span>Effective date</span>
|
||||
<strong>{material.current_price?.effective_date ?? 'N/A'}</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<form class="price-form" onsubmit={(event) => handleAddPrice(event, material.id)}>
|
||||
<h3>Record a new price version</h3>
|
||||
|
||||
<div class="form-grid compact">
|
||||
<label>
|
||||
Market value
|
||||
<input name="market_value" type="number" min="0.0001" step="0.0001" required />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Waste percentage
|
||||
<input name="waste_percentage" type="number" min="0" max="1" step="0.0001" value="0" required />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Effective date
|
||||
<input name="effective_date" type="date" value={today} required />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
Notes
|
||||
<textarea name="notes" rows="2"></textarea>
|
||||
</label>
|
||||
|
||||
<button type="submit" disabled={pendingMaterialId === material.id}>
|
||||
{pendingMaterialId === material.id ? 'Saving price...' : 'Save price version'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="impact-grid">
|
||||
<section class="impact-panel">
|
||||
<h3>Impacted mixes</h3>
|
||||
{#if impactedMixes.length}
|
||||
<ul>
|
||||
{#each impactedMixes as mix}
|
||||
<li>
|
||||
<strong>{mix.name}</strong>
|
||||
<span>{currency(mix.mix_cost_per_kg, 4)} / kg</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else}
|
||||
<p class="empty">No mix currently references this material.</p>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<section class="impact-panel">
|
||||
<h3>Impacted products</h3>
|
||||
{#if impactedProducts.length}
|
||||
<ul>
|
||||
{#each impactedProducts as product}
|
||||
<li>
|
||||
<strong>{product.name}</strong>
|
||||
<span>{currency(product.deliveredCost?.finished_product_delivered)}</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else}
|
||||
<p class="empty">No product currently depends on this material.</p>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--brand);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.locked-panel,
|
||||
.page-header,
|
||||
.surface-card,
|
||||
.feedback {
|
||||
background: rgba(255, 250, 241, 0.82);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 1.5rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.locked-panel,
|
||||
.page-header,
|
||||
.surface-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.locked-panel {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.page-header p:last-child,
|
||||
.subtle,
|
||||
.empty,
|
||||
.detail-row span,
|
||||
.snapshot-list li span {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0.35rem 0 0.55rem;
|
||||
font-size: clamp(1.8rem, 4vw, 3rem);
|
||||
max-width: 16ch;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.header-status {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.header-status span {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
padding: 0.95rem 1.1rem;
|
||||
margin: 0 0 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.feedback.success {
|
||||
border-color: rgba(44, 106, 66, 0.2);
|
||||
color: #245838;
|
||||
}
|
||||
|
||||
.feedback.error {
|
||||
border-color: rgba(163, 48, 29, 0.22);
|
||||
color: #8d2b1f;
|
||||
}
|
||||
|
||||
.top-grid,
|
||||
.material-grid,
|
||||
.impact-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.top-grid {
|
||||
grid-template-columns: 1.2fr 0.8fr;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.material-form,
|
||||
.price-form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.form-grid.compact {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
label {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 0.85rem 0.95rem;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(90, 45, 24, 0.16);
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.95rem 1.1rem;
|
||||
border: none;
|
||||
border-radius: 1rem;
|
||||
background: linear-gradient(135deg, var(--brand-deep), var(--brand));
|
||||
color: #fff7ef;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.snapshot-list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.snapshot-list article {
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
background: rgba(143, 79, 31, 0.06);
|
||||
}
|
||||
|
||||
.snapshot-list ul,
|
||||
.impact-panel ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0.9rem 0 0;
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.snapshot-list li,
|
||||
.impact-panel li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.material-list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.material-card {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
padding: 0.45rem 0.8rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(44, 106, 66, 0.12);
|
||||
color: #245838;
|
||||
font-weight: 700;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.status-pill.inactive {
|
||||
background: rgba(143, 79, 31, 0.1);
|
||||
color: var(--brand-deep);
|
||||
}
|
||||
|
||||
.material-grid {
|
||||
grid-template-columns: 0.75fr 1.25fr;
|
||||
}
|
||||
|
||||
.detail-panel,
|
||||
.impact-panel {
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
background: rgba(143, 79, 31, 0.06);
|
||||
}
|
||||
|
||||
.detail-panel {
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.impact-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.top-grid,
|
||||
.material-grid,
|
||||
.impact-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.page-header,
|
||||
.panel-heading,
|
||||
.snapshot-list li,
|
||||
.impact-panel li,
|
||||
.detail-row {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.form-grid,
|
||||
.form-grid.compact {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.header-status {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,17 @@
|
||||
import { api } from '$lib/api';
|
||||
|
||||
export async function load() {
|
||||
const [rawMaterials, mixes, products, productCosts] = await Promise.all([
|
||||
api.rawMaterials(),
|
||||
api.mixes(),
|
||||
api.products(),
|
||||
api.productCosts()
|
||||
]);
|
||||
|
||||
return {
|
||||
rawMaterials,
|
||||
mixes,
|
||||
products,
|
||||
productCosts
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
<script lang="ts">
|
||||
let { data } = $props();
|
||||
</script>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Scenarios</h2>
|
||||
<p>Simulation workspaces for raw cost, freight, process, and margin changes.</p>
|
||||
|
||||
<div class="scenario-list">
|
||||
{#each data.scenarios as scenario}
|
||||
<article>
|
||||
<header>
|
||||
<div>
|
||||
<h3>{scenario.name}</h3>
|
||||
<p>{scenario.description ?? 'No description'}</p>
|
||||
</div>
|
||||
<span>{scenario.status}</span>
|
||||
</header>
|
||||
<pre>{JSON.stringify(scenario.overrides, null, 2)}</pre>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.scenario-list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
article {
|
||||
background: rgba(255, 251, 244, 0.82);
|
||||
border-radius: 1.2rem;
|
||||
padding: 1.1rem;
|
||||
border: 1px solid rgba(91, 69, 40, 0.12);
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
p,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.85rem;
|
||||
border-radius: 0.9rem;
|
||||
background: rgba(53, 42, 29, 0.08);
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
import { api } from '$lib/api';
|
||||
|
||||
export async function load() {
|
||||
return {
|
||||
scenarios: await api.scenarios()
|
||||
};
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import adapter from '@sveltejs/adapter-auto';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
kit: {
|
||||
adapter: adapter()
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": false,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()]
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user