diff --git a/backend/app/api/access.py b/backend/app/api/access.py index 0b50aff..7fa9726 100644 --- a/backend/app/api/access.py +++ b/backend/app/api/access.py @@ -21,7 +21,7 @@ from app.core.access import ( require_permission, ) from app.core.config import settings -from app.core.security import issue_token +from app.core.security import hash_password, issue_token, verify_password from app.db.session import get_db from app.models.access import Permission, Role, User @@ -129,6 +129,61 @@ def read_my_permissions(user: User = Depends(get_current_user)): return sorted(get_user_permissions(user)) +class UpdateMeRequest(BaseModel): + name: str | None = None + email: str | None = None + current_password: str | None = None + new_password: str | None = None + + +@router.patch("/me", response_model=UserSession) +def update_me( + payload: UpdateMeRequest, + db: Session = Depends(get_db), + user: User = Depends(get_current_user), +): + """Allow an internal user to update their own name, email, or password.""" + if payload.new_password: + # Require current password verification before allowing a password change. + # Users who have never set a personal password must supply the shared + # admin password as the current credential. + current_ok = ( + verify_password(payload.current_password or "", user.password_hash) + if user.password_hash + else (payload.current_password or "") == settings.admin_password + ) + if not current_ok: + raise HTTPException( + status_code=status.HTTP_400_BAD_REQUEST, + detail="Current password is incorrect", + ) + if len(payload.new_password) < 8: + raise HTTPException( + status_code=status.HTTP_422_UNPROCESSABLE_ENTITY, + detail="New password must be at least 8 characters", + ) + user.password_hash = hash_password(payload.new_password) + + if payload.name is not None: + name = payload.name.strip() + if not name: + raise HTTPException(status_code=status.HTTP_422_UNPROCESSABLE_ENTITY, detail="Name cannot be empty") + user.name = name + + if payload.email is not None: + email = payload.email.strip().lower() + if not email or "@" not in email: + raise HTTPException(status_code=status.HTTP_422_UNPROCESSABLE_ENTITY, detail="Invalid email address") + existing = db.scalar(select(User).where(User.email == email, User.id != user.id)) + if existing: + raise HTTPException(status_code=status.HTTP_409_CONFLICT, detail="Email is already in use") + user.email = email + + db.commit() + db.refresh(user) + return _serialize_session(user, include_token=True) + + # Permission-enforced administrative endpoints. Route bodies should not check # role names — every gate is the require_permission(...) dependency. diff --git a/backend/app/db/migrations.py b/backend/app/db/migrations.py index a814ef7..7c0fc52 100644 --- a/backend/app/db/migrations.py +++ b/backend/app/db/migrations.py @@ -84,6 +84,28 @@ def ensure_tenant_columns(engine: Engine) -> tuple[str, ...]: return tuple(added_columns) +# Ad-hoc column additions for tables that pre-existed before a column was +# introduced on the model. Each entry is (table, column, DDL fragment). +_LEGACY_COLUMN_PATCHES: tuple[tuple[str, str, str], ...] = ( + ("users", "password_hash", "VARCHAR(255)"), +) + + +def ensure_legacy_columns(engine: Engine) -> tuple[str, ...]: + added: list[str] = [] + for table_name, column_name, ddl in _LEGACY_COLUMN_PATCHES: + if not _table_exists(engine, table_name): + continue + if _has_column(engine, table_name, column_name): + continue + with engine.begin() as connection: + connection.execute( + text(f"ALTER TABLE {table_name} ADD COLUMN {column_name} {ddl}") + ) + added.append(f"{table_name}.{column_name}") + return tuple(added) + + def sync_tenant_ids(engine: Engine) -> dict[str, int]: existing_tables = set(inspect(engine).get_table_names()) @@ -339,5 +361,5 @@ def sync_tenant_ids(engine: Engine) -> dict[str, int]: def bootstrap_schema(engine: Engine, metadata: MetaData) -> MigrationReport: created_tables = ensure_metadata_tables(engine, metadata) - added_columns = ensure_tenant_columns(engine) + added_columns = ensure_tenant_columns(engine) + ensure_legacy_columns(engine) return MigrationReport(created_tables=created_tables, added_columns=added_columns) diff --git a/frontend/package.json b/frontend/package.json index 2d0e497..e3d934c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,6 +1,6 @@ { "name": "data-entry-app-frontend", - "version": "0.1.5", + "version": "0.2.0", "private": true, "type": "module", "scripts": { diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts index 1074eed..d8e3810 100644 --- a/frontend/src/lib/api.ts +++ b/frontend/src/lib/api.ts @@ -284,6 +284,11 @@ export const api = { }), internalSession: (fetcher?: ApiFetch) => request('/api/access/me', { method: 'GET' }, 'client', fetcher), + updateMe: (payload: { name?: string; email?: string; current_password?: string; new_password?: string }) => + request('/api/access/me', { + method: 'PATCH', + body: JSON.stringify(payload) + }, 'client'), adminLogin: (email: string, password: string) => request('/api/auth/admin/login', { method: 'POST', diff --git a/frontend/src/lib/components/AdminShell.svelte b/frontend/src/lib/components/AdminShell.svelte index b823689..549eb8f 100644 --- a/frontend/src/lib/components/AdminShell.svelte +++ b/frontend/src/lib/components/AdminShell.svelte @@ -326,7 +326,7 @@ border: 1px solid rgba(34, 54, 45, 0.1); border-radius: 1.35rem; background: rgba(255, 255, 255, 0.82); - box-shadow: 0 18px 40px rgba(15, 23, 17, 0.08); + box-shadow: none; } .loading-card { diff --git a/frontend/src/lib/components/ClientAccessWorkspace.svelte b/frontend/src/lib/components/ClientAccessWorkspace.svelte index 63913df..208588f 100644 --- a/frontend/src/lib/components/ClientAccessWorkspace.svelte +++ b/frontend/src/lib/components/ClientAccessWorkspace.svelte @@ -775,7 +775,7 @@ flex-shrink: 0; border-radius: 0.8rem; color: #fff; - background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%); + background: var(--color-brand); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; @@ -861,8 +861,8 @@ border-radius: 0.85rem; padding: 0.85rem 1rem; color: #fff; - background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%); - box-shadow: 0 8px 20px rgba(34, 169, 94, 0.2); + background: var(--color-brand); + box-shadow: none; font-weight: 600; cursor: pointer; } @@ -990,7 +990,7 @@ .feature-toggle.enabled { color: #fff; border-color: transparent; - background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%); + background: var(--color-brand); } .feature-toggle:disabled { diff --git a/frontend/src/lib/components/ClientShell.svelte b/frontend/src/lib/components/ClientShell.svelte index 172ef2c..d5189ce 100644 --- a/frontend/src/lib/components/ClientShell.svelte +++ b/frontend/src/lib/components/ClientShell.svelte @@ -17,6 +17,7 @@ ShieldCheck, DollarSign, ClipboardList, + TrendingUp, Search, LogOut, Plus, @@ -49,6 +50,7 @@ icon: Calculator, moduleKey: 'mix_calculator' }; + const reportingItem: NavItem = { href: '/reporting', label: 'Reporting', shortLabel: 'RP', icon: TrendingUp, moduleKey: 'products' }; const workingDocumentItems: NavItem[] = [ { href: '/raw-materials', label: 'Raw Materials', shortLabel: 'RM', icon: Wheat, moduleKey: 'raw_materials' }, { href: '/mixes', label: 'Mix Master', shortLabel: 'MM', icon: FlaskConical, moduleKey: 'mix_master' }, @@ -111,6 +113,12 @@ description: 'Review delivered product pricing and margins.', keywords: 'products pricing margins delivered outputs' }, + { + href: '/reporting', + label: 'Open Reporting', + description: 'View raw material costs, mix summaries, product pricing, and data quality reports.', + keywords: 'reporting reports raw materials mix cost product pricing data quality price review' + }, { href: '/settings', label: 'Open Workspace Settings', @@ -141,7 +149,7 @@ let seededSearchToken = $state(null); let paletteInput: HTMLInputElement | null = $state(null); const appVersion = `v${packageInfo.version}`; - const releaseStage = 'Alpha'; + const releaseStage = 'Beta'; const currentYear = new Date().getFullYear(); const visibleDashboardItem = $derived( !$clientSession || !dashboardItem.moduleKey || hasModuleAccess($clientSession, dashboardItem.moduleKey) ? dashboardItem : null @@ -156,6 +164,11 @@ ? mixCalculatorItem : null ); + const visibleReportingItem = $derived( + !$clientSession || !reportingItem.moduleKey || hasModuleAccess($clientSession, reportingItem.moduleKey) + ? reportingItem + : null + ); const visibleFooterLinks = $derived([ ...footerLinks, ...(!$clientSession || !hasModuleAccess($clientSession, 'client_access', 'manage') @@ -214,6 +227,7 @@ '/products': 'Products', '/scenarios': 'Scenarios', '/client-access': 'Client Access', + '/reporting': 'Reporting', '/settings': 'Settings' }; const section = sectionMap[pathname]; @@ -414,6 +428,15 @@ window.removeEventListener('resize', syncViewport); }; }); + + const userInitials = $derived( + ($clientSession?.name ?? '') + .split(' ') + .slice(0, 2) + .map((w: string) => w[0]) + .join('') + .toUpperCase() || '?' + ); @@ -464,6 +487,14 @@ {visibleMixCalculatorItem.label} {/if} + + {#if visibleReportingItem} + {@const Icon = visibleReportingItem.icon} + + + {visibleReportingItem.label} + + {/if} {#if visibleWorkingDocumentItems.length} @@ -494,17 +525,31 @@
{#if $clientSession} + {/if}
- - {appVersion} +
+ + Build + {appVersion} + {releaseStage} - - © {currentYear} Hunter Premium Produce +
+
+ © {currentYear} Hunter Premium Produce +
+ Powered by + + Lean 101 +
+
@@ -548,7 +593,10 @@ quickMenuOpen = false; }} > - + + {$clientSession ? userInitials : '?'} + + {$sessionHydrated ? ($clientSession ? 'Signed in' : 'Signed out') : 'Checking session'} {$sessionHydrated ? ($clientSession ? $clientSession.name || 'Client account' : 'Sign in required') : 'Restoring workspace access'} @@ -559,22 +607,28 @@ {#if userMenuOpen}
- - {$sessionHydrated - ? $clientSession - ? $clientSession.name || 'Client account' - : 'Client session inactive' - : 'Checking saved client session'} - - - {$sessionHydrated - ? $clientSession - ? $clientSession.email - : 'Return to the dashboard page to sign in.' - : 'Waiting for the browser session check to complete.'} - + {$clientSession ? userInitials : '?'} +
+ + {$sessionHydrated + ? $clientSession + ? $clientSession.name || 'Client account' + : 'Client session inactive' + : 'Checking saved client session'} + + + {$sessionHydrated + ? $clientSession + ? $clientSession.email + : 'Return to the dashboard page to sign in.' + : 'Waiting for the browser session check to complete.'} + +
- + {#if $clientSession} {:else if !$sessionHydrated} @@ -689,6 +743,14 @@ {/if} + {#if visibleReportingItem} + {@const Icon = visibleReportingItem.icon} + (navOpen = false)}> + + {visibleReportingItem.label} + + {/if} + {#if visibleWorkingDocumentItems.length}
{#each visibleWorkingDocumentItems as item} @@ -793,26 +855,51 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :global(:root) { - --bg: #f4f7f5; - --panel: #ffffff; - --panel-soft: #f8fbf9; - --line: #e5ece7; - --line-strong: #d9e4dd; - --text: #18231d; - --muted: #6d7d74; - --green: #22a95e; - --green-deep: #148249; - --green-soft: #eaf8ef; - --blue-soft: #eef7ff; - --shadow: 0 10px 30px rgba(15, 23, 17, 0.06); + /* ── Brand ──────────────────────────────────────────────── */ + --color-brand: #15803d; + --color-brand-tint: #f0fdf4; + + /* ── Surfaces ───────────────────────────────────────────── */ + --color-bg-app: #f6f8fa; + --color-bg-surface: #ffffff; + + /* ── Borders ────────────────────────────────────────────── */ + --color-border: #e1e4e8; + --color-divider: #eaecef; + + /* ── Text ───────────────────────────────────────────────── */ + --color-text-primary: #24292f; + --color-text-secondary: #57606a; + --color-text-muted: #8b949e; + + /* ── Semantic ───────────────────────────────────────────── */ + --color-success: #1a7f37; + --color-warning: #bf8700; + --color-error: #cf222e; + --color-info: #0969da; + + /* ── Legacy aliases (keep old token names working) ───────── */ + --bg: var(--color-bg-app); + --panel: var(--color-bg-surface); + --panel-soft: var(--color-bg-app); + --line: var(--color-border); + --line-strong: var(--color-border); + --text: var(--color-text-primary); + --muted: var(--color-text-muted); + --green: var(--color-brand); + --green-deep: #1a1f1c; + --green-soft: var(--color-brand-tint); + --blue-soft: #e8f4ff; + --shadow: none; /* flat design — use borders, not shadows */ } :global(html, body) { margin: 0; min-height: 100%; - background: var(--bg); - color: var(--text); + background: var(--color-bg-app); + color: var(--color-text-primary); font-family: Inter, "Segoe UI", sans-serif; + font-size: 14px; } :global(*) { @@ -921,9 +1008,12 @@ } .nav-list a:hover .nav-icon, - .nav-list a.active .nav-icon, .sidebar-signout:hover .nav-icon { - color: var(--green-deep); + color: #304038; + } + + .nav-list a.active .nav-icon { + color: #fff; } .nav-icon-mask { @@ -1058,13 +1148,13 @@ } .nav-list a:hover { - background: rgba(234, 248, 239, 0.55); - color: var(--green-deep); + background: var(--panel-soft); + color: #304038; } .nav-list a.active { - background: var(--green-soft); - color: var(--green-deep); + background: var(--color-brand); + color: #fff; font-weight: 600; } @@ -1076,7 +1166,7 @@ bottom: 0.45rem; width: 3px; border-radius: 999px; - background: var(--green-deep); + background: var(--color-brand); } .nav-group { @@ -1102,11 +1192,11 @@ .nav-group-toggle:hover, .nav-group-toggle.active { - background: var(--green-soft); + background: var(--color-brand-tint); } .nav-group-toggle.active { - color: var(--green-deep); + color: var(--color-brand); font-weight: 600; } @@ -1172,42 +1262,101 @@ } .sidebar-signout:hover { - background: rgba(234, 248, 239, 0.55); - color: var(--green-deep); + background: var(--color-brand-tint); + color: var(--color-brand); + } + + .sidebar-signout.active { + background: var(--color-brand); + color: #fff; + font-weight: 600; + } + + .sidebar-signout.active .nav-icon { + color: #fff; } .sidebar-meta-foot { display: grid; - gap: 0.25rem; - padding: 0.7rem 0.55rem 0; + gap: 0.55rem; + padding: 0.8rem 0.55rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.76rem; } + .sidebar-meta-top, + .sidebar-meta-bottom { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.65rem; + } + .sidebar-meta-foot small { font-size: 0.72rem; + line-height: 1.35; + } + + .powered-by { + display: flex; + align-items: center; + gap: 0.35rem; + color: var(--muted); + white-space: nowrap; + } + + .powered-by span { + font-size: 0.72rem; + font-weight: 500; + } + + .powered-by strong { + font-size: 0.76rem; + font-weight: 600; + color: #5e6c64; + } + + .lean101-logo { + width: 1rem; + height: 1rem; + object-fit: contain; + opacity: 0.72; + flex-shrink: 0; } .version-pill { display: inline-flex; align-items: center; gap: 0.45rem; - flex-wrap: wrap; + padding: 0.24rem 0.56rem; + border: 1px solid var(--line); + border-radius: 999px; + background: var(--panel-soft); + color: #5e6c64; + font-size: 0.72rem; + font-weight: 600; + } + + .meta-label { + color: var(--muted); + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; } .release-pill { display: inline-flex; align-items: center; justify-content: center; - padding: 0.24rem 0.58rem; - border: 1px solid rgba(20, 130, 73, 0.16); + padding: 0.2rem 0.52rem; + border: 1px solid color-mix(in srgb, var(--color-brand) 14%, transparent); border-radius: 999px; - background: #eaf8ef; - color: #148249; - font-size: 0.68rem; + background: color-mix(in srgb, var(--color-brand) 8%, white); + color: var(--color-brand); + font-size: 0.64rem; font-weight: 700; - letter-spacing: 0.08em; + letter-spacing: 0.07em; text-transform: uppercase; } @@ -1215,11 +1364,14 @@ min-width: 0; display: flex; flex-direction: column; + min-height: 100vh; + height: 100vh; + overflow: hidden; } .topbar { display: grid; - grid-template-columns: minmax(0, 0.95fr) minmax(20rem, 1.1fr) auto; + grid-template-columns: 1fr minmax(20rem, 36rem) 1fr; align-items: center; gap: 0.9rem; padding: 0.86rem 1.34rem; @@ -1277,7 +1429,7 @@ } .topbar-search { - width: min(100%, 36rem); + width: 100%; min-height: 3rem; background: #fff; } @@ -1334,23 +1486,90 @@ cursor: pointer; } - .user-status-dot { - width: 0.72rem; - height: 0.72rem; + .user-avatar-wrap { + position: relative; flex-shrink: 0; + } + + .user-avatar { + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border-radius: 50%; + background: var(--green-deep); + color: #fff; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.02em; + user-select: none; + } + + .user-status-dot { + position: absolute; + bottom: 0; + right: 0; + width: 0.55rem; + height: 0.55rem; border-radius: 999px; + border: 1.5px solid var(--panel-soft); background: #b4c0ba; - box-shadow: 0 0 0 0.24rem rgba(180, 192, 186, 0.2); } .user-status-dot.live { - background: var(--green); - box-shadow: 0 0 0 0.24rem rgba(34, 169, 94, 0.14); + background: #4ade80; } .user-status-dot.idle { background: #c08b3d; - box-shadow: 0 0 0 0.24rem rgba(192, 139, 61, 0.14); + } + + .user-menu-avatar { + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + background: var(--green-deep); + color: #fff; + font-size: 0.9rem; + font-weight: 700; + letter-spacing: 0.02em; + user-select: none; + } + + .user-menu-summary { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.72rem 0.78rem; + border-radius: 0.82rem; + background: var(--panel-soft); + } + + .user-menu-summary-text { + display: grid; + gap: 0.2rem; + min-width: 0; + } + + .user-menu-summary-text strong { + font-size: 0.9rem; + font-weight: 700; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .user-menu-summary-text span { + color: var(--muted); + font-size: 0.8rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .user-trigger-copy { @@ -1374,17 +1593,11 @@ min-width: 16rem; } - .user-menu-summary { - display: grid; - gap: 0.2rem; - padding: 0.72rem 0.78rem; - border-radius: 0.82rem; - background: var(--panel-soft); - } - .user-menu-summary span { - color: var(--muted); - font-size: 0.82rem; + .menu-settings-btn { + display: flex; + align-items: center; + gap: 0.5rem; } .chevron { @@ -1409,10 +1622,10 @@ display: grid; gap: 0.18rem; padding: 0.4rem; - border: 1px solid var(--line); + border: 1px solid var(--color-border); border-radius: 0.96rem; background: rgba(255, 255, 255, 0.98); - box-shadow: 0 18px 40px rgba(15, 23, 17, 0.1); + box-shadow: 0 4px 12px rgba(0,0,0,0.08); backdrop-filter: blur(10px); } @@ -1433,9 +1646,9 @@ padding: 0.88rem 1.05rem; border: none; border-radius: 999px; - background: linear-gradient(135deg, #2f7b48 0%, #174b2d 100%); + background: var(--color-brand); color: #fff; - box-shadow: 0 18px 36px rgba(23, 75, 45, 0.26); + box-shadow: none; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; @@ -1497,8 +1710,11 @@ } .content { + flex: 1; + min-height: 0; min-width: 0; padding: 1.34rem; + overflow: auto; } .locked-card { @@ -1534,7 +1750,7 @@ margin-top: 1rem; padding: 0.78rem 0.92rem; border-radius: 0.88rem; - background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%); + background: var(--color-brand); color: #fff; font-weight: 600; } @@ -1552,10 +1768,10 @@ .palette { width: min(44rem, 100%); - border: 1px solid rgba(217, 228, 221, 0.9); + border: 1px solid var(--color-border); border-radius: 1.2rem; - background: rgba(255, 255, 255, 0.98); - box-shadow: 0 24px 60px rgba(15, 23, 17, 0.16); + background: var(--color-bg-surface); + box-shadow: 0 4px 16px rgba(0,0,0,0.1); overflow: hidden; } @@ -1668,7 +1884,7 @@ border: 1px solid rgba(217, 228, 221, 0.92); border-radius: 1.35rem; background: rgba(255, 255, 255, 0.96); - box-shadow: 0 20px 40px rgba(15, 23, 17, 0.16); + box-shadow: 0 4px 12px rgba(0,0,0,0.08); backdrop-filter: blur(16px); } @@ -1695,8 +1911,8 @@ .bottom-nav a.active, .bottom-nav button.active { - color: var(--green-deep); - background: linear-gradient(180deg, #f4fbf7 0%, #e8f6ee 100%); + color: var(--color-brand); + background: var(--color-brand-tint); } .bottom-nav-icon { @@ -1707,13 +1923,13 @@ justify-content: center; border-radius: 0.78rem; color: #fff; - background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%); + background: var(--green-deep); font-size: 0.66rem; letter-spacing: 0.04em; } .bottom-nav-icon.muted { - background: linear-gradient(135deg, #96a49c 0%, #718077 100%); + background: #8b949e; } .bottom-drawer { @@ -1729,7 +1945,7 @@ border-radius: 1.6rem 1.6rem 0 0; background: linear-gradient(180deg, rgba(248, 251, 249, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%); - box-shadow: 0 -20px 45px rgba(15, 23, 17, 0.16); + box-shadow: 0 -2px 8px rgba(0,0,0,0.06); backdrop-filter: blur(16px); } diff --git a/frontend/src/lib/components/MixCalculatorPrintSheet.svelte b/frontend/src/lib/components/MixCalculatorPrintSheet.svelte index aa863b1..51bf247 100644 --- a/frontend/src/lib/components/MixCalculatorPrintSheet.svelte +++ b/frontend/src/lib/components/MixCalculatorPrintSheet.svelte @@ -167,7 +167,7 @@ .primary-button { border: none; - background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%); + background: var(--color-brand); color: #fff; } diff --git a/frontend/src/lib/components/MixCalculatorWorkspace.svelte b/frontend/src/lib/components/MixCalculatorWorkspace.svelte index 77ba7c1..0926151 100644 --- a/frontend/src/lib/components/MixCalculatorWorkspace.svelte +++ b/frontend/src/lib/components/MixCalculatorWorkspace.svelte @@ -3,6 +3,7 @@ import { api } from '$lib/api'; import { featureFlags } from '$lib/features'; import { clientSession, hasModuleAccess } from '$lib/session'; + import { toast } from '$lib/toast'; import type { MixCalculatorCreateInput, MixCalculatorOptions, @@ -156,14 +157,18 @@ async function calculatePreview() { const payload = buildPayload(); if (!payload) { + toast.error(formError); return; } previewLoading = true; + const tid = toast.loading('Calculating…'); try { preview = await api.previewMixCalculatorSession(payload); - formSuccess = 'Calculation refreshed from the saved product mix.'; + toast.dismiss(tid); } catch (error) { + toast.dismiss(tid); + toast.error(error instanceof Error ? error.message : 'Unable to calculate the mix session.'); formError = error instanceof Error ? error.message : 'Unable to calculate the mix session.'; } finally { previewLoading = false; @@ -195,15 +200,20 @@ } saveLoading = true; + const tid = toast.loading(mode === 'update' ? 'Saving session…' : 'Creating session…'); try { const saved = mode === 'update' && initialSession ? await api.updateMixCalculatorSession(initialSession.id, payload) : await api.createMixCalculatorSession(payload); + toast.dismiss(tid); + toast.success(mode === 'update' ? 'Session saved' : 'Session created'); const target = destination === 'print' ? `/mix-calculator/${saved.id}/print` : `/mix-calculator/${saved.id}`; await goto(target); } catch (error) { + toast.dismiss(tid); + toast.error(error instanceof Error ? error.message : 'Unable to save the mix calculator session.'); formError = error instanceof Error ? error.message : 'Unable to save the mix calculator session.'; saveLoading = false; } @@ -427,8 +437,28 @@
{:else}
- No calculation yet - Choose a client, product, date, and batch size, then run the calculator. +
+
+
+
+
+
+ + No calculation yet + Choose a client, product, date, and batch size on the left, then click Calculate mix. +
+
+ {#each [1,2,3,4,5] as _} +
+
+
+
+
+
+ {/each} +
{/if} @@ -750,7 +780,7 @@ .primary-button { border: none; - background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%); + background: var(--color-brand); color: #fff; } @@ -765,14 +795,14 @@ } .primary-button:hover:not(:disabled) { - box-shadow: 0 14px 28px rgba(23, 75, 45, 0.22); + box-shadow: none; filter: brightness(1.04); } .secondary-button:hover:not(:disabled) { border-color: #9fb0a6; background: #f6faf7; - box-shadow: 0 10px 22px rgba(24, 38, 29, 0.08); + box-shadow: none; } .button-icon { @@ -863,12 +893,122 @@ } .empty-state { + display: flex; + flex-direction: column; + gap: 0; + border-radius: 1rem; + overflow: hidden; + border: 1px solid var(--line); + } + + .empty-shimmer-metrics { display: grid; - gap: 0.2rem; - place-items: start; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.75rem; + padding: 1rem; + border-bottom: 1px solid var(--line); background: var(--panel-soft); } + .shimmer-metric { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 0.85rem; + border: 1px solid var(--line); + border-radius: 0.85rem; + background: var(--panel); + } + + .empty-state-copy { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + padding: 2rem 1.5rem; + text-align: center; + background: var(--panel); + border-bottom: 1px solid var(--line); + } + + .empty-state-copy strong { + font-size: 0.98rem; + font-weight: 700; + color: var(--text); + } + + .empty-state-copy span { + max-width: 26rem; + font-size: 0.84rem; + color: var(--muted); + line-height: 1.5; + } + + .empty-icon { + display: flex; + align-items: flex-end; + gap: 0.28rem; + height: 2.2rem; + margin-bottom: 0.35rem; + } + + .empty-icon span { + width: 0.38rem; + border-radius: 999px 999px 0 0; + background: var(--color-border); + animation: bar-pulse 1.6s ease-in-out infinite; + } + + .empty-icon span:nth-child(1) { height: 60%; animation-delay: 0s; } + .empty-icon span:nth-child(2) { height: 100%; animation-delay: 0.2s; } + .empty-icon span:nth-child(3) { height: 40%; animation-delay: 0.4s; } + + @keyframes bar-pulse { + 0%, 100% { opacity: 0.35; } + 50% { opacity: 1; } + } + + .empty-shimmer-rows { + display: flex; + flex-direction: column; + background: var(--panel-soft); + } + + .shimmer-row { + display: grid; + grid-template-columns: 2fr 1fr 1fr 0.75fr; + gap: 1rem; + align-items: center; + padding: 0.78rem 1rem; + border-bottom: 1px solid var(--line); + } + + .shimmer-row:last-child { + border-bottom: none; + } + + .shimmer-line { + height: 0.7rem; + border-radius: 999px; + background: linear-gradient( + 90deg, + var(--color-border) 25%, + color-mix(in srgb, var(--color-border) 40%, white) 50%, + var(--color-border) 75% + ); + background-size: 200% 100%; + animation: shimmer 1.8s ease-in-out infinite; + } + + .shimmer-line.short { width: 40%; } + .shimmer-line.medium { width: 65%; } + .shimmer-line.wide { width: 90%; } + + @keyframes shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } + } + @media (max-width: 980px) { .workspace-grid { grid-template-columns: 1fr; diff --git a/frontend/src/lib/components/MixWorkspace.svelte b/frontend/src/lib/components/MixWorkspace.svelte index 4991e5b..2446b93 100644 --- a/frontend/src/lib/components/MixWorkspace.svelte +++ b/frontend/src/lib/components/MixWorkspace.svelte @@ -2,6 +2,7 @@ import { goto, invalidateAll } from '$app/navigation'; import { api } from '$lib/api'; import { clientSession } from '$lib/session'; + import { toast } from '$lib/toast'; import type { Mix, MixIngredient, RawMaterial } from '$lib/types'; type DraftIngredient = { @@ -166,16 +167,14 @@ } async function saveMix() { - feedback = ''; - errorMessage = ''; - const validationWarnings = getDraftWarnings(); if (validationWarnings.length) { - errorMessage = validationWarnings[0]; + toast.error(validationWarnings[0]); return; } isSaving = true; + const tid = toast.loading(savedMix ? 'Saving mix…' : 'Creating mix…'); try { const cleanIngredients = getCleanIngredients(); @@ -194,6 +193,8 @@ })) }); + toast.dismiss(tid); + toast.success('Mix created'); await invalidateAll(); await goto(`/mixes/${created.id}`); return; @@ -263,9 +264,11 @@ const refreshed = await api.mix(savedMix.id); await invalidateAll(); loadDraftFromMix(refreshed); - feedback = 'Mix saved with updated ingredient costing.'; + toast.dismiss(tid); + toast.success('Mix saved'); } catch (error) { - errorMessage = error instanceof Error ? error.message : 'Unable to save mix'; + toast.dismiss(tid); + toast.error(error instanceof Error ? error.message : 'Unable to save mix'); } finally { isSaving = false; } @@ -644,8 +647,8 @@ .primary-button { border: none; color: #fff; - background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%); - box-shadow: 0 8px 20px rgba(34, 169, 94, 0.18); + background: var(--color-brand); + box-shadow: none; } .secondary-button { diff --git a/frontend/src/lib/components/Toast.svelte b/frontend/src/lib/components/Toast.svelte new file mode 100644 index 0000000..4dacdae --- /dev/null +++ b/frontend/src/lib/components/Toast.svelte @@ -0,0 +1,148 @@ + + +{#if $toast.length} +
+ {#each $toast as t (t.id)} +
+ + {t.message} + {#if t.type !== 'loading'} + + {/if} +
+ {/each} +
+{/if} + + diff --git a/frontend/src/lib/toast.ts b/frontend/src/lib/toast.ts new file mode 100644 index 0000000..76782fa --- /dev/null +++ b/frontend/src/lib/toast.ts @@ -0,0 +1,50 @@ +import { writable } from 'svelte/store'; + +export type ToastType = 'info' | 'success' | 'error' | 'loading'; + +export type Toast = { + id: string; + message: string; + type: ToastType; + duration?: number; // ms — undefined means the toast stays until manually dismissed +}; + +function createToastStore() { + const { subscribe, update } = writable([]); + const timers = new Map>(); + + function add(message: string, type: ToastType = 'info', duration?: number): string { + const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`; + const resolved = duration ?? (type === 'loading' ? undefined : type === 'error' ? 5000 : 3000); + + update((toasts) => [...toasts, { id, message, type, duration: resolved }]); + + if (resolved !== undefined) { + timers.set(id, setTimeout(() => dismiss(id), resolved)); + } + + return id; + } + + function dismiss(id: string) { + clearTimeout(timers.get(id)); + timers.delete(id); + update((toasts) => toasts.filter((t) => t.id !== id)); + } + + function success(message: string) { + return add(message, 'success'); + } + + function error(message: string) { + return add(message, 'error'); + } + + function loading(message: string): string { + return add(message, 'loading'); + } + + return { subscribe, add, dismiss, success, error, loading }; +} + +export const toast = createToastStore(); diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index f0147f2..838a036 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -1,12 +1,36 @@ {#if isPrintableRoute} @@ -20,3 +44,5 @@ {@render children()} {/if} + + diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index dd45cba..b5f3dbc 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -36,7 +36,7 @@ let passwordInput: HTMLInputElement | null = null; const currentYear = new Date().getFullYear(); const appVersion = `v${packageInfo.version}`; - const releaseStage = 'Alpha'; + const releaseStage = 'Beta'; const monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']; @@ -141,9 +141,9 @@ function buildSegments(current: DashboardSummary | null) { return [ - { label: 'Materials', value: current?.raw_materials?.count ?? 0, color: '#2c9b5f' }, - { label: 'Mixes', value: current?.mixes?.count ?? 0, color: '#d7802a' }, - { label: 'Products', value: current?.products?.count ?? 0, color: '#286ea7' } + { label: 'Materials', value: current?.raw_materials?.count ?? 0, color: '#15803d' }, + { label: 'Mixes', value: current?.mixes?.count ?? 0, color: '#bf8700' }, + { label: 'Products', value: current?.products?.count ?? 0, color: '#0969da' } ]; } @@ -179,7 +179,7 @@ y1: Number(inner.y.toFixed(2)), x2: Number(outer.x.toFixed(2)), y2: Number(outer.y.toFixed(2)), - color: activeStop?.color ?? '#2c9b5f' + color: activeStop?.color ?? '#15803d' }; }); } @@ -325,7 +325,8 @@
- + Lean 101 + Powered by Lean 101
@@ -387,7 +388,8 @@
- + Lean 101 + Powered by Lean 101
@@ -579,13 +581,13 @@
@@ -753,7 +755,7 @@ radial-gradient(circle at top left, rgba(115, 197, 146, 0.16), transparent 32%), radial-gradient(circle at bottom right, rgba(33, 94, 60, 0.1), transparent 30%), rgba(255, 255, 255, 0.96); - box-shadow: 0 28px 70px rgba(17, 37, 25, 0.14); + box-shadow: none; backdrop-filter: blur(14px); overflow: hidden; } @@ -833,10 +835,10 @@ display: inline-flex; align-items: center; padding: 0.48rem 0.8rem; - border: 1px solid rgba(44, 123, 72, 0.12); + border: 1px solid color-mix(in srgb, var(--color-brand) 16%, transparent); border-radius: 999px; - background: rgba(240, 249, 244, 0.96); - color: #1e6a3d; + background: var(--color-brand-tint); + color: var(--color-success); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; @@ -858,10 +860,10 @@ align-items: center; justify-content: center; padding: 0.28rem 0.62rem; - border: 1px solid rgba(20, 130, 73, 0.16); + border: 1px solid color-mix(in srgb, var(--color-brand) 16%, transparent); border-radius: 999px; - background: #eaf8ef; - color: #148249; + background: var(--color-brand-tint); + color: var(--color-success); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; @@ -910,8 +912,8 @@ height: 0.95rem; flex-shrink: 0; border-radius: 999px; - background: linear-gradient(135deg, #2f7b48 0%, #174b2d 100%); - box-shadow: 0 0 0 0 rgba(47, 123, 72, 0.28); + background: var(--color-brand); + box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.28); animation: pulse 1.8s ease-out infinite; } @@ -946,8 +948,8 @@ .auth-form input:focus { outline: none; - border-color: #4d9668; - box-shadow: 0 0 0 0.24rem rgba(77, 150, 104, 0.12); + border-color: var(--color-brand); + box-shadow: 0 0 0 0.24rem color-mix(in srgb, var(--color-brand) 12%, transparent); background: #fff; } @@ -975,6 +977,20 @@ .lean-brand { display: inline-flex; align-items: center; + gap: 0.5rem; + } + + .lean-isotipo { + width: 2.2rem; + height: 2.2rem; + object-fit: contain; + opacity: 0.8; + } + + .powered-by-label { + font-size: 0.78rem; + font-weight: 500; + color: var(--muted); } .auth-meta { @@ -987,17 +1003,17 @@ @keyframes pulse { 0% { - box-shadow: 0 0 0 0 rgba(47, 123, 72, 0.26); + box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.26); transform: scale(0.96); } 70% { - box-shadow: 0 0 0 0.7rem rgba(47, 123, 72, 0); + box-shadow: 0 0 0 0.7rem rgba(21, 128, 61, 0); transform: scale(1); } 100% { - box-shadow: 0 0 0 0 rgba(47, 123, 72, 0); + box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); transform: scale(0.96); } } @@ -1102,8 +1118,8 @@ .primary-button { border: none; color: #fff; - background: linear-gradient(135deg, #2f7b48 0%, #174b2d 100%); - box-shadow: 0 8px 20px rgba(23, 75, 45, 0.2); + background: var(--color-brand); + box-shadow: none; } .secondary-button { @@ -1195,7 +1211,7 @@ justify-content: center; border-radius: 0.75rem; color: #fff; - background: linear-gradient(135deg, #2f7b48 0%, #174b2d 100%); + background: var(--green-deep); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; @@ -1297,7 +1313,7 @@ .toggle-pill .active { color: #fff; - background: linear-gradient(135deg, #2f7b48 0%, #174b2d 100%); + background: var(--green-deep); } .market-layout { @@ -1441,8 +1457,8 @@ width: 2rem; height: 2rem; border-radius: 999px; - background: linear-gradient(135deg, #eef8f1 0%, #dff5e8 100%); - border: 1px solid #d3eadb; + background: var(--color-brand-tint); + border: 1px solid color-mix(in srgb, var(--color-brand) 15%, transparent); } .metric-card strong { @@ -1457,11 +1473,11 @@ margin-top: 0.4rem; border-radius: 1.25rem; background: - linear-gradient(180deg, rgba(88, 197, 121, 0.06) 0%, rgba(88, 197, 121, 0.01) 100%), + linear-gradient(180deg, rgba(21, 128, 61, 0.05) 0%, rgba(21, 128, 61, 0.01) 100%), repeating-linear-gradient( to bottom, transparent 0 3.45rem, - rgba(196, 226, 205, 0.45) 3.45rem 3.55rem + rgba(21, 128, 61, 0.08) 3.45rem 3.55rem ); overflow: hidden; } @@ -1481,7 +1497,7 @@ border-radius: 0.8rem; background: #1e2420; color: #fff; - box-shadow: 0 10px 20px rgba(15, 23, 17, 0.16); + box-shadow: none; } .focus-badge span { @@ -1700,7 +1716,7 @@ .owner-chip span { color: #fff; - background: linear-gradient(135deg, #2f7b48 0%, #174b2d 100%); + background: var(--green-deep); border-radius: 999px; } @@ -1764,7 +1780,7 @@ width: 0.75rem; height: 0.75rem; border-radius: 999px; - background: linear-gradient(135deg, #2f7b48 0%, #174b2d 100%); + background: var(--color-brand); flex-shrink: 0; } diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte index 834f2df..deedc09 100644 --- a/frontend/src/routes/admin/+page.svelte +++ b/frontend/src/routes/admin/+page.svelte @@ -182,7 +182,7 @@ border: 1px solid rgba(34, 54, 45, 0.1); border-radius: 1.35rem; background: rgba(255, 255, 255, 0.84); - box-shadow: 0 18px 40px rgba(15, 23, 17, 0.06); + box-shadow: none; } .hero-card, @@ -313,8 +313,8 @@ .primary-button { border: none; color: #fff; - background: linear-gradient(135deg, #4f8860 0%, #203028 100%); - box-shadow: 0 8px 20px rgba(32, 48, 40, 0.18); + background: var(--color-brand); + box-shadow: none; } .secondary-button { diff --git a/frontend/src/routes/client-access/+page.svelte b/frontend/src/routes/client-access/+page.svelte index f5270c4..a5da088 100644 --- a/frontend/src/routes/client-access/+page.svelte +++ b/frontend/src/routes/client-access/+page.svelte @@ -1,5 +1,6 @@ {#if !$clientSession} @@ -160,272 +229,398 @@ {/if} -
-
- Total Spend Tracked - {currency(totalSpend)} -

Across current market values

-
+
+
- -
-
-
-
-

Create Input

-

Add a new raw material

+
+ +
+

{activeMaterials.length} active inputs

+

{data.rawMaterials.length} tracked materials

- Live costing source
-
-
- - - - - - - - - - - - - - - -
- -
- - - -
- - -
-
- -
-
-
-
-

Downstream Snapshot

-

Mixes affected by current inputs

-
-
- -
- {#each data.mixes as mix} -
-
- {mix.name} - {mix.client_name} -
- {currency(mix.mix_cost_per_kg, 4)} / kg -
- {/each} -
-
- -
-
-
-

Product Exposure

-

Finished outputs linked to live pricing

-
-
- -
- {#each data.productCosts as row} -
-
- {row.product_name} - {row.warnings.length ? 'Check warnings' : 'Stable pricing'} -
- {currency(row.finished_product_delivered)} -
- {/each} -
-
-
-
- -
- {#each data.rawMaterials as material} - {@const impactedMixes = getImpactedMixes(material.id)} - {@const impactedProducts = getImpactedProducts(material.id)} - -
-
-
- RM -
-

{material.name}

-

{material.supplier || 'Supplier not set'} · {material.unit_of_measure} · {material.kg_per_unit} kg per unit

-
-
- - {material.status} -
- -
-
-
- Market value - {currency(material.current_price?.market_value)} -
-
- Waste - - {material.current_price ? `${(material.current_price.waste_percentage * 100).toFixed(1)}%` : 'N/A'} - -
-
- Cost per kg - {currency(material.current_price?.cost_per_kg, 4)} -
-
- Effective date - {formatDate(material.current_price?.effective_date)} -
-
- -
handleAddPrice(event, material.id)}> -
-
-

New Version

-

Record a fresh price

-
-
- -
- - - - - -
- - - - -
+ {/each}
+ {/each} + -
-
-
-

Impacted mixes

- {impactedMixes.length} -
+
+ {#if activeRailItem} + {@const PanelIcon = activeRailItem.icon} +
+ +
+

Workspace

+

{activeRailItem.label}

+

{activeRailItem.description}

+
+
+ {/if} - {#if impactedMixes.length} -
- {#each impactedMixes as mix} -
-
- {mix.name} - {mix.client_name} -
- {currency(mix.mix_cost_per_kg, 4)} / kg -
- {/each} -
- {:else} -

No active mix currently references this material.

- {/if} +
+ {#if activeView === 'overview'} +
+
+ Total Spend Tracked + {currency(totalSpend)} +

Across current market values

+
+ +
+ Average Waste + {(averageWaste * 100).toFixed(1)}% +

Current blended input loss

+
+ +
+ Latest Price Update + {formatDate(latestEffectiveDate)} +

Most recent effective date on file

+
-
-
-

Impacted products

- {impactedProducts.length} -
+
+
+
+
+
+

Downstream Snapshot

+

Mixes affected by current inputs

+
+
- {#if impactedProducts.length} -
- {#each impactedProducts as product} +
+ {#each pagedOverviewMixes as mix} +
+
+ {mix.name} + {mix.client_name} +
+ {currency(mix.mix_cost_per_kg, 4)} / kg +
+ {/each} +
+ + {#if data.mixes.length > pageSize} + + {/if} +
+ +
+
+
+

Product Exposure

+

Finished outputs linked to live pricing

+
+
+ +
+ {#each pagedOverviewProducts as row} +
+
+ {row.product_name} + {row.warnings.length ? 'Check warnings' : 'Stable pricing'} +
+ {currency(row.finished_product_delivered)} +
+ {/each} +
+ + {#if data.productCosts.length > pageSize} + + {/if} +
+
+
+ + {:else if activeView === 'create'} +
+
+
+
+

Create Input

+

Add a new raw material

+
+ Live costing source +
+ +
+
+ + + + + + + + + + + + + + + +
+ +
+ + + +
+ + +
+
+ +
+
+
+
+

Portfolio Health

+

Current input coverage

+
+
+ +
- {product.name} - {product.mix_name} + Active materials + Ready for live calculations
- {currency(product.deliveredCost?.finished_product_delivered)} + {activeMaterials.length}
- {/each} +
+
+ Total tracked + Across all statuses +
+ {data.rawMaterials.length} +
+
+
+ Latest effective date + Most recent seeded version +
+ {formatDate(latestEffectiveDate)} +
+
+
+
+
+ + {:else if activeView === 'library'} +
+ {#each pagedRawMaterials as material} + {@const impactedMixes = getImpactedMixes(material.id)} + {@const impactedProducts = getImpactedProducts(material.id)} + +
+
+
+ RM +
+

{material.name}

+

{material.supplier || 'Supplier not set'} · {material.unit_of_measure} · {material.kg_per_unit} kg per unit

+
+
+ + {material.status} +
+ +
+
+
+ Market value + {currency(material.current_price?.market_value)} +
+
+ Waste + + {material.current_price ? `${(material.current_price.waste_percentage * 100).toFixed(1)}%` : 'N/A'} + +
+
+ Cost per kg + {currency(material.current_price?.cost_per_kg, 4)} +
+
+ Effective date + {formatDate(material.current_price?.effective_date)} +
+
+ +
handleAddPrice(event, material.id)}> +
+
+

New Version

+

Record a fresh price

+
+
+ +
+ + + + + +
+ + + + +
+
+ +
+
+
+

Impacted mixes

+ {impactedMixes.length} +
+ + {#if impactedMixes.length} +
+ {#each impactedMixes as mix} +
+
+ {mix.name} + {mix.client_name} +
+ {currency(mix.mix_cost_per_kg, 4)} / kg +
+ {/each} +
+ {:else} +

No active mix currently references this material.

+ {/if} +
+ +
+
+

Impacted products

+ {impactedProducts.length} +
+ + {#if impactedProducts.length} +
+ {#each impactedProducts as product} +
+
+ {product.name} + {product.mix_name} +
+ {currency(product.deliveredCost?.finished_product_delivered)} +
+ {/each} +
+ {:else} +

No finished product currently depends on this material.

+ {/if} +
+
+
+ {/each} + + {#if data.rawMaterials.length > pageSize} + - {:else} -

No finished product currently depends on this material.

{/if}
-
-
- {/each} -
+ {/if} +
+
+
{/if} diff --git a/frontend/src/routes/reporting/+page.svelte b/frontend/src/routes/reporting/+page.svelte new file mode 100644 index 0000000..ad04cd9 --- /dev/null +++ b/frontend/src/routes/reporting/+page.svelte @@ -0,0 +1,650 @@ + + +
+ + +
+ {#if activeReport} + {@const PanelIcon = activeReport.icon} +
+ +
+

{activeReport.group}

+

{activeReport.label}

+

{activeReport.description}

+
+
+ {/if} + +
+ {#if activeId === 'summary'} +
+ + Overview report + A summary of raw material count, mix count, product pricing outputs, and open data quality issues will appear here. +
+ Raw Material Costs + Mix Cost Summary + Product Pricing + Data Quality +
+
+ + {:else if activeId === 'raw-material-costs'} +
+ + Raw Material Costs + Market value, waste percentage, cost per unit, and cost per kg for every tracked raw material will display here. +
+
+ Raw MaterialMarket ValueWaste %Cost / Kg +
+ {#each [1, 2, 3, 4] as _} +
+
+
+
+
+
+ {/each} +
+
+ + {:else if activeId === 'mix-cost-summary'} +
+ + Mix Cost Summary + Total ingredients, total kg, total mix cost, and cost per kg for each mix in the current mix master will appear here. +
+
+ Mix NameClientIngredientsCost / Kg +
+ {#each [1, 2, 3, 4] as _} +
+
+
+
+
+
+ {/each} +
+
+ + {:else if activeId === 'product-pricing'} +
+ + Product Pricing Output + Cleaned product cost, process costs, packaging, freight, finished delivered cost, and selling price by product will appear here. +
+
+ ProductCleaned CostDeliveredDistributor +
+ {#each [1, 2, 3, 4] as _} +
+
+
+
+
+
+ {/each} +
+
+ + {:else if activeId === 'data-quality'} +
+ + Data Quality Issues + Raw materials missing costs, mixes with unresolved warnings, and products with stale or missing inputs will be listed here. +
+ Missing prices + Unresolved notes + Zero quantities +
+
+ + {:else if activeId === 'price-review'} +
+ + Price Review Status + Current vs proposed wholesale and distributor pricing, with review status and delta for each product line, will appear here. +
+
+ ProductCurrentProposedStatus +
+ {#each [1, 2, 3, 4] as _} +
+
+
+
+
+
+ {/each} +
+
+ {/if} +
+
+
+ + diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte index 249b1c7..54470e8 100644 --- a/frontend/src/routes/settings/+page.svelte +++ b/frontend/src/routes/settings/+page.svelte @@ -1,126 +1,496 @@ + type Section = 'profile' | 'security'; + let activeSection = $state
('profile'); -
-
-

Session

-

Signed-in account

-
-
- Name - {$clientSession?.name ?? 'No active session'} -
-
- Email - {$clientSession?.email ?? 'Sign in required'} -
-
- Role - {$clientSession?.role ?? 'Client'} -
-
-
+ let name = $state($clientSession?.name ?? ''); + let email = $state($clientSession?.email ?? ''); -
-

Display

-

Navigation behaviour

-
-
- Desktop - Left rail navigation -
-
- iPad / Tablet - Bottom navigation drawer -
-
- Copyright - © {currentYear} Hunter Premium Produce -
-
-
-
+ let currentPassword = $state(''); + let newPassword = $state(''); + let confirmPassword = $state(''); -