historical_context.txt

>(() => id ? categoryStore.getByRestaurant(id) : []);
    24   const [showItemDialog, setShowItemDialog] = useState(false);
    25   const [showCatDialog, setShowCatDialog] = useState(false);
    26   const [editItem, setEditItem] = useState<MenuItem | null>(null);
    27   const [editCat, setEditCat] = useState<Category | null>(null);
    28 
    29   // Item form state
    30   const [itemName, setItemName] = useState('');
    31   const [itemPrice, setItemPrice] = useState('');
    32   const [itemDesc, setItemDesc] = useState('');
    33   const [itemImage, setItemImage] = useState('');
    34   const [itemCategory, setItemCategory] = useState('none');
    35   const [catName, setCatName] = useState('');
    36   const fileRef = useRef<HTMLInputElement>(null);
    37 
    38   if (!owner || !restaurant) { navigate('/owner/dashboard'); return null; }
    39   const plan = getOwnerPlan(owner);
    40   const canAddMore = items.length < maxMenuItems(plan);
    41   const hasCategories = planHas(plan, 'categories');
    42 
    43   const refresh = useCallback(() => {
    44     if (id) { setItems(menuStore.getByRestaurant(id)); setCategories(categoryStore.getByRestaurant(id)); }
    45   }, [id]);
    46 
    47   const openAddItem = () => {
    48     setEditItem(null); setItemName(''); setItemPrice(''); setItemDesc(''); setItemImage(''); setItemCategory('none');
    49     setShowItemDialog(true);
    50   };
    51 
    52   const openEditItem = (item: MenuItem) => {
    53     setEditItem(item); setItemName(item.name); setItemPrice(String(item.price));
    54     setItemDesc(item.description || ''); setItemImage(item.image); setItemCategory(item.categoryId || 'none');
    55     setShowItemDialog(true);
    56   };
    57 
    58   const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    59     const file = e.target.files?.[0];
    60     if (!file) return;
    61     if (!file.type.startsWith('image/')) { toast.error('Please upload an image file'); return; }
    62     setItemImage(await fileToBase64(file));
    63   };
    64 
    65   const saveItem = () => {
    66     if (!itemName.trim()) { toast.error('Item name is required'); return; }
    67     const price = parseFloat(itemPrice);
    68     if (!itemPrice || isNaN(price) || price < 0) { toast.error('Valid price is required'); return; }
    69     if (!itemImage && !editItem) { toast.error('Item image is required'); return; }
    70     if (!canAddMore && !editItem) { toast.error(`Free plan limit: max ${maxMenuItems('free')} items`); return; }
    71 
    72     const m: MenuItem = {
    73       id: editItem?.id || uuid(),
    74       restaurantId: restaurant.id,
    75       categoryId: itemCategory === 'none' ? undefined : itemCategory,
    76       name: itemName.trim(),
    77       description: itemDesc.trim() || undefined,
    78       image: itemImage || editItem?.image || '',
    79       price,
    80       createdAt: editItem?.createdAt || new Date().toISOString(),
    81     };
    82     menuStore.save(m);
    83     refresh();
    84     setShowItemDialog(false);
    85     toast.success(editItem ? 'Item updated' : 'Item added');
    86   };
    87 
    88   const deleteItem = (item: MenuItem) => {
    89     menuStore.delete(item.id);
    90     refresh();
    91     toast.success('Item deleted');
    92   };
    93 
    94   const saveCat = () => {
    95     if (!catName.trim()) { toast.error('Category name required'); return; }
    96     categoryStore.save({
    97       id: editCat?.id || uuid(),
    98       restaurantId: restaurant.id,
    99       name: catName.trim(),
   100       createdAt: editCat?.createdAt || new Date().toISOString(),
   101     });
   102     refresh(); setShowCatDialog(false); toast.success(editCat ? 'Category updated' : 'Category added');
   103   };
   104 
   105   const deleteCat = (cat: Category) => {
   106     categoryStore.delete(cat.id);
   107     // unassign items from this category
   108     menuStore.getByRestaurant(restaurant.id)
   109       .filter((i) => i.categoryId === cat.id)
   110       .forEach((i) => menuStore.save({ ...i, categoryId: undefined }));
   111     refresh();
   112     toast.success('Category deleted');
   113   };
   114 
   115   // Group display
   116   const groups = categories.length > 0
   117     ? [
   118         ...categories.map((cat) => ({ label: cat.name, items: items.filter((i) => i.categoryId === cat.id) })),
   119         { label: 'Uncategorized', items: items.filter((i) => !i.categoryId) },
   120       ].filter((g) => g.items.length > 0)
   121     : [{ label: '', items }];
   122 
   123   return (
   124     <div className="p-4 md:p-6 max-w-4xl mx-auto">
   125       <Button variant="ghost" size="sm" className="gap-2 mb-2 -ml-2" onClick={() => navigate(-1)}>
   126         <ArrowLeft size={14} strokeWidth={2} /> Back
   127       </Button>
   128       <div className="flex items-start justify-between mb-6">
   129         <div>
   130           <h1 className="text-2xl font-bold">Menu</h1>
   131           <p className="text-sm text-muted-foreground">{restaurant.name} · {items.length} items</p>
   132         </div>
   133         <div className="flex gap-2">
   134           {hasCategories ? (
   135             <Button variant="outline" size="sm" className="gap-1" onClick={() => { setEditCat(null); setCatName(''); setShowCatDialog(true); }}>
   136               <Plus size={14} strokeWidth={2} /> Category
   137             </Button>
   138           ) : (
   139             <span className="inline-flex items-center gap-1 rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium opacity-50 cursor-not-allowed select-none" title="Basic plan required">
   140               <Lock size={12} strokeWidth={2} /> Category
   141             </span>
   142           )}
   143           <Button size="sm" className="gap-1" onClick={openAddItem} disabled={!canAddMore}>
   144             <Plus size={14} strokeWidth={2} /> Add Item
   145           </Button>
   146         </div>
   147       </div>
   148 
   149       {!canAddMore && (
   150         <div className="mb-4 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded text-sm text-yellow-700 dark:text-yellow-400">
   151           Free plan limit: {maxMenuItems('free')} items reached. <button className="underline" onClick={() => navigate('/owner/profile')}>Upgrade</button> for unlimited items.
   152         </div>
   153       )}
   154 
   155       {/* Categories list */}
   156       {categories.length > 0 && (
   157         <div className="mb-6 flex flex-wrap gap-2">
   158           {categories.map((cat) => (
   159             <div key={cat.id} className="flex items-center gap-1 border border-border rounded px-2 py-1 bg-card text-sm">
   160               {cat.name}
   161               <button onClick={() => { setEditCat(cat); setCatName(cat.name); setShowCatDialog(true); }} className="ml-1 text-muted-foreground hover:text-foreground">
   162                 <Pencil size={11} strokeWidth={2} />
   163               </button>
   164               <AlertDialog>
   165                 <AlertDialogTrigger asChild>
   166                   <button className="text-muted-foreground hover:text-destructive"><X size={11} strokeWidth={2} /></button>
   167                 </AlertDialogTrigger>
   168                 <AlertDialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg">
   169                   <AlertDialogHeader>
   170                     <AlertDialogTitle>Delete Category?</AlertDialogTitle>
   171                     <AlertDialogDescription>Items in this category will become uncategorized.</AlertDialogDescription>
   172                   </AlertDialogHeader>
   173                   <AlertDialogFooter>
   174                     <AlertDialogCancel>Cancel</AlertDialogCancel>
   175                     <AlertDialogAction onClick={() => deleteCat(cat)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Delete</AlertDialogAction>
   176                   </AlertDialogFooter>
   177                 </AlertDialogContent>
   178               </AlertDialog>
   179             </div>
   180           ))}
   181         </div>
   182       )}
   183 
   184       {items.length === 0 ? (
   185         <div className="text-center py-16 border border-dashed rounded">
   186           <p className="text-muted-foreground">No menu items yet.</p>
   187           <Button className="mt-4" onClick={openAddItem}>Add First Item</Button>
   188         </div>
   189       ) : (
   190         groups.map(({ label, items: groupItems }) => (
   191           <div key={label} className="mb-6">
   192             {label && <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-3">{label}</h3>}
   193             <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
   194               {groupItems.map((item) => (
   195                 <Card key={item.id}>
   196                   <CardContent className="p-3 flex gap-3">
   197                     <div className="w-16 h-16 rounded overflow-hidden bg-muted flex items-center justify-center shrink-0">
   198                       {item.image
   199                         ? <img src={item.image} alt={item.name} className="w-full h-full object-cover" />
   200                         : <span className="font-bold text-muted-foreground">{item.name[0]}</span>}
   201                     </div>
   202                     <div className="flex-1 min-w-0">
   203                       <p className="font-medium text-sm truncate">{item.name}</p>
   204                       {item.description && <p className="text-xs text-muted-foreground line-clamp-1">{item.description}</p>}
   205                       <p className="text-primary font-bold text-sm mt-0.5">₹{item.price}</p>
   206                     </div>
   207                     <div className="flex flex-col gap-1 shrink-0">
   208                       <Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => openEditItem(item)}>
   209                         <Pencil size={13} strokeWidth={2} />
   210                       </Button>
   211                       <AlertDialog>
   212                         <AlertDialogTrigger asChild>
   213                           <Button size="icon" variant="ghost" className="h-7 w-7 text-destructive hover:text-destructive"><Trash2 size={13} strokeWidth={2} /></Button>
   214                         </AlertDialogTrigger>
   215                         <AlertDialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg">
   216                           <AlertDialogHeader><AlertDialogTitle>Delete item?</AlertDialogTitle><AlertDialogDescription>This cannot be undone.</AlertDialogDescription></AlertDialogHeader>
   217                           <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => deleteItem(item)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Delete</AlertDialogAction></AlertDialogFooter>
   218                         </AlertDialogContent>
   219                       </AlertDialog>
   220                     </div>
   221                   </CardContent>
   222                 </Card>
   223               ))}
   224             </div>
   225           </div>
   226         ))
   227       )}
   228 
   229       {/* Item dialog */}
   230       <Dialog open={showItemDialog} onOpenChange={setShowItemDialog}>
   231         <DialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg">
   232           <DialogHeader><DialogTitle>{editItem ? 'Edit Item' : 'Add Menu Item'}</DialogTitle></DialogHeader>
   233           <div className="space-y-3">
   234             <div className="flex items-center gap-4">
   235               <div className="w-20 h-20 rounded border border-border bg-muted flex items-center justify-center overflow-hidden shrink-0">
   236                 {itemImage
   237                   ? <img src={itemImage} alt="preview" className="w-full h-full object-cover" />
   238                   : <Upload size={20} strokeWidth={1.5} className="text-muted-foreground" />}
   239               </div>
   240               <div>
   241                 <Button variant="outline" size="sm" onClick={() => fileRef.current?.click()}>
   242                   {itemImage ? 'Change Image' : 'Upload Image'}
   243                 </Button>
   244                 <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={handleImageUpload} />
   245               </div>
   246             </div>
   247             <div>
   248               <Label>Name *</Label>
   249               <Input placeholder="Item name" value={itemName} onChange={(e) => setItemName(e.target.value)} className="mt-1" />
   250             </div>
   251             <div>
   252               <Label>Price (₹) *</Label>
   253               <Input type="number" placeholder="0" value={itemPrice} onChange={(e) => setItemPrice(e.target.value)} className="mt-1" min="0" step="0.5" />
   254             </div>
   255             <div>
   256               <Label>Description</Label>
   257               <Input placeholder="Short description (optional)" value={itemDesc} onChange={(e) => setItemDesc(e.target.value)} className="mt-1" />
   258             </div>
   259             {categories.length > 0 && (
   260               <div>
   261                 <Label>Category</Label>
   262                 <Select value={itemCategory} onValueChange={setItemCategory}>
   263                   <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
   264                   <SelectContent>
   265                     <SelectItem value="none">No Category</SelectItem>
   266                     {categories.map((c) => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}
   267                   </SelectContent>
   268                 </Select>
   269               </div>
   270             )}
   271             <div className="flex gap-2 pt-1">
   272               <Button variant="outline" className="flex-1" onClick={() => setShowItemDialog(false)}>Cancel</Button>
   273               <Button className="flex-1" onClick={saveItem}>Save</Button>
   274             </div>
   275           </div>
   276         </DialogContent>
   277       </Dialog>
   278 
   279       {/* Category dialog */}
   280       <Dialog open={showCatDialog} onOpenChange={setShowCatDialog}>
   281         <DialogContent className="max-w-[calc(100%-2rem)] md:max-w-sm">
   282           <DialogHeader><DialogTitle>{editCat ? 'Edit Category' : 'Add Category'}</DialogTitle></DialogHeader>
   283           <div className="space-y-3">
   284             <Input placeholder="Category name" value={catName} onChange={(e) => setCatName(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && saveCat()} />
   285             <div className="flex gap-2">
   286               <Button variant="outline" className="flex-1" onClick={() => setShowCatDialog(false)}>Cancel</Button>
   287               <Button className="flex-1" onClick={saveCat}>Save</Button>
   288             </div>
   289           </div>
   290         </DialogContent>
   291       </Dialog>
   292     </div>
   293   );
   294 }
   295 


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/owner/QRPage.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/owner/QRPage.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/owner/QRPage.tsx:
     1 import { useRef, useCallback } from 'react';
     2 import { useNavigate, useParams } from 'react-router-dom';
     3 import { ArrowLeft, Download } from 'lucide-react';
     4 import { QRCodeSVG } from 'qrcode.react';
     5 import { Button } from '@/components/ui/button';
     6 import { Card, CardContent } from '@/components/ui/card';
     7 import { restaurantStore, ownerStore, LOGO_URL, settingsStore } from '@/store';
     8 import html2canvas from 'html2canvas';
     9 import jsPDF from 'jspdf';
    10 
    11 export default function QRPage() {
    12   const { id } = useParams<{ id: string }>();
    13   const navigate = useNavigate();
    14   const owner = ownerStore.getCurrent();
    15   const restaurant = id ? restaurantStore.getById(id) : null;
    16   const qrRef = useRef<HTMLDivElement>(null);
    17   const settings = settingsStore.get();
    18 
    19   if (!owner || !restaurant) { navigate('/owner/dashboard'); return null; }
    20 
    21   const menuUrl = `${window.location.origin}/m/${restaurant.slug}`;
    22   const siteName = settings.siteName || 'Saksham Digi QR Menu';
    23 
    24   const downloadPNG = useCallback(async () => {
    25     if (!qrRef.current) return;
    26     const canvas = await html2canvas(qrRef.current, { scale: 3, backgroundColor: '#ffffff', useCORS: true });
    27     const link = document.createElement('a');
    28     link.download = `qr-${restaurant.slug}.png`;
    29     link.href = canvas.toDataURL('image/png');
    30     link.click();
    31   }, [restaurant.slug]);
    32 
    33   const downloadPDF = useCallback(async () => {
    34     if (!qrRef.current) return;
    35     const canvas = await html2canvas(qrRef.current, { scale: 3, backgroundColor: '#ffffff', useCORS: true });
    36     const img = canvas.toDataURL('image/png');
    37     const pdf = new jsPDF({ unit: 'mm', format: [100, 120] });
    38     const w = pdf.internal.pageSize.getWidth();
    39     const h = (canvas.height / canvas.width) * w;
    40     pdf.addImage(img, 'PNG', 0, 0, w, h);
    41     pdf.save(`qr-${restaurant.slug}.pdf`);
    42   }, [restaurant.slug]);
    43 
    44   return (
    45     <div className="p-4 md:p-6 max-w-lg mx-auto">
    46       <Button variant="ghost" size="sm" className="gap-2 mb-4 -ml-2" onClick={() => navigate(-1)}>
    47         <ArrowLeft size={14} strokeWidth={2} /> Back
    48       </Button>
    49       <h1 className="text-2xl font-bold mb-6">QR Code</h1>
    50 
    51       {/* Branded QR card */}
    52       <Card className="mb-6 overflow-hidden">
    53         <CardContent className="p-0">
    54           <div ref={qrRef} className="flex flex-col items-center p-6 bg-white text-gray-900">
    55             {/* Header */}
    56             <div className="flex items-center gap-2 mb-3">
    57               <img
    58                 src={restaurant.logo || LOGO_URL}
    59                 alt={restaurant.name}
    60                 className="h-10 w-10 object-contain rounded"
    61                 crossOrigin="anonymous"
    62               />
    63               <div>
    64                 <p className="font-bold text-lg leading-tight">{restaurant.name}</p>
    65                 <p className="text-gray-500 text-xs">{restaurant.location}</p>
    66               </div>
    67             </div>
    68 
    69             {/* QR */}
    70             <div className="p-3 border-2 border-gray-200 rounded-lg my-2">
    71               <QRCodeSVG value={menuUrl} size={200} />
    72             </div>
    73 
    74             <p className="text-gray-500 text-xs mt-2">Scan to view menu & order</p>
    75             <p className="text-gray-400 text-xs">{restaurant.phone}</p>
    76 
    77             {/* Footer branding */}
    78             <div className="flex items-center gap-1 mt-3 pt-3 border-t border-gray-100 w-full justify-center">
    79               <img src={LOGO_URL} alt={siteName} className="h-5 w-5 object-contain" crossOrigin="anonymous" />
    80               <span className="text-gray-400 text-xs">By {siteName}</span>
    81             </div>
    82           </div>
    83         </CardContent>
    84       </Card>
    85 
    86       <div className="grid grid-cols-2 gap-3">
    87         <Button variant="outline" className="gap-2" onClick={downloadPNG}>
    88           <Download size={15} strokeWidth={2} /> Download PNG
    89         </Button>
    90         <Button className="gap-2" onClick={downloadPDF}>
    91           <Download size={15} strokeWidth={2} /> Download PDF
    92         </Button>
    93       </div>
    94 
    95       <p className="text-xs text-muted-foreground text-center mt-4">
    96         Menu URL: <a href={menuUrl} target="_blank" rel="noreferrer" className="text-primary underline break-all">{menuUrl}</a>
    97       </p>
    98     </div>
    99   );
   100 }
   101 


</observation>
<action>
**FileEditAction**
Path: [/workspace/app-cg8nvxlqtuyq/src/pages/owner/OrdersPage.tsx]
Thought: Good. Now apply glassmorphism redesigns to owner pages, fix OrdersPage with ding.mp3 Web Audio fallback, and update MenuManagementPage + QRPage — all in parallel:
Command: str_replace
Old String: ```
import { useState, useEffect, useRef, useCallback } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { ArrowLeft, CheckCircle, XCircle, Package, Clock } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { ownerStore, restaurantStore, orderStore, getOwnerPlan, planHas } from '@/store';
import { toast } from 'sonner';
import type { Order, OrderStatus } from '@/types';
```
New String: ```
import { useState, useEffect, useRef, useCallback } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { ArrowLeft, CheckCircle, XCircle, Package, Clock, Bell } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { ownerStore, restaurantStore, orderStore, getOwnerPlan, planHas } from '@/store';
import { toast } from 'sonner';
import type { Order, OrderStatus } from '@/types';

const statusColor: Record<OrderStatus, string> = {
  pending: 'bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 border-yellow-500/30',
  accepted: 'bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/30',
  rejected: 'bg-destructive/10 text-destructive border-destructive/30',
  completed: 'bg-primary/10 text-primary border-primary/30',
};

// Play ding — try /ding.mp3 first, fallback to Web Audio API tone
function playDing() {
  const audio = new Audio('/ding.mp3');
  audio.play().catch(() => {
    // Web Audio API fallback — pleasant 880Hz tone
    try {
      const ctx = new (window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)();
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.connect(gain);
      gain.connect(ctx.destination);
      osc.type = 'sine';
      osc.frequency.setValueAtTime(880, ctx.currentTime);
      gain.gain.setValueAtTime(0.4, ctx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.6);
      osc.start(ctx.currentTime);
      osc.stop(ctx.currentTime + 0.6);
    } catch {}
  });
}

export default function OrdersPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const owner = ownerStore.getCurrent();
  const restaurant = id ? restaurantStore.getById(id) : null;
  const plan = owner ? getOwnerPlan(owner) : 'free';
  const canFilter = planHas(plan, 'orderFilter');

  const [orders, setOrders] = useState<Order[]>([]);
  const [filter, setFilter] = useState<string>('all');
  const [rejectDialog, setRejectDialog] = useState<{ open: boolean; orderId: string }>({ open: false, orderId: '' });
  const [rejectReason, setRejectReason] = useState('');
  const prevCount = useRef(0);

  const refresh = useCallback(() => {
    if (!id) return;
    const fresh = orderStore.getByRestaurant(id).sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
    const newPending = fresh.filter((o) => o.status === 'pending').length;
    if (prevCount.current > 0 && newPending > prevCount.current) {
      toast.info('New order received!', { icon: <Bell size={16} strokeWidth={2} /> });
      playDing();
    }
    prevCount.current = newPending;
    setOrders(fresh);
  }, [id]);

  useEffect(() => {
    if (!owner || !restaurant) { navigate('/owner/dashboard'); return; }
    refresh();
    const interval = setInterval(refresh, 2000);
    return () => clearInterval(interval);
  }, [owner, restaurant, navigate, refresh]);

  const updateStatus = (orderId: string, status: OrderStatus, reason?: string) => {
    const order = orders.find((o) => o.id === orderId);
    if (!order) return;
    orderStore.save({ ...order, status, rejectionReason: reason, updatedAt: new Date().toISOString() });
    refresh();
    toast.success(`Order marked as ${status}`);
  };

  const handleReject = () => {
    if (!rejectReason.trim()) { toast.error('Please enter a rejection reason'); return; }
    updateStatus(rejectDialog.orderId, 'rejected', rejectReason);
    setRejectDialog({ open: false, orderId: '' });
    setRejectReason('');
  };

  const filtered = canFilter && filter !== 'all'
    ? orders.filter((o) => o.status === filter)
    : orders;

  if (!restaurant) return null;

  const pending = orders.filter((o) => o.status === 'pending').length;

  return (
    <div className="p-4 md:p-6 max-w-4xl mx-auto animate-fade-up">
      <Button variant="ghost" size="sm" className="gap-2 mb-3 -ml-2 rounded-xl" onClick={() => navigate(-1)}>
        <ArrowLeft size={14} strokeWidth={2} /> Back
      </Button>
      <div className="flex items-start justify-between mb-6 gap-3 flex-wrap">
        <div>
          <h1 className="text-2xl font-bold flex items-center gap-2">
            Orders
            {pending > 0 && (
              <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold animate-badge-bounce">
                {pending}
              </span>
            )}
          </h1>
          <p className="text-sm text-muted-foreground">{restaurant.name}</p>
        </div>
        {canFilter ? (
          <Select value={filter} onValueChange={setFilter}>
            <SelectTrigger className="w-36 rounded-xl"><SelectValue placeholder="Filter" /></SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Orders</SelectItem>
              <SelectItem value="pending">Pending</SelectItem>
              <SelectItem value="accepted">Accepted</SelectItem>
              <SelectItem value="rejected">Rejected</SelectItem>
              <SelectItem value="completed">Completed</SelectItem>
            </SelectContent>
          </Select>
        ) : (
          <span className="inline-flex items-center gap-1 rounded-xl border border-input bg-background px-3 py-1.5 text-sm font-medium opacity-50 cursor-not-allowed select-none">
            Filter (Basic+)
          </span>
        )}
      </div>

      {filtered.length === 0 ? (
        <div className="text-center py-16 border border-dashed rounded-2xl animate-fade-in">
          <Clock size={40} strokeWidth={1.5} className="mx-auto mb-3 text-muted-foreground opacity-40" />
          <p className="text-muted-foreground font-medium">No orders yet</p>
          <p className="text-sm text-muted-foreground mt-1">Orders appear here in real-time</p>
        </div>
      ) : (
        <div className="space-y-3">
          {filtered.map((order, i) => (
            <Card
              key={order.id}
              className={`rounded-2xl border-border/60 hover:shadow-md transition-all duration-200 animate-fade-up stagger-${Math.min(i + 1, 9)} ${order.status === 'pending' ? 'ring-1 ring-yellow-500/30' : ''}`}
            >
              <CardContent className="p-4">
                <div className="flex items-start justify-between gap-3 mb-3">
                  <div className="min-w-0">
                    <div className="flex items-center gap-2 flex-wrap">
                      <p className="font-semibold text-sm font-mono">#{order.id.slice(0, 8).toUpperCase()}</p>
                      <Badge variant="outline" className={`text-xs border capitalize rounded-full ${statusColor[order.status]}`}>
                        {order.status}
                      </Badge>
                    </div>
                    <p className="text-sm mt-0.5 font-medium">{order.customerName}</p>
                    <p className="text-xs text-muted-foreground">{order.customerPhone} · {new Date(order.createdAt).toLocaleString()}</p>
                  </div>
                  <p className="font-bold text-primary shrink-0 text-lg">₹{order.total.toFixed(0)}</p>
                </div>

                <div className="bg-muted/50 rounded-xl p-3 mb-3 text-sm space-y-1.5">
                  {order.items.map((item) => (
                    <div key={item.menuItemId} className="flex justify-between text-sm">
                      <span>{item.name} <span className="text-muted-foreground text-xs">x{item.quantity}</span></span>
                      <span className="font-medium">₹{(item.price * item.quantity).toFixed(0)}</span>
                    </div>
                  ))}
                </div>

                <p className="text-xs text-muted-foreground mb-3">
                  Payment: <span className="font-medium text-foreground">{order.paymentMethod === 'cash' ? 'Cash on Delivery' : 'Online'}</span>
                </p>

                {order.status === 'pending' && (
                  <div className="flex gap-2">
                    <Button size="sm" className="gap-1.5 flex-1 h-9 rounded-xl press-active" onClick={() => updateStatus(order.id, 'accepted')}>
                      <CheckCircle size={13} strokeWidth={2} /> Accept
                    </Button>
                    <Button size="sm" variant="destructive" className="gap-1.5 flex-1 h-9 rounded-xl press-active" onClick={() => { setRejectDialog({ open: true, orderId: order.id }); setRejectReason(''); }}>
                      <XCircle size={13} strokeWidth={2} /> Reject
                    </Button>
                  </div>
                )}
                {order.status === 'accepted' && (
                  <Button size="sm" className="gap-1.5 h-9 w-full rounded-xl press-active" onClick={() => updateStatus(order.id, 'completed')}>
                    <Package size={13} strokeWidth={2} /> Mark as Completed
                  </Button>
                )}
                {order.status === 'rejected' && order.rejectionReason && (
                  <p className="text-xs text-destructive bg-destructive/10 rounded-xl px-3 py-2">Reason: {order.rejectionReason}</p>
                )}
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      <Dialog open={rejectDialog.open} onOpenChange={(o) => setRejectDialog((p) => ({ ...p, open: o }))}>
        <DialogContent className="max-w-[calc(100%-2rem)] md:max-w-md rounded-3xl">
          <DialogHeader><DialogTitle>Reject Order</DialogTitle></DialogHeader>
          <div className="space-y-3">
            <p className="text-sm text-muted-foreground">The customer will see this reason.</p>
            <Textarea
              placeholder="e.g. Item unavailable, kitchen closed..."
              value={rejectReason}
              onChange={(e) => setRejectReason(e.target.value)}
              rows={3}
              className="rounded-xl"
            />
            <div className="flex gap-2">
              <Button variant="outline" className="flex-1 rounded-xl" onClick={() => setRejectDialog({ open: false, orderId: '' })}>Cancel</Button>
              <Button variant="destructive" className="flex-1 rounded-xl press-active" onClick={handleReject}>Reject Order</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}
```

</action>
<observation>
The file /workspace/app-cg8nvxlqtuyq/src/pages/owner/OrdersPage.tsx has been edited.

</observation>
<action>
**FileEditAction**
Path: [/workspace/app-cg8nvxlqtuyq/src/pages/owner/MenuManagementPage.tsx]
Thought: 
Command: str_replace
Old String: ```
    <div className="p-4 md:p-6 max-w-4xl mx-auto">
      <Button variant="ghost" size="sm" className="gap-2 mb-2 -ml-2" onClick={() => navigate(-1)}>
        <ArrowLeft size={14} strokeWidth={2} /> Back
      </Button>
      <div className="flex items-start justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold">Menu</h1>
          <p className="text-sm text-muted-foreground">{restaurant.name} · {items.length} items</p>
        </div>
        <div className="flex gap-2">
          {hasCategories ? (
            <Button variant="outline" size="sm" className="gap-1" onClick={() => { setEditCat(null); setCatName(''); setShowCatDialog(true); }}>
              <Plus size={14} strokeWidth={2} /> Category
            </Button>
          ) : (
            <span className="inline-flex items-center gap-1 rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium opacity-50 cursor-not-allowed select-none" title="Basic plan required">
              <Lock size={12} strokeWidth={2} /> Category
            </span>
          )}
          <Button size="sm" className="gap-1" onClick={openAddItem} disabled={!canAddMore}>
            <Plus size={14} strokeWidth={2} /> Add Item
          </Button>
        </div>
      </div>

      {!canAddMore && (
        <div className="mb-4 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded text-sm text-yellow-700 dark:text-yellow-400">
          Free plan limit: {maxMenuItems('free')} items reached. <button className="underline" onClick={() => navigate('/owner/profile')}>Upgrade</button> for unlimited items.
        </div>
      )}

      {/* Categories list */}
      {categories.length > 0 && (
        <div className="mb-6 flex flex-wrap gap-2">
          {categories.map((cat) => (
            <div key={cat.id} className="flex items-center gap-1 border border-border rounded px-2 py-1 bg-card text-sm">
              {cat.name}
              <button onClick={() => { setEditCat(cat); setCatName(cat.name); setShowCatDialog(true); }} className="ml-1 text-muted-foreground hover:text-foreground">
                <Pencil size={11} strokeWidth={2} />
              </button>
              <AlertDialog>
                <AlertDialogTrigger asChild>
                  <button className="text-muted-foreground hover:text-destructive"><X size={11} strokeWidth={2} /></button>
                </AlertDialogTrigger>
                <AlertDialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg">
                  <AlertDialogHeader>
                    <AlertDialogTitle>Delete Category?</AlertDialogTitle>
                    <AlertDialogDescription>Items in this category will become uncategorized.</AlertDialogDescription>
                  </AlertDialogHeader>
                  <AlertDialogFooter>
                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                    <AlertDialogAction onClick={() => deleteCat(cat)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Delete</AlertDialogAction>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>
            </div>
          ))}
        </div>
      )}

      {items.length === 0 ? (
        <div className="text-center py-16 border border-dashed rounded">
          <p className="text-muted-foreground">No menu items yet.</p>
          <Button className="mt-4" onClick={openAddItem}>Add First Item</Button>
        </div>
      ) : (
        groups.map(({ label, items: groupItems }) => (
          <div key={label} className="mb-6">
            {label && <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-3">{label}</h3>}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {groupItems.map((item) => (
                <Card key={item.id}>
                  <CardContent className="p-3 flex gap-3">
                    <div className="w-16 h-16 rounded overflow-hidden bg-muted flex items-center justify-center shrink-0">
                      {item.image
                        ? <img src={item.image} alt={item.name} className="w-full h-full object-cover" />
                        : <span className="font-bold text-muted-foreground">{item.name[0]}</span>}
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="font-medium text-sm truncate">{item.name}</p>
                      {item.description && <p className="text-xs text-muted-foreground line-clamp-1">{item.description}</p>}
                      <p className="text-primary font-bold text-sm mt-0.5">₹{item.price}</p>
                    </div>
                    <div className="flex flex-col gap-1 shrink-0">
                      <Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => openEditItem(item)}>
                        <Pencil size={13} strokeWidth={2} />
                      </Button>
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button size="icon" variant="ghost" className="h-7 w-7 text-destructive hover:text-destructive"><Trash2 size={13} strokeWidth={2} /></Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg">
                          <AlertDialogHeader><AlertDialogTitle>Delete item?</AlertDialogTitle><AlertDialogDescription>This cannot be undone.</AlertDialogDescription></AlertDialogHeader>
                          <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => deleteItem(item)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Delete</AlertDialogAction></AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        ))
      )}

      {/* Item dialog */}
      <Dialog open={showItemDialog} onOpenChange={setShowItemDialog}>
        <DialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg">
          <DialogHeader><DialogTitle>{editItem ? 'Edit Item' : 'Add Menu Item'}</DialogTitle></DialogHeader>
          <div className="space-y-3">
            <div className="flex items-center gap-4">
              <div className="w-20 h-20 rounded border border-border bg-muted flex items-center justify-center overflow-hidden shrink-0">
                {itemImage
                  ? <img src={itemImage} alt="preview" className="w-full h-full object-cover" />
                  : <Upload size={20} strokeWidth={1.5} className="text-muted-foreground" />}
              </div>
              <div>
                <Button variant="outline" size="sm" onClick={() => fileRef.current?.click()}>
                  {itemImage ? 'Change Image' : 'Upload Image'}
                </Button>
                <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={handleImageUpload} />
              </div>
            </div>
            <div>
              <Label>Name *</Label>
              <Input placeholder="Item name" value={itemName} onChange={(e) => setItemName(e.target.value)} className="mt-1" />
            </div>
            <div>
              <Label>Price (₹) *</Label>
              <Input type="number" placeholder="0" value={itemPrice} onChange={(e) => setItemPrice(e.target.value)} className="mt-1" min="0" step="0.5" />
            </div>
            <div>
              <Label>Description</Label>
              <Input placeholder="Short description (optional)" value={itemDesc} onChange={(e) => setItemDesc(e.target.value)} className="mt-1" />
            </div>
            {categories.length > 0 && (
              <div>
                <Label>Category</Label>
                <Select value={itemCategory} onValueChange={setItemCategory}>
                  <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="none">No Category</SelectItem>
                    {categories.map((c) => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}
                  </SelectContent>
                </Select>
              </div>
            )}
            <div className="flex gap-2 pt-1">
              <Button variant="outline" className="flex-1" onClick={() => setShowItemDialog(false)}>Cancel</Button>
              <Button className="flex-1" onClick={saveItem}>Save</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {/* Category dialog */}
      <Dialog open={showCatDialog} onOpenChange={setShowCatDialog}>
        <DialogContent className="max-w-[calc(100%-2rem)] md:max-w-sm">
          <DialogHeader><DialogTitle>{editCat ? 'Edit Category' : 'Add Category'}</DialogTitle></DialogHeader>
          <div className="space-y-3">
            <Input placeholder="Category name" value={catName} onChange={(e) => setCatName(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && saveCat()} />
            <div className="flex gap-2">
              <Button variant="outline" className="flex-1" onClick={() => setShowCatDialog(false)}>Cancel</Button>
              <Button className="flex-1" onClick={saveCat}>Save</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
```
New String: ```
    <div className="p-4 md:p-6 max-w-4xl mx-auto animate-fade-up">
      <Button variant="ghost" size="sm" className="gap-2 mb-3 -ml-2 rounded-xl" onClick={() => navigate(-1)}>
        <ArrowLeft size={14} strokeWidth={2} /> Back
      </Button>
      <div className="flex items-start justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold">Menu</h1>
          <p className="text-sm text-muted-foreground">{restaurant.name} · {items.length} items</p>
        </div>
        <div className="flex gap-2">
          {hasCategories ? (
            <Button variant="outline" size="sm" className="gap-1 rounded-xl" onClick={() => { setEditCat(null); setCatName(''); setShowCatDialog(true); }}>
              <Plus size={14} strokeWidth={2} /> Category
            </Button>
          ) : (
            <span className="inline-flex items-center gap-1 rounded-xl border border-input bg-background px-3 py-1.5 text-sm font-medium opacity-50 cursor-not-allowed select-none" title="Basic plan required">
              <Lock size={12} strokeWidth={2} /> Category
            </span>
          )}
          <Button size="sm" className="gap-1 rounded-xl press-active" onClick={openAddItem} disabled={!canAddMore}>
            <Plus size={14} strokeWidth={2} /> Add Item
          </Button>
        </div>
      </div>

      {!canAddMore && (
        <div className="mb-4 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-xl text-sm text-yellow-700 dark:text-yellow-400">
          Free plan limit: {maxMenuItems('free')} items reached.{' '}
          <button className="underline font-medium" onClick={() => navigate('/owner/profile')}>Upgrade</button> for unlimited items.
        </div>
      )}

      {categories.length > 0 && (
        <div className="mb-6 flex flex-wrap gap-2">
          {categories.map((cat) => (
            <div key={cat.id} className="flex items-center gap-1 border border-border rounded-full px-3 py-1.5 bg-card text-sm">
              {cat.name}
              <button onClick={() => { setEditCat(cat); setCatName(cat.name); setShowCatDialog(true); }} className="ml-1 text-muted-foreground hover:text-foreground transition-colors">
                <Pencil size={11} strokeWidth={2} />
              </button>
              <AlertDialog>
                <AlertDialogTrigger asChild>
                  <button className="text-muted-foreground hover:text-destructive transition-colors"><X size={11} strokeWidth={2} /></button>
                </AlertDialogTrigger>
                <AlertDialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg rounded-3xl">
                  <AlertDialogHeader>
                    <AlertDialogTitle>Delete Category?</AlertDialogTitle>
                    <AlertDialogDescription>Items will become uncategorized.</AlertDialogDescription>
                  </AlertDialogHeader>
                  <AlertDialogFooter>
                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                    <AlertDialogAction onClick={() => deleteCat(cat)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Delete</AlertDialogAction>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>
            </div>
          ))}
        </div>
      )}

      {items.length === 0 ? (
        <div className="text-center py-16 border border-dashed rounded-2xl animate-fade-in">
          <p className="text-muted-foreground font-medium">No menu items yet</p>
          <Button className="mt-4 rounded-xl press-active" onClick={openAddItem}>Add First Item</Button>
        </div>
      ) : (
        groups.map(({ label, items: groupItems }) => (
          <div key={label} className="mb-6">
            {label && <h3 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-3 px-1">{label}</h3>}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {groupItems.map((item, i) => (
                <Card key={item.id} className={`rounded-2xl border-border/60 hover:shadow-md transition-all duration-200 animate-fade-up stagger-${Math.min(i + 1, 9)}`}>
                  <CardContent className="p-3 flex gap-3">
                    <div className="w-16 h-16 rounded-xl overflow-hidden bg-muted flex items-center justify-center shrink-0">
                      {item.image
                        ? <img src={item.image} alt={item.name} className="w-full h-full object-cover" />
                        : <span className="font-bold text-muted-foreground">{item.name[0]}</span>}
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="font-medium text-sm truncate">{item.name}</p>
                      {item.description && <p className="text-xs text-muted-foreground line-clamp-1">{item.description}</p>}
                      <p className="text-primary font-bold text-sm mt-0.5">₹{item.price}</p>
                    </div>
                    <div className="flex flex-col gap-1 shrink-0">
                      <Button size="icon" variant="ghost" className="h-7 w-7 rounded-lg" onClick={() => openEditItem(item)}>
                        <Pencil size={13} strokeWidth={2} />
                      </Button>
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button size="icon" variant="ghost" className="h-7 w-7 rounded-lg text-destructive hover:text-destructive"><Trash2 size={13} strokeWidth={2} /></Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg rounded-3xl">
                          <AlertDialogHeader><AlertDialogTitle>Delete item?</AlertDialogTitle><AlertDialogDescription>This cannot be undone.</AlertDialogDescription></AlertDialogHeader>
                          <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => deleteItem(item)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Delete</AlertDialogAction></AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        ))
      )}

      <Dialog open={showItemDialog} onOpenChange={setShowItemDialog}>
        <DialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg rounded-3xl">
          <DialogHeader><DialogTitle>{editItem ? 'Edit Item' : 'Add Menu Item'}</DialogTitle></DialogHeader>
          <div className="space-y-3">
            <div className="flex items-center gap-4">
              <div className="w-20 h-20 rounded-2xl border border-border bg-muted flex items-center justify-center overflow-hidden shrink-0">
                {itemImage
                  ? <img src={itemImage} alt="preview" className="w-full h-full object-cover" />
                  : <Upload size={20} strokeWidth={1.5} className="text-muted-foreground" />}
              </div>
              <Button variant="outline" size="sm" className="rounded-xl" onClick={() => fileRef.current?.click()}>
                {itemImage ? 'Change Image' : 'Upload Image'}
              </Button>
              <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={handleImageUpload} />
            </div>
            <div>
              <Label className="text-sm font-normal text-muted-foreground">Name *</Label>
              <Input placeholder="Item name" value={itemName} onChange={(e) => setItemName(e.target.value)} className="mt-1 rounded-xl" />
            </div>
            <div>
              <Label className="text-sm font-normal text-muted-foreground">Price (₹) *</Label>
              <Input type="number" placeholder="0" value={itemPrice} onChange={(e) => setItemPrice(e.target.value)} className="mt-1 rounded-xl" min="0" step="0.5" />
            </div>
            <div>
              <Label className="text-sm font-normal text-muted-foreground">Description</Label>
              <Input placeholder="Short description (optional)" value={itemDesc} onChange={(e) => setItemDesc(e.target.value)} className="mt-1 rounded-xl" />
            </div>
            {categories.length > 0 && (
              <div>
                <Label className="text-sm font-normal text-muted-foreground">Category</Label>
                <Select value={itemCategory} onValueChange={setItemCategory}>
                  <SelectTrigger className="mt-1 rounded-xl"><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="none">No Category</SelectItem>
                    {categories.map((c) => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}
                  </SelectContent>
                </Select>
              </div>
            )}
            <div className="flex gap-2 pt-1">
              <Button variant="outline" className="flex-1 rounded-xl" onClick={() => setShowItemDialog(false)}>Cancel</Button>
              <Button className="flex-1 rounded-xl press-active" onClick={saveItem}>Save</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      <Dialog open={showCatDialog} onOpenChange={setShowCatDialog}>
        <DialogContent className="max-w-[calc(100%-2rem)] md:max-w-sm rounded-3xl">
          <DialogHeader><DialogTitle>{editCat ? 'Edit Category' : 'Add Category'}</DialogTitle></DialogHeader>
          <div className="space-y-3">
            <Input placeholder="Category name" value={catName} onChange={(e) => setCatName(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && saveCat()} className="rounded-xl" />
            <div className="flex gap-2">
              <Button variant="outline" className="flex-1 rounded-xl" onClick={() => setShowCatDialog(false)}>Cancel</Button>
              <Button className="flex-1 rounded-xl press-active" onClick={saveCat}>Save</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
```

</action>
<observation>
The file /workspace/app-cg8nvxlqtuyq/src/pages/owner/MenuManagementPage.tsx has been edited.

</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerRestaurantsPage.tsx', start=0, end=-1, thought='Now read the remaining owner pages and admin pages, and update CSS animations + store to ensure random 16-char slug generation:', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerRestaurantsPage.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerRestaurantsPage.tsx:
     1 import { useNavigate } from 'react-router-dom';
     2 import { Plus, QrCode, ClipboardList, UtensilsCrossed, Pencil } from 'lucide-react';
     3 import { Button } from '@/components/ui/button';
     4 import { Card, CardContent } from '@/components/ui/card';
     5 import { Badge } from '@/components/ui/badge';
     6 import { ownerStore, restaurantStore, menuStore, orderStore, getOwnerPlan, maxRestaurants } from '@/store';
     7 import { useEffect, useState } from 'react';
     8 import type { Restaurant } from '@/types';
     9 
    10 export default function OwnerRestaurantsPage() {
    11   const navigate = useNavigate();
    12   const owner = ownerStore.getCurrent();
    13   const [restaurants, setRestaurants] = useState<Restaurant[]>([]);
    14 
    15   useEffect(() => {
    16     if (!owner) { navigate('/owner/login'); return; }
    17     setRestaurants(restaurantStore.getByOwner(owner.id));
    18   }, [owner, navigate]);
    19 
    20   if (!owner) return null;
    21   const plan = getOwnerPlan(owner);
    22   const canCreate = restaurants.length < maxRestaurants(plan);
    23 
    24   return (
    25     <div className="p-4 md:p-6 max-w-4xl mx-auto">
    26       <div className="flex items-center justify-between mb-6">
    27         <div>
    28           <h1 className="text-2xl font-bold">My Restaurants</h1>
    29           <p className="text-sm text-muted-foreground mt-0.5">
    30             {restaurants.length} / {maxRestaurants(plan) === Infinity ? '∞' : maxRestaurants(plan)} used
    31           </p>
    32         </div>
    33         <Button
    34           className="gap-2"
    35           onClick={() => canCreate ? navigate('/owner/restaurants/create') : null}
    36           disabled={!canCreate}
    37           title={!canCreate ? `Upgrade your plan to add more restaurants` : ''}
    38         >
    39           <Plus size={16} strokeWidth={2} /> New Restaurant
    40         </Button>
    41       </div>
    42 
    43       {!canCreate && (
    44         <div className="mb-4 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded text-sm text-yellow-700 dark:text-yellow-400">
    45           You've reached the limit for your {plan} plan. <button className="underline font-medium" onClick={() => navigate('/owner/profile')}>Upgrade</button> to add more restaurants.
    46         </div>
    47       )}
    48 
    49       {restaurants.length === 0 ? (
    50         <div className="text-center py-20 border border-dashed rounded">
    51           <UtensilsCrossed size={40} strokeWidth={1.5} className="mx-auto mb-3 text-muted-foreground opacity-40" />
    52           <p className="font-medium">No restaurants yet</p>
    53           <Button className="mt-4" onClick={() => navigate('/owner/restaurants/create')}>Create your first restaurant</Button>
    54         </div>
    55       ) : (
    56         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
    57           {restaurants.map((r) => {
    58             const items = menuStore.getByRestaurant(r.id);
    59             const orders = orderStore.getByRestaurant(r.id);
    60             const pending = orders.filter((o) => o.status === 'pending').length;
    61             return (
    62               <Card key={r.id} className="h-full">
    63                 <CardContent className="p-4">
    64                   <div className="flex gap-3 mb-4">
    65                     <div className="w-14 h-14 rounded overflow-hidden bg-muted flex items-center justify-center shrink-0">
    66                       {r.logo
    67                         ? <img src={r.logo} alt={r.name} className="w-full h-full object-cover" />
    68                         : <span className="font-bold text-lg text-muted-foreground">{r.name[0]}</span>}
    69                     </div>
    70                     <div className="flex-1 min-w-0">
    71                       <div className="flex items-start gap-2">
    72                         <p className="font-semibold flex-1 truncate">{r.name}</p>
    73                         {r.suspended && <Badge variant="destructive" className="text-xs shrink-0">Suspended</Badge>}
    74                         {pending > 0 && <Badge className="text-xs shrink-0 bg-yellow-500 text-white">{pending} new</Badge>}
    75                       </div>
    76                       <p className="text-xs text-muted-foreground">{r.location}</p>
    77                       <p className="text-xs text-muted-foreground">{items.length} items · {orders.length} orders</p>
    78                     </div>
    79                   </div>
    80                   <div className="flex flex-wrap gap-2">
    81                     <Button size="sm" className="h-8 gap-1.5" onClick={() => navigate(`/owner/restaurants/${r.id}/orders`)}>
    82                       <ClipboardList size={13} strokeWidth={2} /> Orders
    83                     </Button>
    84                     <Button size="sm" variant="outline" className="h-8 gap-1.5" onClick={() => navigate(`/owner/restaurants/${r.id}/menu`)}>
    85                       <UtensilsCrossed size={13} strokeWidth={2} /> Menu
    86                     </Button>
    87                     <Button size="sm" variant="outline" className="h-8 gap-1.5" onClick={() => navigate(`/owner/restaurants/${r.id}/qr`)}>
    88                       <QrCode size={13} strokeWidth={2} /> QR
    89                     </Button>
    90                     <Button size="sm" variant="outline" className="h-8 gap-1.5" onClick={() => navigate(`/owner/restaurants/${r.id}/edit`)}>
    91                       <Pencil size={13} strokeWidth={2} /> Edit
    92                     </Button>
    93                   </div>
    94                 </CardContent>
    95               </Card>
    96             );
    97           })}
    98         </div>
    99       )}
   100     </div>
   101   );
   102 }
   103 


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerProfilePage.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerProfilePage.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerProfilePage.tsx:
     1 import { useState } from 'react';
     2 import { useNavigate } from 'react-router-dom';
     3 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
     4 import { Button } from '@/components/ui/button';
     5 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
     6 import { Input } from '@/components/ui/input';
     7 import { Label } from '@/components/ui/label';
     8 import { Badge } from '@/components/ui/badge';
     9 import { ownerStore, restaurantStore, settingsStore, getOwnerPlan } from '@/store';
    10 import { toast } from 'sonner';
    11 
    12 const plans = [
    13   { key: 'free', label: 'Free', price: '₹0', features: ['1 Restaurant', '20 Menu Items', 'QR Code', 'Ordering', 'Earnings', 'Reviews', 'PDF Bills'] },
    14   { key: 'basic', label: 'Basic', price: '₹29/mo', features: ['5 Restaurants', 'Unlimited Items', 'Analytics', 'Order Filters', 'Categories'] },
    15   { key: 'premium', label: 'Premium', price: '₹49/mo', features: ['Unlimited Restaurants', 'Unlimited Items', 'Lifetime Analytics', 'Custom Theme'] },
    16 ];
    17 
    18 export default function OwnerProfilePage() {
    19   const navigate = useNavigate();
    20   const owner = ownerStore.getCurrent();
    21   const [name, setName] = useState(owner?.name || '');
    22   const [phone, setPhone] = useState(owner?.phone || '');
    23   const [saving, setSaving] = useState(false);
    24   const settings = settingsStore.get();
    25 
    26   if (!owner) { navigate('/owner/login'); return null; }
    27   const plan = getOwnerPlan(owner);
    28 
    29   const handleSave = () => {
    30     if (!name.trim()) { toast.error('Name is required'); return; }
    31     setSaving(true);
    32     setTimeout(() => {
    33       const updated = { ...owner, name: name.trim(), phone: phone.trim() };
    34       ownerStore.save(updated);
    35       ownerStore.setCurrent(updated);
    36       toast.success('Profile updated');
    37       setSaving(false);
    38     }, 400);
    39   };
    40 
    41   const handleDelete = () => {
    42     restaurantStore.getByOwner(owner.id).forEach((r) => restaurantStore.delete(r.id));
    43     ownerStore.delete(owner.id);
    44     ownerStore.setCurrent(null);
    45     toast.success('Account deleted');
    46     navigate('/');
    47   };
    48 
    49   const handleUpgradePlan = (planName: string) => {
    50     const phone = settings.supportPhone || '9876543210';
    51     window.open(`https://wa.me/91${phone}?text=${encodeURIComponent(`I would like to purchase ${planName} plan`)}`, '_blank');
    52   };
    53 
    54   return (
    55     <div className="p-4 md:p-6 max-w-2xl mx-auto">
    56       <h1 className="text-2xl font-bold mb-6">Profile</h1>
    57 
    58       {/* Profile card */}
    59       <Card className="mb-6">
    60         <CardHeader><CardTitle className="text-base">Your Details</CardTitle></CardHeader>
    61         <CardContent className="space-y-4">
    62           <div>
    63             <Label>Email</Label>
    64             <p className="text-sm text-muted-foreground mt-1">{owner.email}</p>
    65           </div>
    66           <div>
    67             <Label htmlFor="pname">Display Name</Label>
    68             <Input id="pname" value={name} onChange={(e) => setName(e.target.value)} className="mt-1" />
    69           </div>
    70           <div>
    71             <Label htmlFor="pphone">Phone</Label>
    72             <Input id="pphone" value={phone} onChange={(e) => setPhone(e.target.value)} className="mt-1" maxLength={10} />
    73           </div>
    74           <Button onClick={handleSave} disabled={saving}>{saving ? 'Saving...' : 'Save Changes'}</Button>
    75         </CardContent>
    76       </Card>
    77 
    78       {/* Plan */}
    79       <Card className="mb-6">
    80         <CardHeader>
    81           <CardTitle className="text-base flex items-center gap-2">
    82             Current Plan
    83             <Badge variant={plan === 'free' ? 'secondary' : 'default'} className="capitalize">{plan}</Badge>
    84             {owner.planExpiresAt && plan !== 'free' && (
    85               <span className="text-xs text-muted-foreground font-normal">Expires {new Date(owner.planExpiresAt).toLocaleDateString()}</span>
    86             )}
    87           </CardTitle>
    88         </CardHeader>
    89         <CardContent>
    90           <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
    91             {plans.map((p) => (
    92               <div key={p.key} className={`p-3 rounded border text-sm ${plan === p.key ? 'border-primary bg-primary/5' : 'border-border'}`}>
    93                 <div className="flex justify-between items-center mb-2">
    94                   <p className="font-semibold">{p.label}</p>
    95                   <span className="text-xs text-muted-foreground">{p.price}</span>
    96                 </div>
    97                 {p.key !== 'free' && plan !== p.key && (
    98                   <Button size="sm" className="w-full mb-2 h-7 text-xs" onClick={() => handleUpgradePlan(p.label)}>
    99                     Upgrade
   100                   </Button>
   101                 )}
   102                 {plan === p.key && <p className="text-xs text-primary font-medium mb-2">Current</p>}
   103                 <ul className="space-y-0.5 text-xs text-muted-foreground">
   104                   {p.features.map((f) => <li key={f}>• {f}</li>)}
   105                 </ul>
   106               </div>
   107             ))}
   108           </div>
   109         </CardContent>
   110       </Card>
   111 
   112       {/* Danger zone */}
   113       <Card className="border-destructive/30">
   114         <CardHeader><CardTitle className="text-base text-destructive">Danger Zone</CardTitle></CardHeader>
   115         <CardContent>
   116           <p className="text-sm text-muted-foreground mb-4">Deleting your account will remove all your restaurants, menus, and data permanently.</p>
   117           <AlertDialog>
   118             <AlertDialogTrigger asChild>
   119               <Button variant="destructive">Delete Account</Button>
   120             </AlertDialogTrigger>
   121             <AlertDialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg">
   122               <AlertDialogHeader>
   123                 <AlertDialogTitle>Delete Account?</AlertDialogTitle>
   124                 <AlertDialogDescription>This will permanently delete your account and all restaurants. This cannot be undone.</AlertDialogDescription>
   125               </AlertDialogHeader>
   126               <AlertDialogFooter>
   127                 <AlertDialogCancel>Cancel</AlertDialogCancel>
   128                 <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Delete My Account</AlertDialogAction>
   129               </AlertDialogFooter>
   130             </AlertDialogContent>
   131           </AlertDialog>
   132         </CardContent>
   133       </Card>
   134     </div>
   135   );
   136 }
   137 


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/store/index.ts', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=[1, 80], user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/store/index.ts is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/store/index.ts:
     1 import type { Owner, Restaurant, Category, MenuItem, Order, Review, SiteSettings } from '@/types';
     2 
     3 const KEYS = {
     4   OWNERS: 'sqrm_owners',
     5   CURRENT_OWNER: 'sqrm_current_owner',
     6   RESTAURANTS: 'sqrm_restaurants',
     7   MENU_ITEMS: 'sqrm_menu_items',
     8   CATEGORIES: 'sqrm_categories',
     9   ORDERS: 'sqrm_orders',
    10   REVIEWS: 'sqrm_reviews',
    11   ADMIN_SESSION: 'sqrm_admin_session',
    12   SETTINGS: 'sqrm_settings',
    13   THEME: 'sqrm_theme',
    14   CART: 'sqrm_cart',
    15 };
    16 
    17 function get<T>(key: string, fallback: T): T {
    18   try {
    19     const raw = localStorage.getItem(key);
    20     return raw ? (JSON.parse(raw) as T) : fallback;
    21   } catch {
    22     return fallback;
    23   }
    24 }
    25 
    26 function set<T>(key: string, value: T): void {
    27   localStorage.setItem(key, JSON.stringify(value));
    28 }
    29 
    30 // ─── Default settings ───────────────────────────────────────────────────────
    31 export const DEFAULT_SETTINGS: SiteSettings = {
    32   siteName: 'Saksham Digi QR Menu',
    33   supportPhone: '9876543210',
    34   supportEmail: 'support@sqrm.in',
    35   logo: '',
    36   maintenanceMode: false,
    37 };
    38 
    39 export const LOGO_URL =
    40   'https://miaoda-conversation-file.s3cdn.medo.dev/user-bctx96g1udc0/app-cg8nvxlqtuyq/20260620/logo.png';
    41 
    42 // ─── Init ────────────────────────────────────────────────────────────────────
    43 export function initStore() {
    44   if (!localStorage.getItem(KEYS.SETTINGS)) {
    45     set(KEYS.SETTINGS, DEFAULT_SETTINGS);
    46   }
    47   // Always enforce correct admin credentials (overwrite any old values)
    48   localStorage.setItem(
    49     'sqrm_admin_credentials',
    50     JSON.stringify({ email: 'sqrmadmin@srpdigitalstudios.qzz.io', password: 'sqrm15112010@' })
    51   );
    52 }
    53 
    54 // ─── Settings ────────────────────────────────────────────────────────────────
    55 export const settingsStore = {
    56   get: (): SiteSettings => get<SiteSettings>(KEYS.SETTINGS, DEFAULT_SETTINGS),
    57   set: (s: SiteSettings) => set(KEYS.SETTINGS, s),
    58 };
    59 
    60 // ─── Admin ───────────────────────────────────────────────────────────────────
    61 const ADMIN_EMAIL = 'sqrmadmin@srpdigitalstudios.qzz.io';
    62 const ADMIN_PASS  = 'sqrm15112010@';
    63 
    64 export const adminStore = {
    65   /** Exact-match validation only — no bypass possible */
    66   validate: (email: string, password: string): boolean =>
    67     email === ADMIN_EMAIL && password === ADMIN_PASS,
    68   getSession: (): boolean => get<boolean>(KEYS.ADMIN_SESSION, false),
    69   setSession: (v: boolean) => set(KEYS.ADMIN_SESSION, v),
    70 };
    71 
    72 // ─── Owners ──────────────────────────────────────────────────────────────────
    73 export const ownerStore = {
    74   getAll: (): Owner[] => get<Owner[]>(KEYS.OWNERS, []),
    75   getById: (id: string) => ownerStore.getAll().find((o) => o.id === id),
    76   getByEmail: (email: string) => ownerStore.getAll().find((o) => o.email.toLowerCase() === email.toLowerCase()),
    77   save: (owner: Owner) => {
    78     const all = ownerStore.getAll().filter((o) => o.id !== owner.id);
    79     set(KEYS.OWNERS, [...all, owner]);
    80   },


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/store/index.ts', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=[80, 180], user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/store/index.ts is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/store/index.ts:
    80   },
    81   delete: (id: string) => set(KEYS.OWNERS, ownerStore.getAll().filter((o) => o.id !== id)),
    82   getCurrent: (): Owner | null => get<Owner | null>(KEYS.CURRENT_OWNER, null),
    83   setCurrent: (o: Owner | null) => set(KEYS.CURRENT_OWNER, o),
    84 };
    85 
    86 // ─── Restaurants ──────────────────────────────────────────────────────────────
    87 export const restaurantStore = {
    88   getAll: (): Restaurant[] => get<Restaurant[]>(KEYS.RESTAURANTS, []),
    89   getById: (id: string) => restaurantStore.getAll().find((r) => r.id === id),
    90   getBySlug: (slug: string) => restaurantStore.getAll().find((r) => r.slug === slug),
    91   getByOwner: (ownerId: string) => restaurantStore.getAll().filter((r) => r.ownerId === ownerId),
    92   save: (r: Restaurant) => {
    93     const all = restaurantStore.getAll().filter((x) => x.id !== r.id);
    94     set(KEYS.RESTAURANTS, [...all, r]);
    95   },
    96   delete: (id: string) => {
    97     set(KEYS.RESTAURANTS, restaurantStore.getAll().filter((r) => r.id !== id));
    98     // cascade: delete items, categories, orders, reviews
    99     set(KEYS.MENU_ITEMS, menuStore.getAll().filter((m) => m.restaurantId !== id));
   100     set(KEYS.CATEGORIES, categoryStore.getAll().filter((c) => c.restaurantId !== id));
   101   },
   102   /** Generate a random 16-char alphanumeric slug */
   103   generateSlug: (): string => {
   104     const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
   105     let slug = '';
   106     for (let i = 0; i < 16; i++) slug += chars[Math.floor(Math.random() * chars.length)];
   107     const existing = restaurantStore.getAll().map((r) => r.slug);
   108     // Extremely unlikely collision but handle anyway
   109     return existing.includes(slug) ? restaurantStore.generateSlug() : slug;
   110   },
   111 };
   112 
   113 // ─── Categories ───────────────────────────────────────────────────────────────
   114 export const categoryStore = {
   115   getAll: (): Category[] => get<Category[]>(KEYS.CATEGORIES, []),
   116   getByRestaurant: (restaurantId: string) => categoryStore.getAll().filter((c) => c.restaurantId === restaurantId),
   117   save: (c: Category) => {
   118     const all = categoryStore.getAll().filter((x) => x.id !== c.id);
   119     set(KEYS.CATEGORIES, [...all, c]);
   120   },
   121   delete: (id: string) => set(KEYS.CATEGORIES, categoryStore.getAll().filter((c) => c.id !== id)),
   122 };
   123 
   124 // ─── Menu Items ───────────────────────────────────────────────────────────────
   125 export const menuStore = {
   126   getAll: (): MenuItem[] => get<MenuItem[]>(KEYS.MENU_ITEMS, []),
   127   getByRestaurant: (restaurantId: string) => menuStore.getAll().filter((m) => m.restaurantId === restaurantId),
   128   save: (m: MenuItem) => {
   129     const all = menuStore.getAll().filter((x) => x.id !== m.id);
   130     set(KEYS.MENU_ITEMS, [...all, m]);
   131   },
   132   delete: (id: string) => set(KEYS.MENU_ITEMS, menuStore.getAll().filter((m) => m.id !== id)),
   133 };
   134 
   135 // ─── Orders ───────────────────────────────────────────────────────────────────
   136 export const orderStore = {
   137   getAll: (): Order[] => get<Order[]>(KEYS.ORDERS, []),
   138   getById: (id: string) => orderStore.getAll().find((o) => o.id === id),
   139   getByRestaurant: (restaurantId: string) => orderStore.getAll().filter((o) => o.restaurantId === restaurantId),
   140   save: (o: Order) => {
   141     const all = orderStore.getAll().filter((x) => x.id !== o.id);
   142     set(KEYS.ORDERS, [...all, o]);
   143   },
   144 };
   145 
   146 // ─── Reviews ──────────────────────────────────────────────────────────────────
   147 export const reviewStore = {
   148   getAll: (): Review[] => get<Review[]>(KEYS.REVIEWS, []),
   149   getByRestaurant: (restaurantId: string) => reviewStore.getAll().filter((r) => r.restaurantId === restaurantId),
   150   save: (r: Review) => {
   151     const all = reviewStore.getAll().filter((x) => x.id !== r.id);
   152     set(KEYS.REVIEWS, [...all, r]);
   153   },
   154   delete: (id: string) => set(KEYS.REVIEWS, reviewStore.getAll().filter((r) => r.id !== id)),
   155 };
   156 
   157 // ─── Cart ─────────────────────────────────────────────────────────────────────
   158 export interface CartState {
   159   restaurantSlug: string;
   160   items: import('@/types').CartItem[];
   161 }
   162 export const cartStore = {
   163   get: (): CartState | null => get<CartState | null>(KEYS.CART, null),
   164   set: (c: CartState | null) => set(KEYS.CART, c),
   165   clear: () => localStorage.removeItem(KEYS.CART),
   166 };
   167 
   168 // ─── Helpers ─────────────────────────────────────────────────────────────────
   169 export function uuid(): string {
   170   return crypto.randomUUID?.() ?? Math.random().toString(36).slice(2) + Date.now().toString(36);
   171 }
   172 
   173 export function planHas(plan: 'free' | 'basic' | 'premium', feature: 'categories' | 'orderFilter' | 'analytics' | 'unlimitedRestaurants' | 'unlimitedItems' | 'themeColor'): boolean {
   174   const matrix: Record<string, string[]> = {
   175     free: [],
   176     basic: ['categories', 'orderFilter', 'analytics'],
   177     premium: ['categories', 'orderFilter', 'analytics', 'unlimitedRestaurants', 'unlimitedItems', 'themeColor'],
   178   };
   179   return (matrix[plan] ?? []).includes(feature);
   180 }


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/admin', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/admin is successful.]
Here's the files and directories up to 2 levels deep in /workspace/app-cg8nvxlqtuyq/src/pages/admin, excluding hidden:
/workspace/app-cg8nvxlqtuyq/src/pages/admin
/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminRestaurantsPage.tsx
/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminDashboard.tsx
/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminSettingsPage.tsx
/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminReviewsPage.tsx
/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminOwnersPage.tsx
/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminLoginPage.tsx


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminDashboard.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminDashboard.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminDashboard.tsx:
     1 import { useNavigate } from 'react-router-dom';
     2 import { Store, Users, Star, ShoppingBag, TrendingUp } from 'lucide-react';
     3 import { Card, CardContent } from '@/components/ui/card';
     4 import { Button } from '@/components/ui/button';
     5 import { restaurantStore, ownerStore, orderStore, reviewStore } from '@/store';
     6 
     7 export default function AdminDashboard() {
     8   const navigate = useNavigate();
     9   const restaurants = restaurantStore.getAll();
    10   const owners = ownerStore.getAll();
    11   const orders = orderStore.getAll();
    12   const reviews = reviewStore.getAll();
    13   const revenue = orders.filter((o) => o.status === 'completed').reduce((s, o) => s + o.total, 0);
    14 
    15   const stats = [
    16     { label: 'Restaurants', value: restaurants.length, icon: Store, action: () => navigate('/admin1/restaurants') },
    17     { label: 'Owners', value: owners.length, icon: Users, action: () => navigate('/admin1/owners') },
    18     { label: 'Total Orders', value: orders.length, icon: ShoppingBag, action: null },
    19     { label: 'Reviews', value: reviews.length, icon: Star, action: () => navigate('/admin1/reviews') },
    20     { label: 'Total Revenue', value: `₹${revenue.toFixed(0)}`, icon: TrendingUp, action: null },
    21   ];
    22 
    23   return (
    24     <div className="p-4 md:p-6 max-w-5xl mx-auto">
    25       <h1 className="text-2xl font-bold mb-2">Admin Dashboard</h1>
    26       <p className="text-muted-foreground text-sm mb-8">Platform overview</p>
    27 
    28       <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-8">
    29         {stats.map(({ label, value, icon: Icon, action }) => (
    30           <Card key={label} className={`${action ? 'cursor-pointer hover:shadow-md transition-shadow' : ''}`} onClick={() => action?.()}>
    31             <CardContent className="p-4 text-center">
    32               <Icon size={20} strokeWidth={2} className="mx-auto mb-2 text-primary" />
    33               <p className="text-2xl font-bold">{value}</p>
    34               <p className="text-xs text-muted-foreground mt-0.5">{label}</p>
    35             </CardContent>
    36           </Card>
    37         ))}
    38       </div>
    39 
    40       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
    41         {[
    42           { title: 'Manage Restaurants', desc: 'Suspend, reactivate, assign plans', path: '/admin1/restaurants' },
    43           { title: 'Manage Owners', desc: 'View owners and their plans', path: '/admin1/owners' },
    44           { title: 'Moderate Reviews', desc: 'Delete inappropriate reviews', path: '/admin1/reviews' },
    45           { title: 'Site Settings', desc: 'Logo, name, support contact, maintenance', path: '/admin1/settings' },
    46         ].map(({ title, desc, path }) => (
    47           <Card key={title} className="cursor-pointer hover:shadow-md transition-shadow" onClick={() => navigate(path)}>
    48             <CardContent className="p-4 flex items-center justify-between">
    49               <div>
    50                 <p className="font-semibold">{title}</p>
    51                 <p className="text-sm text-muted-foreground">{desc}</p>
    52               </div>
    53               <Button size="sm" variant="outline" onClick={() => navigate(path)}>Open</Button>
    54             </CardContent>
    55           </Card>
    56         ))}
    57       </div>
    58     </div>
    59   );
    60 }
    61 


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminRestaurantsPage.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminRestaurantsPage.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminRestaurantsPage.tsx:
     1 import { useState, useCallback } from 'react';
     2 import { CheckCircle, XCircle, MapPin, Phone } from 'lucide-react';
     3 import { Button } from '@/components/ui/button';
     4 import { Card, CardContent } from '@/components/ui/card';
     5 import { Badge } from '@/components/ui/badge';
     6 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     7 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
     8 import { restaurantStore, ownerStore, getOwnerPlan } from '@/store';
     9 import { toast } from 'sonner';
    10 
    11 export default function AdminRestaurantsPage() {
    12   const [restaurants, setRestaurants] = useState(() => restaurantStore.getAll());
    13   const refresh = useCallback(() => setRestaurants(restaurantStore.getAll()), []);
    14 
    15   const toggleSuspend = (id: string, suspended: boolean) => {
    16     const r = restaurantStore.getById(id);
    17     if (!r) return;
    18     restaurantStore.save({ ...r, suspended });
    19     refresh();
    20     toast.success(suspended ? 'Restaurant suspended' : 'Restaurant reactivated');
    21   };
    22 
    23   const setPlan = (ownerId: string, plan: 'free' | 'basic' | 'premium') => {
    24     const owner = ownerStore.getById(ownerId);
    25     if (!owner) return;
    26     const expiry = plan === 'free' ? undefined : new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString();
    27     ownerStore.save({ ...owner, plan, planExpiresAt: expiry });
    28     const current = ownerStore.getCurrent();
    29     if (current?.id === ownerId) ownerStore.setCurrent({ ...current, plan, planExpiresAt: expiry });
    30     refresh();
    31     toast.success(`Plan updated to ${plan}`);
    32   };
    33 
    34   return (
    35     <div className="p-4 md:p-6 max-w-5xl mx-auto">
    36       <h1 className="text-2xl font-bold mb-6">Restaurants</h1>
    37 
    38       {restaurants.length === 0 ? (
    39         <div className="text-center py-16 border border-dashed rounded text-muted-foreground">No restaurants yet.</div>
    40       ) : (
    41         <div className="space-y-3">
    42           {restaurants.map((r) => {
    43             const owner = ownerStore.getById(r.ownerId);
    44             const plan = owner ? getOwnerPlan(owner) : 'free';
    45             return (
    46               <Card key={r.id}>
    47                 <CardContent className="p-4">
    48                   <div className="flex items-start gap-3 flex-wrap">
    49                     <div className="w-12 h-12 rounded overflow-hidden bg-muted flex items-center justify-center shrink-0">
    50                       {r.logo
    51                         ? <img src={r.logo} alt={r.name} className="w-full h-full object-cover" />
    52                         : <span className="font-bold text-muted-foreground">{r.name[0]}</span>}
    53                     </div>
    54                     <div className="flex-1 min-w-0">
    55                       <div className="flex items-center gap-2 flex-wrap">
    56                         <p className="font-semibold">{r.name}</p>
    57                         <Badge variant={r.suspended ? 'destructive' : 'secondary'} className="text-xs">
    58                           {r.suspended ? 'Suspended' : 'Active'}
    59                         </Badge>
    60                         <Badge variant="outline" className="text-xs capitalize">{plan}</Badge>
    61                       </div>
    62                       <div className="flex items-center gap-3 text-xs text-muted-foreground mt-0.5 flex-wrap">
    63                         <span className="flex items-center gap-1"><MapPin size={11} strokeWidth={2} />{r.location}</span>
    64                         <span className="flex items-center gap-1"><Phone size={11} strokeWidth={2} />{r.phone}</span>
    65                         {owner && <span>Owner: {owner.email}</span>}
    66                       </div>
    67                     </div>
    68                     <div className="flex items-center gap-2 flex-wrap shrink-0">
    69                       {/* Plan selector */}
    70                       <Select value={plan} onValueChange={(v) => setPlan(r.ownerId, v as 'free' | 'basic' | 'premium')}>
    71                         <SelectTrigger className="w-28 h-8 text-xs"><SelectValue /></SelectTrigger>
    72                         <SelectContent>
    73                           <SelectItem value="free">Free</SelectItem>
    74                           <SelectItem value="basic">Basic</SelectItem>
    75                           <SelectItem value="premium">Premium</SelectItem>
    76                         </SelectContent>
    77                       </Select>
    78                       {r.suspended ? (
    79                         <Button size="sm" variant="outline" className="h-8 gap-1.5 text-xs" onClick={() => toggleSuspend(r.id, false)}>
    80                           <CheckCircle size={13} strokeWidth={2} /> Reactivate
    81                         </Button>
    82                       ) : (
    83                         <AlertDialog>
    84                           <AlertDialogTrigger asChild>
    85                             <Button size="sm" variant="destructive" className="h-8 gap-1.5 text-xs">
    86                               <XCircle size={13} strokeWidth={2} /> Suspend
    87                             </Button>
    88                           </AlertDialogTrigger>
    89                           <AlertDialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg">
    90                             <AlertDialogHeader><AlertDialogTitle>Suspend Restaurant?</AlertDialogTitle><AlertDialogDescription>This will hide the restaurant from public view.</AlertDialogDescription></AlertDialogHeader>
    91                             <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => toggleSuspend(r.id, true)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Suspend</AlertDialogAction></AlertDialogFooter>
    92                           </AlertDialogContent>
    93                         </AlertDialog>
    94                       )}
    95                     </div>
    96                   </div>
    97                 </CardContent>
    98               </Card>
    99             );
   100           })}
   101         </div>
   102       )}
   103     </div>
   104   );
   105 }
   106 


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminOwnersPage.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminOwnersPage.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminOwnersPage.tsx:
     1 import { ownerStore, restaurantStore, getOwnerPlan } from '@/store';
     2 import { Badge } from '@/components/ui/badge';
     3 import { Card, CardContent } from '@/components/ui/card';
     4 
     5 export default function AdminOwnersPage() {
     6   const owners = ownerStore.getAll();
     7 
     8   return (
     9     <div className="p-4 md:p-6 max-w-4xl mx-auto">
    10       <h1 className="text-2xl font-bold mb-6">Owners</h1>
    11       {owners.length === 0 ? (
    12         <div className="text-center py-16 border border-dashed rounded text-muted-foreground">No registered owners.</div>
    13       ) : (
    14         <div className="space-y-3">
    15           {owners.map((owner) => {
    16             const restaurants = restaurantStore.getByOwner(owner.id);
    17             const plan = getOwnerPlan(owner);
    18             return (
    19               <Card key={owner.id}>
    20                 <CardContent className="p-4">
    21                   <div className="flex items-start justify-between gap-3 flex-wrap">
    22                     <div className="min-w-0">
    23                       <div className="flex items-center gap-2 flex-wrap">
    24                         <p className="font-semibold">{owner.name || 'Unknown'}</p>
    25                         <Badge variant={plan === 'free' ? 'secondary' : 'default'} className="text-xs capitalize">{plan}</Badge>
    26                         {owner.planExpiresAt && plan !== 'free' && (
    27                           <span className="text-xs text-muted-foreground">exp {new Date(owner.planExpiresAt).toLocaleDateString()}</span>
    28                         )}
    29                       </div>
    30                       <p className="text-sm text-muted-foreground">{owner.email}</p>
    31                       <p className="text-xs text-muted-foreground">{owner.phone || 'No phone'} · Joined {new Date(owner.createdAt).toLocaleDateString()}</p>
    32                     </div>
    33                     <div className="text-sm shrink-0">
    34                       <p className="font-medium">{restaurants.length} restaurant{restaurants.length !== 1 ? 's' : ''}</p>
    35                       <div className="text-xs text-muted-foreground space-y-0.5 mt-1">
    36                         {restaurants.map((r) => (
    37                           <p key={r.id} className="truncate max-w-40">{r.name} {r.suspended ? '(suspended)' : ''}</p>
    38                         ))}
    39                       </div>
    40                     </div>
    41                   </div>
    42                 </CardContent>
    43               </Card>
    44             );
    45           })}
    46         </div>
    47       )}
    48     </div>
    49   );
    50 }
    51 


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminReviewsPage.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminReviewsPage.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminReviewsPage.tsx:
     1 import { useState, useCallback } from 'react';
     2 import { Trash2 } from 'lucide-react';
     3 import { Button } from '@/components/ui/button';
     4 import { Card, CardContent } from '@/components/ui/card';
     5 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     6 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
     7 import StarRating from '@/components/common/StarRating';
     8 import { reviewStore, restaurantStore } from '@/store';
     9 import { toast } from 'sonner';
    10 
    11 export default function AdminReviewsPage() {
    12   const restaurants = restaurantStore.getAll();
    13   const [selectedRestaurant, setSelectedRestaurant] = useState('all');
    14   const [reviews, setReviews] = useState(() => reviewStore.getAll());
    15 
    16   const refresh = useCallback(() => setReviews(reviewStore.getAll()), []);
    17 
    18   const deleteReview = (id: string) => {
    19     reviewStore.delete(id);
    20     refresh();
    21     toast.success('Review deleted');
    22   };
    23 
    24   const filtered = selectedRestaurant === 'all'
    25     ? reviews
    26     : reviews.filter((r) => r.restaurantId === selectedRestaurant);
    27 
    28   const getRestaurantName = (id: string) => restaurantStore.getById(id)?.name ?? 'Unknown';
    29 
    30   return (
    31     <div className="p-4 md:p-6 max-w-4xl mx-auto">
    32       <div className="flex items-center justify-between mb-6 flex-wrap gap-3">
    33         <h1 className="text-2xl font-bold">Reviews</h1>
    34         <Select value={selectedRestaurant} onValueChange={setSelectedRestaurant}>
    35           <SelectTrigger className="w-56"><SelectValue placeholder="All Restaurants" /></SelectTrigger>
    36           <SelectContent>
    37             <SelectItem value="all">All Restaurants</SelectItem>
    38             {restaurants.map((r) => <SelectItem key={r.id} value={r.id}>{r.name}</SelectItem>)}
    39           </SelectContent>
    40         </Select>
    41       </div>
    42 
    43       {filtered.length === 0 ? (
    44         <div className="text-center py-16 border border-dashed rounded text-muted-foreground">No reviews found.</div>
    45       ) : (
    46         <div className="space-y-3">
    47           {[...filtered].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()).map((rev) => (
    48             <Card key={rev.id}>
    49               <CardContent className="p-4">
    50                 <div className="flex items-start justify-between gap-3">
    51                   <div className="flex-1 min-w-0">
    52                     <div className="flex items-center gap-2 flex-wrap mb-1">
    53                       <p className="font-medium text-sm">{rev.reviewerName}</p>
    54                       <StarRating value={rev.rating} readonly size={13} />
    55                       <span className="text-xs text-muted-foreground">{getRestaurantName(rev.restaurantId)}</span>
    56                     </div>
    57                     {rev.text && <p className="text-sm text-muted-foreground text-pretty">{rev.text}</p>}
    58                     <p className="text-xs text-muted-foreground mt-1">{new Date(rev.createdAt).toLocaleString()}</p>
    59                   </div>
    60                   <AlertDialog>
    61                     <AlertDialogTrigger asChild>
    62                       <Button size="icon" variant="ghost" className="h-8 w-8 text-destructive hover:text-destructive shrink-0">
    63                         <Trash2 size={14} strokeWidth={2} />
    64                       </Button>
    65                     </AlertDialogTrigger>
    66                     <AlertDialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg">
    67                       <AlertDialogHeader><AlertDialogTitle>Delete Review?</AlertDialogTitle><AlertDialogDescription>This will permanently remove this review.</AlertDialogDescription></AlertDialogHeader>
    68                       <AlertDialogFooter>
    69                         <AlertDialogCancel>Cancel</AlertDialogCancel>
    70                         <AlertDialogAction onClick={() => deleteReview(rev.id)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Delete</AlertDialogAction>
    71                       </AlertDialogFooter>
    72                     </AlertDialogContent>
    73                   </AlertDialog>
    74                 </div>
    75               </CardContent>
    76             </Card>
    77           ))}
    78         </div>
    79       )}
    80     </div>
    81   );
    82 }
    83 


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminSettingsPage.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminSettingsPage.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminSettingsPage.tsx:
     1 import { useState, useRef } from 'react';
     2 import { Upload } from 'lucide-react';
     3 import { Button } from '@/components/ui/button';
     4 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
     5 import { Input } from '@/components/ui/input';
     6 import { Label } from '@/components/ui/label';
     7 import { Switch } from '@/components/ui/switch';
     8 import { settingsStore, fileToBase64, LOGO_URL } from '@/store';
     9 import { toast } from 'sonner';
    10 
    11 export default function AdminSettingsPage() {
    12   const [settings, setSettings] = useState(() => settingsStore.get());
    13   const [saving, setSaving] = useState(false);
    14   const fileRef = useRef<HTMLInputElement>(null);
    15 
    16   const handleLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    17     const file = e.target.files?.[0];
    18     if (!file) return;
    19     if (!file.type.startsWith('image/')) { toast.error('Please upload an image file'); return; }
    20     const b64 = await fileToBase64(file);
    21     setSettings((s) => ({ ...s, logo: b64 }));
    22   };
    23 
    24   const handleSave = () => {
    25     setSaving(true);
    26     setTimeout(() => {
    27       settingsStore.set(settings);
    28       toast.success('Settings saved successfully');
    29       setSaving(false);
    30     }, 400);
    31   };
    32 
    33   return (
    34     <div className="p-4 md:p-6 max-w-2xl mx-auto">
    35       <h1 className="text-2xl font-bold mb-6">Site Settings</h1>
    36 
    37       <div className="space-y-6">
    38         {/* Branding */}
    39         <Card>
    40           <CardHeader><CardTitle className="text-base">Branding</CardTitle></CardHeader>
    41           <CardContent className="space-y-4">
    42             <div>
    43               <Label>Site Logo</Label>
    44               <div className="mt-2 flex items-center gap-4">
    45                 <div className="w-16 h-16 rounded border border-border bg-muted flex items-center justify-center overflow-hidden">
    46                   <img src={settings.logo || LOGO_URL} alt="logo" className="w-full h-full object-contain" />
    47                 </div>
    48                 <div>
    49                   <Button type="button" variant="outline" size="sm" onClick={() => fileRef.current?.click()}>
    50                     <Upload size={14} strokeWidth={2} className="mr-1.5" /> Upload Logo
    51                   </Button>
    52                   <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={handleLogoUpload} />
    53                   <p className="text-xs text-muted-foreground mt-1">Stored locally in browser</p>
    54                 </div>
    55               </div>
    56             </div>
    57             <div>
    58               <Label htmlFor="sname">Site Name</Label>
    59               <Input id="sname" value={settings.siteName} onChange={(e) => setSettings((s) => ({ ...s, siteName: e.target.value }))} className="mt-1" />
    60             </div>
    61           </CardContent>
    62         </Card>
    63 
    64         {/* Support */}
    65         <Card>
    66           <CardHeader><CardTitle className="text-base">Support Contact</CardTitle></CardHeader>
    67           <CardContent className="space-y-4">
    68             <div>
    69               <Label htmlFor="sphone">Support Phone (for WhatsApp plan upgrades)</Label>
    70               <Input id="sphone" placeholder="10-digit mobile number" value={settings.supportPhone} onChange={(e) => setSettings((s) => ({ ...s, supportPhone: e.target.value }))} className="mt-1" maxLength={10} />
    71             </div>
    72             <div>
    73               <Label htmlFor="semail">Support Email</Label>
    74               <Input id="semail" type="email" placeholder="support@sqrm.in" value={settings.supportEmail} onChange={(e) => setSettings((s) => ({ ...s, supportEmail: e.target.value }))} className="mt-1" />
    75             </div>
    76           </CardContent>
    77         </Card>
    78 
    79         {/* Maintenance */}
    80         <Card>
    81           <CardHeader><CardTitle className="text-base">Maintenance Mode</CardTitle></CardHeader>
    82           <CardContent>
    83             <div className="flex items-center justify-between">
    84               <div>
    85                 <p className="font-medium text-sm">Enable Maintenance Mode</p>
    86                 <p className="text-xs text-muted-foreground mt-0.5">Shows maintenance message to all non-admin visitors</p>
    87               </div>
    88               <Switch
    89                 checked={settings.maintenanceMode}
    90                 onCheckedChange={(v) => setSettings((s) => ({ ...s, maintenanceMode: v }))}
    91               />
    92             </div>
    93             {settings.maintenanceMode && (
    94               <div className="mt-3 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded text-sm text-yellow-700 dark:text-yellow-400">
    95                 Maintenance mode is ON. Visitors will see the maintenance page.
    96               </div>
    97             )}
    98           </CardContent>
    99         </Card>
   100 
   101         <Button className="w-full" onClick={handleSave} disabled={saving}>
   102           {saving ? 'Saving...' : 'Save Settings'}
   103         </Button>
   104       </div>
   105     </div>
   106   );
   107 }
   108 


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerDashboard.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerDashboard.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerDashboard.tsx:
     1 import { useNavigate } from 'react-router-dom';
     2 import { Plus, QrCode, UtensilsCrossed, ClipboardList, ShoppingBag, TrendingUp, Star, FileText, Download, Moon, Bell, Store } from 'lucide-react';
     3 import { Button } from '@/components/ui/button';
     4 import { Card, CardContent } from '@/components/ui/card';
     5 import { Badge } from '@/components/ui/badge';
     6 import { ownerStore, restaurantStore, orderStore, menuStore, getOwnerPlan, planHas } from '@/store';
     7 import { useEffect, useState } from 'react';
     8 import type { Restaurant, Order } from '@/types';
     9 
    10 const featureCards = [
    11   { icon: QrCode, title: 'QR Code Generator', desc: 'Generate branded QR codes', plan: null },
    12   { icon: ShoppingBag, title: 'Digital Ordering', desc: 'Customers order from phone', plan: null },
    13   { icon: Bell, title: 'Live Order Alerts', desc: 'Real-time notifications', plan: null },
    14   { icon: TrendingUp, title: 'Earnings View', desc: 'Daily & monthly earnings', plan: null },
    15   { icon: Star, title: 'Ratings & Reviews', desc: 'Customer feedback system', plan: null },
    16   { icon: FileText, title: 'PDF Receipts', desc: 'Professional order bills', plan: null },
    17   { icon: Download, title: 'QR Download', desc: 'PNG & PDF download', plan: null },
    18   { icon: ClipboardList, title: 'Analytics', desc: 'Monthly reports & insights', plan: 'basic' as const },
    19   { icon: Moon, title: 'Custom Theme', desc: 'Personalize your menu color', plan: 'premium' as const },
    20 ];
    21 
    22 export default function OwnerDashboard() {
    23   const navigate = useNavigate();
    24   const owner = ownerStore.getCurrent();
    25   const [restaurants, setRestaurants] = useState<Restaurant[]>([]);
    26   const [orders, setOrders] = useState<Order[]>([]);
    27 
    28   useEffect(() => {
    29     if (!owner) { navigate('/owner/login'); return; }
    30     setRestaurants(restaurantStore.getByOwner(owner.id));
    31     const allOrders = owner
    32       ? restaurantStore.getByOwner(owner.id).flatMap((r) => orderStore.getByRestaurant(r.id))
    33       : [];
    34     setOrders(allOrders);
    35   }, [owner, navigate]);
    36 
    37   if (!owner) return null;
    38   const plan = getOwnerPlan(owner);
    39   const revenue = orders.filter((o) => o.status === 'completed').reduce((s, o) => s + o.total, 0);
    40 
    41   return (
    42     <div className="p-4 md:p-6 max-w-5xl mx-auto">
    43       {/* Welcome */}
    44       <div className="mb-6">
    45         <h1 className="text-2xl font-bold">Welcome, {owner.name || 'Owner'}</h1>
    46         <p className="text-muted-foreground text-sm mt-0.5">
    47           Plan: <Badge variant={plan === 'free' ? 'secondary' : 'default'} className="ml-1 capitalize">{plan}</Badge>
    48           {owner.planExpiresAt && plan !== 'free' && (
    49             <span className="ml-2 text-xs">Expires {new Date(owner.planExpiresAt).toLocaleDateString()}</span>
    50           )}
    51         </p>
    52       </div>
    53 
    54       {/* Stats */}
    55       <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
    56         {[
    57           { label: 'Restaurants', value: restaurants.length, icon: Store },
    58           { label: 'Total Orders', value: orders.length, icon: ShoppingBag },
    59           { label: 'Revenue', value: `₹${revenue.toFixed(0)}`, icon: TrendingUp },
    60         ].map(({ label, value, icon: Icon }) => (
    61           <Card key={label}>
    62             <CardContent className="p-4 flex items-center gap-3">
    63               <div className="w-10 h-10 rounded bg-primary/10 flex items-center justify-center shrink-0">
    64                 <Icon size={20} strokeWidth={2} className="text-primary" />
    65               </div>
    66               <div>
    67                 <p className="text-2xl font-bold">{value}</p>
    68                 <p className="text-xs text-muted-foreground">{label}</p>
    69               </div>
    70             </CardContent>
    71           </Card>
    72         ))}
    73       </div>
    74 
    75       {/* Restaurants */}
    76       <div className="flex items-center justify-between mb-4">
    77         <h2 className="text-lg font-bold">Your Restaurants</h2>
    78         <Button size="sm" className="gap-1" onClick={() => navigate('/owner/restaurants/create')}>
    79           <Plus size={14} strokeWidth={2} /> New
    80         </Button>
    81       </div>
    82 
    83       {restaurants.length === 0 ? (
    84         <Card className="mb-8">
    85           <CardContent className="p-8 text-center">
    86             <UtensilsCrossed size={40} strokeWidth={1.5} className="mx-auto mb-3 text-muted-foreground opacity-40" />
    87             <p className="font-medium">No restaurants yet</p>
    88             <p className="text-sm text-muted-foreground mt-1">Create your first restaurant to get started</p>
    89             <Button className="mt-4" onClick={() => navigate('/owner/restaurants/create')}>Create Restaurant</Button>
    90           </CardContent>
    91         </Card>
    92       ) : (
    93         <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
    94           {restaurants.map((r) => {
    95             const rOrders = orderStore.getByRestaurant(r.id);
    96             const items = menuStore.getByRestaurant(r.id);
    97             return (
    98               <Card key={r.id}>
    99                 <CardContent className="p-4">
   100                   <div className="flex gap-3 mb-3">
   101                     <div className="w-12 h-12 rounded overflow-hidden bg-muted flex items-center justify-center shrink-0">
   102                       {r.logo
   103                         ? <img src={r.logo} alt={r.name} className="w-full h-full object-cover" />
   104                         : <span className="font-bold text-muted-foreground">{r.name[0]}</span>}
   105                     </div>
   106                     <div className="flex-1 min-w-0">
   107                       <p className="font-semibold truncate">{r.name}</p>
   108                       <p className="text-xs text-muted-foreground">{r.location}</p>
   109                       <div className="flex gap-3 text-xs text-muted-foreground mt-0.5">
   110                         <span>{items.length} items</span>
   111                         <span>{rOrders.length} orders</span>
   112                       </div>
   113                     </div>
   114                     {r.suspended && <Badge variant="destructive" className="text-xs shrink-0">Suspended</Badge>}
   115                   </div>
   116                   <div className="flex flex-wrap gap-2">
   117                     <Button size="sm" variant="default" className="h-7 text-xs" onClick={() => navigate(`/owner/restaurants/${r.id}/orders`)}>Orders</Button>
   118                     <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => navigate(`/owner/restaurants/${r.id}/menu`)}>Menu</Button>
   119                     <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => navigate(`/owner/restaurants/${r.id}/qr`)}>QR</Button>
   120                     <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => navigate(`/owner/restaurants/${r.id}/edit`)}>Edit</Button>
   121                     <Button size="sm" variant="ghost" className="h-7 text-xs text-primary" onClick={() => navigate(`/r/${r.slug}`)}>Profile</Button>
   122                   </div>
   123                 </CardContent>
   124               </Card>
   125             );
   126           })}
   127         </div>
   128       )}
   129 
   130       {/* Feature cards */}
   131       <h2 className="text-lg font-bold mb-4">Platform Features</h2>
   132       <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
   133         {featureCards.map(({ icon: Icon, title, desc, plan: reqPlan }) => {
   134           const locked = reqPlan === 'basic' ? !planHas(plan, 'analytics') : reqPlan === 'premium' ? !planHas(plan, 'themeColor') : false;
   135           return (
   136             <div key={title} className={`p-3 border border-border rounded bg-card relative ${locked ? 'plan-locked' : ''}`}>
   137               {locked && (
   138                 <div className="absolute inset-0 flex items-center justify-center z-20 flex-col gap-1">
   139                   <Badge variant="secondary" className="text-xs">{reqPlan === 'basic' ? 'Basic' : 'Premium'}</Badge>
   140                 </div>
   141               )}
   142               <div className="w-8 h-8 rounded bg-primary/10 flex items-center justify-center mb-2">
   143                 <Icon size={16} strokeWidth={2} className="text-primary" />
   144               </div>
   145               <p className="text-sm font-semibold">{title}</p>
   146               <p className="text-xs text-muted-foreground mt-0.5">{desc}</p>
   147             </div>
   148           );
   149         })}
   150       </div>
   151     </div>
   152   );
   153 }
   154 
   155 
   156 


</observation>
<action>
AgentThinkAction(thought='Now I have a clear picture of all pages. Let me plan the remaining work:\n\n1. Update todos: 5 is done, move to 6+7 in_progress\n2. Redesign OwnerDashboard - glassmorphism panels, better restaurant cards\n3. Redesign OwnerRestaurantsPage - already decent, small polish\n4. Redesign OwnerProfilePage - better plan comparison cards\n5. Redesign AdminDashboard - cleaner stat cards\n6. Redesign AdminRestaurantsPage - better row layout\n7. Redesign AdminOwnersPage - better list\n8. Redesign AdminReviewsPage - better layout\n9. AdminSettingsPage - already decent, small polish\n10. Fix shared components (OfflineBanner)\n11. Create GUIDE.md\n12. Run lint\n\nLet me do all the redesigns now in parallel batches.', action=<ActionType.THINK: 'think'>)
</action>
<observation>
AgentThinkObservation(content='Your thought has been logged.', observation=<ObservationType.THINK: 'think'>)
</observation>
<action>
TodoAction(todos=[TodoItem(id='5', status='completed', priority=None, content='Redesign Menu, Cart, Order Tracking pages', details='Done', group=None, agent_name=None), TodoItem(id='6', status='in_progress', priority=None, content='Redesign owner pages: Dashboard, all panels', details='Redesigning now — Orders done, working on Dashboard + Profile + Restaurants', group=None, agent_name=None), TodoItem(id='7', status='in_progress', priority=None, content='Redesign admin pages and fix admin auth', details='Admin creds exact-match done in store. Redesigning Dashboard + pages now', group=None, agent_name=None)], command='update', thought='', action=<ActionType.TODO: 'todo'>, content='')
</action>
<observation>
TodoObservation(content='Validation failed: Too many in_progress todos: 2 > 1', state=TodoState(items=[TodoItem(id='1', status='completed', priority=None, content='Redesign design system: index.css tokens, dark navy bg, glassmorphism, animations', details='Done', group=None, agent_name=None), TodoItem(id='2', status='completed', priority=None, content='Fix store: random 16-char slugs, admin creds, no 1=1 bypass', details='Done', group=None, agent_name=None), TodoItem(id='3', status='completed', priority=None, content='Fix routing: replace all window.location with useNavigate, fix SPA nav', details='Done — window.open only for external WhatsApp/tel links kept intentionally', group=None, agent_name=None), TodoItem(id='4', status='completed', priority=None, content='Redesign public pages: Home, Restaurants, Restaurant Profile', details='Done', group=None, agent_name=None), TodoItem(id='5', status='in_progress', priority=None, content='Redesign Menu, Cart, Order Tracking pages', details='In progress — redesigning now', group=None, agent_name=None), TodoItem(id='6', status='pending', priority=None, content='Redesign owner pages: Login (Google only), Dashboard, all panels', details='- Single Google Sign-In button (no email input)\n- Glassmorphism sidebar layout\n- Inline actions, no multi-step navigation maze\n- ding.mp3 audio + Web Audio fallback', group=None, agent_name=None), TodoItem(id='7', status='pending', priority=None, content='Redesign admin pages and fix admin auth', details='- Exact credential match only\n- Clean data tables with inline actions', group=None, agent_name=None), TodoItem(id='8', status='pending', priority=None, content='Fix shared components: PublicHeader (PWA install btn), OfflineBanner, layouts', details='- beforeinstallprompt PWA install button in header\n- Fix all layout dark mode issues', group=None, agent_name=None), TodoItem(id='9', status='pending', priority=None, content='Create new GUIDE.md', details='- Setup, features by role, admin creds, plans, deployment', group=None, agent_name=None), TodoItem(id='10', status='pending', priority=None, content='Final lint check and cleanup', details='- npm run lint clean\n- Remove SamplePage dead imports', group=None, agent_name=None)], updated_at='2026-06-20T07:19:23.525117+00:00'), system_reminder='<system-reminder>\nTodo update failed: Too many in_progress todos: 2 > 1\nPlease fix and retry write_todos.\n</system-reminder>', observation=<ObservationType.TODO: 'todo'>)
</observation>
<action>
TodoAction(todos=[TodoItem(id='5', status='completed', priority=None, content='Redesign Menu, Cart, Order Tracking pages', details='Done', group=None, agent_name=None), TodoItem(id='6', status='in_progress', priority=None, content='Redesign owner + admin pages', details='Redesigning Dashboard, Profile, Restaurants, all admin pages', group=None, agent_name=None), TodoItem(id='7', status='completed', priority=None, content='Redesign admin pages and fix admin auth', details='Merged into todo 6', group=None, agent_name=None)], command='update', thought='', action=<ActionType.TODO: 'todo'>, content='')
</action>
<observation>
TodoObservation(content='<system-reminder>\nYour todo list has changed. Here are the latest contents of your todo list:\n\n1. Redesign design system: index.css tokens, dark navy bg, glassmorphism, animations [completed]\n  Done\n2. Fix store: random 16-char slugs, admin creds, no 1=1 bypass [completed]\n  Done\n3. Fix routing: replace all window.location with useNavigate, fix SPA nav [completed]\n  Done — window.open only for external WhatsApp/tel links kept intentionally\n4. Redesign public pages: Home, Restaurants, Restaurant Profile [completed]\n  Done\n5. Redesign Menu, Cart, Order Tracking pages [completed]\n  Done\n6. Redesign owner + admin pages [in_progress]\n  Redesigning Dashboard, Profile, Restaurants, all admin pages\n7. Redesign admin pages and fix admin auth [completed]\n  Merged into todo 6\n8. Fix shared components: PublicHeader (PWA install btn), OfflineBanner, layouts [pending]\n  - beforeinstallprompt PWA install button in header\n  - Fix all layout dark mode issues\n9. Create new GUIDE.md [pending]\n  - Setup, features by role, admin creds, plans, deployment\n10. Final lint check and cleanup [pending]\n  - npm run lint clean\n  - Remove SamplePage dead imports\n</system-reminder>', state=TodoState(items=[TodoItem(id='1', status='completed', priority=None, content='Redesign design system: index.css tokens, dark navy bg, glassmorphism, animations', details='Done', group=None, agent_name=None), TodoItem(id='2', status='completed', priority=None, content='Fix store: random 16-char slugs, admin creds, no 1=1 bypass', details='Done', group=None, agent_name=None), TodoItem(id='3', status='completed', priority=None, content='Fix routing: replace all window.location with useNavigate, fix SPA nav', details='Done — window.open only for external WhatsApp/tel links kept intentionally', group=None, agent_name=None), TodoItem(id='4', status='completed', priority=None, content='Redesign public pages: Home, Restaurants, Restaurant Profile', details='Done', group=None, agent_name=None), TodoItem(id='5', status='completed', priority=None, content='Redesign Menu, Cart, Order Tracking pages', details='Done', group=None, agent_name=None), TodoItem(id='6', status='in_progress', priority=None, content='Redesign owner + admin pages', details='Redesigning Dashboard, Profile, Restaurants, all admin pages', group=None, agent_name=None), TodoItem(id='7', status='completed', priority=None, content='Redesign admin pages and fix admin auth', details='Merged into todo 6', group=None, agent_name=None), TodoItem(id='8', status='pending', priority=None, content='Fix shared components: PublicHeader (PWA install btn), OfflineBanner, layouts', details='- beforeinstallprompt PWA install button in header\n- Fix all layout dark mode issues', group=None, agent_name=None), TodoItem(id='9', status='pending', priority=None, content='Create new GUIDE.md', details='- Setup, features by role, admin creds, plans, deployment', group=None, agent_name=None), TodoItem(id='10', status='pending', priority=None, content='Final lint check and cleanup', details='- npm run lint clean\n- Remove SamplePage dead imports', group=None, agent_name=None)], updated_at='2026-06-20T07:23:07.066485+00:00'), system_reminder='', observation=<ObservationType.TODO: 'todo'>)
</observation>
<action>
**FileEditAction**
Path: [/workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerDashboard.tsx]
Thought: Now redesign all owner + admin pages in parallel:
Command: str_replace
Old String: ```
import { useNavigate } from 'react-router-dom';
import { Plus, QrCode, UtensilsCrossed, ClipboardList, ShoppingBag, TrendingUp, Star, FileText, Download, Moon, Bell, Store } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { ownerStore, restaurantStore, orderStore, menuStore, getOwnerPlan, planHas } from '@/store';
import { useEffect, useState } from 'react';
import type { Restaurant, Order } from '@/types';
```
New String: ```
import { useNavigate } from 'react-router-dom';
import { Plus, QrCode, UtensilsCrossed, ClipboardList, ShoppingBag, TrendingUp, Star, FileText, Download, Moon, Bell, Store, ChevronRight, Lock } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { ownerStore, restaurantStore, orderStore, menuStore, getOwnerPlan, planHas } from '@/store';
import { useEffect, useState } from 'react';
import type { Restaurant, Order } from '@/types';
```

</action>
<observation>
The file /workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerDashboard.tsx has been edited.

</observation>
<action>
**FileEditAction**
Path: [/workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerDashboard.tsx]
Thought: 
Command: str_replace
Old String: ```
  return (
    <div className="p-4 md:p-6 max-w-5xl mx-auto">
      {/* Welcome */}
      <div className="mb-6">
        <h1 className="text-2xl font-bold">Welcome, {owner.name || 'Owner'}</h1>
        <p className="text-muted-foreground text-sm mt-0.5">
          Plan: <Badge variant={plan === 'free' ? 'secondary' : 'default'} className="ml-1 capitalize">{plan}</Badge>
          {owner.planExpiresAt && plan !== 'free' && (
            <span className="ml-2 text-xs">Expires {new Date(owner.planExpiresAt).toLocaleDateString()}</span>
          )}
        </p>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
        {[
          { label: 'Restaurants', value: restaurants.length, icon: Store },
          { label: 'Total Orders', value: orders.length, icon: ShoppingBag },
          { label: 'Revenue', value: `₹${revenue.toFixed(0)}`, icon: TrendingUp },
        ].map(({ label, value, icon: Icon }) => (
          <Card key={label}>
            <CardContent className="p-4 flex items-center gap-3">
              <div className="w-10 h-10 rounded bg-primary/10 flex items-center justify-center shrink-0">
                <Icon size={20} strokeWidth={2} className="text-primary" />
              </div>
              <div>
                <p className="text-2xl font-bold">{value}</p>
                <p className="text-xs text-muted-foreground">{label}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Restaurants */}
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-lg font-bold">Your Restaurants</h2>
        <Button size="sm" className="gap-1" onClick={() => navigate('/owner/restaurants/create')}>
          <Plus size={14} strokeWidth={2} /> New
        </Button>
      </div>

      {restaurants.length === 0 ? (
        <Card className="mb-8">
          <CardContent className="p-8 text-center">
            <UtensilsCrossed size={40} strokeWidth={1.5} className="mx-auto mb-3 text-muted-foreground opacity-40" />
            <p className="font-medium">No restaurants yet</p>
            <p className="text-sm text-muted-foreground mt-1">Create your first restaurant to get started</p>
            <Button className="mt-4" onClick={() => navigate('/owner/restaurants/create')}>Create Restaurant</Button>
          </CardContent>
        </Card>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
          {restaurants.map((r) => {
            const rOrders = orderStore.getByRestaurant(r.id);
            const items = menuStore.getByRestaurant(r.id);
            return (
              <Card key={r.id}>
                <CardContent className="p-4">
                  <div className="flex gap-3 mb-3">
                    <div className="w-12 h-12 rounded overflow-hidden bg-muted flex items-center justify-center shrink-0">
                      {r.logo
                        ? <img src={r.logo} alt={r.name} className="w-full h-full object-cover" />
                        : <span className="font-bold text-muted-foreground">{r.name[0]}</span>}
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="font-semibold truncate">{r.name}</p>
                      <p className="text-xs text-muted-foreground">{r.location}</p>
                      <div className="flex gap-3 text-xs text-muted-foreground mt-0.5">
                        <span>{items.length} items</span>
                        <span>{rOrders.length} orders</span>
                      </div>
                    </div>
                    {r.suspended && <Badge variant="destructive" className="text-xs shrink-0">Suspended</Badge>}
                  </div>
                  <div className="flex flex-wrap gap-2">
                    <Button size="sm" variant="default" className="h-7 text-xs" onClick={() => navigate(`/owner/restaurants/${r.id}/orders`)}>Orders</Button>
                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => navigate(`/owner/restaurants/${r.id}/menu`)}>Menu</Button>
                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => navigate(`/owner/restaurants/${r.id}/qr`)}>QR</Button>
                    <Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => navigate(`/owner/restaurants/${r.id}/edit`)}>Edit</Button>
                    <Button size="sm" variant="ghost" className="h-7 text-xs text-primary" onClick={() => navigate(`/r/${r.slug}`)}>Profile</Button>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}

      {/* Feature cards */}
      <h2 className="text-lg font-bold mb-4">Platform Features</h2>
      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
        {featureCards.map(({ icon: Icon, title, desc, plan: reqPlan }) => {
          const locked = reqPlan === 'basic' ? !planHas(plan, 'analytics') : reqPlan === 'premium' ? !planHas(plan, 'themeColor') : false;
          return (
            <div key={title} className={`p-3 border border-border rounded bg-card relative ${locked ? 'plan-locked' : ''}`}>
              {locked && (
                <div className="absolute inset-0 flex items-center justify-center z-20 flex-col gap-1">
                  <Badge variant="secondary" className="text-xs">{reqPlan === 'basic' ? 'Basic' : 'Premium'}</Badge>
                </div>
              )}
              <div className="w-8 h-8 rounded bg-primary/10 flex items-center justify-center mb-2">
                <Icon size={16} strokeWidth={2} className="text-primary" />
              </div>
              <p className="text-sm font-semibold">{title}</p>
              <p className="text-xs text-muted-foreground mt-0.5">{desc}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
```
New String: ```
  return (
    <div className="p-4 md:p-6 max-w-5xl mx-auto animate-fade-up">
      {/* Welcome banner */}
      <div className="mb-6 p-5 rounded-2xl bg-gradient-to-br from-primary/10 via-primary/5 to-transparent border border-primary/20">
        <div className="flex items-center justify-between gap-3 flex-wrap">
          <div>
            <h1 className="text-2xl font-bold text-balance">Welcome back, {owner.name || 'Owner'} 👋</h1>
            <p className="text-muted-foreground text-sm mt-1">
              Plan: <Badge variant={plan === 'free' ? 'secondary' : 'default'} className="ml-1 capitalize rounded-full">{plan}</Badge>
              {owner.planExpiresAt && plan !== 'free' && (
                <span className="ml-2 text-xs opacity-70">· Expires {new Date(owner.planExpiresAt).toLocaleDateString()}</span>
              )}
            </p>
          </div>
          {plan === 'free' && (
            <Button size="sm" className="gap-1.5 rounded-xl press-active shrink-0" onClick={() => navigate('/owner/profile')}>
              <TrendingUp size={13} strokeWidth={2} /> Upgrade Plan
            </Button>
          )}
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-3 gap-3 md:gap-4 mb-8">
        {[
          { label: 'Restaurants', value: restaurants.length, icon: Store, action: () => navigate('/owner/restaurants') },
          { label: 'Total Orders', value: orders.length, icon: ShoppingBag, action: null },
          { label: 'Revenue', value: `₹${revenue.toFixed(0)}`, icon: TrendingUp, action: null },
        ].map(({ label, value, icon: Icon, action }) => (
          <Card
            key={label}
            className={`rounded-2xl border-border/60 h-full ${action ? 'cursor-pointer hover:shadow-md hover:border-primary/20 transition-all duration-200' : ''}`}
            onClick={() => action?.()}
          >
            <CardContent className="p-4 flex flex-col items-start gap-2">
              <div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
                <Icon size={17} strokeWidth={2} className="text-primary" />
              </div>
              <div>
                <p className="text-xl md:text-2xl font-bold leading-none">{value}</p>
                <p className="text-xs text-muted-foreground mt-1">{label}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Your Restaurants */}
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-lg font-bold">Your Restaurants</h2>
        <Button size="sm" className="gap-1.5 rounded-xl press-active" onClick={() => navigate('/owner/restaurants/create')}>
          <Plus size={14} strokeWidth={2} /> New
        </Button>
      </div>

      {restaurants.length === 0 ? (
        <Card className="mb-8 rounded-2xl border-dashed border-border/60">
          <CardContent className="p-8 text-center">
            <UtensilsCrossed size={36} strokeWidth={1.5} className="mx-auto mb-3 text-muted-foreground opacity-40" />
            <p className="font-medium">No restaurants yet</p>
            <p className="text-sm text-muted-foreground mt-1">Create your first restaurant to start accepting orders</p>
            <Button className="mt-4 rounded-xl press-active" onClick={() => navigate('/owner/restaurants/create')}>
              <Plus size={14} strokeWidth={2} className="mr-1.5" /> Create Restaurant
            </Button>
          </CardContent>
        </Card>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
          {restaurants.map((r, i) => {
            const rOrders = orderStore.getByRestaurant(r.id);
            const items = menuStore.getByRestaurant(r.id);
            const pendingCount = rOrders.filter((o) => o.status === 'pending').length;
            return (
              <Card key={r.id} className={`rounded-2xl border-border/60 hover:shadow-md hover:border-primary/20 transition-all duration-200 h-full animate-fade-up stagger-${Math.min(i + 1, 9)}`}>
                <CardContent className="p-4 flex flex-col h-full">
                  <div className="flex gap-3 mb-4">
                    <div className="w-12 h-12 rounded-xl overflow-hidden bg-muted flex items-center justify-center shrink-0">
                      {r.logo
                        ? <img src={r.logo} alt={r.name} className="w-full h-full object-cover" />
                        : <span className="font-bold text-muted-foreground">{r.name[0]}</span>}
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-start gap-2">
                        <p className="font-semibold truncate flex-1">{r.name}</p>
                        {r.suspended && <Badge variant="destructive" className="text-xs shrink-0 rounded-full">Suspended</Badge>}
                        {pendingCount > 0 && (
                          <Badge className="text-xs shrink-0 rounded-full bg-yellow-500 text-white">{pendingCount} new</Badge>
                        )}
                      </div>
                      <p className="text-xs text-muted-foreground">{r.location}</p>
                      <p className="text-xs text-muted-foreground">{items.length} items · {rOrders.length} orders</p>
                    </div>
                  </div>
                  <div className="flex flex-wrap gap-2 mt-auto">
                    <Button size="sm" className="h-8 gap-1.5 rounded-xl press-active" onClick={() => navigate(`/owner/restaurants/${r.id}/orders`)}>
                      <ClipboardList size={12} strokeWidth={2} /> Orders
                    </Button>
                    <Button size="sm" variant="outline" className="h-8 gap-1.5 rounded-xl press-active" onClick={() => navigate(`/owner/restaurants/${r.id}/menu`)}>
                      <UtensilsCrossed size={12} strokeWidth={2} /> Menu
                    </Button>
                    <Button size="sm" variant="outline" className="h-8 gap-1.5 rounded-xl press-active" onClick={() => navigate(`/owner/restaurants/${r.id}/qr`)}>
                      <QrCode size={12} strokeWidth={2} /> QR
                    </Button>
                    <Button size="sm" variant="ghost" className="h-8 text-xs text-primary rounded-xl press-active" onClick={() => navigate(`/r/${r.slug}`)}>
                      View
                    </Button>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}

      {/* Feature cards */}
      <h2 className="text-lg font-bold mb-4">Platform Features</h2>
      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
        {featureCards.map(({ icon: Icon, title, desc, plan: reqPlan }) => {
          const locked = reqPlan === 'basic' ? !planHas(plan, 'analytics') : reqPlan === 'premium' ? !planHas(plan, 'themeColor') : false;
          return (
            <div
              key={title}
              className={`p-4 border rounded-2xl bg-card relative overflow-hidden transition-all duration-200 ${locked ? 'opacity-60' : 'border-border/60 hover:border-primary/20 hover:shadow-sm'}`}
            >
              {locked && (
                <div className="absolute top-2 right-2 z-10">
                  <div className="flex items-center gap-1 bg-muted rounded-full px-2 py-0.5 text-xs text-muted-foreground font-medium">
                    <Lock size={9} strokeWidth={2} /> {reqPlan === 'basic' ? 'Basic' : 'Premium'}
                  </div>
                </div>
              )}
              <div className="w-8 h-8 rounded-xl bg-primary/10 flex items-center justify-center mb-3">
                <Icon size={15} strokeWidth={2} className="text-primary" />
              </div>
              <p className="text-sm font-semibold">{title}</p>
              <p className="text-xs text-muted-foreground mt-0.5 text-pretty">{desc}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
```

</action>
<observation>
The file /workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerDashboard.tsx has been edited.

</observation>
<action>
**FileEditAction**
Path: [/workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerRestaurantsPage.tsx]
Thought: 
Command: str_replace
Old String: ```
  return (
    <div className="p-4 md:p-6 max-w-4xl mx-auto">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold">My Restaurants</h1>
          <p className="text-sm text-muted-foreground mt-0.5">
            {restaurants.length} / {maxRestaurants(plan) === Infinity ? '∞' : maxRestaurants(plan)} used
          </p>
        </div>
        <Button
          className="gap-2"
          onClick={() => canCreate ? navigate('/owner/restaurants/create') : null}
          disabled={!canCreate}
          title={!canCreate ? `Upgrade your plan to add more restaurants` : ''}
        >
          <Plus size={16} strokeWidth={2} /> New Restaurant
        </Button>
      </div>

      {!canCreate && (
        <div className="mb-4 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded text-sm text-yellow-700 dark:text-yellow-400">
          You've reached the limit for your {plan} plan. <button className="underline font-medium" onClick={() => navigate('/owner/profile')}>Upgrade</button> to add more restaurants.
        </div>
      )}

      {restaurants.length === 0 ? (
        <div className="text-center py-20 border border-dashed rounded">
          <UtensilsCrossed size={40} strokeWidth={1.5} className="mx-auto mb-3 text-muted-foreground opacity-40" />
          <p className="font-medium">No restaurants yet</p>
          <Button className="mt-4" onClick={() => navigate('/owner/restaurants/create')}>Create your first restaurant</Button>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {restaurants.map((r) => {
            const items = menuStore.getByRestaurant(r.id);
            const orders = orderStore.getByRestaurant(r.id);
            const pending = orders.filter((o) => o.status === 'pending').length;
            return (
              <Card key={r.id} className="h-full">
                <CardContent className="p-4">
                  <div className="flex gap-3 mb-4">
                    <div className="w-14 h-14 rounded overflow-hidden bg-muted flex items-center justify-center shrink-0">
                      {r.logo
                        ? <img src={r.logo} alt={r.name} className="w-full h-full object-cover" />
                        : <span className="font-bold text-lg text-muted-foreground">{r.name[0]}</span>}
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-start gap-2">
                        <p className="font-semibold flex-1 truncate">{r.name}</p>
                        {r.suspended && <Badge variant="destructive" className="text-xs shrink-0">Suspended</Badge>}
                        {pending > 0 && <Badge className="text-xs shrink-0 bg-yellow-500 text-white">{pending} new</Badge>}
                      </div>
                      <p className="text-xs text-muted-foreground">{r.location}</p>
                      <p className="text-xs text-muted-foreground">{items.length} items · {orders.length} orders</p>
                    </div>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    <Button size="sm" className="h-8 gap-1.5" onClick={() => navigate(`/owner/restaurants/${r.id}/orders`)}>
                      <ClipboardList size={13} strokeWidth={2} /> Orders
                    </Button>
                    <Button size="sm" variant="outline" className="h-8 gap-1.5" onClick={() => navigate(`/owner/restaurants/${r.id}/menu`)}>
                      <UtensilsCrossed size={13} strokeWidth={2} /> Menu
                    </Button>
                    <Button size="sm" variant="outline" className="h-8 gap-1.5" onClick={() => navigate(`/owner/restaurants/${r.id}/qr`)}>
                      <QrCode size={13} strokeWidth={2} /> QR
                    </Button>
                    <Button size="sm" variant="outline" className="h-8 gap-1.5" onClick={() => navigate(`/owner/restaurants/${r.id}/edit`)}>
                      <Pencil size={13} strokeWidth={2} /> Edit
                    </Button>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}
    </div>
  );
```
New String: ```
  return (
    <div className="p-4 md:p-6 max-w-4xl mx-auto animate-fade-up">
      <div className="flex items-center justify-between mb-6 gap-3">
        <div>
          <h1 className="text-2xl font-bold">My Restaurants</h1>
          <p className="text-sm text-muted-foreground mt-0.5">
            {restaurants.length} / {maxRestaurants(plan) === Infinity ? '∞' : maxRestaurants(plan)} used
          </p>
        </div>
        <Button
          className="gap-2 rounded-xl press-active shrink-0"
          onClick={() => canCreate ? navigate('/owner/restaurants/create') : undefined}
          disabled={!canCreate}
        >
          <Plus size={16} strokeWidth={2} /> New Restaurant
        </Button>
      </div>

      {!canCreate && (
        <div className="mb-5 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-xl text-sm text-yellow-700 dark:text-yellow-400">
          You've reached the limit for your {plan} plan.{' '}
          <button className="underline font-medium" onClick={() => navigate('/owner/profile')}>Upgrade</button> to add more.
        </div>
      )}

      {restaurants.length === 0 ? (
        <div className="text-center py-20 border border-dashed rounded-2xl animate-fade-in">
          <UtensilsCrossed size={36} strokeWidth={1.5} className="mx-auto mb-3 text-muted-foreground opacity-40" />
          <p className="font-medium">No restaurants yet</p>
          <Button className="mt-4 rounded-xl press-active" onClick={() => navigate('/owner/restaurants/create')}>
            <Plus size={14} strokeWidth={2} className="mr-1.5" /> Create your first restaurant
          </Button>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {restaurants.map((r, i) => {
            const items = menuStore.getByRestaurant(r.id);
            const orders = orderStore.getByRestaurant(r.id);
            const pending = orders.filter((o) => o.status === 'pending').length;
            return (
              <Card key={r.id} className={`h-full rounded-2xl border-border/60 hover:shadow-md hover:border-primary/20 transition-all duration-200 animate-fade-up stagger-${Math.min(i + 1, 9)}`}>
                <CardContent className="p-4 flex flex-col h-full">
                  <div className="flex gap-3 mb-4">
                    <div className="w-14 h-14 rounded-xl overflow-hidden bg-muted flex items-center justify-center shrink-0">
                      {r.logo
                        ? <img src={r.logo} alt={r.name} className="w-full h-full object-cover" />
                        : <span className="font-bold text-lg text-muted-foreground">{r.name[0]}</span>}
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-start gap-2">
                        <p className="font-semibold flex-1 truncate">{r.name}</p>
                        {r.suspended && <Badge variant="destructive" className="text-xs shrink-0 rounded-full">Suspended</Badge>}
                        {pending > 0 && <Badge className="text-xs shrink-0 rounded-full bg-yellow-500 text-white">{pending} new</Badge>}
                      </div>
                      <p className="text-xs text-muted-foreground">{r.location}</p>
                      <p className="text-xs text-muted-foreground">{items.length} items · {orders.length} orders</p>
                    </div>
                  </div>
                  <div className="flex flex-wrap gap-2 mt-auto">
                    <Button size="sm" className="h-8 gap-1.5 rounded-xl press-active" onClick={() => navigate(`/owner/restaurants/${r.id}/orders`)}>
                      <ClipboardList size={12} strokeWidth={2} /> Orders
                    </Button>
                    <Button size="sm" variant="outline" className="h-8 gap-1.5 rounded-xl press-active" onClick={() => navigate(`/owner/restaurants/${r.id}/menu`)}>
                      <UtensilsCrossed size={12} strokeWidth={2} /> Menu
                    </Button>
                    <Button size="sm" variant="outline" className="h-8 gap-1.5 rounded-xl press-active" onClick={() => navigate(`/owner/restaurants/${r.id}/qr`)}>
                      <QrCode size={12} strokeWidth={2} /> QR
                    </Button>
                    <Button size="sm" variant="outline" className="h-8 gap-1.5 rounded-xl press-active" onClick={() => navigate(`/owner/restaurants/${r.id}/edit`)}>
                      <Pencil size={12} strokeWidth={2} /> Edit
                    </Button>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}
    </div>
  );
```

</action>
<observation>
The file /workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerRestaurantsPage.tsx has been edited.

</observation>
<action>
**FileEditAction**
Path: [/workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerProfilePage.tsx]
Thought: 
Command: str_replace
Old String: ```
  return (
    <div className="p-4 md:p-6 max-w-2xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">Profile</h1>

      {/* Profile card */}
      <Card className="mb-6">
        <CardHeader><CardTitle className="text-base">Your Details</CardTitle></CardHeader>
        <CardContent className="space-y-4">
          <div>
            <Label>Email</Label>
            <p className="text-sm text-muted-foreground mt-1">{owner.email}</p>
          </div>
          <div>
            <Label htmlFor="pname">Display Name</Label>
            <Input id="pname" value={name} onChange={(e) => setName(e.target.value)} className="mt-1" />
          </div>
          <div>
            <Label htmlFor="pphone">Phone</Label>
            <Input id="pphone" value={phone} onChange={(e) => setPhone(e.target.value)} className="mt-1" maxLength={10} />
          </div>
          <Button onClick={handleSave} disabled={saving}>{saving ? 'Saving...' : 'Save Changes'}</Button>
        </CardContent>
      </Card>

      {/* Plan */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="text-base flex items-center gap-2">
            Current Plan
            <Badge variant={plan === 'free' ? 'secondary' : 'default'} className="capitalize">{plan}</Badge>
            {owner.planExpiresAt && plan !== 'free' && (
              <span className="text-xs text-muted-foreground font-normal">Expires {new Date(owner.planExpiresAt).toLocaleDateString()}</span>
            )}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            {plans.map((p) => (
              <div key={p.key} className={`p-3 rounded border text-sm ${plan === p.key ? 'border-primary bg-primary/5' : 'border-border'}`}>
                <div className="flex justify-between items-center mb-2">
                  <p className="font-semibold">{p.label}</p>
                  <span className="text-xs text-muted-foreground">{p.price}</span>
                </div>
                {p.key !== 'free' && plan !== p.key && (
                  <Button size="sm" className="w-full mb-2 h-7 text-xs" onClick={() => handleUpgradePlan(p.label)}>
                    Upgrade
                  </Button>
                )}
                {plan === p.key && <p className="text-xs text-primary font-medium mb-2">Current</p>}
                <ul className="space-y-0.5 text-xs text-muted-foreground">
                  {p.features.map((f) => <li key={f}>• {f}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Danger zone */}
      <Card className="border-destructive/30">
        <CardHeader><CardTitle className="text-base text-destructive">Danger Zone</CardTitle></CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground mb-4">Deleting your account will remove all your restaurants, menus, and data permanently.</p>
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button variant="destructive">Delete Account</Button>
            </AlertDialogTrigger>
            <AlertDialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg">
              <AlertDialogHeader>
                <AlertDialogTitle>Delete Account?</AlertDialogTitle>
                <AlertDialogDescription>This will permanently delete your account and all restaurants. This cannot be undone.</AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Delete My Account</AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </CardContent>
      </Card>
    </div>
  );
```
New String: ```
  return (
    <div className="p-4 md:p-6 max-w-2xl mx-auto animate-fade-up">
      <h1 className="text-2xl font-bold mb-6">Profile</h1>

      {/* Profile card */}
      <Card className="mb-5 rounded-2xl border-border/60">
        <CardHeader className="pb-3"><CardTitle className="text-base">Your Details</CardTitle></CardHeader>
        <CardContent className="space-y-4 pt-0">
          <div>
            <Label className="text-sm font-normal text-muted-foreground">Email</Label>
            <p className="text-sm mt-1 font-medium">{owner.email}</p>
          </div>
          <div>
            <Label htmlFor="pname" className="text-sm font-normal text-muted-foreground">Display Name</Label>
            <Input id="pname" value={name} onChange={(e) => setName(e.target.value)} className="mt-1 rounded-xl" />
          </div>
          <div>
            <Label htmlFor="pphone" className="text-sm font-normal text-muted-foreground">Phone</Label>
            <Input id="pphone" value={phone} onChange={(e) => setPhone(e.target.value)} className="mt-1 rounded-xl" maxLength={10} inputMode="numeric" />
          </div>
          <Button className="rounded-xl press-active" onClick={handleSave} disabled={saving}>{saving ? 'Saving...' : 'Save Changes'}</Button>
        </CardContent>
      </Card>

      {/* Plans */}
      <Card className="mb-5 rounded-2xl border-border/60">
        <CardHeader className="pb-3">
          <CardTitle className="text-base flex items-center gap-2">
            Plan
            <Badge variant={plan === 'free' ? 'secondary' : 'default'} className="capitalize rounded-full">{plan}</Badge>
            {owner.planExpiresAt && plan !== 'free' && (
              <span className="text-xs text-muted-foreground font-normal">· Expires {new Date(owner.planExpiresAt).toLocaleDateString()}</span>
            )}
          </CardTitle>
        </CardHeader>
        <CardContent className="pt-0">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            {plans.map((p) => (
              <div key={p.key} className={`p-4 rounded-xl border text-sm flex flex-col ${plan === p.key ? 'border-primary bg-primary/5' : 'border-border/60'}`}>
                <div className="flex justify-between items-center mb-3">
                  <p className="font-semibold">{p.label}</p>
                  <span className="text-xs font-medium text-muted-foreground">{p.price}</span>
                </div>
                {p.key !== 'free' && plan !== p.key && (
                  <Button size="sm" className="w-full mb-3 h-8 text-xs rounded-xl press-active" onClick={() => handleUpgradePlan(p.label)}>
                    Upgrade via WhatsApp
                  </Button>
                )}
                {plan === p.key && <p className="text-xs text-primary font-semibold mb-2">✓ Current Plan</p>}
                <ul className="space-y-1 text-xs text-muted-foreground mt-auto">
                  {p.features.map((f) => <li key={f} className="flex items-center gap-1"><span className="text-primary opacity-60">·</span> {f}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Danger zone */}
      <Card className="rounded-2xl border-destructive/30">
        <CardHeader className="pb-3"><CardTitle className="text-base text-destructive">Danger Zone</CardTitle></CardHeader>
        <CardContent className="pt-0">
          <p className="text-sm text-muted-foreground mb-4">This will permanently delete your account, all restaurants and data.</p>
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button variant="destructive" className="rounded-xl press-active">Delete Account</Button>
            </AlertDialogTrigger>
            <AlertDialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg rounded-3xl">
              <AlertDialogHeader>
                <AlertDialogTitle>Delete Account?</AlertDialogTitle>
                <AlertDialogDescription>This will permanently delete your account and all restaurants. This cannot be undone.</AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Delete My Account</AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </CardContent>
      </Card>
    </div>
  );
```

</action>
<observation>
The file /workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerProfilePage.tsx has been edited.

</observation>
<action>
**FileEditAction**
Path: [/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminDashboard.tsx]
Thought: Now redesign all 4 admin pages in parallel:
Command: str_replace
Old String: ```
import { useNavigate } from 'react-router-dom';
import { Store, Users, Star, ShoppingBag, TrendingUp } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { restaurantStore, ownerStore, orderStore, reviewStore } from '@/store';

export default function AdminDashboard() {
  const navigate = useNavigate();
  const restaurants = restaurantStore.getAll();
  const owners = ownerStore.getAll();
  const orders = orderStore.getAll();
  const reviews = reviewStore.getAll();
  const revenue = orders.filter((o) => o.status === 'completed').reduce((s, o) => s + o.total, 0);

  const stats = [
    { label: 'Restaurants', value: restaurants.length, icon: Store, action: () => navigate('/admin1/restaurants') },
    { label: 'Owners', value: owners.length, icon: Users, action: () => navigate('/admin1/owners') },
    { label: 'Total Orders', value: orders.length, icon: ShoppingBag, action: null },
    { label: 'Reviews', value: reviews.length, icon: Star, action: () => navigate('/admin1/reviews') },
    { label: 'Total Revenue', value: `₹${revenue.toFixed(0)}`, icon: TrendingUp, action: null },
  ];

  return (
    <div className="p-4 md:p-6 max-w-5xl mx-auto">
      <h1 className="text-2xl font-bold mb-2">Admin Dashboard</h1>
      <p className="text-muted-foreground text-sm mb-8">Platform overview</p>

      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-8">
        {stats.map(({ label, value, icon: Icon, action }) => (
          <Card key={label} className={`${action ? 'cursor-pointer hover:shadow-md transition-shadow' : ''}`} onClick={() => action?.()}>
            <CardContent className="p-4 text-center">
              <Icon size={20} strokeWidth={2} className="mx-auto mb-2 text-primary" />
              <p className="text-2xl font-bold">{value}</p>
              <p className="text-xs text-muted-foreground mt-0.5">{label}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {[
          { title: 'Manage Restaurants', desc: 'Suspend, reactivate, assign plans', path: '/admin1/restaurants' },
          { title: 'Manage Owners', desc: 'View owners and their plans', path: '/admin1/owners' },
          { title: 'Moderate Reviews', desc: 'Delete inappropriate reviews', path: '/admin1/reviews' },
          { title: 'Site Settings', desc: 'Logo, name, support contact, maintenance', path: '/admin1/settings' },
        ].map(({ title, desc, path }) => (
          <Card key={title} className="cursor-pointer hover:shadow-md transition-shadow" onClick={() => navigate(path)}>
            <CardContent className="p-4 flex items-center justify-between">
              <div>
                <p className="font-semibold">{title}</p>
                <p className="text-sm text-muted-foreground">{desc}</p>
              </div>
              <Button size="sm" variant="outline" onClick={() => navigate(path)}>Open</Button>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
```
New String: ```
import { useNavigate } from 'react-router-dom';
import { Store, Users, Star, ShoppingBag, TrendingUp, Settings, ChevronRight } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { restaurantStore, ownerStore, orderStore, reviewStore } from '@/store';

export default function AdminDashboard() {
  const navigate = useNavigate();
  const restaurants = restaurantStore.getAll();
  const owners = ownerStore.getAll();
  const orders = orderStore.getAll();
  const reviews = reviewStore.getAll();
  const revenue = orders.filter((o) => o.status === 'completed').reduce((s, o) => s + o.total, 0);

  const stats = [
    { label: 'Restaurants', value: restaurants.length, icon: Store, action: () => navigate('/admin1/restaurants') },
    { label: 'Owners', value: owners.length, icon: Users, action: () => navigate('/admin1/owners') },
    { label: 'Total Orders', value: orders.length, icon: ShoppingBag, action: null },
    { label: 'Reviews', value: reviews.length, icon: Star, action: () => navigate('/admin1/reviews') },
    { label: 'Revenue', value: `₹${revenue.toFixed(0)}`, icon: TrendingUp, action: null },
  ];

  const quickLinks = [
    { title: 'Manage Restaurants', desc: 'Suspend, reactivate, assign plans', path: '/admin1/restaurants', icon: Store },
    { title: 'Manage Owners', desc: 'View owners and their plans', path: '/admin1/owners', icon: Users },
    { title: 'Moderate Reviews', desc: 'Delete inappropriate reviews', path: '/admin1/reviews', icon: Star },
    { title: 'Site Settings', desc: 'Logo, name, support contact, maintenance', path: '/admin1/settings', icon: Settings },
  ];

  return (
    <div className="p-4 md:p-6 max-w-5xl mx-auto animate-fade-up">
      <h1 className="text-2xl font-bold mb-1">Admin Dashboard</h1>
      <p className="text-muted-foreground text-sm mb-8">Platform overview</p>

      {/* Stats grid */}
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 mb-8">
        {stats.map(({ label, value, icon: Icon, action }, i) => (
          <Card
            key={label}
            className={`rounded-2xl border-border/60 h-full animate-fade-up stagger-${Math.min(i + 1, 9)} ${action ? 'cursor-pointer hover:shadow-md hover:border-primary/20 transition-all duration-200' : ''}`}
            onClick={() => action?.()}
          >
            <CardContent className="p-4 flex flex-col items-start gap-2">
              <div className="w-8 h-8 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
                <Icon size={15} strokeWidth={2} className="text-primary" />
              </div>
              <div>
                <p className="text-xl font-bold leading-none">{value}</p>
                <p className="text-xs text-muted-foreground mt-1">{label}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Quick links */}
      <h2 className="text-base font-semibold mb-3 text-muted-foreground">Quick Actions</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        {quickLinks.map(({ title, desc, path, icon: Icon }, i) => (
          <Card
            key={title}
            className={`rounded-2xl border-border/60 cursor-pointer hover:shadow-md hover:border-primary/20 transition-all duration-200 animate-fade-up stagger-${Math.min(i + 1, 4)}`}
            onClick={() => navigate(path)}
          >
            <CardContent className="p-4 flex items-center gap-4">
              <div className="w-10 h-10 rounded-xl bg-muted flex items-center justify-center shrink-0">
                <Icon size={17} strokeWidth={1.5} className="text-muted-foreground" />
              </div>
              <div className="flex-1 min-w-0">
                <p className="font-semibold text-sm">{title}</p>
                <p className="text-xs text-muted-foreground text-pretty">{desc}</p>
              </div>
              <ChevronRight size={16} strokeWidth={2} className="text-muted-foreground shrink-0" />
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
```

</action>
<observation>
The file /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminDashboard.tsx has been edited.

</observation>
<action>
**FileEditAction**
Path: [/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminRestaurantsPage.tsx]
Thought: 
Command: str_replace
Old String: ```
import { useState, useCallback } from 'react';
import { CheckCircle, XCircle, MapPin, Phone } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
import { restaurantStore, ownerStore, getOwnerPlan } from '@/store';
import { toast } from 'sonner';
```
New String: ```
import { useState, useCallback } from 'react';
import { CheckCircle, XCircle, MapPin, Phone } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
import { restaurantStore, ownerStore, getOwnerPlan } from '@/store';
import { toast } from 'sonner';

export default function AdminRestaurantsPage() {
  const [restaurants, setRestaurants] = useState(() => restaurantStore.getAll());
  const refresh = useCallback(() => setRestaurants(restaurantStore.getAll()), []);

  const toggleSuspend = (id: string, suspended: boolean) => {
    const r = restaurantStore.getById(id);
    if (!r) return;
    restaurantStore.save({ ...r, suspended });
    refresh();
    toast.success(suspended ? 'Restaurant suspended' : 'Restaurant reactivated');
  };

  const setPlan = (ownerId: string, plan: 'free' | 'basic' | 'premium') => {
    const owner = ownerStore.getById(ownerId);
    if (!owner) return;
    const expiry = plan === 'free' ? undefined : new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString();
    ownerStore.save({ ...owner, plan, planExpiresAt: expiry });
    const current = ownerStore.getCurrent();
    if (current?.id === ownerId) ownerStore.setCurrent({ ...current, plan, planExpiresAt: expiry });
    refresh();
    toast.success(`Plan updated to ${plan}`);
  };

  return (
    <div className="p-4 md:p-6 max-w-5xl mx-auto animate-fade-up">
      <h1 className="text-2xl font-bold mb-6">Restaurants</h1>

      {restaurants.length === 0 ? (
        <div className="text-center py-16 border border-dashed rounded-2xl text-muted-foreground animate-fade-in">
          No restaurants registered yet.
        </div>
      ) : (
        <div className="space-y-3">
          {restaurants.map((r, i) => {
            const owner = ownerStore.getById(r.ownerId);
            const plan = owner ? getOwnerPlan(owner) : 'free';
            return (
              <Card key={r.id} className={`rounded-2xl border-border/60 hover:shadow-sm transition-all duration-200 animate-fade-up stagger-${Math.min(i + 1, 9)}`}>
                <CardContent className="p-4">
                  <div className="flex items-start gap-3 flex-wrap">
                    <div className="w-12 h-12 rounded-xl overflow-hidden bg-muted flex items-center justify-center shrink-0">
                      {r.logo
                        ? <img src={r.logo} alt={r.name} className="w-full h-full object-cover" />
                        : <span className="font-bold text-muted-foreground">{r.name[0]}</span>}
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 flex-wrap">
                        <p className="font-semibold">{r.name}</p>
                        <Badge variant={r.suspended ? 'destructive' : 'secondary'} className="text-xs rounded-full">
                          {r.suspended ? 'Suspended' : 'Active'}
                        </Badge>
                        <Badge variant="outline" className="text-xs capitalize rounded-full">{plan}</Badge>
                      </div>
                      <div className="flex items-center gap-3 text-xs text-muted-foreground mt-0.5 flex-wrap">
                        <span className="flex items-center gap-1"><MapPin size={10} strokeWidth={2} />{r.location}</span>
                        <span className="flex items-center gap-1"><Phone size={10} strokeWidth={2} />{r.phone}</span>
                        {owner && <span>Owner: {owner.email}</span>}
                      </div>
                    </div>
                    <div className="flex items-center gap-2 flex-wrap shrink-0">
                      <Select value={plan} onValueChange={(v) => setPlan(r.ownerId, v as 'free' | 'basic' | 'premium')}>
                        <SelectTrigger className="w-28 h-8 text-xs rounded-xl"><SelectValue /></SelectTrigger>
                        <SelectContent>
                          <SelectItem value="free">Free</SelectItem>
                          <SelectItem value="basic">Basic</SelectItem>
                          <SelectItem value="premium">Premium</SelectItem>
                        </SelectContent>
                      </Select>
                      {r.suspended ? (
                        <Button size="sm" variant="outline" className="h-8 gap-1.5 text-xs rounded-xl press-active" onClick={() => toggleSuspend(r.id, false)}>
                          <CheckCircle size={12} strokeWidth={2} /> Reactivate
                        </Button>
                      ) : (
                        <AlertDialog>
                          <AlertDialogTrigger asChild>
                            <Button size="sm" variant="destructive" className="h-8 gap-1.5 text-xs rounded-xl press-active">
                              <XCircle size={12} strokeWidth={2} /> Suspend
                            </Button>
                          </AlertDialogTrigger>
                          <AlertDialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg rounded-3xl">
                            <AlertDialogHeader><AlertDialogTitle>Suspend Restaurant?</AlertDialogTitle><AlertDialogDescription>This will hide the restaurant from public view.</AlertDialogDescription></AlertDialogHeader>
                            <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => toggleSuspend(r.id, true)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Suspend</AlertDialogAction></AlertDialogFooter>
                          </AlertDialogContent>
                        </AlertDialog>
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}
    </div>
  );
}
```

</action>
<observation>
The file /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminRestaurantsPage.tsx has been edited.

</observation>
<action>
**FileEditAction**
Path: [/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminOwnersPage.tsx]
Thought: 
Command: str_replace
Old String: ```
import { ownerStore, restaurantStore, getOwnerPlan } from '@/store';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';

export default function AdminOwnersPage() {
  const owners = ownerStore.getAll();

  return (
    <div className="p-4 md:p-6 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">Owners</h1>
      {owners.length === 0 ? (
        <div className="text-center py-16 border border-dashed rounded text-muted-foreground">No registered owners.</div>
      ) : (
        <div className="space-y-3">
          {owners.map((owner) => {
            const restaurants = restaurantStore.getByOwner(owner.id);
            const plan = getOwnerPlan(owner);
            return (
              <Card key={owner.id}>
                <CardContent className="p-4">
                  <div className="flex items-start justify-between gap-3 flex-wrap">
                    <div className="min-w-0">
                      <div className="flex items-center gap-2 flex-wrap">
                        <p className="font-semibold">{owner.name || 'Unknown'}</p>
                        <Badge variant={plan === 'free' ? 'secondary' : 'default'} className="text-xs capitalize">{plan}</Badge>
                        {owner.planExpiresAt && plan !== 'free' && (
                          <span className="text-xs text-muted-foreground">exp {new Date(owner.planExpiresAt).toLocaleDateString()}</span>
                        )}
                      </div>
                      <p className="text-sm text-muted-foreground">{owner.email}</p>
                      <p className="text-xs text-muted-foreground">{owner.phone || 'No phone'} · Joined {new Date(owner.createdAt).toLocaleDateString()}</p>
                    </div>
                    <div className="text-sm shrink-0">
                      <p className="font-medium">{restaurants.length} restaurant{restaurants.length !== 1 ? 's' : ''}</p>
                      <div className="text-xs text-muted-foreground space-y-0.5 mt-1">
                        {restaurants.map((r) => (
                          <p key={r.id} className="truncate max-w-40">{r.name} {r.suspended ? '(suspended)' : ''}</p>
                        ))}
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}
    </div>
  );
}
```
New String: ```
import { ownerStore, restaurantStore, getOwnerPlan } from '@/store';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';

export default function AdminOwnersPage() {
  const owners = ownerStore.getAll();

  return (
    <div className="p-4 md:p-6 max-w-4xl mx-auto animate-fade-up">
      <h1 className="text-2xl font-bold mb-6">Owners</h1>
      {owners.length === 0 ? (
        <div className="text-center py-16 border border-dashed rounded-2xl text-muted-foreground animate-fade-in">No registered owners.</div>
      ) : (
        <div className="space-y-3">
          {owners.map((owner, i) => {
            const restaurants = restaurantStore.getByOwner(owner.id);
            const plan = getOwnerPlan(owner);
            return (
              <Card key={owner.id} className={`rounded-2xl border-border/60 animate-fade-up stagger-${Math.min(i + 1, 9)}`}>
                <CardContent className="p-4">
                  <div className="flex items-start justify-between gap-3 flex-wrap">
                    <div className="min-w-0">
                      <div className="flex items-center gap-2 flex-wrap">
                        <p className="font-semibold">{owner.name || 'Unknown'}</p>
                        <Badge variant={plan === 'free' ? 'secondary' : 'default'} className="text-xs capitalize rounded-full">{plan}</Badge>
                        {owner.planExpiresAt && plan !== 'free' && (
                          <span className="text-xs text-muted-foreground">exp {new Date(owner.planExpiresAt).toLocaleDateString()}</span>
                        )}
                      </div>
                      <p className="text-sm text-muted-foreground mt-0.5">{owner.email}</p>
                      <p className="text-xs text-muted-foreground">{owner.phone || 'No phone'} · Joined {new Date(owner.createdAt).toLocaleDateString()}</p>
                    </div>
                    <div className="text-sm shrink-0 text-right">
                      <p className="font-semibold text-foreground">{restaurants.length} restaurant{restaurants.length !== 1 ? 's' : ''}</p>
                      <div className="text-xs text-muted-foreground space-y-0.5 mt-1">
                        {restaurants.map((r) => (
                          <p key={r.id} className="truncate max-w-48">{r.name}{r.suspended ? ' (suspended)' : ''}</p>
                        ))}
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}
    </div>
  );
}
```

</action>
<observation>
The file /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminOwnersPage.tsx has been edited.

</observation>
<action>
**FileEditAction**
Path: [/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminReviewsPage.tsx]
Thought: 
Command: str_replace
Old String: ```
import { useState, useCallback } from 'react';
import { Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
import StarRating from '@/components/common/StarRating';
import { reviewStore, restaurantStore } from '@/store';
import { toast } from 'sonner';
```
New String: ```
import { useState, useCallback } from 'react';
import { Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
import StarRating from '@/components/common/StarRating';
import { reviewStore, restaurantStore } from '@/store';
import { toast } from 'sonner';

export default function AdminReviewsPage() {
  const restaurants = restaurantStore.getAll();
  const [selectedRestaurant, setSelectedRestaurant] = useState('all');
  const [reviews, setReviews] = useState(() => reviewStore.getAll());

  const refresh = useCallback(() => setReviews(reviewStore.getAll()), []);

  const deleteReview = (id: string) => {
    reviewStore.delete(id);
    refresh();
    toast.success('Review deleted');
  };

  const filtered = selectedRestaurant === 'all'
    ? reviews
    : reviews.filter((r) => r.restaurantId === selectedRestaurant);

  const getRestaurantName = (id: string) => restaurantStore.getById(id)?.name ?? 'Unknown';

  return (
    <div className="p-4 md:p-6 max-w-4xl mx-auto animate-fade-up">
      <div className="flex items-center justify-between mb-6 flex-wrap gap-3">
        <h1 className="text-2xl font-bold">Reviews</h1>
        <Select value={selectedRestaurant} onValueChange={setSelectedRestaurant}>
          <SelectTrigger className="w-56 rounded-xl"><SelectValue placeholder="All Restaurants" /></SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Restaurants</SelectItem>
            {restaurants.map((r) => <SelectItem key={r.id} value={r.id}>{r.name}</SelectItem>)}
          </SelectContent>
        </Select>
      </div>

      {filtered.length === 0 ? (
        <div className="text-center py-16 border border-dashed rounded-2xl text-muted-foreground animate-fade-in">No reviews found.</div>
      ) : (
        <div className="space-y-3">
          {[...filtered].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()).map((rev, i) => (
            <Card key={rev.id} className={`rounded-2xl border-border/60 animate-fade-up stagger-${Math.min(i + 1, 9)}`}>
              <CardContent className="p-4">
                <div className="flex items-start justify-between gap-3">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 flex-wrap mb-1">
                      <p className="font-medium text-sm">{rev.reviewerName}</p>
                      <StarRating value={rev.rating} readonly size={13} />
                      <span className="text-xs text-muted-foreground bg-muted rounded-full px-2 py-0.5">{getRestaurantName(rev.restaurantId)}</span>
                    </div>
                    {rev.text && <p className="text-sm text-muted-foreground text-pretty">{rev.text}</p>}
                    <p className="text-xs text-muted-foreground mt-1">{new Date(rev.createdAt).toLocaleString()}</p>
                  </div>
                  <AlertDialog>
                    <AlertDialogTrigger asChild>
                      <Button size="icon" variant="ghost" className="h-8 w-8 rounded-xl text-destructive hover:text-destructive shrink-0">
                        <Trash2 size={14} strokeWidth={2} />
                      </Button>
                    </AlertDialogTrigger>
                    <AlertDialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg rounded-3xl">
                      <AlertDialogHeader><AlertDialogTitle>Delete Review?</AlertDialogTitle><AlertDialogDescription>This will permanently remove this review.</AlertDialogDescription></AlertDialogHeader>
                      <AlertDialogFooter>
                        <AlertDialogCancel>Cancel</AlertDialogCancel>
                        <AlertDialogAction onClick={() => deleteReview(rev.id)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Delete</AlertDialogAction>
                      </AlertDialogFooter>
                    </AlertDialogContent>
                  </AlertDialog>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}
```

</action>
<observation>
The file /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminReviewsPage.tsx has been edited.

</observation>
<action>
**FileEditAction**
Path: [/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminSettingsPage.tsx]
Thought: 
Command: str_replace
Old String: ```
  return (
    <div className="p-4 md:p-6 max-w-2xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">Site Settings</h1>

      <div className="space-y-6">
        {/* Branding */}
        <Card>
          <CardHeader><CardTitle className="text-base">Branding</CardTitle></CardHeader>
          <CardContent className="space-y-4">
            <div>
              <Label>Site Logo</Label>
              <div className="mt-2 flex items-center gap-4">
                <div className="w-16 h-16 rounded border border-border bg-muted flex items-center justify-center overflow-hidden">
                  <img src={settings.logo || LOGO_URL} alt="logo" className="w-full h-full object-contain" />
                </div>
                <div>
                  <Button type="button" variant="outline" size="sm" onClick={() => fileRef.current?.click()}>
                    <Upload size={14} strokeWidth={2} className="mr-1.5" /> Upload Logo
                  </Button>
                  <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={handleLogoUpload} />
                  <p className="text-xs text-muted-foreground mt-1">Stored locally in browser</p>
                </div>
              </div>
            </div>
            <div>
              <Label htmlFor="sname">Site Name</Label>
              <Input id="sname" value={settings.siteName} onChange={(e) => setSettings((s) => ({ ...s, siteName: e.target.value }))} className="mt-1" />
            </div>
          </CardContent>
        </Card>

        {/* Support */}
        <Card>
          <CardHeader><CardTitle className="text-base">Support Contact</CardTitle></CardHeader>
          <CardContent className="space-y-4">
            <div>
              <Label htmlFor="sphone">Support Phone (for WhatsApp plan upgrades)</Label>
              <Input id="sphone" placeholder="10-digit mobile number" value={settings.supportPhone} onChange={(e) => setSettings((s) => ({ ...s, supportPhone: e.target.value }))} className="mt-1" maxLength={10} />
            </div>
            <div>
              <Label htmlFor="semail">Support Email</Label>
              <Input id="semail" type="email" placeholder="support@sqrm.in" value={settings.supportEmail} onChange={(e) => setSettings((s) => ({ ...s, supportEmail: e.target.value }))} className="mt-1" />
            </div>
          </CardContent>
        </Card>

        {/* Maintenance */}
        <Card>
          <CardHeader><CardTitle className="text-base">Maintenance Mode</CardTitle></CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <div>
                <p className="font-medium text-sm">Enable Maintenance Mode</p>
                <p className="text-xs text-muted-foreground mt-0.5">Shows maintenance message to all non-admin visitors</p>
              </div>
              <Switch
                checked={settings.maintenanceMode}
                onCheckedChange={(v) => setSettings((s) => ({ ...s, maintenanceMode: v }))}
              />
            </div>
            {settings.maintenanceMode && (
              <div className="mt-3 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded text-sm text-yellow-700 dark:text-yellow-400">
                Maintenance mode is ON. Visitors will see the maintenance page.
              </div>
            )}
          </CardContent>
        </Card>

        <Button className="w-full" onClick={handleSave} disabled={saving}>
          {saving ? 'Saving...' : 'Save Settings'}
        </Button>
      </div>
    </div>
  );
```
New String: ```
  return (
    <div className="p-4 md:p-6 max-w-2xl mx-auto animate-fade-up">
      <h1 className="text-2xl font-bold mb-6">Site Settings</h1>

      <div className="space-y-5">
        <Card className="rounded-2xl border-border/60">
          <CardHeader className="pb-3"><CardTitle className="text-base">Branding</CardTitle></CardHeader>
          <CardContent className="space-y-4 pt-0">
            <div>
              <Label className="text-sm font-normal text-muted-foreground">Site Logo</Label>
              <div className="mt-2 flex items-center gap-4">
                <div className="w-16 h-16 rounded-xl border border-border bg-muted flex items-center justify-center overflow-hidden">
                  <img src={settings.logo || LOGO_URL} alt="logo" className="w-full h-full object-contain" />
                </div>
                <div>
                  <Button type="button" variant="outline" size="sm" className="rounded-xl" onClick={() => fileRef.current?.click()}>
                    <Upload size={13} strokeWidth={2} className="mr-1.5" /> Upload Logo
                  </Button>
                  <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={handleLogoUpload} />
                  <p className="text-xs text-muted-foreground mt-1.5">Stored locally in browser</p>
                </div>
              </div>
            </div>
            <div>
              <Label htmlFor="sname" className="text-sm font-normal text-muted-foreground">Site Name</Label>
              <Input id="sname" value={settings.siteName} onChange={(e) => setSettings((s) => ({ ...s, siteName: e.target.value }))} className="mt-1 rounded-xl" />
            </div>
          </CardContent>
        </Card>

        <Card className="rounded-2xl border-border/60">
          <CardHeader className="pb-3"><CardTitle className="text-base">Support Contact</CardTitle></CardHeader>
          <CardContent className="space-y-4 pt-0">
            <div>
              <Label htmlFor="sphone" className="text-sm font-normal text-muted-foreground">Support Phone (for WhatsApp plan upgrades)</Label>
              <Input id="sphone" placeholder="10-digit mobile number" value={settings.supportPhone} onChange={(e) => setSettings((s) => ({ ...s, supportPhone: e.target.value }))} className="mt-1 rounded-xl" maxLength={10} />
            </div>
            <div>
              <Label htmlFor="semail" className="text-sm font-normal text-muted-foreground">Support Email</Label>
              <Input id="semail" type="email" placeholder="support@sqrm.in" value={settings.supportEmail} onChange={(e) => setSettings((s) => ({ ...s, supportEmail: e.target.value }))} className="mt-1 rounded-xl" />
            </div>
          </CardContent>
        </Card>

        <Card className="rounded-2xl border-border/60">
          <CardHeader className="pb-3"><CardTitle className="text-base">Maintenance Mode</CardTitle></CardHeader>
          <CardContent className="pt-0">
            <div className="flex items-center justify-between">
              <div>
                <p className="font-medium text-sm">Enable Maintenance Mode</p>
                <p className="text-xs text-muted-foreground mt-0.5">Shows maintenance message to all non-admin visitors</p>
              </div>
              <Switch
                checked={settings.maintenanceMode}
                onCheckedChange={(v) => setSettings((s) => ({ ...s, maintenanceMode: v }))}
              />
            </div>
            {settings.maintenanceMode && (
              <div className="mt-3 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-xl text-sm text-yellow-700 dark:text-yellow-400 animate-fade-in">
                Maintenance mode is ON. Visitors will see the maintenance page.
              </div>
            )}
          </CardContent>
        </Card>

        <Button className="w-full h-11 rounded-xl press-active" onClick={handleSave} disabled={saving}>
          {saving ? 'Saving...' : 'Save Settings'}
        </Button>
      </div>
    </div>
  );
```

</action>
<observation>
The file /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminSettingsPage.tsx has been edited.

</observation>
<action>
AgentThinkAction(thought="Now I need to fix the AdminRestaurantsPage - I only replaced the imports but not the JSX return. Let me check the current state and fix the missing return block replacement (I replaced imports but the old return is still there). Wait - looking at the diff, I ONLY replaced the imports section of AdminRestaurantsPage, I didn't replace the JSX. Let me check and replace properly.", action=<ActionType.THINK: 'think'>)
</action>
<observation>
AgentThinkObservation(content='Your thought has been logged.', observation=<ObservationType.THINK: 'think'>)
</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminRestaurantsPage.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=[1, 30], user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminRestaurantsPage.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminRestaurantsPage.tsx:
     1 import { useState, useCallback } from 'react';
     2 import { CheckCircle, XCircle, MapPin, Phone } from 'lucide-react';
     3 import { Button } from '@/components/ui/button';
     4 import { Card, CardContent } from '@/components/ui/card';
     5 import { Badge } from '@/components/ui/badge';
     6 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     7 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
     8 import { restaurantStore, ownerStore, getOwnerPlan } from '@/store';
     9 import { toast } from 'sonner';
    10 
    11 export default function AdminRestaurantsPage() {
    12   const [restaurants, setRestaurants] = useState(() => restaurantStore.getAll());
    13   const refresh = useCallback(() => setRestaurants(restaurantStore.getAll()), []);
    14 
    15   const toggleSuspend = (id: string, suspended: boolean) => {
    16     const r = restaurantStore.getById(id);
    17     if (!r) return;
    18     restaurantStore.save({ ...r, suspended });
    19     refresh();
    20     toast.success(suspended ? 'Restaurant suspended' : 'Restaurant reactivated');
    21   };
    22 
    23   const setPlan = (ownerId: string, plan: 'free' | 'basic' | 'premium') => {
    24     const owner = ownerStore.getById(ownerId);
    25     if (!owner) return;
    26     const expiry = plan === 'free' ? undefined : new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString();
    27     ownerStore.save({ ...owner, plan, planExpiresAt: expiry });
    28     const current = ownerStore.getCurrent();
    29     if (current?.id === ownerId) ownerStore.setCurrent({ ...current, plan, planExpiresAt: expiry });
    30     refresh();


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminReviewsPage.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=[1, 25], user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminReviewsPage.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminReviewsPage.tsx:
     1 import { useState, useCallback } from 'react';
     2 import { Trash2 } from 'lucide-react';
     3 import { Button } from '@/components/ui/button';
     4 import { Card, CardContent } from '@/components/ui/card';
     5 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     6 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
     7 import StarRating from '@/components/common/StarRating';
     8 import { reviewStore, restaurantStore } from '@/store';
     9 import { toast } from 'sonner';
    10 
    11 export default function AdminReviewsPage() {
    12   const restaurants = restaurantStore.getAll();
    13   const [selectedRestaurant, setSelectedRestaurant] = useState('all');
    14   const [reviews, setReviews] = useState(() => reviewStore.getAll());
    15 
    16   const refresh = useCallback(() => setReviews(reviewStore.getAll()), []);
    17 
    18   const deleteReview = (id: string) => {
    19     reviewStore.delete(id);
    20     refresh();
    21     toast.success('Review deleted');
    22   };
    23 
    24   const filtered = selectedRestaurant === 'all'
    25     ? reviews


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminRestaurantsPage.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=[30, 106], user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminRestaurantsPage.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminRestaurantsPage.tsx:
    30     refresh();
    31     toast.success(`Plan updated to ${plan}`);
    32   };
    33 
    34   return (
    35     <div className="p-4 md:p-6 max-w-5xl mx-auto animate-fade-up">
    36       <h1 className="text-2xl font-bold mb-6">Restaurants</h1>
    37 
    38       {restaurants.length === 0 ? (
    39         <div className="text-center py-16 border border-dashed rounded-2xl text-muted-foreground animate-fade-in">
    40           No restaurants registered yet.
    41         </div>
    42       ) : (
    43         <div className="space-y-3">
    44           {restaurants.map((r, i) => {
    45             const owner = ownerStore.getById(r.ownerId);
    46             const plan = owner ? getOwnerPlan(owner) : 'free';
    47             return (
    48               <Card key={r.id} className={`rounded-2xl border-border/60 hover:shadow-sm transition-all duration-200 animate-fade-up stagger-${Math.min(i + 1, 9)}`}>
    49                 <CardContent className="p-4">
    50                   <div className="flex items-start gap-3 flex-wrap">
    51                     <div className="w-12 h-12 rounded-xl overflow-hidden bg-muted flex items-center justify-center shrink-0">
    52                       {r.logo
    53                         ? <img src={r.logo} alt={r.name} className="w-full h-full object-cover" />
    54                         : <span className="font-bold text-muted-foreground">{r.name[0]}</span>}
    55                     </div>
    56                     <div className="flex-1 min-w-0">
    57                       <div className="flex items-center gap-2 flex-wrap">
    58                         <p className="font-semibold">{r.name}</p>
    59                         <Badge variant={r.suspended ? 'destructive' : 'secondary'} className="text-xs rounded-full">
    60                           {r.suspended ? 'Suspended' : 'Active'}
    61                         </Badge>
    62                         <Badge variant="outline" className="text-xs capitalize rounded-full">{plan}</Badge>
    63                       </div>
    64                       <div className="flex items-center gap-3 text-xs text-muted-foreground mt-0.5 flex-wrap">
    65                         <span className="flex items-center gap-1"><MapPin size={10} strokeWidth={2} />{r.location}</span>
    66                         <span className="flex items-center gap-1"><Phone size={10} strokeWidth={2} />{r.phone}</span>
    67                         {owner && <span>Owner: {owner.email}</span>}
    68                       </div>
    69                     </div>
    70                     <div className="flex items-center gap-2 flex-wrap shrink-0">
    71                       <Select value={plan} onValueChange={(v) => setPlan(r.ownerId, v as 'free' | 'basic' | 'premium')}>
    72                         <SelectTrigger className="w-28 h-8 text-xs rounded-xl"><SelectValue /></SelectTrigger>
    73                         <SelectContent>
    74                           <SelectItem value="free">Free</SelectItem>
    75                           <SelectItem value="basic">Basic</SelectItem>
    76                           <SelectItem value="premium">Premium</SelectItem>
    77                         </SelectContent>
    78                       </Select>
    79                       {r.suspended ? (
    80                         <Button size="sm" variant="outline" className="h-8 gap-1.5 text-xs rounded-xl press-active" onClick={() => toggleSuspend(r.id, false)}>
    81                           <CheckCircle size={12} strokeWidth={2} /> Reactivate
    82                         </Button>
    83                       ) : (
    84                         <AlertDialog>
    85                           <AlertDialogTrigger asChild>
    86                             <Button size="sm" variant="destructive" className="h-8 gap-1.5 text-xs rounded-xl press-active">
    87                               <XCircle size={12} strokeWidth={2} /> Suspend
    88                             </Button>
    89                           </AlertDialogTrigger>
    90                           <AlertDialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg rounded-3xl">
    91                             <AlertDialogHeader><AlertDialogTitle>Suspend Restaurant?</AlertDialogTitle><AlertDialogDescription>This will hide the restaurant from public view.</AlertDialogDescription></AlertDialogHeader>
    92                             <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => toggleSuspend(r.id, true)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Suspend</AlertDialogAction></AlertDialogFooter>
    93                           </AlertDialogContent>
    94                         </AlertDialog>
    95                       )}
    96                     </div>
    97                   </div>
    98                 </CardContent>
    99               </Card>
   100             );
   101           })}
   102         </div>
   103       )}
   104     </div>
   105   );
   106 }


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminReviewsPage.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=[25, 83], user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminReviewsPage.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/admin/AdminReviewsPage.tsx:
    25     ? reviews
    26     : reviews.filter((r) => r.restaurantId === selectedRestaurant);
    27 
    28   const getRestaurantName = (id: string) => restaurantStore.getById(id)?.name ?? 'Unknown';
    29 
    30   return (
    31     <div className="p-4 md:p-6 max-w-4xl mx-auto animate-fade-up">
    32       <div className="flex items-center justify-between mb-6 flex-wrap gap-3">
    33         <h1 className="text-2xl font-bold">Reviews</h1>
    34         <Select value={selectedRestaurant} onValueChange={setSelectedRestaurant}>
    35           <SelectTrigger className="w-56 rounded-xl"><SelectValue placeholder="All Restaurants" /></SelectTrigger>
    36           <SelectContent>
    37             <SelectItem value="all">All Restaurants</SelectItem>
    38             {restaurants.map((r) => <SelectItem key={r.id} value={r.id}>{r.name}</SelectItem>)}
    39           </SelectContent>
    40         </Select>
    41       </div>
    42 
    43       {filtered.length === 0 ? (
    44         <div className="text-center py-16 border border-dashed rounded-2xl text-muted-foreground animate-fade-in">No reviews found.</div>
    45       ) : (
    46         <div className="space-y-3">
    47           {[...filtered].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()).map((rev, i) => (
    48             <Card key={rev.id} className={`rounded-2xl border-border/60 animate-fade-up stagger-${Math.min(i + 1, 9)}`}>
    49               <CardContent className="p-4">
    50                 <div className="flex items-start justify-between gap-3">
    51                   <div className="flex-1 min-w-0">
    52                     <div className="flex items-center gap-2 flex-wrap mb-1">
    53                       <p className="font-medium text-sm">{rev.reviewerName}</p>
    54                       <StarRating value={rev.rating} readonly size={13} />
    55                       <span className="text-xs text-muted-foreground bg-muted rounded-full px-2 py-0.5">{getRestaurantName(rev.restaurantId)}</span>
    56                     </div>
    57                     {rev.text && <p className="text-sm text-muted-foreground text-pretty">{rev.text}</p>}
    58                     <p className="text-xs text-muted-foreground mt-1">{new Date(rev.createdAt).toLocaleString()}</p>
    59                   </div>
    60                   <AlertDialog>
    61                     <AlertDialogTrigger asChild>
    62                       <Button size="icon" variant="ghost" className="h-8 w-8 rounded-xl text-destructive hover:text-destructive shrink-0">
    63                         <Trash2 size={14} strokeWidth={2} />
    64                       </Button>
    65                     </AlertDialogTrigger>
    66                     <AlertDialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg rounded-3xl">
    67                       <AlertDialogHeader><AlertDialogTitle>Delete Review?</AlertDialogTitle><AlertDialogDescription>This will permanently remove this review.</AlertDialogDescription></AlertDialogHeader>
    68                       <AlertDialogFooter>
    69                         <AlertDialogCancel>Cancel</AlertDialogCancel>
    70                         <AlertDialogAction onClick={() => deleteReview(rev.id)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Delete</AlertDialogAction>
    71                       </AlertDialogFooter>
    72                     </AlertDialogContent>
    73                   </AlertDialog>
    74                 </div>
    75               </CardContent>
    76             </Card>
    77           ))}
    78         </div>
    79       )}
    80     </div>
    81   );
    82 }
    83 


</observation>
<action>
AgentThinkAction(thought='Both AdminRestaurantsPage and AdminReviewsPage already have the new redesigned JSX. The imports-only replacement worked because the new content included the full component with the JSX return. Both files look correct. \n\nNow I need to look at the remaining pending work:\n8. Fix shared components: PublicHeader PWA install, OfflineBanner, layout dark mode\n9. Create GUIDE.md\n10. Final lint check\n\nLet me check what shared components need fixing.', action=<ActionType.THINK: 'think'>)
</action>
<observation>
AgentThinkObservation(content='Your thought has been logged.', observation=<ObservationType.THINK: 'think'>)
</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/components/layouts', start=0, end=-1, thought='Both admin pages are correctly updated. Now fix shared components and create GUIDE.md:', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/components/layouts is successful.]
Here's the files and directories up to 2 levels deep in /workspace/app-cg8nvxlqtuyq/src/components/layouts, excluding hidden:
/workspace/app-cg8nvxlqtuyq/src/components/layouts
/workspace/app-cg8nvxlqtuyq/src/components/layouts/PublicLayout.tsx
/workspace/app-cg8nvxlqtuyq/src/components/layouts/PublicFooter.tsx
/workspace/app-cg8nvxlqtuyq/src/components/layouts/AdminLayout.tsx
/workspace/app-cg8nvxlqtuyq/src/components/layouts/PublicHeader.tsx
/workspace/app-cg8nvxlqtuyq/src/components/layouts/OwnerLayout.tsx


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/components/common', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/components/common is successful.]
Here's the files and directories up to 2 levels deep in /workspace/app-cg8nvxlqtuyq/src/components/common, excluding hidden:
/workspace/app-cg8nvxlqtuyq/src/components/common
/workspace/app-cg8nvxlqtuyq/src/components/common/IntersectObserver.tsx
/workspace/app-cg8nvxlqtuyq/src/components/common/StarRating.tsx
/workspace/app-cg8nvxlqtuyq/src/components/common/MaintenancePage.tsx
/workspace/app-cg8nvxlqtuyq/src/components/common/OfflineBanner.tsx
/workspace/app-cg8nvxlqtuyq/src/components/common/Logo.tsx
/workspace/app-cg8nvxlqtuyq/src/components/common/RouteGuard.tsx
/workspace/app-cg8nvxlqtuyq/src/components/common/PageMeta.tsx


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/components/layouts/PublicHeader.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/components/layouts/PublicHeader.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/components/layouts/PublicHeader.tsx:
     1 import { Link } from 'react-router-dom';
     2 import { Sun, Moon, Menu, X, Download, UtensilsCrossed } from 'lucide-react';
     3 import { useState, useEffect } from 'react';
     4 import { Button } from '@/components/ui/button';
     5 import { useTheme } from '@/hooks/useTheme';
     6 import Logo from '@/components/common/Logo';
     7 
     8 interface PublicHeaderProps {
     9   showGetStarted?: boolean;
    10 }
    11 
    12 export default function PublicHeader({ showGetStarted = true }: PublicHeaderProps) {
    13   const { theme, toggle } = useTheme();
    14   const [mobileOpen, setMobileOpen] = useState(false);
    15   const [scrolled, setScrolled] = useState(false);
    16   const [installPrompt, setInstallPrompt] = useState<Event | null>(null);
    17 
    18   useEffect(() => {
    19     const onScroll = () => setScrolled(window.scrollY > 8);
    20     window.addEventListener('scroll', onScroll, { passive: true });
    21     return () => window.removeEventListener('scroll', onScroll);
    22   }, []);
    23 
    24   useEffect(() => {
    25     const handler = (e: Event) => { e.preventDefault(); setInstallPrompt(e); };
    26     window.addEventListener('beforeinstallprompt', handler);
    27     return () => window.removeEventListener('beforeinstallprompt', handler);
    28   }, []);
    29 
    30   const handleInstall = async () => {
    31     if (!installPrompt) return;
    32     (installPrompt as BeforeInstallPromptEvent).prompt?.();
    33     setInstallPrompt(null);
    34   };
    35 
    36   return (
    37     <header className={`sticky top-0 z-40 transition-all duration-200 ${scrolled ? 'bg-background/95 backdrop-blur-md shadow-sm border-b border-border' : 'bg-transparent'}`}>
    38       <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between gap-3">
    39         <Link to="/" className="shrink-0">
    40           <Logo size="sm" />
    41         </Link>
    42 
    43         {/* Desktop nav */}
    44         <nav className="hidden md:flex items-center gap-1">
    45           <Link to="/restaurants" className="px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground rounded-lg hover:bg-secondary transition-colors">
    46             <span className="flex items-center gap-1.5"><UtensilsCrossed size={14} strokeWidth={2} /> Restaurants</span>
    47           </Link>
    48           {installPrompt && (
    49             <Button variant="ghost" size="sm" className="gap-1.5 text-muted-foreground hover:text-foreground" onClick={handleInstall}>
    50               <Download size={14} strokeWidth={2} /> Install App
    51             </Button>
    52           )}
    53           <Button variant="ghost" size="icon" className="rounded-xl text-muted-foreground hover:text-foreground" onClick={toggle} aria-label="Toggle theme">
    54             {theme === 'dark' ? <Sun size={16} strokeWidth={2} /> : <Moon size={16} strokeWidth={2} />}
    55           </Button>
    56           {showGetStarted && (
    57             <Button asChild size="sm" className="rounded-xl ml-1 animate-glow-pulse press-active">
    58               <Link to="/owner/login">Get Started Free</Link>
    59             </Button>
    60           )}
    61         </nav>
    62 
    63         {/* Mobile nav */}
    64         <div className="flex md:hidden items-center gap-1">
    65           {installPrompt && (
    66             <Button variant="ghost" size="icon" className="rounded-xl" onClick={handleInstall} aria-label="Install app">
    67               <Download size={16} strokeWidth={2} />
    68             </Button>
    69           )}
    70           <Button variant="ghost" size="icon" className="rounded-xl" onClick={toggle}>
    71             {theme === 'dark' ? <Sun size={16} strokeWidth={2} /> : <Moon size={16} strokeWidth={2} />}
    72           </Button>
    73           <Button variant="ghost" size="icon" className="rounded-xl" onClick={() => setMobileOpen(!mobileOpen)}>
    74             {mobileOpen ? <X size={18} strokeWidth={2} /> : <Menu size={18} strokeWidth={2} />}
    75           </Button>
    76         </div>
    77       </div>
    78 
    79       {mobileOpen && (
    80         <div className="md:hidden bg-background/95 backdrop-blur-md border-t border-border px-4 py-3 flex flex-col gap-2 animate-slide-down">
    81           <Link
    82             to="/restaurants"
    83             className="flex items-center gap-2 px-3 py-2 rounded-xl text-sm hover:bg-secondary transition-colors"
    84             onClick={() => setMobileOpen(false)}
    85           >
    86             <UtensilsCrossed size={14} strokeWidth={2} /> Browse Restaurants
    87           </Link>
    88           {showGetStarted && (
    89             <Button asChild size="sm" className="w-full rounded-xl press-active" onClick={() => setMobileOpen(false)}>
    90               <Link to="/owner/login">Get Started Free</Link>
    91             </Button>
    92           )}
    93         </div>
    94       )}
    95     </header>
    96   );
    97 }
    98 
    99 // Typed for TypeScript
   100 interface BeforeInstallPromptEvent extends Event {
   101   prompt?: () => void;
   102 }
   103 


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/components/common/OfflineBanner.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/components/common/OfflineBanner.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/components/common/OfflineBanner.tsx:
     1 import { useState, useEffect } from 'react';
     2 import { WifiOff } from 'lucide-react';
     3 
     4 export default function OfflineBanner() {
     5   const [offline, setOffline] = useState(!navigator.onLine);
     6 
     7   useEffect(() => {
     8     const on = () => setOffline(false);
     9     const off = () => setOffline(true);
    10     window.addEventListener('online', on);
    11     window.addEventListener('offline', off);
    12     return () => { window.removeEventListener('online', on); window.removeEventListener('offline', off); };
    13   }, []);
    14 
    15   if (!offline) return null;
    16 
    17   return (
    18     <div className="fixed top-0 left-0 right-0 z-50 bg-destructive text-destructive-foreground text-sm py-2 px-4 flex items-center justify-center gap-2">
    19       <WifiOff size={14} strokeWidth={2} />
    20       You are offline. Showing cached data.
    21     </div>
    22   );
    23 }
    24 


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/components/layouts/OwnerLayout.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/components/layouts/OwnerLayout.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/components/layouts/OwnerLayout.tsx:
     1 import { NavLink, useNavigate, Outlet } from 'react-router-dom';
     2 import { useState } from 'react';
     3 import { LayoutDashboard, UtensilsCrossed, User, LogOut, Sun, Moon, Menu, X, ChevronRight } from 'lucide-react';
     4 import { Button } from '@/components/ui/button';
     5 import Logo from '@/components/common/Logo';
     6 import OfflineBanner from '@/components/common/OfflineBanner';
     7 import { useTheme } from '@/hooks/useTheme';
     8 import { ownerStore } from '@/store';
     9 import { toast } from 'sonner';
    10 
    11 const navItems = [
    12   { to: '/owner/dashboard', icon: LayoutDashboard, label: 'Dashboard' },
    13   { to: '/owner/restaurants', icon: UtensilsCrossed, label: 'My Restaurants' },
    14   { to: '/owner/profile', icon: User, label: 'Profile' },
    15 ];
    16 
    17 export default function OwnerLayout() {
    18   const navigate = useNavigate();
    19   const { theme, toggle } = useTheme();
    20   const owner = ownerStore.getCurrent();
    21   const [sidebarOpen, setSidebarOpen] = useState(false);
    22 
    23   const handleLogout = () => {
    24     ownerStore.setCurrent(null);
    25     toast.success('Logged out successfully');
    26     navigate('/owner/login');
    27   };
    28 
    29   const SidebarContent = () => (
    30     <div className="flex flex-col h-full">
    31       <div className="p-4 border-b border-sidebar-border">
    32         <Logo size="sm" />
    33         <p className="text-xs text-sidebar-foreground/60 mt-1">Owner Panel</p>
    34       </div>
    35       {owner && (
    36         <div className="px-4 py-3 border-b border-sidebar-border flex items-center gap-3">
    37           <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-bold text-sm shrink-0">
    38             {owner.name?.[0]?.toUpperCase() || 'O'}
    39           </div>
    40           <div className="min-w-0">
    41             <p className="text-sm font-medium truncate text-sidebar-foreground">{owner.name || 'Owner'}</p>
    42             <p className="text-xs text-sidebar-foreground/60 truncate">{owner.email}</p>
    43           </div>
    44         </div>
    45       )}
    46       <nav className="flex-1 p-2 space-y-1">
    47         <p className="text-xs font-semibold text-sidebar-foreground/50 px-3 pt-2 pb-1 uppercase tracking-wider">Navigation</p>
    48         {navItems.map(({ to, icon: Icon, label }) => (
    49           <NavLink
    50             key={to}
    51             to={to}
    52             onClick={() => setSidebarOpen(false)}
    53             className={({ isActive }) =>
    54               `flex items-center gap-3 px-3 py-2.5 rounded text-sm transition-colors ${
    55                 isActive
    56                   ? 'bg-sidebar-accent text-sidebar-primary font-semibold'
    57                   : 'text-sidebar-foreground hover:bg-sidebar-accent/50'
    58               }`
    59             }
    60           >
    61             <Icon size={16} strokeWidth={2} />
    62             {label}
    63           </NavLink>
    64         ))}
    65       </nav>
    66       <div className="p-3 border-t border-sidebar-border space-y-1">
    67         <Button variant="ghost" size="sm" onClick={toggle} className="w-full justify-start gap-3 text-sidebar-foreground hover:bg-sidebar-accent/50">
    68           {theme === 'dark' ? <Sun size={16} strokeWidth={2} /> : <Moon size={16} strokeWidth={2} />}
    69           {theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
    70         </Button>
    71         <Button variant="ghost" size="sm" onClick={handleLogout} className="w-full justify-start gap-3 text-destructive hover:bg-destructive/10 hover:text-destructive">
    72           <LogOut size={16} strokeWidth={2} />
    73           Logout
    74         </Button>
    75       </div>
    76     </div>
    77   );
    78 
    79   return (
    80     <div className="flex min-h-screen w-full bg-background">
    81       {/* Desktop sidebar */}
    82       <aside className="hidden lg:flex flex-col w-64 shrink-0 bg-sidebar border-r border-sidebar-border">
    83         <SidebarContent />
    84       </aside>
    85 
    86       {/* Mobile sidebar overlay */}
    87       {sidebarOpen && (
    88         <div className="lg:hidden fixed inset-0 z-50 flex">
    89           <div className="w-64 bg-sidebar flex flex-col border-r border-sidebar-border">
    90             <div className="flex items-center justify-end p-3 border-b border-sidebar-border">
    91               <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(false)}>
    92                 <X size={18} strokeWidth={2} />
    93               </Button>
    94             </div>
    95             <SidebarContent />
    96           </div>
    97           <div className="flex-1 bg-black/40" onClick={() => setSidebarOpen(false)} />
    98         </div>
    99       )}
   100 
   101       <div className="flex-1 min-w-0 flex flex-col">
   102         <OfflineBanner />
   103         {/* Mobile topbar */}
   104         <div className="lg:hidden flex items-center gap-3 px-4 h-14 border-b border-border bg-background sticky top-0 z-30">
   105           <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(true)}>
   106             <Menu size={18} strokeWidth={2} />
   107           </Button>
   108           <Logo size="sm" />
   109         </div>
   110         <main className="flex-1 overflow-x-hidden">
   111           <Outlet />
   112         </main>
   113       </div>
   114     </div>
   115   );
   116 }
   117 
   118 export function OwnerBreadcrumb({ items }: { items: { label: string; to?: string }[] }) {
   119   return (
   120     <div className="flex items-center gap-1 text-sm text-muted-foreground mb-6">
   121       {items.map((item, i) => (
   122         <span key={i} className="flex items-center gap-1">
   123           {i > 0 && <ChevronRight size={14} strokeWidth={2} />}
   124           <span className={i === items.length - 1 ? 'text-foreground font-medium' : ''}>{item.label}</span>
   125         </span>
   126       ))}
   127     </div>
   128   );
   129 }
   130 


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/components/layouts/AdminLayout.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/components/layouts/AdminLayout.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/components/layouts/AdminLayout.tsx:
     1 import { NavLink, useNavigate, Outlet } from 'react-router-dom';
     2 import { useState } from 'react';
     3 import { LayoutDashboard, Store, Users, Star, Settings, LogOut, Sun, Moon, Menu, X } from 'lucide-react';
     4 import { Button } from '@/components/ui/button';
     5 import Logo from '@/components/common/Logo';
     6 import OfflineBanner from '@/components/common/OfflineBanner';
     7 import { useTheme } from '@/hooks/useTheme';
     8 import { adminStore } from '@/store';
     9 import { toast } from 'sonner';
    10 
    11 const navItems = [
    12   { to: '/admin1/dashboard', icon: LayoutDashboard, label: 'Dashboard' },
    13   { to: '/admin1/restaurants', icon: Store, label: 'Restaurants' },
    14   { to: '/admin1/owners', icon: Users, label: 'Owners' },
    15   { to: '/admin1/reviews', icon: Star, label: 'Reviews' },
    16   { to: '/admin1/settings', icon: Settings, label: 'Settings' },
    17 ];
    18 
    19 export default function AdminLayout() {
    20   const navigate = useNavigate();
    21   const { theme, toggle } = useTheme();
    22   const [sidebarOpen, setSidebarOpen] = useState(false);
    23 
    24   const handleLogout = () => {
    25     adminStore.setSession(false);
    26     toast.success('Logged out');
    27     navigate('/admin1');
    28   };
    29 
    30   const SidebarContent = () => (
    31     <div className="flex flex-col h-full">
    32       <div className="p-4 border-b border-sidebar-border">
    33         <Logo size="sm" />
    34         <p className="text-xs text-sidebar-foreground/60 mt-1">Admin Panel</p>
    35       </div>
    36       <nav className="flex-1 p-2 space-y-1 mt-2">
    37         {navItems.map(({ to, icon: Icon, label }) => (
    38           <NavLink
    39             key={to}
    40             to={to}
    41             onClick={() => setSidebarOpen(false)}
    42             className={({ isActive }) =>
    43               `flex items-center gap-3 px-3 py-2.5 rounded text-sm transition-colors ${
    44                 isActive
    45                   ? 'bg-sidebar-accent text-sidebar-primary font-semibold'
    46                   : 'text-sidebar-foreground hover:bg-sidebar-accent/50'
    47               }`
    48             }
    49           >
    50             <Icon size={16} strokeWidth={2} />
    51             {label}
    52           </NavLink>
    53         ))}
    54       </nav>
    55       <div className="p-3 border-t border-sidebar-border space-y-1">
    56         <Button variant="ghost" size="sm" onClick={toggle} className="w-full justify-start gap-3 text-sidebar-foreground hover:bg-sidebar-accent/50">
    57           {theme === 'dark' ? <Sun size={16} strokeWidth={2} /> : <Moon size={16} strokeWidth={2} />}
    58           {theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
    59         </Button>
    60         <Button variant="ghost" size="sm" onClick={handleLogout} className="w-full justify-start gap-3 text-destructive hover:bg-destructive/10 hover:text-destructive">
    61           <LogOut size={16} strokeWidth={2} />
    62           Logout
    63         </Button>
    64       </div>
    65     </div>
    66   );
    67 
    68   return (
    69     <div className="flex min-h-screen w-full bg-background">
    70       <aside className="hidden lg:flex flex-col w-64 shrink-0 bg-sidebar border-r border-sidebar-border">
    71         <SidebarContent />
    72       </aside>
    73 
    74       {sidebarOpen && (
    75         <div className="lg:hidden fixed inset-0 z-50 flex">
    76           <div className="w-64 bg-sidebar flex flex-col border-r border-sidebar-border">
    77             <div className="flex items-center justify-end p-3 border-b border-sidebar-border">
    78               <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(false)}>
    79                 <X size={18} strokeWidth={2} />
    80               </Button>
    81             </div>
    82             <SidebarContent />
    83           </div>
    84           <div className="flex-1 bg-black/40" onClick={() => setSidebarOpen(false)} />
    85         </div>
    86       )}
    87 
    88       <div className="flex-1 min-w-0 flex flex-col">
    89         <OfflineBanner />
    90         <div className="lg:hidden flex items-center gap-3 px-4 h-14 border-b border-border bg-background sticky top-0 z-30">
    91           <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(true)}>
    92             <Menu size={18} strokeWidth={2} />
    93           </Button>
    94           <Logo size="sm" />
    95         </div>
    96         <main className="flex-1 overflow-x-hidden">
    97           <Outlet />
    98         </main>
    99       </div>
   100     </div>
   101   );
   102 }
   103 


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerLoginPage.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerLoginPage.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerLoginPage.tsx:
     1 import { useState } from 'react';
     2 import { useNavigate, Link } from 'react-router-dom';
     3 import { Button } from '@/components/ui/button';
     4 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
     5 import Logo from '@/components/common/Logo';
     6 import { ownerStore, uuid } from '@/store';
     7 import { toast } from 'sonner';
     8 
     9 export default function OwnerLoginPage() {
    10   const navigate = useNavigate();
    11   const [loading, setLoading] = useState(false);
    12 
    13   const handleGoogleLogin = () => {
    14     setLoading(true);
    15     // Simulated Google OAuth — generates a realistic fake Google profile
    16     setTimeout(() => {
    17       const fakeProfiles = [
    18         { name: 'Rahul Sharma', email: 'rahul.sharma@gmail.com' },
    19         { name: 'Priya Patel', email: 'priya.patel@gmail.com' },
    20         { name: 'Arjun Singh', email: 'arjun.singh@gmail.com' },
    21         { name: 'Sneha Modi', email: 'sneha.modi@gmail.com' },
    22       ];
    23       const profile = fakeProfiles[Math.floor(Math.random() * fakeProfiles.length)];
    24       const existing = ownerStore.getByEmail(profile.email);
    25       if (existing) {
    26         ownerStore.setCurrent(existing);
    27         toast.success(`Welcome back, ${existing.name || existing.email}!`);
    28         navigate('/owner/dashboard');
    29       } else {
    30         const newOwner = {
    31           id: uuid(),
    32           email: profile.email,
    33           name: profile.name,
    34           phone: '',
    35           plan: 'free' as const,
    36           createdAt: new Date().toISOString(),
    37         };
    38         ownerStore.save(newOwner);
    39         ownerStore.setCurrent(newOwner);
    40         toast.success('Account created! Please verify your phone.');
    41         navigate('/owner/verify-phone');
    42       }
    43       setLoading(false);
    44     }, 900);
    45   };
    46 
    47   return (
    48     <div className="min-h-screen flex items-center justify-center hero-gradient px-4">
    49       <div className="w-full max-w-sm animate-fade-up">
    50         <div className="text-center mb-8">
    51           <Logo size="lg" className="justify-center mb-3" />
    52           <p className="text-muted-foreground text-sm">Owner Portal</p>
    53         </div>
    54         <Card className="rounded-3xl border-border/60 shadow-xl">
    55           <CardHeader className="pb-2 text-center">
    56             <CardTitle className="text-xl">Sign In to Your Account</CardTitle>
    57             <CardDescription>Continue with Google to manage your restaurants</CardDescription>
    58           </CardHeader>
    59           <CardContent className="pt-4 space-y-4">
    60             <Button
    61               className="w-full h-12 gap-3 text-base rounded-xl press-active"
    62               onClick={handleGoogleLogin}
    63               disabled={loading}
    64             >
    65               {loading ? (
    66                 <svg className="w-5 h-5 animate-spin" viewBox="0 0 24 24" fill="none">
    67                   <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"/>
    68                   <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
    69                 </svg>
    70               ) : (
    71                 <svg viewBox="0 0 24 24" className="w-5 h-5" xmlns="http://www.w3.org/2000/svg">
    72                   <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
    73                   <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
    74                   <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
    75                   <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
    76                 </svg>
    77               )}
    78               {loading ? 'Signing in...' : 'Continue with Google'}
    79             </Button>
    80             <p className="text-xs text-muted-foreground text-center leading-relaxed">
    81               By continuing, you agree to our{' '}
    82               <Link to="/privacy-policy" className="underline hover:text-foreground transition-colors">Privacy Policy</Link>
    83             </p>
    84           </CardContent>
    85         </Card>
    86         <p className="text-center text-xs text-muted-foreground mt-6">
    87           Want to browse restaurants?{' '}
    88           <Link to="/restaurants" className="text-primary hover:underline">View all</Link>
    89         </p>
    90       </div>
    91     </div>
    92   );
    93 }
    94 


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/store/index.ts', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=[1, 80], user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/store/index.ts is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/store/index.ts:
     1 import type { Owner, Restaurant, Category, MenuItem, Order, Review, SiteSettings } from '@/types';
     2 
     3 const KEYS = {
     4   OWNERS: 'sqrm_owners',
     5   CURRENT_OWNER: 'sqrm_current_owner',
     6   RESTAURANTS: 'sqrm_restaurants',
     7   MENU_ITEMS: 'sqrm_menu_items',
     8   CATEGORIES: 'sqrm_categories',
     9   ORDERS: 'sqrm_orders',
    10   REVIEWS: 'sqrm_reviews',
    11   ADMIN_SESSION: 'sqrm_admin_session',
    12   SETTINGS: 'sqrm_settings',
    13   THEME: 'sqrm_theme',
    14   CART: 'sqrm_cart',
    15 };
    16 
    17 function get<T>(key: string, fallback: T): T {
    18   try {
    19     const raw = localStorage.getItem(key);
    20     return raw ? (JSON.parse(raw) as T) : fallback;
    21   } catch {
    22     return fallback;
    23   }
    24 }
    25 
    26 function set<T>(key: string, value: T): void {
    27   localStorage.setItem(key, JSON.stringify(value));
    28 }
    29 
    30 // ─── Default settings ───────────────────────────────────────────────────────
    31 export const DEFAULT_SETTINGS: SiteSettings = {
    32   siteName: 'Saksham Digi QR Menu',
    33   supportPhone: '9876543210',
    34   supportEmail: 'support@sqrm.in',
    35   logo: '',
    36   maintenanceMode: false,
    37 };
    38 
    39 export const LOGO_URL =
    40   'https://miaoda-conversation-file.s3cdn.medo.dev/user-bctx96g1udc0/app-cg8nvxlqtuyq/20260620/logo.png';
    41 
    42 // ─── Init ────────────────────────────────────────────────────────────────────
    43 export function initStore() {
    44   if (!localStorage.getItem(KEYS.SETTINGS)) {
    45     set(KEYS.SETTINGS, DEFAULT_SETTINGS);
    46   }
    47   // Always enforce correct admin credentials (overwrite any old values)
    48   localStorage.setItem(
    49     'sqrm_admin_credentials',
    50     JSON.stringify({ email: 'sqrmadmin@srpdigitalstudios.qzz.io', password: 'sqrm15112010@' })
    51   );
    52 }
    53 
    54 // ─── Settings ────────────────────────────────────────────────────────────────
    55 export const settingsStore = {
    56   get: (): SiteSettings => get<SiteSettings>(KEYS.SETTINGS, DEFAULT_SETTINGS),
    57   set: (s: SiteSettings) => set(KEYS.SETTINGS, s),
    58 };
    59 
    60 // ─── Admin ───────────────────────────────────────────────────────────────────
    61 const ADMIN_EMAIL = 'sqrmadmin@srpdigitalstudios.qzz.io';
    62 const ADMIN_PASS  = 'sqrm15112010@';
    63 
    64 export const adminStore = {
    65   /** Exact-match validation only — no bypass possible */
    66   validate: (email: string, password: string): boolean =>
    67     email === ADMIN_EMAIL && password === ADMIN_PASS,
    68   getSession: (): boolean => get<boolean>(KEYS.ADMIN_SESSION, false),
    69   setSession: (v: boolean) => set(KEYS.ADMIN_SESSION, v),
    70 };
    71 
    72 // ─── Owners ──────────────────────────────────────────────────────────────────
    73 export const ownerStore = {
    74   getAll: (): Owner[] => get<Owner[]>(KEYS.OWNERS, []),
    75   getById: (id: string) => ownerStore.getAll().find((o) => o.id === id),
    76   getByEmail: (email: string) => ownerStore.getAll().find((o) => o.email.toLowerCase() === email.toLowerCase()),
    77   save: (owner: Owner) => {
    78     const all = ownerStore.getAll().filter((o) => o.id !== owner.id);
    79     set(KEYS.OWNERS, [...all, owner]);
    80   },


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerRestaurantsPage.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=[1, 20], user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerRestaurantsPage.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/owner/OwnerRestaurantsPage.tsx:
     1 import { useNavigate } from 'react-router-dom';
     2 import { Plus, QrCode, ClipboardList, UtensilsCrossed, Pencil } from 'lucide-react';
     3 import { Button } from '@/components/ui/button';
     4 import { Card, CardContent } from '@/components/ui/card';
     5 import { Badge } from '@/components/ui/badge';
     6 import { ownerStore, restaurantStore, menuStore, orderStore, getOwnerPlan, maxRestaurants } from '@/store';
     7 import { useEffect, useState } from 'react';
     8 import type { Restaurant } from '@/types';
     9 
    10 export default function OwnerRestaurantsPage() {
    11   const navigate = useNavigate();
    12   const owner = ownerStore.getCurrent();
    13   const [restaurants, setRestaurants] = useState<Restaurant[]>([]);
    14 
    15   useEffect(() => {
    16     if (!owner) { navigate('/owner/login'); return; }
    17     setRestaurants(restaurantStore.getByOwner(owner.id));
    18   }, [owner, navigate]);
    19 
    20   if (!owner) return null;


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/owner/RestaurantFormPage.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source=<FileReadSource.OH_ACI: 'oh_aci'>, view_range=[1, 60], user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/owner/RestaurantFormPage.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/owner/RestaurantFormPage.tsx:
     1 import { useState, useRef } from 'react';
     2 import { useNavigate, useParams } from 'react-router-dom';
     3 import { ArrowLeft, Upload, X } from 'lucide-react';
     4 import { Button } from '@/components/ui/button';
     5 import { Input } from '@/components/ui/input';
     6 import { Label } from '@/components/ui/label';
     7 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
     8 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
     9 import { Textarea } from '@/components/ui/textarea';
    10 import { ownerStore, restaurantStore, getOwnerPlan, maxRestaurants, fileToBase64, uuid } from '@/store';
    11 import { toast } from 'sonner';
    12 import type { Restaurant } from '@/types';
    13 
    14 interface RestaurantFormProps { mode: 'create' | 'edit'; }
    15 
    16 export default function RestaurantFormPage({ mode }: RestaurantFormProps) {
    17   const navigate = useNavigate();
    18   const { id } = useParams<{ id: string }>();
    19   const owner = ownerStore.getCurrent();
    20 
    21   const existing = mode === 'edit' && id ? restaurantStore.getById(id) : null;
    22 
    23   const [name, setName] = useState(existing?.name || '');
    24   const [location, setLocation] = useState(existing?.location || '');
    25   const [phone, setPhone] = useState(existing?.phone || '');
    26   const [paymentInfo, setPaymentInfo] = useState(existing?.paymentInfo || '');
    27   const [logo, setLogo] = useState(existing?.logo || '');
    28   const [saving, setSaving] = useState(false);
    29   const fileRef = useRef<HTMLInputElement>(null);
    30 
    31   if (!owner) { navigate('/owner/login'); return null; }
    32 
    33   const plan = getOwnerPlan(owner);
    34   const ownedCount = restaurantStore.getByOwner(owner.id).filter((r) => r.id !== existing?.id).length;
    35 
    36   if (mode === 'create' && ownedCount >= maxRestaurants(plan)) {
    37     return (
    38       <div className="p-6 max-w-lg mx-auto">
    39         <Button variant="ghost" size="sm" className="gap-2 mb-4 -ml-2" onClick={() => navigate(-1)}>
    40           <ArrowLeft size={14} strokeWidth={2} /> Back
    41         </Button>
    42         <div className="text-center py-12 border border-dashed rounded">
    43           <p className="font-semibold text-lg">Restaurant limit reached</p>
    44           <p className="text-muted-foreground mt-2 text-sm">
    45             Your {plan} plan allows up to {maxRestaurants(plan)} restaurant{maxRestaurants(plan) !== 1 ? 's' : ''}. Upgrade to add more.
    46           </p>
    47           <Button className="mt-4" onClick={() => navigate('/owner/profile')}>Upgrade Plan</Button>
    48         </div>
    49       </div>
    50     );
    51   }
    52 
    53   const handleLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    54     const file = e.target.files?.[0];
    55     if (!file) return;
    56     if (!file.type.startsWith('image/')) { toast.error('Please upload an image file'); return; }
    57     const b64 = await fileToBase64(file);
    58     setLogo(b64);
    59   };
    60 


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/owner/VerifyPhonePage.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source='oh_aci', view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/owner/VerifyPhonePage.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/owner/VerifyPhonePage.tsx:
     1 import { useState } from 'react';
     2 import { useNavigate } from 'react-router-dom';
     3 import { Button } from '@/components/ui/button';
     4 import { Input } from '@/components/ui/input';
     5 import { Label } from '@/components/ui/label';
     6 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
     7 import Logo from '@/components/common/Logo';
     8 import { ownerStore } from '@/store';
     9 import { toast } from 'sonner';
    10 
    11 function validatePhone(p: string) {
    12   const clean = p.replace(/\D/g, '');
    13   if (clean.length !== 10) return 'Phone must be 10 digits';
    14   if (clean === '1234567890' || clean === '0987654321') return 'Please enter a valid phone number';
    15   return '';
    16 }
    17 
    18 export default function VerifyPhonePage() {
    19   const navigate = useNavigate();
    20   const owner = ownerStore.getCurrent();
    21   const [phone, setPhone] = useState('');
    22   const [error, setError] = useState('');
    23 
    24   if (!owner) {
    25     navigate('/owner/login');
    26     return null;
    27   }
    28 
    29   const handleSubmit = () => {
    30     const err = validatePhone(phone);
    31     if (err) { setError(err); return; }
    32     const updated = { ...owner, phone: phone.trim() };
    33     ownerStore.save(updated);
    34     ownerStore.setCurrent(updated);
    35     toast.success('Phone verified! Welcome aboard.');
    36     navigate('/owner/dashboard');
    37   };
    38 
    39   return (
    40     <div className="min-h-screen flex items-center justify-center bg-background px-4">
    41       <div className="w-full max-w-md">
    42         <div className="text-center mb-8">
    43           <Logo size="lg" className="justify-center" />
    44         </div>
    45         <Card>
    46           <CardHeader>
    47             <CardTitle>Verify Phone Number</CardTitle>
    48             <CardDescription>We need your phone number to complete setup</CardDescription>
    49           </CardHeader>
    50           <CardContent className="space-y-4">
    51             <div>
    52               <Label htmlFor="phone">Mobile Number</Label>
    53               <Input
    54                 id="phone"
    55                 placeholder="10-digit mobile number"
    56                 value={phone}
    57                 onChange={(e) => { setPhone(e.target.value); setError(''); }}
    58                 onKeyDown={(e) => e.key === 'Enter' && handleSubmit()}
    59                 maxLength={10}
    60                 className="mt-1"
    61               />
    62               {error && <p className="text-destructive text-xs mt-1">{error}</p>}
    63             </div>
    64             <Button className="w-full" onClick={handleSubmit}>Verify & Continue</Button>
    65           </CardContent>
    66         </Card>
    67       </div>
    68     </div>
    69   );
    70 }
    71 


</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/pages/owner/RestaurantFormPage.tsx', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source='oh_aci', view_range=[60, 180], user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/pages/owner/RestaurantFormPage.tsx is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/pages/owner/RestaurantFormPage.tsx:
    60 
    61   const validate = () => {
    62     if (!name.trim()) { toast.error('Restaurant name is required'); return false; }
    63     if (!location.trim()) { toast.error('Location is required'); return false; }
    64     if (!phone.trim()) { toast.error('Phone number is required'); return false; }
    65     if (!logo && mode === 'create') { toast.error('Logo is required'); return false; }
    66     return true;
    67   };
    68 
    69   const handleSubmit = () => {
    70     if (!validate()) return;
    71     setSaving(true);
    72     setTimeout(() => {
    73       if (mode === 'create') {
    74         const r: Restaurant = {
    75           id: uuid(),
    76           ownerId: owner.id,
    77           name: name.trim(),
    78           slug: restaurantStore.generateSlug(),
    79           logo,
    80           location: location.trim(),
    81           phone: phone.trim(),
    82           paymentInfo: paymentInfo.trim(),
    83           suspended: false,
    84           createdAt: new Date().toISOString(),
    85         };
    86         restaurantStore.save(r);
    87         toast.success('Restaurant created!');
    88         navigate(`/owner/restaurants/${r.id}/menu`);
    89       } else if (existing) {
    90         restaurantStore.save({ ...existing, name: name.trim(), logo: logo || existing.logo, location: location.trim(), phone: phone.trim(), paymentInfo: paymentInfo.trim() });
    91         toast.success('Restaurant updated!');
    92         navigate('/owner/restaurants');
    93       }
    94       setSaving(false);
    95     }, 500);
    96   };
    97 
    98   const handleDelete = () => {
    99     if (!existing) return;
   100     restaurantStore.delete(existing.id);
   101     toast.success('Restaurant deleted');
   102     navigate('/owner/restaurants');
   103   };
   104 
   105   return (
   106     <div className="p-4 md:p-6 max-w-2xl mx-auto">
   107       <Button variant="ghost" size="sm" className="gap-2 mb-4 -ml-2" onClick={() => navigate(-1)}>
   108         <ArrowLeft size={14} strokeWidth={2} /> Back
   109       </Button>
   110       <h1 className="text-2xl font-bold mb-6">{mode === 'create' ? 'Create Restaurant' : 'Edit Restaurant'}</h1>
   111 
   112       <Card>
   113         <CardHeader><CardTitle className="text-base">Restaurant Details</CardTitle></CardHeader>
   114         <CardContent className="space-y-4">
   115           {/* Logo */}
   116           <div>
   117             <Label>Logo {mode === 'create' && <span className="text-destructive">*</span>}</Label>
   118             <div className="mt-2 flex items-center gap-4">
   119               <div className="w-20 h-20 rounded border border-border bg-muted flex items-center justify-center overflow-hidden">
   120                 {logo
   121                   ? <img src={logo} alt="logo" className="w-full h-full object-cover" />
   122                   : <Upload size={24} strokeWidth={1.5} className="text-muted-foreground" />}
   123               </div>
   124               <div>
   125                 <Button type="button" variant="outline" size="sm" onClick={() => fileRef.current?.click()}>
   126                   {logo ? 'Change Logo' : 'Upload Logo'}
   127                 </Button>
   128                 {logo && (
   129                   <Button type="button" variant="ghost" size="sm" className="ml-2 text-destructive" onClick={() => setLogo('')}>
   130                     <X size={14} strokeWidth={2} />
   131                   </Button>
   132                 )}
   133                 <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={handleLogoUpload} />
   134                 <p className="text-xs text-muted-foreground mt-1">PNG, JPG, WebP supported</p>
   135               </div>
   136             </div>
   137           </div>
   138 
   139           <div>
   140             <Label htmlFor="rname">Name <span className="text-destructive">*</span></Label>
   141             <Input id="rname" placeholder="Restaurant name" value={name} onChange={(e) => setName(e.target.value)} className="mt-1" />
   142           </div>
   143           <div>
   144             <Label htmlFor="rloc">Location <span className="text-destructive">*</span></Label>
   145             <Input id="rloc" placeholder="City / Area" value={location} onChange={(e) => setLocation(e.target.value)} className="mt-1" />
   146           </div>
   147           <div>
   148             <Label htmlFor="rphone">Phone <span className="text-destructive">*</span></Label>
   149             <Input id="rphone" placeholder="Contact number" value={phone} onChange={(e) => setPhone(e.target.value)} className="mt-1" />
   150           </div>
   151           <div>
   152             <Label htmlFor="rpay">Payment Info <span className="text-xs text-muted-foreground">(for online payments)</span></Label>
   153             <Textarea id="rpay" placeholder="UPI ID: yourname@upi or bank details..." value={paymentInfo} onChange={(e) => setPaymentInfo(e.target.value)} className="mt-1" rows={3} />
   154           </div>
   155 
   156           <div className="flex gap-3 pt-2">
   157             <Button className="flex-1" onClick={handleSubmit} disabled={saving}>
   158               {saving ? 'Saving...' : mode === 'create' ? 'Create Restaurant' : 'Save Changes'}
   159             </Button>
   160             {mode === 'edit' && (
   161               <AlertDialog>
   162                 <AlertDialogTrigger asChild>
   163                   <Button variant="destructive">Delete</Button>
   164                 </AlertDialogTrigger>
   165                 <AlertDialogContent className="max-w-[calc(100%-2rem)] md:max-w-lg">
   166                   <AlertDialogHeader>
   167                     <AlertDialogTitle>Delete Restaurant?</AlertDialogTitle>
   168                     <AlertDialogDescription>This will permanently delete this restaurant and all its menu items. This action cannot be undone.</AlertDialogDescription>
   169                   </AlertDialogHeader>
   170                   <AlertDialogFooter>
   171                     <AlertDialogCancel>Cancel</AlertDialogCancel>
   172                     <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">Delete</AlertDialogAction>
   173                   </AlertDialogFooter>
   174                 </AlertDialogContent>
   175               </AlertDialog>
   176             )}
   177           </div>
   178         </CardContent>
   179       </Card>
   180     </div>


</observation>
<action>
**CmdRunAction (source=EventSource.AGENT, is_input=False)**
COMMAND:
ls /workspace/app-cg8nvxlqtuyq/src/pages/admin/ && ls /workspace/app-cg8nvxlqtuyq/src/pages/owner/
</action>
<observation>
**CmdOutputObservation (source=EventSource.AGENT, exit code=0, metadata={
  "exit_code": 0,
  "pid": -1,
  "username": null,
  "hostname": null,
  "working_dir": "/workspace",
  "py_interpreter_path": null,
  "prefix": "",
  "suffix": "\n[The command completed with exit code 0.]"
})**
--BEGIN AGENT OBSERVATION--
AdminDashboard.tsx
AdminLoginPage.tsx
AdminOwnersPage.tsx
AdminRestaurantsPage.tsx
AdminReviewsPage.tsx
AdminSettingsPage.tsx
MenuManagementPage.tsx
OrdersPage.tsx
OwnerDashboard.tsx
OwnerLoginPage.tsx
OwnerProfilePage.tsx
OwnerRestaurantsPage.tsx
QRPage.tsx
RestaurantFormPage.tsx
VerifyPhonePage.tsx
[The command completed with exit code 0.]
[Current working directory: /workspace]
--END AGENT OBSERVATION--
</observation>
<action>
**CmdRunAction (source=EventSource.AGENT, is_input=False)**
COMMAND:
find /workspace/app-cg8nvxlqtuyq -maxdepth 2 -name "GUIDE.md" -o -name "guide.md" 2>/dev/null
</action>
<observation>
**CmdOutputObservation (source=EventSource.AGENT, exit code=0, metadata={
  "exit_code": 0,
  "pid": -1,
  "username": null,
  "hostname": null,
  "working_dir": "/workspace",
  "py_interpreter_path": null,
  "prefix": "",
  "suffix": "\n[The command completed with exit code 0.]"
})**
--BEGIN AGENT OBSERVATION--
/workspace/app-cg8nvxlqtuyq/tasks/GUIDE.md
[The command completed with exit code 0.]
[Current working directory: /workspace]
--END AGENT OBSERVATION--
</observation>
<action>
**CmdRunAction (source=EventSource.AGENT, is_input=False)**
COMMAND:
cat /workspace/app-cg8nvxlqtuyq/tasks/GUIDE.md | head -20
</action>
<observation>
**CmdOutputObservation (source=EventSource.AGENT, exit code=0, metadata={
  "exit_code": 0,
  "pid": -1,
  "username": null,
  "hostname": null,
  "working_dir": "/workspace",
  "py_interpreter_path": null,
  "prefix": "",
  "suffix": "\n[The command completed with exit code 0.]"
})**
--BEGIN AGENT OBSERVATION--
# SQRM — Saksham Digital Menu
## Complete Setup & Developer Guide

> **Version:** 1.0.0  
> **Domain:** sqrm.srpdigitalstudios.qzz.io  
> **Stack:** PHP 8+, MySQL 5.7+, Vanilla JS, CSS3, PWA

---

## Table of Contents

1. [Overview](#1-overview)
2. [System Requirements](#2-system-requirements)
3. [Project Structure](#3-project-structure)
4. [Installation](#4-installation)
5. [Configuration](#5-configuration)
6. [Database Setup](#6-database-setup)
7. [Google OAuth Setup](#7-google-oauth-setup)
8. [Web Server Configuration](#8-web-server-configuration)
9. [First-Time Admin Setup](#9-first-time-admin-setup)
[The command completed with exit code 0.]
[Current working directory: /workspace]
--END AGENT OBSERVATION--
</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/src/store/index.ts', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source='oh_aci', view_range=[80, 160], user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/src/store/index.ts is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/src/store/index.ts:
    80   },
    81   delete: (id: string) => set(KEYS.OWNERS, ownerStore.getAll().filter((o) => o.id !== id)),
    82   getCurrent: (): Owner | null => get<Owner | null>(KEYS.CURRENT_OWNER, null),
    83   setCurrent: (o: Owner | null) => set(KEYS.CURRENT_OWNER, o),
    84 };
    85 
    86 // ─── Restaurants ──────────────────────────────────────────────────────────────
    87 export const restaurantStore = {
    88   getAll: (): Restaurant[] => get<Restaurant[]>(KEYS.RESTAURANTS, []),
    89   getById: (id: string) => restaurantStore.getAll().find((r) => r.id === id),
    90   getBySlug: (slug: string) => restaurantStore.getAll().find((r) => r.slug === slug),
    91   getByOwner: (ownerId: string) => restaurantStore.getAll().filter((r) => r.ownerId === ownerId),
    92   save: (r: Restaurant) => {
    93     const all = restaurantStore.getAll().filter((x) => x.id !== r.id);
    94     set(KEYS.RESTAURANTS, [...all, r]);
    95   },
    96   delete: (id: string) => {
    97     set(KEYS.RESTAURANTS, restaurantStore.getAll().filter((r) => r.id !== id));
    98     // cascade: delete items, categories, orders, reviews
    99     set(KEYS.MENU_ITEMS, menuStore.getAll().filter((m) => m.restaurantId !== id));
   100     set(KEYS.CATEGORIES, categoryStore.getAll().filter((c) => c.restaurantId !== id));
   101   },
   102   /** Generate a random 16-char alphanumeric slug */
   103   generateSlug: (): string => {
   104     const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
   105     let slug = '';
   106     for (let i = 0; i < 16; i++) slug += chars[Math.floor(Math.random() * chars.length)];
   107     const existing = restaurantStore.getAll().map((r) => r.slug);
   108     // Extremely unlikely collision but handle anyway
   109     return existing.includes(slug) ? restaurantStore.generateSlug() : slug;
   110   },
   111 };
   112 
   113 // ─── Categories ───────────────────────────────────────────────────────────────
   114 export const categoryStore = {
   115   getAll: (): Category[] => get<Category[]>(KEYS.CATEGORIES, []),
   116   getByRestaurant: (restaurantId: string) => categoryStore.getAll().filter((c) => c.restaurantId === restaurantId),
   117   save: (c: Category) => {
   118     const all = categoryStore.getAll().filter((x) => x.id !== c.id);
   119     set(KEYS.CATEGORIES, [...all, c]);
   120   },
   121   delete: (id: string) => set(KEYS.CATEGORIES, categoryStore.getAll().filter((c) => c.id !== id)),
   122 };
   123 
   124 // ─── Menu Items ───────────────────────────────────────────────────────────────
   125 export const menuStore = {
   126   getAll: (): MenuItem[] => get<MenuItem[]>(KEYS.MENU_ITEMS, []),
   127   getByRestaurant: (restaurantId: string) => menuStore.getAll().filter((m) => m.restaurantId === restaurantId),
   128   save: (m: MenuItem) => {
   129     const all = menuStore.getAll().filter((x) => x.id !== m.id);
   130     set(KEYS.MENU_ITEMS, [...all, m]);
   131   },
   132   delete: (id: string) => set(KEYS.MENU_ITEMS, menuStore.getAll().filter((m) => m.id !== id)),
   133 };
   134 
   135 // ─── Orders ───────────────────────────────────────────────────────────────────
   136 export const orderStore = {
   137   getAll: (): Order[] => get<Order[]>(KEYS.ORDERS, []),
   138   getById: (id: string) => orderStore.getAll().find((o) => o.id === id),
   139   getByRestaurant: (restaurantId: string) => orderStore.getAll().filter((o) => o.restaurantId === restaurantId),
   140   save: (o: Order) => {
   141     const all = orderStore.getAll().filter((x) => x.id !== o.id);
   142     set(KEYS.ORDERS, [...all, o]);
   143   },
   144 };
   145 
   146 // ─── Reviews ──────────────────────────────────────────────────────────────────
   147 export const reviewStore = {
   148   getAll: (): Review[] => get<Review[]>(KEYS.REVIEWS, []),
   149   getByRestaurant: (restaurantId: string) => reviewStore.getAll().filter((r) => r.restaurantId === restaurantId),
   150   save: (r: Review) => {
   151     const all = reviewStore.getAll().filter((x) => x.id !== r.id);
   152     set(KEYS.REVIEWS, [...all, r]);
   153   },
   154   delete: (id: string) => set(KEYS.REVIEWS, reviewStore.getAll().filter((r) => r.id !== id)),
   155 };
   156 
   157 // ─── Cart ─────────────────────────────────────────────────────────────────────
   158 export interface CartState {
   159   restaurantSlug: string;
   160   items: import('@/types').CartItem[];


</observation>
<action>
**CmdRunAction (source=EventSource.AGENT, is_input=False)**
COMMAND:
cd /workspace/app-cg8nvxlqtuyq && npm run lint 2>&1 | tail -40
</action>
<observation>
**CmdOutputObservation (source=EventSource.AGENT, exit code=0, metadata={
  "exit_code": 0,
  "pid": -1,
  "username": null,
  "hostname": null,
  "working_dir": "/workspace/app-cg8nvxlqtuyq",
  "py_interpreter_path": null,
  "prefix": "",
  "suffix": "\n[The command completed with exit code 0.]"
})**
--BEGIN AGENT OBSERVATION--
     │        ───┬───  
     │           ╰───── 
     │ 
 564 │ export default function HomePage() {
     │        ───┬───  
     │           ╰───── 
─────╯

[PARSE_ERROR] Error: Duplicated default export
     ╭─[ src/pages/public/CartPage.tsx:18:8 ]
     │
  18 │ export default function CartPage() {
     │        ───┬───  
     │           ╰───── 
     │ 
 313 │ export default function CartPage() {
     │        ───┬───  
     │           ╰───── 
─────╯

[PARSE_ERROR] Error: Duplicated default export
     ╭─[ src/pages/public/OrderTrackingPage.tsx:39:8 ]
     │
  39 │ export default function OrderTrackingPage() {
     │        ───┬───  
     │           ╰───── 
     │ 
 408 │ export default function OrderTrackingPage() {
     │        ───┬───  
     │           ╰───── 
─────╯

...
    at aggregateBindingErrorsIntoJsError (file:///workspace/app-cg8nvxlqtuyq/node_modules/.pnpm/rolldown@1.0.0-beta.53_@emnapi+core@1.11.1_@emnapi+runtime@1.11.1/node_modules/rolldown/dist/shared/bindingify-input-options-Bk0BBr2s.mjs:56:18)
    at unwrapBindingResult (file:///workspace/app-cg8nvxlqtuyq/node_modules/.pnpm/rolldown@1.0.0-beta.53_@emnapi+core@1.11.1_@emnapi+runtime@1.11.1/node_modules/rolldown/dist/shared/bindingify-input-options-Bk0BBr2s.mjs:31:128)
    at #build (file:///workspace/app-cg8nvxlqtuyq/node_modules/.pnpm/rolldown@1.0.0-beta.53_@emnapi+core@1.11.1_@emnapi+runtime@1.11.1/node_modules/rolldown/dist/shared/rolldown-build-BEU8N80I.mjs:2260:34)
    at async buildEnvironment (file:///workspace/app-cg8nvxlqtuyq/node_modules/.pnpm/rolldown-vite@7.3.1_@emnapi+core@1.11.1_@emnapi+runtime@1.11.1_@types+node@25.9.3_jiti@1.21.7/node_modules/rolldown-vite/dist/node/chunks/node.js:32805:64)
    at async Object.build (file:///workspace/app-cg8nvxlqtuyq/node_modules/.pnpm/rolldown-vite@7.3.1_@emnapi+core@1.11.1_@emnapi+runtime@1.11.1_@types+node@25.9.3_jiti@1.21.7/node_modules/rolldown-vite/dist/node/chunks/node.js:33208:19)
    at async Object.buildApp (file:///workspace/app-cg8nvxlqtuyq/node_modules/.pnpm/rolldown-vite@7.3.1_@emnapi+core@1.11.1_@emnapi+runtime@1.11.1_@types+node@25.9.3_jiti@1.21.7/node_modules/rolldown-vite/dist/node/chunks/node.js:33205:153)
    at async CAC.<anonymous> (file:///workspace/app-cg8nvxlqtuyq/node_modules/.pnpm/rolldown-vite@7.3.1_@emnapi+core@1.11.1_@emnapi+runtime@1.11.1_@types+node@25.9.3_jiti@1.21.7/node_modules/rolldown-vite/dist/node/cli.js:629:3)
[The command completed with exit code 0.]
[Current working directory: /workspace/app-cg8nvxlqtuyq]
--END AGENT OBSERVATION--
</observation>
<action>
AgentThinkAction(thought='There are duplicate default exports in:\n1. src/pages/public/CartPage.tsx - lines 18 and 313\n2. src/pages/public/OrderTrackingPage.tsx - lines 39 and 408\n3. Some page with HomePage around line 564\n\nThese are duplicated default exports caused by previous edits where new code was appended without removing the old function. I need to check these files and remove the duplicate (old) function definitions.\n\nAlso there\'s a "src/pages/public/CartPage.tsx" issue - duplicate at lines 18 and 313, and OrderTrackingPage.tsx at lines 39 and 408, plus what appears to be a HomePage too.\n\nLet me check these files to find and remove the duplicates.', action=<ActionType.THINK: 'think'>)
</action>
<observation>
AgentThinkObservation(content='Your thought has been logged.', observation=<ObservationType.THINK: 'think'>)
</observation>
<action>
**CmdRunAction (source=EventSource.AGENT, is_input=False)**
THOUGHT: Duplicate default exports from previous batch edits — need to fix them:
COMMAND:
cd /workspace/app-cg8nvxlqtuyq && grep -n "^export default function" src/pages/public/CartPage.tsx src/pages/public/OrderTrackingPage.tsx src/pages/public/HomePage.tsx 2>/dev/null
</action>
<observation>
**CmdOutputObservation (source=EventSource.AGENT, exit code=0, metadata={
  "exit_code": 0,
  "pid": -1,
  "username": null,
  "hostname": null,
  "working_dir": "/workspace/app-cg8nvxlqtuyq",
  "py_interpreter_path": null,
  "prefix": "",
  "suffix": "\n[The command completed with exit code 0.]"
})**
--BEGIN AGENT OBSERVATION--
src/pages/public/CartPage.tsx:20:export default function CartPage() {
src/pages/public/CartPage.tsx:202:export default function CartPage() {
src/pages/public/OrderTrackingPage.tsx:25:export default function OrderTrackingPage() {
src/pages/public/OrderTrackingPage.tsx:318:export default function OrderTrackingPage() {
src/pages/public/HomePage.tsx:78:export default function HomePage() {
src/pages/public/HomePage.tsx:344:export default function HomePage() {
[The command completed with exit code 0.]
[Current working directory: /workspace/app-cg8nvxlqtuyq]
--END AGENT OBSERVATION--
</observation>
<action>
**CmdRunAction (source=EventSource.AGENT, is_input=False)**
COMMAND:
cd /workspace/app-cg8nvxlqtuyq && wc -l src/pages/public/CartPage.tsx src/pages/public/OrderTrackingPage.tsx src/pages/public/HomePage.tsx
</action>
<observation>
**CmdOutputObservation (source=EventSource.AGENT, exit code=0, metadata={
  "exit_code": 0,
  "pid": -1,
  "username": null,
  "hostname": null,
  "working_dir": "/workspace/app-cg8nvxlqtuyq",
  "py_interpreter_path": null,
  "prefix": "",
  "suffix": "\n[The command completed with exit code 0.]"
})**
--BEGIN AGENT OBSERVATION--
  373 src/pages/public/CartPage.tsx
  532 src/pages/public/OrderTrackingPage.tsx
  519 src/pages/public/HomePage.tsx
 1424 total
[The command completed with exit code 0.]
[Current working directory: /workspace/app-cg8nvxlqtuyq]
--END AGENT OBSERVATION--
</observation>
<action>
**CmdRunAction (source=EventSource.AGENT, is_input=False)**
COMMAND:
cd /workspace/app-cg8nvxlqtuyq && sed -n '190,215p' src/pages/public/CartPage.tsx && echo "---" && sed -n '305,320p' src/pages/public/CartPage.tsx
</action>
<observation>
**CmdOutputObservation (source=EventSource.AGENT, exit code=0, metadata={
  "exit_code": 0,
  "pid": -1,
  "username": null,
  "hostname": null,
  "working_dir": "/workspace/app-cg8nvxlqtuyq",
  "py_interpreter_path": null,
  "prefix": "",
  "suffix": "\n[The command completed with exit code 0.]"
})**
--BEGIN AGENT OBSERVATION--
      </div>
    </PublicLayout>
  );
}

function validatePhone(p: string) {
  const clean = p.replace(/\D/g, '');
  if (clean.length !== 10) return 'Phone must be 10 digits';
  if (clean === '1234567890' || clean === '0987654321') return 'Please enter a valid phone number';
  return '';
}

export default function CartPage() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const restaurantSlug = searchParams.get('restaurant') || '';

  const cartState = cartStore.get();
  const [items, setItems] = useState(
    cartState?.restaurantSlug === restaurantSlug ? cartState.items : []
  );

  const restaurant = restaurantStore.getBySlug(restaurantSlug);

  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
---
                  </Button>
                  <span className="w-5 text-center text-sm font-semibold">{item.quantity}</span>
                  <Button size="icon" className="h-7 w-7" onClick={() => update(item.menuItemId, 1)}>
                    <Plus size={12} strokeWidth={2} />
                  </Button>
                </div>
                <p className="w-16 text-right font-semibold text-sm shrink-0">₹{(item.price * item.quantity).toFixed(0)}</p>
              </div>
            ))}
            <div className="flex justify-between items-center px-4 py-3 bg-muted/50">
              <span className="font-bold">Total</span>
              <span className="font-bold text-primary text-lg">₹{total.toFixed(0)}</span>
            </div>
          </CardContent>
        </Card>
[The command completed with exit code 0.]
[Current working directory: /workspace/app-cg8nvxlqtuyq]
--END AGENT OBSERVATION--
</observation>
<action>
**CmdRunAction (source=EventSource.AGENT, is_input=False)**
COMMAND:
cd /workspace/app-cg8nvxlqtuyq && sed -n '310,325p' src/pages/public/OrderTrackingPage.tsx && echo "---" && sed -n '335,355p' src/pages/public/HomePage.tsx
</action>
<observation>
**CmdOutputObservation (source=EventSource.AGENT, exit code=0, metadata={
  "exit_code": 0,
  "pid": -1,
  "username": null,
  "hostname": null,
  "working_dir": "/workspace/app-cg8nvxlqtuyq",
  "py_interpreter_path": null,
  "prefix": "",
  "suffix": "\n[The command completed with exit code 0.]"
})**
--BEGIN AGENT OBSERVATION--

const statusConfig: Record<Order['status'], { label: string; icon: typeof Clock; color: string }> = {
  pending: { label: 'Pending', icon: Clock, color: 'text-yellow-500' },
  accepted: { label: 'Accepted', icon: CheckCircle, color: 'text-green-500' },
  rejected: { label: 'Rejected', icon: XCircle, color: 'text-destructive' },
  completed: { label: 'Completed', icon: Package, color: 'text-primary' },
};

export default function OrderTrackingPage() {
  const { orderId } = useParams<{ orderId: string }>();
  const navigate = useNavigate();
  const [order, setOrder] = useState<Order | null>(() => orderStore.getById(orderId!) ?? null);
  const [showReview, setShowReview] = useState(false);
  const [reviewRating, setReviewRating] = useState(5);
  const [reviewText, setReviewText] = useState('');
  const prevStatus = useRef(order?.status);
---
      'Unlimited Menu Items',
      'Lifetime Analytics',
      'Popular Categories Insights',
      'Most Active Hours Report',
      'Custom Restaurant Theme Color',
    ],
  },
];

export default function HomePage() {
  const navigate = useNavigate();
  const [search, setSearch] = useState('');
  const settings = settingsStore.get();

  const allRestaurants = restaurantStore.getAll().filter((r) => !r.suspended);
  const topRestaurants = [...allRestaurants]
    .map((r) => {
      const reviews = reviewStore.getByRestaurant(r.id);
      const avg = reviews.length ? reviews.reduce((s, v) => s + v.rating, 0) / reviews.length : 0;
      return { ...r, avgRating: avg, reviewCount: reviews.length };
    })
[The command completed with exit code 0.]
[Current working directory: /workspace/app-cg8nvxlqtuyq]
--END AGENT OBSERVATION--
</observation>
<action>
**CmdRunAction (source=EventSource.AGENT, is_input=False)**
THOUGHT: Now check for any other duplicate exports and run lint again in parallel:
COMMAND:
cd /workspace/app-cg8nvxlqtuyq && for f in src/pages/**/*.tsx src/components/**/*.tsx; do count=$(grep -c "^export default function" "$f" 2>/dev/null || echo 0); if [ "$count" -gt 1 ]; then echo "DUPE: $f ($count)"; fi; done
</action>
<observation>
**CmdOutputObservation (source=EventSource.AGENT, exit code=0, metadata={
  "exit_code": 0,
  "pid": -1,
  "username": null,
  "hostname": null,
  "working_dir": "/workspace/app-cg8nvxlqtuyq",
  "py_interpreter_path": null,
  "prefix": "",
  "suffix": "\n[The command completed with exit code 0.]"
})**
--BEGIN AGENT OBSERVATION--
DUPE: src/pages/admin/AdminRestaurantsPage.tsx (2)
DUPE: src/pages/admin/AdminReviewsPage.tsx (2)
DUPE: src/pages/owner/OrdersPage.tsx (2)
DUPE: src/pages/public/MenuPage.tsx (2)
DUPE: src/pages/public/RestaurantProfilePage.tsx (2)
DUPE: src/pages/public/RestaurantsPage.tsx (2)
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
bash: line 1: [: 0
0: integer expression expected
[The command completed with exit code 0.]
[Current working directory: /workspace/app-cg8nvxlqtuyq]
--END AGENT OBSERVATION--
</observation>
<action>
FileReadAction(path='/workspace/app-cg8nvxlqtuyq/tasks/GUIDE.md', start=0, end=-1, thought='', action=<ActionType.READ: 'read'>, security_risk=None, impl_source='oh_aci', view_range=None, user_hidden=False)
</action>
<observation>
[Read from /workspace/app-cg8nvxlqtuyq/tasks/GUIDE.md is successful.]
Here's the result of running `cat -n` on the file: /workspace/app-cg8nvxlqtuyq/tasks/GUIDE.md:
     1 # SQRM — Saksham Digital Menu
     2 ## Complete Setup & Developer Guide
     3 
     4 > **Version:** 1.0.0  
     5 > **Domain:** sqrm.srpdigitalstudios.qzz.io  
     6 > **Stack:** PHP 8+, MySQL 5.7+, Vanilla JS, CSS3, PWA
     7 
     8 ---
     9 
    10 ## Table of Contents
    11 
    12 1. [Overview](#1-overview)
    13 2. [System Requirements](#2-system-requirements)
    14 3. [Project Structure](#3-project-structure)
    15 4. [Installation](#4-installation)
    16 5. [Configuration](#5-configuration)
    17 6. [Database Setup](#6-database-setup)
    18 7. [Google OAuth Setup](#7-google-oauth-setup)
    19 8. [Web Server Configuration](#8-web-server-configuration)
    20 9. [First-Time Admin Setup](#9-first-time-admin-setup)
    21 10. [Feature Reference](#10-feature-reference)
    22 11. [URL / Route Reference](#11-url--route-reference)
    23 12. [API Endpoints](#12-api-endpoints)
    24 13. [Subscription Plans](#13-subscription-plans)
    25 14. [File Uploads & WebP Conversion](#14-file-uploads--webp-conversion)
    26 15. [PWA & Offline Support](#15-pwa--offline-support)
    27 16. [Order Flow](#16-order-flow)
    28 17. [QR Code System](#17-qr-code-system)
    29 18. [Dark Mode](#18-dark-mode)
    30 19. [Deployment Checklist](#19-deployment-checklist)
    31 20. [Security Notes](#20-security-notes)
    32 21. [Troubleshooting](#21-troubleshooting)
    33 
    34 ---
    35 
    36 ## 1. Overview
    37 
    38 **Saksham Digital Menu (SQRM)** is a complete digital QR-menu platform for restaurant owners.
    39 
    40 ### For Restaurant Owners
    41 - Login with Google, create restaurants, upload menus with images
    42 - Generate branded QR codes for tables
    43 - Receive and manage customer orders in real time (with sound notifications)
    44 - Download PDF bills per order
    45 - View revenue analytics (daily/monthly/lifetime based on plan)
    46 
    47 ### For Customers
    48 - Scan QR code → browse menu → add to cart → place order
    49 - Real-time order status tracking (Pending → Accepted/Rejected → Completed)
    50 - Receive PDF bill after order completion
    51 - Leave star ratings and written reviews
    52 
    53 ### For Super Admin
    54 - Manage all owners, assign subscription plans
    55 - Suspend/reactivate restaurants
    56 - Moderate reviews
    57 - Configure site settings (name, logo, support contact)
    58 - Enable maintenance mode
    59 
    60 ---
    61 
    62 ## 2. System Requirements
    63 
    64 | Requirement | Minimum |
    65 |-------------|---------|
    66 | PHP | 8.0+ |
    67 | MySQL | 5.7+ (or MariaDB 10.4+) |
    68 | PHP Extensions | `pdo_mysql`, `gd` (for WebP), `curl`, `json`, `session`, `mbstring` |
    69 | Web Server | Apache (mod_rewrite) or Nginx |
    70 | SSL Certificate | Required for Google OAuth & PWA |
    71 | Disk Space | 512 MB minimum (for uploads) |
    72 
    73 ---
    74 
    75 ## 3. Project Structure
    76 
    77 ```
    78 sqrm/
    79 ├── index.php                   # Front controller / router (ALL requests)
    80 ├── config/
    81 │   ├── app.php                 # App constants (URL, upload paths, plan limits)
    82 │   ├── database.php            # DB credentials
    83 │   └── google.php              # Google OAuth credentials
    84 ├── includes/
    85 │   ├── Database.php            # PDO singleton wrapper
    86 │   ├── Auth.php                # Session, owner/admin auth helpers
    87 │   ├── Settings.php            # Site settings read/write
    88 │   ├── ImageUpload.php         # WebP image conversion & upload
    89 │   └── helpers.php             # csrf(), view(), starHtml(), timeAgo(), planMaxItems()
    90 ├── app/
    91 │   ├── controllers/
    92 │   │   ├── AdminController.php     # Admin panel (login, owners, restaurants, reviews, settings)
    93 │   │   ├── AuthController.php      # Google OAuth, phone verification, logout
    94 │   │   ├── HomeController.php      # Home page, sitemap
    95 │   │   ├── MenuController.php      # Owner menu management + public menu API
    96 │   │   ├── OrderController.php     # Cart, order placement, tracking, PDF bill
    97 │   │   ├── OwnerController.php     # Owner dashboard, profile, account deletion
    98 │   │   ├── PublicController.php    # Public restaurant list & profile, review submission
    99 │   │   ├── QRController.php        # QR code page
   100 │   │   └── RestaurantController.php # Owner restaurant CRUD
   101 │   └── views/
   102 │       ├── admin/
   103 │       │   ├── layout.php          # Admin sidebar layout (dark navy sidebar)
   104 │       │   ├── layout_end.php      # Closes admin layout
   105 │       │   ├── login.php
   106 │       │   ├── dashboard.php
   107 │       │   ├── owners.php
   108 │       │   ├── owner_detail.php
   109 │       │   ├── restaurants.php
   110 │       │   ├── reviews.php
   111 │       │   └── settings.php
   112 │       ├── auth/
   113 │       │   ├── owner_login.php     # Google OAuth button
   114 │       │   └── verify_phone.php    # Phone verification form
   115 │       ├── home/
   116 │       │   ├── index.php           # Landing page (hero, plans, features)
   117 │       │   ├── privacy.php
   118 │       │   ├── cookie.php
   119 │       │   └── sitemap.php         # XML sitemap output
   120 │       ├── owner/
   121 │       │   ├── dashboard.php
   122 │       │   ├── restaurants.php
   123 │       │   ├── restaurant_create.php
   124 │       │   ├── restaurant_edit.php
   125 │       │   ├── menu.php
   126 │       │   ├── orders.php
   127 │       │   ├── profile.php
   128 │       │   └── qr.php
   129 │       ├── public/
   130 │       │   ├── restaurants.php     # /restaurants search page
   131 │       │   ├── restaurant_profile.php  # /r/{slug}
   132 │       │   ├── menu.php            # /m/{slug}
   133 │       │   ├── cart.php
   134 │       │   ├── order_track.php
   135 │       │   └── suspended.php
   136 │       └── shared/
   137 │           ├── header.php          # HTML head + offline banner
   138 │           ├── footer.php          # Footer + PWA install banner
   139 │           ├── 404.php
   140 │           └── maintenance.php
   141 ├── public/
   142 │   ├── assets/
   143 │   │   ├── css/style.css           # Main stylesheet (dark mode, responsive)
   144 │   │   ├── js/app.js               # Vanilla JS (theme, cart, polling, toasts, modals)
   145 │   │   ├── images/                 # icon-192.png, icon-512.png, og-banner.png, placeholder.webp
   146 │   │   └── sounds/ding.mp3         # New order notification sound
   147 │   ├── uploads/
   148 │   │   ├── logos/                  # Restaurant logos (WebP)
   149 │   │   ├── menu/                   # Menu item images (WebP)
   150 │   │   └── site/                   # Site logo (uploaded by admin)
   151 │   ├── manifest.json               # PWA manifest
   152 │   ├── sw.js                       # Service worker (cache-first, offline fallback)
   153 │   └── offline.html                # Offline fallback page
   154 └── sql/
   155     └── schema.sql                  # Full database schema (run once on new install)
   156 ```
   157 
   158 ---
   159 
   160 ## 4. Installation
   161 
   162 ### Step 1: Upload Files
   163 Upload the entire `sqrm/` directory to your web server root (e.g., `/var/www/html/sqrm` or the domain's `public_html`).
   164 
   165 ### Step 2: Set Permissions
   166 ```bash
   167 chmod -R 755 sqrm/
   168 chmod -R 777 sqrm/public/uploads/
   169 ```
   170 
   171 ### Step 3: Create Upload Directories
   172 ```bash
   173 mkdir -p sqrm/public/uploads/logos
   174 mkdir -p sqrm/public/uploads/menu
   175 mkdir -p sqrm/public/uploads/site
   176 chmod 777 sqrm/public/uploads/logos
   177 chmod 777 sqrm/public/uploads/menu
   178 chmod 777 sqrm/public/uploads/site
   179 ```
   180 
   181 ### Step 4: Configure (see Section 5)
   182 
   183 ### Step 5: Run Database Schema (see Section 6)
   184 
   185 ### Step 6: Create Admin Account (see Section 9)
   186 
   187 ---
   188 
   189 ## 5. Configuration
   190 
   191 ### `config/database.php`
   192 ```php
   193 define('DB_HOST', 'localhost');     // Database host
   194 define('DB_NAME', 'sqrm_db');       // Database name
   195 define('DB_USER', 'root');          // Database username
   196 define('DB_PASS', '');              // Database password
   197 define('DB_CHARSET', 'utf8mb4');
   198 ```
   199 
   200 ### `config/app.php`
   201 ```php
   202 define('APP_URL', 'https://sqrm.srpdigitalstudios.qzz.io');  // Change to your domain
   203 define('APP_NAME', 'Saksham Digital Menu');
   204 ```
   205 > **Important:** `APP_URL` must be HTTPS for Google OAuth and PWA to work. No trailing slash.
   206 
   207 ### `config/google.php`
   208 ```php
   209 define('GOOGLE_CLIENT_ID',     'YOUR_GOOGLE_CLIENT_ID');
   210 define('GOOGLE_CLIENT_SECRET', 'YOUR_GOOGLE_CLIENT_SECRET');
   211 // GOOGLE_REDIRECT_URI is auto-set to APP_URL . '/auth/google/callback'
   212 ```
   213 > See Section 7 for how to get these values.
   214 
   215 ---
   216 
   217 ## 6. Database Setup
   218 
   219 ### Create the database and run the schema:
   220 ```bash
   221 mysql -u root -p
   222 ```
   223 ```sql
   224 CREATE DATABASE IF NOT EXISTS sqrm_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
   225 exit;
   226 ```
   227 ```bash
   228 mysql -u root -p sqrm_db < sqrm/sql/schema.sql
   229 ```
   230 
   231 ### Tables Created
   232 | Table | Purpose |
   233 |-------|---------|
   234 | `site_settings` | Key-value store for site configuration |
   235 | `admins` | Admin panel users (email + bcrypt password) |
   236 | `owners` | Restaurant owners (Google OAuth) |
   237 | `restaurants` | Restaurant profiles |
   238 | `menu_categories` | Menu categories per restaurant |
   239 | `menu_items` | Menu items with images and prices |
   240 | `orders` | Customer orders with status tracking |
   241 | `order_items` | Line items per order |
   242 | `reviews` | Customer star ratings and written reviews |
   243 
   244 ---
   245 
   246 ## 7. Google OAuth Setup
   247 
   248 1. Go to [Google Cloud Console](https://console.cloud.google.com/)
   249 2. Create a new project (or use existing)
   250 3. Navigate to **APIs & Services → Credentials**
   251 4. Click **Create Credentials → OAuth 2.0 Client ID**
   252 5. Application type: **Web application**
   253 6. Add Authorized redirect URIs:
   254    ```
   255    https://sqrm.srpdigitalstudios.qzz.io/auth/google/callback
   256    ```
   257 7. Copy the **Client ID** and **Client Secret**
   258 8. Paste them into `config/google.php`
   259 
   260 > **Note:** The OAuth consent screen must be configured. Add your domain to "Authorized domains". For production, verify the domain and publish the app.
   261 
   262 ---
   263 
   264 ## 8. Web Server Configuration
   265 
   266 ### Apache (recommended)
   267 
   268 Create or update `.htaccess` in the `sqrm/` root directory:
   269 
   270 ```apache
   271 Options -Indexes
   272 RewriteEngine On
   273 
   274 # Serve static files directly
   275 RewriteCond %{REQUEST_FILENAME} -f [OR]
   276 RewriteCond %{REQUEST_FILENAME} -d
   277 RewriteRule ^ - [L]
   278 
   279 # Route everything else through index.php
   280 RewriteRule ^ index.php [L]
   281 ```
   282 
   283 Also ensure `mod_rewrite` is enabled:
   284 ```bash
   285 sudo a2enmod rewrite
   286 sudo systemctl restart apache2
   287 ```
   288 
   289 Your Apache VirtualHost should have `AllowOverride All`:
   290 ```apache
   291 <Directory /var/www/html/sqrm>
   292     AllowOverride All
   293     Require all granted
   294 </Directory>
   295 ```
   296 
   297 ### Nginx
   298 
   299 ```nginx
   300 server {
   301     listen 443 ssl;
   302     server_name sqrm.srpdigitalstudios.qzz.io;
   303     root /var/www/html/sqrm;
   304     index index.php;
   305 
   306     # Static files
   307     location /public/ {
   308         try_files $uri $uri/ =404;
   309     }
   310 
   311     # Route all requests through front controller
   312     location / {
   313         try_files $uri $uri/ /index.php?$query_string;
   314     }
   315 
   316     location ~ \.php$ {
   317         fastcgi_pass unix:/run/php/php8.1-fpm.sock;
   318         fastcgi_index index.php;
   319         include fastcgi_params;
   320         fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
   321     }
   322 
   323     # Security: block direct access to config/includes
   324     location ~ ^/(config|includes|app|sql)/ {
   325         deny all;
   326         return 404;
   327     }
   328 }
   329 ```
   330 
   331 > **Note:** If your web root is set directly to the `sqrm/` folder (not a subfolder), static assets in `public/assets/` are served directly by the web server. The PHP router only handles non-file requests.
   332 
   333 ---
   334 
   335 ## 9. First-Time Admin Setup
   336 
   337 After running the schema, create the first admin account:
   338 
   339 ```bash
   340 php -r "
   341 require 'sqrm/config/database.php';
   342 require 'sqrm/includes/Database.php';
   343 \$hash = password_hash('your_secure_password', PASSWORD_DEFAULT);
   344 Database::insert(
   345   'INSERT INTO admins (email, password) VALUES (?, ?)',
   346   ['admin@yourdomain.com', \$hash]
   347 );
   348 echo 'Admin created.';
   349 "
   350 ```
   351 
   352 Or run directly in MySQL:
   353 ```sql
   354 INSERT INTO admins (email, password)
   355 VALUES ('admin@yourdomain.com', '$2y$10$REPLACE_WITH_BCRYPT_HASH');
   356 ```
   357 
   358 Then login at: `https://sqrm.srpdigitalstudios.qzz.io/admin1`
   359 
   360 > **URL note:** `/admin` returns a 404. Admin login is only at `/admin1`.
   361 
   362 ---
   363 
   364 ## 10. Feature Reference
   365 
   366 ### Owner Features
   367 
   368 | Feature | Free | Basic | Premium |
   369 |---------|------|-------|---------|
   370 | Restaurants | 1 | 5 | Unlimited |
   371 | Menu Items | 20 | Unlimited | Unlimited |
   372 | QR Code Generation | ✅ | ✅ | ✅ |
   373 | Customer Ordering | ✅ | ✅ | ✅ |
   374 | Live Order Tracking | ✅ | ✅ | ✅ |
   375 | Daily & Monthly Earnings | ✅ | ✅ | ✅ |
   376 | Customer Ratings & Reviews | ✅ | ✅ | ✅ |
   377 | PDF Receipt per Order | ✅ | ✅ | ✅ |
   378 | Monthly Analytics Dashboard | ❌ | ✅ | ✅ |
   379 | Best Selling Items Report | ❌ | ✅ | ✅ |
   380 | Menu Categories | ❌ | ✅ | ✅ |
   381 | Order History & Filters | ❌ | ✅ | ✅ |
   382 | Lifetime Analytics | ❌ | ❌ | ✅ |
   383 | Popular Categories Insights | ❌ | ❌ | ✅ |
   384 | Most Active Hours Report | ❌ | ❌ | ✅ |
   385 | Custom Restaurant Theme Color | ❌ | ❌ | ✅ |
   386 
   387 ### Plan Upgrade Flow
   388 Clicking **Basic** or **Premium** plan on the homepage redirects to WhatsApp:
   389 ```
   390 https://wa.me/{WHATSAPP_NUMBER}?text=I+would+like+to+purchase+Basic+plan
   391 ```
   392 The WhatsApp number is set in Admin → Settings → WhatsApp Number (include country code, e.g. `919876543210`).
   393 
   394 ---
   395 
   396 ## 11. URL / Route Reference
   397 
   398 ### Public
   399 | URL | Description |
   400 |-----|-------------|
   401 | `/` | Homepage (hero, search, plans, features) |
   402 | `/restaurants` | Search all restaurants |
   403 | `/r/{slug}` | Restaurant public profile + reviews |
   404 | `/m/{slug}` | Restaurant menu page (cart + ordering) |
   405 | `/cart` | Cart & order placement |
   406 | `/order/{token}` | Order status tracking |
   407 | `/privacy-policy` | Privacy policy |
   408 | `/cookie-policy` | Cookie policy |
   409 | `/sitemap.xml` | XML sitemap (auto-generated) |
   410 
   411 ### Owner (require Google login + phone verification)
   412 | URL | Description |
   413 |-----|-------------|
   414 | `/owner/login` | Google OAuth login |
   415 | `/owner/dashboard` | Owner home |
   416 | `/owner/profile` | Edit profile, delete account |
   417 | `/owner/restaurants` | List all restaurants |
   418 | `/owner/restaurants/create` | Create new restaurant |
   419 | `/owner/restaurants/{id}/edit` | Edit restaurant |
   420 | `/owner/restaurants/{id}/menu` | Manage menu items & categories |
   421 | `/owner/restaurants/{id}/orders` | Live order management |
   422 | `/owner/restaurants/{id}/qr` | QR code generator & download |
   423 
   424 ### Admin (email + password, `/admin1` only)
   425 | URL | Description |
   426 |-----|-------------|
   427 | `/admin1` | Admin login |
   428 | `/admin1/dashboard` | Stats overview |
   429 | `/admin1/owners` | All owners + plan assignment |
   430 | `/admin1/owners/{id}` | Owner detail + their restaurants |
   431 | `/admin1/restaurants` | Suspend/reactivate restaurants |
   432 | `/admin1/reviews` | Review moderation |
   433 | `/admin1/settings` | Site name, logo, support info, maintenance mode |
   434 
   435 ---
   436 
   437 ## 12. API Endpoints
   438 
   439 All API endpoints return JSON. CSRF token required for POST requests (pass as `csrf_token` form field).
   440 
   441 ### Customer / Public
   442 | Method | URL | Description |
   443 |--------|-----|-------------|
   444 | `POST` | `/api/order/place` | Place a new order |
   445 | `GET`  | `/api/order/status?token={token}` | Poll order status |
   446 | `POST` | `/api/review/submit` | Submit a review after order completion |
   447 
   448 ### Owner
   449 | Method | URL | Description |
   450 |--------|-----|-------------|
   451 | `POST` | `/api/order/update` | Accept/reject/complete an order |
   452 | `GET`  | `/api/orders/pending?restaurant_id={id}` | Poll pending order count (for sound alert) |
   453 | `GET`  | `/api/menu/items?restaurant_id={id}` | Get menu items |
   454 | `POST` | `/api/menu/item/add` | Add menu item |
   455 | `POST` | `/api/menu/item/edit` | Edit menu item |
   456 | `POST` | `/api/menu/item/delete` | Delete menu item |
   457 | `POST` | `/api/menu/category/add` | Add category |
   458 | `POST` | `/api/menu/category/delete` | Delete category |
   459 | `GET`  | `/api/order/bill?order_id={id}` | Get HTML bill for PDF export |
   460 
   461 ### Admin
   462 | Method | URL | Description |
   463 |--------|-----|-------------|
   464 | `POST` | `/admin1/reviews/delete` | Delete a review (with `review_id`) |
   465 | `POST` | `/admin1/owners/assign-plan` | Assign plan to owner |
   466 | `POST` | `/admin1/restaurants/{id}/suspend` | Suspend restaurant |
   467 | `POST` | `/admin1/restaurants/{id}/reactivate` | Reactivate restaurant |
   468 | `POST` | `/admin1/settings/maintenance` | Toggle maintenance mode |
   469 
   470 ---
   471 
   472 ## 13. Subscription Plans
   473 
   474 Plans are assigned by the super admin. They auto-expire **30 days** after assignment.
   475 
   476 ```
   477 Plan: free   → free forever
   478 Plan: basic  → ₹29/month, expires 30 days from assignment
   479 Plan: premium → ₹49/month, expires 30 days from assignment
   480 ```
   481 
   482 When a plan expires, the system falls back to `free` limits. Features not available in the current plan are displayed as locked/blurred overlays in the owner dashboard.
   483 
   484 To manually extend a plan, the admin simply re-assigns it (resets the 30-day clock).
   485 
   486 ---
   487 
   488 ## 14. File Uploads & WebP Conversion
   489 
   490 All uploaded images (restaurant logos and menu item images) are automatically converted to **WebP format** using PHP's GD library.
   491 
   492 **Conversion rules:**
   493 - Supported input: JPEG, PNG, GIF, WEBP, BMP
   494 - Output: `.webp` at 80% quality
   495 - Max file size: 5 MB
   496 - Images saved to `public/uploads/logos/` or `public/uploads/menu/`
   497 
   498 **Ensure GD is enabled:**
   499 ```bash
   500 php -m | grep gd
   501 ```
   502 If missing, install it:
   503 ```bash
   504 sudo apt install php8.1-gd   # Ubuntu/Debian
   505 sudo yum install php-gd      # CentOS/RHEL
   506 ```
   507 
   508 **Site logo** (uploaded by admin) is saved to `public/uploads/site/`.
   509 
   510 ---
   511 
   512 ## 15. PWA & Offline Support
   513 
   514 SQRM is a full **Progressive Web App** (PWA).
   515 
   516 ### Features
   517 - **Add to Home Screen** — prompt shown to mobile users (dismissible, stored in `localStorage`)
   518 - **Service Worker** (`/sw.js`) — network-first strategy with cache fallback
   519 - **Offline banner** — yellow banner shown when `navigator.onLine` is false; disappears on reconnect
   520 - **Offline page** (`/offline.html`) — shown when navigation request fails with no cache
   521 
   522 ### Cache Strategy
   523 - Static assets cached on install (`style.css`, `app.js`, `offline.html`)
   524 - Dynamic pages cached on first visit (network-first)
   525 - API endpoints (`/api/*`) are never cached
   526 
   527 ### To update the service worker cache version:
   528 In `public/sw.js`, increment the cache names:
   529 ```js
   530 const CACHE_NAME   = 'sqrm-v2';   // bump this
   531 const STATIC_CACHE = 'sqrm-static-v2';
   532 ```
   533 
   534 ---
   535 
   536 ## 16. Order Flow
   537 
   538 ```
   539 Customer at table
   540     │
   541     ▼
   542 Scans QR code ──► /m/{slug} (Menu Page)
   543     │
   544     ▼
   545 Adds items to cart (stored in localStorage)
   546     │
   547     ▼
   548 /cart — enters Name, Phone, Payment Method
   549     │         (Online shows owner payment info; no gateway)
   550     ▼
   551 POST /api/order/place
   552     │
   553     ▼
   554 Redirect to /order/{unique_token}
   555     │
   556     ▼ (polls /api/order/status every 3s)
   557 Status: PENDING
   558     │
   559     ▼ (Owner dashboard polls /api/orders/pending every 4s)
   560 Owner hears ding.mp3 (new order sound)
   561     │
   562    [Owner clicks Accept]          [Owner clicks Reject]
   563     │                                     │
   564     ▼                                     ▼
   565 Status: ACCEPTED                   Owner enters reason
   566     │                              Status: REJECTED
   567     │                              Customer sees reason
   568     │                              + restaurant phone number
   569     │
   570    [Owner clicks Given/Completed]
   571     │
   572     ▼
   573 Status: COMPLETED
   574 PDF bill available for download (client-side jsPDF)
   575 Review popup shown to customer (optional)
   576 ```
   577 
   578 ### Order Status Values
   579 | Status | Meaning |
   580 |--------|---------|
   581 | `pending` | Submitted, waiting for owner |
   582 | `accepted` | Owner accepted the order |
   583 | `rejected` | Owner rejected (with reason) |
   584 | `completed` | Order delivered, bill generated |
   585 
   586 ---
   587 
   588 ## 17. QR Code System
   589 
   590 QR codes are generated client-side using **QRCode.js** (loaded from CDN on the QR page).
   591 
   592 ### Branded QR Design Includes:
   593 - Restaurant logo (circular, with orange border)
   594 - Restaurant name
   595 - Location
   596 -<response clipped><NOTE>To save on context only part of this file has been shown to you. You should retry this tool after you have searched inside the file with `grep -n` in order to find the line numbers of what you are looking for.</NOTE>

</observation>