[V0_FILE]typescriptreact:file="components/sidebar-nav.tsx" import { Menu, TableIcon as TableBar, CalendarRange, Truck, Calculator, Settings, LogOut } from "lucide-react" import { Button } from "@/components/ui/button" const navItems = [ { icon: Menu, label: "Menu", color: "text-green-600" }, { icon: TableBar, label: "Table Services", color: "text-gray-600" }, { icon: CalendarRange, label: "Reservation", color: "text-gray-600" }, { icon: Truck, label: "Delivery", color: "text-gray-600" }, { icon: Calculator, label: "Accounting", color: "text-gray-600" }, { icon: Settings, label: "Settings", color: "text-gray-600" }, ] export function SidebarNav() { return (

CHILI POS

) } [V0_FILE]typescriptreact:file="components/header.tsx" import { Search, Share2 } from "lucide-react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" export function Header() { return (

Table 4 Floyd Miles

) } [V0_FILE]typescriptreact:file="components/category-filter.tsx" import { Grid, Coffee, Soup, UtensilsCrossed, ChefHat, Sandwich } from "lucide-react" const categories = [ { icon: Grid, label: "All", items: "235 Items", active: true }, { icon: Coffee, label: "Breakfast", items: "19 Items" }, { icon: Soup, label: "Soups", items: "8 Items" }, { icon: UtensilsCrossed, label: "Pasta", items: "14 Items" }, { icon: ChefHat, label: "Main Course", items: "27 Items" }, { icon: Sandwich, label: "Burges", items: "13 Items" }, ] export function CategoryFilter() { return (

{categories.map((category, index) => (

{category.label} {category.items}

))}

) } [V0_FILE]typescriptreact:file="components/dining-mode.tsx" import { Button } from "@/components/ui/button" const modes = ["Dine in", "Take Away", "Delivery"] export function DiningMode() { return (

{modes.map((mode, index) => ( ))}

) } [V0_FILE]typescriptreact:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 142.1 76.2% 36.3%; --primary-foreground: 355.7 100% 97.3%; --secondary: 142.1 76.2% 36.3%; --secondary-foreground: 355.7 100% 97.3%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 142.1 76.2% 36.3%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/cart-item.tsx" interface CartItemProps { title: string price: number quantity: number image: string } export function CartItem({ title, price, quantity, image }: CartItemProps) { return (

{title}

${price.toFixed(2)} {quantity}X

) } [V0_FILE]typescriptreact:file="components/order-footer.tsx" interface OrderFooterProps { tableNumber: string items: number kitchen: string process?: boolean } export function OrderFooter({ tableNumber, items, kitchen, process }: OrderFooterProps) { return (

{tableNumber}

{items} Items → {kitchen}

{process &&

Process

}

) } [V0_FILE]typescriptreact:file="components/food-grid.tsx" import { FoodCard } from "./food-card" const foodItems = [ { image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-01-12%20at%2012.32.42%20PM-QicgA83ZI0TfZlOynDOqlhOGnbwzEv.jpeg", title: "Tasty Vegetable Salad Healthy Diet", price: 17.99, discount: 20, type: "Veg", }, { image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-01-12%20at%2012.32.42%20PM-QicgA83ZI0TfZlOynDOqlhOGnbwzEv.jpeg", title: "Original Chess Meat Burger With Chips", price: 23.99, type: "Non Veg", }, { image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-01-12%20at%2012.32.42%20PM-QicgA83ZI0TfZlOynDOqlhOGnbwzEv.jpeg", title: "Tacos Salsa With Chickens Grilled", price: 14.99, type: "Non Veg", }, { image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-01-12%20at%2012.32.42%20PM-QicgA83ZI0TfZlOynDOqlhOGnbwzEv.jpeg", title: "Fresh Orange Juice With Basil Seed", price: 12.99, type: "Veg", }, { image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-01-12%20at%2012.32.42%20PM-QicgA83ZI0TfZlOynDOqlhOGnbwzEv.jpeg", title: "Meat Sushi Maki With Tuna, Ship And Other", price: 9.99, type: "Non Veg", }, { image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-01-12%20at%2012.32.42%20PM-QicgA83ZI0TfZlOynDOqlhOGnbwzEv.jpeg", title: "Original Chess Burger With French Fries", price: 10.59, discount: 20, type: "Veg", }, ] export function FoodGrid() { return (

{foodItems.map((item, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/cart.tsx" import { Button } from "@/components/ui/button" import { CreditCard, QrCode, Banknote, Edit2 } from "lucide-react" const cartItems = [ { title: "Original Chess Meat Burger With Chips (Non Veg)", price: 23.99, quantity: 1 }, { title: "Fresh Orange Juice With Basil Seed No Sugar (Veg)", price: 12.99, quantity: 1 }, { title: "Meat Sushi Maki With Tuna, Ship And Other (Non Veg)", price: 9.99, quantity: 1 }, { title: "Tacos Salsa With Chickens Grilled", price: 14.99, quantity: 1 }, ] export function Cart() { const subtotal = cartItems.reduce((acc, item) => acc + item.price * item.quantity, 0) const tax = subtotal * 0.05 const total = subtotal + tax return (

Table 4

Floyd Miles

{cartItems.map((item, index) => (

{item.title}

${item.price.toFixed(2)} {item.quantity}X

))}

Sub Total ${subtotal.toFixed(2)}

Tax 5% ${tax.toFixed(2)}

Total Amount ${total.toFixed(2)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { SidebarNav } from "../components/sidebar-nav" import { Header } from "../components/header" import { CategoryFilter } from "../components/category-filter" import { FoodGrid } from "../components/food-grid" import { Cart } from "../components/cart" import { Footer } from "../components/footer" export default function POSPage() { return (

) } [V0_FILE]typescriptreact:file="components/food-card.tsx" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Minus, Plus } from "lucide-react" interface FoodCardProps { image: string title: string price: number discount?: number type: "Veg" | "Non Veg" } export function FoodCard({ image, title, price, discount, type }: FoodCardProps) { return (

{discount && (

{discount}% Off

)}

{title}

${price.toFixed(2)}

{type}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" export function Footer() { const orders = [ { table: "T1", items: 6, kitchen: "Kitchen", status: "Process" }, { table: "T2", items: 4, kitchen: "Kitchen" }, { table: "T3", items: 3, kitchen: "Kitchen" }, ] return (

{orders.map((order, index) => (

{order.table}

{order.items} Items → {order.kitchen}

{order.status &&

{order.status}

}

))}

) }