[V0_FILE]typescriptreact:file="app/data/cafe-data.json" { "menu": [ { "id": 1, "name": "Masala Chai", "price": 20, "category": "Beverages" }, { "id": 2, "name": "Filter Coffee", "price": 30, "category": "Beverages" }, { "id": 3, "name": "Samosa", "price": 15, "category": "Snacks" }, { "id": 4, "name": "Vada Pav", "price": 25, "category": "Snacks" }, { "id": 5, "name": "Paneer Butter Masala", "price": 180, "category": "Main Course" }, { "id": 6, "name": "Butter Naan", "price": 40, "category": "Breads" }, { "id": 7, "name": "Gulab Jamun", "price": 50, "category": "Desserts" } ], "orders": [ { "id": 1, "items": [ { "id": 1, "name": "Masala Chai", "price": 20, "quantity": 2 }, { "id": 3, "name": "Samosa", "price": 15, "quantity": 3 } ], "total": 85, "date": "2023-05-15T10:30:00Z" }, { "id": 2, "items": [ { "id": 5, "name": "Paneer Butter Masala", "price": 180, "quantity": 1 }, { "id": 6, "name": "Butter Naan", "price": 40, "quantity": 2 } ], "total": 260, "date": "2023-05-15T13:45:00Z" } ] } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useAuth } from "./contexts/AuthContext" import Link from "next/link" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Menu, ClipboardList, BarChart3, Package, DollarSign, Users, ShoppingCart } from "lucide-react" export default function Dashboard() { const { user } = useAuth() if (!user) { return (

Welcome to Memer Cafe

Please log in to access the dashboard.

) } return (

Welcome back, {user.username}

Here's what's happening at your cafe today.

Today's Sales

₹12,450

+18% from yesterday

Total Orders

12 pending

Active Tables

2 reserved

Menu Management

View and manage your menu items

{user.role === "admin" && ( )}

setSearch(e.target.value)} className="pl-9 bg-zinc-900 border-zinc-700 text-white placeholder:text-zinc-500" />

Name Category Price (INR) {user.role === "admin" && Actions} {filteredMenu.map((item) => ( {item.name} {item.category} ₹{item.price.toFixed(2)} {user.role === "admin" && ( )} ))}

) } [V0_FILE]typescriptreact:file="app/orders/page.tsx" "use client" import { useState } from "react" import { useAuth } from "../contexts/AuthContext" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Button } from "@/components/ui/button" import { Printer, Plus, Minus, Trash2 } from "lucide-react" import cafeData from "../data/cafe-data.json" export default function OrdersPage() { const { user } = useAuth() const [order, setOrder] = useState([]) const [total, setTotal] = useState(0) if (!user) { return

Please log in to manage orders.

} const addToOrder = (item) => { const existingItem = order.find((orderItem) => orderItem.id === item.id) if (existingItem) { setOrder( order.map((orderItem) => orderItem.id === item.id ? { ...orderItem, quantity: orderItem.quantity + 1 } : orderItem, ), ) } else { setOrder([...order, { ...item, quantity: 1 }]) } setTotal(total + item.price) } const removeFromOrder = (item) => { const existingItem = order.find((orderItem) => orderItem.id === item.id) if (existingItem.quantity === 1) { setOrder(order.filter((orderItem) => orderItem.id !== item.id)) } else { setOrder( order.map((orderItem) => orderItem.id === item.id ? { ...orderItem, quantity: orderItem.quantity - 1 } : orderItem, ), ) } setTotal(total - item.price) } const deleteFromOrder = (item) => { setOrder(order.filter((orderItem) => orderItem.id !== item.id)) setTotal(total - item.price * item.quantity) } const handlePrint = () => { const printContent = document.getElementById("billContent").innerHTML const originalContent = document.body.innerHTML document.body.innerHTML = printContent window.print() document.body.innerHTML = originalContent window.location.reload() } return (

New Order

Create and manage orders

Menu Items

Item Price Action {cafeData.menu.map((item) => ( {item.name} ₹{item.price.toFixed(2)} ))}

Current Order

Item Qty Price Actions {order.map((item) => ( {item.name} {item.quantity} ₹{(item.price * item.quantity).toFixed(2)}

))}

Total: ₹{total.toFixed(2)}

) } [V0_FILE]typescriptreact:file="app/reports/page.tsx" "use client" import { useAuth } from "../contexts/AuthContext" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import cafeData from "../data/cafe-data.json" import { DollarSign, TrendingUp, ShoppingCart, Users } from "lucide-react" export default function ReportsPage() { const { user } = useAuth() if (!user) { return

Please log in to view reports.

} if (user.role !== "admin") { return

You do not have permission to view this page.

} const totalSales = cafeData.orders.reduce((sum, order) => sum + order.total, 0) const averageOrderValue = totalSales / cafeData.orders.length const totalOrders = cafeData.orders.length return (

Reports

View your sales and performance metrics

Total Sales

₹{totalSales.toFixed(2)}

+20.1% from last month

Average Order Value

₹{averageOrderValue.toFixed(2)}

+4.75% from last week

Total Orders

{totalOrders}

+12.3% from last month

Active Customers

156

+28.4% from last month

Recent Orders

Order ID Date Items Total {cafeData.orders.map((order) => ( #{order.id} {new Date(order.date).toLocaleString()} {order.items.map((item) => `${item.name} (${item.quantity})`).join(", ")} ₹{order.total.toFixed(2)} ))}

) } [V0_FILE]typescriptreact:file="app/contexts/AuthContext.tsx" "use client" import type React from "react" import { createContext, useState, useContext, useEffect } from "react" type UserRole = "admin" | "employee" | "franchise" type User = { username: string role: UserRole location?: string } | null type AuthContextType = { user: User login: (username: string, password: string, location?: string) => Promise logout: () => void } const AuthContext = createContext(undefined) const defaultCredentials = { admin: { username: "admin", password: "admin123", role: "admin" as const }, employee: { username: "employee", password: "emp123", role: "employee" as const }, franchise: { username: "franchise", password: "partner123", role: "franchise" as const, locations: ["Mahesh Nagar", "Tonk Phatak"], }, } export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [user, setUser] = useState(null) useEffect(() => { const storedUser = localStorage.getItem("user") if (storedUser) { setUser(JSON.parse(storedUser)) } }, []) const login = async (username: string, password: string, location?: string) => { const adminCred = defaultCredentials.admin const employeeCred = defaultCredentials.employee const franchiseCred = defaultCredentials.franchise if (username === adminCred.username && password === adminCred.password) { const user = { username, role: adminCred.role } setUser(user) localStorage.setItem("user", JSON.stringify(user)) return true } else if (username === employeeCred.username && password === employeeCred.password) { const user = { username, role: employeeCred.role } setUser(user) localStorage.setItem("user", JSON.stringify(user)) return true } else if (username === franchiseCred.username && password === franchiseCred.password && location) { if (franchiseCred.locations.includes(location)) { const user = { username, role: franchiseCred.role, location } setUser(user) localStorage.setItem("user", JSON.stringify(user)) return true } } return false } const logout = () => { setUser(null) localStorage.removeItem("user") } return {children} } export const useAuth = () => { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescriptreact:file="app/login/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { useAuth } from "../contexts/AuthContext" export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const router = useRouter() const { login } = useAuth() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() const success = await login(email, password) if (success) { router.push("/") } } return (

{/* Left Section */}

Memer Cafe

{/* Right Section */}

Login

Email setEmail(e.target.value)} />

Password setPassword(e.target.value)} />

Forgot Password?

or continue with

Don't have an account yet?{" "} Register for free

) } [V0_FILE]typescriptreact:file="app/franchise-reports/page.tsx" "use client" import { useAuth } from "../contexts/AuthContext" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" export default function FranchiseReportsPage() { const { user } = useAuth() if (!user || user.role !== "franchise") { return

You do not have permission to view this page.

} // This is dummy data. In a real application, you would fetch this data from your backend. const franchiseData = { totalSales: 50000, orders: [ { id: 1, date: "2023-05-15", total: 1500 }, { id: 2, date: "2023-05-16", total: 2000 }, { id: 3, date: "2023-05-17", total: 1800 }, ], } return ( Franchise Report - {user.location}

Total Sales: ₹{franchiseData.totalSales.toFixed(2)}

Order ID Date Total (INR) {franchiseData.orders.map((order) => ( {order.id} {order.date} ₹{order.total.toFixed(2)} ))}

) } [V0_FILE]typescriptreact:file="app/inventory/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { useAuth } from "../contexts/AuthContext" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" export default function InventoryPage() { const { user } = useAuth() const [inventory, setInventory] = useState([ // Moved useState outside the conditional { id: 1, name: "Coffee Beans", quantity: 100 }, { id: 2, name: "Milk", quantity: 50 }, { id: 3, name: "Sugar", quantity: 75 }, ]) if (!user || user.role !== "franchise") { return

You do not have permission to view this page.

} const handleQuantityChange = (id: number, newQuantity: number) => { setInventory(inventory.map((item) => (item.id === id ? { ...item, quantity: newQuantity } : item))) } return ( Inventory Management - {user.location} Item Name Quantity Action {inventory.map((item) => ( {item.name} {item.quantity}

handleQuantityChange(item.id, Number.parseInt(e.target.value))} className="w-20" />

))}

) } [V0_FILE]typescriptreact:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 24 96% 53%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 24 96% 53%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 24 96% 53%; --primary-foreground: 0 0% 98%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 24 96% 53%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/components/Navigation.tsx" isQuickEdit="true" "use client" import Link from "next/link" import { useAuth } from "../contexts/AuthContext" import { Button } from "@/components/ui/button" import { LayoutDashboard, Menu, ClipboardList, BarChart3, Package, LogOut, ChevronDown } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function Navigation() { const { user, logout } = useAuth() return (

Memer Cafe {user && (

{user.role === "admin" && ( )} {user.role === "franchise" && ( )}

)}

{user ? ( Logout ) : ( )}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import "./globals.css" import { Inter } from "next/font/google" import type React from "react" import { AuthProvider } from "./contexts/AuthContext" import { Navigation } from "./components/Navigation" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Memer Cafe", description: "Memer Cafe Management Portal", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) }