[V0_FILE]typescriptreact:file="app/command-center/page.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export default function CommandCenterPage() { return (

{/* Main Dashboard Grid */}

{/* Agent Status Overview */} AGENT ALLOCATION

190

Active Field

990

Undercover

290

Training

{[ { id: "G-078W", name: "VENGEFUL SPIRIT", status: "active" }, { id: "G-079X", name: "OBSIDIAN SENTINEL", status: "standby" }, { id: "G-080Y", name: "GHOSTLY FURY", status: "active" }, { id: "G-081Z", name: "CURSED REVENANT", status: "compromised" }, ].map((agent) => (

{agent.id}

{agent.name}

))}

{/* Activity Log */} ACTIVITY LOG

{[ { time: "25/06/2025 09:29", agent: "gh0st_Fire", action: "completed mission in", location: "Berlin", target: "zer0_Nigh", }, { time: "25/06/2025 08:12", agent: "dr4g0n_V3in", action: "extracted high-value target in", location: "Cairo", target: null, }, { time: "24/06/2025 22:55", agent: "sn4ke_Sh4de", action: "lost communication in", location: "Havana", target: null, }, { time: "24/06/2025 21:33", agent: "ph4nt0m_R4ven", action: "initiated surveillance in", location: "Tokyo", target: null, }, { time: "24/06/2025 19:45", agent: "v0id_Walk3r", action: "compromised security in", location: "Moscow", target: "d4rk_M4trix", }, ].map((log, index) => (

{log.time}

Agent {log.agent} {log.action}{" "} {log.location} {log.target && ( {" "} with agent {log.target} )}

))}

{/* Encrypted Chat Activity */} ENCRYPTED CHAT ACTIVITY {/* Wireframe Sphere */}

{/* Grid lines */}

# 2025-06-17 14:23 UTC

{"> [AGT:gh0stfire] ::: INIT >> ^^^ loading secure channel"}

{"> CH#2 | 1231.9082464.500...xR3"}

{"> KEY LOCKED"}

{'> MSG >> "...mission override initiated... awaiting delta node clearance"'}

{/* Mission Activity Chart */} MISSION ACTIVITY OVERVIEW

{/* Chart Grid */}

{Array.from({ length: 48 }).map((_, i) => (

))}

{/* Chart Line */} {/* Y-axis labels */}

500 400 300 200

{/* X-axis labels */}

Jan 28, 2025 Feb 28, 2025

{/* Mission Information */} MISSION INFORMATION

Successful Missions

High Risk Mission 190

Medium Risk Mission 426

Low Risk Mission 920

Failed Missions

High Risk Mission 190

Medium Risk Mission 426

Low Risk Mission 920

) } [V0_FILE]typescriptreact:file="app/agent-network/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Search, Filter, MoreHorizontal, MapPin, Clock, Shield } from "lucide-react" export default function AgentNetworkPage() { const [searchTerm, setSearchTerm] = useState("") const [selectedAgent, setSelectedAgent] = useState(null) const agents = [ { id: "G-078W", name: "VENGEFUL SPIRIT", status: "active", location: "Berlin", lastSeen: "2 min ago", missions: 47, risk: "high", }, { id: "G-079X", name: "OBSIDIAN SENTINEL", status: "standby", location: "Tokyo", lastSeen: "15 min ago", missions: 32, risk: "medium", }, { id: "G-080Y", name: "GHOSTLY FURY", status: "active", location: "Cairo", lastSeen: "1 min ago", missions: 63, risk: "high", }, { id: "G-081Z", name: "CURSED REVENANT", status: "compromised", location: "Moscow", lastSeen: "3 hours ago", missions: 28, risk: "critical", }, { id: "G-082A", name: "VENOMOUS SHADE", status: "active", location: "London", lastSeen: "5 min ago", missions: 41, risk: "medium", }, { id: "G-083B", name: "MYSTIC ENIGMA", status: "training", location: "Base Alpha", lastSeen: "1 day ago", missions: 12, risk: "low", }, { id: "G-084C", name: "WRAITH AVENGER", status: "active", location: "Paris", lastSeen: "8 min ago", missions: 55, risk: "high", }, { id: "G-085D", name: "SPECTRAL FURY", status: "standby", location: "Sydney", lastSeen: "22 min ago", missions: 38, risk: "medium", }, ] const filteredAgents = agents.filter( (agent) => agent.name.toLowerCase().includes(searchTerm.toLowerCase()) || agent.id.toLowerCase().includes(searchTerm.toLowerCase()), ) return (

{/* Header */}

AGENT NETWORK

Manage and monitor field operatives

{/* Search and Stats */}

setSearchTerm(e.target.value)} className="pl-10 bg-neutral-800 border-neutral-600 text-white placeholder-neutral-400" />

ACTIVE AGENTS

847

COMPROMISED

IN TRAINING

{/* Agent List */} AGENT ROSTER

{filteredAgents.map((agent, index) => ( setSelectedAgent(agent)} > ))}

AGENT ID	CODENAME	STATUS	LOCATION	LAST SEEN	MISSIONS	RISK	ACTIONS
{agent.id}	{agent.name}	{agent.status}	{agent.location}	{agent.lastSeen}	{agent.missions}	{agent.risk}

{/* Agent Detail Modal */} {selectedAgent && (

{selectedAgent.name}

{selectedAgent.id}

STATUS

{selectedAgent.status}

LOCATION

{selectedAgent.location}

MISSIONS COMPLETED

{selectedAgent.missions}

RISK LEVEL

{selectedAgent.risk}

)}

) } [V0_FILE]typescriptreact:file="app/agent-network/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/operations/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Target, MapPin, Clock, Users, AlertTriangle, CheckCircle, XCircle } from "lucide-react" export default function OperationsPage() { const [selectedOperation, setSelectedOperation] = useState(null) const operations = [ { id: "OP-OMEGA-001", name: "SHADOW PROTOCOL", status: "active", priority: "critical", location: "Eastern Europe", agents: 5, progress: 75, startDate: "2025-06-15", estimatedCompletion: "2025-06-30", description: "Track high-value target in Eastern Europe", objectives: ["Locate target", "Establish surveillance", "Extract intelligence"], }, { id: "OP-DELTA-002", name: "GHOST FIRE", status: "planning", priority: "high", location: "Seoul", agents: 3, progress: 25, startDate: "2025-06-20", estimatedCompletion: "2025-07-05", description: "Infiltrate cybercrime network in Seoul", objectives: ["Penetrate network", "Gather evidence", "Identify key players"], }, { id: "OP-SIERRA-003", name: "NIGHT STALKER", status: "completed", priority: "medium", location: "Berlin", agents: 2, progress: 100, startDate: "2025-05-28", estimatedCompletion: "2025-06-12", description: "Monitor rogue agent communications in Berlin", objectives: ["Intercept communications", "Decode messages", "Report findings"], }, { id: "OP-ALPHA-004", name: "CRIMSON TIDE", status: "active", priority: "high", location: "Cairo", agents: 4, progress: 60, startDate: "2025-06-10", estimatedCompletion: "2025-06-25", description: "Support covert extraction in South America", objectives: ["Secure extraction point", "Neutralize threats", "Extract asset"], }, { id: "OP-BRAVO-005", name: "SILENT BLADE", status: "compromised", priority: "critical", location: "Moscow", agents: 6, progress: 40, startDate: "2025-06-05", estimatedCompletion: "2025-06-20", description: "Monitor rogue agent communications in Berlin", objectives: ["Assess compromise", "Extract personnel", "Damage control"], }, ] const getStatusColor = (status) => { switch (status) { case "active": return "bg-white/20 text-white" case "planning": return "bg-orange-500/20 text-orange-500" case "completed": return "bg-white/20 text-white" case "compromised": return "bg-red-500/20 text-red-500" default: return "bg-neutral-500/20 text-neutral-300" } } const getPriorityColor = (priority) => { switch (priority) { case "critical": return "bg-red-500/20 text-red-500" case "high": return "bg-orange-500/20 text-orange-500" case "medium": return "bg-neutral-500/20 text-neutral-300" case "low": return "bg-white/20 text-white" default: return "bg-neutral-500/20 text-neutral-300" } } const getStatusIcon = (status) => { switch (status) { case "active": return case "planning": return case "completed": return case "compromised": return default: return } } return (

{/* Header */}

OPERATIONS CENTER

Mission planning and execution oversight

{/* Stats Overview */}

ACTIVE OPS

COMPLETED

156

COMPROMISED

SUCCESS RATE

94%

{/* Operations List */}

{operations.map((operation) => ( setSelectedOperation(operation)} >

{operation.name}

{operation.id}

{getStatusIcon(operation.status)}

{operation.status.toUpperCase()} {operation.priority.toUpperCase()}

{operation.description}

{operation.location}

{operation.agents} agents assigned

Est. completion: {operation.estimatedCompletion}

Progress {operation.progress}%

))}

{/* Operation Detail Modal */} {selectedOperation && (

{selectedOperation.name}

{selectedOperation.id}

OPERATION STATUS

{selectedOperation.status.toUpperCase()} {selectedOperation.priority.toUpperCase()}

MISSION DETAILS

Location: {selectedOperation.location}

Agents: {selectedOperation.agents}

Start Date: {selectedOperation.startDate}

Est. Completion: {selectedOperation.estimatedCompletion}

PROGRESS

Completion {selectedOperation.progress}%

OBJECTIVES

{selectedOperation.objectives.map((objective, index) => (

{objective}

))}

DESCRIPTION

{selectedOperation.description}

)}

) } [V0_FILE]typescriptreact:file="app/intelligence/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Search, FileText, Eye, Download, Filter, Globe, Shield, AlertTriangle } from "lucide-react" export default function IntelligencePage() { const [searchTerm, setSearchTerm] = useState("") const [selectedReport, setSelectedReport] = useState(null) const reports = [ { id: "INT-2025-001", title: "CYBERCRIME NETWORK ANALYSIS", classification: "TOP SECRET", source: "SIGINT", location: "Eastern Europe", date: "2025-06-17", status: "verified", threat: "high", summary: "Detailed analysis of emerging cybercrime syndicate operating across multiple jurisdictions", tags: ["cybercrime", "international", "financial"], }, { id: "INT-2025-002", title: "ROGUE AGENT COMMUNICATIONS", classification: "SECRET", source: "HUMINT", location: "Berlin", date: "2025-06-16", status: "pending", threat: "critical", summary: "Intercepted communications suggesting potential security breach in European operations", tags: ["internal", "security", "communications"], }, { id: "INT-2025-003", title: "ARMS TRAFFICKING ROUTES", classification: "CONFIDENTIAL", source: "OSINT", location: "Middle East", date: "2025-06-15", status: "verified", threat: "medium", summary: "Updated intelligence on weapons smuggling corridors through Mediterranean region", tags: ["trafficking", "weapons", "maritime"], }, { id: "INT-2025-004", title: "TERRORIST CELL SURVEILLANCE", classification: "TOP SECRET", source: "HUMINT", location: "North Africa", date: "2025-06-14", status: "active", threat: "critical", summary: "Ongoing surveillance of suspected terrorist cell planning coordinated attacks", tags: ["terrorism", "surveillance", "coordinated"], }, { id: "INT-2025-005", title: "DIPLOMATIC INTELLIGENCE BRIEF", classification: "SECRET", source: "DIPLOMATIC", location: "Asia Pacific", date: "2025-06-13", status: "verified", threat: "low", summary: "Political developments affecting regional security and operational considerations", tags: ["diplomatic", "political", "regional"], }, ] const getClassificationColor = (classification) => { switch (classification) { case "TOP SECRET": return "bg-red-500/20 text-red-500" case "SECRET": return "bg-orange-500/20 text-orange-500" case "CONFIDENTIAL": return "bg-neutral-500/20 text-neutral-300" default: return "bg-white/20 text-white" } } const getThreatColor = (threat) => { switch (threat) { case "critical": return "bg-red-500/20 text-red-500" case "high": return "bg-orange-500/20 text-orange-500" case "medium": return "bg-neutral-500/20 text-neutral-300" case "low": return "bg-white/20 text-white" default: return "bg-neutral-500/20 text-neutral-300" } } const getStatusColor = (status) => { switch (status) { case "verified": return "bg-white/20 text-white" case "pending": return "bg-orange-500/20 text-orange-500" case "active": return "bg-white/20 text-white" default: return "bg-neutral-500/20 text-neutral-300" } } const filteredReports = reports.filter( (report) => report.title.toLowerCase().includes(searchTerm.toLowerCase()) || report.id.toLowerCase().includes(searchTerm.toLowerCase()) || report.tags.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase())), ) return (

{/* Header */}

INTELLIGENCE CENTER

Classified reports and threat analysis

{/* Stats and Search */}

setSearchTerm(e.target.value)} className="pl-10 bg-neutral-800 border-neutral-600 text-white placeholder-neutral-400" />

TOTAL REPORTS

1,247

CRITICAL THREATS

ACTIVE SOURCES

{/* Intelligence Reports */} INTELLIGENCE REPORTS

{filteredReports.map((report) => (

setSelectedReport(report)} >

{report.title}

{report.id}

{report.summary}

{report.tags.map((tag) => ( {tag} ))}

{report.classification} {report.threat.toUpperCase()} {report.status.toUpperCase()}

{report.location}

{report.source}

{report.date}

))}

{/* Report Detail Modal */} {selectedReport && (

{selectedReport.title}

{selectedReport.id}

CLASSIFICATION

{selectedReport.classification} THREAT: {selectedReport.threat.toUpperCase()}

SOURCE DETAILS

Source Type: {selectedReport.source}

Location: {selectedReport.location}

Date: {selectedReport.date}

Status: {selectedReport.status.toUpperCase()}

THREAT ASSESSMENT

Threat Level {selectedReport.threat.toUpperCase()}

EXECUTIVE SUMMARY

{selectedReport.summary}

)}

) } [V0_FILE]typescriptreact:file="app/intelligence/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/systems/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Server, Database, Shield, Wifi, HardDrive, Cpu, Activity, AlertTriangle, CheckCircle, Settings, } from "lucide-react" export default function SystemsPage() { const [selectedSystem, setSelectedSystem] = useState(null) const systems = [ { id: "SYS-001", name: "COMMAND SERVER ALPHA", type: "Primary Server", status: "online", health: 98, cpu: 45, memory: 67, storage: 34, uptime: "247 days", location: "Data Center 1", lastMaintenance: "2025-05-15", }, { id: "SYS-002", name: "DATABASE CLUSTER BETA", type: "Database", status: "online", health: 95, cpu: 72, memory: 84, storage: 78, uptime: "189 days", location: "Data Center 2", lastMaintenance: "2025-06-01", }, { id: "SYS-003", name: "SECURITY GATEWAY", type: "Firewall", status: "warning", health: 87, cpu: 23, memory: 45, storage: 12, uptime: "156 days", location: "DMZ", lastMaintenance: "2025-04-20", }, { id: "SYS-004", name: "COMMUNICATION HUB", type: "Network", status: "online", health: 92, cpu: 38, memory: 52, storage: 23, uptime: "203 days", location: "Network Core", lastMaintenance: "2025-05-28", }, { id: "SYS-005", name: "BACKUP STORAGE ARRAY", type: "Storage", status: "maintenance", health: 76, cpu: 15, memory: 28, storage: 89, uptime: "0 days", location: "Backup Facility", lastMaintenance: "2025-06-17", }, { id: "SYS-006", name: "ANALYTICS ENGINE", type: "Processing", status: "online", health: 94, cpu: 89, memory: 76, storage: 45, uptime: "134 days", location: "Data Center 1", lastMaintenance: "2025-05-10", }, ] const getStatusColor = (status) => { switch (status) { case "online": return "bg-white/20 text-white" case "warning": return "bg-orange-500/20 text-orange-500" case "maintenance": return "bg-neutral-500/20 text-neutral-300" case "offline": return "bg-red-500/20 text-red-500" default: return "bg-neutral-500/20 text-neutral-300" } } const getStatusIcon = (status) => { switch (status) { case "online": return case "warning": return case "maintenance": return case "offline": return default: return } } const getSystemIcon = (type) => { switch (type) { case "Primary Server": return case "Database": return case "Firewall": return case "Network": return case "Storage": return case "Processing": return default: return } } const getHealthColor = (health) => { if (health >= 95) return "text-white" if (health >= 85) return "text-white" if (health >= 70) return "text-orange-500" return "text-red-500" } return (

{/* Header */}

SYSTEMS MONITOR

Infrastructure health and performance monitoring

{/* System Overview Stats */}

SYSTEMS ONLINE

24/26

WARNINGS

AVG UPTIME

99.7%

MAINTENANCE

{/* Systems Grid */}

{systems.map((system) => ( setSelectedSystem(system)} >

{getSystemIcon(system.type)}

{system.name}

{system.type}

{getStatusIcon(system.status)} {system.status.toUpperCase()}

SYSTEM HEALTH {system.health}%

CPU

{system.cpu}%

MEMORY

{system.memory}%

STORAGE

{system.storage}%

Uptime: {system.uptime}

Location: {system.location}

))}

{/* System Detail Modal */} {selectedSystem && (

{getSystemIcon(selectedSystem.type)}

{selectedSystem.name}

{selectedSystem.id} • {selectedSystem.type}

SYSTEM STATUS

{getStatusIcon(selectedSystem.status)} {selectedSystem.status.toUpperCase()}

SYSTEM INFORMATION

Location: {selectedSystem.location}

Uptime: {selectedSystem.uptime}

Last Maintenance: {selectedSystem.lastMaintenance}

Health Score: {selectedSystem.health}%

RESOURCE USAGE

CPU Usage {selectedSystem.cpu}%

Memory Usage {selectedSystem.memory}%

Storage Usage {selectedSystem.storage}%

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { ChevronRight, Package, Users, ShoppingCart, TrendingUp, Settings, Bell, RefreshCw } from "lucide-react" import { Button } from "@/components/ui/button" import DashboardPage from "./dashboard/page" import InventoryPage from "./inventory/page" import SuppliersPage from "./suppliers/page" import PurchaseOrdersPage from "./purchase-orders/page" import ReportsPage from "./reports/page" import SettingsPage from "./settings/page" export default function RestaurantInventorySystem() { const [activeSection, setActiveSection] = useState("dashboard") const [sidebarCollapsed, setSidebarCollapsed] = useState(false) return (

{/* Sidebar */}

{"CATALOGIA"}

v1.2.4 MANAGEMENT

{[ { id: "dashboard", icon: TrendingUp, label: "DASHBOARD" }, { id: "inventory", icon: Package, label: "INVENTORY" }, { id: "suppliers", icon: Users, label: "SUPPLIERS" }, { id: "purchase-orders", icon: ShoppingCart, label: "PURCHASE ORDERS" }, { id: "reports", icon: TrendingUp, label: "REPORTS" }, { id: "settings", icon: Settings, label: "SETTINGS" }, ].map((item) => ( ))}

{!sidebarCollapsed && (

SYSTEM ONLINE

ITEMS: 1,247 TRACKED

LOW STOCK: 23 ALERTS

ORDERS: 8 PENDING

)}

{/* Mobile Overlay */} {!sidebarCollapsed && (

setSidebarCollapsed(true)} /> )} {/* Main Content */}

{/* Top Toolbar */}

RESTAURANT INVENTORY /{" "} {activeSection.toUpperCase().replace("-", " ")}

LAST UPDATE: {new Date().toLocaleString()}

{/* Dashboard Content */}

{activeSection === "dashboard" && } {activeSection === "inventory" && } {activeSection === "suppliers" && } {activeSection === "purchase-orders" && } {activeSection === "reports" && } {activeSection === "settings" && }

) } [V0_FILE]typescriptreact:file="app/inventory/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/suppliers/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/purchase-orders/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/settings/page.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Settings, User, Bell, Shield, Database } from "lucide-react" export default function SettingsPage() { return (

{/* Header */}

SYSTEM SETTINGS

Configure system preferences and user settings

{/* User Profile */} USER PROFILE

FIRST NAME

LAST NAME

ROLE ADMINISTRATOR

{/* Notifications */} NOTIFICATIONS

Low Stock Alerts

Get notified when items are running low

Order Updates

Receive purchase order status updates

Expiration Warnings

Alert for items nearing expiration

Weekly Reports

Automated weekly inventory reports

{/* Security */} SECURITY

CURRENT PASSWORD

NEW PASSWORD

CONFIRM PASSWORD

{/* System Preferences */} SYSTEM PREFERENCES

CURRENCY

TIME ZONE

DATE FORMAT

{/* Data Management */} DATA MANAGEMENT

BACKUP DATA

Create a backup of all inventory data

EXPORT DATA

Export inventory data to CSV/Excel

RESET SYSTEM

Clear all data and reset to defaults

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist_Mono as GeistMono } from "next/font/google" import "./globals.css" const geistMono = GeistMono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Restaurant Inventory Management System", description: "Professional inventory management for restaurants", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 0%; --foreground: 0 0% 100%; --card: 0 0% 0%; --card-foreground: 0 0% 100%; --popover: 0 0% 0%; --popover-foreground: 0 0% 100%; --primary: 24 100% 50%; --primary-foreground: 0 0% 100%; --secondary: 0 0% 6%; --secondary-foreground: 0 0% 100%; --muted: 0 0% 6%; --muted-foreground: 0 0% 64%; --accent: 0 0% 6%; --accent-foreground: 0 0% 100%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; --border: 0 0% 20%; --input: 0 0% 20%; --ring: 24 100% 50%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom scrollbar for dark theme */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #000000; } ::-webkit-scrollbar-thumb { background: #404040; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #606060; } /* Ensure pure black backgrounds */ .bg-black { background-color: #000000 !important; } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Package, AlertTriangle, DollarSign, TrendingUp, TrendingDown, Clock } from "lucide-react" export default function DashboardPage() { const lowStockItems = [ { name: "Tomatoes", current: 5, minimum: 20, unit: "lbs", category: "Produce" }, { name: "Chicken Breast", current: 8, minimum: 25, unit: "lbs", category: "Meat" }, { name: "Olive Oil", current: 2, minimum: 6, unit: "bottles", category: "Pantry" }, { name: "Flour", current: 15, minimum: 50, unit: "lbs", category: "Baking" }, ] const recentActivity = [ { time: "2 min ago", action: "Stock updated", item: "Ground Beef", quantity: "+25 lbs" }, { time: "15 min ago", action: "Order received", item: "Fresh Salmon", quantity: "+30 lbs" }, { time: "1 hour ago", action: "Low stock alert", item: "Tomatoes", quantity: "5 lbs remaining" }, { time: "2 hours ago", action: "Purchase order", item: "Dairy Products", quantity: "Order #PO-2025-001" }, ] return (

{/* Key Metrics */}

TOTAL ITEMS

1,247

+12 this week

LOW STOCK ALERTS

+5 since yesterday

INVENTORY VALUE

$47,892

-2.3% from last month

PENDING ORDERS

2 arriving today

{/* Low Stock Alerts */} CRITICAL LOW STOCK

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

{item.name}

{item.category}

{item.current} {item.unit}

Min: {item.minimum} {item.unit}

))}

{/* Recent Activity */} RECENT ACTIVITY

{recentActivity.map((activity, index) => (

{activity.time}

{activity.action} - {activity.item}

{activity.quantity}

))}

{/* Inventory Categories Overview */} INVENTORY BY CATEGORY

{[ { name: "Produce", items: 156, value: "$8,420", color: "bg-green-500" }, { name: "Meat & Seafood", items: 89, value: "$18,750", color: "bg-red-500" }, { name: "Dairy", items: 67, value: "$4,230", color: "bg-blue-500" }, { name: "Pantry", items: 234, value: "$6,890", color: "bg-yellow-500" }, { name: "Beverages", items: 145, value: "$3,450", color: "bg-purple-500" }, { name: "Frozen", items: 78, value: "$5,670", color: "bg-cyan-500" }, { name: "Baking", items: 123, value: "$2,340", color: "bg-pink-500" }, { name: "Supplies", items: 355, value: "$2,142", color: "bg-orange-500" }, ].map((category, index) => (

{category.name}

{category.items} items

{category.value}

))}

) } [V0_FILE]typescriptreact:file="app/inventory/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Search, Filter, Plus, Edit, Trash2, Package, AlertTriangle, X } from "lucide-react" export default function InventoryPage() { const [searchTerm, setSearchTerm] = useState("") const [selectedCategory, setSelectedCategory] = useState("all") const [selectedItem, setSelectedItem] = useState(null) const [showAddModal, setShowAddModal] = useState(false) const [showFilterModal, setShowFilterModal] = useState(false) const [inventoryItems, setInventoryItems] = useState([ { id: "INV-001", name: "Roma Tomatoes", category: "produce", currentStock: 5, minimumStock: 20, unit: "lbs", costPerUnit: 2.5, supplier: "Fresh Farm Co.", lastUpdated: "2025-01-13", status: "critical", }, { id: "INV-002", name: "Chicken Breast", category: "meat", currentStock: 8, minimumStock: 25, unit: "lbs", costPerUnit: 6.99, supplier: "Premium Meats", lastUpdated: "2025-01-13", status: "low", }, { id: "INV-003", name: "Whole Milk", category: "dairy", currentStock: 45, minimumStock: 30, unit: "gallons", costPerUnit: 3.49, supplier: "Dairy Fresh", lastUpdated: "2025-01-12", status: "good", }, { id: "INV-004", name: "Extra Virgin Olive Oil", category: "pantry", currentStock: 2, minimumStock: 6, unit: "bottles", costPerUnit: 12.99, supplier: "Mediterranean Imports", lastUpdated: "2025-01-11", status: "critical", }, { id: "INV-005", name: "Ground Beef 80/20", category: "meat", currentStock: 35, minimumStock: 20, unit: "lbs", costPerUnit: 5.49, supplier: "Premium Meats", lastUpdated: "2025-01-13", status: "good", }, { id: "INV-006", name: "All-Purpose Flour", category: "baking", currentStock: 15, minimumStock: 50, unit: "lbs", costPerUnit: 0.89, supplier: "Baking Supplies Inc.", lastUpdated: "2025-01-10", status: "low", }, { id: "INV-007", name: "Fresh Salmon Fillet", category: "meat", currentStock: 22, minimumStock: 15, unit: "lbs", costPerUnit: 14.99, supplier: "Ocean Fresh", lastUpdated: "2025-01-13", status: "good", }, { id: "INV-008", name: "Coca-Cola", category: "beverages", currentStock: 120, minimumStock: 100, unit: "cans", costPerUnit: 0.45, supplier: "Beverage Distributors", lastUpdated: "2025-01-12", status: "good", }, ]) const categories = ["all", "produce", "meat", "dairy", "pantry", "beverages", "frozen", "baking", "supplies"] const getStatusColor = (status) => { switch (status) { case "critical": return "bg-red-500/20 text-red-500" case "low": return "bg-orange-500/20 text-orange-500" case "good": return "bg-green-500/20 text-green-500" default: return "bg-neutral-500/20 text-neutral-300" } } const getStatusIcon = (status) => { switch (status) { case "critical": case "low": return case "good": return default: return } } const handleAddItem = (newItem) => { const item = { id: `INV-${String(inventoryItems.length + 1).padStart(3, "0")}`, ...newItem, lastUpdated: new Date().toISOString().split("T")[0], status: newItem.currentStock <= newItem.minimumStock * 0.5 ? "critical" : newItem.currentStock <= newItem.minimumStock ? "low" : "good", } setInventoryItems([...inventoryItems, item]) setShowAddModal(false) } const handleDeleteItem = (itemId) => { setInventoryItems(inventoryItems.filter((item) => item.id !== itemId)) setSelectedItem(null) } const filteredItems = inventoryItems.filter((item) => { const matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase()) || item.id.toLowerCase().includes(searchTerm.toLowerCase()) const matchesCategory = selectedCategory === "all" || item.category === selectedCategory return matchesSearch && matchesCategory }) return (

{/* Header */}

INVENTORY MANAGEMENT

Track and manage restaurant inventory items

{/* Search and Category Filter */}

setSearchTerm(e.target.value)} className="pl-10 bg-neutral-900 border-neutral-700 text-white placeholder-neutral-400" />

{/* Inventory Stats */}

TOTAL ITEMS

{filteredItems.length}

CRITICAL STOCK

{filteredItems.filter((item) => item.status === "critical").length}

LOW STOCK

{filteredItems.filter((item) => item.status === "low").length}

TOTAL VALUE

${filteredItems.reduce((sum, item) => sum + item.currentStock * item.costPerUnit, 0).toLocaleString()}

{/* Inventory Table */} INVENTORY ITEMS

{filteredItems.map((item, index) => ( setSelectedItem(item)} > ))}

ITEM	CATEGORY	STOCK	STATUS	COST/UNIT	SUPPLIER	ACTIONS
{item.name} {item.id}	{item.category.toUpperCase()}	{item.currentStock} {item.unit} Min: {item.minimumStock} {item.unit}	{getStatusIcon(item.status)} {item.status.toUpperCase()}	${item.costPerUnit.toFixed(2)}	{item.supplier}

{/* Add Item Modal */} {showAddModal && ( setShowAddModal(false)} onAdd={handleAddItem} categories={categories.filter((c) => c !== "all")} /> )} {/* Filter Modal */} {showFilterModal && ( setShowFilterModal(false)} onApply={(filters) => { setSelectedCategory(filters.category) setShowFilterModal(false) }} categories={categories} currentCategory={selectedCategory} /> )} {/* Item Detail Modal */} {selectedItem && (

{selectedItem.name}

{selectedItem.id}

CATEGORY

{selectedItem.category.toUpperCase()}

STATUS

{getStatusIcon(selectedItem.status)} {selectedItem.status.toUpperCase()}

CURRENT STOCK

{selectedItem.currentStock} {selectedItem.unit}

MINIMUM STOCK

{selectedItem.minimumStock} {selectedItem.unit}

COST PER UNIT

${selectedItem.costPerUnit.toFixed(2)}

TOTAL VALUE

${(selectedItem.currentStock * selectedItem.costPerUnit).toFixed(2)}

SUPPLIER

{selectedItem.supplier}

LAST UPDATED

{selectedItem.lastUpdated}

)}

) } // Add Item Modal Component function AddItemModal({ onClose, onAdd, categories }) { const [formData, setFormData] = useState({ name: "", category: "produce", currentStock: 0, minimumStock: 0, unit: "", costPerUnit: 0, supplier: "", }) const handleSubmit = (e) => { e.preventDefault() onAdd(formData) } return (

ADD NEW ITEM

ITEM NAME setFormData({ ...formData, name: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

CATEGORY

CURRENT STOCK setFormData({ ...formData, currentStock: Number(e.target.value) })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

MINIMUM STOCK setFormData({ ...formData, minimumStock: Number(e.target.value) })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

UNIT setFormData({ ...formData, unit: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" placeholder="lbs, gallons, pieces, etc." required />

COST PER UNIT setFormData({ ...formData, costPerUnit: Number(e.target.value) })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

SUPPLIER setFormData({ ...formData, supplier: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

) } // Filter Modal Component function FilterModal({ onClose, onApply, categories, currentCategory }) { const [filters, setFilters] = useState({ category: currentCategory, status: "all", stockLevel: "all", }) return (

FILTER OPTIONS

CATEGORY

STATUS

) } [V0_FILE]typescriptreact:file="app/suppliers/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Search, Plus, Edit, Phone, Mail, MapPin, Star, X } from "lucide-react" export default function SuppliersPage() { const [searchTerm, setSearchTerm] = useState("") const [selectedSupplier, setSelectedSupplier] = useState(null) const [showAddModal, setShowAddModal] = useState(false) const [showEditModal, setShowEditModal] = useState(false) const [showHistoryModal, setShowHistoryModal] = useState(false) const [showOrderModal, setShowOrderModal] = useState(false) const [suppliers, setSuppliers] = useState([ { id: "SUP-001", name: "Fresh Farm Co.", category: "Produce", contact: "John Smith", phone: "(555) 123-4567", email: "orders@freshfarm.com", address: "123 Farm Road, Green Valley, CA 90210", rating: 4.8, status: "active", totalOrders: 156, lastOrder: "2025-01-12", products: ["Tomatoes", "Lettuce", "Onions", "Peppers"], }, { id: "SUP-002", name: "Premium Meats", category: "Meat & Seafood", contact: "Sarah Johnson", phone: "(555) 234-5678", email: "sales@premiummeats.com", address: "456 Butcher Lane, Meat City, TX 75001", rating: 4.9, status: "active", totalOrders: 89, lastOrder: "2025-01-13", products: ["Chicken Breast", "Ground Beef", "Pork Chops", "Salmon"], }, { id: "SUP-003", name: "Dairy Fresh", category: "Dairy", contact: "Mike Wilson", phone: "(555) 345-6789", email: "orders@dairyfresh.com", address: "789 Milk Street, Cow Town, WI 53001", rating: 4.6, status: "active", totalOrders: 67, lastOrder: "2025-01-11", products: ["Whole Milk", "Cheese", "Butter", "Yogurt"], }, { id: "SUP-004", name: "Mediterranean Imports", category: "Pantry", contact: "Anna Rodriguez", phone: "(555) 456-7890", email: "info@medimports.com", address: "321 Olive Avenue, Import City, NY 10001", rating: 4.7, status: "active", totalOrders: 34, lastOrder: "2025-01-09", products: ["Olive Oil", "Pasta", "Spices", "Vinegar"], }, { id: "SUP-005", name: "Ocean Fresh", category: "Seafood", contact: "Captain Bob", phone: "(555) 567-8901", email: "catch@oceanfresh.com", address: "654 Harbor Drive, Seaside, FL 33101", rating: 4.5, status: "inactive", totalOrders: 23, lastOrder: "2024-12-15", products: ["Salmon", "Shrimp", "Cod", "Tuna"], }, ]) const getStatusColor = (status) => { switch (status) { case "active": return "bg-green-500/20 text-green-500" case "inactive": return "bg-red-500/20 text-red-500" case "pending": return "bg-orange-500/20 text-orange-500" default: return "bg-neutral-500/20 text-neutral-300" } } const getRatingStars = (rating) => { return Array.from({ length: 5 }, (_, i) => ( )) } const handleAddSupplier = (newSupplier) => { const supplier = { id: `SUP-${String(suppliers.length + 1).padStart(3, "0")}`, ...newSupplier, totalOrders: 0, lastOrder: "Never", rating: 0, } setSuppliers([...suppliers, supplier]) setShowAddModal(false) } const handleEditSupplier = (updatedSupplier) => { setSuppliers(suppliers.map((s) => (s.id === updatedSupplier.id ? updatedSupplier : s))) setShowEditModal(false) setSelectedSupplier(updatedSupplier) } const filteredSuppliers = suppliers.filter( (supplier) => supplier.name.toLowerCase().includes(searchTerm.toLowerCase()) || supplier.category.toLowerCase().includes(searchTerm.toLowerCase()) || supplier.contact.toLowerCase().includes(searchTerm.toLowerCase()), ) return (

{/* Header */}

SUPPLIER MANAGEMENT

Manage restaurant suppliers and vendor relationships

{/* Search and Stats */}

setSearchTerm(e.target.value)} className="pl-10 bg-neutral-900 border-neutral-700 text-white placeholder-neutral-400" />

ACTIVE SUPPLIERS

{suppliers.filter((s) => s.status === "active").length}

AVG RATING

4.7

{/* Suppliers Grid */}

{filteredSuppliers.map((supplier) => ( setSelectedSupplier(supplier)} >

{supplier.name}

{supplier.id}

{supplier.status.toUpperCase()}

{supplier.category.toUpperCase()}

{supplier.phone}

{supplier.email}

{supplier.address}

{getRatingStars(supplier.rating)} {supplier.rating}

{supplier.totalOrders} orders

PRODUCTS

{supplier.products.slice(0, 3).map((product, index) => ( {product} ))} {supplier.products.length > 3 && ( +{supplier.products.length - 3} )}

Last order: {supplier.lastOrder}

))}

{/* Add Supplier Modal */} {showAddModal && setShowAddModal(false)} onAdd={handleAddSupplier} />} {/* Edit Supplier Modal */} {showEditModal && selectedSupplier && ( setShowEditModal(false)} onSave={handleEditSupplier} /> )} {/* Order History Modal */} {showHistoryModal && selectedSupplier && ( setShowHistoryModal(false)} /> )} {/* Create Order Modal */} {showOrderModal && selectedSupplier && ( setShowOrderModal(false)} /> )} {/* Supplier Detail Modal */} {selectedSupplier && !showEditModal && !showHistoryModal && !showOrderModal && (

{selectedSupplier.name}

{selectedSupplier.id}

SUPPLIER STATUS

{selectedSupplier.status.toUpperCase()}

CONTACT INFORMATION

{selectedSupplier.phone}

{selectedSupplier.email}

{selectedSupplier.address}

PERFORMANCE

Rating:

{getRatingStars(selectedSupplier.rating)} {selectedSupplier.rating}

Total Orders: {selectedSupplier.totalOrders}

Last Order: {selectedSupplier.lastOrder}

Category: {selectedSupplier.category}

PRODUCTS SUPPLIED

{selectedSupplier.products.map((product, index) => ( {product} ))}

)}

) } // Add Supplier Modal function AddSupplierModal({ onClose, onAdd }) { const [formData, setFormData] = useState({ name: "", category: "Produce", contact: "", phone: "", email: "", address: "", status: "active", products: [], }) const handleSubmit = (e) => { e.preventDefault() onAdd(formData) } return (

ADD NEW SUPPLIER

SUPPLIER NAME setFormData({ ...formData, name: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

CATEGORY

CONTACT PERSON setFormData({ ...formData, contact: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

PHONE setFormData({ ...formData, phone: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

EMAIL setFormData({ ...formData, email: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

ADDRESS setFormData({ ...formData, address: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

) } // Edit Supplier Modal function EditSupplierModal({ supplier, onClose, onSave }) { const [formData, setFormData] = useState(supplier) const handleSubmit = (e) => { e.preventDefault() onSave(formData) } return (

EDIT SUPPLIER

SUPPLIER NAME setFormData({ ...formData, name: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

CATEGORY

CONTACT PERSON setFormData({ ...formData, contact: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

PHONE setFormData({ ...formData, phone: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

EMAIL setFormData({ ...formData, email: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

ADDRESS setFormData({ ...formData, address: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

) } // Order History Modal function OrderHistoryModal({ supplier, onClose }) { const orderHistory = [ { id: "PO-2025-001", date: "2025-01-12", amount: 1247.5, status: "delivered" }, { id: "PO-2024-089", date: "2024-12-28", amount: 892.3, status: "delivered" }, { id: "PO-2024-076", date: "2024-12-15", amount: 1156.75, status: "delivered" }, { id: "PO-2024-063", date: "2024-12-01", amount: 934.2, status: "delivered" }, { id: "PO-2024-051", date: "2024-11-18", amount: 1089.45, status: "delivered" }, ] return (

ORDER HISTORY - {supplier.name}

{orderHistory.map((order, index) => ( ))}

ORDER ID	DATE	AMOUNT	STATUS
{order.id}	{order.date}	${order.amount.toFixed(2)}	{order.status.toUpperCase()}

) } // Create Order Modal function CreateOrderModal({ supplier, onClose }) { const [orderItems, setOrderItems] = useState([{ product: "", quantity: 0, unit: "", unitPrice: 0 }]) const addOrderItem = () => { setOrderItems([...orderItems, { product: "", quantity: 0, unit: "", unitPrice: 0 }]) } const removeOrderItem = (index) => { setOrderItems(orderItems.filter((_, i) => i !== index)) } const updateOrderItem = (index, field, value) => { const updated = orderItems.map((item, i) => (i === index ? { ...item, [field]: value } : item)) setOrderItems(updated) } const totalAmount = orderItems.reduce((sum, item) => sum + item.quantity * item.unitPrice, 0) return (

CREATE ORDER - {supplier.name}

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

updateOrderItem(index, "product", e.target.value)} className="bg-neutral-800 border-neutral-700 text-white" /> updateOrderItem(index, "quantity", Number(e.target.value))} className="bg-neutral-800 border-neutral-700 text-white" /> updateOrderItem(index, "unit", e.target.value)} className="bg-neutral-800 border-neutral-700 text-white" /> updateOrderItem(index, "unitPrice", Number(e.target.value))} className="bg-neutral-800 border-neutral-700 text-white" />

))}

Total Amount: ${totalAmount.toFixed(2)}

) } [V0_FILE]typescriptreact:file="app/purchase-orders/page.tsx" isEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Search, Plus, Eye, Edit, Truck, Clock, CheckCircle, XCircle, X } from "lucide-react" export default function PurchaseOrdersPage() { const [searchTerm, setSearchTerm] = useState("") const [selectedOrder, setSelectedOrder] = useState(null) const [showNewOrderModal, setShowNewOrderModal] = useState(false) const [purchaseOrders, setPurchaseOrders] = useState([ { id: "PO-2025-001", supplier: "Fresh Farm Co.", status: "pending", orderDate: "2025-01-13", expectedDelivery: "2025-01-15", totalAmount: 1247.5, items: [ { name: "Roma Tomatoes", quantity: 50, unit: "lbs", unitPrice: 2.5 }, { name: "Lettuce", quantity: 30, unit: "heads", unitPrice: 1.99 }, { name: "Onions", quantity: 25, unit: "lbs", unitPrice: 1.25 }, ], }, { id: "PO-2025-002", supplier: "Premium Meats", status: "shipped", orderDate: "2025-01-12", expectedDelivery: "2025-01-14", totalAmount: 2890.75, items: [ { name: "Chicken Breast", quantity: 40, unit: "lbs", unitPrice: 6.99 }, { name: "Ground Beef", quantity: 30, unit: "lbs", unitPrice: 5.49 }, { name: "Salmon Fillet", quantity: 20, unit: "lbs", unitPrice: 14.99 }, ], }, { id: "PO-2025-003", supplier: "Dairy Fresh", status: "delivered", orderDate: "2025-01-10", expectedDelivery: "2025-01-12", totalAmount: 456.8, items: [ { name: "Whole Milk", quantity: 20, unit: "gallons", unitPrice: 3.49 }, { name: "Cheese", quantity: 15, unit: "lbs", unitPrice: 8.99 }, { name: "Butter", quantity: 10, unit: "lbs", unitPrice: 4.99 }, ], }, { id: "PO-2025-004", supplier: "Mediterranean Imports", status: "cancelled", orderDate: "2025-01-09", expectedDelivery: "2025-01-11", totalAmount: 789.25, items: [ { name: "Olive Oil", quantity: 12, unit: "bottles", unitPrice: 12.99 }, { name: "Pasta", quantity: 20, unit: "boxes", unitPrice: 2.49 }, { name: "Spices", quantity: 8, unit: "containers", unitPrice: 15.99 }, ], }, { id: "PO-2025-005", supplier: "Beverage Distributors", status: "pending", orderDate: "2025-01-13", expectedDelivery: "2025-01-16", totalAmount: 234.6, items: [ { name: "Coca-Cola", quantity: 200, unit: "cans", unitPrice: 0.45 }, { name: "Orange Juice", quantity: 24, unit: "bottles", unitPrice: 3.99 }, ], }, ]) const getStatusColor = (status) => { switch (status) { case "pending": return "bg-orange-500/20 text-orange-500" case "shipped": return "bg-blue-500/20 text-blue-500" case "delivered": return "bg-green-500/20 text-green-500" case "cancelled": return "bg-red-500/20 text-red-500" default: return "bg-neutral-500/20 text-neutral-300" } } const getStatusIcon = (status) => { switch (status) { case "pending": return case "shipped": return case "delivered": return case "cancelled": return default: return } } const handleCreateOrder = (newOrder) => { const order = { id: `PO-2025-${String(purchaseOrders.length + 1).padStart(3, "0")}`, ...newOrder, orderDate: new Date().toISOString().split("T")[0], status: "pending", } setPurchaseOrders([...purchaseOrders, order]) setShowNewOrderModal(false) } const filteredOrders = purchaseOrders.filter( (order) => order.id.toLowerCase().includes(searchTerm.toLowerCase()) || order.supplier.toLowerCase().includes(searchTerm.toLowerCase()), ) return (

{/* Header */}

PURCHASE ORDERS

Manage and track purchase orders

{/* Search and Stats */}

setSearchTerm(e.target.value)} className="pl-10 bg-neutral-900 border-neutral-700 text-white placeholder-neutral-400" />

PENDING

{purchaseOrders.filter((o) => o.status === "pending").length}

SHIPPED

{purchaseOrders.filter((o) => o.status === "shipped").length}

DELIVERED

{purchaseOrders.filter((o) => o.status === "delivered").length}

{/* Purchase Orders Table */} PURCHASE ORDERS

{filteredOrders.map((order, index) => ( setSelectedOrder(order)} > ))}

ORDER ID	SUPPLIER	STATUS	ORDER DATE	DELIVERY	TOTAL	ACTIONS
{order.id}	{order.supplier}	{getStatusIcon(order.status)} {order.status.toUpperCase()}	{order.orderDate}	{order.expectedDelivery}	${order.totalAmount.toFixed(2)}

{/* New Order Modal */} {showNewOrderModal && setShowNewOrderModal(false)} onCreate={handleCreateOrder} />} {/* Order Detail Modal */} {selectedOrder && (

{selectedOrder.id}

{selectedOrder.supplier}

ORDER STATUS

{getStatusIcon(selectedOrder.status)} {selectedOrder.status.toUpperCase()}

ORDER DETAILS

Order Date: {selectedOrder.orderDate}

Expected Delivery: {selectedOrder.expectedDelivery}

Total Amount: ${selectedOrder.totalAmount.toFixed(2)}

SUPPLIER

{selectedOrder.supplier}

ORDER ITEMS

{selectedOrder.items.map((item, index) => ( ))}

ITEM	QUANTITY	UNIT PRICE	TOTAL
{item.name}	{item.quantity} {item.unit}	${item.unitPrice.toFixed(2)}	${(item.quantity * item.unitPrice).toFixed(2)}

)}

) } // New Order Modal function NewOrderModal({ onClose, onCreate }) { const [formData, setFormData] = useState({ supplier: "", expectedDelivery: "", items: [{ name: "", quantity: 0, unit: "", unitPrice: 0 }], }) const addItem = () => { setFormData({ ...formData, items: [...formData.items, { name: "", quantity: 0, unit: "", unitPrice: 0 }], }) } const removeItem = (index) => { setFormData({ ...formData, items: formData.items.filter((_, i) => i !== index), }) } const updateItem = (index, field, value) => { const updatedItems = formData.items.map((item, i) => (i === index ? { ...item, [field]: value } : item)) setFormData({ ...formData, items: updatedItems }) } const totalAmount = formData.items.reduce((sum, item) => sum + item.quantity * item.unitPrice, 0) const handleSubmit = (e) => { e.preventDefault() onCreate({ ...formData, totalAmount, }) } return (

CREATE NEW ORDER

SUPPLIER setFormData({ ...formData, supplier: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

EXPECTED DELIVERY setFormData({ ...formData, expectedDelivery: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" required />

ORDER ITEMS

{formData.items.map((item, index) => (

updateItem(index, "name", e.target.value)} className="bg-neutral-800 border-neutral-700 text-white" required /> updateItem(index, "quantity", Number(e.target.value))} className="bg-neutral-800 border-neutral-700 text-white" required /> updateItem(index, "unit", e.target.value)} className="bg-neutral-800 border-neutral-700 text-white" required /> updateItem(index, "unitPrice", Number(e.target.value))} className="bg-neutral-800 border-neutral-700 text-white" required />

))}

Total Amount: ${totalAmount.toFixed(2)}

) } [V0_FILE]typescriptreact:file="app/reports/page.tsx" isEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { TrendingUp, TrendingDown, DollarSign, Package, Download, Calendar, X } from "lucide-react" export default function ReportsPage() { const [showExportModal, setShowExportModal] = useState(false) const [showDateRangeModal, setShowDateRangeModal] = useState(false) const [dateRange, setDateRange] = useState({ startDate: "2025-01-01", endDate: "2025-01-31", }) const monthlyData = [ { month: "Jan", inventory: 45000, orders: 12000, waste: 2300 }, { month: "Feb", inventory: 48000, orders: 13500, waste: 2100 }, { month: "Mar", inventory: 52000, orders: 15200, waste: 1900 }, { month: "Apr", inventory: 49000, orders: 14800, waste: 2200 }, { month: "May", inventory: 51000, orders: 16100, waste: 1800 }, { month: "Jun", inventory: 47000, orders: 15900, waste: 2000 }, ] const topItems = [ { name: "Chicken Breast", usage: 450, unit: "lbs", cost: 3147.5 }, { name: "Ground Beef", usage: 380, unit: "lbs", cost: 2086.2 }, { name: "Tomatoes", usage: 320, unit: "lbs", cost: 800.0 }, { name: "Lettuce", usage: 280, unit: "heads", cost: 557.2 }, { name: "Onions", usage: 250, unit: "lbs", cost: 312.5 }, ] const handleExport = (format) => { // Simulate export functionality const data = { dateRange, monthlyData, topItems, exportDate: new Date().toISOString(), } const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `inventory-report-${dateRange.startDate}-to-${dateRange.endDate}.${format}` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) setShowExportModal(false) } return (

{/* Header */}

REPORTS & ANALYTICS

Inventory insights and performance metrics

{/* Current Date Range Display */}

CURRENT REPORT PERIOD

{dateRange.startDate} to {dateRange.endDate}

{/* Key Metrics */}

MONTHLY SPEND

$15,900

-5.2% from last month

INVENTORY TURNOVER

8.2x

+0.8x from last month

WASTE COST

$2,000

-12% from last month

COST PER SERVING

$4.25

+2.1% from last month

{/* Monthly Trends Chart */} MONTHLY TRENDS

{/* Chart Grid */}

{Array.from({ length: 48 }).map((_, i) => (

))}

{/* Chart Lines */} {/* Legend */}

Inventory Value

Orders

Waste

{/* X-axis labels */}

{monthlyData.map((data) => ( {data.month} ))}

{/* Top Items */} TOP USAGE ITEMS

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

{item.name}

{item.usage} {item.unit} used

${item.cost.toFixed(2)}

#{index + 1}

))}

{/* Category Breakdown */} SPENDING BY CATEGORY

{[ { name: "Meat & Seafood", amount: 6750, percentage: 42, color: "bg-red-500" }, { name: "Produce", amount: 3200, percentage: 20, color: "bg-green-500" }, { name: "Dairy", amount: 2400, percentage: 15, color: "bg-blue-500" }, { name: "Pantry", amount: 1900, percentage: 12, color: "bg-yellow-500" }, { name: "Beverages", amount: 1100, percentage: 7, color: "bg-purple-500" }, { name: "Other", amount: 650, percentage: 4, color: "bg-neutral-500" }, ].map((category, index) => (

{category.name} ${category.amount.toLocaleString()}

{category.percentage}% of total spend

))}

{/* Waste Analysis */} WASTE ANALYSIS

{[ { item: "Lettuce", waste: 15, cost: 29.85, reason: "Spoilage" }, { item: "Tomatoes", waste: 12, cost: 30.0, reason: "Over-ordering" }, { item: "Bread", waste: 8, cost: 16.0, reason: "Expiration" }, { item: "Milk", waste: 6, cost: 20.94, reason: "Spoilage" }, { item: "Chicken", waste: 4, cost: 27.96, reason: "Prep waste" }, ].map((waste, index) => (

{waste.item}

{waste.reason}

${waste.cost.toFixed(2)}

{waste.waste} units

))}

{/* Export Modal */} {showExportModal && (

EXPORT REPORT

Select export format:

)} {/* Date Range Modal */} {showDateRangeModal && (

SELECT DATE RANGE

START DATE setDateRange({ ...dateRange, startDate: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" />

END DATE setDateRange({ ...dateRange, endDate: e.target.value })} className="mt-1 bg-neutral-900 border-neutral-700 text-white" />

)}

) }

AGENT NETWORK

OPERATIONS CENTER

OPERATION STATUS

MISSION DETAILS

PROGRESS

OBJECTIVES

DESCRIPTION

INTELLIGENCE CENTER

{report.title}

CLASSIFICATION

SOURCE DETAILS

TAGS

THREAT ASSESSMENT

EXECUTIVE SUMMARY

SYSTEMS MONITOR

SYSTEM STATUS

SYSTEM INFORMATION

RESOURCE USAGE

{"CATALOGIA"}

SYSTEM SETTINGS

BACKUP DATA

EXPORT DATA

RESET SYSTEM

INVENTORY MANAGEMENT

SUPPLIER MANAGEMENT

SUPPLIER STATUS

CONTACT INFORMATION

PERFORMANCE

PRODUCTS SUPPLIED

PURCHASE ORDERS

ORDER STATUS

ORDER DETAILS

SUPPLIER

ORDER ITEMS

ORDER ITEMS

REPORTS & ANALYTICS

About

Tags

Share

About

Tags

Share

More from princemirxcle-1218

More Templates Like This

About

Tags

Share

About

Tags

Share

More from princemirxcle-1218

More Templates Like This