v1.2 scaffold

frontend/src/routes/mixes/+page.svelte

@@ -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>

frontend/src/routes/mixes/+page.ts

@@ -0,0 +1,8 @@
+import { api } from '$lib/api';
+
+export async function load() {
+  return {
+    mixes: await api.mixes()
+  };
+}
+