"use client"; import { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Separator } from "@/components/ui/separator"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Search, ChevronDown, ChevronLeft, ChevronRight, Plus, Trash2, Settings, History, FileText, Star, Building2, Warehouse, CreditCard, QrCode } from "lucide-react"; import Image from "next/image"; interface MenuItem { id: string; name: string; category: string; price: number; image: string; description?: string; } interface OrderItem extends MenuItem { quantity: number; } const categories = [ { name: "Burger", icon: "🍔" }, { name: "Hot Dog", icon: "🌭" }, { name: "Pizza", icon: "🍕" }, { name: "Sandwich", icon: "🥪" }, { name: "Popcorn", icon: "🍿" }, { name: "Taco", icon: "🌮" }, { name: "Burrito", icon: "🌯" }, { name: "Pizza", icon: "🍕" }, { name: "Burrito", icon: "🌯" } ]; const menuItems: MenuItem[] = [ { id: "1", name: "Duck Salad", category: "Pizza", price: 35.0, image: "/placeholder.svg?height=200&width=300" }, { id: "2", name: "Breakfast board", category: "Taco", price: 14.0, image: "/placeholder.svg?height=200&width=300" }, { id: "3", name: "Hummus", category: "Sandwich", price: 24.0, image: "/placeholder.svg?height=200&width=300" }, { id: "4", name: "Roast beef", category: "Kebab", price: 17.5, image: "/placeholder.svg?height=200&width=300" }, { id: "5", name: "Tuna salad", category: "Popcorn", price: 35.0, image: "/placeholder.svg?height=200&width=300" }, { id: "6", name: "Salmon", category: "Burger", price: 48.0, image: "/placeholder.svg?height=200&width=300" }, { id: "7", name: "California roll", category: "Taco", price: 74.0, image: "/placeholder.svg?height=200&width=300" }, { id: "8", name: "Sashimi", category: "Burrito", price: 74.0, image: "/placeholder.svg?height=200&width=300" } ]; export default function Page() { const [selectedCategory, setSelectedCategory] = useState("All"); const [orderItems, setOrderItems] = useState([ { ...menuItems[3], quantity: 1, price: 12.0 }, { ...menuItems[4], quantity: 1, price: 14.0 }, { ...menuItems[5], quantity: 1, price: 45.0 }, { ...menuItems[6], quantity: 1, price: 22.0 }, { id: "9", name: "Duck carpaccio", category: "Special", price: 18.0, image: "", quantity: 1 } ]); const [draftNumber, setDraftNumber] = useState(1); const addToOrder = (item: MenuItem) => { const existingItem = orderItems.find((orderItem) => orderItem.id === item.id); if (existingItem) { setOrderItems( orderItems.map((orderItem) => orderItem.id === item.id ? { ...orderItem, quantity: orderItem.quantity + 1 } : orderItem ) ); } else { setOrderItems([...orderItems, { ...item, quantity: 1 }]); } }; const removeFromOrder = (id: string) => { setOrderItems(orderItems.filter((item) => item.id !== id)); }; const updateQuantity = (id: string, quantity: number) => { if (quantity === 0) { removeFromOrder(id); } else { setOrderItems(orderItems.map((item) => (item.id === id ? { ...item, quantity } : item))); } }; const subtotal = orderItems.reduce((sum, item) => sum + item.price * item.quantity, 0); const tax = subtotal * 0.1; const total = subtotal + tax; return (

{/* Left Sidebar */}

CHANNELS

Office

Main Warehouse

Warehouse East

Warehouse #12

Top Deals

Setting

History

Report

Sales Today

134.55$

{/* Main Content */}

{/* Header */}

CHANNELS

Categories

{item.name}

Draft #{draftNumber.toString().padStart(3, "0")}

{item.name}