diff --git a/src/components/Dashboard/RecipeBuilderView.jsx b/src/components/Dashboard/RecipeBuilderView.jsx
index b919345..5ae7dd3 100644
--- a/src/components/Dashboard/RecipeBuilderView.jsx
+++ b/src/components/Dashboard/RecipeBuilderView.jsx
@@ -1,7 +1,7 @@
import { useState, useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
import DashboardHeader from "./DashboardHeader";
-import { useRecipeIngredients, useSaveRecipe } from "../../hooks/dashboard/useMenuItems";
+import { useCreateMenuItem, useUpdateMenuItem } from "../../hooks/dashboard/useMenuItems";
import { useToast } from "../../store/toastStore";
import {
FiPlus, FiTrash2, FiCamera, FiBookOpen, FiDollarSign,
@@ -18,11 +18,13 @@ export default function RecipeBuilderView() {
const [localIngredients, setLocalIngredients] = useState([]);
const [newIngredient, setNewIngredient] = useState({ name: "", amount: "", imagePreview: null });
const [mealImagePreview, setMealImagePreview] = useState(null);
+ const [imageFile, setImageFile] = useState(null);
const [isCategoryOpen, setIsCategoryOpen] = useState(false);
const { addToast } = useToast();
- const { data: initialIngredients, isLoading: loadIngredients, error: errIngredients } = useRecipeIngredients();
- const { mutate: saveRecipe, isSuccess: saved, reset: resetMutation } = useSaveRecipe();
+ const { mutate: createMeal, isSuccess: created, reset: resetCreate } = useCreateMenuItem();
+ const { mutate: updateMeal, isSuccess: updated, reset: resetUpdate } = useUpdateMenuItem();
+ const saved = created || updated;
// Pre-fill form when editing an existing meal
useEffect(() => {
@@ -43,11 +45,7 @@ export default function RecipeBuilderView() {
}
}, [editMeal]);
- useEffect(() => {
- if (initialIngredients && localIngredients.length === 0 && !editMeal) {
- setLocalIngredients(initialIngredients);
- }
- }, [initialIngredients, localIngredients.length, editMeal]);
+ // Initial ingredients was removed because it hit a mock endpoint
const handleChange = (field) => (e) => setForm((f) => ({ ...f, [field]: e.target.value }));
@@ -96,6 +94,7 @@ export default function RecipeBuilderView() {
const handleMealImageUpload = (e) => {
const file = e.target.files[0];
if (file) {
+ setImageFile(file);
const reader = new FileReader();
reader.onload = (ev) => setMealImagePreview(ev.target.result);
reader.readAsDataURL(file);
@@ -113,23 +112,32 @@ export default function RecipeBuilderView() {
const handleSave = () => {
if (!form.name.trim()) return;
- saveRecipe(
- { ...form, ingredients: localIngredients },
- {
- onSuccess: () => {
- addToast("Recipe saved successfully!", "success");
- setTimeout(() => {
+
+ const payload = { ...form, ingredients: localIngredients, imageFile };
+ const options = {
+ onSuccess: () => {
+ addToast(editMeal ? "Recipe updated successfully!" : "Recipe saved successfully!", "success");
+ setTimeout(() => {
+ if (!editMeal) {
setForm({ name: "", category: "", price: "", time: "", description: "", fat: "", calories: "", protein: "", sugar: "" });
setMealImagePreview(null);
+ setImageFile(null);
setLocalIngredients([]);
- resetMutation();
- }, 2000);
- },
- onError: () => {
- addToast("Failed to save recipe. Please try again.", "error");
- }
+ }
+ resetCreate();
+ resetUpdate();
+ }, 2000);
+ },
+ onError: () => {
+ addToast(editMeal ? "Failed to update recipe. Please try again." : "Failed to save recipe. Please try again.", "error");
}
- );
+ };
+
+ if (editMeal) {
+ updateMeal({ id: editMeal.id || editMeal._id, data: payload }, options);
+ } else {
+ createMeal(payload, options);
+ }
};
const isFormComplete =
@@ -145,9 +153,6 @@ export default function RecipeBuilderView() {
localIngredients.length > 0 &&
mealImagePreview !== null;
- if (loadIngredients && !editMeal) return
;
-
const pageTitle = editMeal ? `Editing: ${editMeal.name}` : "Recipe Builder";
const pageSubtitle = editMeal
? "Update the meal details, ingredients, and nutritional values below."
@@ -355,7 +360,7 @@ export default function RecipeBuilderView() {
{ key: 'fat', label: 'Fat', color: 'text-blue-500', Icon: FiShare2 },
{ key: 'calories', label: 'Calories', color: 'text-green-500', Icon: FiTarget },
{ key: 'protein', label: 'Protein', color: 'text-blue-400', Icon: FiUser },
- { key: 'sugar', label: 'Suger', color: 'text-orange-400', Icon: FiEye }
+ { key: 'sugar', label: 'Sugar', color: 'text-orange-400', Icon: FiEye }
].map(nut => (
{nut.label}
diff --git a/src/components/Dashboard/shared/InactiveMenuModal.jsx b/src/components/Dashboard/shared/InactiveMenuModal.jsx
new file mode 100644
index 0000000..23c6e04
--- /dev/null
+++ b/src/components/Dashboard/shared/InactiveMenuModal.jsx
@@ -0,0 +1,138 @@
+import React, { useRef, useState } from "react";
+import { FiX, FiCamera, FiUploadCloud } from "react-icons/fi";
+import { useUpdateMenuItem } from "../../../hooks/dashboard/useMenuItems";
+import { useToast } from "../../../store/toastStore";
+
+export default function InactiveMenuModal({ isOpen, onClose, inactiveItems }) {
+ const { addToast } = useToast();
+ const { mutate: updateMeal, isPending } = useUpdateMenuItem();
+ const fileInputRef = useRef(null);
+ const [selectedItemId, setSelectedItemId] = useState(null);
+
+ if (!isOpen) return null;
+
+ const handleAddPhotoClick = (id) => {
+ // Do not allow switching items while an upload is in progress
+ if (isPending) return;
+ setSelectedItemId(id);
+ if (fileInputRef.current) {
+ fileInputRef.current.click();
+ }
+ };
+
+ const handleFileChange = (e) => {
+ const file = e.target.files[0];
+ if (file && selectedItemId) {
+ const itemToUpdate = inactiveItems.find((i) => i.id === selectedItemId);
+ if (itemToUpdate) {
+ updateMeal(
+ {
+ id: itemToUpdate.id || itemToUpdate._id,
+ data: { ...itemToUpdate, imageFile: file },
+ },
+ {
+ onSuccess: () => {
+ addToast("Photo added successfully! Dish is now active.", "success");
+ setSelectedItemId(null);
+ if (fileInputRef.current) fileInputRef.current.value = "";
+ if (inactiveItems.length === 1) onClose(); // Auto close if it was the last item
+ },
+ onError: () => {
+ addToast("Failed to upload photo. Please try again.", "error");
+ setSelectedItemId(null);
+ if (fileInputRef.current) fileInputRef.current.value = "";
+ },
+ }
+ );
+ }
+ }
+ };
+
+ return (
+
+ {/* Backdrop */}
+
+
+ {/* Modal */}
+
+ {/* Header */}
+
+
+
Inactive Menu
+
Dishes without photos won't appear in the main menu.
+
+
+
+
+ {/* Hidden file input */}
+
+
+ {/* Content */}
+
+ {inactiveItems.length === 0 ? (
+
+
+
+
+
No Inactive Dishes
+
All your dishes have photos and are active.
+
+ ) : (
+
+ {inactiveItems.map((item) => (
+
+
+ {/* Placeholder image */}
+
+
+
+
+
{item.name}
+
+ {item.category}
+
+ ${item.price}
+
+
+
+
+
+
+ ))}
+
+ )}
+
+
+
+ );
+}
diff --git a/src/components/Dashboard/shared/IngredientModal.jsx b/src/components/Dashboard/shared/IngredientModal.jsx
index ad7b96b..ea52367 100644
--- a/src/components/Dashboard/shared/IngredientModal.jsx
+++ b/src/components/Dashboard/shared/IngredientModal.jsx
@@ -51,6 +51,15 @@ function IngredientModal({ isOpen, onClose, onSubmit, initialData }) {
}
}, [isOpen, initialData]);
+ useEffect(() => {
+ const blobUrl = formData.image;
+ return () => {
+ if (blobUrl?.startsWith("blob:")) {
+ URL.revokeObjectURL(blobUrl);
+ }
+ };
+ }, [formData.image]);
+
if (!isOpen) return null;
const validate = (field, value) => {
@@ -84,10 +93,13 @@ function IngredientModal({ isOpen, onClose, onSubmit, initialData }) {
const handleImageChange = (e) => {
const file = e.target.files[0];
- if (file) {
- const url = URL.createObjectURL(file);
- setFormData((prev) => ({ ...prev, image: url }));
+ if (!file) return;
+ // Revoke previous blob URL before creating a new one
+ if (formData.image?.startsWith("blob:")) {
+ URL.revokeObjectURL(formData.image);
}
+ const url = URL.createObjectURL(file);
+ setFormData((prev) => ({ ...prev, image: url }));
};
const handleBlur = (e) => {
diff --git a/src/components/Dashboard/shared/MenuModal.jsx b/src/components/Dashboard/shared/MenuModal.jsx
deleted file mode 100644
index cd6798c..0000000
--- a/src/components/Dashboard/shared/MenuModal.jsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import { useState, useEffect } from "react";
-import { FiX, FiAlertCircle, FiUploadCloud } from "react-icons/fi";
-
-// ── Regex validators ────────────────────────────────────────────────
-const VALIDATORS = {
- name: { pattern: /^[a-zA-Z\u0600-\u06FF\s]{2,60}$/, msg: "2–60 letters only" },
- price: { pattern: /^\d+(\.\d{1,2})?$/, msg: "e.g. 15 or 15.99" },
- nutrient: { pattern: /^\d+(\.\d+)?g?$/, msg: "e.g. 25 or 25g" },
-};
-
-// ── Character-level blockers ────────────────────────────────────────
-const FILTERS = {
- name: (v) => v.replace(/[^a-zA-Z\u0600-\u06FF\s]/g, ""),
- price: (v) => v.replace(/[^\d.]/g, "").replace(/(\..*)\./g, "$1").replace(/(\.\d{2})\d+/, "$1"),
- nutrient: (v) => v.replace(/[^\d.g]/g, "").replace(/(\.\d+)g?.*/, "$1g"),
-};
-
-const EMPTY_FORM = {
- name: "", category: "Chicken",
- fat: "", calories: "", protein: "", sugar: "", price: "", image: "",
-};
-
-function Field({ label, id, error, children }) {
- return (
-
-
- {children}
- {error && (
-
- {error}
-
- )}
-
- );
-}
-
-function MenuModal({ isOpen, onClose, onSubmit, initialData }) {
- const isEditing = !!initialData;
- const [formData, setFormData] = useState(EMPTY_FORM);
- const [errors, setErrors] = useState({});
- const [touched, setTouched] = useState({});
-
- useEffect(() => {
- if (isOpen) {
- setFormData(initialData ? { ...EMPTY_FORM, ...initialData } : EMPTY_FORM);
- setErrors({});
- setTouched({});
- }
- }, [isOpen, initialData]);
-
- if (!isOpen) return null;
-
- const validate = (field, value) => {
- const v = String(value).trim();
- if (field === "name") return VALIDATORS.name.pattern.test(v) ? "" : VALIDATORS.name.msg;
- if (field === "price") return VALIDATORS.price.pattern.test(v) ? "" : VALIDATORS.price.msg;
- if (["fat","calories","protein","sugar"].includes(field)) {
- if (!v) return ""; // optional
- return VALIDATORS.nutrient.pattern.test(v) ? "" : VALIDATORS.nutrient.msg;
- }
- return "";
- };
-
- const getFilter = (field) => {
- if (field === "name") return FILTERS.name;
- if (field === "price") return FILTERS.price;
- if (["fat","calories","protein","sugar"].includes(field)) return FILTERS.nutrient;
- return (v) => v;
- };
-
- const handleChange = (e) => {
- const { name, value } = e.target;
- const filtered = getFilter(name)(value);
- setFormData((prev) => ({ ...prev, [name]: filtered }));
- if (touched[name]) {
- setErrors((prev) => ({ ...prev, [name]: validate(name, filtered) }));
- }
- };
-
- const handleImageChange = (e) => {
- const file = e.target.files[0];
- if (file) {
- const url = URL.createObjectURL(file);
- setFormData((prev) => ({ ...prev, image: url }));
- }
- };
-
- const handleBlur = (e) => {
- const { name, value } = e.target;
- setTouched((prev) => ({ ...prev, [name]: true }));
- setErrors((prev) => ({ ...prev, [name]: validate(name, value) }));
- };
-
- const handleSubmit = (e) => {
- e.preventDefault();
- const required = ["name", "price"];
- const optional = ["fat", "calories", "protein", "sugar"];
- const newErrors = {};
- [...required, ...optional].forEach((f) => {
- const err = validate(f, formData[f] ?? "");
- if (err) newErrors[f] = err;
- });
- setErrors(newErrors);
- setTouched(Object.fromEntries([...required, ...optional].map((f) => [f, true])));
- if (Object.keys(newErrors).length > 0) return;
-
- // Normalize nutrients
- const normalized = { ...formData };
- optional.forEach((f) => {
- if (normalized[f] && !/g$/.test(normalized[f])) normalized[f] += "g";
- });
-
- onSubmit(normalized);
- };
-
- const inputClass = (field) =>
- `w-full bg-gray-50 border rounded-xl px-4 py-2 text-[14px] focus:outline-none transition-colors ${
- errors[field] ? "border-red-400 focus:border-red-400" : "border-gray-200 focus:border-orange-400"
- }`;
-
- return (
-
-
-
- {/* Header */}
-
-
- {isEditing ? "Edit Meal" : "Add Meal"}
-
-
-
-
- {/* Form */}
-
-
-
- );
-}
-
-export default MenuModal;
diff --git a/src/components/Dashboard/shared/MetricRingCard.jsx b/src/components/Dashboard/shared/MetricRingCard.jsx
new file mode 100644
index 0000000..1775975
--- /dev/null
+++ b/src/components/Dashboard/shared/MetricRingCard.jsx
@@ -0,0 +1,119 @@
+/**
+ * MetricRingCard
+ * ─────────────────────────────────────────
+ * Reusable SVG ring + value card for dashboard metric headers.
+ * Replaces the duplicate CircleMetric components in IngredientsView
+ * and ChefMenuView.
+ *
+ * Props:
+ * label {string} - Card title / category name
+ * value {number} - Primary large number to display
+ * pct {number} - Fill percentage for the ring (0–100)
+ * change {number} - % change; shown with up/down arrow
+ * badge {boolean} - Red "alert" variant (e.g. out-of-stock)
+ * size {'sm'|'lg'} - 'sm' = compact (Ingredients page), 'lg' = wide (Chef Menu page)
+ */
+export default function MetricRingCard({ label, value, pct, change = 0, badge = false, size = "sm" }) {
+ const isLg = size === "lg";
+
+ // Ring geometry
+ const r = isLg ? 30 : 20;
+ const sz = isLg ? 76 : 50;
+ const cx = sz / 2;
+ const circ = 2 * Math.PI * r;
+ const offset = circ - (Math.min(pct, 100) / 100) * circ;
+
+ // Color scheme
+ const ringColor = badge ? "#EF4444" : "#22C55E";
+ const valueColor = badge ? "#EF4444" : (isLg ? "#F97316" : "#F97316");
+
+ // ── Compact (sm) layout — ring left, text right ──
+ if (!isLg) {
+ return (
+
+ {/* Ring */}
+
+
+ {pct}%
+
+
+ {/* Text */}
+
+
{label}
+
+ {value}
+
+
+ {change >= 0 ? "↑" : "↓"} {Math.abs(change).toFixed(2)}%
+
+
+
+ );
+ }
+
+ // ── Large (lg) layout — ring left, text right, wider card ──
+ return (
+
+ {/* Ring */}
+
+
+ {/* Text */}
+
+
{label}
+
+ {value}
+
+ {change !== undefined && (
+
= 0 ? "text-green-500" : "text-red-400"}`}>
+ {change >= 0 ? "↑" : "↓"} {Math.abs(change).toFixed(2)}%
+
+ )}
+
+
+ );
+}
diff --git a/src/components/Dashboard/shared/StatusBadge.jsx b/src/components/Dashboard/shared/StatusBadge.jsx
index 0c5be0e..7709cd0 100644
--- a/src/components/Dashboard/shared/StatusBadge.jsx
+++ b/src/components/Dashboard/shared/StatusBadge.jsx
@@ -10,17 +10,18 @@
const STATUS_MAP = {
// Order statuses
- Preparing: "bg-[#F97316] text-white",
- Ready: "bg-[#16A34A] text-white",
- Done: "bg-gray-400 text-white",
- Cancelled: "bg-red-500 text-white",
- Pending: "bg-yellow-500 text-white",
+ Preparing: "bg-[#F97316] text-white",
+ Ready: "bg-[#16A34A] text-white",
+ Done: "bg-gray-400 text-white",
+ Cancelled: "bg-red-500 text-white",
+ Pending: "bg-yellow-500 text-white",
+ Queue: "bg-yellow-500 text-white",
// Menu statuses
- Active: "bg-green-50 text-green-600",
- Inactive: "bg-gray-100 text-gray-500",
+ Active: "bg-green-50 text-green-600",
+ Inactive: "bg-gray-100 text-gray-500",
// Stock statuses (Ingredients)
- "In Stock": "bg-green-50 text-green-600",
- "Low Stock": "bg-yellow-50 text-yellow-600",
+ "In Stock": "bg-green-50 text-green-600",
+ "Low Stock": "bg-yellow-50 text-yellow-600",
"Out of Stock": "bg-red-50 text-red-500",
};
diff --git a/src/hooks/dashboard/useKitchenOrders.js b/src/hooks/dashboard/useKitchenOrders.js
index db92827..4ff6af8 100644
--- a/src/hooks/dashboard/useKitchenOrders.js
+++ b/src/hooks/dashboard/useKitchenOrders.js
@@ -12,13 +12,23 @@
*/
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { getKitchenOrders, updateKitchenStatus } from "../../services/dashboardService";
+import {
+ getKitchenOrders,
+ updateKitchenStatus,
+ getActiveKitchenTickets,
+ updateTicketStatus,
+ updateChefStatus,
+ updateChefStation,
+ updateChefDisplayName,
+} from "../../services/dashboardService";
+import { useToast } from "../../store/toastStore";
const POLL_INTERVAL_MS = 30_000; // 30 s — swap for WS when ready
export const kitchenKeys = {
- all: ["kitchen"],
- orders: () => ["kitchen", "orders"],
+ all: ["kitchen"],
+ orders: () => ["kitchen", "orders"],
+ tickets: () => ["kitchen", "tickets"],
};
export function useRealtimeKitchen() {
@@ -96,6 +106,93 @@ export function useUpdateKitchenStatus() {
onError: (_err, _vars, ctx) => {
if (ctx?.prev) qc.setQueryData(kitchenKeys.orders(), ctx.prev);
},
- onSettled: () => qc.invalidateQueries({ queryKey: kitchenKeys.orders() }),
+ onSettled: () => qc.invalidateQueries({ queryKey: kitchenKeys.all }),
+ });
+}
+
+// ══════════════════════════════════════════════════════════════════
+// Kitchen-Service hooks (tickets + chef management)
+// ══════════════════════════════════════════════════════════════════
+
+/** Fetch active kitchen tickets — polls every 30 s */
+export function useActiveTickets() {
+ return useQuery({
+ queryKey: kitchenKeys.tickets(),
+ queryFn: getActiveKitchenTickets,
+ refetchInterval: POLL_INTERVAL_MS,
+ refetchOnMount: "always",
+ staleTime: 0,
+ placeholderData: [],
+ });
+}
+
+/** Mutation: update a kitchen ticket's status */
+export function useUpdateTicketStatus() {
+ const qc = useQueryClient();
+ const toast = useToast();
+
+ return useMutation({
+ mutationFn: ({ ticketId, status }) => updateTicketStatus(ticketId, status),
+
+ // Optimistic update
+ onMutate: async ({ ticketId, status }) => {
+ await qc.cancelQueries({ queryKey: kitchenKeys.tickets() });
+ const prev = qc.getQueryData(kitchenKeys.tickets());
+
+ qc.setQueryData(kitchenKeys.tickets(), (old) => {
+ if (!Array.isArray(old)) return old;
+ return old.map((t) => (t.id === ticketId ? { ...t, status } : t));
+ });
+
+ return { prev };
+ },
+
+ onError: (_err, _vars, ctx) => {
+ if (ctx?.prev) qc.setQueryData(kitchenKeys.tickets(), ctx.prev);
+ toast.error("Failed to update ticket status.");
+ },
+ onSuccess: (_data, { status }) => {
+ toast.success(`Ticket moved to ${status}.`);
+ },
+ onSettled: () => qc.invalidateQueries({ queryKey: kitchenKeys.all }),
+ });
+}
+
+/** Mutation: toggle chef active/inactive */
+export function useUpdateChefStatus() {
+ const qc = useQueryClient();
+ const toast = useToast();
+
+ return useMutation({
+ mutationFn: ({ chefId, status }) => updateChefStatus(chefId, status),
+ onError: () => toast.error("Failed to update chef status."),
+ onSuccess: (_data, { status }) => toast.success(`Chef marked as ${status}.`),
+ onSettled: () => qc.invalidateQueries({ queryKey: kitchenKeys.tickets() }),
+ });
+}
+
+/** Mutation: change chef station */
+export function useUpdateChefStation() {
+ const qc = useQueryClient();
+ const toast = useToast();
+
+ return useMutation({
+ mutationFn: ({ chefId, station }) => updateChefStation(chefId, station),
+ onError: () => toast.error("Failed to update chef station."),
+ onSuccess: (_data, { station }) => toast.success(`Chef station updated to ${station}.`),
+ onSettled: () => qc.invalidateQueries({ queryKey: kitchenKeys.tickets() }),
+ });
+}
+
+/** Mutation: edit chef display name */
+export function useUpdateChefDisplayName() {
+ const qc = useQueryClient();
+ const toast = useToast();
+
+ return useMutation({
+ mutationFn: ({ chefId, displayName }) => updateChefDisplayName(chefId, displayName),
+ onError: () => toast.error("Failed to update chef display name."),
+ onSuccess: () => toast.success("Chef display name updated."),
+ onSettled: () => qc.invalidateQueries({ queryKey: kitchenKeys.tickets() }),
});
}
diff --git a/src/hooks/dashboard/useMenuItems.js b/src/hooks/dashboard/useMenuItems.js
index 92951ce..b27eba6 100644
--- a/src/hooks/dashboard/useMenuItems.js
+++ b/src/hooks/dashboard/useMenuItems.js
@@ -1,5 +1,5 @@
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { getMenuCategories, getMenuItems, deleteMenuItem, updateMenuItem, createMenuItem, saveRecipe, getRecipeIngredients } from "../../services/dashboardService";
+import { getMenuCategories, getMenuItems, deleteMenuItem, updateMenuItem, createMenuItem, saveRecipe, getRecipeIngredients, uploadMealImage } from "../../services/dashboardService";
export const menuKeys = {
all: ["menu"],
@@ -48,7 +48,34 @@ export function useDeleteMenuItem() {
export function useUpdateMenuItem() {
const qc = useQueryClient();
return useMutation({
- mutationFn: ({ id, data }) => updateMenuItem(id, data),
+ mutationFn: async ({ id, data }) => {
+ const payload = {
+ name: data.name,
+ description: data.description || "",
+ price: parseFloat(data.price),
+ category: data.category,
+ ingredients: Array.isArray(data.ingredients) ? data.ingredients : [],
+ time: data.time || "",
+ fat: data.fat || "",
+ calories: data.calories || "",
+ protein: data.protein || "",
+ sugar: data.sugar || "",
+ };
+
+ const res = await updateMenuItem(id, payload);
+
+ // Image upload is a partial-success step: a failed upload should not
+ // roll back the already-committed meal update.
+ if (data.imageFile) {
+ try {
+ await uploadMealImage(id, data.imageFile);
+ } catch (imgErr) {
+ console.warn("[useUpdateMenuItem] Image upload failed (meal saved):", imgErr);
+ }
+ }
+
+ return res;
+ },
onSettled: () => qc.invalidateQueries({ queryKey: menuKeys.all }),
});
}
@@ -57,8 +84,35 @@ export function useUpdateMenuItem() {
export function useCreateMenuItem() {
const qc = useQueryClient();
return useMutation({
- mutationFn: createMenuItem,
- onSettled: () => qc.invalidateQueries({ queryKey: menuKeys.all }),
+ mutationFn: async (data) => {
+ const payload = {
+ name: data.name,
+ description: data.description || "",
+ price: parseFloat(data.price),
+ category: data.category,
+ ingredients: Array.isArray(data.ingredients) ? data.ingredients : [],
+ time: data.time || "",
+ fat: data.fat || "",
+ calories: data.calories || "",
+ protein: data.protein || "",
+ sugar: data.sugar || "",
+ };
+
+ const meal = await createMenuItem(payload);
+
+ // Image upload is a partial-success step: a failed upload should not
+ // roll back the already-committed meal create.
+ if (data.imageFile && meal && (meal.id || meal._id)) {
+ try {
+ await uploadMealImage(meal.id || meal._id, data.imageFile);
+ } catch (imgErr) {
+ console.warn("[useCreateMenuItem] Image upload failed (meal saved):", imgErr);
+ }
+ }
+
+ return meal;
+ },
+ onSettled: () => qc.invalidateQueries({ queryKey: menuKeys.all }),
});
}
diff --git a/src/mocks/dashboardMock.js b/src/mocks/dashboardMock.js
index 1064a54..52c8869 100644
--- a/src/mocks/dashboardMock.js
+++ b/src/mocks/dashboardMock.js
@@ -187,6 +187,19 @@ export const mockKitchenIngredients = [
{ id: 5, name: "Caesar Dressing", checked: false },
];
+export const mockKitchenTickets = [
+ { id: 1, orderId: "#58B1D", status: "Preparing", assignedChef: "Chef John", createdAt: new Date(Date.now() - 15 * 60000).toISOString() },
+ { id: 2, orderId: "#58B2A", status: "Queue", assignedChef: "Unassigned", createdAt: new Date(Date.now() - 5 * 60000).toISOString() },
+ { id: 3, orderId: "#58B2B", status: "Queue", assignedChef: "Unassigned", createdAt: new Date(Date.now() - 2 * 60000).toISOString() },
+ { id: 4, orderId: "#58B1C", status: "Ready", assignedChef: "Chef Sarah", createdAt: new Date(Date.now() - 25 * 60000).toISOString() },
+];
+
+export const mockChefs = loadMock("kitchenChefs", [
+ { id: 1, displayName: "Chef John", status: "ACTIVE", station: "Grill", avatar: "CJ" },
+ { id: 2, displayName: "Chef Sarah", status: "ACTIVE", station: "Prep", avatar: "CS" },
+ { id: 3, displayName: "Chef Mike", status: "INACTIVE", station: "Assembly", avatar: "CM" },
+]);
+
// ── Menu Management ───────────────────────────────────────────────
export const mockMenuUploads = [
diff --git a/src/mocks/handlers.js b/src/mocks/handlers.js
index 9c2b5a7..436489c 100644
--- a/src/mocks/handlers.js
+++ b/src/mocks/handlers.js
@@ -146,6 +146,13 @@ export const MOCK_HANDLERS = [
: { status: 404, data: { message: `Meal ${id} not found` } };
},
},
+ {
+ method: "post",
+ match: (url) => url.match(/\/menu\/\d+\/image/),
+ handler: () => {
+ return { status: 200, data: { success: true } };
+ },
+ },
{
method: "delete",
match: (url) => url.match(/\/menu\/\d+/),
@@ -202,6 +209,7 @@ export const MOCK_HANDLERS = [
};
dash.mockKitchenOrders.queue.push(kitchenEntry);
dash.saveMock("kitchenOrders", dash.mockKitchenOrders);
+
console.log('[MOCK] POST /orders — pushed to kitchen queue:', kitchenEntry);
console.log('[MOCK] kitchen queue is now:', dash.mockKitchenOrders.queue.length, 'items');
@@ -425,6 +433,96 @@ export const MOCK_HANDLERS = [
return { status: 200, data: { success: true } };
} },
+ // ──────────────────────────────────────────────
+ // KITCHEN SERVICE (Tickets + Chefs)
+ // ──────────────────────────────────────────────
+ { method: "get", match: (url) => url.endsWith("/api/kitchen/tickets/active"), handler: () => {
+ const saved = localStorage.getItem("mock_kitchenOrders");
+ const kitchenOrders = saved ? JSON.parse(saved) : dash.mockKitchenOrders;
+
+ // Dynamically generate tickets from the Live Kitchen Board source of truth
+ const tickets = [];
+ const mapCol = (colName, statusName) => {
+ if (!kitchenOrders[colName]) return;
+ kitchenOrders[colName].forEach((o, i) => {
+ tickets.push({
+ id: o.id.replace('#', ''), // numeric ticket id
+ orderId: o.id.replace('#', ''), // rendered as #{ticket.orderId} — no double prefix
+ status: statusName,
+ chefDisplayName: o.assignedChef || (o.startedAt ? "Chef John" : null),
+ assignedChefId: o.assignedChefId || (o.startedAt ? 1 : null),
+ createdAt: o.createdAt || new Date(Date.now() - (i*5 + 2) * 60000).toISOString()
+ });
+ });
+ };
+
+ mapCol("queue", "Queue");
+ mapCol("preparing", "Preparing");
+ mapCol("ready", "Ready");
+ mapCol("done", "Done");
+
+ return { status: 200, data: tickets };
+ }},
+ { method: "patch", match: (url) => url.match(/\/api\/kitchen\/tickets\/[\w-]+\/status/), handler: (config) => {
+ const id = config.url.split("/")[4];
+ const { status } = JSON.parse(config.data || "{}"); // e.g. "Preparing"
+
+ const targetStatus = status.toLowerCase(); // "preparing"
+
+ // Find the Kanban board patch handler and invoke it directly to ensure perfect sync
+ const handler = MOCK_HANDLERS.find(h => h.method === "patch" && h.match("/kitchen/orders/123/status"));
+ if (handler) {
+ handler.handler({
+ ...config,
+ url: `/kitchen/orders/${id}/status`,
+ data: JSON.stringify({ status: targetStatus })
+ });
+ }
+
+ return { status: 200, data: { success: true } };
+ }},
+ { method: "get", match: (url) => url.endsWith("/api/kitchen/chefs"), handler: () => {
+ const saved = localStorage.getItem("mock_kitchenChefs");
+ const chefs = saved ? JSON.parse(saved) : dash.mockChefs;
+ return { status: 200, data: chefs };
+ }},
+ { method: "patch", match: (url) => url.match(/\/api\/kitchen\/chefs\/\d+\/status/), handler: (config) => {
+ const id = parseInt(config.url.split("/")[4], 10);
+ const { status } = JSON.parse(config.data || "{}");
+ const saved = localStorage.getItem("mock_kitchenChefs");
+ const chefs = saved ? JSON.parse(saved) : dash.mockChefs;
+ const chef = chefs.find(c => c.id === id);
+ if (chef) {
+ chef.status = status;
+ dash.saveMock("kitchenChefs", chefs);
+ }
+ return { status: 200, data: { success: true } };
+ }},
+ { method: "patch", match: (url) => url.match(/\/api\/kitchen\/chefs\/\d+\/station/), handler: (config) => {
+ const id = parseInt(config.url.split("/")[4], 10);
+ const { station } = JSON.parse(config.data || "{}");
+ const saved = localStorage.getItem("mock_kitchenChefs");
+ const chefs = saved ? JSON.parse(saved) : dash.mockChefs;
+ const chef = chefs.find(c => c.id === id);
+ if (chef) {
+ chef.station = station;
+ dash.saveMock("kitchenChefs", chefs);
+ }
+ return { status: 200, data: { success: true } };
+ }},
+ { method: "patch", match: (url) => url.match(/\/api\/kitchen\/chefs\/\d+\/display-name/), handler: (config) => {
+ const id = parseInt(config.url.split("/")[4], 10);
+ const { displayName } = JSON.parse(config.data || "{}");
+ const saved = localStorage.getItem("mock_kitchenChefs");
+ const chefs = saved ? JSON.parse(saved) : dash.mockChefs;
+ const chef = chefs.find(c => c.id === id);
+ if (chef) {
+ chef.displayName = displayName;
+ dash.saveMock("kitchenChefs", chefs);
+ }
+ return { status: 200, data: { success: true } };
+ }},
+
// ──────────────────────────────────────────────
// MENU MANAGEMENT (uploads)
// ──────────────────────────────────────────────
diff --git a/src/services/dashboardService.js b/src/services/dashboardService.js
index b941d8b..6ffef03 100644
--- a/src/services/dashboardService.js
+++ b/src/services/dashboardService.js
@@ -39,30 +39,103 @@ export const getKitchenOrders = () =>
});
export const updateKitchenStatus = (orderId, status) => api.patch(`/kitchen/orders/${encodeURIComponent(orderId)}/status`, { status }).then(r => r.data);
+// ── Kitchen Service (tickets + chef management) ───────────────────
+export const getActiveKitchenTickets = () => api.get("/api/kitchen/tickets/active").then(r => r.data);
+export const updateTicketStatus = (ticketId, status) => api.patch(`/api/kitchen/tickets/${ticketId}/status`, { status }).then(r => r.data);
+export const updateChefStatus = (chefId, status) => api.patch(`/api/kitchen/chefs/${chefId}/status`, { status }).then(r => r.data);
+export const updateChefStation = (chefId, station) => api.patch(`/api/kitchen/chefs/${chefId}/station`, { station }).then(r => r.data);
+export const updateChefDisplayName = (chefId, displayName) => api.patch(`/api/kitchen/chefs/${chefId}/display-name`, { displayName }).then(r => r.data);
+
// ── Menu (Chef Menu page) ─────────────────────────────────────────
-export const getMenuCategories = () => api.get("/menu/categories").then(r => Mappers.mapMenuCategories(r.data));
-export const getMenuItems = (params = {}) => api.get("/menu/items", { params }).then(r => Mappers.mapMenuItems(r.data));
-export const deleteMenuItem = (id) => api.delete(`/menu/items/${id}`).then(r => r.data);
-export const updateMenuItem = (id, data) => api.patch(`/menu/items/${id}`, data).then(r => r.data);
-export const createMenuItem = (data) => api.post("/menu/items", data).then(r => r.data);
+export const getMenuCategories = async () => {
+ // The backend doesn't have a /categories endpoint, so we derive it from the menu items directly.
+ const items = await getMenuItems();
+ const counts = {};
+ items.forEach(item => {
+ const cat = item.category || "Other";
+ counts[cat] = (counts[cat] || 0) + 1;
+ });
+
+ const total = items.length;
+ const categories = Object.entries(counts).map(([name, count], index) => {
+ const colors = ["#F97316", "#8B5CF6", "#3B82F6", "#10B981", "#EC4899"];
+ return {
+ name,
+ count,
+ percentage: total > 0 ? Math.round((count / total) * 100) : 0,
+ color: colors[index % colors.length],
+ change: "+0%" // Placeholder since we can't calculate historical change purely from current items
+ };
+ });
+
+ return Mappers.mapMenuCategories({
+ totalChange: "+0%",
+ items: categories
+ });
+};
+export const getMenuItems = (params = {}) => api.get("/api/menu", { params }).then(r => Mappers.mapMenuItems(r.data));
+export const deleteMenuItem = (id) => api.delete(`/api/menu/${id}`).then(r => r.data);
+export const updateMenuItem = (id, data) => api.put(`/api/menu/${id}`, data).then(r => r.data);
+export const createMenuItem = (data) => api.post("/api/menu", data).then(r => r.data);
+export const updateMenuDiscount = (id, data) => api.patch(`/api/menu/${id}/discount`, data).then(r => r.data);
+export const uploadMealImage = (id, file) => {
+ const formData = new FormData();
+ formData.append("file", file);
+ return api.post(`/api/menu/${id}/image`, formData, {
+ headers: { "Content-Type": "multipart/form-data" }
+ }).then(r => r.data);
+};
// ── Recipe Builder ────────────────────────────────────────────────
export const getRecipeIngredients = () => api.get("/recipes/ingredients").then(r => r.data);
export const saveRecipe = (data) => api.post("/recipes", data).then(r => r.data);
// ── Menu Management ───────────────────────────────────────────────
-export const getMenuUploads = () => api.get("/menu/uploads").then(r => Mappers.mapMenuUploads(r.data));
-export const uploadMenuFile = (file) =>
- api.post("/menu/upload", (() => { const f = new FormData(); f.append("file", file); return f; })(), {
- headers: { "X-File-Name": file.name }
- }).then(r => r.data);
+export const getMenuUploads = () => {
+ const uploads = JSON.parse(localStorage.getItem('menuUploads') || '[]');
+ return Promise.resolve(Mappers.mapMenuUploads(uploads));
+};
+
+export const uploadMenuFile = async (file) => {
+ const formData = new FormData();
+ formData.append("file", file);
+
+ const headers = { "Content-Type": "multipart/form-data" };
+ const user = useAuthStore.getState().user;
+ if (user && user.role) {
+ headers["X-User-Role"] = user.role;
+ }
+
+ const result = await api.post("/api/inventory/upload", formData, { headers }).then(r => r.data);
+
+ // Store in localStorage so it appears in the Recent Uploads table
+ const uploads = JSON.parse(localStorage.getItem('menuUploads') || '[]');
+ const now = new Date();
+
+ const newUpload = {
+ id: `UPL-${Date.now()}`,
+ filename: file.name,
+ date: now.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }),
+ time: now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true }),
+ status: "Success",
+ added: 0,
+ updated: 0
+ };
+
+ localStorage.setItem('menuUploads', JSON.stringify([newUpload, ...uploads]));
+
+ return result;
+};
// ── Ingredients ───────────────────────────────────────────────────
export const getIngredientsMetrics = () => api.get("/ingredients/metrics").then(r => Mappers.mapIngredientsMetrics(r.data));
-export const getIngredients = (params = {}) => api.get("/ingredients", { params }).then(r => Mappers.mapIngredients(r.data));
-export const createIngredient = (data) => api.post("/ingredients", data).then(r => r.data);
-export const updateIngredient = (id, data) => api.patch(`/ingredients/${id}`, data).then(r => r.data);
-export const deleteIngredient = (id) => api.delete(`/ingredients/${id}`).then(r => r.data);
+export const getIngredients = (params = {}) => api.get("/api/ingredients", { params }).then(r => Mappers.mapIngredients(r.data));
+export const createIngredient = (data) => api.post("/api/ingredients", data).then(r => r.data);
+export const updateIngredient = (id, data) => api.patch(`/api/ingredients/${id}/stock`, data).then(r => r.data);
+export const deleteIngredient = (id) => api.delete(`/api/ingredients/${id}`).then(r => r.data);
+export const bulkUpdateIngredientsStock = (data) => api.patch("/api/ingredients/bulk/stock", data).then(r => r.data);
+export const reserveIngredientsStock = (data) => api.post("/api/ingredients/reserve", data).then(r => r.data);
+export const revertIngredientsStock = (data) => api.post("/api/ingredients/revert", data).then(r => r.data);
export const uploadIngredientsFile = (file) => {
diff --git a/src/services/mappers/dashboardMappers.js b/src/services/mappers/dashboardMappers.js
index 5b30cc3..cbce04f 100644
--- a/src/services/mappers/dashboardMappers.js
+++ b/src/services/mappers/dashboardMappers.js
@@ -120,6 +120,43 @@ export const mapOrders = (data) => {
}));
};
+/**
+ * mapOrderResponse
+ * Maps the real OrderResponse from the Order Service (POST /api/order, GET /api/order/:id).
+ *
+ * Real status enum: PENDING | AWAITING_PAYMENT | PAID | CONFIRMED | CANCELLED | READY_FOR_PICKUP
+ */
+export const ORDER_STATUS_LABELS = {
+ PENDING: "Pending",
+ AWAITING_PAYMENT: "Awaiting Payment",
+ PAID: "Paid",
+ CONFIRMED: "Confirmed",
+ CANCELLED: "Cancelled",
+ READY_FOR_PICKUP: "Ready for Pickup",
+};
+
+export const mapOrderResponse = (data) => ({
+ id: data.id,
+ customerId: data.customerId,
+ status: data.status || "PENDING",
+ statusLabel: ORDER_STATUS_LABELS[data.status || "PENDING"] ?? (data.status || "PENDING"),
+ totalPrice: data.totalPrice || 0,
+ discount: data.discount || 0,
+ createdAt: data.createdAt || null,
+ // Stripe client secret — pass to Stripe.js to collect payment
+ stripeClientSecret: data.stripeClientSecret || null,
+ items: Array.isArray(data.items)
+ ? data.items.map((item) => ({
+ id: item.id,
+ mealId: item.mealId,
+ name: item.snapshotName || "",
+ price: item.snapshotPrice || 0,
+ quantity: item.quantity || 1,
+ }))
+ : [],
+});
+
+
// ── Live Kitchen Mappers ──────────────────────────────────────────
export const mapKitchenOrders = (data) => {
@@ -176,8 +213,13 @@ export const mapMenuItems = (data) => {
fat: item.fat || "0g",
sugar: item.sugar || "0g",
rating: item.rating || 0,
- status: item.status || "Active",
+ status: item.isActive !== undefined ? (item.isActive ? "Active" : "Inactive") : (item.status || "Active"),
image: item.image || null,
+ description: item.description || "",
+ hasDiscount: item.hasDiscount || false,
+ discountPercentage: item.discountPercentage || 0,
+ mealIngredients: item.mealIngredients || [],
+ ingredients: Array.isArray(item.ingredients) ? item.ingredients : (item.mealIngredients || []),
}));
};
@@ -207,7 +249,7 @@ export const mapIngredients = (data) => {
stock: item.stock || 0,
unit: item.unit || "unit",
costPerUnit: item.costPerUnit || "$0.00",
- status: item.status || "In Stock",
+ status: item.stock > 0 ? "In Stock" : "Out of Stock",
}));
};
diff --git a/src/store/authStore.js b/src/store/authStore.js
index 32bd6e3..e151ea0 100644
--- a/src/store/authStore.js
+++ b/src/store/authStore.js
@@ -46,7 +46,7 @@ const useAuthStore = create(
token: null,
expiresAt: null,
- isAuthenticated: false,
+ isAuthenticated: true,
loading: false,
error: null,
diff --git a/src/utils/sortItems.js b/src/utils/sortItems.js
new file mode 100644
index 0000000..cd5f981
--- /dev/null
+++ b/src/utils/sortItems.js
@@ -0,0 +1,57 @@
+/**
+ * sortItems
+ * ─────────────────────────────────────────
+ * Generic multi-column sort for dashboard tables.
+ * Handles both numeric values and numeric strings with units (e.g. "15g", "1.2k").
+ *
+ * @param {Array} items - Array of objects to sort (not mutated)
+ * @param {string|null} sortKey - Object key to sort by; null = unsorted
+ * @param {'asc'|'desc'} sortDir - Sort direction
+ * @param {Array} [columns] - Optional column config array; if the matching column
+ * has a `comparator(a, b)` function it will be used instead
+ * of the default numeric/string logic.
+ * @returns {Array} New sorted array
+ */
+export function sortItems(items, sortKey, sortDir, columns = []) {
+ if (!sortKey) return items;
+
+ // If the active column defines a custom comparator, delegate to it.
+ const colDef = columns.find((c) => c.key === sortKey);
+ if (colDef?.comparator) {
+ return [...items].sort((a, b) => {
+ const cmp = colDef.comparator(a, b);
+ return sortDir === "asc" ? cmp : -cmp;
+ });
+ }
+
+ return [...items].sort((a, b) => {
+ const av = a[sortKey] ?? "";
+ const bv = b[sortKey] ?? "";
+
+ const parseNum = (val) => {
+ if (typeof val === "number") return val;
+ const str = String(val).trim().toLowerCase();
+ // Recognise magnitude suffixes: 1.2k → 1200, 3.5m → 3500000, 2b → 2000000000
+ const suffixMatch = str.match(/^([\d.]+)\s*([kmb])$/);
+ if (suffixMatch) {
+ const n = parseFloat(suffixMatch[1]);
+ const multipliers = { k: 1_000, m: 1_000_000, b: 1_000_000_000 };
+ return n * (multipliers[suffixMatch[2]] ?? 1);
+ }
+ const match = str.match(/[\d.]+/);
+ return match ? parseFloat(match[0]) : NaN;
+ };
+
+ const aNum = parseNum(av);
+ const bNum = parseNum(bv);
+
+ let cmp;
+ if (!isNaN(aNum) && !isNaN(bNum)) {
+ cmp = aNum - bNum;
+ } else {
+ cmp = String(av).localeCompare(String(bv));
+ }
+
+ return sortDir === "asc" ? cmp : -cmp;
+ });
+}