🍴 bakery

Recipes

Recipes is your bakery's recipe book — record ingredients, method, nutrition and allergens for every product you bake, link ingredients to real inventory items for automatic stock deduction, and see live cost-per-unit and profit margin as you build the recipe.

📍 Menu path: Bakery → Recipes

👤 Who uses it: All roles with access to the Recipes menu item can view and edit; no plan-tier restriction

Overview

This shared component (exported as FnbRecipesPage from pos-react-lib) is also usable by other food-service variants, but at the time of writing it is only mounted in the bakery app at /bakery/recipes.

The recipe card grid shows name, category, tags, prep/cook time, oven temperature, yield, shelf life, ingredient count, ingredient cost and margin, nutrition badges and allergen badges all at a glance, so you rarely need to open a recipe just to check its basics.

The recipe editor is a 3-tab form — Basics & Ingredients, Method & Steps, and Nutrition — and every recipe keeps a full version history with restore, so you can always see (and undo) how a recipe has changed over time.

Before You Start

No plan-tier restriction — recipes are available on every bakery plan.
Linking an ingredient to a real Product (for automatic stock deduction when a Production run is marked Done) requires that product to already exist on the Products page.
Linking one recipe as a sub-recipe ingredient of another requires the other recipe to already be saved.

Step-by-Step Guide

1 Create a new recipe

Click New Recipe.
Fill in Recipe Name * (required), Category (Bread, Cake, Pastry, Cookie, Muffin, Pie, Main Course, Starter, Soup, Salad, Dessert, Beverage, Sauce/Condiment, or Other), Servings/Portions and a Description.
Add Tags by typing and pressing Enter or comma — each becomes a removable chip.
Set Prep (min), Cook (min), Oven (°C), Yield Qty and Yield Unit.
Toggle every Allergen chip that applies: Gluten, Dairy, Eggs, Nuts, Peanuts, Soy, Sesame, Shellfish, Fish, Sulphites.
Set Shelf Life (days) — 0 means no expiry; this is what later auto-fills the expiry date on Production runs for this recipe.
Set Selling Price / Unit to unlock the live margin calculation once ingredient costs are entered.
Click Create Recipe.

2 Add and link ingredients with live costing

On the Basics & Ingredients tab, click + Add for each ingredient row.
Type the ingredient Name, then either type into "Link Product" to search and pick a real Product (this auto-fills Cost/Unit from the product's cost price and shows a green tag), or search and pick a Sub-Recipe to nest one recipe inside another (shown as a purple 🔗 tag).
Enter Quantity and Unit — a dropdown of common baking units (g, kg, ml, L, tsp, tbsp, cup, pieces, units, slices, pinch) or Custom for anything else.
Click the NOTE toggle under any row to add a per-ingredient note, e.g. "sifted" or "room temperature".
Once at least one ingredient has a cost entered, a live costing panel appears below the table showing Ingredient Cost (per batch), Cost per Unit, Selling Price and Gross Margin % — colour-coded green at 40% or above, amber at 20–39%, red below 20%.

💡 Use the ↻ Sync costs button (appears once any ingredient is linked to a product) to refresh every linked ingredient's Cost/Unit from the current Products cost price in one click after a supplier price change.

3 Preview a scaled batch

Once a recipe has 2 or more ingredients, click Scale next to Add to open the Batch Scaling panel.
Enter a scale factor — e.g. 2 for a double batch, 0.5 for a half batch.
The panel shows the resulting total yield and every ingredient's scaled quantity live.

💡 Scaling is preview-only — nothing is saved to the recipe. Use it to print or note quantities for a one-off larger kitchen run.

4 Write the method and set the oven

Switch to the Method & Steps tab.
Type each preparation step on its own line, numbered or bulleted however you prefer — this text is exactly what prints on the recipe card.
If an Oven Temp was set on the Basics tab, a reminder banner repeats the oven temperature and cook time at the top of this tab.

5 Record nutrition facts

Switch to the Nutrition tab.
Fill in any of Calories, Protein, Carbs, Fat, Fiber, Sugar, Sodium or Saturates per serving — all optional, leave blank where not applicable.
A row of macro badges (kcal, P, C, F) appears automatically once Calories, Protein, Carbs or Fat are filled in.

6 Track changes with Version History

Click the history icon on any recipe card to open Version History.
Every update after the very first save creates a new version; use the Change Note field at the bottom of the edit form each time you save changes (e.g. "Reduced sugar by 20g, adjusted oven temp to 175°C") so that note is attached to the version it created.
Click Restore next to any older version to revert the recipe to that version's ingredients, method and nutrition, optionally adding a restore note when prompted.

💡 The current (most recent) version never shows a Restore button since it is already active — Restore is only offered on entries below the top one.

7 Print, search, filter and archive recipes

Click the print icon on a recipe card to open a print-ready recipe card — ingredients, method, allergens, yield and shelf life — in a new tab and trigger the browser print dialog.
Use the search box to filter by name or tag, and the category chip row to filter by category.
Use the Active/Archived toggle inside the recipe editor's header to archive a recipe you no longer make, rather than deleting it — archived recipes are hidden by default but can be revealed with the "Show archived (N)" toggle.
Use the trash icon on a card to permanently delete a recipe instead.

Every Field & Button, Explained

Field / Button	What it does
`New Recipe`	Opens the blank recipe editor.
`Search name or tags…`	Filters the recipe grid by name or any matching tag.
`Category chip filter`	Restricts the grid to one category, built dynamically from categories already used on your recipes.
`Show/Hide archived (N)`	Toggles visibility of archived (inactive) recipes; only shown once at least one archived recipe exists.
`Print icon (recipe card)`	Opens a print-ready recipe card in a new tab with ingredients, method, allergens, yield and shelf life.
`Version history icon`	Opens the Version History panel for that recipe.
`Edit icon`	Opens the recipe editor pre-filled for editing.
`Delete icon`	Permanently deletes the recipe after a confirmation prompt.
`Active/Archived toggle`	In the editor header — marks the recipe archived (hidden from the default grid) instead of deleting it.
`Basics & Ingredients / Method & Steps / Nutrition tabs`	The three sections of the recipe editor form.
`Recipe Name *`	Required; the name shown everywhere the recipe is referenced (grid, Production, printed labels).
`Category`	One of Bread, Cake, Pastry, Cookie, Muffin, Pie, Main Course, Starter, Soup, Salad, Dessert, Beverage, Sauce/Condiment, Other.
`Servings / Portions`	Reference number of servings this recipe yields.
`Description`	Short free-text description shown on the recipe card.
`Tags`	Free-text labels added by typing then pressing Enter or comma; used for search filtering.
`Prep (min) / Cook (min)`	Preparation and cooking/baking time in minutes.
`Oven (°C)`	Target oven temperature; repeated as a reminder banner on the Method & Steps tab when set.
`Yield Qty / Yield Unit`	How much this recipe produces in one batch and the unit it is measured in — the basis for Cost per Unit and for scaling in Production.
`Allergens`	Toggle chips for the 10 common allergens; selected ones show as red badges on the recipe card.
`Shelf Life (days)`	Used to auto-calculate the expiry date on Production runs for this recipe; 0 means no expiry tracking.
`Selling Price / Unit`	Per-unit selling price used purely to calculate Gross Margin — has no direct effect on POS pricing.
`Ingredients table`	Name, Link Product/Sub-Recipe, Qty, Unit, Cost/unit, Line cost, remove and notes-toggle controls per row.
`Scale button + Batch Scaling panel`	Preview-only tool that multiplies every ingredient quantity and the total yield by a chosen factor; never saved.
`↻ Sync costs`	Refreshes every product-linked ingredient's Cost/Unit from that product's current cost price in Products.
`Live costing panel`	Ingredient Cost (per batch), Cost per Unit (÷ yield), Selling Price, and colour-coded Gross Margin %; appears once any ingredient has a cost above zero.
`Method / Steps textarea`	Free-text preparation steps, one per line; printed verbatim on the recipe card.
`Nutrition fields`	Calories, Protein, Carbs, Fat, Fiber, Sugar, Sodium, Saturates — all optional, per serving.
`Change Note`	Shown only when editing an existing recipe; the note attached to the version created by this save, visible later in Version History.
`Create Recipe / Update Recipe`	Saves the recipe.

Tips & Best Practices

Link ingredients to real Products wherever possible — recipes without linked ingredients still cost fine on paper, but won't auto-deduct stock when a Production run for that recipe is marked Done.
Fill Shelf Life Days honestly — Production's Confirm Completion modal uses it to auto-calculate the expiry date stamped on that batch, which then feeds Expiry Monitor.
Use the Change Note field every time you tweak a recipe — months later, "why does this cake taste different" is answered instantly from Version History.
Archive seasonal or discontinued recipes instead of deleting them, so their costing history and version log stay intact for later reference.

Troubleshooting & FAQ

The ingredient cost/margin panel isn't showing.

It only appears once at least one ingredient has a Cost/Unit greater than zero. Add a cost to at least one ingredient, either manually or by linking it to a product.

The Sync costs button is missing.

It is only shown once at least one ingredient is linked to a real Product — ingredients linked only to a sub-recipe, or entirely unlinked, do not enable it.

I can't find Restore next to the current version.

The topmost (current) version never shows a Restore button since it is already active. Restore is only offered on older entries below it.

The Scaling panel changed my batch quantities and now they look different.

Scaling is preview-only and never writes back to the saved recipe. Close the panel and your saved ingredient quantities are untouched.

Nutrition badges aren't showing on the card.

Badges only render once Calories is filled in (or Protein/Carbs/Fat individually) — blank fields are simply skipped rather than shown as zero.

🧑‍💻 Developer Notes

Source component(s):

frontend-app/packages/pos-react-lib/src/pages/fnb/RecipesPage.jsx

Backend endpoints used:

GET /recipes
POST /recipes
PUT /recipes/:id
DELETE /recipes/:id
GET /recipes/:id/versions
POST /recipes/:id/versions/:versionId/restore
GET /products

Related tables (db-core repositories):

Recipe
RecipeVersion
Product

Redux slices:

None — local component state only

Feature flag key: recipes

Exported as FnbRecipesPage from pos-react-lib — a shared, variant-agnostic component that other food-service variants (e.g. a restaurant app) could mount the same way, but which is currently only wired into the bakery sidebar. Costing (the calcCosting helper) is computed entirely client-side from ingredient quantity × unit cost, divided by yield quantity — there is no separate server-side costing endpoint.