1063 lines
31 KiB
Svelte
1063 lines
31 KiB
Svelte
<script lang="ts">
|
|
import { invalidateAll } from '$app/navigation';
|
|
import { api } from '$lib/api';
|
|
import AppSecondaryRail from '$lib/components/navigation/AppSecondaryRail.svelte';
|
|
import AppSecondaryRailLayout from '$lib/components/navigation/AppSecondaryRailLayout.svelte';
|
|
import { clientSession } from '$lib/session';
|
|
import { toast } from '$lib/toast';
|
|
import { BarChart3, CirclePlus, Wheat } from 'lucide-svelte';
|
|
import type { ComponentType } from 'svelte';
|
|
import type { Mix, Product, ProductCostBreakdown, RawMaterial } from '$lib/types';
|
|
|
|
let { data } = $props();
|
|
|
|
let isCreating = $state(false);
|
|
let pendingMaterialId = $state<number | null>(null);
|
|
let successMessage = $state('');
|
|
let errorMessage = $state('');
|
|
|
|
type RawMaterialsView = 'overview' | 'create' | 'library';
|
|
type RailItem = {
|
|
id: RawMaterialsView;
|
|
label: string;
|
|
description: string;
|
|
icon: ComponentType;
|
|
group: string;
|
|
};
|
|
|
|
const railItems: RailItem[] = [
|
|
{
|
|
id: 'overview',
|
|
label: 'Overview',
|
|
description: 'Pricing health, downstream exposure, and current portfolio snapshot.',
|
|
icon: BarChart3,
|
|
group: 'Workspace'
|
|
},
|
|
{
|
|
id: 'create',
|
|
label: 'Add Material',
|
|
description: 'Create a new raw material and seed its first active price version.',
|
|
icon: CirclePlus,
|
|
group: 'Workspace'
|
|
},
|
|
{
|
|
id: 'library',
|
|
label: 'Material Library',
|
|
description: 'Review live materials, price versions, and downstream impact.',
|
|
icon: Wheat,
|
|
group: 'Workspace'
|
|
}
|
|
];
|
|
|
|
const railGroups = [...new Set(railItems.map((item) => item.group))].map((group) => ({
|
|
label: group,
|
|
items: railItems.filter((item) => item.group === group)
|
|
}));
|
|
let activeView = $state<RawMaterialsView>('overview');
|
|
const pageSize = 20;
|
|
let overviewMixesPage = $state(1);
|
|
let overviewProductsPage = $state(1);
|
|
let materialLibraryPage = $state(1);
|
|
|
|
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 formatDate(value: string | null | undefined) {
|
|
if (!value) {
|
|
return 'No date';
|
|
}
|
|
|
|
return new Intl.DateTimeFormat('en-NZ', {
|
|
day: 'numeric',
|
|
month: 'short',
|
|
year: 'numeric'
|
|
}).format(new Date(value));
|
|
}
|
|
|
|
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)
|
|
}));
|
|
}
|
|
|
|
function totalPages(totalItems: number) {
|
|
return Math.max(1, Math.ceil(totalItems / pageSize));
|
|
}
|
|
|
|
function clampPage(page: number, totalItems: number) {
|
|
return Math.min(Math.max(1, page), totalPages(totalItems));
|
|
}
|
|
|
|
function paginate<T>(items: T[], page: number) {
|
|
const safePage = clampPage(page, items.length);
|
|
const start = (safePage - 1) * pageSize;
|
|
return items.slice(start, start + pageSize);
|
|
}
|
|
|
|
async function handleCreateMaterial(event: SubmitEvent) {
|
|
event.preventDefault();
|
|
isCreating = true;
|
|
const tid = toast.loading('Creating raw material…');
|
|
|
|
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;
|
|
}
|
|
toast.dismiss(tid);
|
|
toast.success('Raw material created');
|
|
await invalidateAll();
|
|
} catch (error) {
|
|
toast.dismiss(tid);
|
|
toast.error(error instanceof Error ? error.message : 'Unable to create raw material');
|
|
} finally {
|
|
isCreating = false;
|
|
}
|
|
}
|
|
|
|
async function handleAddPrice(event: SubmitEvent, rawMaterialId: number) {
|
|
event.preventDefault();
|
|
pendingMaterialId = rawMaterialId;
|
|
const tid = toast.loading('Saving price…');
|
|
|
|
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;
|
|
}
|
|
toast.dismiss(tid);
|
|
toast.success('Price version saved');
|
|
await invalidateAll();
|
|
} catch (error) {
|
|
toast.dismiss(tid);
|
|
toast.error(error instanceof Error ? error.message : 'Unable to add price version');
|
|
} finally {
|
|
pendingMaterialId = null;
|
|
}
|
|
}
|
|
|
|
const totalSpend = $derived(
|
|
data.rawMaterials.reduce(
|
|
(sum: number, material: RawMaterial) => sum + (material.current_price?.market_value ?? 0),
|
|
0
|
|
)
|
|
);
|
|
const averageWaste = $derived(
|
|
data.rawMaterials.length
|
|
? data.rawMaterials.reduce(
|
|
(sum: number, material: RawMaterial) => sum + (material.current_price?.waste_percentage ?? 0),
|
|
0
|
|
) / data.rawMaterials.length
|
|
: 0
|
|
);
|
|
const latestEffectiveDate = $derived(
|
|
[...data.rawMaterials]
|
|
.map((material: RawMaterial) => material.current_price?.effective_date)
|
|
.filter(Boolean)
|
|
.sort()
|
|
.at(-1) ?? null
|
|
);
|
|
const activeMaterials = $derived(data.rawMaterials.filter((material: RawMaterial) => material.status === 'active'));
|
|
const activeRailItem = $derived(railItems.find((item) => item.id === activeView) ?? railItems[0]);
|
|
const pagedOverviewMixes = $derived(paginate(data.mixes, overviewMixesPage));
|
|
const pagedOverviewProducts = $derived(paginate(data.productCosts, overviewProductsPage));
|
|
const pagedRawMaterials = $derived(paginate(data.rawMaterials, materialLibraryPage));
|
|
|
|
$effect(() => {
|
|
overviewMixesPage = clampPage(overviewMixesPage, data.mixes.length);
|
|
overviewProductsPage = clampPage(overviewProductsPage, data.productCosts.length);
|
|
materialLibraryPage = clampPage(materialLibraryPage, data.rawMaterials.length);
|
|
});
|
|
</script>
|
|
|
|
{#if !$clientSession}
|
|
<section class="locked-card">
|
|
<p class="eyebrow">Client Access Required</p>
|
|
<h2>Sign in on the Hunter Premium Produce home page before viewing raw material pricing.</h2>
|
|
<p>This workflow updates source inputs and pushes new values through mix and product calculations.</p>
|
|
<a href="/">Return to sign-in</a>
|
|
</section>
|
|
{:else}
|
|
{#if successMessage}
|
|
<p class="feedback success">{successMessage}</p>
|
|
{/if}
|
|
|
|
{#if errorMessage}
|
|
<p class="feedback error">{errorMessage}</p>
|
|
{/if}
|
|
|
|
<AppSecondaryRailLayout>
|
|
{#snippet rail()}
|
|
<AppSecondaryRail
|
|
sectionLabel="Raw Materials"
|
|
identityTitle={`${activeMaterials.length} active inputs`}
|
|
identitySubtitle={`${data.rawMaterials.length} tracked materials`}
|
|
identityIcon={Wheat}
|
|
groups={railGroups}
|
|
activeId={activeView}
|
|
onSelect={(id) => (activeView = id as RawMaterialsView)}
|
|
/>
|
|
{/snippet}
|
|
|
|
<div class="workspace-panel">
|
|
{#if activeRailItem}
|
|
{@const PanelIcon = activeRailItem.icon}
|
|
<header class="panel-header">
|
|
<div class="panel-header-icon" aria-hidden="true">
|
|
<PanelIcon size={16} strokeWidth={1.75} />
|
|
</div>
|
|
<div>
|
|
<p class="panel-eyebrow">Workspace</p>
|
|
<h2>{activeRailItem.label}</h2>
|
|
<p class="panel-description">{activeRailItem.description}</p>
|
|
</div>
|
|
</header>
|
|
{/if}
|
|
|
|
<div class="panel-body">
|
|
{#if activeView === 'overview'}
|
|
<section class="metric-row">
|
|
<article class="metric-card">
|
|
<span>Total Spend Tracked</span>
|
|
<strong>{currency(totalSpend)}</strong>
|
|
<p>Across current market values</p>
|
|
</article>
|
|
|
|
<article class="metric-card">
|
|
<span>Average Waste</span>
|
|
<strong>{(averageWaste * 100).toFixed(1)}%</strong>
|
|
<p>Current blended input loss</p>
|
|
</article>
|
|
|
|
<article class="metric-card">
|
|
<span>Latest Price Update</span>
|
|
<strong>{formatDate(latestEffectiveDate)}</strong>
|
|
<p>Most recent effective date on file</p>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="top-grid">
|
|
<div class="summary-stack">
|
|
<article class="surface-card">
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="eyebrow">Downstream Snapshot</p>
|
|
<h3>Mixes affected by current inputs</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mini-list">
|
|
{#each pagedOverviewMixes as mix}
|
|
<article>
|
|
<div>
|
|
<strong>{mix.name}</strong>
|
|
<span>{mix.client_name}</span>
|
|
</div>
|
|
<strong>{currency(mix.mix_cost_per_kg, 4)} / kg</strong>
|
|
</article>
|
|
{/each}
|
|
</div>
|
|
|
|
{#if data.mixes.length > pageSize}
|
|
<div class="pagination">
|
|
<span class="pagination-summary">Showing {Math.min((overviewMixesPage - 1) * pageSize + 1, data.mixes.length)}-{Math.min(overviewMixesPage * pageSize, data.mixes.length)} of {data.mixes.length}</span>
|
|
<div class="pagination-actions">
|
|
<button type="button" class="pagination-button" onclick={() => (overviewMixesPage -= 1)} disabled={overviewMixesPage === 1}>Previous</button>
|
|
<span class="pagination-page">Page {overviewMixesPage} of {totalPages(data.mixes.length)}</span>
|
|
<button type="button" class="pagination-button" onclick={() => (overviewMixesPage += 1)} disabled={overviewMixesPage >= totalPages(data.mixes.length)}>Next</button>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</article>
|
|
|
|
<article class="surface-card">
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="eyebrow">Product Exposure</p>
|
|
<h3>Finished outputs linked to live pricing</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mini-list">
|
|
{#each pagedOverviewProducts as row}
|
|
<article>
|
|
<div>
|
|
<strong>{row.product_name}</strong>
|
|
<span>{row.warnings.length ? 'Check warnings' : 'Stable pricing'}</span>
|
|
</div>
|
|
<strong>{currency(row.finished_product_delivered)}</strong>
|
|
</article>
|
|
{/each}
|
|
</div>
|
|
|
|
{#if data.productCosts.length > pageSize}
|
|
<div class="pagination">
|
|
<span class="pagination-summary">Showing {Math.min((overviewProductsPage - 1) * pageSize + 1, data.productCosts.length)}-{Math.min(overviewProductsPage * pageSize, data.productCosts.length)} of {data.productCosts.length}</span>
|
|
<div class="pagination-actions">
|
|
<button type="button" class="pagination-button" onclick={() => (overviewProductsPage -= 1)} disabled={overviewProductsPage === 1}>Previous</button>
|
|
<span class="pagination-page">Page {overviewProductsPage} of {totalPages(data.productCosts.length)}</span>
|
|
<button type="button" class="pagination-button" onclick={() => (overviewProductsPage += 1)} disabled={overviewProductsPage >= totalPages(data.productCosts.length)}>Next</button>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
{:else if activeView === 'create'}
|
|
<section class="top-grid create-grid">
|
|
<article class="surface-card form-card">
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="eyebrow">Create Input</p>
|
|
<h3>Add a new raw material</h3>
|
|
</div>
|
|
<span class="soft-pill">Live costing source</span>
|
|
</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>
|
|
|
|
<div class="form-grid single">
|
|
<label>
|
|
Material notes
|
|
<textarea name="notes" rows="3"></textarea>
|
|
</label>
|
|
|
|
<label>
|
|
Price notes
|
|
<textarea name="price_notes" rows="3"></textarea>
|
|
</label>
|
|
</div>
|
|
|
|
<button class="primary-button" type="submit" disabled={isCreating}>
|
|
{isCreating ? 'Creating material...' : 'Create raw material'}
|
|
</button>
|
|
</form>
|
|
</article>
|
|
|
|
<div class="summary-stack">
|
|
<article class="surface-card mini-metric-card">
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="eyebrow">Portfolio Health</p>
|
|
<h3>Current input coverage</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mini-list">
|
|
<article>
|
|
<div>
|
|
<strong>Active materials</strong>
|
|
<span>Ready for live calculations</span>
|
|
</div>
|
|
<strong>{activeMaterials.length}</strong>
|
|
</article>
|
|
<article>
|
|
<div>
|
|
<strong>Total tracked</strong>
|
|
<span>Across all statuses</span>
|
|
</div>
|
|
<strong>{data.rawMaterials.length}</strong>
|
|
</article>
|
|
<article>
|
|
<div>
|
|
<strong>Latest effective date</strong>
|
|
<span>Most recent seeded version</span>
|
|
</div>
|
|
<strong>{formatDate(latestEffectiveDate)}</strong>
|
|
</article>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
{:else if activeView === 'library'}
|
|
<section class="materials-list">
|
|
{#each pagedRawMaterials as material}
|
|
{@const impactedMixes = getImpactedMixes(material.id)}
|
|
{@const impactedProducts = getImpactedProducts(material.id)}
|
|
|
|
<article class="surface-card material-card">
|
|
<div class="material-header">
|
|
<div class="material-title">
|
|
<span class={`material-icon ${material.status === 'active' ? 'active' : 'muted'}`}>RM</span>
|
|
<div>
|
|
<h3>{material.name}</h3>
|
|
<p>{material.supplier || 'Supplier not set'} · {material.unit_of_measure} · {material.kg_per_unit} kg per unit</p>
|
|
</div>
|
|
</div>
|
|
|
|
<span class={`status-pill ${material.status === 'active' ? 'positive' : 'neutral'}`}>{material.status}</span>
|
|
</div>
|
|
|
|
<div class="material-grid">
|
|
<section class="stats-grid">
|
|
<article>
|
|
<span>Market value</span>
|
|
<strong>{currency(material.current_price?.market_value)}</strong>
|
|
</article>
|
|
<article>
|
|
<span>Waste</span>
|
|
<strong>
|
|
{material.current_price ? `${(material.current_price.waste_percentage * 100).toFixed(1)}%` : 'N/A'}
|
|
</strong>
|
|
</article>
|
|
<article>
|
|
<span>Cost per kg</span>
|
|
<strong>{currency(material.current_price?.cost_per_kg, 4)}</strong>
|
|
</article>
|
|
<article>
|
|
<span>Effective date</span>
|
|
<strong>{formatDate(material.current_price?.effective_date)}</strong>
|
|
</article>
|
|
</section>
|
|
|
|
<form class="price-card" onsubmit={(event) => handleAddPrice(event, material.id)}>
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="eyebrow">New Version</p>
|
|
<h4>Record a fresh price</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<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 class="primary-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-card">
|
|
<div class="impact-heading">
|
|
<h4>Impacted mixes</h4>
|
|
<span>{impactedMixes.length}</span>
|
|
</div>
|
|
|
|
{#if impactedMixes.length}
|
|
<div class="impact-list">
|
|
{#each impactedMixes as mix}
|
|
<article>
|
|
<div>
|
|
<strong>{mix.name}</strong>
|
|
<span>{mix.client_name}</span>
|
|
</div>
|
|
<strong>{currency(mix.mix_cost_per_kg, 4)} / kg</strong>
|
|
</article>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<p class="empty">No active mix currently references this material.</p>
|
|
{/if}
|
|
</section>
|
|
|
|
<section class="impact-card">
|
|
<div class="impact-heading">
|
|
<h4>Impacted products</h4>
|
|
<span>{impactedProducts.length}</span>
|
|
</div>
|
|
|
|
{#if impactedProducts.length}
|
|
<div class="impact-list">
|
|
{#each impactedProducts as product}
|
|
<article>
|
|
<div>
|
|
<strong>{product.name}</strong>
|
|
<span>{product.mix_name}</span>
|
|
</div>
|
|
<strong>{currency(product.deliveredCost?.finished_product_delivered)}</strong>
|
|
</article>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<p class="empty">No finished product currently depends on this material.</p>
|
|
{/if}
|
|
</section>
|
|
</div>
|
|
</article>
|
|
{/each}
|
|
|
|
{#if data.rawMaterials.length > pageSize}
|
|
<div class="pagination surface-card library-pagination">
|
|
<span class="pagination-summary">Showing {Math.min((materialLibraryPage - 1) * pageSize + 1, data.rawMaterials.length)}-{Math.min(materialLibraryPage * pageSize, data.rawMaterials.length)} of {data.rawMaterials.length}</span>
|
|
<div class="pagination-actions">
|
|
<button type="button" class="pagination-button" onclick={() => (materialLibraryPage -= 1)} disabled={materialLibraryPage === 1}>Previous</button>
|
|
<span class="pagination-page">Page {materialLibraryPage} of {totalPages(data.rawMaterials.length)}</span>
|
|
<button type="button" class="pagination-button" onclick={() => (materialLibraryPage += 1)} disabled={materialLibraryPage >= totalPages(data.rawMaterials.length)}>Next</button>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</section>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</AppSecondaryRailLayout>
|
|
{/if}
|
|
|
|
<style>
|
|
h2,
|
|
h3,
|
|
h4,
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
.eyebrow {
|
|
color: #7f8e85;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.locked-card,
|
|
.feedback,
|
|
.metric-card,
|
|
.surface-card {
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: 1.35rem;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.locked-card,
|
|
.feedback,
|
|
:global(.secondary-rail-layout) {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.locked-card,
|
|
.surface-card {
|
|
padding: 1.2rem;
|
|
}
|
|
|
|
.locked-card {
|
|
display: grid;
|
|
gap: 0.7rem;
|
|
max-width: 42rem;
|
|
}
|
|
|
|
.locked-card h2,
|
|
.panel-header h2 {
|
|
margin: 0.35rem 0 0.45rem;
|
|
font-size: clamp(1.7rem, 3vw, 2.25rem);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.locked-card p:last-of-type,
|
|
.metric-card p,
|
|
.mini-list span,
|
|
.material-title p,
|
|
.stats-grid span,
|
|
.impact-list span,
|
|
.empty {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.locked-card a {
|
|
color: var(--green-deep);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.feedback {
|
|
padding: 0.95rem 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.feedback.success {
|
|
color: var(--green-deep);
|
|
border-color: #d8ecdf;
|
|
background: #f6fcf8;
|
|
}
|
|
|
|
.feedback.error {
|
|
color: #a03737;
|
|
border-color: #f0d9d9;
|
|
background: #fff8f8;
|
|
}
|
|
|
|
.metric-row,
|
|
.top-grid,
|
|
.material-grid,
|
|
.impact-grid {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.workspace-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
background: var(--panel);
|
|
}
|
|
|
|
.panel-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
padding: 1.25rem 1.5rem;
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--panel-soft);
|
|
}
|
|
|
|
.panel-header-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
width: 2.4rem;
|
|
height: 2.4rem;
|
|
border-radius: 0.72rem;
|
|
background: var(--color-brand-tint);
|
|
color: var(--color-brand);
|
|
border: 1px solid color-mix(in srgb, var(--color-brand) 15%, transparent);
|
|
margin-top: 0.15rem;
|
|
}
|
|
|
|
.panel-eyebrow {
|
|
margin: 0;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.panel-description {
|
|
margin: 0;
|
|
font-size: 0.84rem;
|
|
color: var(--muted);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.panel-body {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.metric-row {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.metric-card {
|
|
padding: 1.15rem 1.2rem;
|
|
}
|
|
|
|
.metric-card span {
|
|
display: block;
|
|
color: var(--muted);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.metric-card strong {
|
|
display: block;
|
|
margin: 0.55rem 0 0.3rem;
|
|
font-size: 1.9rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.top-grid {
|
|
grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.85fr);
|
|
}
|
|
|
|
.create-grid {
|
|
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.65fr);
|
|
}
|
|
|
|
.summary-stack {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.section-heading,
|
|
.material-header,
|
|
.impact-heading,
|
|
.mini-list article,
|
|
.impact-list article {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.section-heading {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-heading h3,
|
|
.material-header h3,
|
|
.impact-heading h4 {
|
|
font-size: 1.12rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.soft-pill {
|
|
padding: 0.48rem 0.8rem;
|
|
border-radius: 999px;
|
|
color: var(--green-deep);
|
|
background: var(--green-soft);
|
|
font-size: 0.86rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.material-form,
|
|
.price-card {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.85rem;
|
|
}
|
|
|
|
.form-grid.single {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.form-grid.compact {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
label {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
color: #53645b;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
width: 100%;
|
|
padding: 0.9rem 0.95rem;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 0.95rem;
|
|
background: var(--panel-soft);
|
|
color: var(--text);
|
|
}
|
|
|
|
.primary-button {
|
|
justify-self: start;
|
|
padding: 0.85rem 1rem;
|
|
border: none;
|
|
border-radius: 0.9rem;
|
|
color: #fff;
|
|
background: var(--color-brand);
|
|
box-shadow: none;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.primary-button:disabled {
|
|
opacity: 0.7;
|
|
cursor: wait;
|
|
}
|
|
|
|
.mini-list,
|
|
.impact-list,
|
|
.materials-list {
|
|
display: grid;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.9rem;
|
|
margin-top: 1rem;
|
|
padding-top: 0.95rem;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.pagination-summary,
|
|
.pagination-page {
|
|
color: var(--muted);
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pagination-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.pagination-button {
|
|
padding: 0.58rem 0.82rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: 0.75rem;
|
|
background: var(--panel-soft);
|
|
color: var(--text);
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pagination-button:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.library-pagination {
|
|
padding: 1rem 1.2rem;
|
|
}
|
|
|
|
.mini-list article,
|
|
.impact-list article {
|
|
padding: 0.95rem 1rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: 1rem;
|
|
background: var(--panel-soft);
|
|
}
|
|
|
|
.material-card {
|
|
display: grid;
|
|
gap: 1.1rem;
|
|
}
|
|
|
|
.material-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.85rem;
|
|
}
|
|
|
|
.material-icon {
|
|
width: 2.4rem;
|
|
height: 2.4rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.85rem;
|
|
font-size: 0.76rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.material-icon.active {
|
|
color: #fff;
|
|
background: var(--color-brand);
|
|
}
|
|
|
|
.material-icon.muted {
|
|
color: #55685f;
|
|
background: #e9efeb;
|
|
}
|
|
|
|
.status-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.42rem 0.78rem;
|
|
border-radius: 999px;
|
|
font-size: 0.84rem;
|
|
font-weight: 600;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.status-pill.positive {
|
|
color: var(--green-deep);
|
|
background: var(--green-soft);
|
|
}
|
|
|
|
.status-pill.neutral {
|
|
color: #5a6c63;
|
|
background: #edf2ef;
|
|
}
|
|
|
|
.material-grid {
|
|
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.stats-grid article,
|
|
.price-card,
|
|
.impact-card {
|
|
padding: 1rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: 1rem;
|
|
background: var(--panel-soft);
|
|
}
|
|
|
|
.stats-grid strong {
|
|
display: block;
|
|
margin-top: 0.35rem;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.impact-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.impact-heading {
|
|
margin-bottom: 0.9rem;
|
|
}
|
|
|
|
.impact-heading span {
|
|
color: var(--muted);
|
|
font-size: 0.92rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
:global(.secondary-rail-layout),
|
|
.metric-row,
|
|
.top-grid,
|
|
.material-grid,
|
|
.impact-grid,
|
|
.stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.panel-header,
|
|
.section-heading,
|
|
.material-header,
|
|
.impact-heading,
|
|
.mini-list article,
|
|
.impact-list article {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.form-grid,
|
|
.form-grid.compact {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.pagination,
|
|
.pagination-actions {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
}
|
|
</style>
|