ExpiryAlert.tsx
4.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
import { useEffect, useState } from "react";
import { AlertTriangle, X } from "lucide-react";
import { Button } from "./ui/button";
import { useLanguage } from "../contexts/LanguageContext";
interface ExpiryItem {
id: string;
nameKey: string;
expiryDate: string;
location: string;
}
export function ExpiryAlert() {
const { t } = useLanguage();
const [showAlert, setShowAlert] = useState(false);
const [expiryItems, setExpiryItems] = useState<ExpiryItem[]>([]);
useEffect(() => {
// Check for expiring items every minute
const checkExpiry = () => {
const now = new Date();
const tomorrow = new Date(now);
tomorrow.setDate(tomorrow.getDate() + 1);
// Mock data - in real app, this would come from API
const items: ExpiryItem[] = [
{
id: "1",
nameKey: "food.chickenBreast",
expiryDate: tomorrow.toLocaleDateString(),
location: "Main Kitchen - Fridge #1",
},
{
id: "2",
nameKey: "food.caesarSalad",
expiryDate: tomorrow.toLocaleDateString(),
location: "Prep Station - Cooler",
},
];
if (items.length > 0) {
setExpiryItems(items);
setShowAlert(true);
}
};
// Check on mount and every 5 minutes
checkExpiry();
const interval = setInterval(checkExpiry, 5 * 60 * 1000);
return () => clearInterval(interval);
}, []);
if (!showAlert) return null;
return (
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-6">
<div className="bg-white rounded-2xl max-w-md w-full shadow-2xl">
{/* Header */}
<div className="bg-gradient-to-r from-orange-500 to-red-500 p-6 rounded-t-2xl">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<div className="p-3 bg-white rounded-full">
<AlertTriangle className="w-8 h-8 text-orange-500" />
</div>
<div>
<h2 className="text-2xl font-bold text-white">
{t("expiryAlert.title")}
</h2>
<p className="text-orange-50">
{expiryItems.length} {t("expiryAlert.itemsExpiring")}
</p>
</div>
</div>
<button
onClick={() => setShowAlert(false)}
className="text-white hover:bg-white/20 rounded-full p-2 transition-colors"
>
<X className="w-6 h-6" />
</button>
</div>
</div>
{/* Content */}
<div className="p-6 space-y-4 max-h-96 overflow-y-auto">
<p className="text-base text-gray-700 font-medium">
{t("expiryAlert.message")}
</p>
<div className="space-y-3">
{expiryItems.map((item) => (
<div
key={item.id}
className="p-4 bg-orange-50 border border-orange-200 rounded-lg"
>
<div className="flex items-start justify-between gap-3">
<div className="flex-1">
<h3 className="font-semibold text-gray-900 mb-1">
{t(item.nameKey)}
</h3>
<p className="text-sm text-gray-600 mb-1">
{t("expiryAlert.location")}: {item.location}
</p>
<p className="text-sm text-orange-700 font-medium">
{t("expiryAlert.expires")}: {item.expiryDate}
</p>
</div>
</div>
</div>
))}
</div>
</div>
{/* Actions */}
<div className="p-6 bg-gray-50 rounded-b-2xl space-y-3">
<Button
onClick={() => {
setShowAlert(false);
// Navigate to labels or inventory
}}
className="w-full h-12 text-base font-semibold"
>
{t("expiryAlert.viewAll")}
</Button>
<Button
variant="outline"
onClick={() => setShowAlert(false)}
className="w-full h-12 text-base"
>
{t("expiryAlert.dismiss")}
</Button>
</div>
</div>
</div>
);
}