fraqtal/meal-planner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: order sidebar select

Browse Source
This commit is contained in:
Danijel Martinek
2025-12-02 15:40:53 +01:00
parent cd254d95f4
commit a57cf5de5b
1 changed files with 365 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

470
src/app/(app)/caregiver/orders/[id]/page.tsx
View File

@@ -211,6 +211,181 @@ const defaultDinner: DinnerOptions = {
additions: { sugar: false, sweetener: false }, additions: { sugar: false, sweetener: false },
} }
// ============================================
// MEAL OPTIONS CONFIGURATION
// ============================================
interface OptionItem {
key: string
label: string
}
interface OptionSection {
title: string
columns: 1 | 2 | 3
options: OptionItem[]
}
// Breakfast configuration
const breakfastConfig: Record<string, OptionSection> = {
bread: {
title: 'Bread (Brot)',
columns: 2,
options: [
{ key: 'breadRoll', label: 'Bread Roll' },
{ key: 'wholeGrainRoll', label: 'Whole Grain Roll' },
{ key: 'greyBread', label: 'Grey Bread' },
{ key: 'wholeGrainBread', label: 'Whole Grain' },
{ key: 'whiteBread', label: 'White Bread' },
{ key: 'crispbread', label: 'Crispbread' },
],
},
preparation: {
title: 'Preparation',
columns: 3,
options: [
{ key: 'porridge', label: 'Porridge' },
{ key: 'sliced', label: 'Sliced' },
{ key: 'spread', label: 'Spread' },
],
},
spreads: {
title: 'Spreads',
columns: 2,
options: [
{ key: 'butter', label: 'Butter' },
{ key: 'margarine', label: 'Margarine' },
{ key: 'jam', label: 'Jam' },
{ key: 'diabeticJam', label: 'Diabetic Jam' },
{ key: 'honey', label: 'Honey' },
{ key: 'cheese', label: 'Cheese' },
{ key: 'quark', label: 'Quark' },
{ key: 'sausage', label: 'Sausage' },
],
},
beverages: {
title: 'Beverages',
columns: 2,
options: [
{ key: 'coffee', label: 'Coffee' },
{ key: 'tea', label: 'Tea' },
{ key: 'hotMilk', label: 'Hot Milk' },
{ key: 'coldMilk', label: 'Cold Milk' },
],
},
additions: {
title: 'Additions',
columns: 3,
options: [
{ key: 'sugar', label: 'Sugar' },
{ key: 'sweetener', label: 'Sweetener' },
{ key: 'coffeeCreamer', label: 'Creamer' },
],
},
}
// Lunch configuration
const lunchConfig = {
portionSizes: [
{ value: 'small', label: 'Small' },
{ value: 'large', label: 'Large' },
{ value: 'vegetarian', label: 'Vegetarian' },
] as const,
mealOptions: {
title: 'Meal Options',
columns: 2 as const,
options: [
{ key: 'soup', label: 'Soup' },
{ key: 'dessert', label: 'Dessert' },
],
},
specialPreparations: {
title: 'Special Preparations',
columns: 2 as const,
options: [
{ key: 'pureedFood', label: 'Pureed Food' },
{ key: 'pureedMeat', label: 'Pureed Meat' },
{ key: 'slicedMeat', label: 'Sliced Meat' },
{ key: 'mashedPotatoes', label: 'Mashed Potatoes' },
],
},
restrictions: {
title: 'Restrictions',
columns: 3 as const,
options: [
{ key: 'noFish', label: 'No Fish' },
{ key: 'fingerFood', label: 'Finger Food' },
{ key: 'onlySweet', label: 'Only Sweet' },
],
},
}
// Dinner configuration
const dinnerConfig: Record<string, OptionSection> = {
bread: {
title: 'Bread',
columns: 2,
options: [
{ key: 'greyBread', label: 'Grey Bread' },
{ key: 'wholeGrainBread', label: 'Whole Grain' },
{ key: 'whiteBread', label: 'White Bread' },
{ key: 'crispbread', label: 'Crispbread' },
],
},
preparation: {
title: 'Preparation',
columns: 2,
options: [
{ key: 'spread', label: 'Spread' },
{ key: 'sliced', label: 'Sliced' },
],
},
spreads: {
title: 'Spreads',
columns: 2,
options: [
{ key: 'butter', label: 'Butter' },
{ key: 'margarine', label: 'Margarine' },
],
},
additionalItems: {
title: 'Additional Items',
columns: 3,
options: [
{ key: 'soup', label: 'Soup' },
{ key: 'porridge', label: 'Porridge' },
{ key: 'noFish', label: 'No Fish' },
],
},
beverages: {
title: 'Beverages',
columns: 2,
options: [
{ key: 'tea', label: 'Tea' },
{ key: 'cocoa', label: 'Cocoa' },
{ key: 'hotMilk', label: 'Hot Milk' },
{ key: 'coldMilk', label: 'Cold Milk' },
],
},
additions: {
title: 'Additions',
columns: 2,
options: [
{ key: 'sugar', label: 'Sugar' },
{ key: 'sweetener', label: 'Sweetener' },
],
},
}
// Helper to get grid columns class
const getGridCols = (cols: 1 | 2 | 3) => {
switch (cols) {
case 1: return 'grid-cols-1'
case 2: return 'grid-cols-1 sm:grid-cols-2'
case 3: return 'grid-cols-1 sm:grid-cols-3'
}
}
function CheckboxOption({ function CheckboxOption({
id, id,
label, label,
@@ -978,8 +1153,8 @@ export default function OrderDetailPage() {
{/* Meal Form Sheet */} {/* Meal Form Sheet */}
<Sheet open={showMealForm} onOpenChange={setShowMealForm}> <Sheet open={showMealForm} onOpenChange={setShowMealForm}>
<SheetContent className="sm:max-w-xl flex flex-col h-full p-0"> <SheetContent className="w-full sm:max-w-xl flex flex-col h-full p-0" side="right">
<SheetHeader className="px-6 pt-6 pb-4 border-b"> <SheetHeader className="px-4 sm:px-6 pt-6 pb-4 border-b">
<SheetTitle> <SheetTitle>
{editingMeal ? 'Edit' : 'Add'} {getMealTypeLabel(order.mealType)} Meal {editingMeal ? 'Edit' : 'Add'} {getMealTypeLabel(order.mealType)} Meal
</SheetTitle> </SheetTitle>
@@ -988,7 +1163,7 @@ export default function OrderDetailPage() {
</SheetDescription> </SheetDescription>
</SheetHeader> </SheetHeader>
<div className="flex-1 overflow-y-auto px-6 py-4 space-y-6"> <div className="flex-1 overflow-y-auto px-4 sm:px-6 py-4 space-y-6">
{/* Image Upload Section */} {/* Image Upload Section */}
{isDraft && ( {isDraft && (
<div className="space-y-3"> <div className="space-y-3">
@@ -1125,67 +1300,100 @@ export default function OrderDetailPage() {
/> />
</div> </div>
{/* Bread */}
<Separator /> <Separator />
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Bread (Brot)</h3> <h3 className="font-semibold">{breakfastConfig.bread.title}</h3>
<div className="grid gap-2 grid-cols-2"> <div className={cn('grid gap-2', getGridCols(breakfastConfig.bread.columns))}>
<CheckboxOption id="breadRoll" label="Bread Roll" checked={breakfast.bread.breadRoll} onCheckedChange={(v) => setBreakfast({ ...breakfast, bread: { ...breakfast.bread, breadRoll: v } })} /> {breakfastConfig.bread.options.map(({ key, label }) => (
<CheckboxOption id="wholeGrainRoll" label="Whole Grain Roll" checked={breakfast.bread.wholeGrainRoll} onCheckedChange={(v) => setBreakfast({ ...breakfast, bread: { ...breakfast.bread, wholeGrainRoll: v } })} /> <CheckboxOption
<CheckboxOption id="greyBread" label="Grey Bread" checked={breakfast.bread.greyBread} onCheckedChange={(v) => setBreakfast({ ...breakfast, bread: { ...breakfast.bread, greyBread: v } })} /> key={key}
<CheckboxOption id="wholeGrainBread" label="Whole Grain" checked={breakfast.bread.wholeGrainBread} onCheckedChange={(v) => setBreakfast({ ...breakfast, bread: { ...breakfast.bread, wholeGrainBread: v } })} /> id={`breakfast-bread-${key}`}
<CheckboxOption id="whiteBread" label="White Bread" checked={breakfast.bread.whiteBread} onCheckedChange={(v) => setBreakfast({ ...breakfast, bread: { ...breakfast.bread, whiteBread: v } })} /> label={label}
<CheckboxOption id="crispbread" label="Crispbread" checked={breakfast.bread.crispbread} onCheckedChange={(v) => setBreakfast({ ...breakfast, bread: { ...breakfast.bread, crispbread: v } })} /> checked={breakfast.bread[key as keyof typeof breakfast.bread]}
onCheckedChange={(v) => setBreakfast({ ...breakfast, bread: { ...breakfast.bread, [key]: v } })}
/>
))}
</div> </div>
</div> </div>
{/* Preparation */}
<Separator /> <Separator />
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Preparation</h3> <h3 className="font-semibold">{breakfastConfig.preparation.title}</h3>
<div className="grid gap-2 grid-cols-3"> <div className={cn('grid gap-2', getGridCols(breakfastConfig.preparation.columns))}>
<CheckboxOption id="porridge" label="Porridge" checked={breakfast.porridge} onCheckedChange={(v) => setBreakfast({ ...breakfast, porridge: v })} /> {breakfastConfig.preparation.options.map(({ key, label }) => {
<CheckboxOption id="sliced" label="Sliced" checked={breakfast.preparation.sliced} onCheckedChange={(v) => setBreakfast({ ...breakfast, preparation: { ...breakfast.preparation, sliced: v } })} /> const isTopLevel = key === 'porridge'
<CheckboxOption id="spread" label="Spread" checked={breakfast.preparation.spread} onCheckedChange={(v) => setBreakfast({ ...breakfast, preparation: { ...breakfast.preparation, spread: v } })} /> const checked = isTopLevel
? breakfast.porridge
: breakfast.preparation[key as keyof typeof breakfast.preparation]
return (
<CheckboxOption
key={key}
id={`breakfast-prep-${key}`}
label={label}
checked={checked}
onCheckedChange={(v) => {
if (isTopLevel) {
setBreakfast({ ...breakfast, porridge: v })
} else {
setBreakfast({ ...breakfast, preparation: { ...breakfast.preparation, [key]: v } })
}
}}
/>
)
})}
</div> </div>
</div> </div>
{/* Spreads */}
<Separator /> <Separator />
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Spreads</h3> <h3 className="font-semibold">{breakfastConfig.spreads.title}</h3>
<div className="grid gap-2 grid-cols-2"> <div className={cn('grid gap-2', getGridCols(breakfastConfig.spreads.columns))}>
<CheckboxOption id="butter" label="Butter" checked={breakfast.spreads.butter} onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, butter: v } })} /> {breakfastConfig.spreads.options.map(({ key, label }) => (
<CheckboxOption id="margarine" label="Margarine" checked={breakfast.spreads.margarine} onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, margarine: v } })} /> <CheckboxOption
<CheckboxOption id="jam" label="Jam" checked={breakfast.spreads.jam} onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, jam: v } })} /> key={key}
<CheckboxOption id="diabeticJam" label="Diabetic Jam" checked={breakfast.spreads.diabeticJam} onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, diabeticJam: v } })} /> id={`breakfast-spread-${key}`}
<CheckboxOption id="honey" label="Honey" checked={breakfast.spreads.honey} onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, honey: v } })} /> label={label}
<CheckboxOption id="cheese" label="Cheese" checked={breakfast.spreads.cheese} onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, cheese: v } })} /> checked={breakfast.spreads[key as keyof typeof breakfast.spreads]}
<CheckboxOption id="quark" label="Quark" checked={breakfast.spreads.quark} onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, quark: v } })} /> onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, [key]: v } })}
<CheckboxOption id="sausage" label="Sausage" checked={breakfast.spreads.sausage} onCheckedChange={(v) => setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, sausage: v } })} /> />
))}
</div> </div>
</div> </div>
{/* Beverages */}
<Separator /> <Separator />
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Beverages</h3> <h3 className="font-semibold">{breakfastConfig.beverages.title}</h3>
<div className="grid gap-2 grid-cols-2"> <div className={cn('grid gap-2', getGridCols(breakfastConfig.beverages.columns))}>
<CheckboxOption id="coffee" label="Coffee" checked={breakfast.beverages.coffee} onCheckedChange={(v) => setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, coffee: v } })} /> {breakfastConfig.beverages.options.map(({ key, label }) => (
<CheckboxOption id="tea" label="Tea" checked={breakfast.beverages.tea} onCheckedChange={(v) => setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, tea: v } })} /> <CheckboxOption
<CheckboxOption id="hotMilk" label="Hot Milk" checked={breakfast.beverages.hotMilk} onCheckedChange={(v) => setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, hotMilk: v } })} /> key={key}
<CheckboxOption id="coldMilk" label="Cold Milk" checked={breakfast.beverages.coldMilk} onCheckedChange={(v) => setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, coldMilk: v } })} /> id={`breakfast-bev-${key}`}
label={label}
checked={breakfast.beverages[key as keyof typeof breakfast.beverages]}
onCheckedChange={(v) => setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, [key]: v } })}
/>
))}
</div> </div>
</div> </div>
{/* Additions */}
<Separator /> <Separator />
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Additions</h3> <h3 className="font-semibold">{breakfastConfig.additions.title}</h3>
<div className="grid gap-2 grid-cols-3"> <div className={cn('grid gap-2', getGridCols(breakfastConfig.additions.columns))}>
<CheckboxOption id="sugar" label="Sugar" checked={breakfast.additions.sugar} onCheckedChange={(v) => setBreakfast({ ...breakfast, additions: { ...breakfast.additions, sugar: v } })} /> {breakfastConfig.additions.options.map(({ key, label }) => (
<CheckboxOption id="sweetener" label="Sweetener" checked={breakfast.additions.sweetener} onCheckedChange={(v) => setBreakfast({ ...breakfast, additions: { ...breakfast.additions, sweetener: v } })} /> <CheckboxOption
<CheckboxOption id="coffeeCreamer" label="Creamer" checked={breakfast.additions.coffeeCreamer} onCheckedChange={(v) => setBreakfast({ ...breakfast, additions: { ...breakfast.additions, coffeeCreamer: v } })} /> key={key}
id={`breakfast-add-${key}`}
label={label}
checked={breakfast.additions[key as keyof typeof breakfast.additions]}
onCheckedChange={(v) => setBreakfast({ ...breakfast, additions: { ...breakfast.additions, [key]: v } })}
/>
))}
</div> </div>
</div> </div>
</> </>
@@ -1194,63 +1402,78 @@ export default function OrderDetailPage() {
{/* LUNCH OPTIONS */} {/* LUNCH OPTIONS */}
{order.mealType === 'lunch' && ( {order.mealType === 'lunch' && (
<> <>
{/* Portion Size */}
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Portion Size</h3> <h3 className="font-semibold">Portion Size</h3>
<RadioGroup <RadioGroup
value={lunch.portionSize} value={lunch.portionSize}
onValueChange={(v) => setLunch({ ...lunch, portionSize: v as 'small' | 'large' | 'vegetarian' })} onValueChange={(v) => setLunch({ ...lunch, portionSize: v as 'small' | 'large' | 'vegetarian' })}
className="grid gap-2 grid-cols-3" className="grid gap-2 grid-cols-1 sm:grid-cols-3"
> >
{[ {lunchConfig.portionSizes.map(({ value, label }) => (
{ value: 'small', label: 'Small' },
{ value: 'large', label: 'Large' },
{ value: 'vegetarian', label: 'Vegetarian' },
].map(({ value, label }) => (
<div <div
key={value} key={value}
className={cn( className={cn(
'flex items-center space-x-3 rounded-lg border p-3 cursor-pointer transition-colors', 'flex items-center space-x-3 rounded-lg border p-3 cursor-pointer transition-colors',
lunch.portionSize === value ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted/50', lunch.portionSize === value ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted/50',
)} )}
onClick={() => setLunch({ ...lunch, portionSize: value as 'small' | 'large' | 'vegetarian' })} onClick={() => setLunch({ ...lunch, portionSize: value })}
> >
<RadioGroupItem value={value} id={value} /> <RadioGroupItem value={value} id={`portion-${value}`} />
<Label htmlFor={value} className="cursor-pointer">{label}</Label> <Label htmlFor={`portion-${value}`} className="cursor-pointer">{label}</Label>
</div> </div>
))} ))}
</RadioGroup> </RadioGroup>
</div> </div>
{/* Meal Options */}
<Separator /> <Separator />
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Meal Options</h3> <h3 className="font-semibold">{lunchConfig.mealOptions.title}</h3>
<div className="grid gap-2 grid-cols-2"> <div className={cn('grid gap-2', getGridCols(lunchConfig.mealOptions.columns))}>
<CheckboxOption id="soup" label="Soup" checked={lunch.soup} onCheckedChange={(v) => setLunch({ ...lunch, soup: v })} /> {lunchConfig.mealOptions.options.map(({ key, label }) => (
<CheckboxOption id="dessert" label="Dessert" checked={lunch.dessert} onCheckedChange={(v) => setLunch({ ...lunch, dessert: v })} /> <CheckboxOption
key={key}
id={`lunch-meal-${key}`}
label={label}
checked={lunch[key as keyof Pick<LunchOptions, 'soup' | 'dessert'>]}
onCheckedChange={(v) => setLunch({ ...lunch, [key]: v })}
/>
))}
</div> </div>
</div> </div>
{/* Special Preparations */}
<Separator /> <Separator />
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Special Preparations</h3> <h3 className="font-semibold">{lunchConfig.specialPreparations.title}</h3>
<div className="grid gap-2 grid-cols-2"> <div className={cn('grid gap-2', getGridCols(lunchConfig.specialPreparations.columns))}>
<CheckboxOption id="pureedFood" label="Pureed Food" checked={lunch.specialPreparations.pureedFood} onCheckedChange={(v) => setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, pureedFood: v } })} /> {lunchConfig.specialPreparations.options.map(({ key, label }) => (
<CheckboxOption id="pureedMeat" label="Pureed Meat" checked={lunch.specialPreparations.pureedMeat} onCheckedChange={(v) => setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, pureedMeat: v } })} /> <CheckboxOption
<CheckboxOption id="slicedMeat" label="Sliced Meat" checked={lunch.specialPreparations.slicedMeat} onCheckedChange={(v) => setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, slicedMeat: v } })} /> key={key}
<CheckboxOption id="mashedPotatoes" label="Mashed Potatoes" checked={lunch.specialPreparations.mashedPotatoes} onCheckedChange={(v) => setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, mashedPotatoes: v } })} /> id={`lunch-prep-${key}`}
label={label}
checked={lunch.specialPreparations[key as keyof typeof lunch.specialPreparations]}
onCheckedChange={(v) => setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, [key]: v } })}
/>
))}
</div> </div>
</div> </div>
{/* Restrictions */}
<Separator /> <Separator />
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Restrictions</h3> <h3 className="font-semibold">{lunchConfig.restrictions.title}</h3>
<div className="grid gap-2 grid-cols-3"> <div className={cn('grid gap-2', getGridCols(lunchConfig.restrictions.columns))}>
<CheckboxOption id="noFish" label="No Fish" checked={lunch.restrictions.noFish} onCheckedChange={(v) => setLunch({ ...lunch, restrictions: { ...lunch.restrictions, noFish: v } })} /> {lunchConfig.restrictions.options.map(({ key, label }) => (
<CheckboxOption id="fingerFood" label="Finger Food" checked={lunch.restrictions.fingerFood} onCheckedChange={(v) => setLunch({ ...lunch, restrictions: { ...lunch.restrictions, fingerFood: v } })} /> <CheckboxOption
<CheckboxOption id="onlySweet" label="Only Sweet" checked={lunch.restrictions.onlySweet} onCheckedChange={(v) => setLunch({ ...lunch, restrictions: { ...lunch.restrictions, onlySweet: v } })} /> key={key}
id={`lunch-rest-${key}`}
label={label}
checked={lunch.restrictions[key as keyof typeof lunch.restrictions]}
onCheckedChange={(v) => setLunch({ ...lunch, restrictions: { ...lunch.restrictions, [key]: v } })}
/>
))}
</div> </div>
</div> </div>
</> </>
@@ -1269,68 +1492,105 @@ export default function OrderDetailPage() {
/> />
</div> </div>
{/* Bread */}
<Separator /> <Separator />
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Bread</h3> <h3 className="font-semibold">{dinnerConfig.bread.title}</h3>
<div className="grid gap-2 grid-cols-2"> <div className={cn('grid gap-2', getGridCols(dinnerConfig.bread.columns))}>
<CheckboxOption id="dinnerGreyBread" label="Grey Bread" checked={dinner.bread.greyBread} onCheckedChange={(v) => setDinner({ ...dinner, bread: { ...dinner.bread, greyBread: v } })} /> {dinnerConfig.bread.options.map(({ key, label }) => (
<CheckboxOption id="dinnerWholeGrainBread" label="Whole Grain" checked={dinner.bread.wholeGrainBread} onCheckedChange={(v) => setDinner({ ...dinner, bread: { ...dinner.bread, wholeGrainBread: v } })} /> <CheckboxOption
<CheckboxOption id="dinnerWhiteBread" label="White Bread" checked={dinner.bread.whiteBread} onCheckedChange={(v) => setDinner({ ...dinner, bread: { ...dinner.bread, whiteBread: v } })} /> key={key}
<CheckboxOption id="dinnerCrispbread" label="Crispbread" checked={dinner.bread.crispbread} onCheckedChange={(v) => setDinner({ ...dinner, bread: { ...dinner.bread, crispbread: v } })} /> id={`dinner-bread-${key}`}
label={label}
checked={dinner.bread[key as keyof typeof dinner.bread]}
onCheckedChange={(v) => setDinner({ ...dinner, bread: { ...dinner.bread, [key]: v } })}
/>
))}
</div> </div>
</div> </div>
{/* Preparation */}
<Separator /> <Separator />
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Preparation</h3> <h3 className="font-semibold">{dinnerConfig.preparation.title}</h3>
<div className="grid gap-2 grid-cols-2"> <div className={cn('grid gap-2', getGridCols(dinnerConfig.preparation.columns))}>
<CheckboxOption id="dinnerSpread" label="Spread" checked={dinner.preparation.spread} onCheckedChange={(v) => setDinner({ ...dinner, preparation: { ...dinner.preparation, spread: v } })} /> {dinnerConfig.preparation.options.map(({ key, label }) => (
<CheckboxOption id="dinnerSliced" label="Sliced" checked={dinner.preparation.sliced} onCheckedChange={(v) => setDinner({ ...dinner, preparation: { ...dinner.preparation, sliced: v } })} /> <CheckboxOption
key={key}
id={`dinner-prep-${key}`}
label={label}
checked={dinner.preparation[key as keyof typeof dinner.preparation]}
onCheckedChange={(v) => setDinner({ ...dinner, preparation: { ...dinner.preparation, [key]: v } })}
/>
))}
</div> </div>
</div> </div>
{/* Spreads */}
<Separator /> <Separator />
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Spreads</h3> <h3 className="font-semibold">{dinnerConfig.spreads.title}</h3>
<div className="grid gap-2 grid-cols-2"> <div className={cn('grid gap-2', getGridCols(dinnerConfig.spreads.columns))}>
<CheckboxOption id="dinnerButter" label="Butter" checked={dinner.spreads.butter} onCheckedChange={(v) => setDinner({ ...dinner, spreads: { ...dinner.spreads, butter: v } })} /> {dinnerConfig.spreads.options.map(({ key, label }) => (
<CheckboxOption id="dinnerMargarine" label="Margarine" checked={dinner.spreads.margarine} onCheckedChange={(v) => setDinner({ ...dinner, spreads: { ...dinner.spreads, margarine: v } })} /> <CheckboxOption
key={key}
id={`dinner-spread-${key}`}
label={label}
checked={dinner.spreads[key as keyof typeof dinner.spreads]}
onCheckedChange={(v) => setDinner({ ...dinner, spreads: { ...dinner.spreads, [key]: v } })}
/>
))}
</div> </div>
</div> </div>
{/* Additional Items */}
<Separator /> <Separator />
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Additional Items</h3> <h3 className="font-semibold">{dinnerConfig.additionalItems.title}</h3>
<div className="grid gap-2 grid-cols-3"> <div className={cn('grid gap-2', getGridCols(dinnerConfig.additionalItems.columns))}>
<CheckboxOption id="dinnerSoup" label="Soup" checked={dinner.soup} onCheckedChange={(v) => setDinner({ ...dinner, soup: v })} /> {dinnerConfig.additionalItems.options.map(({ key, label }) => (
<CheckboxOption id="dinnerPorridge" label="Porridge" checked={dinner.porridge} onCheckedChange={(v) => setDinner({ ...dinner, porridge: v })} /> <CheckboxOption
<CheckboxOption id="dinnerNoFish" label="No Fish" checked={dinner.noFish} onCheckedChange={(v) => setDinner({ ...dinner, noFish: v })} /> key={key}
id={`dinner-add-${key}`}
label={label}
checked={dinner[key as keyof Pick<DinnerOptions, 'soup' | 'porridge' | 'noFish'>]}
onCheckedChange={(v) => setDinner({ ...dinner, [key]: v })}
/>
))}
</div> </div>
</div> </div>
{/* Beverages */}
<Separator /> <Separator />
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Beverages</h3> <h3 className="font-semibold">{dinnerConfig.beverages.title}</h3>
<div className="grid gap-2 grid-cols-2"> <div className={cn('grid gap-2', getGridCols(dinnerConfig.beverages.columns))}>
<CheckboxOption id="dinnerTea" label="Tea" checked={dinner.beverages.tea} onCheckedChange={(v) => setDinner({ ...dinner, beverages: { ...dinner.beverages, tea: v } })} /> {dinnerConfig.beverages.options.map(({ key, label }) => (
<CheckboxOption id="dinnerCocoa" label="Cocoa" checked={dinner.beverages.cocoa} onCheckedChange={(v) => setDinner({ ...dinner, beverages: { ...dinner.beverages, cocoa: v } })} /> <CheckboxOption
<CheckboxOption id="dinnerHotMilk" label="Hot Milk" checked={dinner.beverages.hotMilk} onCheckedChange={(v) => setDinner({ ...dinner, beverages: { ...dinner.beverages, hotMilk: v } })} /> key={key}
<CheckboxOption id="dinnerColdMilk" label="Cold Milk" checked={dinner.beverages.coldMilk} onCheckedChange={(v) => setDinner({ ...dinner, beverages: { ...dinner.beverages, coldMilk: v } })} /> id={`dinner-bev-${key}`}
label={label}
checked={dinner.beverages[key as keyof typeof dinner.beverages]}
onCheckedChange={(v) => setDinner({ ...dinner, beverages: { ...dinner.beverages, [key]: v } })}
/>
))}
</div> </div>
</div> </div>
{/* Additions */}
<Separator /> <Separator />
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold">Additions</h3> <h3 className="font-semibold">{dinnerConfig.additions.title}</h3>
<div className="grid gap-2 grid-cols-2"> <div className={cn('grid gap-2', getGridCols(dinnerConfig.additions.columns))}>
<CheckboxOption id="dinnerSugar" label="Sugar" checked={dinner.additions.sugar} onCheckedChange={(v) => setDinner({ ...dinner, additions: { ...dinner.additions, sugar: v } })} /> {dinnerConfig.additions.options.map(({ key, label }) => (
<CheckboxOption id="dinnerSweetener" label="Sweetener" checked={dinner.additions.sweetener} onCheckedChange={(v) => setDinner({ ...dinner, additions: { ...dinner.additions, sweetener: v } })} /> <CheckboxOption
key={key}
id={`dinner-additions-${key}`}
label={label}
checked={dinner.additions[key as keyof typeof dinner.additions]}
onCheckedChange={(v) => setDinner({ ...dinner, additions: { ...dinner.additions, [key]: v } })}
/>
))}
</div> </div>
</div> </div>
</> </>
@@ -1339,7 +1599,7 @@ export default function OrderDetailPage() {
</div> </div>
{isDraft && ( {isDraft && (
<div className="flex gap-4 px-6 py-4 border-t bg-background"> <div className="flex gap-4 px-4 sm:px-6 py-4 border-t bg-background">
<Button variant="outline" onClick={closeMealForm} className="flex-1"> <Button variant="outline" onClick={closeMealForm} className="flex-1">
Cancel Cancel
</Button> </Button>