769 lines
32 KiB
TypeScript
769 lines
32 KiB
TypeScript
'use client'
|
||
|
||
import React, { useState, useEffect, Suspense } from 'react'
|
||
import { useRouter, useSearchParams } from 'next/navigation'
|
||
import Link from 'next/link'
|
||
|
||
interface Resident {
|
||
id: number
|
||
name: string
|
||
room: string
|
||
table?: string
|
||
station?: string
|
||
highCaloric?: boolean
|
||
aversions?: string
|
||
notes?: string
|
||
}
|
||
|
||
type MealType = 'breakfast' | 'lunch' | 'dinner'
|
||
|
||
interface BreakfastOptions {
|
||
accordingToPlan: boolean
|
||
bread: {
|
||
breadRoll: boolean
|
||
wholeGrainRoll: boolean
|
||
greyBread: boolean
|
||
wholeGrainBread: boolean
|
||
whiteBread: boolean
|
||
crispbread: boolean
|
||
}
|
||
porridge: boolean
|
||
preparation: { sliced: boolean; spread: boolean }
|
||
spreads: {
|
||
butter: boolean
|
||
margarine: boolean
|
||
jam: boolean
|
||
diabeticJam: boolean
|
||
honey: boolean
|
||
cheese: boolean
|
||
quark: boolean
|
||
sausage: boolean
|
||
}
|
||
beverages: { coffee: boolean; tea: boolean; hotMilk: boolean; coldMilk: boolean }
|
||
additions: { sugar: boolean; sweetener: boolean; coffeeCreamer: boolean }
|
||
}
|
||
|
||
interface LunchOptions {
|
||
portionSize: 'small' | 'large' | 'vegetarian'
|
||
soup: boolean
|
||
dessert: boolean
|
||
specialPreparations: {
|
||
pureedFood: boolean
|
||
pureedMeat: boolean
|
||
slicedMeat: boolean
|
||
mashedPotatoes: boolean
|
||
}
|
||
restrictions: { noFish: boolean; fingerFood: boolean; onlySweet: boolean }
|
||
}
|
||
|
||
interface DinnerOptions {
|
||
accordingToPlan: boolean
|
||
bread: { greyBread: boolean; wholeGrainBread: boolean; whiteBread: boolean; crispbread: boolean }
|
||
preparation: { spread: boolean; sliced: boolean }
|
||
spreads: { butter: boolean; margarine: boolean }
|
||
soup: boolean
|
||
porridge: boolean
|
||
noFish: boolean
|
||
beverages: { tea: boolean; cocoa: boolean; hotMilk: boolean; coldMilk: boolean }
|
||
additions: { sugar: boolean; sweetener: boolean }
|
||
}
|
||
|
||
const defaultBreakfast: BreakfastOptions = {
|
||
accordingToPlan: false,
|
||
bread: {
|
||
breadRoll: false,
|
||
wholeGrainRoll: false,
|
||
greyBread: false,
|
||
wholeGrainBread: false,
|
||
whiteBread: false,
|
||
crispbread: false,
|
||
},
|
||
porridge: false,
|
||
preparation: { sliced: false, spread: false },
|
||
spreads: {
|
||
butter: false,
|
||
margarine: false,
|
||
jam: false,
|
||
diabeticJam: false,
|
||
honey: false,
|
||
cheese: false,
|
||
quark: false,
|
||
sausage: false,
|
||
},
|
||
beverages: { coffee: false, tea: false, hotMilk: false, coldMilk: false },
|
||
additions: { sugar: false, sweetener: false, coffeeCreamer: false },
|
||
}
|
||
|
||
const defaultLunch: LunchOptions = {
|
||
portionSize: 'large',
|
||
soup: false,
|
||
dessert: true,
|
||
specialPreparations: {
|
||
pureedFood: false,
|
||
pureedMeat: false,
|
||
slicedMeat: false,
|
||
mashedPotatoes: false,
|
||
},
|
||
restrictions: { noFish: false, fingerFood: false, onlySweet: false },
|
||
}
|
||
|
||
const defaultDinner: DinnerOptions = {
|
||
accordingToPlan: false,
|
||
bread: { greyBread: false, wholeGrainBread: false, whiteBread: false, crispbread: false },
|
||
preparation: { spread: false, sliced: false },
|
||
spreads: { butter: false, margarine: false },
|
||
soup: false,
|
||
porridge: false,
|
||
noFish: false,
|
||
beverages: { tea: false, cocoa: false, hotMilk: false, coldMilk: false },
|
||
additions: { sugar: false, sweetener: false },
|
||
}
|
||
|
||
function NewOrderContent() {
|
||
const router = useRouter()
|
||
const searchParams = useSearchParams()
|
||
const initialMealType = (searchParams.get('mealType') as MealType) || null
|
||
|
||
const [step, setStep] = useState(initialMealType ? 2 : 1)
|
||
const [residents, setResidents] = useState<Resident[]>([])
|
||
const [selectedResident, setSelectedResident] = useState<Resident | null>(null)
|
||
const [mealType, setMealType] = useState<MealType | null>(initialMealType)
|
||
const [date, setDate] = useState(() => new Date().toISOString().split('T')[0])
|
||
const [breakfast, setBreakfast] = useState<BreakfastOptions>(defaultBreakfast)
|
||
const [lunch, setLunch] = useState<LunchOptions>(defaultLunch)
|
||
const [dinner, setDinner] = useState<DinnerOptions>(defaultDinner)
|
||
const [loading, setLoading] = useState(true)
|
||
const [submitting, setSubmitting] = useState(false)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [searchQuery, setSearchQuery] = useState('')
|
||
|
||
useEffect(() => {
|
||
const fetchResidents = async () => {
|
||
try {
|
||
const res = await fetch('/api/residents?where[active][equals]=true&limit=100&sort=name', {
|
||
credentials: 'include',
|
||
})
|
||
if (res.ok) {
|
||
const data = await res.json()
|
||
setResidents(data.docs || [])
|
||
} else if (res.status === 401) {
|
||
router.push('/caregiver/login')
|
||
}
|
||
} catch (err) {
|
||
console.error('Error fetching residents:', err)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
fetchResidents()
|
||
}, [router])
|
||
|
||
const filteredResidents = residents.filter(
|
||
(r) =>
|
||
r.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
r.room.toLowerCase().includes(searchQuery.toLowerCase()),
|
||
)
|
||
|
||
const handleSubmit = async () => {
|
||
if (!selectedResident || !mealType || !date) return
|
||
|
||
setSubmitting(true)
|
||
setError(null)
|
||
|
||
try {
|
||
const orderData: Record<string, unknown> = {
|
||
resident: selectedResident.id,
|
||
date,
|
||
mealType,
|
||
status: 'pending',
|
||
}
|
||
|
||
if (mealType === 'breakfast') {
|
||
orderData.breakfast = breakfast
|
||
} else if (mealType === 'lunch') {
|
||
orderData.lunch = lunch
|
||
} else if (mealType === 'dinner') {
|
||
orderData.dinner = dinner
|
||
}
|
||
|
||
const res = await fetch('/api/meal-orders', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(orderData),
|
||
credentials: 'include',
|
||
})
|
||
|
||
if (!res.ok) {
|
||
const data = await res.json()
|
||
throw new Error(data.errors?.[0]?.message || 'Failed to create order')
|
||
}
|
||
|
||
router.push('/caregiver/dashboard')
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : 'An error occurred')
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
const getMealTypeLabel = (type: MealType) => {
|
||
switch (type) {
|
||
case 'breakfast':
|
||
return 'Breakfast (Frühstück)'
|
||
case 'lunch':
|
||
return 'Lunch (Mittagessen)'
|
||
case 'dinner':
|
||
return 'Dinner (Abendessen)'
|
||
}
|
||
}
|
||
|
||
const renderCheckbox = (
|
||
label: string,
|
||
checked: boolean,
|
||
onChange: (checked: boolean) => void,
|
||
) => (
|
||
<label className={`checkbox-item ${checked ? 'checkbox-item--checked' : ''}`}>
|
||
<input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
|
||
<span>{label}</span>
|
||
</label>
|
||
)
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="login-page">
|
||
<div className="spinner" />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<header className="header">
|
||
<div className="header__content">
|
||
<Link href="/caregiver/dashboard" className="btn btn--secondary">
|
||
← Back
|
||
</Link>
|
||
<h1 className="header__title">New Meal Order</h1>
|
||
</div>
|
||
</header>
|
||
|
||
<main className="container">
|
||
{/* Progress Steps */}
|
||
<div className="steps">
|
||
<div className={`steps__step ${step >= 1 ? 'steps__step--active' : ''} ${step > 1 ? 'steps__step--completed' : ''}`} />
|
||
<div className={`steps__step ${step >= 2 ? 'steps__step--active' : ''} ${step > 2 ? 'steps__step--completed' : ''}`} />
|
||
<div className={`steps__step ${step >= 3 ? 'steps__step--active' : ''} ${step > 3 ? 'steps__step--completed' : ''}`} />
|
||
<div className={`steps__step ${step >= 4 ? 'steps__step--active' : ''}`} />
|
||
</div>
|
||
|
||
{error && <div className="message message--error">{error}</div>}
|
||
|
||
{/* Step 1: Select Meal Type */}
|
||
{step === 1 && (
|
||
<div className="card">
|
||
<div className="card__header">
|
||
<h2>Step 1: Select Meal Type</h2>
|
||
</div>
|
||
<div className="card__body">
|
||
<div className="form-group">
|
||
<label htmlFor="date">Date</label>
|
||
<input
|
||
type="date"
|
||
id="date"
|
||
className="input"
|
||
value={date}
|
||
onChange={(e) => setDate(e.target.value)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="meal-type-grid">
|
||
<button
|
||
type="button"
|
||
className={`meal-type-btn ${mealType === 'breakfast' ? 'meal-type-btn--selected' : ''}`}
|
||
onClick={() => setMealType('breakfast')}
|
||
>
|
||
<div className="meal-type-btn__icon">🌅</div>
|
||
<div className="meal-type-btn__label">Breakfast</div>
|
||
<div className="meal-type-btn__sublabel">Frühstück</div>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`meal-type-btn ${mealType === 'lunch' ? 'meal-type-btn--selected' : ''}`}
|
||
onClick={() => setMealType('lunch')}
|
||
>
|
||
<div className="meal-type-btn__icon">☀️</div>
|
||
<div className="meal-type-btn__label">Lunch</div>
|
||
<div className="meal-type-btn__sublabel">Mittagessen</div>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`meal-type-btn ${mealType === 'dinner' ? 'meal-type-btn--selected' : ''}`}
|
||
onClick={() => setMealType('dinner')}
|
||
>
|
||
<div className="meal-type-btn__icon">🌙</div>
|
||
<div className="meal-type-btn__label">Dinner</div>
|
||
<div className="meal-type-btn__sublabel">Abendessen</div>
|
||
</button>
|
||
</div>
|
||
|
||
<div style={{ marginTop: '1.5rem' }}>
|
||
<button
|
||
className="btn btn--primary btn--block btn--large"
|
||
disabled={!mealType}
|
||
onClick={() => setStep(2)}
|
||
>
|
||
Continue
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Step 2: Select Resident */}
|
||
{step === 2 && (
|
||
<div className="card">
|
||
<div className="card__header">
|
||
<h2>Step 2: Select Resident</h2>
|
||
</div>
|
||
<div className="card__body">
|
||
<div className="form-group">
|
||
<div className="search-box">
|
||
<input
|
||
type="text"
|
||
placeholder="Search by name or room..."
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="resident-list">
|
||
{filteredResidents.map((resident) => (
|
||
<div
|
||
key={resident.id}
|
||
className={`resident-card ${selectedResident?.id === resident.id ? 'resident-card--selected' : ''}`}
|
||
onClick={() => setSelectedResident(resident)}
|
||
>
|
||
<div className="resident-card__name">{resident.name}</div>
|
||
<div className="resident-card__details">
|
||
<span>Room {resident.room}</span>
|
||
{resident.table && <span>Table {resident.table}</span>}
|
||
{resident.station && <span>{resident.station}</span>}
|
||
</div>
|
||
{resident.highCaloric && (
|
||
<div className="resident-card__badge">High Caloric</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div style={{ marginTop: '1.5rem', display: 'flex', gap: '1rem' }}>
|
||
<button className="btn btn--secondary" onClick={() => setStep(1)}>
|
||
Back
|
||
</button>
|
||
<button
|
||
className="btn btn--primary btn--block btn--large"
|
||
disabled={!selectedResident}
|
||
onClick={() => setStep(3)}
|
||
>
|
||
Continue
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Step 3: Meal Options */}
|
||
{step === 3 && (
|
||
<div className="card">
|
||
<div className="card__header">
|
||
<h2>Step 3: {mealType && getMealTypeLabel(mealType)} Options</h2>
|
||
</div>
|
||
<div className="card__body">
|
||
{/* Show resident notes if any */}
|
||
{(selectedResident?.aversions || selectedResident?.notes) && (
|
||
<div className="message message--warning">
|
||
<strong>Notes for {selectedResident?.name}:</strong>
|
||
{selectedResident?.aversions && <div>Aversions: {selectedResident.aversions}</div>}
|
||
{selectedResident?.notes && <div>{selectedResident.notes}</div>}
|
||
</div>
|
||
)}
|
||
|
||
{/* BREAKFAST OPTIONS */}
|
||
{mealType === 'breakfast' && (
|
||
<>
|
||
<div className="section">
|
||
<h3 className="section__title">General</h3>
|
||
<div className="checkbox-group">
|
||
{renderCheckbox('According to Plan (lt. Plan)', breakfast.accordingToPlan, (v) =>
|
||
setBreakfast({ ...breakfast, accordingToPlan: v }),
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3 className="section__title">Bread (Brot)</h3>
|
||
<div className="checkbox-group checkbox-group--cols-2">
|
||
{renderCheckbox('Bread Roll (Brötchen)', breakfast.bread.breadRoll, (v) =>
|
||
setBreakfast({ ...breakfast, bread: { ...breakfast.bread, breadRoll: v } }),
|
||
)}
|
||
{renderCheckbox('Whole Grain Roll (Vollkornbrötchen)', breakfast.bread.wholeGrainRoll, (v) =>
|
||
setBreakfast({ ...breakfast, bread: { ...breakfast.bread, wholeGrainRoll: v } }),
|
||
)}
|
||
{renderCheckbox('Grey Bread (Graubrot)', breakfast.bread.greyBread, (v) =>
|
||
setBreakfast({ ...breakfast, bread: { ...breakfast.bread, greyBread: v } }),
|
||
)}
|
||
{renderCheckbox('Whole Grain Bread (Vollkornbrot)', breakfast.bread.wholeGrainBread, (v) =>
|
||
setBreakfast({ ...breakfast, bread: { ...breakfast.bread, wholeGrainBread: v } }),
|
||
)}
|
||
{renderCheckbox('White Bread (Weißbrot)', breakfast.bread.whiteBread, (v) =>
|
||
setBreakfast({ ...breakfast, bread: { ...breakfast.bread, whiteBread: v } }),
|
||
)}
|
||
{renderCheckbox('Crispbread (Knäckebrot)', breakfast.bread.crispbread, (v) =>
|
||
setBreakfast({ ...breakfast, bread: { ...breakfast.bread, crispbread: v } }),
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3 className="section__title">Preparation</h3>
|
||
<div className="checkbox-group checkbox-group--cols-2">
|
||
{renderCheckbox('Porridge (Brei)', breakfast.porridge, (v) =>
|
||
setBreakfast({ ...breakfast, porridge: v }),
|
||
)}
|
||
{renderCheckbox('Sliced (geschnitten)', breakfast.preparation.sliced, (v) =>
|
||
setBreakfast({ ...breakfast, preparation: { ...breakfast.preparation, sliced: v } }),
|
||
)}
|
||
{renderCheckbox('Spread (geschmiert)', breakfast.preparation.spread, (v) =>
|
||
setBreakfast({ ...breakfast, preparation: { ...breakfast.preparation, spread: v } }),
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3 className="section__title">Spreads (Aufstrich)</h3>
|
||
<div className="checkbox-group checkbox-group--cols-2">
|
||
{renderCheckbox('Butter', breakfast.spreads.butter, (v) =>
|
||
setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, butter: v } }),
|
||
)}
|
||
{renderCheckbox('Margarine', breakfast.spreads.margarine, (v) =>
|
||
setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, margarine: v } }),
|
||
)}
|
||
{renderCheckbox('Jam (Konfitüre)', breakfast.spreads.jam, (v) =>
|
||
setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, jam: v } }),
|
||
)}
|
||
{renderCheckbox('Diabetic Jam (Diab. Konfitüre)', breakfast.spreads.diabeticJam, (v) =>
|
||
setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, diabeticJam: v } }),
|
||
)}
|
||
{renderCheckbox('Honey (Honig)', breakfast.spreads.honey, (v) =>
|
||
setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, honey: v } }),
|
||
)}
|
||
{renderCheckbox('Cheese (Käse)', breakfast.spreads.cheese, (v) =>
|
||
setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, cheese: v } }),
|
||
)}
|
||
{renderCheckbox('Quark', breakfast.spreads.quark, (v) =>
|
||
setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, quark: v } }),
|
||
)}
|
||
{renderCheckbox('Sausage (Wurst)', breakfast.spreads.sausage, (v) =>
|
||
setBreakfast({ ...breakfast, spreads: { ...breakfast.spreads, sausage: v } }),
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3 className="section__title">Beverages (Getränke)</h3>
|
||
<div className="checkbox-group checkbox-group--cols-2">
|
||
{renderCheckbox('Coffee (Kaffee)', breakfast.beverages.coffee, (v) =>
|
||
setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, coffee: v } }),
|
||
)}
|
||
{renderCheckbox('Tea (Tee)', breakfast.beverages.tea, (v) =>
|
||
setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, tea: v } }),
|
||
)}
|
||
{renderCheckbox('Hot Milk (Milch heiß)', breakfast.beverages.hotMilk, (v) =>
|
||
setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, hotMilk: v } }),
|
||
)}
|
||
{renderCheckbox('Cold Milk (Milch kalt)', breakfast.beverages.coldMilk, (v) =>
|
||
setBreakfast({ ...breakfast, beverages: { ...breakfast.beverages, coldMilk: v } }),
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3 className="section__title">Additions (Zusätze)</h3>
|
||
<div className="checkbox-group checkbox-group--cols-3">
|
||
{renderCheckbox('Sugar (Zucker)', breakfast.additions.sugar, (v) =>
|
||
setBreakfast({ ...breakfast, additions: { ...breakfast.additions, sugar: v } }),
|
||
)}
|
||
{renderCheckbox('Sweetener (Süßstoff)', breakfast.additions.sweetener, (v) =>
|
||
setBreakfast({ ...breakfast, additions: { ...breakfast.additions, sweetener: v } }),
|
||
)}
|
||
{renderCheckbox('Coffee Creamer (Kaffeesahne)', breakfast.additions.coffeeCreamer, (v) =>
|
||
setBreakfast({ ...breakfast, additions: { ...breakfast.additions, coffeeCreamer: v } }),
|
||
)}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* LUNCH OPTIONS */}
|
||
{mealType === 'lunch' && (
|
||
<>
|
||
<div className="section">
|
||
<h3 className="section__title">Portion Size</h3>
|
||
<div className="checkbox-group checkbox-group--cols-3">
|
||
<label
|
||
className={`checkbox-item ${lunch.portionSize === 'small' ? 'checkbox-item--checked' : ''}`}
|
||
>
|
||
<input
|
||
type="radio"
|
||
name="portionSize"
|
||
checked={lunch.portionSize === 'small'}
|
||
onChange={() => setLunch({ ...lunch, portionSize: 'small' })}
|
||
/>
|
||
<span>Small (Kleine)</span>
|
||
</label>
|
||
<label
|
||
className={`checkbox-item ${lunch.portionSize === 'large' ? 'checkbox-item--checked' : ''}`}
|
||
>
|
||
<input
|
||
type="radio"
|
||
name="portionSize"
|
||
checked={lunch.portionSize === 'large'}
|
||
onChange={() => setLunch({ ...lunch, portionSize: 'large' })}
|
||
/>
|
||
<span>Large (Große)</span>
|
||
</label>
|
||
<label
|
||
className={`checkbox-item ${lunch.portionSize === 'vegetarian' ? 'checkbox-item--checked' : ''}`}
|
||
>
|
||
<input
|
||
type="radio"
|
||
name="portionSize"
|
||
checked={lunch.portionSize === 'vegetarian'}
|
||
onChange={() => setLunch({ ...lunch, portionSize: 'vegetarian' })}
|
||
/>
|
||
<span>Vegetarian</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3 className="section__title">Meal Options</h3>
|
||
<div className="checkbox-group checkbox-group--cols-2">
|
||
{renderCheckbox('Soup (Suppe)', lunch.soup, (v) => setLunch({ ...lunch, soup: v }))}
|
||
{renderCheckbox('Dessert', lunch.dessert, (v) => setLunch({ ...lunch, dessert: v }))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3 className="section__title">Special Preparations</h3>
|
||
<div className="checkbox-group checkbox-group--cols-2">
|
||
{renderCheckbox('Pureed Food (passierte Kost)', lunch.specialPreparations.pureedFood, (v) =>
|
||
setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, pureedFood: v } }),
|
||
)}
|
||
{renderCheckbox('Pureed Meat (passiertes Fleisch)', lunch.specialPreparations.pureedMeat, (v) =>
|
||
setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, pureedMeat: v } }),
|
||
)}
|
||
{renderCheckbox('Sliced Meat (geschnittenes Fleisch)', lunch.specialPreparations.slicedMeat, (v) =>
|
||
setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, slicedMeat: v } }),
|
||
)}
|
||
{renderCheckbox('Mashed Potatoes (Kartoffelbrei)', lunch.specialPreparations.mashedPotatoes, (v) =>
|
||
setLunch({ ...lunch, specialPreparations: { ...lunch.specialPreparations, mashedPotatoes: v } }),
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3 className="section__title">Restrictions</h3>
|
||
<div className="checkbox-group checkbox-group--cols-3">
|
||
{renderCheckbox('No Fish (ohne Fisch)', lunch.restrictions.noFish, (v) =>
|
||
setLunch({ ...lunch, restrictions: { ...lunch.restrictions, noFish: v } }),
|
||
)}
|
||
{renderCheckbox('Finger Food', lunch.restrictions.fingerFood, (v) =>
|
||
setLunch({ ...lunch, restrictions: { ...lunch.restrictions, fingerFood: v } }),
|
||
)}
|
||
{renderCheckbox('Only Sweet (nur süß)', lunch.restrictions.onlySweet, (v) =>
|
||
setLunch({ ...lunch, restrictions: { ...lunch.restrictions, onlySweet: v } }),
|
||
)}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* DINNER OPTIONS */}
|
||
{mealType === 'dinner' && (
|
||
<>
|
||
<div className="section">
|
||
<h3 className="section__title">General</h3>
|
||
<div className="checkbox-group">
|
||
{renderCheckbox('According to Plan (lt. Plan)', dinner.accordingToPlan, (v) =>
|
||
setDinner({ ...dinner, accordingToPlan: v }),
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3 className="section__title">Bread (Brot)</h3>
|
||
<div className="checkbox-group checkbox-group--cols-2">
|
||
{renderCheckbox('Grey Bread (Graubrot)', dinner.bread.greyBread, (v) =>
|
||
setDinner({ ...dinner, bread: { ...dinner.bread, greyBread: v } }),
|
||
)}
|
||
{renderCheckbox('Whole Grain Bread (Vollkornbrot)', dinner.bread.wholeGrainBread, (v) =>
|
||
setDinner({ ...dinner, bread: { ...dinner.bread, wholeGrainBread: v } }),
|
||
)}
|
||
{renderCheckbox('White Bread (Weißbrot)', dinner.bread.whiteBread, (v) =>
|
||
setDinner({ ...dinner, bread: { ...dinner.bread, whiteBread: v } }),
|
||
)}
|
||
{renderCheckbox('Crispbread (Knäckebrot)', dinner.bread.crispbread, (v) =>
|
||
setDinner({ ...dinner, bread: { ...dinner.bread, crispbread: v } }),
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3 className="section__title">Preparation</h3>
|
||
<div className="checkbox-group checkbox-group--cols-2">
|
||
{renderCheckbox('Spread (geschmiert)', dinner.preparation.spread, (v) =>
|
||
setDinner({ ...dinner, preparation: { ...dinner.preparation, spread: v } }),
|
||
)}
|
||
{renderCheckbox('Sliced (geschnitten)', dinner.preparation.sliced, (v) =>
|
||
setDinner({ ...dinner, preparation: { ...dinner.preparation, sliced: v } }),
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3 className="section__title">Spreads (Aufstrich)</h3>
|
||
<div className="checkbox-group checkbox-group--cols-2">
|
||
{renderCheckbox('Butter', dinner.spreads.butter, (v) =>
|
||
setDinner({ ...dinner, spreads: { ...dinner.spreads, butter: v } }),
|
||
)}
|
||
{renderCheckbox('Margarine', dinner.spreads.margarine, (v) =>
|
||
setDinner({ ...dinner, spreads: { ...dinner.spreads, margarine: v } }),
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3 className="section__title">Additional Items</h3>
|
||
<div className="checkbox-group checkbox-group--cols-3">
|
||
{renderCheckbox('Soup (Suppe)', dinner.soup, (v) => setDinner({ ...dinner, soup: v }))}
|
||
{renderCheckbox('Porridge (Brei)', dinner.porridge, (v) =>
|
||
setDinner({ ...dinner, porridge: v }),
|
||
)}
|
||
{renderCheckbox('No Fish (ohne Fisch)', dinner.noFish, (v) =>
|
||
setDinner({ ...dinner, noFish: v }),
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3 className="section__title">Beverages (Getränke)</h3>
|
||
<div className="checkbox-group checkbox-group--cols-2">
|
||
{renderCheckbox('Tea (Tee)', dinner.beverages.tea, (v) =>
|
||
setDinner({ ...dinner, beverages: { ...dinner.beverages, tea: v } }),
|
||
)}
|
||
{renderCheckbox('Cocoa (Kakao)', dinner.beverages.cocoa, (v) =>
|
||
setDinner({ ...dinner, beverages: { ...dinner.beverages, cocoa: v } }),
|
||
)}
|
||
{renderCheckbox('Hot Milk (Milch heiß)', dinner.beverages.hotMilk, (v) =>
|
||
setDinner({ ...dinner, beverages: { ...dinner.beverages, hotMilk: v } }),
|
||
)}
|
||
{renderCheckbox('Cold Milk (Milch kalt)', dinner.beverages.coldMilk, (v) =>
|
||
setDinner({ ...dinner, beverages: { ...dinner.beverages, coldMilk: v } }),
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section">
|
||
<h3 className="section__title">Additions (Zusätze)</h3>
|
||
<div className="checkbox-group checkbox-group--cols-2">
|
||
{renderCheckbox('Sugar (Zucker)', dinner.additions.sugar, (v) =>
|
||
setDinner({ ...dinner, additions: { ...dinner.additions, sugar: v } }),
|
||
)}
|
||
{renderCheckbox('Sweetener (Süßstoff)', dinner.additions.sweetener, (v) =>
|
||
setDinner({ ...dinner, additions: { ...dinner.additions, sweetener: v } }),
|
||
)}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
<div style={{ marginTop: '1.5rem', display: 'flex', gap: '1rem' }}>
|
||
<button className="btn btn--secondary" onClick={() => setStep(2)}>
|
||
Back
|
||
</button>
|
||
<button className="btn btn--primary btn--block btn--large" onClick={() => setStep(4)}>
|
||
Review Order
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Step 4: Review and Submit */}
|
||
{step === 4 && (
|
||
<div className="card">
|
||
<div className="card__header">
|
||
<h2>Step 4: Review & Submit</h2>
|
||
</div>
|
||
<div className="card__body">
|
||
<div className="order-summary">
|
||
<div className="order-summary__row">
|
||
<span className="order-summary__label">Resident</span>
|
||
<span className="order-summary__value">{selectedResident?.name}</span>
|
||
</div>
|
||
<div className="order-summary__row">
|
||
<span className="order-summary__label">Room</span>
|
||
<span className="order-summary__value">{selectedResident?.room}</span>
|
||
</div>
|
||
<div className="order-summary__row">
|
||
<span className="order-summary__label">Date</span>
|
||
<span className="order-summary__value">{date}</span>
|
||
</div>
|
||
<div className="order-summary__row">
|
||
<span className="order-summary__label">Meal Type</span>
|
||
<span className="order-summary__value">{mealType && getMealTypeLabel(mealType)}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{selectedResident?.highCaloric && (
|
||
<div className="message message--warning" style={{ marginTop: '1rem' }}>
|
||
<strong>Note:</strong> This resident requires high caloric meals.
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ marginTop: '1.5rem', display: 'flex', gap: '1rem' }}>
|
||
<button className="btn btn--secondary" onClick={() => setStep(3)}>
|
||
Back
|
||
</button>
|
||
<button
|
||
className="btn btn--success btn--block btn--large"
|
||
onClick={handleSubmit}
|
||
disabled={submitting}
|
||
>
|
||
{submitting ? 'Creating...' : 'Create Order'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</main>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default function NewOrderPage() {
|
||
return (
|
||
<Suspense
|
||
fallback={
|
||
<div className="login-page">
|
||
<div className="spinner" />
|
||
</div>
|
||
}
|
||
>
|
||
<NewOrderContent />
|
||
</Suspense>
|
||
)
|
||
}
|