diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx index dc46369..e39c98d 100644 --- a/src/app/admin/page.tsx +++ b/src/app/admin/page.tsx @@ -2,12 +2,153 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import ReactLenis from "lenis/react"; -import FaqDouble from '@/components/sections/faq/FaqDouble'; -import FooterBase from '@/components/sections/footer/FooterBase'; import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; -import TextAbout from '@/components/sections/about/TextAbout'; +import FooterBase from '@/components/sections/footer/FooterBase'; +import CardStack from '@/components/cardStack/CardStack'; +import ButtonShiftHover from '@/components/button/ButtonShiftHover/ButtonShiftHover'; +import { useState, useEffect, useCallback } from 'react'; +import { Phone, MessageCircle } from 'lucide-react'; // For call and WhatsApp icons + + +// Mock data for orders +interface OrderItem { + name: string; + quantity: number; + price: number; +} + +interface Order { + id: string; + customerName: string; + customerPhone: string; // E.g., "0550123456" + customerAddress: string; + items: OrderItem[]; + totalPrice: number; + timestamp: string; // ISO string or similar +} + +const mockOrders: Order[] = [ + { + id: "ORD001", customerName: "Ahmed Benali", customerPhone: "0550123456", customerAddress: "Rue Didouche Mourad, Alger Centre", items: [ + { name: "Burger Classique", quantity: 2, price: 450 }, + { name: "Frites XXL", quantity: 1, price: 200 }, + ], + totalPrice: 1100, + timestamp: new Date().toISOString(), + }, + { + id: "ORD002", customerName: "Fatima Zahra", customerPhone: "0770987654", customerAddress: "Cité El Wouroud, Bab Ezzouar", items: [ + { name: "Pizza Pepperoni", quantity: 1, price: 850 }, + { name: "Boisson Gazeuse", quantity: 2, price: 100 }, + ], + totalPrice: 1050, + timestamp: new Date(Date.now() - 5 * 60 * 1000).toISOString(), // 5 mins ago + }, + { + id: "ORD003", customerName: "Rachid Khelifa", customerPhone: "0660112233", customerAddress: "Boulevard Krim Belkacem, Oran", items: [ + { name: "Taco Poulet", quantity: 1, price: 500 }, + { name: "Chicken Nuggets (6pcs)", quantity: 1, price: 600 }, + { name: "Boisson Gazeuse", quantity: 1, price: 100 }, + ], + totalPrice: 1200, + timestamp: new Date(Date.now() - 10 * 60 * 1000).toISOString(), // 10 mins ago + }, +]; + +const OrderCard: React.FC<{ order: Order; onOrderReady: (id: string) => void }> = ({ order, onOrderReady }) => { + const formatPhoneNumberForWhatsApp = (phone: string) => { + // Remove leading '0' if present and add country code "+213" + let formatted = phone.startsWith('0') ? phone.substring(1) : phone; + if (!formatted.startsWith('213')) { + formatted = '213' + formatted; + } + return formatted; + }; + + return ( +
+

Commande #{order.id}

+
+

Client: {order.customerName}

+

Téléphone: {order.customerPhone}

+

Adresse: {order.customerAddress}

+

Heure: {new Date(order.timestamp).toLocaleTimeString('fr-FR')}

+
+
+

Articles:

+ +
+

Total: {order.totalPrice} DA

+ +
+ + + Appeler + + + + WhatsApp + + onOrderReady(order.id)} + className="flex-1 bg-primary-cta hover:bg-primary-cta/80 text-primary-cta-text" + ariaLabel={`Marquer la commande ${order.id} comme prête`} + /> +
+
+ ); +}; + + +export default function AdminPage() { + const [orders, setOrders] = useState([]); + + // Simulate fetching orders from a backend + const fetchOrders = useCallback(() => { + // In a real app, this would be an API call + console.log("Fetching orders..."); + // For now, load mockOrders if empty, otherwise just return current orders + setOrders(prevOrders => { + if (prevOrders.length === 0) { + return mockOrders; + } + return prevOrders; + }); + }, []); + + useEffect(() => { + fetchOrders(); // Fetch immediately on component mount + + const intervalId = setInterval(fetchOrders, 2000); // Fetch every 2 seconds + + return () => clearInterval(intervalId); // Cleanup interval on unmount + }, [fetchOrders]); + + const handleOrderReady = (id: string) => { + setOrders(prevOrders => prevOrders.filter(order => order.id !== id)); + console.log(`Order ${id} marked as ready and cleared.`); + // In a real app, this would also trigger an API call to update order status in backend + }; -export default function LandingPage() { return ( - + -
- -
+
+
+

Gestion des Commandes

+ {orders.length === 0 ? ( +

Aucune commande en attente.

+ ) : ( + + {orders.map((order) => ( + + ))} + + )} +
+
-
- -
- - + ); -} +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 2ae28fb..c4ea86b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -29,21 +29,13 @@ export default function LandingPage() { @@ -259,54 +166,33 @@ export default function LandingPage() {