🥜 bakery

Allergen & Dietary

Allergen & Dietary lets you tag every product with the allergens it contains and any dietary labels it qualifies for (Vegetarian, Vegan, Jain, Halal, Kosher, Gluten-Free, Dairy-Free, Nut-Free), then print a matrix of everything for display or staff reference.

📍 Menu path: Bakery → Allergen & Dietary

👤 Who uses it: All roles with access to the Bakery menu (the page itself does not add extra permission checks beyond the sidebar's feature gate)

Overview

Every product loaded from Products can be tagged with any of 14 allergens (Gluten, Dairy, Eggs, Tree Nuts, Peanuts, Soy, Fish, Shellfish, Sesame, Mustard, Sulphites, Celery, Lupin, Molluscs) and any of 8 dietary labels (Vegetarian, Vegan, Jain, Halal, Kosher, Gluten-Free, Dairy-Free, Nut-Free).

Unlike Nutrition Labels (which requires the Advanced plan tier), Allergen & Dietary tagging shares the same underlying feature flag but has no plan-tier requirement of its own — it is available even on the Basic plan.

Switch between a Cards view (one card per product with its chips) and a Matrix view (a spreadsheet-style table of every product against every allergen actually in use) — both can be filtered the same way.

If the product list or the saved allergen data can't be loaded (e.g. the API isn't reachable), the page falls back to a small set of built-in sample dishes so the screen is never blank — you may see unfamiliar demo items like "Butter Chicken" or "Dal Makhani" in that case, which are not part of your actual bakery menu.

Before You Start

Products should already exist on the Products page — this page tags existing products, it does not create new ones.
No plan tier is required for this page itself, but note that its sibling page, Nutrition Labels, does require the Advanced tier even though both share the same feature flag.

Step-by-Step Guide

1 Tag a product with allergens and dietary labels

Find the product using the search box, or the Category / Allergen / Dietary filters, then click Edit on its card (or its row in Matrix view).
In the "Contains Allergens" list, click each allergen the product actually contains — selected ones highlight and show a checkmark.
In the "Dietary Labels" row, click every dietary label the product qualifies for.
Add any free-text notes (e.g. "Prepared in a kitchen that also handles nuts") in Additional Notes.
Click Save Allergen Info — if the save request succeeds you'll see "Allergen info saved"; if the backend call fails, the change is still kept in your current session and you'll see "Saved locally" instead.

2 Review tagging status across your whole menu

Check the KPI row: Total Items, With Allergens, Vegan, Gluten-Free, and — only if any exist — Untagged.
Switch to Cards view and look for the red "⚠ Not yet tagged — click Edit" warning on any card, or switch to Matrix view to scan a full grid of ✓/— marks at once.

3 Filter the list

Use the search box to find a product by name.
Use the Category, Allergen, and Dietary dropdowns together or separately to narrow the list — e.g. Allergen = Gluten to see every item containing gluten.
Click Clear (only shown once a filter is active) to reset every filter at once.

4 Print the allergen matrix

Set your filters first if you only want a subset of products or a single allergen column on the printout.
Click Print Matrix — a new tab opens with a plain, printer-friendly table listing every currently-filtered product against the allergen columns and prompts the print dialog automatically.

💡 If an Allergen filter is active when you click Print Matrix, only that one allergen appears as a column on the printed sheet; clear the filter first to print the full allergen matrix.

Every Field & Button, Explained

Field / Button	What it does
`Refresh icon`	Silently reloads products and allergen data without showing the full-page loading skeleton.
`Print Matrix`	Opens a separate printable tab with a table of the currently filtered products × allergen columns, and triggers the print dialog.
`Cards / Matrix toggle`	Switches the product list between individual cards with chips and a dense spreadsheet-style table.
`Total Items / With Allergens / Vegan / Gluten-Free tiles`	Counts across all loaded products (not affected by the current filters).
`Untagged tile`	Only shown when at least one product has neither allergens nor dietary labels set; shows how many.
`Search items…`	Filters by product name.
`Category / Allergen / Dietary dropdowns`	Narrow the visible product list to one category, one allergen, or one dietary label at a time.
`Clear`	Resets search text and all three dropdown filters at once; only shown when a filter is active.
`Allergen chips`	Coloured pill tags on a card/row for each allergen the product contains, e.g. 🌾 Gluten, 🥛 Dairy.
`Dietary chips`	Coloured pill tags for each dietary label the product qualifies for, e.g. 🌱 Vegan, 🚫🌾 Gluten-Free.
`"✓ No allergens declared"`	Shown on a card in place of allergen chips when the product has been reviewed and genuinely has none.
`"⚠ Not yet tagged — click Edit"`	Shown when a product has neither allergens nor dietary labels recorded at all, to distinguish "reviewed, none" from "never reviewed".
`Edit (pencil icon)`	Opens the allergen/dietary editing drawer for that product.
`Contains Allergens list (in drawer)`	14 toggle rows, each with an emoji, label and short description (e.g. "Wheat, rye, barley, oats" for Gluten) — click to toggle on/off.
`Dietary Labels (in drawer)`	8 toggle chips (Vegetarian, Vegan, Jain, Halal, Kosher, Gluten-Free, Dairy-Free, Nut-Free).
`Additional Notes (in drawer)`	Free-text notes shown in italics on the product's card once saved, e.g. cross-contamination warnings.
`Save Allergen Info`	Saves the drawer's selections; falls back to a local-only save with a "Saved locally" message if the API call fails.

Tips & Best Practices

Tag every product at least once, even if it has zero allergens — that clears it from the Untagged count and shows "✓ No allergens declared" instead of the unreviewed warning.
Use the Matrix view and Print Matrix together right before a food-safety inspection or when updating an in-store allergen notice board.
Use Additional Notes for cross-contamination warnings (shared equipment, shared fryer/oven) that don't fit neatly into a single allergen tag.

Troubleshooting & FAQ

I see products I don't recognise, like "Butter Chicken" or "Dal Makhani".

Those are built-in sample/demo items shown only when the Products or Allergen data could not be loaded from the server. Check your connection or permissions and refresh; once the real API responds, the sample items disappear.

It said "Saved locally" instead of "Allergen info saved".

The save request to the server failed, but your change is still kept for this browser session so you don't lose your edits. Refreshing the page reloads from the server, so re-save once the connection issue is resolved.

Print Matrix only shows one allergen column.

You had an Allergen filter selected when you clicked Print Matrix — clear that filter first if you want every allergen as its own column on the printout.

Why is this page available on my Basic plan but Nutrition Labels is not?

Both pages share the same underlying feature flag, but only Nutrition Labels has an additional Advanced-tier requirement. Allergen & Dietary tagging itself has no plan-tier restriction.

🧑‍💻 Developer Notes

Source component(s):

frontend-app/packages/pos-react-lib/src/pages/shared/FnbAllergenPage.jsx

Backend endpoints used:

GET /products
GET /bakery/allergens
PUT /bakery/allergens/:productId

Related tables (db-core repositories):

ProductAllergen
Product

Feature flag key: nutrition_labels

Mounted in the bakery variant with apiPrefix="/bakery". Products and allergen records are fetched in parallel with Promise.allSettled and merged client-side; if either call rejects, the page falls back to a hard-coded mockProducts() list so the UI never renders empty. Saving a tag optimistically updates local state even when the PUT request fails, which is why the save can report "Saved locally" instead of erroring out.