From 778dc144976d0798d3c008d78499f6606d7003cf Mon Sep 17 00:00:00 2001 From: sheraj <123598317+sheraj923@users.noreply.github.com> Date: Thu, 27 Jun 2024 11:14:19 -0600 Subject: [PATCH] done with the customer page of the restaurant --- app/restraunt/customer/page.js | 177 ++++++++++++++++++ .../dashbord_resta/component/navbar/page.js | 2 +- 2 files changed, 178 insertions(+), 1 deletion(-) create mode 100644 app/restraunt/customer/page.js diff --git a/app/restraunt/customer/page.js b/app/restraunt/customer/page.js new file mode 100644 index 0000000..3ecfa10 --- /dev/null +++ b/app/restraunt/customer/page.js @@ -0,0 +1,177 @@ +/** + * v0 by Vercel. + * @see https://v0.dev/t/8qq9NhUyhgv + * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app + */ +"use client" + +import { useState } from "react" +import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card" +import { Input } from "@/components/ui/input" +import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table" +import { Button } from "@/components/ui/button" +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog" + +export default function Component() { + const [searchTerm, setSearchTerm] = useState("") + const [showOrderHistory, setShowOrderHistory] = useState(null) + const handleSearch = (event) => { + setSearchTerm(event.target.value) + } + const filterCustomers = (customers) => { + return customers.filter((customer) => { + const searchValue = searchTerm.toLowerCase() + const customerValue = customer.name.toLowerCase() + return customerValue.includes(searchValue) + }) + } + const customers = [ + { + name: "John Doe", + email: "john@example.com", + phone: "555-1234", + lastVisit: "2023-05-15", + orders: [ + { id: 1, date: "2023-05-10", total: 25.99 }, + { id: 2, date: "2023-04-20", total: 18.75 }, + { id: 3, date: "2023-03-15", total: 32.5 }, + ], + }, + { + name: "Jane Smith", + email: "jane@example.com", + phone: "555-5678", + lastVisit: "2023-04-30", + orders: [ + { id: 4, date: "2023-04-25", total: 41.25 }, + { id: 5, date: "2023-03-10", total: 27.99 }, + ], + }, + { + name: "Bob Johnson", + email: "bob@example.com", + phone: "555-9012", + lastVisit: "2023-03-20", + orders: [ + { id: 6, date: "2023-03-18", total: 16.5 }, + { id: 7, date: "2023-02-28", total: 22.75 }, + { id: 8, date: "2023-01-15", total: 29.99 }, + ], + }, + { + name: "Alice Williams", + email: "alice@example.com", + phone: "555-3456", + lastVisit: "2023-02-10", + orders: [{ id: 9, date: "2023-02-05", total: 37.25 }], + }, + { name: "Tom Davis", email: "tom@example.com", phone: "555-7890", lastVisit: "2023-01-05", orders: [] }, + ] + const filteredCustomers = filterCustomers(customers) + return ( +
+
+ + + Customer History + + View the history of customers who have visited the restaurant. + + + +
+ +
+ + + + # + Name + Email + Phone + Last Visit + Order History + + + + {filteredCustomers.map((customer, index) => ( + + {index + 1} + {customer.name} + {customer.email} + {customer.phone} + {customer.lastVisit} + + + + + ))} + +
+ + + {showOrderHistory && ( + setShowOrderHistory(null)} + className="bg-gray-50 rounded-lg shadow-lg" + > + + + Order History for {showOrderHistory.name} + + Here are the orders placed by {showOrderHistory.name}. + + +
+ {showOrderHistory.orders.length === 0 ? ( +

No orders found for this customer.

+ ) : ( + + + + Order ID + Date + Total + + + + {showOrderHistory.orders.map((order) => ( + + #{order.id} + {order.date} + ${order.total.toFixed(2)} + + ))} + +
+ )} +
+ + + + + + )} +
+
+ ) +} diff --git a/app/restraunt/dashbord_resta/component/navbar/page.js b/app/restraunt/dashbord_resta/component/navbar/page.js index 60b4f43..8b584a5 100644 --- a/app/restraunt/dashbord_resta/component/navbar/page.js +++ b/app/restraunt/dashbord_resta/component/navbar/page.js @@ -46,7 +46,7 @@ export default function Navbar() { Orders