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

feat: redesign meal ordering system

Browse Source
This commit is contained in:
Danijel Martinek
2025-12-02 12:57:42 +01:00
parent 0aada37286
commit 0cf6b405f1
24 changed files with 4823 additions and 639 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/app/(app)/caregiver/orders/page.tsx
View File

@@ -3,7 +3,7 @@
import React, { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import { ArrowLeft, Plus, Loader2 } from 'lucide-react'
import { ArrowLeft, Plus, Loader2, Send, Eye, Pencil, Check, ChefHat } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
@@ -26,19 +26,13 @@ import {
TableRow,
} from '@/components/ui/table'
interface Resident {
id: number
name: string
room: string
}
interface MealOrder {
id: number
title: string
date: string
mealType: 'breakfast' | 'lunch' | 'dinner'
status: 'pending' | 'preparing' | 'prepared'
resident: Resident | number
status: 'draft' | 'submitted' | 'preparing' | 'completed'
mealCount: number
createdAt: string
}
@@ -47,18 +41,18 @@ export default function OrdersListPage() {
const [orders, setOrders] = useState<MealOrder[]>([])
const [loading, setLoading] = useState(true)
const [dateFilter, setDateFilter] = useState(() => new Date().toISOString().split('T')[0])
const [mealTypeFilter, setMealTypeFilter] = useState<string>('all')
const [statusFilter, setStatusFilter] = useState<string>('all')
useEffect(() => {
const fetchOrders = async () => {
setLoading(true)
try {
let url = `/api/meal-orders?sort=-createdAt&limit=100&depth=1`
let url = `/api/meal-orders?sort=-date&limit=100&depth=0`
if (dateFilter) {
url += `&where[date][equals]=${dateFilter}`
}
if (mealTypeFilter !== 'all') {
url += `&where[mealType][equals]=${mealTypeFilter}`
if (statusFilter !== 'all') {
url += `&where[status][equals]=${statusFilter}`
}
const res = await fetch(url, { credentials: 'include' })
@@ -75,7 +69,7 @@ export default function OrdersListPage() {
}
}
fetchOrders()
}, [router, dateFilter, mealTypeFilter])
}, [router, dateFilter, statusFilter])
const getMealTypeLabel = (type: string) => {
switch (type) {
@@ -92,22 +86,59 @@ export default function OrdersListPage() {
const getStatusBadge = (status: string) => {
switch (status) {
case 'pending':
return <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200">Pending</Badge>
case 'draft':
return (
<Badge variant="outline" className="bg-gray-50 text-gray-700 border-gray-200">
<Pencil className="mr-1 h-3 w-3" />
Draft
</Badge>
)
case 'submitted':
return (
<Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
<Send className="mr-1 h-3 w-3" />
Submitted
</Badge>
)
case 'preparing':
return <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">Preparing</Badge>
case 'prepared':
return <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">Prepared</Badge>
return (
<Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200">
<ChefHat className="mr-1 h-3 w-3" />
Preparing
</Badge>
)
case 'completed':
return (
<Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
<Check className="mr-1 h-3 w-3" />
Completed
</Badge>
)
default:
return <Badge variant="outline">{status}</Badge>
}
}
const getResidentName = (resident: Resident | number) => {
if (typeof resident === 'object') {
return resident.name
const handleCreateOrder = async (mealType: 'breakfast' | 'lunch' | 'dinner') => {
try {
const res = await fetch('/api/meal-orders', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
date: dateFilter,
mealType,
status: 'draft',
}),
credentials: 'include',
})
if (res.ok) {
const data = await res.json()
router.push(`/caregiver/orders/${data.doc.id}`)
}
} catch (err) {
console.error('Error creating order:', err)
}
return `Resident #${resident}`
}
return (
@@ -123,22 +154,16 @@ export default function OrdersListPage() {
</Button>
<h1 className="text-xl font-semibold">Meal Orders</h1>
</div>
<Button asChild>
<Link href="/caregiver/orders/new">
<Plus className="mr-2 h-4 w-4" />
New Order
</Link>
</Button>
</div>
</header>
<main className="container py-6">
<Card className="mb-6">
<CardHeader>
<CardTitle>Filter Orders</CardTitle>
<CardTitle>Filter & Create Orders</CardTitle>
</CardHeader>
<CardContent>
<div className="grid gap-4 sm:grid-cols-2">
<div className="grid gap-4 sm:grid-cols-3">
<div className="space-y-2">
<Label htmlFor="date">Date</Label>
<Input
@@ -149,19 +174,52 @@ export default function OrdersListPage() {
/>
</div>
<div className="space-y-2">
<Label htmlFor="mealType">Meal Type</Label>
<Select value={mealTypeFilter} onValueChange={setMealTypeFilter}>
<Label htmlFor="status">Status</Label>
<Select value={statusFilter} onValueChange={setStatusFilter}>
<SelectTrigger>
<SelectValue placeholder="Select meal type" />
<SelectValue placeholder="Select status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All Types</SelectItem>
<SelectItem value="breakfast">Breakfast</SelectItem>
<SelectItem value="lunch">Lunch</SelectItem>
<SelectItem value="dinner">Dinner</SelectItem>
<SelectItem value="all">All Statuses</SelectItem>
<SelectItem value="draft">Draft</SelectItem>
<SelectItem value="submitted">Submitted</SelectItem>
<SelectItem value="preparing">Preparing</SelectItem>
<SelectItem value="completed">Completed</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label>Create New Order</Label>
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
onClick={() => handleCreateOrder('breakfast')}
className="flex-1"
>
<Plus className="mr-1 h-3 w-3" />
Breakfast
</Button>
<Button
variant="outline"
size="sm"
onClick={() => handleCreateOrder('lunch')}
className="flex-1"
>
<Plus className="mr-1 h-3 w-3" />
Lunch
</Button>
<Button
variant="outline"
size="sm"
onClick={() => handleCreateOrder('dinner')}
className="flex-1"
>
<Plus className="mr-1 h-3 w-3" />
Dinner
</Button>
</div>
</div>
</div>
</CardContent>
</Card>
@@ -174,28 +232,48 @@ export default function OrdersListPage() {
</div>
) : orders.length === 0 ? (
<div className="flex flex-col items-center justify-center p-8 text-center">
<p className="text-muted-foreground">No orders found for the selected criteria.</p>
<Button asChild className="mt-4">
<Link href="/caregiver/orders/new">Create New Order</Link>
</Button>
<p className="text-muted-foreground">No orders found for the selected date.</p>
<p className="text-sm text-muted-foreground mt-2">
Create a new order using the buttons above.
</p>
</div>
) : (
<Table>
<TableHeader>
<TableRow>
<TableHead>Resident</TableHead>
<TableHead>Meal Type</TableHead>
<TableHead>Date</TableHead>
<TableHead>Meal</TableHead>
<TableHead>Meals</TableHead>
<TableHead>Status</TableHead>
<TableHead className="text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{orders.map((order) => (
<TableRow key={order.id}>
<TableCell className="font-medium">{getResidentName(order.resident)}</TableCell>
<TableCell className="font-medium">
{getMealTypeLabel(order.mealType)}
</TableCell>
<TableCell>{order.date}</TableCell>
<TableCell>{getMealTypeLabel(order.mealType)}</TableCell>
<TableCell>{order.mealCount} residents</TableCell>
<TableCell>{getStatusBadge(order.status)}</TableCell>
<TableCell className="text-right">
<Button variant="outline" size="sm" asChild>
<Link href={`/caregiver/orders/${order.id}`}>
{order.status === 'draft' ? (
<>
<Pencil className="mr-1 h-3 w-3" />
Edit
</>
) : (
<>
<Eye className="mr-1 h-3 w-3" />
View
</>
)}
</Link>
</Button>
</TableCell>
</TableRow>
))}
</TableBody>