latest chagnes

packages/backend/src/modules/auth/auth.service.ts

@@ -71,8 +71,9 @@ export class AuthService {
     const valid = await bcrypt.compare(password, user.password_hash);
     if (!valid) throw new UnauthorizedException('Invalid credentials');
 
-    const { password_hash, ...safeUser } = user;
+    // Return full profile including restaurantId / driverId so frontend can use them
-    return { user: safeUser, token: this.signToken(user) };
+    const fullUser = await this.validateToken({ sub: user.id, role: user.role });
+    return { user: fullUser, token: this.signToken(user) };
   }
 
   async validateToken(payload: { sub: string; role: string }) {

packages/backend/src/modules/restaurants/restaurants.controller.ts

@@ -1,4 +1,4 @@
-import { Controller, Get, Post, Patch, Body, Param, Query, UseGuards, Request, BadRequestException } from '@nestjs/common';
+import { Controller, Get, Post, Patch, Delete, Body, Param, Query, UseGuards, Request, BadRequestException } from '@nestjs/common';
 import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
 import { RolesGuard, Roles } from '../auth/guards/roles.guard';
 import { RestaurantsService } from './restaurants.service';
@@ -62,6 +62,44 @@ export class RestaurantsController {
     return this.restaurantsService.updateHours(req.user.restaurantId, isOpen);
   }
 
+  // ---- Menu management (restaurant owner) ----
+  // Must be before :slug to avoid route conflict
+
+  @Get('menu/items')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles('restaurant_owner')
+  getMenu(@Request() req) {
+    return this.restaurantsService.getMenu(req.user.restaurantId);
+  }
+
+  @Post('menu/categories')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles('restaurant_owner')
+  addCategory(@Request() req, @Body('name') name: string) {
+    return this.restaurantsService.addCategory(req.user.restaurantId, name);
+  }
+
+  @Post('menu/items')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles('restaurant_owner')
+  addMenuItem(@Request() req, @Body() dto: any) {
+    return this.restaurantsService.addMenuItem(req.user.restaurantId, dto);
+  }
+
+  @Patch('menu/items/:id')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles('restaurant_owner')
+  updateMenuItem(@Request() req, @Param('id') id: string, @Body() dto: any) {
+    return this.restaurantsService.updateMenuItem(req.user.restaurantId, id, dto);
+  }
+
+  @Delete('menu/items/:id')
+  @UseGuards(JwtAuthGuard, RolesGuard)
+  @Roles('restaurant_owner')
+  deleteMenuItem(@Request() req, @Param('id') id: string) {
+    return this.restaurantsService.deleteMenuItem(req.user.restaurantId, id);
+  }
+
   @Get(':slug')
   findBySlug(@Param('slug') slug: string) {
     return this.restaurantsService.findBySlug(slug);

packages/backend/src/modules/restaurants/restaurants.service.ts

@@ -185,6 +185,109 @@ export class RestaurantsService {
     return { lat: 43.6389, lng: -79.4196 }; // fallback: Liberty Village centre
   }
 
+  // ============================================================
+  // MENU MANAGEMENT (restaurant owner)
+  // ============================================================
+
+  async getMenu(restaurantId: string) {
+    const categories = await this.db.queryMany(
+      `SELECT mc.id, mc.name, mc.sort_order, mc.is_active
+       FROM menu_categories mc
+       WHERE mc.restaurant_id = $1
+       ORDER BY mc.sort_order, mc.name`,
+      [restaurantId],
+    );
+
+    const items = await this.db.queryMany(
+      `SELECT mi.id, mi.category_id, mi.name, mi.description, mi.price,
+              mi.is_available, mi.is_featured, mi.dietary_tags, mi.sort_order
+       FROM menu_items mi
+       JOIN menu_categories mc ON mc.id = mi.category_id
+       WHERE mc.restaurant_id = $1
+       ORDER BY mi.sort_order, mi.name`,
+      [restaurantId],
+    );
+
+    return categories.map((cat) => ({
+      ...cat,
+      items: items.filter((i) => i.category_id === cat.id),
+    }));
+  }
+
+  async addCategory(restaurantId: string, name: string) {
+    const existing = await this.db.queryMany(
+      `SELECT sort_order FROM menu_categories WHERE restaurant_id = $1`,
+      [restaurantId],
+    );
+    const nextSort = existing.length + 1;
+    return this.db.queryOne(
+      `INSERT INTO menu_categories (restaurant_id, name, sort_order)
+       VALUES ($1, $2, $3) RETURNING *`,
+      [restaurantId, name.trim(), nextSort],
+    );
+  }
+
+  async addMenuItem(restaurantId: string, dto: {
+    categoryId: string;
+    name: string;
+    description?: string;
+    price: number;
+    dietaryTags?: string[];
+  }) {
+    // Verify category belongs to this restaurant
+    const cat = await this.db.queryOne(
+      `SELECT id FROM menu_categories WHERE id = $1 AND restaurant_id = $2`,
+      [dto.categoryId, restaurantId],
+    );
+    if (!cat) throw new Error('Category not found');
+
+    const count = await this.db.queryOne(
+      `SELECT COUNT(*) AS n FROM menu_items WHERE category_id = $1`,
+      [dto.categoryId],
+    );
+    const nextSort = Number(count?.n || 0) + 1;
+
+    return this.db.queryOne(
+      `INSERT INTO menu_items (restaurant_id, category_id, name, description, price, dietary_tags, sort_order, is_available)
+       VALUES ($1, $2, $3, $4, $5, $6, $7, TRUE) RETURNING *`,
+      [restaurantId, dto.categoryId, dto.name.trim(), dto.description || null, dto.price, dto.dietaryTags || [], nextSort],
+    );
+  }
+
+  async updateMenuItem(restaurantId: string, itemId: string, dto: {
+    name?: string;
+    description?: string;
+    price?: number;
+    isAvailable?: boolean;
+    isFeatured?: boolean;
+  }) {
+    const sets: string[] = [];
+    const params: any[] = [itemId, restaurantId];
+    let idx = 3;
+
+    if (dto.name !== undefined) { sets.push(`name = $${idx++}`); params.push(dto.name.trim()); }
+    if (dto.description !== undefined) { sets.push(`description = $${idx++}`); params.push(dto.description); }
+    if (dto.price !== undefined) { sets.push(`price = $${idx++}`); params.push(dto.price); }
+    if (dto.isAvailable !== undefined) { sets.push(`is_available = $${idx++}`); params.push(dto.isAvailable); }
+    if (dto.isFeatured !== undefined) { sets.push(`is_featured = $${idx++}`); params.push(dto.isFeatured); }
+
+    if (sets.length === 0) return this.db.queryOne(`SELECT * FROM menu_items WHERE id = $1`, [itemId]);
+
+    sets.push(`updated_at = NOW()`);
+    return this.db.queryOne(
+      `UPDATE menu_items SET ${sets.join(', ')}
+       WHERE id = $1 AND restaurant_id = $2 RETURNING *`,
+      params,
+    );
+  }
+
+  async deleteMenuItem(restaurantId: string, itemId: string) {
+    return this.db.queryOne(
+      `DELETE FROM menu_items WHERE id = $1 AND restaurant_id = $2 RETURNING id`,
+      [itemId, restaurantId],
+    );
+  }
+
   // ============================================================
   // SAVINGS CALCULATOR (standalone - for marketing page)
   // ============================================================

packages/web/src/app/restaurant/dashboard/page.tsx

@@ -171,6 +171,9 @@ export default function RestaurantDashboardPage() {
             <p className="text-slate-500 text-sm">Restaurant Dashboard</p>
           </div>
           <div className="flex items-center gap-3">
+            <Link href="/restaurant/menu" className="text-sm font-medium text-slate-500 hover:text-vibe-teal">
+              Menu
+            </Link>
             <Link
               href="/restaurant/orders"
               className="relative text-sm font-medium text-vibe-teal hover:underline"

packages/web/src/app/restaurant/menu/page.tsx

@@ -0,0 +1,479 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { api } from '@/lib/api'
+
+interface MenuItem {
+  id: string
+  category_id: string
+  name: string
+  description: string | null
+  price: number
+  is_available: boolean
+  is_featured: boolean
+}
+
+interface Category {
+  id: string
+  name: string
+  sort_order: number
+  is_active: boolean
+  items: MenuItem[]
+}
+
+// ────────────────────────────────────────────────────────────────
+// RESTAURANT MENU MANAGEMENT
+// ────────────────────────────────────────────────────────────────
+
+export default function RestaurantMenuPage() {
+  const [categories, setCategories] = useState<Category[]>([])
+  const [loading, setLoading] = useState(true)
+  const [showAddCategory, setShowAddCategory] = useState(false)
+  const [newCategoryName, setNewCategoryName] = useState('')
+  const [addingCategory, setAddingCategory] = useState(false)
+  const [addingToCategory, setAddingToCategory] = useState<string | null>(null)
+  const [editingItem, setEditingItem] = useState<MenuItem | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const load = async () => {
+    try {
+      const { data } = await api.get('/restaurants/menu/items')
+      setCategories(data)
+    } catch {}
+    setLoading(false)
+  }
+
+  useEffect(() => { load() }, [])
+
+  const addCategory = async () => {
+    if (!newCategoryName.trim()) return
+    setAddingCategory(true)
+    try {
+      const { data } = await api.post('/restaurants/menu/categories', { name: newCategoryName })
+      setCategories((prev) => [...prev, { ...data, items: [] }])
+      setNewCategoryName('')
+      setShowAddCategory(false)
+    } catch {}
+    setAddingCategory(false)
+  }
+
+  const toggleAvailability = async (item: MenuItem) => {
+    try {
+      const { data } = await api.patch(`/restaurants/menu/items/${item.id}`, {
+        isAvailable: !item.is_available,
+      })
+      setCategories((prev) => prev.map((cat) => ({
+        ...cat,
+        items: cat.items.map((i) => i.id === item.id ? { ...i, is_available: data.is_available } : i),
+      })))
+    } catch {}
+  }
+
+  const saveItem = async (catId: string, form: NewItemForm) => {
+    setSaving(true)
+    setError('')
+    try {
+      const { data } = await api.post('/restaurants/menu/items', {
+        categoryId: catId,
+        name: form.name,
+        description: form.description || undefined,
+        price: parseFloat(form.price),
+        dietaryTags: form.dietaryTags.length > 0 ? form.dietaryTags : undefined,
+      })
+      setCategories((prev) => prev.map((cat) =>
+        cat.id === catId ? { ...cat, items: [...cat.items, data] } : cat
+      ))
+      setAddingToCategory(null)
+    } catch (err: any) {
+      setError(err.response?.data?.message || 'Failed to add item')
+    }
+    setSaving(false)
+  }
+
+  const saveEdit = async (form: EditItemForm) => {
+    if (!editingItem) return
+    setSaving(true)
+    setError('')
+    try {
+      const { data } = await api.patch(`/restaurants/menu/items/${editingItem.id}`, {
+        name: form.name,
+        description: form.description || null,
+        price: parseFloat(form.price),
+      })
+      setCategories((prev) => prev.map((cat) => ({
+        ...cat,
+        items: cat.items.map((i) => i.id === editingItem.id ? { ...i, ...data } : i),
+      })))
+      setEditingItem(null)
+    } catch (err: any) {
+      setError(err.response?.data?.message || 'Failed to update item')
+    }
+    setSaving(false)
+  }
+
+  const deleteItem = async (item: MenuItem) => {
+    if (!confirm(`Delete "${item.name}"?`)) return
+    try {
+      await api.delete(`/restaurants/menu/items/${item.id}`)
+      setCategories((prev) => prev.map((cat) => ({
+        ...cat,
+        items: cat.items.filter((i) => i.id !== item.id),
+      })))
+    } catch {}
+  }
+
+  const totalItems = categories.reduce((sum, c) => sum + c.items.length, 0)
+  const liveItems = categories.reduce((sum, c) => sum + c.items.filter((i) => i.is_available).length, 0)
+
+  return (
+    <div className="min-h-screen bg-slate-50">
+      {/* Header */}
+      <div className="bg-white border-b border-slate-100 px-6 py-4 sticky top-0 z-10">
+        <div className="max-w-3xl mx-auto flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Link href="/restaurant/dashboard" className="text-slate-400 hover:text-vibe-teal text-sm">← Dashboard</Link>
+            <span className="text-slate-300">|</span>
+            <h1 className="font-bold text-vibe-dark">Menu</h1>
+            <span className="text-slate-400 text-sm">{liveItems}/{totalItems} items live</span>
+          </div>
+          <button
+            onClick={() => setShowAddCategory(true)}
+            className="bg-vibe-teal text-white px-4 py-2 rounded-xl text-sm font-semibold hover:bg-teal-700 transition"
+          >
+            + Add Category
+          </button>
+        </div>
+      </div>
+
+      <div className="max-w-3xl mx-auto px-4 py-6 space-y-6">
+
+        {/* Add category inline */}
+        {showAddCategory && (
+          <div className="bg-white rounded-2xl border-2 border-vibe-teal/40 p-4">
+            <h3 className="font-semibold text-vibe-dark mb-3">New Category</h3>
+            <div className="flex gap-3">
+              <input
+                autoFocus
+                type="text"
+                value={newCategoryName}
+                onChange={(e) => setNewCategoryName(e.target.value)}
+                onKeyDown={(e) => { if (e.key === 'Enter') addCategory(); if (e.key === 'Escape') setShowAddCategory(false) }}
+                placeholder="e.g. Burgers, Starters, Drinks..."
+                className="flex-1 border border-slate-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-vibe-teal"
+              />
+              <button
+                onClick={addCategory}
+                disabled={addingCategory || !newCategoryName.trim()}
+                className="bg-vibe-teal text-white px-5 py-2.5 rounded-xl font-semibold text-sm hover:bg-teal-700 transition disabled:opacity-50"
+              >
+                {addingCategory ? 'Adding...' : 'Add'}
+              </button>
+              <button onClick={() => setShowAddCategory(false)} className="text-slate-400 px-3 hover:text-slate-600">✕</button>
+            </div>
+          </div>
+        )}
+
+        {loading ? (
+          <div className="space-y-4">
+            {[1, 2, 3].map((i) => <div key={i} className="bg-white rounded-2xl h-40 animate-pulse" />)}
+          </div>
+        ) : categories.length === 0 ? (
+          <div className="text-center py-20">
+            <div className="text-5xl mb-4">🍽️</div>
+            <h3 className="font-bold text-vibe-dark text-lg mb-2">No menu yet</h3>
+            <p className="text-slate-500 text-sm mb-6">Add a category to get started — e.g. "Burgers", "Drinks"</p>
+            <button
+              onClick={() => setShowAddCategory(true)}
+              className="bg-vibe-teal text-white px-6 py-3 rounded-xl font-semibold hover:bg-teal-700 transition"
+            >
+              + Add First Category
+            </button>
+          </div>
+        ) : (
+          categories.map((cat) => (
+            <CategorySection
+              key={cat.id}
+              category={cat}
+              addingItem={addingToCategory === cat.id}
+              saving={saving}
+              error={error}
+              editingItem={editingItem}
+              onStartAdd={() => { setAddingToCategory(cat.id); setError('') }}
+              onCancelAdd={() => setAddingToCategory(null)}
+              onSaveItem={(form) => saveItem(cat.id, form)}
+              onToggle={toggleAvailability}
+              onEdit={(item) => { setEditingItem(item); setError('') }}
+              onCancelEdit={() => setEditingItem(null)}
+              onSaveEdit={saveEdit}
+              onDelete={deleteItem}
+            />
+          ))
+        )}
+      </div>
+
+      {/* Edit modal */}
+      {editingItem && (
+        <EditItemModal
+          item={editingItem}
+          saving={saving}
+          error={error}
+          onSave={saveEdit}
+          onClose={() => setEditingItem(null)}
+        />
+      )}
+    </div>
+  )
+}
+
+// ────────────────────────────────────────────────────────────────
+
+interface NewItemForm { name: string; description: string; price: string; dietaryTags: string[] }
+interface EditItemForm { name: string; description: string; price: string }
+
+const DIETARY_OPTIONS = ['Vegan', 'Vegetarian', 'Gluten-Free', 'Dairy-Free', 'Nut-Free', 'Halal', 'Spicy']
+
+function CategorySection({ category, addingItem, saving, error, editingItem, onStartAdd, onCancelAdd, onSaveItem, onToggle, onEdit, onCancelEdit, onSaveEdit, onDelete }: {
+  category: Category
+  addingItem: boolean
+  saving: boolean
+  error: string
+  editingItem: MenuItem | null
+  onStartAdd: () => void
+  onCancelAdd: () => void
+  onSaveItem: (form: NewItemForm) => void
+  onToggle: (item: MenuItem) => void
+  onEdit: (item: MenuItem) => void
+  onCancelEdit: () => void
+  onSaveEdit: (form: EditItemForm) => void
+  onDelete: (item: MenuItem) => void
+}) {
+  const [form, setForm] = useState<NewItemForm>({ name: '', description: '', price: '', dietaryTags: [] })
+
+  const liveCount = category.items.filter((i) => i.is_available).length
+
+  return (
+    <div className="bg-white rounded-2xl border border-slate-100 overflow-hidden">
+      {/* Category header */}
+      <div className="px-5 py-4 border-b border-slate-100 flex items-center justify-between">
+        <div>
+          <h2 className="font-bold text-vibe-dark">{category.name}</h2>
+          <p className="text-xs text-slate-400 mt-0.5">
+            {category.items.length} items · {liveCount} live
+          </p>
+        </div>
+        <button
+          onClick={onStartAdd}
+          className="text-vibe-teal text-sm font-semibold hover:underline"
+        >
+          + Add Item
+        </button>
+      </div>
+
+      {/* Add item form */}
+      {addingItem && (
+        <div className="border-b border-slate-100 bg-slate-50 px-5 py-4">
+          <h3 className="text-sm font-semibold text-slate-600 mb-3">New Item in {category.name}</h3>
+          <div className="space-y-3">
+            <div className="grid grid-cols-3 gap-3">
+              <div className="col-span-2">
+                <input
+                  autoFocus
+                  type="text"
+                  value={form.name}
+                  onChange={(e) => setForm({ ...form, name: e.target.value })}
+                  placeholder="Item name *"
+                  className="w-full border border-slate-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-vibe-teal"
+                />
+              </div>
+              <div>
+                <div className="relative">
+                  <span className="absolute left-3 top-2.5 text-slate-400 text-sm">$</span>
+                  <input
+                    type="number"
+                    min="0"
+                    step="0.01"
+                    value={form.price}
+                    onChange={(e) => setForm({ ...form, price: e.target.value })}
+                    placeholder="0.00"
+                    className="w-full border border-slate-200 rounded-xl pl-7 pr-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-vibe-teal"
+                  />
+                </div>
+              </div>
+            </div>
+            <textarea
+              value={form.description}
+              onChange={(e) => setForm({ ...form, description: e.target.value })}
+              placeholder="Description (optional) — ingredients, allergens, portion size..."
+              rows={2}
+              className="w-full border border-slate-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-vibe-teal resize-none"
+            />
+            <div>
+              <p className="text-xs text-slate-500 mb-2">Dietary tags (optional)</p>
+              <div className="flex flex-wrap gap-2">
+                {DIETARY_OPTIONS.map((tag) => (
+                  <button
+                    key={tag}
+                    type="button"
+                    onClick={() => setForm((f) => ({
+                      ...f,
+                      dietaryTags: f.dietaryTags.includes(tag)
+                        ? f.dietaryTags.filter((t) => t !== tag)
+                        : [...f.dietaryTags, tag],
+                    }))}
+                    className={`text-xs px-3 py-1 rounded-full border transition ${
+                      form.dietaryTags.includes(tag)
+                        ? 'bg-vibe-teal text-white border-vibe-teal'
+                        : 'bg-white text-slate-500 border-slate-200 hover:border-vibe-teal'
+                    }`}
+                  >
+                    {tag}
+                  </button>
+                ))}
+              </div>
+            </div>
+            {error && <p className="text-red-600 text-sm bg-red-50 rounded-xl px-3 py-2">{error}</p>}
+            <div className="flex gap-3">
+              <button
+                onClick={() => { onSaveItem(form); setForm({ name: '', description: '', price: '', dietaryTags: [] }) }}
+                disabled={saving || !form.name.trim() || !form.price}
+                className="bg-vibe-teal text-white px-5 py-2.5 rounded-xl text-sm font-semibold hover:bg-teal-700 transition disabled:opacity-50"
+              >
+                {saving ? 'Adding...' : 'Add to Menu'}
+              </button>
+              <button onClick={onCancelAdd} className="text-slate-500 text-sm hover:text-slate-700 px-3">Cancel</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Items list */}
+      {category.items.length === 0 && !addingItem ? (
+        <div className="px-5 py-6 text-center">
+          <p className="text-slate-400 text-sm">No items yet.</p>
+          <button onClick={onStartAdd} className="text-vibe-teal text-sm hover:underline mt-1">+ Add the first item</button>
+        </div>
+      ) : (
+        <div className="divide-y divide-slate-50">
+          {category.items.map((item) => (
+            <div key={item.id} className={`px-5 py-3.5 flex items-center justify-between gap-4 ${!item.is_available ? 'opacity-60' : ''}`}>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium text-vibe-dark text-sm">{item.name}</span>
+                  {item.is_featured && <span className="text-xs bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded-full">Featured</span>}
+                  {!item.is_available && <span className="text-xs bg-slate-100 text-slate-400 px-1.5 py-0.5 rounded-full">Hidden</span>}
+                </div>
+                {item.description && (
+                  <p className="text-xs text-slate-400 mt-0.5 truncate">{item.description}</p>
+                )}
+              </div>
+
+              <div className="flex items-center gap-3 flex-shrink-0">
+                <span className="font-bold text-vibe-dark text-sm">${Number(item.price).toFixed(2)}</span>
+
+                {/* Live/hidden toggle */}
+                <button
+                  onClick={() => onToggle(item)}
+                  title={item.is_available ? 'Click to hide from customers' : 'Click to make live'}
+                  className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
+                    item.is_available ? 'bg-vibe-teal' : 'bg-slate-200'
+                  }`}
+                >
+                  <span className={`inline-block h-3.5 w-3.5 rounded-full bg-white shadow transition-transform ${
+                    item.is_available ? 'translate-x-4.5' : 'translate-x-0.5'
+                  }`} />
+                </button>
+
+                <button
+                  onClick={() => onEdit(item)}
+                  className="text-slate-400 hover:text-vibe-teal text-xs px-2 py-1 rounded-lg hover:bg-slate-50 transition"
+                >
+                  Edit
+                </button>
+                <button
+                  onClick={() => onDelete(item)}
+                  className="text-slate-300 hover:text-red-500 text-xs px-2 py-1 rounded-lg hover:bg-red-50 transition"
+                >
+                  ✕
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function EditItemModal({ item, saving, error, onSave, onClose }: {
+  item: MenuItem
+  saving: boolean
+  error: string
+  onSave: (form: EditItemForm) => void
+  onClose: () => void
+}) {
+  const [form, setForm] = useState<EditItemForm>({
+    name: item.name,
+    description: item.description || '',
+    price: String(Number(item.price).toFixed(2)),
+  })
+
+  return (
+    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 px-4">
+      <div className="bg-white rounded-2xl w-full max-w-md p-6 shadow-xl">
+        <h2 className="font-bold text-vibe-dark text-lg mb-4">Edit Item</h2>
+
+        <div className="space-y-3">
+          <div>
+            <label className="block text-xs text-slate-500 mb-1">Name *</label>
+            <input
+              autoFocus
+              type="text"
+              value={form.name}
+              onChange={(e) => setForm({ ...form, name: e.target.value })}
+              className="w-full border border-slate-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-vibe-teal"
+            />
+          </div>
+          <div>
+            <label className="block text-xs text-slate-500 mb-1">Description</label>
+            <textarea
+              value={form.description}
+              onChange={(e) => setForm({ ...form, description: e.target.value })}
+              rows={3}
+              className="w-full border border-slate-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-vibe-teal resize-none"
+            />
+          </div>
+          <div>
+            <label className="block text-xs text-slate-500 mb-1">Price *</label>
+            <div className="relative">
+              <span className="absolute left-4 top-2.5 text-slate-400 text-sm">$</span>
+              <input
+                type="number"
+                min="0"
+                step="0.01"
+                value={form.price}
+                onChange={(e) => setForm({ ...form, price: e.target.value })}
+                className="w-full border border-slate-200 rounded-xl pl-8 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-vibe-teal"
+              />
+            </div>
+          </div>
+          {error && <p className="text-red-600 text-sm bg-red-50 rounded-xl px-3 py-2">{error}</p>}
+        </div>
+
+        <div className="flex gap-3 mt-6">
+          <button
+            onClick={() => onSave(form)}
+            disabled={saving || !form.name.trim() || !form.price}
+            className="flex-1 bg-vibe-teal text-white py-3 rounded-xl font-semibold text-sm hover:bg-teal-700 transition disabled:opacity-50"
+          >
+            {saving ? 'Saving...' : 'Save Changes'}
+          </button>
+          <button onClick={onClose} className="px-5 py-3 text-slate-500 text-sm hover:text-slate-700">
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}