);
}
export default RevenueChart;
-
diff --git a/src/components/Dashboard/StaffManagementView.jsx b/src/components/Dashboard/StaffManagementView.jsx
index 07e5ec0..dff6dbf 100644
--- a/src/components/Dashboard/StaffManagementView.jsx
+++ b/src/components/Dashboard/StaffManagementView.jsx
@@ -5,11 +5,23 @@ import { FiUserPlus, FiLock, FiMail, FiUser, FiBriefcase } from "react-icons/fi"
import useAuthStore from "../../store/authStore";
import { isSuperAdmin } from "../../utils/roleUtils";
import { createStaff, createAdmin } from "../../services/auth.service";
+import {
+ useActiveTickets,
+ useUpdateChefStatus,
+ useUpdateChefStation,
+ useUpdateChefDisplayName,
+} from "../../hooks/dashboard/useKitchenOrders";
+import { ChefManagement } from "./LiveKitchen/ChefManagement";
function StaffManagementView() {
const { user } = useAuthStore();
const isAdmin = isSuperAdmin(user);
+ const { data: tickets, isLoading: ticketsLoading, error: ticketsError } = useActiveTickets();
+ const { mutate: mutateChefStatus } = useUpdateChefStatus();
+ const { mutate: mutateChefStation } = useUpdateChefStation();
+ const { mutate: mutateChefName } = useUpdateChefDisplayName();
+
const [formData, setFormData] = useState({
firstName: "",
lastName: "",
@@ -33,10 +45,14 @@ function StaffManagementView() {
setIsSubmitting(true);
try {
- if (formData.role === "ADMIN") {
- await createAdmin(formData);
+ const payload = {
+ ...formData,
+ role: isAdmin ? formData.role : "CHEF",
+ };
+ if (payload.role === "ADMIN") {
+ await createAdmin(payload);
} else {
- await createStaff(formData);
+ await createStaff(payload);
}
toast.success("Staff member created successfully!");
setFormData({
@@ -53,21 +69,22 @@ function StaffManagementView() {
}
};
- // Managers can only create CHEF. Admins can create ADMIN, MANAGER, CHEF.
+ // Managers can only create CHEF (Chief). Admins can create ADMIN, MANAGER, CHEF.
const roleOptions = isAdmin
? [
- { value: "CHEF", label: "Chef" },
+ { value: "CHEF", label: "Chief (Chef)" },
{ value: "MANAGER", label: "Manager" },
{ value: "ADMIN", label: "Admin" },
]
- : [{ value: "CHEF", label: "Chef" }];
+ : [{ value: "CHEF", label: "Chief (Chef)" }];
return (
-
-
+
+
+
@@ -187,6 +204,19 @@ function StaffManagementView() {
+
+
+ {/* ══════════════════════════════════════════════════════
+ SECTION: Chef Management
+ ═══════════════════════════════════════════════════════ */}
+
);
diff --git a/src/components/Dashboard/shared/OrderDetailsModal.jsx b/src/components/Dashboard/shared/OrderDetailsModal.jsx
index f1dcee6..c4dd6fa 100644
--- a/src/components/Dashboard/shared/OrderDetailsModal.jsx
+++ b/src/components/Dashboard/shared/OrderDetailsModal.jsx
@@ -4,16 +4,18 @@ import StatusBadge from "./StatusBadge";
export default function OrderDetailsModal({ isOpen, onClose, order, showCustomerInfo }) {
if (!isOpen || !order) return null;
- // Handle parsing items: it might be an array of strings (Live Kitchen) or a comma-separated string (Orders view).
+ // Handle parsing items: it might be an array of objects (orderItems), array of strings (Live Kitchen), or a comma-separated string.
let dishesList = [];
- if (Array.isArray(order.items)) {
+ if (Array.isArray(order.orderItems) && order.orderItems.length > 0) {
+ dishesList = order.orderItems.map(item => `${item.quantity || 1}x ${item.name || "Item"}`);
+ } else if (Array.isArray(order.items)) {
dishesList = order.items;
- } else if (typeof order.name === 'string') {
+ } else if (typeof order.name === 'string' && order.name.includes(',')) {
dishesList = order.name.split(',').map(d => d.trim());
} else if (typeof order.items === 'string') {
dishesList = order.items.split(',').map(d => d.trim());
} else {
- dishesList = ["Custom Order"];
+ dishesList = [order.name || "Custom Order"];
}
// Fallback data for customer details if missing
diff --git a/src/components/Dashboard/shared/OrdersOverviewChart.jsx b/src/components/Dashboard/shared/OrdersOverviewChart.jsx
index a3c9971..732fbdc 100644
--- a/src/components/Dashboard/shared/OrdersOverviewChart.jsx
+++ b/src/components/Dashboard/shared/OrdersOverviewChart.jsx
@@ -14,7 +14,7 @@ const CustomTooltip = ({ active, payload, label }) => {
return null;
};
-function OrdersOverviewChart({ data }) {
+function OrdersOverviewChart({ data, period = "This Week", onPeriodChange }) {
const maxValue = Math.max(...data.map(d => d.orders));
return (
@@ -28,7 +28,7 @@ function OrdersOverviewChart({ data }) {
-
+
diff --git a/src/components/auth/StepTwo.jsx b/src/components/auth/StepTwo.jsx
index 51d280e..5887aa8 100644
--- a/src/components/auth/StepTwo.jsx
+++ b/src/components/auth/StepTwo.jsx
@@ -48,8 +48,8 @@ function StepTwo({ formData, onChange, onNext, onBack, error }) {
{" "}
Male
@@ -58,8 +58,8 @@ function StepTwo({ formData, onChange, onNext, onBack, error }) {
{" "}
Female
@@ -77,7 +77,7 @@ function StepTwo({ formData, onChange, onNext, onBack, error }) {
type="radio"
name="exercisesRegularly"
value="true"
- checked={formData.exercisesRegularly === "true"}
+ checked={formData.exercisesRegularly === "true" || formData.exercisesRegularly === true}
onChange={onChange}
/>{" "}
Yes
@@ -87,7 +87,7 @@ function StepTwo({ formData, onChange, onNext, onBack, error }) {
type="radio"
name="exercisesRegularly"
value="false"
- checked={formData.exercisesRegularly === "false"}
+ checked={formData.exercisesRegularly === "false" || formData.exercisesRegularly === false}
onChange={onChange}
/>{" "}
No
@@ -101,20 +101,20 @@ function StepTwo({ formData, onChange, onNext, onBack, error }) {
{[
- "Lose Weight",
- "Gain Weight",
- "Build Muscle",
- "Maintain Current Shape",
+ { value: "LOSE_WEIGHT", label: "Lose Weight" },
+ { value: "GAIN_WEIGHT", label: "Gain Weight" },
+ { value: "BUILD_MUSCLE", label: "Build Muscle" },
+ { value: "MAINTAIN_SHAPE", label: "Maintain Shape" },
].map((g) => (
-
diff --git a/src/components/ui/AllergiesDropdown.jsx b/src/components/ui/AllergiesDropdown.jsx
index 578a899..69cce26 100644
--- a/src/components/ui/AllergiesDropdown.jsx
+++ b/src/components/ui/AllergiesDropdown.jsx
@@ -2,12 +2,12 @@ import { HEALTH_CONDITIONS } from "../../constants";
function AllergiesDropdown({ selected = [], onChange }) {
const handleToggle = (option) => {
- if (option === "None") {
- onChange(["None"]);
+ if (option === "NONE" || option === "None") {
+ onChange(["NONE"]);
return;
}
- const withoutNone = selected.filter((s) => s !== "None");
+ const withoutNone = selected.filter((s) => s !== "NONE" && s !== "None");
if (withoutNone.includes(option)) {
onChange(withoutNone.filter((s) => s !== option));
@@ -24,20 +24,24 @@ function AllergiesDropdown({ selected = [], onChange }) {
diff --git a/src/constants.js b/src/constants.js
index 6153f56..3c55dcd 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -40,17 +40,25 @@ export const CURRENCY_FORMAT = "POST";
// Allergy and health condition options for user profiles
export const HEALTH_CONDITIONS = [
- "Diabetes",
- "High blood pressure",
- "High cholesterol",
- "Kidney or liver condition",
- "Gluten intolerance / Celiac",
- "Lactose intolerance",
- ];
+ { value: "NONE", label: "None" },
+ { value: "DIABETES", label: "Diabetes" },
+ { value: "HIGH_BLOOD_PRESSURE", label: "High blood pressure" },
+ { value: "HIGH_CHOLESTEROL", label: "High cholesterol" },
+ { value: "GLUTEN_INTOLERANCE", label: "Gluten intolerance / Celiac" },
+ { value: "LACTOSE_INTOLERANCE", label: "Lactose intolerance" },
+ { value: "THYROID_DISORDER", label: "Thyroid disorder" },
+ { value: "KIDNEY_OR_LIVER_CONDITION", label: "Kidney or liver condition" },
+ { value: "OTHER", label: "Other" },
+];
// --- Health Profile Options ---
export const GENDER_OPTIONS = ["MALE", "FEMALE", "OTHER"];
-export const GOAL_OPTIONS = ["LOSE_WEIGHT", "MAINTAIN", "GAIN_MUSCLE"];
+export const GOAL_OPTIONS = [
+ "LOSE_WEIGHT",
+ "GAIN_WEIGHT",
+ "BUILD_MUSCLE",
+ "MAINTAIN_SHAPE",
+];
export const HEIGHT_UNITS = ["m", "ft", "cm", "in"];
export const WEIGHT_UNITS = ["kg", "lb"];
diff --git a/src/hooks/dashboard/useDashboard.js b/src/hooks/dashboard/useDashboard.js
index 9569eb6..4615c3e 100644
--- a/src/hooks/dashboard/useDashboard.js
+++ b/src/hooks/dashboard/useDashboard.js
@@ -15,7 +15,7 @@ export const dashboardKeys = {
metrics: () => ["dashboard", "metrics"],
revenue: (period) => ["dashboard", "revenue", period],
categories: () => ["dashboard", "categories"],
- ordersOverview: () => ["dashboard", "orders-overview"],
+ ordersOverview: (period) => ["dashboard", "orders-overview", period],
orderTypes: () => ["dashboard", "order-types"],
trending: () => ["dashboard", "trending"],
inventory: () => ["dashboard", "inventory"],
@@ -35,8 +35,8 @@ export function useTopCategories() {
return useQuery({ queryKey: dashboardKeys.categories(), queryFn: getTopCategories });
}
-export function useOrdersOverview() {
- return useQuery({ queryKey: dashboardKeys.ordersOverview(), queryFn: getOrdersOverview });
+export function useOrdersOverview(period = "This Week") {
+ return useQuery({ queryKey: dashboardKeys.ordersOverview(period), queryFn: () => getOrdersOverview(period) });
}
export function useOrderTypes() {
diff --git a/src/hooks/dashboard/useKitchenOrders.js b/src/hooks/dashboard/useKitchenOrders.js
index 4dd1f9b..8337d1b 100644
--- a/src/hooks/dashboard/useKitchenOrders.js
+++ b/src/hooks/dashboard/useKitchenOrders.js
@@ -88,7 +88,11 @@ export function useUpdateKitchenStatus() {
// Find the column the order is currently in
for (const col of ["queue", "preparing", "ready", "done"]) {
- idx = next[col].findIndex((o) => o.id === orderId);
+ idx = next[col].findIndex(
+ (o) =>
+ String(o.id).replace("#", "") === String(orderId).replace("#", "") ||
+ String(o.orderId) === String(orderId).replace("#", "")
+ );
if (idx !== -1) {
foundCol = col;
break;
diff --git a/src/pages/Profile/Profile.jsx b/src/pages/Profile/Profile.jsx
index 7587190..15a1197 100644
--- a/src/pages/Profile/Profile.jsx
+++ b/src/pages/Profile/Profile.jsx
@@ -1,29 +1,102 @@
import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router";
import ProfileHeader from "./components/ProfileHeader";
import InfoGrid from "./components/InfoGrid";
import HealthForm from "./components/HealthForm";
import { useProfileStore } from "../../store";
import { toast } from "sonner";
+import { LuCamera, LuTrash2, LuUpload } from "react-icons/lu";
export default function Profile() {
+ const navigate = useNavigate();
const user = useProfileStore((s) => s.user);
const fetchProfile = useProfileStore((s) => s.fetchProfile);
const updateHealth = useProfileStore((s) => s.updateHealth);
+ const uploadProfilePicture = useProfileStore((s) => s.uploadProfilePicture);
+ const deleteProfilePicture = useProfileStore((s) => s.deleteProfilePicture);
+ const deleteAccount = useProfileStore((s) => s.deleteAccount);
+
const [editing, setEditing] = useState(false);
const [saving, setSaving] = useState(false);
- const formattedJoinDate = user?.createdAt
- ? new Date(user.createdAt).toLocaleDateString("en-GB", {
- day: "2-digit",
- month: "short",
- year: "numeric",
- })
- : "-";
+ // Picture upload/delete state
+ const [selectedFile, setSelectedFile] = useState(null);
+ const [previewUrl, setPreviewUrl] = useState(null);
+ const [uploadingPic, setUploadingPic] = useState(false);
+ const [showDeletePicModal, setShowDeletePicModal] = useState(false);
+ const [deletingPic, setDeletingPic] = useState(false);
+
+ // Account deletion modal state
+ const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false);
+ const [deletingAccount, setDeletingAccount] = useState(false);
+
+ const rawJoinDate =
+ user?.createdAt ||
+ user?.createdDate ||
+ user?.joinDate ||
+ user?.registrationDate ||
+ new Date();
+
+ const formattedJoinDate = new Date(rawJoinDate).toLocaleDateString("en-GB", {
+ day: "2-digit",
+ month: "short",
+ year: "numeric",
+ });
useEffect(() => {
fetchProfile();
}, [fetchProfile]);
+ const handleFileChange = (e) => {
+ const file = e.target.files?.[0];
+ if (file) {
+ setSelectedFile(file);
+ setPreviewUrl(URL.createObjectURL(file));
+ }
+ };
+
+ const handleUploadPicture = async () => {
+ if (!selectedFile) return;
+ setUploadingPic(true);
+ try {
+ await uploadProfilePicture(selectedFile);
+ toast.success("Profile picture updated successfully.");
+ setSelectedFile(null);
+ setPreviewUrl(null);
+ } catch (err) {
+ toast.error(err?.message || "Failed to upload profile picture.");
+ } finally {
+ setUploadingPic(false);
+ }
+ };
+
+ const handleDeletePicture = async () => {
+ setDeletingPic(true);
+ try {
+ await deleteProfilePicture();
+ toast.success("Profile picture removed successfully.");
+ setShowDeletePicModal(false);
+ } catch (err) {
+ toast.error(err?.message || "Failed to remove profile picture.");
+ } finally {
+ setDeletingPic(false);
+ }
+ };
+
+ const handleDeleteAccount = async () => {
+ setDeletingAccount(true);
+ try {
+ await deleteAccount();
+ toast.success("Account deleted successfully.");
+ setShowDeleteAccountModal(false);
+ navigate("/auth/login");
+ } catch (err) {
+ toast.error(err?.message || "Failed to delete account.");
+ } finally {
+ setDeletingAccount(false);
+ }
+ };
+
return (
+ {/* Picture Management Bar */}
+
+
+
+ {previewUrl ? (
+
+ ) : user?.profilePictureUrl || user?.avatar ? (
+
{
+ e.target.onerror = null;
+ e.target.src = "/images/avatar-placeholder.jpeg";
+ }}
+ />
+ ) : (
+
+ )}
+
+
+
Profile Photo
+
Update or remove your account photo
+
+
+
+
+
+
+ {selectedFile && (
+
+ )}
+
+ {(user?.profilePictureUrl || user?.avatar) && (
+
+ )}
+
+
+
{!editing ? (
@@ -60,6 +194,78 @@ export default function Profile() {
saving={saving}
/>
)}
+
+
+
+ {/* Account Deletion Section */}
+
+
+
Delete Account
+
+ Permanently delete your account and all associated profile data.
+
+
+
+
+
+ {/* Modal: Delete Profile Picture */}
+ {showDeletePicModal && (
+
+
+
Remove Photo
+
+ Are you sure you want to remove your profile picture? It will revert to the default avatar.
+
+
+
+
+
+
+
+ )}
+
+ {/* Modal: Delete Account */}
+ {showDeleteAccountModal && (
+
+
+
Delete Account
+
+ Are you sure you want to permanently delete your account? This action cannot be undone. All your profile data, order history, and rewards will be deleted.
+
+
+
+
+
+
+
+ )}
);
}
diff --git a/src/pages/Profile/Profile.test.jsx b/src/pages/Profile/Profile.test.jsx
index 3ce2280..4aa953b 100644
--- a/src/pages/Profile/Profile.test.jsx
+++ b/src/pages/Profile/Profile.test.jsx
@@ -15,11 +15,17 @@ vi.mock("../../store", () => ({
}),
}));
+import { MemoryRouter } from "react-router";
+
describe("Profile", () => {
it("renders the join date from the profile data", () => {
- render(
);
+ render(
+
+
+
+ );
expect(screen.getByText(/Join date/i)).toBeTruthy();
- expect(screen.getByText(/2024-01-15/i)).toBeTruthy();
+ expect(screen.getByText(/15 Jan 2024/i)).toBeTruthy();
});
});
diff --git a/src/pages/Profile/ProfileLayout.jsx b/src/pages/Profile/ProfileLayout.jsx
index 9be9237..53164d3 100644
--- a/src/pages/Profile/ProfileLayout.jsx
+++ b/src/pages/Profile/ProfileLayout.jsx
@@ -1,7 +1,7 @@
import React, { useEffect } from "react";
import { Outlet } from "react-router";
import Sidebar from "./components/Sidebar";
-import { useProfileStore } from "../../store";
+import { useProfileStore, useAuthStore } from "../../store";
import { LoadingSpinner } from "../../components";
import {
LuClipboard,
@@ -13,7 +13,7 @@ import {
import { useShallow } from "zustand/shallow";
export default function ProfileLayout() {
-
+ const authUser = useAuthStore((state) => state.user) || {};
const { user, loading, error, fetchProfile } = useProfileStore(
useShallow((state) => ({
user: state.user,
@@ -41,25 +41,43 @@ export default function ProfileLayout() {
);
}
- if (error) {
- return (
-
- Error: {error}
-
- );
- }
-
if (!user) {
return (
-
- No profile data available.
+
+
+
+ Profile Not Found
+
+
+ Your profile appears to have been deleted or does not exist.
+
+
+
);
}
- const displayName = user?.name || user?.fullName || "Your Name";
+ const displayName =
+ authUser?.fullName ||
+ authUser?.name ||
+ [authUser?.firstName, authUser?.lastName].filter(Boolean).join(" ") ||
+ user?.name ||
+ user?.fullName ||
+ [user?.firstName, user?.lastName].filter(Boolean).join(" ") ||
+ "Your Name";
const avatar =
- user?.avatar || user?.photo || "/images/avatar-placeholder.jpeg";
+ authUser?.profilePictureUrl ||
+ authUser?.avatar ||
+ authUser?.photo ||
+ user?.profilePictureUrl ||
+ user?.avatar ||
+ user?.photo ||
+ "/images/avatar-placeholder.jpeg";
const sidebarLinks = [
{
diff --git a/src/pages/Profile/ProfileOrders.jsx b/src/pages/Profile/ProfileOrders.jsx
index beb01b1..4ac6bba 100644
--- a/src/pages/Profile/ProfileOrders.jsx
+++ b/src/pages/Profile/ProfileOrders.jsx
@@ -34,19 +34,6 @@ export default function Orders() {
}))
);
- useEffect(() => {
- fetchMyOrders();
- }, [fetchMyOrders]);
-
- useEffect(() => {
- if (trackingOrder) {
- const interval = setInterval(() => {
- fetchMyOrders();
- }, 5000);
- return () => clearInterval(interval);
- }
- }, [trackingOrder, fetchMyOrders]);
-
const mergedOrdersList = useMemo(
() => getMergedOrders(),
[getMergedOrders, myOrders, lastOrder]
@@ -62,6 +49,19 @@ export default function Orders() {
[getTrackingOrder, myOrders, lastOrder]
);
+ useEffect(() => {
+ fetchMyOrders();
+ }, [fetchMyOrders]);
+
+ useEffect(() => {
+ if (trackingOrder) {
+ const interval = setInterval(() => {
+ fetchMyOrders();
+ }, 5000);
+ return () => clearInterval(interval);
+ }
+ }, [trackingOrder, fetchMyOrders]);
+
const handleCancelOrder = async (orderId) => {
const result = await cancelMyOrder(orderId);
if (result?.ok) {
diff --git a/src/pages/Profile/components/HealthForm.jsx b/src/pages/Profile/components/HealthForm.jsx
index 09e3ff5..c89245f 100644
--- a/src/pages/Profile/components/HealthForm.jsx
+++ b/src/pages/Profile/components/HealthForm.jsx
@@ -23,31 +23,63 @@ export default function HealthForm({ initial = {}, onCancel, onSave, saving }) {
phoneNumber: initial.phoneNumber || "",
});
- const [phoneError, setPhoneError] = useState("");
+ const [errors, setErrors] = useState({ phone: "", age: "", height: "", weight: "" });
const update = (field) => (e) => {
const value =
e.target.type === "checkbox" ? e.target.checked : e.target.value;
setForm((s) => ({ ...s, [field]: value }));
+ setErrors((prev) => ({ ...prev, [field]: "" }));
};
const submit = () => {
- if (form.phoneNumber && !egyptianPhoneRegex.test(form.phoneNumber.trim())) {
- setPhoneError(
- "Please enter a valid Egyptian phone number (e.g. 01012345678)",
- );
+ const newErrors = { phone: "", age: "", height: "", weight: "" };
+ let hasError = false;
+
+ if (form.phoneNumber && !egyptianPhoneRegex.test(String(form.phoneNumber).trim())) {
+ newErrors.phone = "Please enter a valid Egyptian phone number (e.g. 01012345678)";
+ hasError = true;
+ }
+
+ if (form.age !== "" && form.age !== null) {
+ const ageNum = Number(form.age);
+ if (isNaN(ageNum) || ageNum < 1 || ageNum > 120) {
+ newErrors.age = "Age must be between 1 and 120";
+ hasError = true;
+ }
+ }
+
+ if (form.height !== "" && form.height !== null) {
+ const heightNum = Number(form.height);
+ if (isNaN(heightNum) || heightNum < 30 || heightNum > 300) {
+ newErrors.height = "Height must be between 30 and 300";
+ hasError = true;
+ }
+ }
+
+ if (form.weight !== "" && form.weight !== null) {
+ const weightNum = Number(form.weight);
+ if (isNaN(weightNum) || weightNum < 10 || weightNum > 400) {
+ newErrors.weight = "Weight must be between 10 and 400";
+ hasError = true;
+ }
+ }
+
+ if (hasError) {
+ setErrors(newErrors);
return;
}
- setPhoneError("");
+ setErrors({ phone: "", age: "", height: "", weight: "" });
const payload = {
+ ...(initial || {}),
age: form.age === "" ? null : Number(form.age),
gender: form.gender || null,
exercisesRegularly: !!form.exercisesRegularly,
height: form.height === "" ? null : Number(form.height),
- heightUnit: form.heightUnit || null,
+ heightUnit: form.heightUnit || "cm",
weight: form.weight === "" ? null : Number(form.weight),
- weightUnit: form.weightUnit || null,
+ weightUnit: form.weightUnit || "kg",
goal: form.goal || null,
healthConditions: form.healthConditions || [],
phoneNumber: form.phoneNumber?.trim() || null,
@@ -59,6 +91,7 @@ export default function HealthForm({ initial = {}, onCancel, onSave, saving }) {
return (
+
+ {errors.age && (
+
{errors.age}
+ )}
@@ -94,19 +133,15 @@ export default function HealthForm({ initial = {}, onCancel, onSave, saving }) {
{
- update("phoneNumber")(e);
- setPhoneError("");
- }}
+ onChange={update("phoneNumber")}
placeholder="01012345678"
- className={`w-full mt-1 px-3 py-2 text-sm border rounded-xl bg-gray-50 focus:bg-white focus:ring-2 outline-none transition-all ${
- phoneError
+ className={`w-full mt-1 px-3 py-2 text-sm border rounded-xl bg-gray-50 focus:bg-white focus:ring-2 outline-none transition-all ${errors.phone
? "border-red-400 focus:border-red-400 focus:ring-red-100"
: "border-gray-200 focus:border-green-400 focus:ring-green-100"
- }`}
+ }`}
/>
- {phoneError && (
-
{phoneError}
+ {errors.phone && (
+
{errors.phone}
)}
@@ -118,7 +153,10 @@ export default function HealthForm({ initial = {}, onCancel, onSave, saving }) {
min="0"
value={form.height}
onChange={update("height")}
- className="flex-1 px-3 py-2 text-sm border border-gray-200 rounded-xl bg-gray-50 focus:bg-white focus:border-green-400 focus:ring-2 focus:ring-green-100 outline-none transition-all"
+ className={`flex-1 px-3 py-2 text-sm border rounded-xl bg-gray-50 focus:bg-white focus:ring-2 outline-none transition-all ${errors.height
+ ? "border-red-400 focus:border-red-400 focus:ring-red-100"
+ : "border-gray-200 focus:border-green-400 focus:ring-green-100"
+ }`}
/>
+ {errors.height && (
+
{errors.height}
+ )}
@@ -142,7 +183,10 @@ export default function HealthForm({ initial = {}, onCancel, onSave, saving }) {
type="number"
value={form.weight}
onChange={update("weight")}
- className="flex-1 px-3 py-2 text-sm border border-gray-200 rounded-xl bg-gray-50 focus:bg-white focus:border-green-400 focus:ring-2 focus:ring-green-100 outline-none transition-all"
+ className={`flex-1 px-3 py-2 text-sm border rounded-xl bg-gray-50 focus:bg-white focus:ring-2 outline-none transition-all ${errors.weight
+ ? "border-red-400 focus:border-red-400 focus:ring-red-100"
+ : "border-gray-200 focus:border-green-400 focus:ring-green-100"
+ }`}
/>
+ {errors.weight && (
+
{errors.weight}
+ )}
@@ -184,10 +231,12 @@ export default function HealthForm({ initial = {}, onCancel, onSave, saving }) {
{HEALTH_CONDITIONS.map((option, index) => {
- const checked = form.healthConditions.includes(option);
+ const val = typeof option === "object" ? option.value : option;
+ const lbl = typeof option === "object" ? option.label : option;
+ const checked = (form.healthConditions || []).includes(val);
return (
);
})}
@@ -230,14 +277,12 @@ export default function HealthForm({ initial = {}, onCancel, onSave, saving }) {
}))
}
aria-pressed={!!form.exercisesRegularly}
- className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
- form.exercisesRegularly ? "bg-green-500" : "bg-gray-200"
- }`}
+ className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${form.exercisesRegularly ? "bg-green-500" : "bg-gray-200"
+ }`}
>