diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx new file mode 100644 index 0000000..638bb51 --- /dev/null +++ b/src/app/admin/page.tsx @@ -0,0 +1,332 @@ +"use client"; + +import { useState } from "react"; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; +import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'; +import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard'; +import { Settings, Clock, DollarSign, UtensilsCrossed, LogOut } from 'lucide-react'; + +export default function AdminPage() { + const [activeTab, setActiveTab] = useState<'hours' | 'prices' | 'menu'>('hours'); + const [hours, setHours] = useState({ + monday: { open: 'Closed', close: '' }, + tuesday: { open: '11:00 AM', close: '9:00 PM' }, + wednesday: { open: '11:00 AM', close: '9:00 PM' }, + thursday: { open: '11:00 AM', close: '9:00 PM' }, + friday: { open: '11:00 AM', close: '9:30 PM' }, + saturday: { open: '9:00 AM', close: '9:00 PM' }, + sunday: { open: '11:00 AM', close: '9:00 PM' }, + }); + + const [prices, setPrices] = useState([ + { id: 'camarones-diabla', name: 'Camarones a la Diabla', price: '24.00' }, + { id: 'ceviche-pina', name: 'Ceviche en su Piña', price: '28.00' }, + { id: 'molcajete-mixto', name: 'Molcajete Mixto', price: '38.99' }, + { id: 'tacos-camarones', name: 'Tacos de Camarón', price: '20.00' }, + ]); + + const [menuItems, setMenuItems] = useState([ + { id: '1', name: 'Camarones a la Diabla', description: 'Spicy deviled shrimp', available: true }, + { id: '2', name: 'Ceviche en su Piña', description: 'Ceviche served in pineapple', available: true }, + { id: '3', name: 'Molcajete Mixto', description: 'Mixed molcajete stone bowl', available: true }, + { id: '4', name: 'Tacos de Camarón', description: 'Fresh shrimp tacos', available: true }, + ]); + + const [newItem, setNewItem] = useState({ name: '', description: '' }); + + const handleHourChange = (day: string, field: 'open' | 'close', value: string) => { + setHours(prev => ({ + ...prev, + [day]: { ...prev[day as keyof typeof hours], [field]: value } + })); + }; + + const handlePriceChange = (id: string, price: string) => { + setPrices(prev => prev.map(p => p.id === id ? { ...p, price } : p)); + }; + + const handleToggleMenuItem = (id: string) => { + setMenuItems(prev => prev.map(item => item.id === id ? { ...item, available: !item.available } : item)); + }; + + const handleAddMenuItem = () => { + if (newItem.name && newItem.description) { + setMenuItems(prev => [...prev, { id: Date.now().toString(), name: newItem.name, description: newItem.description, available: true }]); + setNewItem({ name: '', description: '' }); + } + }; + + const dashboardData = { + title: 'Admin Dashboard', + stats: [ + { label: 'Active Orders', value: '12', icon: Settings }, + { label: 'Menu Items', value: String(menuItems.length), icon: UtensilsCrossed }, + { label: 'Today\'s Revenue', value: '$1,240', icon: DollarSign } + ], + logoIcon: Settings, + sidebarItems: [ + { label: 'Hours', icon: Clock, active: activeTab === 'hours' }, + { label: 'Prices', icon: DollarSign, active: activeTab === 'prices' }, + { label: 'Menu', icon: UtensilsCrossed, active: activeTab === 'menu' } + ], + buttons: [ + { text: 'Save Changes', onClick: () => alert('Changes saved!') }, + { text: 'Preview', onClick: () => alert('Preview mode') } + ], + listItems: [ + { label: 'Settings', icon: Settings }, + { label: 'Logout', icon: LogOut } + ], + imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Am2LJhLLWUokyhthLvKyFV0QpK/uploaded-1773512918447-hg7wldhe.png', + searchPlaceholder: 'Search orders...', + chartTitle: 'Weekly Revenue', + chartData: [ + { day: 'Mon', value: 450 }, + { day: 'Tue', value: 520 }, + { day: 'Wed', value: 480 }, + { day: 'Thu', value: 610 }, + { day: 'Fri', value: 890 }, + { day: 'Sat', value: 1200 }, + { day: 'Sun', value: 950 } + ], + listTitle: 'Quick Actions' + }; + + return ( + + + +
+ +
+ +
+
+ {/* Sidebar Navigation */} +
+ + + +
+ + {/* Main Content */} +
+ {/* Operating Hours Tab */} + {activeTab === 'hours' && ( +
+

Operating Hours

+
+ {Object.entries(hours).map(([day, times]) => ( +
+ + {day === 'monday' && times.open === 'Closed' ? ( +
Closed
+ ) : ( +
+ handleHourChange(day, 'open', e.target.value)} + placeholder="Opening time" + className="flex-1 px-4 py-2 bg-background border border-foreground/20 rounded-lg text-foreground" + /> + handleHourChange(day, 'close', e.target.value)} + placeholder="Closing time" + className="flex-1 px-4 py-2 bg-background border border-foreground/20 rounded-lg text-foreground" + /> +
+ )} +
+ ))} +
+ +
+ )} + + {/* Prices Tab */} + {activeTab === 'prices' && ( +
+

Menu Prices

+
+ {prices.map((item) => ( +
+
+

{item.name}

+
+
+ $ + handlePriceChange(item.id, e.target.value)} + className="w-24 px-3 py-2 bg-card border border-foreground/20 rounded-lg text-foreground" + /> +
+
+ ))} +
+ +
+ )} + + {/* Menu Items Tab */} + {activeTab === 'menu' && ( +
+

Menu Management

+ + {/* Add New Item */} +
+

Add New Item

+
+ setNewItem({ ...newItem, name: e.target.value })} + placeholder="Item name" + className="px-4 py-2 bg-card border border-foreground/20 rounded-lg text-foreground" + /> + setNewItem({ ...newItem, description: e.target.value })} + placeholder="Item description" + className="px-4 py-2 bg-card border border-foreground/20 rounded-lg text-foreground" + /> + +
+
+ + {/* Menu Items List */} +
+ {menuItems.map((item) => ( +
+
+

{item.name}

+

{item.description}

+
+ +
+ ))} +
+ +
+ )} +
+
+
+ + +
+ ); +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 4d81992..a0f42c5 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -279,7 +279,7 @@ export default function LandingPage() { items: [ { label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }, - { label: "Contact", href: "tel:(509) 928-0513" } + { label: "Admin", href: "/admin" } ] } ]} @@ -291,4 +291,4 @@ export default function LandingPage() { ); -} +} \ No newline at end of file diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css index b925f2a..7f6f47d 100644 --- a/src/app/styles/variables.css +++ b/src/app/styles/variables.css @@ -10,15 +10,15 @@ --accent: #ffffff; --background-accent: #ffffff; */ - --background: #f7f6f7; - --card: #ffffff; - --foreground: #25190c; - --primary-cta: #ff6207; - --primary-cta-text: #f7f6f7; - --secondary-cta: #ffffff; - --secondary-cta-text: #25190c; - --accent: #ffce93; - --background-accent: #e8cfa8; + --background: #e8dcc4; + --card: #f5f0e6; + --foreground: #3d2817; + --primary-cta: #a67c52; + --primary-cta-text: #ffffff; + --secondary-cta: #f5f0e6; + --secondary-cta-text: #3d2817; + --accent: #d4b896; + --background-accent: #c9a876; /* text sizing - set by ThemeProvider */ /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);