🚀 Deploy ScanMenu - Production-ready SaaS web app for digital restaurant menus & QR ordering

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile

@@ -0,0 +1,42 @@
+FROM node:20-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV PORT=7860
+ENV HOSTNAME="0.0.0.0"
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 7860
+
+CMD ["node", "server.js"]

README.md

@@ -1,10 +1,36 @@
----
-title: ScanMenu
-emoji: 🏆
-colorFrom: yellow
-colorTo: indigo
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "standalone",
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "scanmenu",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@stripe/stripe-js": "^9.1.0",
+    "@supabase/ssr": "^0.10.2",
+    "@supabase/supabase-js": "^2.103.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^12.38.0",
+    "lucide-react": "^1.8.0",
+    "next": "16.2.3",
+    "qrcode": "^1.5.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "react-hot-toast": "^2.6.0",
+    "recharts": "^3.8.1",
+    "stripe": "^22.0.1",
+    "tailwind-merge": "^3.5.0",
+    "zustand": "^5.0.12"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/qrcode": "^1.5.6",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

src/app/(auth)/login/page.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Sparkles, Mail, Lock, ArrowRight, Globe } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('demo@scanmenu.app');
+  const [password, setPassword] = useState('demo1234');
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setTimeout(() => {
+      router.push('/dashboard/overview');
+    }, 800);
+  };
+
+  return (
+    <div className="flex min-h-screen">
+      {/* Left Panel — Branding */}
+      <div className="hidden w-1/2 flex-col justify-between bg-zinc-950 p-12 lg:flex">
+        <div className="flex items-center gap-2.5">
+          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-cyan-500">
+            <Sparkles className="h-5 w-5 text-white" />
+          </div>
+          <span className="text-xl font-bold text-white">
+            Scan<span className="text-emerald-400">Menu</span>
+          </span>
+        </div>
+
+        <div className="space-y-6">
+          <blockquote className="space-y-3">
+            <p className="text-2xl font-medium leading-relaxed text-white/90">
+              &ldquo;ScanMenu transformed our restaurant. Orders are faster, errors dropped to zero, and our revenue increased 32% in just 3 months.&rdquo;
+            </p>
+            <footer className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500" />
+              <div>
+                <p className="text-sm font-semibold text-white">Maria Santos</p>
+                <p className="text-sm text-zinc-400">Owner, Bella Cucina</p>
+              </div>
+            </footer>
+          </blockquote>
+        </div>
+
+        <p className="text-sm text-zinc-500">&copy; 2025 ScanMenu. All rights reserved.</p>
+      </div>
+
+      {/* Right Panel — Form */}
+      <div className="flex w-full items-center justify-center px-4 lg:w-1/2">
+        <div className="w-full max-w-[400px] space-y-8">
+          <div className="lg:hidden flex items-center gap-2.5 justify-center mb-6">
+            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-cyan-500">
+              <Sparkles className="h-5 w-5 text-white" />
+            </div>
+            <span className="text-xl font-bold text-zinc-900">
+              Scan<span className="text-emerald-600">Menu</span>
+            </span>
+          </div>
+
+          <div className="text-center lg:text-left">
+            <h1 className="text-2xl font-bold tracking-tight text-zinc-900">Welcome back</h1>
+            <p className="mt-2 text-sm text-zinc-500">Sign in to your account to continue</p>
+          </div>
+
+          <form onSubmit={handleLogin} className="space-y-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-zinc-700">Email</label>
+              <div className="relative">
+                <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+                <Input
+                  type="email"
+                  placeholder="name@company.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="pl-10"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <label className="text-sm font-medium text-zinc-700">Password</label>
+                <button type="button" className="text-xs font-medium text-emerald-600 hover:text-emerald-500">
+                  Forgot password?
+                </button>
+              </div>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+                <Input
+                  type="password"
+                  placeholder="••••••••"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="pl-10"
+                />
+              </div>
+            </div>
+
+            <Button type="submit" variant="primary" size="lg" className="w-full" disabled={loading}>
+              {loading ? (
+                <div className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
+              ) : (
+                <>Sign in <ArrowRight className="h-4 w-4" /></>
+              )}
+            </Button>
+          </form>
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-zinc-200" />
+            </div>
+            <div className="relative flex justify-center text-xs">
+              <span className="bg-white px-4 text-zinc-400">or continue with</span>
+            </div>
+          </div>
+
+          <Button variant="outline" size="lg" className="w-full">
+            <Globe className="h-4 w-4" />
+            Google
+          </Button>
+
+          <p className="text-center text-sm text-zinc-500">
+            Don&apos;t have an account?{' '}
+            <Link href="/register" className="font-semibold text-emerald-600 hover:text-emerald-500">
+              Sign up free
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(auth)/register/page.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Sparkles, Mail, Lock, ArrowRight, Globe, User, Store } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+
+export default function RegisterPage() {
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const handleRegister = (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setTimeout(() => {
+      router.push('/dashboard/overview');
+    }, 800);
+  };
+
+  return (
+    <div className="flex min-h-screen">
+      {/* Left Panel */}
+      <div className="hidden w-1/2 flex-col justify-between bg-zinc-950 p-12 lg:flex">
+        <div className="flex items-center gap-2.5">
+          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-cyan-500">
+            <Sparkles className="h-5 w-5 text-white" />
+          </div>
+          <span className="text-xl font-bold text-white">
+            Scan<span className="text-emerald-400">Menu</span>
+          </span>
+        </div>
+
+        <div className="space-y-8">
+          <h2 className="text-3xl font-bold leading-tight text-white">
+            Launch your digital menu in under 5 minutes
+          </h2>
+          <div className="space-y-4">
+            {[
+              'Create your restaurant profile',
+              'Build beautiful menus with drag & drop',
+              'Generate QR codes for every table',
+              'Start receiving orders instantly',
+            ].map((step, i) => (
+              <div key={i} className="flex items-center gap-3">
+                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500/20 text-sm font-bold text-emerald-400">
+                  {i + 1}
+                </div>
+                <p className="text-sm text-zinc-300">{step}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <p className="text-sm text-zinc-500">&copy; 2025 ScanMenu. All rights reserved.</p>
+      </div>
+
+      {/* Right Panel */}
+      <div className="flex w-full items-center justify-center px-4 lg:w-1/2">
+        <div className="w-full max-w-[400px] space-y-8">
+          <div className="lg:hidden flex items-center gap-2.5 justify-center mb-6">
+            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-cyan-500">
+              <Sparkles className="h-5 w-5 text-white" />
+            </div>
+            <span className="text-xl font-bold text-zinc-900">
+              Scan<span className="text-emerald-600">Menu</span>
+            </span>
+          </div>
+
+          <div className="text-center lg:text-left">
+            <h1 className="text-2xl font-bold tracking-tight text-zinc-900">Create your account</h1>
+            <p className="mt-2 text-sm text-zinc-500">Start your 14-day free trial. No credit card required.</p>
+          </div>
+
+          <form onSubmit={handleRegister} className="space-y-4">
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-zinc-700">First Name</label>
+                <div className="relative">
+                  <User className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+                  <Input placeholder="Alex" className="pl-10" />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-zinc-700">Last Name</label>
+                <Input placeholder="Rivera" />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-zinc-700">Restaurant Name</label>
+              <div className="relative">
+                <Store className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+                <Input placeholder="The Garden Kitchen" className="pl-10" />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-zinc-700">Email</label>
+              <div className="relative">
+                <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+                <Input type="email" placeholder="name@company.com" className="pl-10" />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-zinc-700">Password</label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+                <Input type="password" placeholder="Min. 8 characters" className="pl-10" />
+              </div>
+            </div>
+
+            <Button type="submit" variant="primary" size="lg" className="w-full" disabled={loading}>
+              {loading ? (
+                <div className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
+              ) : (
+                <>Create Account <ArrowRight className="h-4 w-4" /></>
+              )}
+            </Button>
+          </form>
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-zinc-200" />
+            </div>
+            <div className="relative flex justify-center text-xs">
+              <span className="bg-white px-4 text-zinc-400">or continue with</span>
+            </div>
+          </div>
+
+          <Button variant="outline" size="lg" className="w-full">
+            <Globe className="h-4 w-4" />
+            Google
+          </Button>
+
+          <p className="text-center text-sm text-zinc-500">
+            Already have an account?{' '}
+            <Link href="/login" className="font-semibold text-emerald-600 hover:text-emerald-500">
+              Sign in
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/analytics/page.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import { DashboardLayout } from '@/components/layout/dashboard-layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { StatCard } from '@/components/ui/stat-card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  DollarSign,
+  ShoppingBag,
+  TrendingUp,
+  Users,
+  ArrowUpRight,
+  ArrowDownRight,
+  QrCode,
+  Calendar,
+  Download,
+} from 'lucide-react';
+import { generateDailyRevenue, generatePopularItems, generateOrdersByType, generateHourlyOrders } from '@/lib/demo-data';
+import { formatCurrency, cn } from '@/lib/utils';
+import { useState } from 'react';
+
+const revenueData = generateDailyRevenue(30);
+const popularItems = generatePopularItems();
+const ordersByType = generateOrdersByType();
+const hourlyOrders = generateHourlyOrders();
+
+function BarChart({ data, dataKey, maxHeight = 120 }: { data: { [key: string]: string | number }[]; dataKey: string; maxHeight?: number }) {
+  const values = data.map((d) => Number(d[dataKey]));
+  const max = Math.max(...values);
+
+  return (
+    <div className="flex items-end gap-[3px]" style={{ height: maxHeight }}>
+      {data.map((d, i) => (
+        <div
+          key={i}
+          className="group relative flex-1 rounded-t-sm bg-emerald-500/80 transition-all hover:bg-emerald-500"
+          style={{ height: `${(Number(d[dataKey]) / max) * 100}%` }}
+        >
+          <div className="absolute -top-8 left-1/2 -translate-x-1/2 hidden rounded-md bg-zinc-900 px-2 py-1 text-[10px] font-medium text-white shadow-lg group-hover:block whitespace-nowrap">
+            {typeof d[dataKey] === 'number' && dataKey === 'revenue' ? formatCurrency(Number(d[dataKey])) : d[dataKey]}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function HeatmapRow({ label, values, max }: { label: string; values: number[]; max: number }) {
+  return (
+    <div className="flex items-center gap-1">
+      <span className="w-10 text-[10px] text-zinc-400 shrink-0">{label}</span>
+      {values.map((v, i) => (
+        <div
+          key={i}
+          className="h-6 flex-1 rounded-sm transition-all hover:ring-1 hover:ring-emerald-500"
+          style={{
+            backgroundColor: `rgba(16, 185, 129, ${v / max})`,
+          }}
+          title={`${v} orders`}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default function AnalyticsPage() {
+  const [period, setPeriod] = useState('30d');
+  const totalRevenue = revenueData.reduce((s, d) => s + d.revenue, 0);
+  const totalOrders = revenueData.reduce((s, d) => s + d.orders, 0);
+  const avgOrder = totalRevenue / totalOrders;
+
+  return (
+    <DashboardLayout>
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-3xl">Analytics</h1>
+            <p className="mt-1 text-sm text-zinc-500">Track performance, revenue, and customer insights.</p>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="flex gap-1 rounded-xl border border-zinc-200 p-1 dark:border-zinc-700">
+              {['7d', '14d', '30d', '90d'].map((p) => (
+                <button
+                  key={p}
+                  onClick={() => setPeriod(p)}
+                  className={cn(
+                    'rounded-lg px-3 py-1.5 text-xs font-medium transition-all',
+                    period === p ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900' : 'text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800'
+                  )}
+                >
+                  {p}
+                </button>
+              ))}
+            </div>
+            <Button variant="outline" size="sm">
+              <Download className="h-4 w-4" /> Export
+            </Button>
+          </div>
+        </div>
+
+        {/* Stats */}
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <StatCard title="Total Revenue" value={formatCurrency(totalRevenue)} change="+12.5% vs prev. period" changeType="positive" icon={DollarSign} iconColor="text-emerald-600" />
+          <StatCard title="Total Orders" value={totalOrders.toString()} change="+8.2% vs prev. period" changeType="positive" icon={ShoppingBag} iconColor="text-blue-600" />
+          <StatCard title="Avg. Order Value" value={formatCurrency(avgOrder)} change="+3.1% vs prev. period" changeType="positive" icon={TrendingUp} iconColor="text-violet-600" />
+          <StatCard title="QR Scans" value="2,011" change="+24.3% vs prev. period" changeType="positive" icon={QrCode} iconColor="text-amber-600" />
+        </div>
+
+        {/* Revenue Chart */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <div>
+              <CardTitle>Revenue Over Time</CardTitle>
+              <p className="mt-1 text-sm text-zinc-500">Daily revenue for the last 30 days</p>
+            </div>
+            <div className="flex items-baseline gap-3">
+              <span className="text-2xl font-bold">{formatCurrency(totalRevenue)}</span>
+              <Badge variant="success" className="gap-1">
+                <ArrowUpRight className="h-3 w-3" /> 12.5%
+              </Badge>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <BarChart data={revenueData} dataKey="revenue" maxHeight={160} />
+            <div className="mt-2 flex justify-between text-[10px] text-zinc-400">
+              {revenueData.filter((_, i) => i % 5 === 0).map((d, i) => (
+                <span key={i}>{new Date(d.date).toLocaleDateString('en', { month: 'short', day: 'numeric' })}</span>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="grid gap-6 lg:grid-cols-2">
+          {/* Popular Items */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Top Selling Items</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                {popularItems.map((item, i) => {
+                  const maxOrders = popularItems[0].orders;
+                  return (
+                    <div key={item.name} className="flex items-center gap-3">
+                      <span className="w-6 text-center text-sm font-bold text-zinc-400">
+                        {i + 1}
+                      </span>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center justify-between">
+                          <p className="truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">{item.name}</p>
+                          <p className="ml-2 shrink-0 text-sm font-semibold text-zinc-900 dark:text-zinc-100">{formatCurrency(item.revenue)}</p>
+                        </div>
+                        <div className="mt-1.5 flex items-center gap-2">
+                          <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800">
+                            <div
+                              className="h-full rounded-full bg-gradient-to-r from-emerald-500 to-cyan-500"
+                              style={{ width: `${(item.orders / maxOrders) * 100}%` }}
+                            />
+                          </div>
+                          <span className="text-xs text-zinc-400">{item.orders}</span>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Peak Hours */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Peak Hours</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <BarChart data={hourlyOrders} dataKey="orders" maxHeight={140} />
+              <div className="mt-2 flex justify-between text-[10px] text-zinc-400">
+                {hourlyOrders.map((h, i) => (
+                  i % 2 === 0 ? <span key={i}>{h.hour}</span> : <span key={i} />
+                ))}
+              </div>
+              <div className="mt-4 grid grid-cols-2 gap-3">
+                <div className="rounded-xl bg-emerald-50 p-3 dark:bg-emerald-950/30">
+                  <p className="text-xs text-emerald-600">Lunch Peak</p>
+                  <p className="text-lg font-bold text-emerald-700 dark:text-emerald-400">12:00 – 14:00</p>
+                </div>
+                <div className="rounded-xl bg-violet-50 p-3 dark:bg-violet-950/30">
+                  <p className="text-xs text-violet-600">Dinner Peak</p>
+                  <p className="text-lg font-bold text-violet-700 dark:text-violet-400">18:00 – 21:00</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Order Distribution */}
+        <div className="grid gap-6 lg:grid-cols-3">
+          {ordersByType.map((item) => (
+            <Card key={item.type}>
+              <CardContent className="pt-6">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm text-zinc-500">{item.type}</p>
+                    <p className="mt-1 text-3xl font-bold">{item.count}</p>
+                    <p className="mt-0.5 text-xs text-zinc-500">{item.percentage}% of total</p>
+                  </div>
+                  <div className="relative h-20 w-20">
+                    <svg className="h-20 w-20 -rotate-90" viewBox="0 0 36 36">
+                      <path
+                        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="3"
+                        className="text-zinc-100 dark:text-zinc-800"
+                      />
+                      <path
+                        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="3"
+                        strokeDasharray={`${item.percentage}, 100`}
+                        className={cn(
+                          item.type === 'Dine In' && 'text-emerald-500',
+                          item.type === 'Takeaway' && 'text-blue-500',
+                          item.type === 'Delivery' && 'text-violet-500'
+                        )}
+                      />
+                    </svg>
+                    <div className="absolute inset-0 flex items-center justify-center text-sm font-bold">
+                      {item.percentage}%
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+}

src/app/(dashboard)/billing/page.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import { DashboardLayout } from '@/components/layout/dashboard-layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Check, Sparkles, CreditCard, Download, ArrowRight, Zap, Crown, Building2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useState } from 'react';
+
+const plans = [
+  {
+    name: 'Starter',
+    price: 29,
+    yearlyPrice: 24,
+    description: 'Perfect for small restaurants just getting started.',
+    icon: Zap,
+    features: ['1 restaurant', 'Up to 50 menu items', '5 QR codes', 'Basic analytics', 'Email support', '100 orders/month'],
+    popular: false,
+    current: false,
+  },
+  {
+    name: 'Pro',
+    price: 79,
+    yearlyPrice: 66,
+    description: 'For growing restaurants with advanced needs.',
+    icon: Crown,
+    features: ['Unlimited restaurants', 'Unlimited menu items', 'Unlimited QR codes', 'Advanced analytics', 'Priority support', 'Unlimited orders', 'Custom branding', 'API access', 'Team members'],
+    popular: true,
+    current: true,
+  },
+  {
+    name: 'Enterprise',
+    price: 199,
+    yearlyPrice: 166,
+    description: 'For multi-location chains and franchises.',
+    icon: Building2,
+    features: ['Everything in Pro', 'Multi-location support', 'Dedicated account manager', 'Custom integrations', 'SLA guarantee', 'White-label solution', 'Advanced security', 'Onboarding training'],
+    popular: false,
+    current: false,
+  },
+];
+
+const invoices = [
+  { id: 'INV-2024-003', date: 'Mar 1, 2025', amount: 79, status: 'paid' },
+  { id: 'INV-2024-002', date: 'Feb 1, 2025', amount: 79, status: 'paid' },
+  { id: 'INV-2024-001', date: 'Jan 1, 2025', amount: 79, status: 'paid' },
+];
+
+export default function BillingPage() {
+  const [annual, setAnnual] = useState(false);
+
+  return (
+    <DashboardLayout>
+      <div className="space-y-8">
+        {/* Header */}
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-3xl">Billing & Subscription</h1>
+          <p className="mt-1 text-sm text-zinc-500">Manage your plan, payment methods, and invoices.</p>
+        </div>
+
+        {/* Current Plan Banner */}
+        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-emerald-600 via-emerald-500 to-cyan-500 p-6 text-white shadow-lg sm:p-8">
+          <div className="relative z-10">
+            <Badge className="bg-white/20 text-white border-white/30 mb-3">Current Plan</Badge>
+            <h2 className="text-2xl font-bold">Pro Plan</h2>
+            <p className="mt-1 text-emerald-100">Your next billing date is April 1, 2025</p>
+            <div className="mt-4 flex items-baseline gap-1">
+              <span className="text-4xl font-bold">$79</span>
+              <span className="text-emerald-200">/month</span>
+            </div>
+          </div>
+          <div className="absolute -right-8 -top-8 h-40 w-40 rounded-full bg-white/10" />
+          <div className="absolute -bottom-12 -right-12 h-48 w-48 rounded-full bg-white/5" />
+        </div>
+
+        {/* Billing Toggle */}
+        <div className="flex items-center justify-center gap-3">
+          <span className={cn('text-sm font-medium', !annual ? 'text-zinc-900' : 'text-zinc-500')}>Monthly</span>
+          <button
+            onClick={() => setAnnual(!annual)}
+            className={cn(
+              'relative h-6 w-11 rounded-full transition-colors',
+              annual ? 'bg-emerald-500' : 'bg-zinc-300 dark:bg-zinc-600'
+            )}
+          >
+            <span className={cn(
+              'absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform',
+              annual && 'translate-x-5'
+            )} />
+          </button>
+          <span className={cn('text-sm font-medium', annual ? 'text-zinc-900' : 'text-zinc-500')}>
+            Annual <Badge variant="success" className="ml-1 text-[10px]">Save 17%</Badge>
+          </span>
+        </div>
+
+        {/* Plans */}
+        <div className="grid gap-6 lg:grid-cols-3">
+          {plans.map((plan) => (
+            <Card key={plan.name} className={cn(
+              'relative overflow-hidden transition-all hover:shadow-lg',
+              plan.popular && 'border-emerald-500 shadow-md ring-1 ring-emerald-500/20',
+              plan.current && 'border-emerald-500'
+            )}>
+              {plan.popular && (
+                <div className="absolute -right-8 top-6 rotate-45 bg-emerald-500 px-10 py-1 text-[10px] font-bold uppercase tracking-wider text-white shadow-sm">
+                  Popular
+                </div>
+              )}
+              <CardContent className="pt-6 space-y-6">
+                <div>
+                  <div className="flex items-center gap-2">
+                    <div className={cn(
+                      'flex h-10 w-10 items-center justify-center rounded-xl',
+                      plan.popular ? 'bg-emerald-100 text-emerald-600' : 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800'
+                    )}>
+                      <plan.icon className="h-5 w-5" />
+                    </div>
+                    <div>
+                      <h3 className="text-lg font-bold text-zinc-900 dark:text-zinc-100">{plan.name}</h3>
+                    </div>
+                  </div>
+                  <p className="mt-2 text-sm text-zinc-500">{plan.description}</p>
+                </div>
+
+                <div className="flex items-baseline gap-1">
+                  <span className="text-4xl font-bold text-zinc-900 dark:text-zinc-100">
+                    ${annual ? plan.yearlyPrice : plan.price}
+                  </span>
+                  <span className="text-zinc-500">/month</span>
+                </div>
+
+                <Button
+                  variant={plan.current ? 'outline' : plan.popular ? 'primary' : 'default'}
+                  className="w-full"
+                  disabled={plan.current}
+                >
+                  {plan.current ? 'Current Plan' : 'Upgrade'}
+                  {!plan.current && <ArrowRight className="h-4 w-4" />}
+                </Button>
+
+                <div className="space-y-3">
+                  {plan.features.map((feature) => (
+                    <div key={feature} className="flex items-center gap-2 text-sm">
+                      <Check className={cn(
+                        'h-4 w-4 shrink-0',
+                        plan.popular ? 'text-emerald-500' : 'text-zinc-400'
+                      )} />
+                      <span className="text-zinc-600 dark:text-zinc-400">{feature}</span>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        {/* Payment Method & Invoices */}
+        <div className="grid gap-6 lg:grid-cols-2">
+          {/* Payment Method */}
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+              <CardTitle>Payment Method</CardTitle>
+              <Button variant="outline" size="sm">Update</Button>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center gap-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
+                <div className="flex h-12 w-16 items-center justify-center rounded-lg bg-gradient-to-br from-blue-600 to-blue-800">
+                  <CreditCard className="h-6 w-6 text-white" />
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">Visa ending in 4242</p>
+                  <p className="text-xs text-zinc-500">Expires 12/2026</p>
+                </div>
+                <Badge variant="success" className="ml-auto text-[10px]">Default</Badge>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Recent Invoices */}
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+              <CardTitle>Recent Invoices</CardTitle>
+              <Button variant="ghost" size="sm" className="text-xs">View All</Button>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                {invoices.map((invoice) => (
+                  <div key={invoice.id} className="flex items-center justify-between rounded-xl border border-zinc-100 p-3 dark:border-zinc-800">
+                    <div>
+                      <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{invoice.id}</p>
+                      <p className="text-xs text-zinc-500">{invoice.date}</p>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <span className="text-sm font-semibold">${invoice.amount}</span>
+                      <Badge variant="success" className="text-[10px]">{invoice.status}</Badge>
+                      <Button variant="ghost" size="icon-sm">
+                        <Download className="h-3.5 w-3.5" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+}

src/app/(dashboard)/menu-builder/page.tsx

@@ -0,0 +1,308 @@
+'use client';
+
+import { DashboardLayout } from '@/components/layout/dashboard-layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Plus,
+  Search,
+  MoreHorizontal,
+  GripVertical,
+  Pencil,
+  Trash2,
+  Eye,
+  EyeOff,
+  Star,
+  Clock,
+  Flame,
+  ChevronDown,
+  ChevronRight,
+  X,
+  Image as ImageIcon,
+  DollarSign,
+  Tag,
+  AlertCircle,
+} from 'lucide-react';
+import { useState } from 'react';
+import { demoCategories, demoProducts } from '@/lib/demo-data';
+import { formatCurrency, cn } from '@/lib/utils';
+import { Product, Category } from '@/types/database';
+
+function ProductCard({ product, onEdit }: { product: Product; onEdit: () => void }) {
+  return (
+    <div className="group flex items-start gap-3 rounded-xl border border-zinc-100 bg-white p-3 transition-all hover:border-zinc-200 hover:shadow-sm dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700">
+      <button className="mt-1 cursor-grab text-zinc-300 opacity-0 transition-opacity group-hover:opacity-100 active:cursor-grabbing">
+        <GripVertical className="h-4 w-4" />
+      </button>
+
+      {/* Image placeholder */}
+      <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-zinc-100 to-zinc-50 dark:from-zinc-800 dark:to-zinc-700">
+        <ImageIcon className="h-6 w-6 text-zinc-300 dark:text-zinc-500" />
+      </div>
+
+      <div className="flex-1 min-w-0">
+        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <h4 className="truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100">{product.name}</h4>
+              {product.is_featured && <Star className="h-3.5 w-3.5 shrink-0 fill-amber-400 text-amber-400" />}
+            </div>
+            <p className="mt-0.5 line-clamp-1 text-xs text-zinc-500">{product.description}</p>
+          </div>
+          <div className="flex items-center gap-1 shrink-0">
+            <span className="text-sm font-bold text-zinc-900 dark:text-zinc-100">{formatCurrency(product.price)}</span>
+          </div>
+        </div>
+
+        <div className="mt-2 flex flex-wrap items-center gap-1.5">
+          {product.is_available ? (
+            <Badge variant="success" className="text-[10px]"><Eye className="h-3 w-3 mr-0.5" />Available</Badge>
+          ) : (
+            <Badge variant="destructive" className="text-[10px]"><EyeOff className="h-3 w-3 mr-0.5" />Hidden</Badge>
+          )}
+          {product.preparation_time && (
+            <Badge variant="secondary" className="text-[10px]"><Clock className="h-3 w-3 mr-0.5" />{product.preparation_time}m</Badge>
+          )}
+          {product.calories && (
+            <Badge variant="secondary" className="text-[10px]"><Flame className="h-3 w-3 mr-0.5" />{product.calories} cal</Badge>
+          )}
+          {product.tags?.map((tag) => (
+            <Badge key={tag} variant="outline" className="text-[10px]">{tag}</Badge>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+        <button onClick={onEdit} className="rounded-lg p-1.5 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800">
+          <Pencil className="h-3.5 w-3.5" />
+        </button>
+        <button className="rounded-lg p-1.5 text-zinc-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950/30">
+          <Trash2 className="h-3.5 w-3.5" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function ProductModal({ product, onClose }: { product?: Product; onClose: () => void }) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
+      <div className="w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-2xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-700 dark:bg-zinc-900">
+        <div className="flex items-center justify-between border-b border-zinc-200 p-5 dark:border-zinc-800">
+          <h3 className="text-lg font-semibold">{product ? 'Edit Product' : 'Add Product'}</h3>
+          <button onClick={onClose} className="rounded-lg p-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800">
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="space-y-4 p-5">
+          {/* Image upload */}
+          <div className="flex items-center justify-center rounded-xl border-2 border-dashed border-zinc-200 bg-zinc-50 p-8 dark:border-zinc-700 dark:bg-zinc-800/50">
+            <div className="text-center">
+              <ImageIcon className="mx-auto h-8 w-8 text-zinc-300" />
+              <p className="mt-2 text-sm font-medium text-zinc-600">Upload product image</p>
+              <p className="text-xs text-zinc-400">PNG, JPG up to 5MB</p>
+              <Button variant="outline" size="sm" className="mt-3">Choose File</Button>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Product Name</label>
+            <Input placeholder="e.g., Truffle Burrata" defaultValue={product?.name} />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Description</label>
+            <Textarea placeholder="Describe your product..." defaultValue={product?.description} />
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Price</label>
+              <div className="relative">
+                <DollarSign className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+                <Input type="number" step="0.01" placeholder="0.00" defaultValue={product?.price} className="pl-10" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Prep Time (min)</label>
+              <div className="relative">
+                <Clock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+                <Input type="number" placeholder="15" defaultValue={product?.preparation_time ?? undefined} className="pl-10" />
+              </div>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Calories</label>
+              <div className="relative">
+                <Flame className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+                <Input type="number" placeholder="350" defaultValue={product?.calories ?? undefined} className="pl-10" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Tags</label>
+              <div className="relative">
+                <Tag className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+                <Input placeholder="vegetarian, popular" defaultValue={product?.tags?.join(', ')} className="pl-10" />
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Allergens</label>
+            <div className="relative">
+              <AlertCircle className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+              <Input placeholder="dairy, gluten, nuts" defaultValue={product?.allergens?.join(', ')} className="pl-10" />
+            </div>
+          </div>
+
+          <div className="flex items-center gap-6 rounded-xl bg-zinc-50 p-4 dark:bg-zinc-800/50">
+            <label className="flex items-center gap-2 text-sm">
+              <input type="checkbox" defaultChecked={product?.is_available ?? true} className="h-4 w-4 rounded border-zinc-300 text-emerald-600 focus:ring-emerald-500" />
+              <span className="font-medium text-zinc-700 dark:text-zinc-300">Available</span>
+            </label>
+            <label className="flex items-center gap-2 text-sm">
+              <input type="checkbox" defaultChecked={product?.is_featured ?? false} className="h-4 w-4 rounded border-zinc-300 text-emerald-600 focus:ring-emerald-500" />
+              <span className="font-medium text-zinc-700 dark:text-zinc-300">Featured</span>
+            </label>
+          </div>
+        </div>
+        <div className="flex justify-end gap-2 border-t border-zinc-200 p-5 dark:border-zinc-800">
+          <Button variant="outline" onClick={onClose}>Cancel</Button>
+          <Button variant="primary" onClick={onClose}>{product ? 'Save Changes' : 'Add Product'}</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function MenuBuilderPage() {
+  const [search, setSearch] = useState('');
+  const [expandedCategories, setExpandedCategories] = useState<string[]>(demoCategories.map((c) => c.id));
+  const [editingProduct, setEditingProduct] = useState<Product | null>(null);
+  const [showAddProduct, setShowAddProduct] = useState(false);
+
+  const toggleCategory = (id: string) => {
+    setExpandedCategories((prev) =>
+      prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id]
+    );
+  };
+
+  const filteredProducts = search
+    ? demoProducts.filter((p) => p.name.toLowerCase().includes(search.toLowerCase()) || p.description?.toLowerCase().includes(search.toLowerCase()))
+    : demoProducts;
+
+  return (
+    <DashboardLayout>
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-3xl">Menu Builder</h1>
+            <p className="mt-1 text-sm text-zinc-500">Manage your menus, categories, and products.</p>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm">
+              <Plus className="h-4 w-4" /> Add Category
+            </Button>
+            <Button variant="primary" size="sm" onClick={() => setShowAddProduct(true)}>
+              <Plus className="h-4 w-4" /> Add Product
+            </Button>
+          </div>
+        </div>
+
+        {/* Search */}
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+          <Input
+            placeholder="Search products..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-10 max-w-sm"
+          />
+        </div>
+
+        {/* Categories & Products */}
+        <div className="space-y-4">
+          {demoCategories.map((category) => {
+            const categoryProducts = filteredProducts.filter((p) => p.category_id === category.id);
+            const isExpanded = expandedCategories.includes(category.id);
+
+            return (
+              <Card key={category.id}>
+                <div
+                  className="flex cursor-pointer items-center justify-between p-4"
+                  onClick={() => toggleCategory(category.id)}
+                >
+                  <div className="flex items-center gap-3">
+                    <button className="cursor-grab text-zinc-300 active:cursor-grabbing">
+                      <GripVertical className="h-4 w-4" />
+                    </button>
+                    {isExpanded ? (
+                      <ChevronDown className="h-4 w-4 text-zinc-400" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4 text-zinc-400" />
+                    )}
+                    <div>
+                      <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{category.name}</h3>
+                      <p className="text-xs text-zinc-500">{categoryProducts.length} items{category.description && ` • ${category.description}`}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Badge variant={category.is_active ? 'success' : 'secondary'} className="text-[10px]">
+                      {category.is_active ? 'Active' : 'Hidden'}
+                    </Badge>
+                    <button className="rounded-lg p-1.5 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800" onClick={(e) => e.stopPropagation()}>
+                      <MoreHorizontal className="h-4 w-4" />
+                    </button>
+                  </div>
+                </div>
+
+                {isExpanded && (
+                  <CardContent className="border-t border-zinc-100 pt-3 dark:border-zinc-800">
+                    {categoryProducts.length > 0 ? (
+                      <div className="space-y-2">
+                        {categoryProducts.map((product) => (
+                          <ProductCard
+                            key={product.id}
+                            product={product}
+                            onEdit={() => setEditingProduct(product)}
+                          />
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="py-8 text-center text-sm text-zinc-400">
+                        No products in this category
+                      </div>
+                    )}
+                    <button
+                      onClick={() => setShowAddProduct(true)}
+                      className="mt-3 flex w-full items-center justify-center gap-2 rounded-xl border-2 border-dashed border-zinc-200 py-3 text-sm font-medium text-zinc-400 transition-all hover:border-emerald-300 hover:text-emerald-600 dark:border-zinc-700 dark:hover:border-emerald-700"
+                    >
+                      <Plus className="h-4 w-4" /> Add product
+                    </button>
+                  </CardContent>
+                )}
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Modals */}
+      {(editingProduct || showAddProduct) && (
+        <ProductModal
+          product={editingProduct ?? undefined}
+          onClose={() => {
+            setEditingProduct(null);
+            setShowAddProduct(false);
+          }}
+        />
+      )}
+    </DashboardLayout>
+  );
+}

src/app/(dashboard)/orders/page.tsx

@@ -0,0 +1,339 @@
+'use client';
+
+import { DashboardLayout } from '@/components/layout/dashboard-layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Clock,
+  MapPin,
+  ShoppingBag,
+  Truck,
+  Phone,
+  Mail,
+  ChevronRight,
+  CheckCircle2,
+  XCircle,
+  ChefHat,
+  Bell,
+  ArrowRight,
+  Filter,
+  Search,
+} from 'lucide-react';
+import { demoOrders, demoOrderItems } from '@/lib/demo-data';
+import { formatCurrency, formatRelativeTime, getOrderStatusColor, getOrderTypeLabel, cn } from '@/lib/utils';
+import { useState } from 'react';
+import { Order, OrderStatus } from '@/types/database';
+import { Input } from '@/components/ui/input';
+
+const statusFlow: OrderStatus[] = ['pending', 'confirmed', 'preparing', 'ready', 'delivered'];
+
+function OrderCard({ order, isSelected, onClick }: { order: Order; isSelected: boolean; onClick: () => void }) {
+  const items = demoOrderItems.filter((i) => i.order_id === order.id);
+  const typeIcons = {
+    dine_in: MapPin,
+    takeaway: ShoppingBag,
+    delivery: Truck,
+  };
+  const TypeIcon = typeIcons[order.order_type];
+
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        'cursor-pointer rounded-xl border p-4 transition-all',
+        isSelected
+          ? 'border-emerald-500 bg-emerald-50/50 shadow-sm ring-1 ring-emerald-500/20 dark:bg-emerald-950/20'
+          : 'border-zinc-200/60 bg-white hover:border-zinc-300 hover:shadow-sm dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700'
+      )}
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex items-center gap-2">
+          <div className={cn('flex h-9 w-9 items-center justify-center rounded-lg', getOrderStatusColor(order.status))}>
+            <TypeIcon className="h-4 w-4" />
+          </div>
+          <div>
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-bold text-zinc-900 dark:text-zinc-100">#{order.id.split('-')[1]}</span>
+              <Badge className={cn('text-[10px]', getOrderStatusColor(order.status))} variant="outline">
+                {order.status}
+              </Badge>
+            </div>
+            <p className="text-xs text-zinc-500">{order.customer_name}</p>
+          </div>
+        </div>
+        <div className="text-right">
+          <p className="text-sm font-bold text-zinc-900 dark:text-zinc-100">{formatCurrency(order.total)}</p>
+          <p className="text-[10px] text-zinc-400">{formatRelativeTime(order.created_at)}</p>
+        </div>
+      </div>
+
+      <div className="mt-3 flex items-center justify-between">
+        <div className="flex items-center gap-2 text-xs text-zinc-500">
+          <span>{getOrderTypeLabel(order.order_type)}</span>
+          {order.table_number && <span>• Table {order.table_number}</span>}
+          <span>• {items.length} items</span>
+        </div>
+        <ChevronRight className="h-4 w-4 text-zinc-300" />
+      </div>
+    </div>
+  );
+}
+
+function OrderDetail({ order }: { order: Order }) {
+  const items = demoOrderItems.filter((i) => i.order_id === order.id);
+  const currentStatusIndex = statusFlow.indexOf(order.status);
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-start justify-between">
+        <div>
+          <div className="flex items-center gap-3">
+            <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">Order #{order.id.split('-')[1]}</h2>
+            <Badge className={cn('text-xs', getOrderStatusColor(order.status))} variant="outline">
+              {order.status}
+            </Badge>
+          </div>
+          <p className="mt-1 text-sm text-zinc-500">{formatRelativeTime(order.created_at)}</p>
+        </div>
+      </div>
+
+      {/* Status Timeline */}
+      {order.status !== 'cancelled' && (
+        <div className="rounded-xl border border-zinc-200/60 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
+          <div className="flex items-center justify-between">
+            {statusFlow.map((status, index) => {
+              const isComplete = index <= currentStatusIndex;
+              const isCurrent = index === currentStatusIndex;
+              return (
+                <div key={status} className="flex flex-1 items-center">
+                  <div className="flex flex-col items-center gap-1">
+                    <div className={cn(
+                      'flex h-8 w-8 items-center justify-center rounded-full border-2 transition-all',
+                      isComplete ? 'border-emerald-500 bg-emerald-500 text-white' : 'border-zinc-200 text-zinc-400 dark:border-zinc-700',
+                      isCurrent && 'ring-4 ring-emerald-100 dark:ring-emerald-900/30'
+                    )}>
+                      {isComplete ? <CheckCircle2 className="h-4 w-4" /> : <span className="text-xs">{index + 1}</span>}
+                    </div>
+                    <span className={cn('text-[10px] font-medium capitalize', isComplete ? 'text-emerald-600' : 'text-zinc-400')}>
+                      {status}
+                    </span>
+                  </div>
+                  {index < statusFlow.length - 1 && (
+                    <div className={cn('mx-1 h-0.5 flex-1', index < currentStatusIndex ? 'bg-emerald-500' : 'bg-zinc-200 dark:bg-zinc-700')} />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Customer Info */}
+      <div className="rounded-xl border border-zinc-200/60 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
+        <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Customer</h3>
+        <div className="mt-3 space-y-2">
+          <div className="flex items-center gap-2 text-sm text-zinc-600">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-100 dark:bg-zinc-800">
+              <span className="text-xs font-bold">{order.customer_name?.split(' ').map(n => n[0]).join('')}</span>
+            </div>
+            <span className="font-medium">{order.customer_name}</span>
+          </div>
+          {order.customer_phone && (
+            <div className="flex items-center gap-2 text-sm text-zinc-500">
+              <Phone className="h-4 w-4" /> {order.customer_phone}
+            </div>
+          )}
+          {order.customer_email && (
+            <div className="flex items-center gap-2 text-sm text-zinc-500">
+              <Mail className="h-4 w-4" /> {order.customer_email}
+            </div>
+          )}
+          {order.delivery_address && (
+            <div className="flex items-center gap-2 text-sm text-zinc-500">
+              <MapPin className="h-4 w-4" /> {order.delivery_address}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Items */}
+      <div className="rounded-xl border border-zinc-200/60 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
+        <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Items</h3>
+        <div className="mt-3 space-y-3">
+          {items.map((item) => (
+            <div key={item.id} className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-50 text-sm font-bold text-emerald-600 dark:bg-emerald-900/30">
+                  {item.quantity}x
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{item.product_name}</p>
+                  {item.options && Object.entries(item.options).map(([key, value]) => (
+                    <p key={key} className="text-xs text-zinc-500">{key}: {String(value)}</p>
+                  ))}
+                </div>
+              </div>
+              <p className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{formatCurrency(item.total_price)}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-4 space-y-1.5 border-t border-zinc-100 pt-4 dark:border-zinc-800">
+          <div className="flex justify-between text-sm text-zinc-500">
+            <span>Subtotal</span>
+            <span>{formatCurrency(order.subtotal)}</span>
+          </div>
+          <div className="flex justify-between text-sm text-zinc-500">
+            <span>Tax</span>
+            <span>{formatCurrency(order.tax)}</span>
+          </div>
+          <div className="flex justify-between text-base font-bold text-zinc-900 dark:text-zinc-100">
+            <span>Total</span>
+            <span>{formatCurrency(order.total)}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      {order.status !== 'delivered' && order.status !== 'cancelled' && (
+        <div className="flex gap-2">
+          {order.status === 'pending' && (
+            <>
+              <Button variant="primary" className="flex-1">
+                <CheckCircle2 className="h-4 w-4" /> Confirm Order
+              </Button>
+              <Button variant="destructive" className="flex-1">
+                <XCircle className="h-4 w-4" /> Cancel
+              </Button>
+            </>
+          )}
+          {order.status === 'confirmed' && (
+            <Button variant="primary" className="flex-1">
+              <ChefHat className="h-4 w-4" /> Start Preparing
+            </Button>
+          )}
+          {order.status === 'preparing' && (
+            <Button variant="primary" className="flex-1">
+              <Bell className="h-4 w-4" /> Mark Ready
+            </Button>
+          )}
+          {order.status === 'ready' && (
+            <Button variant="primary" className="flex-1">
+              <CheckCircle2 className="h-4 w-4" /> Mark Delivered
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function OrdersPage() {
+  const [selectedOrder, setSelectedOrder] = useState<Order>(demoOrders[0]);
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [search, setSearch] = useState('');
+
+  const filteredOrders = demoOrders.filter((o) => {
+    if (statusFilter !== 'all' && o.status !== statusFilter) return false;
+    if (search && !o.customer_name?.toLowerCase().includes(search.toLowerCase()) && !o.id.includes(search)) return false;
+    return true;
+  });
+
+  const statusCounts = {
+    all: demoOrders.length,
+    pending: demoOrders.filter((o) => o.status === 'pending').length,
+    confirmed: demoOrders.filter((o) => o.status === 'confirmed').length,
+    preparing: demoOrders.filter((o) => o.status === 'preparing').length,
+    ready: demoOrders.filter((o) => o.status === 'ready').length,
+    delivered: demoOrders.filter((o) => o.status === 'delivered').length,
+  };
+
+  return (
+    <DashboardLayout>
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-3xl">Orders</h1>
+            <p className="mt-1 text-sm text-zinc-500">Manage and track customer orders in real-time.</p>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1.5 rounded-full bg-emerald-50 px-3 py-1.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">
+              <span className="relative flex h-2 w-2">
+                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
+                <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
+              </span>
+              Live
+            </div>
+          </div>
+        </div>
+
+        {/* Status Filter Tabs */}
+        <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-none">
+          {Object.entries(statusCounts).map(([status, count]) => (
+            <button
+              key={status}
+              onClick={() => setStatusFilter(status)}
+              className={cn(
+                'flex items-center gap-1.5 whitespace-nowrap rounded-xl px-4 py-2 text-sm font-medium transition-all',
+                statusFilter === status
+                  ? 'bg-zinc-900 text-white shadow-sm dark:bg-white dark:text-zinc-900'
+                  : 'bg-white text-zinc-600 hover:bg-zinc-50 border border-zinc-200 dark:bg-zinc-900 dark:border-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-800'
+              )}
+            >
+              <span className="capitalize">{status}</span>
+              <span className={cn(
+                'rounded-full px-1.5 py-0.5 text-[10px] font-bold',
+                statusFilter === status ? 'bg-white/20 text-white dark:bg-zinc-900/30 dark:text-zinc-900' : 'bg-zinc-100 text-zinc-500 dark:bg-zinc-800'
+              )}>
+                {count}
+              </span>
+            </button>
+          ))}
+        </div>
+
+        {/* Two Column Layout */}
+        <div className="grid gap-6 lg:grid-cols-5">
+          {/* Order List */}
+          <div className="space-y-3 lg:col-span-2">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+              <Input
+                placeholder="Search orders..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+            <div className="space-y-2 max-h-[calc(100vh-320px)] overflow-y-auto pr-1 scrollbar-thin">
+              {filteredOrders.map((order) => (
+                <OrderCard
+                  key={order.id}
+                  order={order}
+                  isSelected={selectedOrder?.id === order.id}
+                  onClick={() => setSelectedOrder(order)}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Order Detail */}
+          <div className="lg:col-span-3">
+            <div className="sticky top-24">
+              {selectedOrder ? (
+                <OrderDetail order={selectedOrder} />
+              ) : (
+                <div className="flex flex-col items-center justify-center py-20 text-center">
+                  <ShoppingBag className="h-12 w-12 text-zinc-200" />
+                  <p className="mt-4 text-sm text-zinc-500">Select an order to view details</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+}

src/app/(dashboard)/overview/page.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+import { DashboardLayout } from '@/components/layout/dashboard-layout';
+import { StatCard } from '@/components/ui/stat-card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  DollarSign,
+  ShoppingBag,
+  Users,
+  TrendingUp,
+  ArrowUpRight,
+  Clock,
+  MapPin,
+  Truck,
+  Eye,
+} from 'lucide-react';
+import { demoOrders, demoOrderItems, generateDailyRevenue, generatePopularItems, generateOrdersByType } from '@/lib/demo-data';
+import { formatCurrency, formatRelativeTime, getOrderStatusColor, getOrderTypeLabel, cn } from '@/lib/utils';
+import Link from 'next/link';
+
+const revenueData = generateDailyRevenue(7);
+const popularItems = generatePopularItems().slice(0, 5);
+const ordersByType = generateOrdersByType();
+
+function MiniChart() {
+  const data = generateDailyRevenue(14);
+  const max = Math.max(...data.map((d) => d.revenue));
+  return (
+    <div className="flex h-16 items-end gap-1">
+      {data.map((d, i) => (
+        <div
+          key={i}
+          className="flex-1 rounded-t-sm bg-emerald-500/80 transition-all hover:bg-emerald-500"
+          style={{ height: `${(d.revenue / max) * 100}%` }}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default function OverviewPage() {
+  const totalRevenue = revenueData.reduce((s, d) => s + d.revenue, 0);
+  const totalOrders = revenueData.reduce((s, d) => s + d.orders, 0);
+
+  return (
+    <DashboardLayout>
+      <div className="space-y-8">
+        {/* Header */}
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-3xl">
+              Dashboard
+            </h1>
+            <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
+              Welcome back, Alex. Here&apos;s what&apos;s happening today.
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm">
+              <Eye className="h-4 w-4" />
+              View Menu
+            </Button>
+            <Link href="/dashboard/orders">
+              <Button variant="primary" size="sm">
+                <ShoppingBag className="h-4 w-4" />
+                Live Orders
+              </Button>
+            </Link>
+          </div>
+        </div>
+
+        {/* Stats Grid */}
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <StatCard
+            title="Total Revenue"
+            value={formatCurrency(totalRevenue)}
+            change="+12.5% from last week"
+            changeType="positive"
+            icon={DollarSign}
+            iconColor="text-emerald-600"
+          />
+          <StatCard
+            title="Orders"
+            value={totalOrders.toString()}
+            change="+8.2% from last week"
+            changeType="positive"
+            icon={ShoppingBag}
+            iconColor="text-blue-600"
+          />
+          <StatCard
+            title="Avg. Order Value"
+            value={formatCurrency(totalRevenue / totalOrders)}
+            change="+3.1% from last week"
+            changeType="positive"
+            icon={TrendingUp}
+            iconColor="text-violet-600"
+          />
+          <StatCard
+            title="Active Tables"
+            value="5 / 8"
+            change="3 available"
+            changeType="neutral"
+            icon={Users}
+            iconColor="text-amber-600"
+          />
+        </div>
+
+        <div className="grid gap-6 lg:grid-cols-3">
+          {/* Revenue Chart */}
+          <Card className="lg:col-span-2">
+            <CardHeader className="flex flex-row items-center justify-between">
+              <CardTitle>Revenue Overview</CardTitle>
+              <div className="flex gap-1 rounded-lg border border-zinc-200 p-1 dark:border-zinc-700">
+                <button className="rounded-md bg-zinc-900 px-3 py-1 text-xs font-medium text-white dark:bg-white dark:text-zinc-900">7D</button>
+                <button className="rounded-md px-3 py-1 text-xs font-medium text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800">14D</button>
+                <button className="rounded-md px-3 py-1 text-xs font-medium text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800">30D</button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="mb-4 flex items-baseline gap-3">
+                <span className="text-3xl font-bold tracking-tight">{formatCurrency(totalRevenue)}</span>
+                <Badge variant="success" className="gap-1">
+                  <ArrowUpRight className="h-3 w-3" /> 12.5%
+                </Badge>
+              </div>
+              <MiniChart />
+              <div className="mt-3 flex justify-between text-xs text-zinc-400">
+                {revenueData.map((d, i) => (
+                  <span key={i}>{new Date(d.date).toLocaleDateString('en', { weekday: 'short' })}</span>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Orders by Type */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Orders by Type</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {ordersByType.map((item) => (
+                <div key={item.type} className="space-y-2">
+                  <div className="flex items-center justify-between text-sm">
+                    <div className="flex items-center gap-2">
+                      {item.type === 'Dine In' && <MapPin className="h-4 w-4 text-emerald-500" />}
+                      {item.type === 'Takeaway' && <ShoppingBag className="h-4 w-4 text-blue-500" />}
+                      {item.type === 'Delivery' && <Truck className="h-4 w-4 text-violet-500" />}
+                      <span className="font-medium">{item.type}</span>
+                    </div>
+                    <span className="text-zinc-500">{item.count} ({item.percentage}%)</span>
+                  </div>
+                  <div className="h-2 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800">
+                    <div
+                      className={cn(
+                        'h-full rounded-full transition-all',
+                        item.type === 'Dine In' && 'bg-emerald-500',
+                        item.type === 'Takeaway' && 'bg-blue-500',
+                        item.type === 'Delivery' && 'bg-violet-500'
+                      )}
+                      style={{ width: `${item.percentage}%` }}
+                    />
+                  </div>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid gap-6 lg:grid-cols-2">
+          {/* Recent Orders */}
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+              <CardTitle>Recent Orders</CardTitle>
+              <Link href="/dashboard/orders">
+                <Button variant="ghost" size="sm" className="text-xs">
+                  View All <ArrowUpRight className="h-3 w-3" />
+                </Button>
+              </Link>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                {demoOrders.slice(0, 5).map((order) => (
+                  <div key={order.id} className="flex items-center justify-between rounded-xl border border-zinc-100 p-3 transition-all hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800/50">
+                    <div className="flex items-center gap-3">
+                      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-zinc-100 text-sm font-bold text-zinc-600 dark:bg-zinc-800">
+                        #{order.id.split('-')[1]}
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{order.customer_name}</p>
+                        <div className="flex items-center gap-2 text-xs text-zinc-500">
+                          <span>{getOrderTypeLabel(order.order_type)}</span>
+                          {order.table_number && <span>• Table {order.table_number}</span>}
+                          <span>• <Clock className="inline h-3 w-3" /> {formatRelativeTime(order.created_at)}</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <p className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{formatCurrency(order.total)}</p>
+                      <Badge className={cn('mt-1 text-[10px]', getOrderStatusColor(order.status))} variant="outline">
+                        {order.status}
+                      </Badge>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Popular Items */}
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+              <CardTitle>Popular Items</CardTitle>
+              <Link href="/dashboard/analytics">
+                <Button variant="ghost" size="sm" className="text-xs">
+                  Analytics <ArrowUpRight className="h-3 w-3" />
+                </Button>
+              </Link>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                {popularItems.map((item, index) => (
+                  <div key={item.name} className="flex items-center justify-between rounded-xl border border-zinc-100 p-3 transition-all hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800/50">
+                    <div className="flex items-center gap-3">
+                      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-50 to-cyan-50 text-sm font-bold text-emerald-600 dark:from-emerald-950/30 dark:to-cyan-950/30">
+                        {index + 1}
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{item.name}</p>
+                        <p className="text-xs text-zinc-500">{item.orders} orders</p>
+                      </div>
+                    </div>
+                    <p className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{formatCurrency(item.revenue)}</p>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+}

src/app/(dashboard)/qr-manager/page.tsx

@@ -0,0 +1,226 @@
+'use client';
+
+import { DashboardLayout } from '@/components/layout/dashboard-layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import {
+  Plus,
+  Download,
+  QrCode,
+  Eye,
+  Copy,
+  Printer,
+  Trash2,
+  ScanLine,
+  Link as LinkIcon,
+  ExternalLink,
+  Table2,
+} from 'lucide-react';
+import { demoQRCodes, demoTables } from '@/lib/demo-data';
+import { cn } from '@/lib/utils';
+import { useState } from 'react';
+
+function QRCodePreview({ label, scans, isActive }: { label: string; scans: number; isActive: boolean }) {
+  return (
+    <div className="flex flex-col items-center gap-3 rounded-2xl border border-zinc-200/60 bg-white p-6 transition-all hover:shadow-md hover:border-zinc-300 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700">
+      {/* QR Code Visual */}
+      <div className="relative">
+        <div className="flex h-40 w-40 items-center justify-center rounded-2xl bg-white p-3 shadow-inner ring-1 ring-zinc-100">
+          {/* Stylized QR code */}
+          <div className="grid h-full w-full grid-cols-7 grid-rows-7 gap-[2px]">
+            {Array.from({ length: 49 }).map((_, i) => {
+              const row = Math.floor(i / 7);
+              const col = i % 7;
+              const isCorner = (row < 3 && col < 3) || (row < 3 && col > 3) || (row > 3 && col < 3);
+              const isFilled = isCorner || Math.random() > 0.4;
+              return (
+                <div
+                  key={i}
+                  className={cn(
+                    'rounded-[2px] transition-colors',
+                    isFilled ? 'bg-zinc-900' : 'bg-transparent'
+                  )}
+                />
+              );
+            })}
+          </div>
+        </div>
+        {!isActive && (
+          <div className="absolute inset-0 flex items-center justify-center rounded-2xl bg-white/80 backdrop-blur-sm">
+            <Badge variant="destructive">Disabled</Badge>
+          </div>
+        )}
+      </div>
+
+      {/* Info */}
+      <div className="text-center">
+        <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{label}</h3>
+        <div className="mt-1 flex items-center justify-center gap-1 text-xs text-zinc-500">
+          <ScanLine className="h-3 w-3" />
+          {scans} scans
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex gap-1.5">
+        <Button variant="outline" size="icon-sm">
+          <Download className="h-3.5 w-3.5" />
+        </Button>
+        <Button variant="outline" size="icon-sm">
+          <Copy className="h-3.5 w-3.5" />
+        </Button>
+        <Button variant="outline" size="icon-sm">
+          <Printer className="h-3.5 w-3.5" />
+        </Button>
+        <Button variant="outline" size="icon-sm">
+          <Eye className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default function QRManagerPage() {
+  const [activeTab, setActiveTab] = useState<'qr' | 'tables'>('qr');
+
+  return (
+    <DashboardLayout>
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-3xl">QR Codes</h1>
+            <p className="mt-1 text-sm text-zinc-500">Generate and manage QR codes for your restaurant.</p>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm">
+              <Download className="h-4 w-4" /> Download All
+            </Button>
+            <Button variant="primary" size="sm">
+              <Plus className="h-4 w-4" /> New QR Code
+            </Button>
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex gap-1 rounded-xl border border-zinc-200 bg-zinc-50 p-1 dark:border-zinc-700 dark:bg-zinc-900">
+          <button
+            onClick={() => setActiveTab('qr')}
+            className={cn(
+              'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all',
+              activeTab === 'qr' ? 'bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white' : 'text-zinc-500 hover:text-zinc-700'
+            )}
+          >
+            <QrCode className="h-4 w-4" /> QR Codes
+            <Badge variant="secondary" className="ml-1 text-[10px]">{demoQRCodes.length}</Badge>
+          </button>
+          <button
+            onClick={() => setActiveTab('tables')}
+            className={cn(
+              'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all',
+              activeTab === 'tables' ? 'bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white' : 'text-zinc-500 hover:text-zinc-700'
+            )}
+          >
+            <Table2 className="h-4 w-4" /> Tables
+            <Badge variant="secondary" className="ml-1 text-[10px]">{demoTables.length}</Badge>
+          </button>
+        </div>
+
+        {activeTab === 'qr' ? (
+          <>
+            {/* Quick Stats */}
+            <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+              <div className="rounded-xl border border-zinc-200/60 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
+                <p className="text-xs font-medium text-zinc-500">Total QR Codes</p>
+                <p className="mt-1 text-2xl font-bold">{demoQRCodes.length}</p>
+              </div>
+              <div className="rounded-xl border border-zinc-200/60 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
+                <p className="text-xs font-medium text-zinc-500">Total Scans</p>
+                <p className="mt-1 text-2xl font-bold">{demoQRCodes.reduce((s, q) => s + q.scans, 0).toLocaleString()}</p>
+              </div>
+              <div className="rounded-xl border border-zinc-200/60 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
+                <p className="text-xs font-medium text-zinc-500">Active</p>
+                <p className="mt-1 text-2xl font-bold text-emerald-600">{demoQRCodes.filter((q) => q.is_active).length}</p>
+              </div>
+              <div className="rounded-xl border border-zinc-200/60 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
+                <p className="text-xs font-medium text-zinc-500">Avg. Scans/Code</p>
+                <p className="mt-1 text-2xl font-bold">{Math.round(demoQRCodes.reduce((s, q) => s + q.scans, 0) / demoQRCodes.length)}</p>
+              </div>
+            </div>
+
+            {/* QR Code Grid */}
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              {demoQRCodes.map((qr) => (
+                <QRCodePreview key={qr.id} label={qr.label} scans={qr.scans} isActive={qr.is_active} />
+              ))}
+              {/* Add New Card */}
+              <button className="flex flex-col items-center justify-center gap-3 rounded-2xl border-2 border-dashed border-zinc-200 p-6 text-zinc-400 transition-all hover:border-emerald-300 hover:text-emerald-600 dark:border-zinc-700 dark:hover:border-emerald-700">
+                <div className="rounded-xl bg-zinc-100 p-3 dark:bg-zinc-800">
+                  <Plus className="h-6 w-6" />
+                </div>
+                <span className="text-sm font-medium">Create New QR Code</span>
+              </button>
+            </div>
+          </>
+        ) : (
+          /* Tables View */
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+              <CardTitle>Table Management</CardTitle>
+              <Button variant="primary" size="sm">
+                <Plus className="h-4 w-4" /> Add Table
+              </Button>
+            </CardHeader>
+            <CardContent>
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b border-zinc-100 text-left dark:border-zinc-800">
+                      <th className="pb-3 text-xs font-medium text-zinc-500">Table #</th>
+                      <th className="pb-3 text-xs font-medium text-zinc-500">Name</th>
+                      <th className="pb-3 text-xs font-medium text-zinc-500">Capacity</th>
+                      <th className="pb-3 text-xs font-medium text-zinc-500">Status</th>
+                      <th className="pb-3 text-xs font-medium text-zinc-500">QR Code</th>
+                      <th className="pb-3 text-xs font-medium text-zinc-500 text-right">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
+                    {demoTables.map((table) => (
+                      <tr key={table.id} className="group">
+                        <td className="py-3">
+                          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-100 text-sm font-bold text-zinc-600 dark:bg-zinc-800">
+                            {table.number}
+                          </div>
+                        </td>
+                        <td className="py-3 text-sm font-medium text-zinc-900 dark:text-zinc-100">{table.name || '—'}</td>
+                        <td className="py-3 text-sm text-zinc-500">{table.capacity} seats</td>
+                        <td className="py-3">
+                          <Badge variant={table.is_active ? 'success' : 'secondary'} className="text-[10px]">
+                            {table.is_active ? 'Active' : 'Inactive'}
+                          </Badge>
+                        </td>
+                        <td className="py-3">
+                          <Button variant="ghost" size="sm" className="text-xs">
+                            <QrCode className="h-3 w-3" /> View QR
+                          </Button>
+                        </td>
+                        <td className="py-3 text-right">
+                          <div className="flex justify-end gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+                            <Button variant="ghost" size="icon-sm"><LinkIcon className="h-3.5 w-3.5" /></Button>
+                            <Button variant="ghost" size="icon-sm"><Trash2 className="h-3.5 w-3.5 text-red-500" /></Button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </DashboardLayout>
+  );
+}

src/app/(dashboard)/restaurant-setup/page.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import { DashboardLayout } from '@/components/layout/dashboard-layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Badge } from '@/components/ui/badge';
+import { Store, MapPin, Phone, Mail, Globe, Clock, Image as ImageIcon, Palette, Save, ExternalLink } from 'lucide-react';
+import { demoRestaurant } from '@/lib/demo-data';
+import { cn } from '@/lib/utils';
+
+export default function RestaurantSetupPage() {
+  return (
+    <DashboardLayout>
+      <div className="space-y-6">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-3xl">Restaurant Profile</h1>
+            <p className="mt-1 text-sm text-zinc-500">Manage your restaurant&apos;s public information and branding.</p>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm">
+              <ExternalLink className="h-4 w-4" /> Preview
+            </Button>
+            <Button variant="primary" size="sm">
+              <Save className="h-4 w-4" /> Save Changes
+            </Button>
+          </div>
+        </div>
+
+        <div className="grid gap-6 lg:grid-cols-3">
+          <div className="space-y-6 lg:col-span-2">
+            {/* Basic Info */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2"><Store className="h-4 w-4" /> Basic Information</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-zinc-700">Restaurant Name</label>
+                  <Input defaultValue={demoRestaurant.name} />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-zinc-700">URL Slug</label>
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-zinc-400">scanmenu.app/</span>
+                    <Input defaultValue={demoRestaurant.slug} className="flex-1" />
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-zinc-700">Description</label>
+                  <Textarea defaultValue={demoRestaurant.description} rows={3} />
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-zinc-700">Currency</label>
+                    <Input defaultValue={demoRestaurant.currency} />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-zinc-700">Timezone</label>
+                    <Input defaultValue={demoRestaurant.timezone} />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Contact */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2"><Phone className="h-4 w-4" /> Contact Information</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-zinc-700">Address</label>
+                  <div className="relative">
+                    <MapPin className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+                    <Input defaultValue={demoRestaurant.address} className="pl-10" />
+                  </div>
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-zinc-700">Phone</label>
+                    <div className="relative">
+                      <Phone className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+                      <Input defaultValue={demoRestaurant.phone} className="pl-10" />
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-zinc-700">Email</label>
+                    <div className="relative">
+                      <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+                      <Input defaultValue={demoRestaurant.email} className="pl-10" />
+                    </div>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-zinc-700">Website</label>
+                  <div className="relative">
+                    <Globe className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+                    <Input defaultValue={demoRestaurant.website} className="pl-10" />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Opening Hours */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2"><Clock className="h-4 w-4" /> Opening Hours</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  {Object.entries(demoRestaurant.opening_hours || {}).map(([day, hours]) => (
+                    <div key={day} className="flex items-center gap-4">
+                      <span className="w-24 text-sm font-medium capitalize text-zinc-700">{day}</span>
+                      <div className="flex items-center gap-2 flex-1">
+                        <Input type="time" defaultValue={hours.open} className="w-32" />
+                        <span className="text-zinc-400">to</span>
+                        <Input type="time" defaultValue={hours.close} className="w-32" />
+                      </div>
+                      <label className="flex items-center gap-2">
+                        <input type="checkbox" defaultChecked={!hours.closed} className="h-4 w-4 rounded border-zinc-300 text-emerald-600 focus:ring-emerald-500" />
+                        <span className="text-xs text-zinc-500">Open</span>
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-6">
+            {/* Logo */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2"><ImageIcon className="h-4 w-4" /> Logo</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-zinc-200 bg-zinc-50 p-8 dark:border-zinc-700 dark:bg-zinc-800/50">
+                  <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-500 to-cyan-500 text-2xl font-bold text-white shadow-lg">
+                    GK
+                  </div>
+                  <Button variant="outline" size="sm" className="mt-4">Upload Logo</Button>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Cover Image */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2"><ImageIcon className="h-4 w-4" /> Cover Image</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-zinc-200 bg-zinc-50 p-8 dark:border-zinc-700 dark:bg-zinc-800/50">
+                  <ImageIcon className="h-10 w-10 text-zinc-300" />
+                  <p className="mt-2 text-xs text-zinc-400">Recommended: 1200 x 400</p>
+                  <Button variant="outline" size="sm" className="mt-3">Upload Cover</Button>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Theme */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2"><Palette className="h-4 w-4" /> Theme Color</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex gap-2">
+                  {['#10b981', '#3b82f6', '#8b5cf6', '#f59e0b', '#ef4444', '#ec4899', '#14b8a6', '#6366f1'].map((color) => (
+                    <button
+                      key={color}
+                      className={cn(
+                        "h-8 w-8 rounded-lg ring-offset-2 transition-all hover:scale-110",
+                        color === demoRestaurant.theme_color ? "ring-2 ring-emerald-500" : "ring-2 ring-transparent"
+                      )}
+                      style={{ backgroundColor: color }}
+                    />
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Status */}
+            <Card>
+              <CardContent className="pt-6">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium text-zinc-700">Restaurant Status</span>
+                  <Badge variant="success">Active</Badge>
+                </div>
+                <p className="mt-2 text-xs text-zinc-500">Your restaurant is visible to customers</p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+}

src/app/(dashboard)/settings/page.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import { DashboardLayout } from '@/components/layout/dashboard-layout';
+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 { User, Bell, Shield, Key, Globe, Trash2, Save, UserPlus, Mail } from 'lucide-react';
+import { demoUser } from '@/lib/demo-data';
+
+export default function SettingsPage() {
+  return (
+    <DashboardLayout>
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-3xl">Settings</h1>
+          <p className="mt-1 text-sm text-zinc-500">Manage your account, notifications, and security.</p>
+        </div>
+
+        <div className="grid gap-6 lg:grid-cols-3">
+          <div className="space-y-6 lg:col-span-2">
+            {/* Profile */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2"><User className="h-4 w-4" /> Profile</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex items-center gap-4">
+                  <div className="flex h-16 w-16 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-500 text-lg font-bold text-white">
+                    AR
+                  </div>
+                  <div>
+                    <Button variant="outline" size="sm">Change Avatar</Button>
+                    <p className="mt-1 text-xs text-zinc-400">JPG, PNG. Max 2MB</p>
+                  </div>
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-zinc-700">Full Name</label>
+                    <Input defaultValue={demoUser.full_name} />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-zinc-700">Email</label>
+                    <Input defaultValue={demoUser.email} type="email" />
+                  </div>
+                </div>
+                <div className="flex justify-end">
+                  <Button variant="primary" size="sm"><Save className="h-4 w-4" /> Save</Button>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Security */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2"><Shield className="h-4 w-4" /> Security</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-zinc-700">Current Password</label>
+                  <Input type="password" placeholder="••••••••" />
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-zinc-700">New Password</label>
+                    <Input type="password" placeholder="Min. 8 characters" />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-zinc-700">Confirm Password</label>
+                    <Input type="password" placeholder="Confirm new password" />
+                  </div>
+                </div>
+                <div className="flex justify-end">
+                  <Button variant="primary" size="sm"><Key className="h-4 w-4" /> Update Password</Button>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Notifications */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2"><Bell className="h-4 w-4" /> Notifications</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  {[
+                    { label: 'New orders', description: 'Get notified when a new order is placed', enabled: true },
+                    { label: 'Order status updates', description: 'Notifications when order status changes', enabled: true },
+                    { label: 'Daily summary', description: 'Receive a daily summary of your sales', enabled: false },
+                    { label: 'Weekly reports', description: 'Weekly analytics and performance report', enabled: true },
+                    { label: 'Marketing emails', description: 'Tips, product updates, and promotions', enabled: false },
+                  ].map((setting) => (
+                    <div key={setting.label} className="flex items-center justify-between rounded-xl border border-zinc-100 p-3 dark:border-zinc-800">
+                      <div>
+                        <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{setting.label}</p>
+                        <p className="text-xs text-zinc-500">{setting.description}</p>
+                      </div>
+                      <button className={`relative h-6 w-11 rounded-full transition-colors ${setting.enabled ? 'bg-emerald-500' : 'bg-zinc-300 dark:bg-zinc-600'}`}>
+                        <span className={`absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform ${setting.enabled ? 'translate-x-5' : ''}`} />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-6">
+            {/* Team */}
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between">
+                <CardTitle className="text-base">Team Members</CardTitle>
+                <Button variant="outline" size="sm"><UserPlus className="h-3.5 w-3.5" /> Invite</Button>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  {[
+                    { name: 'Alex Rivera', email: 'alex@scanmenu.app', role: 'Owner' },
+                    { name: 'Jordan Kim', email: 'jordan@scanmenu.app', role: 'Staff' },
+                    { name: 'Sam Patel', email: 'sam@scanmenu.app', role: 'Staff' },
+                  ].map((member) => (
+                    <div key={member.email} className="flex items-center gap-3">
+                      <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-100 text-xs font-bold text-zinc-600 dark:bg-zinc-800">
+                        {member.name.split(' ').map(n => n[0]).join('')}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium truncate">{member.name}</p>
+                        <p className="text-xs text-zinc-500 truncate">{member.email}</p>
+                      </div>
+                      <Badge variant={member.role === 'Owner' ? 'success' : 'secondary'} className="text-[10px]">
+                        {member.role}
+                      </Badge>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* API Keys */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base flex items-center gap-2"><Key className="h-4 w-4" /> API Keys</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div className="rounded-xl bg-zinc-50 p-3 dark:bg-zinc-800/50">
+                  <p className="text-xs font-medium text-zinc-500">Live Key</p>
+                  <p className="mt-1 font-mono text-xs text-zinc-700 dark:text-zinc-300">sk_live_•••••••••••4xK2</p>
+                </div>
+                <Button variant="outline" size="sm" className="w-full">Generate New Key</Button>
+              </CardContent>
+            </Card>
+
+            {/* Danger Zone */}
+            <Card className="border-red-200 dark:border-red-900/50">
+              <CardHeader>
+                <CardTitle className="text-base text-red-600">Danger Zone</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <p className="text-xs text-zinc-500">Permanently delete your restaurant and all associated data.</p>
+                <Button variant="destructive" size="sm" className="w-full">
+                  <Trash2 className="h-4 w-4" /> Delete Restaurant
+                </Button>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+}

src/app/(public)/restaurant/[slug]/page.tsx

@@ -0,0 +1,436 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  ShoppingBag,
+  MapPin,
+  Phone,
+  Clock,
+  Star,
+  Minus,
+  Plus,
+  X,
+  Search,
+  ChevronRight,
+  Flame,
+  Leaf,
+  AlertCircle,
+  Truck,
+  UtensilsCrossed,
+  ArrowLeft,
+  CheckCircle2,
+  Sparkles,
+  ExternalLink,
+} from 'lucide-react';
+import { demoRestaurant, demoCategories, demoProducts } from '@/lib/demo-data';
+import { formatCurrency, cn } from '@/lib/utils';
+import { Product, OrderType, CartItem } from '@/types/database';
+import { useCartStore } from '@/stores/cart-store';
+import Link from 'next/link';
+
+function ProductDetailSheet({ product, onClose, onAdd }: { product: Product; onClose: () => void; onAdd: (qty: number) => void }) {
+  const [qty, setQty] = useState(1);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center bg-black/40 backdrop-blur-sm" onClick={onClose}>
+      <div className="w-full max-w-md max-h-[85vh] overflow-y-auto rounded-t-3xl sm:rounded-3xl bg-white shadow-2xl animate-in slide-in-from-bottom-4 dark:bg-zinc-900" onClick={(e) => e.stopPropagation()}>
+        {/* Product Image Placeholder */}
+        <div className="relative h-48 bg-gradient-to-br from-emerald-100 to-cyan-100 dark:from-emerald-900/30 dark:to-cyan-900/30">
+          <div className="absolute inset-0 flex items-center justify-center">
+            <UtensilsCrossed className="h-16 w-16 text-emerald-300/50" />
+          </div>
+          <button onClick={onClose} className="absolute right-3 top-3 rounded-full bg-white/80 p-2 backdrop-blur-sm">
+            <X className="h-4 w-4" />
+          </button>
+          {product.is_featured && (
+            <div className="absolute left-3 top-3">
+              <Badge className="bg-amber-500 text-white border-0">
+                <Star className="h-3 w-3 mr-0.5 fill-white" /> Featured
+              </Badge>
+            </div>
+          )}
+        </div>
+
+        <div className="p-5 space-y-4">
+          <div>
+            <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">{product.name}</h2>
+            <p className="mt-1 text-sm text-zinc-500">{product.description}</p>
+          </div>
+
+          {/* Meta */}
+          <div className="flex flex-wrap gap-2">
+            {product.preparation_time && (
+              <Badge variant="secondary"><Clock className="h-3 w-3 mr-0.5" />{product.preparation_time} min</Badge>
+            )}
+            {product.calories && (
+              <Badge variant="secondary"><Flame className="h-3 w-3 mr-0.5" />{product.calories} cal</Badge>
+            )}
+            {product.tags?.map((tag) => (
+              <Badge key={tag} variant="outline" className="capitalize">{tag}</Badge>
+            ))}
+          </div>
+
+          {/* Allergens */}
+          {product.allergens && product.allergens.length > 0 && (
+            <div className="flex items-start gap-2 rounded-xl bg-amber-50 p-3 text-sm dark:bg-amber-950/20">
+              <AlertCircle className="h-4 w-4 shrink-0 text-amber-600 mt-0.5" />
+              <div>
+                <p className="font-medium text-amber-800 dark:text-amber-400">Allergens</p>
+                <p className="text-amber-700/70 dark:text-amber-500/70 capitalize">{product.allergens.join(', ')}</p>
+              </div>
+            </div>
+          )}
+
+          {/* Price & Qty */}
+          <div className="flex items-center justify-between rounded-xl bg-zinc-50 p-4 dark:bg-zinc-800/50">
+            <span className="text-2xl font-bold text-zinc-900 dark:text-zinc-100">{formatCurrency(product.price)}</span>
+            <div className="flex items-center gap-3">
+              <button
+                onClick={() => setQty(Math.max(1, qty - 1))}
+                className="flex h-9 w-9 items-center justify-center rounded-xl border border-zinc-200 text-zinc-600 hover:bg-zinc-100 dark:border-zinc-700 dark:hover:bg-zinc-800"
+              >
+                <Minus className="h-4 w-4" />
+              </button>
+              <span className="w-6 text-center text-lg font-bold">{qty}</span>
+              <button
+                onClick={() => setQty(qty + 1)}
+                className="flex h-9 w-9 items-center justify-center rounded-xl bg-emerald-600 text-white hover:bg-emerald-500"
+              >
+                <Plus className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-full"
+            onClick={() => { onAdd(qty); onClose(); }}
+          >
+            <ShoppingBag className="h-4 w-4" />
+            Add to Order — {formatCurrency(product.price * qty)}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CartSheet({ onClose }: { onClose: () => void }) {
+  const { items, removeItem, updateQuantity, getSubtotal, getTax, getTotal, orderType, setOrderType, tableNumber, setTableNumber, customerName, setCustomerName, customerPhone, setCustomerPhone, deliveryAddress, setDeliveryAddress, notes, setNotes, clearCart } = useCartStore();
+  const [step, setStep] = useState<'cart' | 'details' | 'success'>('cart');
+
+  if (step === 'success') {
+    return (
+      <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center bg-black/40 backdrop-blur-sm">
+        <div className="w-full max-w-md rounded-t-3xl sm:rounded-3xl bg-white p-8 text-center shadow-2xl dark:bg-zinc-900">
+          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-900/30">
+            <CheckCircle2 className="h-8 w-8 text-emerald-600" />
+          </div>
+          <h2 className="mt-4 text-xl font-bold text-zinc-900 dark:text-zinc-100">Order Placed!</h2>
+          <p className="mt-2 text-sm text-zinc-500">Your order has been received and is being prepared. Estimated wait time: 15-20 minutes.</p>
+          <p className="mt-4 text-sm font-medium text-zinc-700 dark:text-zinc-300">Order #1234</p>
+          <Button variant="primary" className="mt-6 w-full" onClick={() => { clearCart(); onClose(); }}>
+            Done
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center bg-black/40 backdrop-blur-sm" onClick={onClose}>
+      <div className="w-full max-w-md max-h-[90vh] flex flex-col rounded-t-3xl sm:rounded-3xl bg-white shadow-2xl dark:bg-zinc-900" onClick={(e) => e.stopPropagation()}>
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-zinc-100 p-5 dark:border-zinc-800">
+          <div className="flex items-center gap-2">
+            {step === 'details' && (
+              <button onClick={() => setStep('cart')} className="rounded-lg p-1 hover:bg-zinc-100 dark:hover:bg-zinc-800">
+                <ArrowLeft className="h-4 w-4" />
+              </button>
+            )}
+            <h2 className="text-lg font-bold">{step === 'cart' ? 'Your Order' : 'Order Details'}</h2>
+          </div>
+          <button onClick={onClose} className="rounded-lg p-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800">
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-5 space-y-4">
+          {step === 'cart' ? (
+            <>
+              {/* Order Type */}
+              <div className="grid grid-cols-3 gap-2">
+                {[
+                  { type: 'dine_in' as OrderType, label: 'Dine In', icon: UtensilsCrossed },
+                  { type: 'takeaway' as OrderType, label: 'Takeaway', icon: ShoppingBag },
+                  { type: 'delivery' as OrderType, label: 'Delivery', icon: Truck },
+                ].map(({ type, label, icon: Icon }) => (
+                  <button
+                    key={type}
+                    onClick={() => setOrderType(type)}
+                    className={cn(
+                      'flex flex-col items-center gap-1.5 rounded-xl border p-3 text-xs font-medium transition-all',
+                      orderType === type
+                        ? 'border-emerald-500 bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30'
+                        : 'border-zinc-200 text-zinc-500 hover:border-zinc-300 dark:border-zinc-700'
+                    )}
+                  >
+                    <Icon className="h-4 w-4" />
+                    {label}
+                  </button>
+                ))}
+              </div>
+
+              {orderType === 'dine_in' && (
+                <Input placeholder="Table number" value={tableNumber || ''} onChange={(e) => setTableNumber(e.target.value)} />
+              )}
+
+              {/* Cart Items */}
+              {items.length === 0 ? (
+                <div className="py-12 text-center">
+                  <ShoppingBag className="mx-auto h-10 w-10 text-zinc-200" />
+                  <p className="mt-3 text-sm text-zinc-500">Your cart is empty</p>
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {items.map((item) => (
+                    <div key={item.id} className="flex items-center gap-3 rounded-xl border border-zinc-100 p-3 dark:border-zinc-800">
+                      <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-50 dark:bg-emerald-900/30">
+                        <UtensilsCrossed className="h-5 w-5 text-emerald-500/50" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium truncate">{item.product.name}</p>
+                        <p className="text-xs text-zinc-500">{formatCurrency(item.product.price)} each</p>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <button onClick={() => updateQuantity(item.id, item.quantity - 1)} className="flex h-7 w-7 items-center justify-center rounded-lg border border-zinc-200 text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700">
+                          <Minus className="h-3 w-3" />
+                        </button>
+                        <span className="w-5 text-center text-sm font-bold">{item.quantity}</span>
+                        <button onClick={() => updateQuantity(item.id, item.quantity + 1)} className="flex h-7 w-7 items-center justify-center rounded-lg bg-emerald-600 text-white hover:bg-emerald-500">
+                          <Plus className="h-3 w-3" />
+                        </button>
+                      </div>
+                      <span className="w-16 text-right text-sm font-semibold">{formatCurrency(item.total)}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </>
+          ) : (
+            /* Details Step */
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Your Name</label>
+                <Input placeholder="Full name" value={customerName} onChange={(e) => setCustomerName(e.target.value)} />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Phone Number</label>
+                <Input placeholder="+1 (555) 000-0000" value={customerPhone} onChange={(e) => setCustomerPhone(e.target.value)} />
+              </div>
+              {orderType === 'delivery' && (
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Delivery Address</label>
+                  <Textarea placeholder="Full delivery address" value={deliveryAddress} onChange={(e) => setDeliveryAddress(e.target.value)} />
+                </div>
+              )}
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Special Instructions</label>
+                <Textarea placeholder="Allergies, preferences, etc." value={notes} onChange={(e) => setNotes(e.target.value)} rows={2} />
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        {items.length > 0 && (
+          <div className="border-t border-zinc-100 p-5 dark:border-zinc-800">
+            <div className="space-y-1.5 mb-4">
+              <div className="flex justify-between text-sm text-zinc-500">
+                <span>Subtotal</span>
+                <span>{formatCurrency(getSubtotal())}</span>
+              </div>
+              <div className="flex justify-between text-sm text-zinc-500">
+                <span>Tax</span>
+                <span>{formatCurrency(getTax())}</span>
+              </div>
+              <div className="flex justify-between text-base font-bold text-zinc-900 dark:text-zinc-100">
+                <span>Total</span>
+                <span>{formatCurrency(getTotal())}</span>
+              </div>
+            </div>
+            <Button
+              variant="primary"
+              size="lg"
+              className="w-full"
+              onClick={() => step === 'cart' ? setStep('details') : setStep('success')}
+            >
+              {step === 'cart' ? (
+                <>Continue <ChevronRight className="h-4 w-4" /></>
+              ) : (
+                <>Place Order — {formatCurrency(getTotal())}</>
+              )}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function PublicMenuPage() {
+  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+  const [showCart, setShowCart] = useState(false);
+  const [activeCategory, setActiveCategory] = useState(demoCategories[0]?.id);
+  const [search, setSearch] = useState('');
+  const { addItem, getItemCount, setRestaurant } = useCartStore();
+
+  useEffect(() => {
+    setRestaurant(demoRestaurant.id, demoRestaurant.name);
+  }, [setRestaurant]);
+
+  const itemCount = getItemCount();
+
+  const filteredProducts = search
+    ? demoProducts.filter((p) => p.name.toLowerCase().includes(search.toLowerCase()) || p.description?.toLowerCase().includes(search.toLowerCase()))
+    : demoProducts;
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-zinc-950">
+      {/* Header */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-emerald-600 via-emerald-500 to-cyan-500 text-white">
+        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+PHBhdGggZD0iTTAgMGg2MHY2MEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0wIDBoMXYxSDB6IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDUpIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI2EpIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIi8+PC9zdmc+')] opacity-30" />
+        <div className="relative px-4 pt-12 pb-6 sm:px-6">
+          <Link href="/" className="inline-flex items-center gap-1.5 text-white/70 hover:text-white text-sm mb-4">
+            <ArrowLeft className="h-4 w-4" /> Back
+          </Link>
+          <div className="flex items-center gap-4">
+            <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-white/20 backdrop-blur-sm text-xl font-bold shadow-lg">
+              GK
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold">{demoRestaurant.name}</h1>
+              <div className="mt-1 flex flex-wrap items-center gap-2 text-sm text-white/80">
+                <span className="flex items-center gap-1"><MapPin className="h-3.5 w-3.5" /> San Francisco</span>
+                <span>•</span>
+                <span className="flex items-center gap-1"><Clock className="h-3.5 w-3.5" /> Open until 10 PM</span>
+                <span>•</span>
+                <span className="flex items-center gap-1"><Star className="h-3.5 w-3.5 fill-white" /> 4.8</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Category Nav */}
+        <div className="relative px-4 pb-3 sm:px-6">
+          <div className="flex gap-2 overflow-x-auto scrollbar-none pb-1">
+            {demoCategories.map((cat) => (
+              <button
+                key={cat.id}
+                onClick={() => { setActiveCategory(cat.id); setSearch(''); }}
+                className={cn(
+                  'whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition-all',
+                  activeCategory === cat.id
+                    ? 'bg-white text-emerald-700 shadow-sm'
+                    : 'bg-white/15 text-white hover:bg-white/25'
+                )}
+              >
+                {cat.name}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Search */}
+      <div className="sticky top-0 z-20 border-b border-zinc-100 bg-white/80 px-4 py-3 backdrop-blur-xl sm:px-6 dark:border-zinc-800 dark:bg-zinc-950/80">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+          <Input
+            placeholder="Search the menu..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-10 bg-zinc-50 border-zinc-100 dark:bg-zinc-900"
+          />
+        </div>
+      </div>
+
+      {/* Products */}
+      <div className="px-4 py-4 pb-32 sm:px-6">
+        {(search ? [{ id: 'search', name: 'Search Results' }] : demoCategories.filter((c) => !activeCategory || c.id === activeCategory)).map((cat) => {
+          const catProducts = filteredProducts.filter((p) =>
+            search ? true : p.category_id === cat.id
+          );
+          if (catProducts.length === 0) return null;
+
+          return (
+            <div key={cat.id} className="mb-8">
+              <h2 className="mb-4 text-lg font-bold text-zinc-900 dark:text-zinc-100">{cat.name}</h2>
+              <div className="grid gap-3 sm:grid-cols-2">
+                {catProducts.map((product) => (
+                  <button
+                    key={product.id}
+                    onClick={() => setSelectedProduct(product)}
+                    className="flex gap-3 rounded-2xl border border-zinc-100 bg-white p-3 text-left transition-all hover:border-zinc-200 hover:shadow-sm active:scale-[0.99] dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700"
+                  >
+                    {/* Image placeholder */}
+                    <div className="flex h-20 w-20 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-zinc-50 to-zinc-100 dark:from-zinc-800 dark:to-zinc-700">
+                      <UtensilsCrossed className="h-6 w-6 text-zinc-300 dark:text-zinc-600" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-1.5">
+                        <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100 truncate">{product.name}</h3>
+                        {product.is_featured && <Star className="h-3 w-3 shrink-0 fill-amber-400 text-amber-400" />}
+                      </div>
+                      <p className="mt-0.5 line-clamp-2 text-xs text-zinc-500">{product.description}</p>
+                      <div className="mt-2 flex items-center justify-between">
+                        <span className="text-sm font-bold text-emerald-600">{formatCurrency(product.price)}</span>
+                        <div className="flex gap-1">
+                          {product.tags?.includes('vegetarian') && <Leaf className="h-3.5 w-3.5 text-green-500" />}
+                          {product.tags?.includes('popular') && <Flame className="h-3.5 w-3.5 text-orange-500" />}
+                        </div>
+                      </div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Floating Cart Button */}
+      {itemCount > 0 && (
+        <div className="fixed bottom-6 left-4 right-4 z-30 sm:left-auto sm:right-6 sm:w-80">
+          <Button
+            variant="primary"
+            size="xl"
+            className="w-full shadow-2xl shadow-emerald-500/30"
+            onClick={() => setShowCart(true)}
+          >
+            <ShoppingBag className="h-5 w-5" />
+            View Order ({itemCount})
+            <span className="ml-auto">{formatCurrency(useCartStore.getState().getTotal())}</span>
+          </Button>
+        </div>
+      )}
+
+      {/* Product Detail Sheet */}
+      {selectedProduct && (
+        <ProductDetailSheet
+          product={selectedProduct}
+          onClose={() => setSelectedProduct(null)}
+          onAdd={(qty) => addItem(selectedProduct, qty)}
+        />
+      )}
+
+      {/* Cart Sheet */}
+      {showCart && <CartSheet onClose={() => setShowCart(false)} />}
+    </div>
+  );
+}

src/app/globals.css

@@ -0,0 +1,65 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #09090b;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-inter);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #09090b;
+    --foreground: #fafafa;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-inter), system-ui, -apple-system, sans-serif;
+}
+
+/* Scrollbar utilities */
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-none {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  width: 4px;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background-color: #d4d4d8;
+  border-radius: 9999px;
+}
+
+/* Animation utilities */
+@keyframes slide-in-from-bottom {
+  from {
+    transform: translateY(16px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.animate-in {
+  animation: slide-in-from-bottom 0.3s ease-out;
+}
+
+.slide-in-from-bottom-4 {
+  animation: slide-in-from-bottom 0.3s ease-out;
+}

src/app/layout.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "ScanMenu — Digital Menus & QR Ordering for Restaurants",
+  description: "Create stunning digital menus, generate QR codes, and let customers order instantly. The modern way to run your restaurant.",
+  keywords: ["restaurant", "digital menu", "QR code", "online ordering", "SaaS"],
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={`${inter.variable} h-full antialiased`}>
+      <body className="min-h-full flex flex-col font-sans">{children}</body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,355 @@
+'use client';
+
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Sparkles,
+  ArrowRight,
+  QrCode,
+  Smartphone,
+  BarChart3,
+  CreditCard,
+  ChefHat,
+  Zap,
+  Star,
+  Menu,
+  X,
+  ShoppingBag,
+  UtensilsCrossed,
+} from 'lucide-react';
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+
+function Navbar() {
+  const [open, setOpen] = useState(false);
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50 border-b border-zinc-200/50 bg-white/80 backdrop-blur-xl dark:border-zinc-800/50 dark:bg-zinc-950/80">
+      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4 sm:px-6">
+        <Link href="/" className="flex items-center gap-2.5">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-cyan-500 shadow-sm">
+            <Sparkles className="h-4 w-4 text-white" />
+          </div>
+          <span className="text-lg font-bold tracking-tight">
+            Scan<span className="text-emerald-600">Menu</span>
+          </span>
+        </Link>
+
+        <div className="hidden items-center gap-8 md:flex">
+          <a href="#features" className="text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors">Features</a>
+          <Link href="/pricing" className="text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors">Pricing</Link>
+          <Link href="/restaurant/the-garden-kitchen" className="text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors">Demo Menu</Link>
+        </div>
+
+        <div className="hidden items-center gap-3 md:flex">
+          <Link href="/login"><Button variant="ghost" size="sm">Sign In</Button></Link>
+          <Link href="/register"><Button variant="primary" size="sm">Get Started Free <ArrowRight className="h-3.5 w-3.5" /></Button></Link>
+        </div>
+
+        <button onClick={() => setOpen(!open)} className="md:hidden rounded-lg p-2 hover:bg-zinc-100">
+          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+        </button>
+      </div>
+
+      {open && (
+        <div className="border-t border-zinc-200 bg-white p-4 md:hidden dark:border-zinc-800 dark:bg-zinc-950">
+          <div className="space-y-2">
+            <a href="#features" className="block rounded-lg px-3 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-50">Features</a>
+            <Link href="/pricing" className="block rounded-lg px-3 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-50">Pricing</Link>
+            <Link href="/restaurant/the-garden-kitchen" className="block rounded-lg px-3 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-50">Demo Menu</Link>
+            <div className="pt-2 space-y-2 border-t border-zinc-100">
+              <Link href="/login"><Button variant="outline" className="w-full">Sign In</Button></Link>
+              <Link href="/register"><Button variant="primary" className="w-full">Get Started Free</Button></Link>
+            </div>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}
+
+const features = [
+  { icon: QrCode, title: 'QR Code Menus', description: 'Generate unique QR codes for each table. Customers scan and browse your menu instantly — no app needed.' },
+  { icon: Smartphone, title: 'Mobile-First Design', description: 'Beautiful, responsive menus optimized for every screen size. Your menu looks amazing on any device.' },
+  { icon: ShoppingBag, title: 'Online Ordering', description: 'Accept dine-in, takeaway, and delivery orders directly. No commissions, no middlemen.' },
+  { icon: ChefHat, title: 'Kitchen Dashboard', description: 'Real-time order management for your staff. Track, prepare, and fulfill orders efficiently.' },
+  { icon: BarChart3, title: 'Smart Analytics', description: 'Understand your business with detailed insights on revenue, popular items, and peak hours.' },
+  { icon: CreditCard, title: 'Integrated Payments', description: 'Accept payments seamlessly with Stripe. Subscriptions, invoicing, and billing made simple.' },
+];
+
+const stats = [
+  { value: '10K+', label: 'Restaurants' },
+  { value: '2.5M', label: 'Orders Processed' },
+  { value: '4.9★', label: 'Average Rating' },
+  { value: '32%', label: 'Revenue Increase' },
+];
+
+const testimonials = [
+  { name: 'Maria Santos', role: 'Owner, Bella Cucina', text: 'ScanMenu completely transformed how we handle orders. Our customers love the simplicity, and we\'ve seen a 32% increase in average order value.' },
+  { name: 'David Park', role: 'Manager, Seoul Kitchen', text: 'The QR code ordering eliminated wait times. We now serve 40% more tables during peak hours. The analytics are incredibly useful.' },
+  { name: 'Sophie Laurent', role: 'Owner, Le Petit Bistro', text: 'Setting up was incredibly easy. Within an hour, we had our entire menu digitized with beautiful product pages and QR codes printed.' },
+];
+
+export default function LandingPage() {
+  return (
+    <div className="min-h-screen bg-white dark:bg-zinc-950">
+      <Navbar />
+
+      {/* Hero */}
+      <section className="relative overflow-hidden pt-32 pb-20 sm:pt-40 sm:pb-28">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-emerald-100/50 via-transparent to-transparent dark:from-emerald-900/10" />
+        <div className="relative mx-auto max-w-6xl px-4 sm:px-6">
+          <div className="text-center">
+            <Badge variant="outline" className="mb-6 gap-1.5 rounded-full py-1.5 pl-1.5 pr-3 text-sm">
+              <span className="rounded-full bg-emerald-500 px-2 py-0.5 text-[10px] font-bold text-white">NEW</span>
+              Real-time order tracking is here
+            </Badge>
+
+            <h1 className="mx-auto max-w-4xl text-4xl font-bold tracking-tight text-zinc-900 sm:text-6xl lg:text-7xl dark:text-white">
+              Your restaurant menu,{' '}
+              <span className="bg-gradient-to-r from-emerald-600 to-cyan-500 bg-clip-text text-transparent">
+                reinvented
+              </span>
+            </h1>
+
+            <p className="mx-auto mt-6 max-w-2xl text-lg text-zinc-600 sm:text-xl dark:text-zinc-400">
+              Create stunning digital menus, generate QR codes, and let customers order instantly — 
+              all without installing an app. Start in under 5 minutes.
+            </p>
+
+            <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
+              <Link href="/register">
+                <Button variant="primary" size="xl" className="w-full sm:w-auto shadow-lg shadow-emerald-500/20">
+                  Start Free Trial <ArrowRight className="h-4 w-4" />
+                </Button>
+              </Link>
+              <Link href="/restaurant/the-garden-kitchen">
+                <Button variant="outline" size="xl" className="w-full sm:w-auto">
+                  <Smartphone className="h-4 w-4" /> View Demo Menu
+                </Button>
+              </Link>
+            </div>
+
+            <p className="mt-4 text-sm text-zinc-500">No credit card required • Free 14-day trial • Cancel anytime</p>
+          </div>
+
+          {/* Dashboard Preview */}
+          <div className="mt-16 sm:mt-20">
+            <div className="relative rounded-2xl border border-zinc-200/60 bg-zinc-900 p-2 shadow-2xl shadow-zinc-900/20 ring-1 ring-zinc-900/5 sm:rounded-3xl sm:p-3">
+              <div className="flex items-center gap-1.5 px-3 pb-2">
+                <div className="h-3 w-3 rounded-full bg-red-400" />
+                <div className="h-3 w-3 rounded-full bg-amber-400" />
+                <div className="h-3 w-3 rounded-full bg-emerald-400" />
+                <span className="ml-3 text-xs text-zinc-500">scanmenu.app/dashboard</span>
+              </div>
+              <div className="overflow-hidden rounded-xl bg-zinc-50 dark:bg-zinc-800">
+                <div className="grid grid-cols-4 gap-3 p-4">
+                  {[
+                    { label: 'Revenue', value: '$12,845', change: '+12.5%', color: 'text-emerald-600' },
+                    { label: 'Orders', value: '347', change: '+8.2%', color: 'text-blue-600' },
+                    { label: 'Avg. Order', value: '$37.02', change: '+3.1%', color: 'text-violet-600' },
+                    { label: 'Active Tables', value: '5/8', change: '3 free', color: 'text-amber-600' },
+                  ].map((stat) => (
+                    <div key={stat.label} className="rounded-xl bg-white p-3 shadow-sm dark:bg-zinc-700">
+                      <p className="text-[10px] font-medium text-zinc-500">{stat.label}</p>
+                      <p className="mt-1 text-lg font-bold text-zinc-900 dark:text-white">{stat.value}</p>
+                      <p className={cn('text-[10px] font-medium', stat.color)}>{stat.change}</p>
+                    </div>
+                  ))}
+                </div>
+                <div className="px-4 pb-4">
+                  <div className="flex h-32 items-end gap-[3px] rounded-xl bg-white p-3 shadow-sm dark:bg-zinc-700">
+                    {Array.from({ length: 30 }).map((_, i) => (
+                      <div
+                        key={i}
+                        className="flex-1 rounded-t-sm bg-emerald-500/80"
+                        style={{ height: `${30 + Math.random() * 70}%` }}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Stats */}
+      <section className="border-y border-zinc-200 bg-zinc-50 py-12 dark:border-zinc-800 dark:bg-zinc-900/50">
+        <div className="mx-auto max-w-6xl px-4 sm:px-6">
+          <div className="grid grid-cols-2 gap-8 sm:grid-cols-4">
+            {stats.map((stat) => (
+              <div key={stat.label} className="text-center">
+                <p className="text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">{stat.value}</p>
+                <p className="mt-1 text-sm font-medium text-zinc-500">{stat.label}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section id="features" className="py-20 sm:py-28">
+        <div className="mx-auto max-w-6xl px-4 sm:px-6">
+          <div className="text-center">
+            <Badge variant="outline" className="mb-4">Features</Badge>
+            <h2 className="text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
+              Everything you need to go digital
+            </h2>
+            <p className="mx-auto mt-4 max-w-2xl text-lg text-zinc-600 dark:text-zinc-400">
+              From menu creation to order management, ScanMenu has you covered with powerful tools designed for modern restaurants.
+            </p>
+          </div>
+
+          <div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {features.map((feature) => (
+              <div key={feature.title} className="group rounded-2xl border border-zinc-200/60 bg-white p-6 transition-all hover:border-zinc-300 hover:shadow-lg dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700">
+                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 transition-colors group-hover:bg-emerald-100 dark:bg-emerald-900/30 dark:group-hover:bg-emerald-900/50">
+                  <feature.icon className="h-6 w-6" />
+                </div>
+                <h3 className="mt-4 text-lg font-semibold text-zinc-900 dark:text-zinc-100">{feature.title}</h3>
+                <p className="mt-2 text-sm leading-relaxed text-zinc-500">{feature.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* How It Works */}
+      <section className="border-y border-zinc-200 bg-zinc-50 py-20 sm:py-28 dark:border-zinc-800 dark:bg-zinc-900/50">
+        <div className="mx-auto max-w-6xl px-4 sm:px-6">
+          <div className="text-center">
+            <Badge variant="outline" className="mb-4">How It Works</Badge>
+            <h2 className="text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
+              Up and running in minutes
+            </h2>
+          </div>
+
+          <div className="mt-16 grid gap-8 sm:grid-cols-3">
+            {[
+              { step: 1, icon: ChefHat, title: 'Create Your Menu', description: 'Add your restaurant, create categories, and upload your products with images, prices, and options.' },
+              { step: 2, icon: QrCode, title: 'Generate QR Codes', description: 'Create unique QR codes for each table or for takeaway/delivery. Print and display them in your restaurant.' },
+              { step: 3, icon: Zap, title: 'Start Receiving Orders', description: 'Customers scan, browse, and order instantly. Manage everything from your real-time dashboard.' },
+            ].map((item) => (
+              <div key={item.step} className="relative text-center">
+                <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-500 to-cyan-500 text-white shadow-lg shadow-emerald-500/30">
+                  <item.icon className="h-7 w-7" />
+                </div>
+                <h3 className="mt-6 text-lg font-semibold text-zinc-900 dark:text-zinc-100">{item.title}</h3>
+                <p className="mt-2 text-sm text-zinc-500">{item.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="py-20 sm:py-28">
+        <div className="mx-auto max-w-6xl px-4 sm:px-6">
+          <div className="text-center">
+            <Badge variant="outline" className="mb-4">Testimonials</Badge>
+            <h2 className="text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
+              Loved by restaurant owners
+            </h2>
+          </div>
+
+          <div className="mt-16 grid gap-6 sm:grid-cols-3">
+            {testimonials.map((t) => (
+              <div key={t.name} className="rounded-2xl border border-zinc-200/60 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
+                <div className="flex gap-0.5">
+                  {[1, 2, 3, 4, 5].map((i) => (
+                    <Star key={i} className="h-4 w-4 fill-amber-400 text-amber-400" />
+                  ))}
+                </div>
+                <p className="mt-4 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">&ldquo;{t.text}&rdquo;</p>
+                <div className="mt-4 flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 text-xs font-bold text-white">
+                    {t.name.split(' ').map((n) => n[0]).join('')}
+                  </div>
+                  <div>
+                    <p className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{t.name}</p>
+                    <p className="text-xs text-zinc-500">{t.role}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="border-t border-zinc-200 dark:border-zinc-800">
+        <div className="mx-auto max-w-6xl px-4 py-20 sm:px-6 sm:py-28">
+          <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-zinc-900 via-zinc-800 to-zinc-900 px-8 py-16 text-center shadow-2xl sm:px-16 dark:from-zinc-800 dark:via-zinc-900 dark:to-zinc-800">
+            <div className="relative">
+              <h2 className="text-3xl font-bold text-white sm:text-4xl">
+                Ready to transform your restaurant?
+              </h2>
+              <p className="mx-auto mt-4 max-w-xl text-lg text-zinc-400">
+                Join thousands of restaurants using ScanMenu to increase revenue, reduce wait times, and delight customers.
+              </p>
+              <div className="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row">
+                <Link href="/register">
+                  <Button variant="primary" size="xl" className="w-full sm:w-auto">
+                    Start Free Trial <ArrowRight className="h-4 w-4" />
+                  </Button>
+                </Link>
+                <Link href="/restaurant/the-garden-kitchen">
+                  <Button variant="outline" size="xl" className="w-full border-zinc-700 text-white hover:bg-zinc-800 hover:text-white sm:w-auto">
+                    View Live Demo
+                  </Button>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900/50">
+        <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
+          <div className="grid gap-8 sm:grid-cols-4">
+            <div>
+              <Link href="/" className="flex items-center gap-2">
+                <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-cyan-500">
+                  <Sparkles className="h-3.5 w-3.5 text-white" />
+                </div>
+                <span className="text-base font-bold">Scan<span className="text-emerald-600">Menu</span></span>
+              </Link>
+              <p className="mt-3 text-sm text-zinc-500">Digital menus and QR ordering for modern restaurants.</p>
+            </div>
+            <div>
+              <h4 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Product</h4>
+              <div className="mt-3 space-y-2 text-sm text-zinc-500">
+                <p className="hover:text-zinc-700 cursor-pointer">Features</p>
+                <p className="hover:text-zinc-700 cursor-pointer">Pricing</p>
+                <p className="hover:text-zinc-700 cursor-pointer">Demo</p>
+                <p className="hover:text-zinc-700 cursor-pointer">Changelog</p>
+              </div>
+            </div>
+            <div>
+              <h4 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Company</h4>
+              <div className="mt-3 space-y-2 text-sm text-zinc-500">
+                <p className="hover:text-zinc-700 cursor-pointer">About</p>
+                <p className="hover:text-zinc-700 cursor-pointer">Blog</p>
+                <p className="hover:text-zinc-700 cursor-pointer">Careers</p>
+                <p className="hover:text-zinc-700 cursor-pointer">Contact</p>
+              </div>
+            </div>
+            <div>
+              <h4 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Legal</h4>
+              <div className="mt-3 space-y-2 text-sm text-zinc-500">
+                <p className="hover:text-zinc-700 cursor-pointer">Privacy</p>
+                <p className="hover:text-zinc-700 cursor-pointer">Terms</p>
+                <p className="hover:text-zinc-700 cursor-pointer">Security</p>
+              </div>
+            </div>
+          </div>
+          <div className="mt-8 border-t border-zinc-200 pt-8 text-center text-sm text-zinc-400 dark:border-zinc-800">
+            &copy; 2025 ScanMenu. All rights reserved.
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

src/app/pricing/page.tsx

@@ -0,0 +1,271 @@
+'use client';
+
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Sparkles,
+  ArrowRight,
+  ArrowLeft,
+  Check,
+  Zap,
+  Crown,
+  Building2,
+  HelpCircle,
+} from 'lucide-react';
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+
+const plans = [
+  {
+    name: 'Free',
+    price: 0,
+    yearlyPrice: 0,
+    description: 'Try ScanMenu for free with basic features.',
+    icon: Sparkles,
+    features: [
+      '1 restaurant',
+      'Up to 15 menu items',
+      '2 QR codes',
+      'Basic ordering',
+      '50 orders/month',
+      'Community support',
+    ],
+    cta: 'Get Started',
+    popular: false,
+  },
+  {
+    name: 'Starter',
+    price: 29,
+    yearlyPrice: 24,
+    description: 'Perfect for small restaurants just getting started.',
+    icon: Zap,
+    features: [
+      '1 restaurant',
+      'Up to 50 menu items',
+      '10 QR codes',
+      'Dine-in + Takeaway',
+      'Basic analytics',
+      'Email support',
+      '500 orders/month',
+      'Custom branding',
+    ],
+    cta: 'Start Trial',
+    popular: false,
+  },
+  {
+    name: 'Pro',
+    price: 79,
+    yearlyPrice: 66,
+    description: 'For growing restaurants with advanced needs.',
+    icon: Crown,
+    features: [
+      'Unlimited restaurants',
+      'Unlimited menu items',
+      'Unlimited QR codes',
+      'Dine-in + Takeaway + Delivery',
+      'Advanced analytics',
+      'Priority support',
+      'Unlimited orders',
+      'Custom branding',
+      'API access',
+      'Team members (up to 10)',
+      'Real-time order tracking',
+      'Product options & extras',
+    ],
+    cta: 'Start Trial',
+    popular: true,
+  },
+  {
+    name: 'Enterprise',
+    price: 199,
+    yearlyPrice: 166,
+    description: 'For multi-location chains and franchises.',
+    icon: Building2,
+    features: [
+      'Everything in Pro',
+      'Multi-location dashboard',
+      'Unlimited team members',
+      'Dedicated account manager',
+      'Custom integrations',
+      '99.9% SLA guarantee',
+      'White-label solution',
+      'Onboarding training',
+      'Advanced security',
+      'Custom API limits',
+      'Phone support',
+      'Invoice billing',
+    ],
+    cta: 'Contact Sales',
+    popular: false,
+  },
+];
+
+const faq = [
+  { q: 'Can I try ScanMenu for free?', a: 'Yes! Our Free plan lets you try ScanMenu with basic features at no cost. We also offer a 14-day free trial on all paid plans — no credit card required.' },
+  { q: 'How do QR codes work?', a: 'Each QR code is linked to a specific table or order type (takeaway/delivery). Customers scan with their phone camera and instantly see your menu — no app download needed.' },
+  { q: 'Can I switch plans later?', a: 'Absolutely! You can upgrade or downgrade your plan at any time. Changes take effect at the start of your next billing cycle, and we prorate any differences.' },
+  { q: 'Do customers need to install an app?', a: 'No! That\'s the beauty of ScanMenu. Customers simply scan a QR code and your menu opens in their phone\'s browser. Zero friction, zero downloads.' },
+  { q: 'What payment methods do you accept?', a: 'We accept all major credit cards (Visa, Mastercard, Amex, Discover) through Stripe. Enterprise customers can also pay via invoice.' },
+  { q: 'Is my data secure?', a: 'Yes. We use Supabase (built on PostgreSQL) with row-level security, SSL encryption, and regular backups. Your data is safe and compliant.' },
+];
+
+export default function PricingPage() {
+  const [annual, setAnnual] = useState(false);
+  const [openFaq, setOpenFaq] = useState<number | null>(0);
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-zinc-950">
+      {/* Nav */}
+      <nav className="border-b border-zinc-200/50 bg-white/80 backdrop-blur-xl dark:border-zinc-800/50 dark:bg-zinc-950/80">
+        <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4 sm:px-6">
+          <Link href="/" className="flex items-center gap-2.5">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-cyan-500 shadow-sm">
+              <Sparkles className="h-4 w-4 text-white" />
+            </div>
+            <span className="text-lg font-bold tracking-tight">Scan<span className="text-emerald-600">Menu</span></span>
+          </Link>
+          <div className="flex items-center gap-3">
+            <Link href="/login"><Button variant="ghost" size="sm">Sign In</Button></Link>
+            <Link href="/register"><Button variant="primary" size="sm">Get Started</Button></Link>
+          </div>
+        </div>
+      </nav>
+
+      {/* Header */}
+      <section className="pt-16 pb-8 text-center">
+        <div className="mx-auto max-w-3xl px-4">
+          <Badge variant="outline" className="mb-4">Pricing</Badge>
+          <h1 className="text-4xl font-bold tracking-tight text-zinc-900 sm:text-5xl dark:text-white">
+            Simple, transparent pricing
+          </h1>
+          <p className="mt-4 text-lg text-zinc-600 dark:text-zinc-400">
+            Choose the plan that fits your restaurant. Upgrade, downgrade, or cancel anytime.
+          </p>
+        </div>
+      </section>
+
+      {/* Toggle */}
+      <div className="flex items-center justify-center gap-3 pb-12">
+        <span className={cn('text-sm font-medium transition-colors', !annual ? 'text-zinc-900' : 'text-zinc-500')}>Monthly</span>
+        <button
+          onClick={() => setAnnual(!annual)}
+          className={cn('relative h-6 w-11 rounded-full transition-colors', annual ? 'bg-emerald-500' : 'bg-zinc-300')}
+        >
+          <span className={cn('absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform', annual && 'translate-x-5')} />
+        </button>
+        <span className={cn('text-sm font-medium transition-colors', annual ? 'text-zinc-900' : 'text-zinc-500')}>
+          Annual <Badge variant="success" className="ml-1 text-[10px]">Save 17%</Badge>
+        </span>
+      </div>
+
+      {/* Plans */}
+      <section className="pb-20">
+        <div className="mx-auto max-w-6xl px-4 sm:px-6">
+          <div className="grid gap-6 lg:grid-cols-4">
+            {plans.map((plan) => (
+              <div
+                key={plan.name}
+                className={cn(
+                  'relative flex flex-col rounded-2xl border bg-white p-6 transition-all hover:shadow-lg dark:bg-zinc-900',
+                  plan.popular
+                    ? 'border-emerald-500 shadow-lg ring-1 ring-emerald-500/20'
+                    : 'border-zinc-200 dark:border-zinc-800'
+                )}
+              >
+                {plan.popular && (
+                  <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+                    <Badge className="bg-emerald-500 text-white border-0 px-3 py-1">Most Popular</Badge>
+                  </div>
+                )}
+
+                <div className="mb-6">
+                  <div className="flex items-center gap-2 mb-3">
+                    <div className={cn(
+                      'flex h-9 w-9 items-center justify-center rounded-xl',
+                      plan.popular ? 'bg-emerald-100 text-emerald-600' : 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800'
+                    )}>
+                      <plan.icon className="h-4 w-4" />
+                    </div>
+                    <h3 className="text-lg font-bold">{plan.name}</h3>
+                  </div>
+                  <p className="text-sm text-zinc-500 mb-4">{plan.description}</p>
+                  <div className="flex items-baseline gap-1">
+                    <span className="text-4xl font-bold text-zinc-900 dark:text-white">
+                      ${annual ? plan.yearlyPrice : plan.price}
+                    </span>
+                    {plan.price > 0 && <span className="text-zinc-500">/month</span>}
+                  </div>
+                  {annual && plan.price > 0 && (
+                    <p className="mt-1 text-xs text-emerald-600">
+                      ${plan.yearlyPrice * 12}/year (save ${(plan.price - plan.yearlyPrice) * 12})
+                    </p>
+                  )}
+                </div>
+
+                <Link href="/register" className="block mb-6">
+                  <Button
+                    variant={plan.popular ? 'primary' : 'outline'}
+                    className="w-full"
+                  >
+                    {plan.cta} {plan.price > 0 && <ArrowRight className="h-4 w-4" />}
+                  </Button>
+                </Link>
+
+                <div className="flex-1 space-y-3">
+                  {plan.features.map((feature) => (
+                    <div key={feature} className="flex items-start gap-2 text-sm">
+                      <Check className={cn('h-4 w-4 shrink-0 mt-0.5', plan.popular ? 'text-emerald-500' : 'text-zinc-400')} />
+                      <span className="text-zinc-600 dark:text-zinc-400">{feature}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <section className="border-t border-zinc-200 bg-zinc-50 py-20 dark:border-zinc-800 dark:bg-zinc-900/50">
+        <div className="mx-auto max-w-3xl px-4 sm:px-6">
+          <div className="text-center mb-12">
+            <Badge variant="outline" className="mb-4">FAQ</Badge>
+            <h2 className="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">Frequently asked questions</h2>
+          </div>
+
+          <div className="space-y-3">
+            {faq.map((item, i) => (
+              <div key={i} className="rounded-2xl border border-zinc-200 bg-white overflow-hidden dark:border-zinc-800 dark:bg-zinc-900">
+                <button
+                  onClick={() => setOpenFaq(openFaq === i ? null : i)}
+                  className="flex w-full items-center justify-between p-5 text-left"
+                >
+                  <span className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{item.q}</span>
+                  <HelpCircle className={cn('h-4 w-4 shrink-0 text-zinc-400 transition-transform', openFaq === i && 'rotate-180')} />
+                </button>
+                {openFaq === i && (
+                  <div className="px-5 pb-5 pt-0">
+                    <p className="text-sm leading-relaxed text-zinc-500">{item.a}</p>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Footer CTA */}
+      <section className="py-16 text-center">
+        <div className="mx-auto max-w-2xl px-4">
+          <h2 className="text-2xl font-bold text-zinc-900 dark:text-white">Still have questions?</h2>
+          <p className="mt-2 text-zinc-500">We&apos;re here to help. Contact our team for a personalized demo.</p>
+          <div className="mt-6 flex justify-center gap-3">
+            <Link href="/register"><Button variant="primary">Start Free Trial</Button></Link>
+            <Button variant="outline">Contact Sales</Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

src/components/layout/dashboard-header.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { Bell, Search, ChevronDown } from 'lucide-react';
+import { getInitials } from '@/lib/utils';
+import { demoUser, demoRestaurant } from '@/lib/demo-data';
+
+export function DashboardHeader() {
+  return (
+    <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-zinc-200/60 bg-white/80 px-4 backdrop-blur-xl sm:px-6 dark:border-zinc-800 dark:bg-zinc-950/80">
+      {/* Search */}
+      <div className="flex items-center gap-3">
+        <div className="relative hidden sm:block">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+          <input
+            type="text"
+            placeholder="Search menus, orders, products..."
+            className="h-9 w-72 rounded-xl border border-zinc-200 bg-zinc-50 pl-9 pr-4 text-sm placeholder:text-zinc-400 focus:border-emerald-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500/20 transition-all dark:border-zinc-700 dark:bg-zinc-900"
+          />
+          <kbd className="absolute right-3 top-1/2 -translate-y-1/2 hidden rounded-md border border-zinc-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-zinc-400 sm:inline-block dark:border-zinc-700 dark:bg-zinc-800">
+            ⌘K
+          </kbd>
+        </div>
+      </div>
+
+      {/* Right side */}
+      <div className="flex items-center gap-2">
+        {/* Restaurant switcher */}
+        <button className="hidden items-center gap-2 rounded-xl border border-zinc-200 px-3 py-2 text-sm font-medium text-zinc-700 transition-all hover:bg-zinc-50 sm:flex dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800">
+          <div className="h-5 w-5 rounded-md bg-gradient-to-br from-emerald-500 to-cyan-500" />
+          <span className="max-w-[120px] truncate">{demoRestaurant.name}</span>
+          <ChevronDown className="h-3.5 w-3.5 text-zinc-400" />
+        </button>
+
+        {/* Notifications */}
+        <button className="relative rounded-xl p-2.5 text-zinc-500 transition-all hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800">
+          <Bell className="h-[18px] w-[18px]" />
+          <span className="absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-emerald-500 ring-2 ring-white dark:ring-zinc-950" />
+        </button>
+
+        {/* Avatar */}
+        <button className="flex items-center gap-2 rounded-xl p-1.5 transition-all hover:bg-zinc-100 dark:hover:bg-zinc-800">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-fuchsia-500 text-xs font-bold text-white shadow-sm">
+            {getInitials(demoUser.full_name)}
+          </div>
+        </button>
+      </div>
+    </header>
+  );
+}

src/components/layout/dashboard-layout.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { DashboardSidebar } from './dashboard-sidebar';
+import { DashboardHeader } from './dashboard-header';
+
+export function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
+      <DashboardSidebar />
+      <div className="lg:pl-[260px] transition-all duration-300">
+        <DashboardHeader />
+        <main className="p-4 sm:p-6 lg:p-8">{children}</main>
+      </div>
+    </div>
+  );
+}

src/components/layout/dashboard-sidebar.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/utils';
+import {
+  LayoutDashboard,
+  UtensilsCrossed,
+  QrCode,
+  ShoppingBag,
+  BarChart3,
+  CreditCard,
+  Settings,
+  Store,
+  ChevronLeft,
+  Menu,
+  LogOut,
+  Sparkles,
+} from 'lucide-react';
+import { useState } from 'react';
+
+const navigation = [
+  { name: 'Overview', href: '/dashboard/overview', icon: LayoutDashboard },
+  { name: 'Menu Builder', href: '/dashboard/menu-builder', icon: UtensilsCrossed },
+  { name: 'QR Codes', href: '/dashboard/qr-manager', icon: QrCode },
+  { name: 'Orders', href: '/dashboard/orders', icon: ShoppingBag },
+  { name: 'Analytics', href: '/dashboard/analytics', icon: BarChart3 },
+  { name: 'Billing', href: '/dashboard/billing', icon: CreditCard },
+  { name: 'Restaurant', href: '/dashboard/restaurant-setup', icon: Store },
+  { name: 'Settings', href: '/dashboard/settings', icon: Settings },
+];
+
+export function DashboardSidebar() {
+  const pathname = usePathname();
+  const [collapsed, setCollapsed] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  return (
+    <>
+      {/* Mobile menu button */}
+      <button
+        onClick={() => setMobileOpen(true)}
+        className="fixed left-4 top-4 z-50 rounded-xl border border-zinc-200 bg-white p-2.5 shadow-sm lg:hidden dark:border-zinc-700 dark:bg-zinc-900"
+      >
+        <Menu className="h-5 w-5 text-zinc-600" />
+      </button>
+
+      {/* Mobile overlay */}
+      {mobileOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/30 backdrop-blur-sm lg:hidden"
+          onClick={() => setMobileOpen(false)}
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        className={cn(
+          'fixed inset-y-0 left-0 z-50 flex flex-col border-r border-zinc-200/60 bg-white transition-all duration-300 dark:border-zinc-800 dark:bg-zinc-950',
+          collapsed ? 'w-[72px]' : 'w-[260px]',
+          mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
+        )}
+      >
+        {/* Logo */}
+        <div className={cn('flex h-16 items-center border-b border-zinc-200/60 px-4 dark:border-zinc-800', collapsed && 'justify-center')}>
+          <Link href="/dashboard/overview" className="flex items-center gap-2.5">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-emerald-500 to-cyan-500 shadow-sm">
+              <Sparkles className="h-4 w-4 text-white" />
+            </div>
+            {!collapsed && (
+              <span className="text-lg font-bold tracking-tight text-zinc-900 dark:text-white">
+                Scan<span className="text-emerald-600">Menu</span>
+              </span>
+            )}
+          </Link>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 space-y-1 overflow-y-auto px-3 py-4">
+          {navigation.map((item) => {
+            const isActive = pathname === item.href || pathname?.startsWith(item.href + '/');
+            return (
+              <Link
+                key={item.name}
+                href={item.href}
+                onClick={() => setMobileOpen(false)}
+                className={cn(
+                  'group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-all duration-150',
+                  isActive
+                    ? 'bg-zinc-900 text-white shadow-sm dark:bg-white dark:text-zinc-900'
+                    : 'text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-white',
+                  collapsed && 'justify-center px-2'
+                )}
+              >
+                <item.icon className={cn('h-[18px] w-[18px] shrink-0', isActive ? 'text-current' : 'text-zinc-400 group-hover:text-zinc-600 dark:group-hover:text-zinc-300')} />
+                {!collapsed && <span>{item.name}</span>}
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* Footer */}
+        <div className="border-t border-zinc-200/60 p-3 dark:border-zinc-800">
+          {!collapsed && (
+            <div className="mb-3 rounded-xl bg-gradient-to-br from-emerald-50 to-cyan-50 p-3 dark:from-emerald-950/30 dark:to-cyan-950/30">
+              <p className="text-xs font-semibold text-emerald-700 dark:text-emerald-400">Pro Plan</p>
+              <p className="mt-0.5 text-[11px] text-emerald-600/70 dark:text-emerald-500/70">Unlimited menus & orders</p>
+            </div>
+          )}
+          <button
+            className={cn(
+              'flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-zinc-500 transition-all hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800',
+              collapsed && 'justify-center px-2'
+            )}
+          >
+            <LogOut className="h-[18px] w-[18px]" />
+            {!collapsed && <span>Sign Out</span>}
+          </button>
+
+          {/* Collapse toggle — desktop only */}
+          <button
+            onClick={() => setCollapsed(!collapsed)}
+            className="mt-2 hidden w-full items-center justify-center rounded-xl p-2 text-zinc-400 transition-all hover:bg-zinc-100 hover:text-zinc-600 lg:flex dark:hover:bg-zinc-800"
+          >
+            <ChevronLeft className={cn('h-4 w-4 transition-transform', collapsed && 'rotate-180')} />
+          </button>
+        </div>
+      </aside>
+    </>
+  );
+}

src/components/ui/badge.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-zinc-900 text-white dark:bg-zinc-50 dark:text-zinc-900',
+        secondary: 'border-transparent bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100',
+        success: 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-400',
+        warning: 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-400',
+        destructive: 'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-400',
+        info: 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-400',
+        outline: 'border-zinc-200 text-zinc-700 dark:border-zinc-700 dark:text-zinc-300',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

src/components/ui/button.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 active:scale-[0.98]',
+  {
+    variants: {
+      variant: {
+        default: 'bg-zinc-900 text-white shadow-sm hover:bg-zinc-800 focus-visible:ring-zinc-500 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100',
+        primary: 'bg-emerald-600 text-white shadow-sm hover:bg-emerald-500 focus-visible:ring-emerald-500',
+        destructive: 'bg-red-600 text-white shadow-sm hover:bg-red-500 focus-visible:ring-red-500',
+        outline: 'border border-zinc-200 bg-white text-zinc-900 shadow-sm hover:bg-zinc-50 hover:border-zinc-300 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800',
+        secondary: 'bg-zinc-100 text-zinc-900 shadow-sm hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700',
+        ghost: 'text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100',
+        link: 'text-emerald-600 underline-offset-4 hover:underline dark:text-emerald-400',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-8 rounded-lg px-3 text-xs',
+        lg: 'h-12 rounded-xl px-6 text-base',
+        xl: 'h-14 rounded-2xl px-8 text-base',
+        icon: 'h-10 w-10',
+        'icon-sm': 'h-8 w-8 rounded-lg',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

src/components/ui/card.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'rounded-2xl border border-zinc-200/60 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm text-zinc-500 dark:text-zinc-400', className)} {...props} />
+  )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

src/components/ui/empty-state.tsx

@@ -0,0 +1,29 @@
+import { LucideIcon } from 'lucide-react';
+import { Button } from './button';
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 px-4">
+      <div className="rounded-2xl bg-zinc-100 p-4 dark:bg-zinc-800">
+        <Icon className="h-8 w-8 text-zinc-400" />
+      </div>
+      <h3 className="mt-4 text-lg font-semibold text-zinc-900 dark:text-zinc-100">{title}</h3>
+      <p className="mt-2 max-w-sm text-center text-sm text-zinc-500 dark:text-zinc-400">{description}</p>
+      {action && (
+        <Button variant="primary" className="mt-6" onClick={action.onClick}>
+          {action.label}
+        </Button>
+      )}
+    </div>
+  );
+}

src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-zinc-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-0 focus-visible:border-emerald-500 disabled:cursor-not-allowed disabled:opacity-50 transition-all dark:border-zinc-700 dark:bg-zinc-900 dark:ring-offset-zinc-950 dark:placeholder:text-zinc-500',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };

src/components/ui/stat-card.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { LucideIcon } from 'lucide-react';
+
+interface StatCardProps {
+  title: string;
+  value: string;
+  change?: string;
+  changeType?: 'positive' | 'negative' | 'neutral';
+  icon: LucideIcon;
+  iconColor?: string;
+}
+
+export function StatCard({ title, value, change, changeType = 'neutral', icon: Icon, iconColor = 'text-emerald-600' }: StatCardProps) {
+  return (
+    <div className="group relative overflow-hidden rounded-2xl border border-zinc-200/60 bg-white p-6 shadow-sm transition-all hover:shadow-md hover:border-zinc-300/60 dark:border-zinc-800 dark:bg-zinc-900">
+      <div className="flex items-start justify-between">
+        <div className="space-y-2">
+          <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">{title}</p>
+          <p className="text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100">{value}</p>
+          {change && (
+            <p className={cn(
+              'text-sm font-medium',
+              changeType === 'positive' && 'text-emerald-600',
+              changeType === 'negative' && 'text-red-600',
+              changeType === 'neutral' && 'text-zinc-500'
+            )}>
+              {change}
+            </p>
+          )}
+        </div>
+        <div className={cn('rounded-xl bg-zinc-50 p-3 dark:bg-zinc-800', iconColor)}>
+          <Icon className="h-5 w-5" />
+        </div>
+      </div>
+      <div className="absolute inset-x-0 bottom-0 h-0.5 bg-gradient-to-r from-emerald-500 to-cyan-500 opacity-0 transition-opacity group-hover:opacity-100" />
+    </div>
+  );
+}

src/components/ui/textarea.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-zinc-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-0 focus-visible:border-emerald-500 disabled:cursor-not-allowed disabled:opacity-50 transition-all dark:border-zinc-700 dark:bg-zinc-900',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

src/lib/demo-data.ts

@@ -0,0 +1,227 @@
+// ============================================================
+// ScanMenu – Demo Data Store
+// Simulates Supabase backend for the demo
+// ============================================================
+
+import { Restaurant, Menu, Category, Product, ProductOption, ProductOptionItem, Table, QRCode, Order, OrderItem, Subscription, User } from '@/types/database';
+
+export const demoUser: User = {
+  id: 'user-1',
+  email: 'demo@scanmenu.app',
+  full_name: 'Alex Rivera',
+  avatar_url: undefined,
+  role: 'owner',
+  created_at: '2025-01-15T10:00:00Z',
+  updated_at: '2025-03-20T14:30:00Z',
+};
+
+export const demoRestaurant: Restaurant = {
+  id: 'rest-1',
+  owner_id: 'user-1',
+  name: 'The Garden Kitchen',
+  slug: 'the-garden-kitchen',
+  description: 'Farm-to-table dining with seasonal menus, craft cocktails, and a lush garden terrace. Experience the freshest ingredients in every dish.',
+  logo_url: undefined,
+  cover_image_url: undefined,
+  address: '742 Evergreen Terrace, San Francisco, CA 94102',
+  phone: '+1 (415) 555-0123',
+  email: 'hello@gardenkitchen.com',
+  website: 'https://gardenkitchen.com',
+  currency: 'USD',
+  timezone: 'America/Los_Angeles',
+  is_active: true,
+  opening_hours: {
+    monday: { open: '11:00', close: '22:00' },
+    tuesday: { open: '11:00', close: '22:00' },
+    wednesday: { open: '11:00', close: '22:00' },
+    thursday: { open: '11:00', close: '23:00' },
+    friday: { open: '11:00', close: '23:30' },
+    saturday: { open: '10:00', close: '23:30' },
+    sunday: { open: '10:00', close: '21:00' },
+  },
+  theme_color: '#10b981',
+  created_at: '2025-01-15T10:00:00Z',
+  updated_at: '2025-03-20T14:30:00Z',
+};
+
+export const demoMenu: Menu = {
+  id: 'menu-1',
+  restaurant_id: 'rest-1',
+  name: 'Main Menu',
+  description: 'Our full dining menu',
+  is_active: true,
+  sort_order: 0,
+  created_at: '2025-01-15T10:00:00Z',
+  updated_at: '2025-03-20T14:30:00Z',
+};
+
+export const demoCategories: Category[] = [
+  { id: 'cat-1', menu_id: 'menu-1', restaurant_id: 'rest-1', name: 'Starters', description: 'Light bites to begin your meal', image_url: undefined, is_active: true, sort_order: 0, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'cat-2', menu_id: 'menu-1', restaurant_id: 'rest-1', name: 'Mains', description: 'Hearty entrees and signature dishes', image_url: undefined, is_active: true, sort_order: 1, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'cat-3', menu_id: 'menu-1', restaurant_id: 'rest-1', name: 'Pasta & Risotto', description: 'Fresh handmade pasta and creamy risottos', image_url: undefined, is_active: true, sort_order: 2, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'cat-4', menu_id: 'menu-1', restaurant_id: 'rest-1', name: 'Burgers & Sandwiches', description: 'Gourmet burgers and artisan sandwiches', image_url: undefined, is_active: true, sort_order: 3, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'cat-5', menu_id: 'menu-1', restaurant_id: 'rest-1', name: 'Desserts', description: 'Sweet endings to your meal', image_url: undefined, is_active: true, sort_order: 4, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'cat-6', menu_id: 'menu-1', restaurant_id: 'rest-1', name: 'Drinks', description: 'Cocktails, wines, and refreshments', image_url: undefined, is_active: true, sort_order: 5, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+];
+
+export const demoProducts: Product[] = [
+  // Starters
+  { id: 'prod-1', category_id: 'cat-1', restaurant_id: 'rest-1', name: 'Truffle Burrata', description: 'Creamy burrata with black truffle, heirloom tomatoes, basil oil & sourdough crostini', price: 16.50, image_url: undefined, is_available: true, is_featured: true, preparation_time: 10, calories: 320, allergens: ['dairy', 'gluten'], tags: ['vegetarian', 'popular'], sort_order: 0, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'prod-2', category_id: 'cat-1', restaurant_id: 'rest-1', name: 'Tuna Tartare', description: 'Sashimi-grade tuna, avocado mousse, yuzu ponzu, sesame tuile', price: 18.00, image_url: undefined, is_available: true, is_featured: false, preparation_time: 12, calories: 280, allergens: ['fish', 'sesame'], tags: ['gluten-free'], sort_order: 1, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'prod-3', category_id: 'cat-1', restaurant_id: 'rest-1', name: 'Crispy Calamari', description: 'Lightly breaded calamari, lemon aioli, marinara, fresh herbs', price: 14.00, image_url: undefined, is_available: true, is_featured: false, preparation_time: 8, calories: 410, allergens: ['shellfish', 'gluten'], tags: [], sort_order: 2, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'prod-4', category_id: 'cat-1', restaurant_id: 'rest-1', name: 'Garden Soup', description: 'Seasonal vegetable soup with herbs from our garden, served with warm bread', price: 9.50, image_url: undefined, is_available: true, is_featured: false, preparation_time: 5, calories: 180, allergens: ['gluten'], tags: ['vegan', 'healthy'], sort_order: 3, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  // Mains
+  { id: 'prod-5', category_id: 'cat-2', restaurant_id: 'rest-1', name: 'Grilled Ribeye Steak', description: '12oz prime ribeye, roasted garlic butter, truffle fries, grilled asparagus', price: 42.00, image_url: undefined, is_available: true, is_featured: true, preparation_time: 25, calories: 780, allergens: ['dairy'], tags: ['signature', 'popular'], sort_order: 0, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'prod-6', category_id: 'cat-2', restaurant_id: 'rest-1', name: 'Pan-Seared Salmon', description: 'Atlantic salmon, lemon dill sauce, quinoa pilaf, roasted vegetables', price: 32.00, image_url: undefined, is_available: true, is_featured: true, preparation_time: 20, calories: 520, allergens: ['fish'], tags: ['healthy', 'gluten-free'], sort_order: 1, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'prod-7', category_id: 'cat-2', restaurant_id: 'rest-1', name: 'Herb-Roasted Chicken', description: 'Free-range chicken, herb jus, mashed potatoes, seasonal greens', price: 28.00, image_url: undefined, is_available: true, is_featured: false, preparation_time: 22, calories: 620, allergens: ['dairy'], tags: [], sort_order: 2, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'prod-8', category_id: 'cat-2', restaurant_id: 'rest-1', name: 'Mushroom Wellington', description: 'Wild mushroom & spinach Wellington, red wine reduction, roasted roots', price: 26.00, image_url: undefined, is_available: true, is_featured: false, preparation_time: 25, calories: 480, allergens: ['gluten', 'dairy'], tags: ['vegetarian'], sort_order: 3, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  // Pasta & Risotto
+  { id: 'prod-9', category_id: 'cat-3', restaurant_id: 'rest-1', name: 'Lobster Linguine', description: 'Fresh linguine, butter-poached lobster, cherry tomatoes, white wine & chili', price: 36.00, image_url: undefined, is_available: true, is_featured: true, preparation_time: 18, calories: 580, allergens: ['shellfish', 'gluten', 'dairy'], tags: ['signature'], sort_order: 0, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'prod-10', category_id: 'cat-3', restaurant_id: 'rest-1', name: 'Wild Mushroom Risotto', description: 'Arborio rice, porcini & chanterelle mushrooms, truffle oil, parmesan', price: 24.00, image_url: undefined, is_available: true, is_featured: false, preparation_time: 20, calories: 460, allergens: ['dairy'], tags: ['vegetarian', 'gluten-free'], sort_order: 1, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'prod-11', category_id: 'cat-3', restaurant_id: 'rest-1', name: 'Carbonara', description: 'Spaghetti, guanciale, pecorino romano, black pepper, egg yolk', price: 20.00, image_url: undefined, is_available: true, is_featured: false, preparation_time: 15, calories: 520, allergens: ['gluten', 'dairy', 'egg'], tags: ['classic'], sort_order: 2, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  // Burgers & Sandwiches
+  { id: 'prod-12', category_id: 'cat-4', restaurant_id: 'rest-1', name: 'Garden Smash Burger', description: 'Double smashed patty, aged cheddar, caramelized onions, secret sauce, brioche bun', price: 19.00, image_url: undefined, is_available: true, is_featured: true, preparation_time: 15, calories: 720, allergens: ['gluten', 'dairy'], tags: ['popular', 'signature'], sort_order: 0, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'prod-13', category_id: 'cat-4', restaurant_id: 'rest-1', name: 'Crispy Chicken Sandwich', description: 'Buttermilk fried chicken, slaw, pickles, spicy mayo, potato bun', price: 17.00, image_url: undefined, is_available: true, is_featured: false, preparation_time: 12, calories: 650, allergens: ['gluten', 'dairy', 'egg'], tags: [], sort_order: 1, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'prod-14', category_id: 'cat-4', restaurant_id: 'rest-1', name: 'Grilled Veggie Wrap', description: 'Roasted vegetables, hummus, feta, arugula, sun-dried tomato wrap', price: 15.00, image_url: undefined, is_available: true, is_featured: false, preparation_time: 10, calories: 380, allergens: ['gluten', 'dairy'], tags: ['vegetarian'], sort_order: 2, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  // Desserts
+  { id: 'prod-15', category_id: 'cat-5', restaurant_id: 'rest-1', name: 'Chocolate Lava Cake', description: 'Warm molten chocolate cake, vanilla bean ice cream, raspberry coulis', price: 14.00, image_url: undefined, is_available: true, is_featured: true, preparation_time: 15, calories: 480, allergens: ['gluten', 'dairy', 'egg'], tags: ['popular'], sort_order: 0, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'prod-16', category_id: 'cat-5', restaurant_id: 'rest-1', name: 'Crème Brûlée', description: 'Classic vanilla custard, caramelized sugar, fresh berries', price: 12.00, image_url: undefined, is_available: true, is_featured: false, preparation_time: 5, calories: 340, allergens: ['dairy', 'egg'], tags: ['classic'], sort_order: 1, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'prod-17', category_id: 'cat-5', restaurant_id: 'rest-1', name: 'Tiramisu', description: 'Espresso-soaked ladyfingers, mascarpone cream, cocoa dusting', price: 13.00, image_url: undefined, is_available: true, is_featured: false, preparation_time: 5, calories: 380, allergens: ['gluten', 'dairy', 'egg'], tags: [], sort_order: 2, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  // Drinks
+  { id: 'prod-18', category_id: 'cat-6', restaurant_id: 'rest-1', name: 'Garden Spritz', description: 'Aperol, elderflower, prosecco, fresh herbs, soda', price: 14.00, image_url: undefined, is_available: true, is_featured: true, preparation_time: 3, calories: 180, allergens: [], tags: ['signature', 'cocktail'], sort_order: 0, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'prod-19', category_id: 'cat-6', restaurant_id: 'rest-1', name: 'Espresso Martini', description: 'Vodka, Kahlúa, fresh espresso, coffee beans', price: 15.00, image_url: undefined, is_available: true, is_featured: false, preparation_time: 3, calories: 220, allergens: [], tags: ['cocktail'], sort_order: 1, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'prod-20', category_id: 'cat-6', restaurant_id: 'rest-1', name: 'Fresh Lemonade', description: 'House-made lemonade with mint, ginger, and a hint of lavender', price: 6.00, image_url: undefined, is_available: true, is_featured: false, preparation_time: 2, calories: 120, allergens: [], tags: ['non-alcoholic'], sort_order: 2, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+  { id: 'prod-21', category_id: 'cat-6', restaurant_id: 'rest-1', name: 'House Red Wine', description: 'Cabernet Sauvignon, Napa Valley — rich, full-bodied with dark fruit notes', price: 12.00, image_url: undefined, is_available: true, is_featured: false, preparation_time: 1, calories: 125, allergens: ['sulfites'], tags: ['wine'], sort_order: 3, created_at: '2025-01-15T10:00:00Z', updated_at: '2025-01-15T10:00:00Z' },
+];
+
+export const demoProductOptions: ProductOption[] = [
+  { id: 'opt-1', product_id: 'prod-5', name: 'Doneness', type: 'single', required: true, sort_order: 0 },
+  { id: 'opt-2', product_id: 'prod-12', name: 'Side', type: 'single', required: true, sort_order: 0 },
+  { id: 'opt-3', product_id: 'prod-12', name: 'Add-ons', type: 'multiple', required: false, max_selections: 3, sort_order: 1 },
+];
+
+export const demoOptionItems: ProductOptionItem[] = [
+  // Steak doneness
+  { id: 'optitem-1', option_id: 'opt-1', name: 'Rare', price_modifier: 0, is_default: false, sort_order: 0 },
+  { id: 'optitem-2', option_id: 'opt-1', name: 'Medium Rare', price_modifier: 0, is_default: true, sort_order: 1 },
+  { id: 'optitem-3', option_id: 'opt-1', name: 'Medium', price_modifier: 0, is_default: false, sort_order: 2 },
+  { id: 'optitem-4', option_id: 'opt-1', name: 'Medium Well', price_modifier: 0, is_default: false, sort_order: 3 },
+  { id: 'optitem-5', option_id: 'opt-1', name: 'Well Done', price_modifier: 0, is_default: false, sort_order: 4 },
+  // Burger sides
+  { id: 'optitem-6', option_id: 'opt-2', name: 'Regular Fries', price_modifier: 0, is_default: true, sort_order: 0 },
+  { id: 'optitem-7', option_id: 'opt-2', name: 'Sweet Potato Fries', price_modifier: 2.00, is_default: false, sort_order: 1 },
+  { id: 'optitem-8', option_id: 'opt-2', name: 'Side Salad', price_modifier: 1.50, is_default: false, sort_order: 2 },
+  { id: 'optitem-9', option_id: 'opt-2', name: 'Onion Rings', price_modifier: 2.50, is_default: false, sort_order: 3 },
+  // Burger add-ons
+  { id: 'optitem-10', option_id: 'opt-3', name: 'Extra Patty', price_modifier: 5.00, is_default: false, sort_order: 0 },
+  { id: 'optitem-11', option_id: 'opt-3', name: 'Bacon', price_modifier: 3.00, is_default: false, sort_order: 1 },
+  { id: 'optitem-12', option_id: 'opt-3', name: 'Avocado', price_modifier: 2.50, is_default: false, sort_order: 2 },
+  { id: 'optitem-13', option_id: 'opt-3', name: 'Fried Egg', price_modifier: 2.00, is_default: false, sort_order: 3 },
+];
+
+export const demoTables: Table[] = [
+  { id: 'table-1', restaurant_id: 'rest-1', number: '1', name: 'Window Seat', capacity: 2, is_active: true, created_at: '2025-01-15T10:00:00Z' },
+  { id: 'table-2', restaurant_id: 'rest-1', number: '2', name: 'Corner Booth', capacity: 4, is_active: true, created_at: '2025-01-15T10:00:00Z' },
+  { id: 'table-3', restaurant_id: 'rest-1', number: '3', name: 'Garden Table', capacity: 6, is_active: true, created_at: '2025-01-15T10:00:00Z' },
+  { id: 'table-4', restaurant_id: 'rest-1', number: '4', name: 'Bar Counter', capacity: 2, is_active: true, created_at: '2025-01-15T10:00:00Z' },
+  { id: 'table-5', restaurant_id: 'rest-1', number: '5', name: 'Private Room', capacity: 8, is_active: true, created_at: '2025-01-15T10:00:00Z' },
+  { id: 'table-6', restaurant_id: 'rest-1', number: '6', name: 'Terrace A', capacity: 4, is_active: true, created_at: '2025-01-15T10:00:00Z' },
+  { id: 'table-7', restaurant_id: 'rest-1', number: '7', name: 'Terrace B', capacity: 4, is_active: true, created_at: '2025-01-15T10:00:00Z' },
+  { id: 'table-8', restaurant_id: 'rest-1', number: '8', name: 'High Top', capacity: 2, is_active: false, created_at: '2025-01-15T10:00:00Z' },
+];
+
+export const demoQRCodes: QRCode[] = [
+  { id: 'qr-1', restaurant_id: 'rest-1', table_id: 'table-1', label: 'Table 1 - Window Seat', url: '/restaurant/the-garden-kitchen?table=1', scans: 142, is_active: true, created_at: '2025-01-15T10:00:00Z' },
+  { id: 'qr-2', restaurant_id: 'rest-1', table_id: 'table-2', label: 'Table 2 - Corner Booth', url: '/restaurant/the-garden-kitchen?table=2', scans: 98, is_active: true, created_at: '2025-01-15T10:00:00Z' },
+  { id: 'qr-3', restaurant_id: 'rest-1', table_id: 'table-3', label: 'Table 3 - Garden Table', url: '/restaurant/the-garden-kitchen?table=3', scans: 256, is_active: true, created_at: '2025-01-15T10:00:00Z' },
+  { id: 'qr-4', restaurant_id: 'rest-1', table_id: 'table-4', label: 'Table 4 - Bar Counter', url: '/restaurant/the-garden-kitchen?table=4', scans: 67, is_active: true, created_at: '2025-01-15T10:00:00Z' },
+  { id: 'qr-5', restaurant_id: 'rest-1', table_id: 'table-5', label: 'Table 5 - Private Room', url: '/restaurant/the-garden-kitchen?table=5', scans: 34, is_active: true, created_at: '2025-01-15T10:00:00Z' },
+  { id: 'qr-6', restaurant_id: 'rest-1', label: 'General - Takeaway', url: '/restaurant/the-garden-kitchen?type=takeaway', scans: 523, is_active: true, created_at: '2025-01-15T10:00:00Z' },
+  { id: 'qr-7', restaurant_id: 'rest-1', label: 'General - Delivery', url: '/restaurant/the-garden-kitchen?type=delivery', scans: 891, is_active: true, created_at: '2025-01-15T10:00:00Z' },
+];
+
+export const demoOrders: Order[] = [
+  { id: 'ord-1', restaurant_id: 'rest-1', customer_name: 'Sarah Chen', customer_phone: '+1 555-0101', order_type: 'dine_in', table_number: '3', status: 'preparing', subtotal: 68.50, tax: 5.48, total: 73.98, notes: 'No peanuts please', created_at: new Date(Date.now() - 15 * 60000).toISOString(), updated_at: new Date(Date.now() - 5 * 60000).toISOString() },
+  { id: 'ord-2', restaurant_id: 'rest-1', customer_name: 'Mike Johnson', customer_phone: '+1 555-0102', order_type: 'takeaway', status: 'ready', subtotal: 38.00, tax: 3.04, total: 41.04, created_at: new Date(Date.now() - 30 * 60000).toISOString(), updated_at: new Date(Date.now() - 2 * 60000).toISOString() },
+  { id: 'ord-3', restaurant_id: 'rest-1', customer_name: 'Emily Davis', customer_phone: '+1 555-0103', customer_email: 'emily@email.com', order_type: 'delivery', status: 'confirmed', subtotal: 52.00, tax: 4.16, total: 56.16, delivery_address: '123 Oak Street, Apt 4B', created_at: new Date(Date.now() - 8 * 60000).toISOString(), updated_at: new Date(Date.now() - 6 * 60000).toISOString() },
+  { id: 'ord-4', restaurant_id: 'rest-1', customer_name: 'James Wilson', order_type: 'dine_in', table_number: '1', status: 'pending', subtotal: 94.00, tax: 7.52, total: 101.52, created_at: new Date(Date.now() - 2 * 60000).toISOString(), updated_at: new Date(Date.now() - 2 * 60000).toISOString() },
+  { id: 'ord-5', restaurant_id: 'rest-1', customer_name: 'Lisa Park', order_type: 'dine_in', table_number: '5', status: 'delivered', subtotal: 126.00, tax: 10.08, total: 136.08, created_at: new Date(Date.now() - 90 * 60000).toISOString(), updated_at: new Date(Date.now() - 45 * 60000).toISOString() },
+  { id: 'ord-6', restaurant_id: 'rest-1', customer_name: 'Tom Baker', order_type: 'takeaway', status: 'delivered', subtotal: 32.00, tax: 2.56, total: 34.56, created_at: new Date(Date.now() - 120 * 60000).toISOString(), updated_at: new Date(Date.now() - 100 * 60000).toISOString() },
+];
+
+export const demoOrderItems: OrderItem[] = [
+  { id: 'oi-1', order_id: 'ord-1', product_id: 'prod-1', product_name: 'Truffle Burrata', quantity: 1, unit_price: 16.50, total_price: 16.50 },
+  { id: 'oi-2', order_id: 'ord-1', product_id: 'prod-5', product_name: 'Grilled Ribeye Steak', quantity: 1, unit_price: 42.00, total_price: 42.00, options: { Doneness: 'Medium Rare' } },
+  { id: 'oi-3', order_id: 'ord-1', product_id: 'prod-20', product_name: 'Fresh Lemonade', quantity: 2, unit_price: 6.00, total_price: 12.00 },
+  { id: 'oi-4', order_id: 'ord-2', product_id: 'prod-12', product_name: 'Garden Smash Burger', quantity: 2, unit_price: 19.00, total_price: 38.00, options: { Side: 'Regular Fries' } },
+  { id: 'oi-5', order_id: 'ord-3', product_id: 'prod-6', product_name: 'Pan-Seared Salmon', quantity: 1, unit_price: 32.00, total_price: 32.00 },
+  { id: 'oi-6', order_id: 'ord-3', product_id: 'prod-11', product_name: 'Carbonara', quantity: 1, unit_price: 20.00, total_price: 20.00 },
+  { id: 'oi-7', order_id: 'ord-4', product_id: 'prod-5', product_name: 'Grilled Ribeye Steak', quantity: 2, unit_price: 42.00, total_price: 84.00 },
+  { id: 'oi-8', order_id: 'ord-4', product_id: 'prod-20', product_name: 'Fresh Lemonade', quantity: 1, unit_price: 6.00, total_price: 6.00 },
+  { id: 'oi-9', order_id: 'ord-4', product_id: 'prod-16', product_name: 'Crème Brûlée', quantity: 1, unit_price: 12.00, total_price: 12.00 },
+];
+
+export const demoSubscription: Subscription = {
+  id: 'sub-1',
+  restaurant_id: 'rest-1',
+  stripe_customer_id: 'cus_demo123',
+  stripe_subscription_id: 'sub_demo123',
+  tier: 'pro',
+  status: 'active',
+  current_period_start: '2025-03-01T00:00:00Z',
+  current_period_end: '2025-04-01T00:00:00Z',
+  created_at: '2025-01-15T10:00:00Z',
+  updated_at: '2025-03-01T00:00:00Z',
+};
+
+// Analytics data generators
+export function generateDailyRevenue(days: number = 30) {
+  const data = [];
+  for (let i = days - 1; i >= 0; i--) {
+    const date = new Date();
+    date.setDate(date.getDate() - i);
+    const base = 800 + Math.random() * 1200;
+    const dayOfWeek = date.getDay();
+    const weekendBoost = (dayOfWeek === 5 || dayOfWeek === 6) ? 1.4 : 1;
+    data.push({
+      date: date.toISOString().split('T')[0],
+      revenue: Math.round(base * weekendBoost * 100) / 100,
+      orders: Math.round((base * weekendBoost) / 35),
+    });
+  }
+  return data;
+}
+
+export function generatePopularItems() {
+  return [
+    { name: 'Garden Smash Burger', orders: 186, revenue: 3534 },
+    { name: 'Grilled Ribeye Steak', orders: 142, revenue: 5964 },
+    { name: 'Lobster Linguine', orders: 128, revenue: 4608 },
+    { name: 'Pan-Seared Salmon', orders: 119, revenue: 3808 },
+    { name: 'Chocolate Lava Cake', orders: 98, revenue: 1372 },
+    { name: 'Truffle Burrata', orders: 94, revenue: 1551 },
+    { name: 'Garden Spritz', orders: 87, revenue: 1218 },
+    { name: 'Carbonara', orders: 82, revenue: 1640 },
+  ];
+}
+
+export function generateOrdersByType() {
+  return [
+    { type: 'Dine In', count: 456, percentage: 52 },
+    { type: 'Takeaway', count: 234, percentage: 27 },
+    { type: 'Delivery', count: 183, percentage: 21 },
+  ];
+}
+
+export function generateHourlyOrders() {
+  const hours = [];
+  for (let h = 10; h <= 22; h++) {
+    const lunchPeak = h >= 12 && h <= 14 ? 2.2 : 1;
+    const dinnerPeak = h >= 18 && h <= 21 ? 2.8 : 1;
+    hours.push({
+      hour: `${h}:00`,
+      orders: Math.round((3 + Math.random() * 5) * Math.max(lunchPeak, dinnerPeak)),
+    });
+  }
+  return hours;
+}

src/lib/utils.ts

@@ -0,0 +1,88 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatCurrency(amount: number, currency = 'USD') {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+  }).format(amount);
+}
+
+export function formatDate(date: string | Date) {
+  return new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  }).format(new Date(date));
+}
+
+export function formatTime(date: string | Date) {
+  return new Intl.DateTimeFormat('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+  }).format(new Date(date));
+}
+
+export function formatRelativeTime(date: string | Date) {
+  const now = new Date();
+  const then = new Date(date);
+  const diffMs = now.getTime() - then.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  const diffHours = Math.floor(diffMins / 60);
+  if (diffHours < 24) return `${diffHours}h ago`;
+  const diffDays = Math.floor(diffHours / 24);
+  return `${diffDays}d ago`;
+}
+
+export function generateSlug(name: string) {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '');
+}
+
+export function generateId() {
+  return crypto.randomUUID();
+}
+
+export function truncate(str: string, length: number) {
+  if (str.length <= length) return str;
+  return str.slice(0, length) + '...';
+}
+
+export function getInitials(name: string) {
+  return name
+    .split(' ')
+    .map((n) => n[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2);
+}
+
+export function getOrderStatusColor(status: string) {
+  const colors: Record<string, string> = {
+    pending: 'bg-amber-100 text-amber-700 border-amber-200',
+    confirmed: 'bg-blue-100 text-blue-700 border-blue-200',
+    preparing: 'bg-purple-100 text-purple-700 border-purple-200',
+    ready: 'bg-emerald-100 text-emerald-700 border-emerald-200',
+    delivered: 'bg-gray-100 text-gray-700 border-gray-200',
+    cancelled: 'bg-red-100 text-red-700 border-red-200',
+  };
+  return colors[status] || 'bg-gray-100 text-gray-700 border-gray-200';
+}
+
+export function getOrderTypeLabel(type: string) {
+  const labels: Record<string, string> = {
+    dine_in: 'Dine In',
+    takeaway: 'Takeaway',
+    delivery: 'Delivery',
+  };
+  return labels[type] || type;
+}

src/stores/cart-store.ts

@@ -0,0 +1,116 @@
+'use client';
+
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { CartItem, Product, OrderType } from '@/types/database';
+import { generateId } from '@/lib/utils';
+
+interface CartStore {
+  items: CartItem[];
+  restaurantId: string | null;
+  restaurantName: string | null;
+  orderType: OrderType;
+  tableNumber: string | null;
+  customerName: string;
+  customerPhone: string;
+  customerEmail: string;
+  deliveryAddress: string;
+  notes: string;
+
+  addItem: (product: Product, quantity: number, options?: Record<string, string | string[]>, notes?: string) => void;
+  removeItem: (itemId: string) => void;
+  updateQuantity: (itemId: string, quantity: number) => void;
+  clearCart: () => void;
+  setOrderType: (type: OrderType) => void;
+  setTableNumber: (number: string | null) => void;
+  setRestaurant: (id: string, name: string) => void;
+  setCustomerName: (name: string) => void;
+  setCustomerPhone: (phone: string) => void;
+  setCustomerEmail: (email: string) => void;
+  setDeliveryAddress: (address: string) => void;
+  setNotes: (notes: string) => void;
+  getSubtotal: () => number;
+  getTax: () => number;
+  getTotal: () => number;
+  getItemCount: () => number;
+}
+
+export const useCartStore = create<CartStore>()(
+  persist(
+    (set, get) => ({
+      items: [],
+      restaurantId: null,
+      restaurantName: null,
+      orderType: 'dine_in',
+      tableNumber: null,
+      customerName: '',
+      customerPhone: '',
+      customerEmail: '',
+      deliveryAddress: '',
+      notes: '',
+
+      addItem: (product, quantity, options = {}, notes = '') => {
+        const total = product.price * quantity;
+        const newItem: CartItem = {
+          id: generateId(),
+          product,
+          quantity,
+          options,
+          notes,
+          total,
+        };
+        set((state) => ({ items: [...state.items, newItem] }));
+      },
+
+      removeItem: (itemId) => {
+        set((state) => ({ items: state.items.filter((i) => i.id !== itemId) }));
+      },
+
+      updateQuantity: (itemId, quantity) => {
+        if (quantity <= 0) {
+          get().removeItem(itemId);
+          return;
+        }
+        set((state) => ({
+          items: state.items.map((item) =>
+            item.id === itemId
+              ? { ...item, quantity, total: item.product.price * quantity }
+              : item
+          ),
+        }));
+      },
+
+      clearCart: () => {
+        set({ items: [], notes: '' });
+      },
+
+      setOrderType: (type) => set({ orderType: type }),
+      setTableNumber: (number) => set({ tableNumber: number }),
+      setRestaurant: (id, name) => set({ restaurantId: id, restaurantName: name }),
+      setCustomerName: (name) => set({ customerName: name }),
+      setCustomerPhone: (phone) => set({ customerPhone: phone }),
+      setCustomerEmail: (email) => set({ customerEmail: email }),
+      setDeliveryAddress: (address) => set({ deliveryAddress: address }),
+      setNotes: (notes) => set({ notes }),
+
+      getSubtotal: () => {
+        return get().items.reduce((sum, item) => sum + item.total, 0);
+      },
+
+      getTax: () => {
+        return get().getSubtotal() * 0.08;
+      },
+
+      getTotal: () => {
+        return get().getSubtotal() + get().getTax();
+      },
+
+      getItemCount: () => {
+        return get().items.reduce((sum, item) => sum + item.quantity, 0);
+      },
+    }),
+    {
+      name: 'scanmenu-cart',
+    }
+  )
+);

src/types/database.ts

@@ -0,0 +1,201 @@
+// ============================================================
+// ScanMenu – Complete Database Types
+// ============================================================
+
+export type UserRole = 'admin' | 'owner' | 'staff' | 'customer';
+export type OrderStatus = 'pending' | 'confirmed' | 'preparing' | 'ready' | 'delivered' | 'cancelled';
+export type OrderType = 'dine_in' | 'takeaway' | 'delivery';
+export type SubscriptionTier = 'free' | 'starter' | 'pro' | 'enterprise';
+export type SubscriptionStatus = 'active' | 'past_due' | 'cancelled' | 'trialing';
+
+export interface User {
+  id: string;
+  email: string;
+  full_name: string;
+  avatar_url?: string;
+  role: UserRole;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Restaurant {
+  id: string;
+  owner_id: string;
+  name: string;
+  slug: string;
+  description?: string;
+  logo_url?: string;
+  cover_image_url?: string;
+  address?: string;
+  phone?: string;
+  email?: string;
+  website?: string;
+  currency: string;
+  timezone: string;
+  is_active: boolean;
+  opening_hours?: Record<string, { open: string; close: string; closed?: boolean }>;
+  theme_color: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Menu {
+  id: string;
+  restaurant_id: string;
+  name: string;
+  description?: string;
+  is_active: boolean;
+  sort_order: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Category {
+  id: string;
+  menu_id: string;
+  restaurant_id: string;
+  name: string;
+  description?: string;
+  image_url?: string;
+  is_active: boolean;
+  sort_order: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Product {
+  id: string;
+  category_id: string;
+  restaurant_id: string;
+  name: string;
+  description?: string;
+  price: number;
+  image_url?: string;
+  is_available: boolean;
+  is_featured: boolean;
+  preparation_time?: number; // minutes
+  calories?: number;
+  allergens?: string[];
+  tags?: string[];
+  sort_order: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ProductOption {
+  id: string;
+  product_id: string;
+  name: string; // e.g. "Size", "Spice Level"
+  type: 'single' | 'multiple';
+  required: boolean;
+  min_selections?: number;
+  max_selections?: number;
+  sort_order: number;
+}
+
+export interface ProductOptionItem {
+  id: string;
+  option_id: string;
+  name: string; // e.g. "Small", "Medium", "Large"
+  price_modifier: number;
+  is_default: boolean;
+  sort_order: number;
+}
+
+export interface Table {
+  id: string;
+  restaurant_id: string;
+  number: string;
+  name?: string;
+  capacity?: number;
+  is_active: boolean;
+  qr_code_id?: string;
+  created_at: string;
+}
+
+export interface QRCode {
+  id: string;
+  restaurant_id: string;
+  table_id?: string;
+  label: string;
+  url: string;
+  scans: number;
+  is_active: boolean;
+  created_at: string;
+}
+
+export interface Order {
+  id: string;
+  restaurant_id: string;
+  customer_name?: string;
+  customer_phone?: string;
+  customer_email?: string;
+  order_type: OrderType;
+  table_number?: string;
+  status: OrderStatus;
+  subtotal: number;
+  tax: number;
+  total: number;
+  notes?: string;
+  delivery_address?: string;
+  estimated_time?: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface OrderItem {
+  id: string;
+  order_id: string;
+  product_id: string;
+  product_name: string;
+  quantity: number;
+  unit_price: number;
+  total_price: number;
+  options?: Record<string, string | string[]>;
+  notes?: string;
+}
+
+export interface Subscription {
+  id: string;
+  restaurant_id: string;
+  stripe_customer_id?: string;
+  stripe_subscription_id?: string;
+  tier: SubscriptionTier;
+  status: SubscriptionStatus;
+  current_period_start?: string;
+  current_period_end?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface AnalyticsEvent {
+  id: string;
+  restaurant_id: string;
+  event_type: string;
+  event_data?: Record<string, unknown>;
+  created_at: string;
+}
+
+// ============================================================
+// Cart Types (Client-side)
+// ============================================================
+
+export interface CartItem {
+  id: string;
+  product: Product;
+  quantity: number;
+  options: Record<string, string | string[]>;
+  notes?: string;
+  total: number;
+}
+
+export interface Cart {
+  restaurant_id: string;
+  restaurant_name: string;
+  items: CartItem[];
+  order_type: OrderType;
+  table_number?: string;
+  subtotal: number;
+  tax: number;
+  total: number;
+}

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}