Untitled
unknown
plain_text
a month ago
48 kB
6
Indexable
export default function CafePOSUI() { const tables = [ { name: 'T1', status: 'Occupied' }, { name: 'T2', status: 'Available' }, { name: 'T3', status: 'Occupied' }, { name: 'T4', status: 'Available' }, { name: 'T5', status: 'Reserved' }, { name: 'T6', status: 'Available' }, ];
const menuItems = [ { name: 'Peri Peri Fries', price: '₹180' }, { name: 'Cold Coffee', price: '₹140' }, { name: 'Pasta Alfredo', price: '₹260' }, { name: 'Veg Burger', price: '₹190' }, { name: 'Chocolate Shake', price: '₹160' }, { name: 'Garlic Bread', price: '₹120' }, ];
const cartItems = [ { name: 'Peri Peri Fries', qty: 2, price: '₹360' }, { name: 'Cold Coffee', qty: 1, price: '₹140' }, ];
return ( <div className="min-h-screen bg-gray-100 p-4"> <div className="grid grid-cols-12 gap-4 h-screen">
{/* Sidebar */}
<div className="col-span-2 bg-black text-white rounded-3xl p-4 shadow-xl flex flex-col justify-between">
<div>
<h1 className="text-2xl font-bold mb-8">Cafe POS</h1>
<div className="space-y-3">
{['Dashboard', 'POS Billing', 'Expenses', 'Reports', 'Inventory', 'Settings'].map((item) => (
<div
key={item}
className={`p-3 rounded-2xl cursor-pointer ${
item === 'POS Billing'
? 'bg-white text-black font-semibold'
: 'hover:bg-gray-800'
}`}
>
{item}
</div>
))}
</div>
</div>
<div className="text-sm text-gray-400">
Offline Mode Active
</div>
</div>
{/* Main Section */}
<div className="col-span-7 flex flex-col gap-4">
{/* Top Stats */}
<div className="grid grid-cols-4 gap-4">
{[
{ title: 'Today Sales', value: '₹18,420' },
{ title: 'Today Profit', value: '₹8,240' },
{ title: 'Orders', value: '64' },
{ title: 'Peak Time', value: '7PM - 10PM' },
].map((card) => (
<div
key={card.title}
className="bg-white rounded-3xl p-4 shadow-md"
>
<div className="text-gray-500 text-sm">{card.title}</div>
<div className="text-2xl font-bold mt-2">{card.value}</div>
</div>
))}
</div>
{/* Table Section */}
<div className="bg-white rounded-3xl p-4 shadow-md">
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-semibold">Tables</h2>
<button className="bg-black text-white px-4 py-2 rounded-xl">
Add Table
</button>
</div>
<div className="grid grid-cols-3 gap-3">
{tables.map((table) => (
<div
key={table.name}
className={`rounded-2xl p-4 shadow-sm border ${
table.status === 'Occupied'
? 'bg-red-50 border-red-200'
: table.status === 'Reserved'
? 'bg-yellow-50 border-yellow-200'
: 'bg-green-50 border-green-200'
}`}
>
<div className="text-lg font-bold">{table.name}</div>
<div className="text-sm mt-1">{table.status}</div>
</div>
))}
</div>
</div>
{/* Menu */}
<div className="bg-white rounded-3xl p-4 shadow-md flex-1 overflow-auto">
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-semibold">Menu</h2>
<input
placeholder="Search items..."
className="border rounded-xl px-4 py-2 w-64"
/>
</div>
<div className="grid grid-cols-3 gap-4">
{menuItems.map((item) => (
<div
key={item.name}
className="border rounded-2xl p-4 hover:shadow-lg cursor-pointer transition"
>
<div className="font-semibold text-lg">{item.name}</div>
<div className="text-gray-500 mt-2">{item.price}</div>
<button className="mt-4 w-full bg-black text-white py-2 rounded-xl">
Add
</button>
</div>
))}
</div>
</div>
</div>
{/* Cart Section */}
<div className="col-span-3 bg-white rounded-3xl p-4 shadow-xl flex flex-col">
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold">Current Order</h2>
<div className="bg-black text-white px-4 py-2 rounded-xl">
Table T1
</div>
</div>
<div className="flex-1 space-y-4 overflow-auto">
{cartItems.map((item) => (
<div
key={item.name}
className="border rounded-2xl p-4 flex justify-between items-center"
>
<div>
<div className="font-semibold">{item.name}</div>
<div className="text-sm text-gray-500">Qty: {item.qty}</div>
</div>
<div className="font-bold">{item.price}</div>
</div>
))}
</div>
<div className="border-t pt-4 mt-4 space-y-3">
<div className="flex justify-between text-lg">
<span>Subtotal</span>
<span>₹500</span>
</div>
<div className="flex justify-between text-lg">
<span>GST</span>
<span>₹25</span>
</div>
<div className="flex justify-between text-2xl font-bold">
<span>Total</span>
<span>₹525</span>
</div>
<div className="grid grid-cols-2 gap-3 mt-6">
<button className="bg-gray-200 py-3 rounded-2xl font-semibold">
Print KOT
</button>
<button className="bg-black text-white py-3 rounded-2xl font-semibold">
Generate Bill
</button>
</div>
<button className="w-full bg-green-600 text-white py-4 rounded-2xl text-lg font-semibold mt-3">
Receive Payment
</button>
</div>
</div>
</div>
</div>
); }
))}
))}
}}
))}
))
]}
}}
))})}Editor is loading...
Leave a Comment