Build a Shopping Cart in Lovable

Build a single-seller e-commerce storefront. Stack: React + Vite + TypeScript + Tailwind + shadcn/ui (already scaffolded), React Router v6, Supabase JS client against Lovable Cloud.

## Database schema (migration: supabase/migrations/0001_shop_schema.sql)

Create six tables:

1. `products` — id (uuid pk default gen_random_uuid()), slug (text unique not null), name (text not null), description (text), price_cents (int not null check (price_cents > 0)), stock (int not null default 0 check (stock >= 0)), image_path (text), archived (bool default false), created_at (timestamptz default now()).
   RLS: enable. FOR SELECT TO anon, authenticated USING (archived = false). FOR INSERT/UPDATE/DELETE TO authenticated USING ((auth.jwt() -> 'app_metadata' ->> 'role') = 'admin').

2. `variants` — id (uuid pk default gen_random_uuid()), product_id (uuid references products.id on delete cascade not null), name (text not null), price_cents (int nullable), stock (int not null default 0 check (stock >= 0)), created_at (timestamptz default now()).
   RLS: enable. FOR SELECT TO anon, authenticated USING (EXISTS (SELECT 1 FROM products p WHERE p.id = variants.product_id AND p.archived = false)). FOR INSERT/UPDATE/DELETE TO authenticated USING ((auth.jwt() -> 'app_metadata' ->> 'role') = 'admin').

3. `carts` — id (uuid pk default gen_random_uuid()), user_id (uuid references auth.users.id on delete cascade not null unique), created_at (timestamptz default now()), updated_at (timestamptz default now()).
   RLS: enable. All operations: USING (user_id = auth.uid()) / WITH CHECK (user_id = auth.uid()).

4. `cart_items` — id (uuid pk default gen_random_uuid()), cart_id (uuid references carts.id on delete cascade not null), product_id (uuid references products.id not null), variant_id (uuid references variants.id nullable), qty (int not null check (qty > 0)), UNIQUE (cart_id, product_id, variant_id).
   RLS: enable. All operations: USING (EXISTS (SELECT 1 FROM carts c WHERE c.id = cart_items.cart_id AND c.user_id = auth.uid())).

5. `orders` — id (uuid pk default gen_random_uuid()), customer_email (text not null), customer_user_id (uuid references auth.users.id nullable), stripe_session_id (text unique not null), stripe_payment_intent_id (text unique), subtotal_cents (int not null), tax_cents (int not null default 0), total_cents (int not null), status (text not null default 'pending' check (status in ('pending','paid','fulfilled','refunded','cancelled'))), shipping_address (jsonb), placed_at (timestamptz default now()).
   RLS: enable. FOR SELECT TO authenticated USING (customer_user_id = auth.uid()). FOR SELECT admin: USING ((auth.jwt() -> 'app_metadata' ->> 'role') = 'admin'). No INSERT for clients — created by webhook only.

6. `order_items` — id (uuid pk default gen_random_uuid()), order_id (uuid references orders.id not null), product_id (uuid references products.id not null), variant_id (uuid references variants.id nullable), qty (int not null), unit_price_cents (int not null), product_name_snapshot (text not null).
   RLS: enable. FOR SELECT: inherits via order — USING (EXISTS (SELECT 1 FROM orders o WHERE o.id = order_items.order_id AND (o.customer_user_id = auth.uid() OR (auth.jwt() -> 'app_metadata' ->> 'role') = 'admin'))).

Create a stock-decrement RPC function:
CREATE OR REPLACE FUNCTION decrement_stock(p_product uuid, p_variant uuid, p_qty int)
RETURNS void
LANGUAGE plpgsql
SECURITY DEFINER
AS $$
BEGIN
  IF p_variant IS NOT NULL THEN
    UPDATE variants SET stock = stock - p_qty WHERE id = p_variant;
    IF NOT FOUND OR (SELECT stock FROM variants WHERE id = p_variant) < 0 THEN
      RAISE EXCEPTION 'insufficient_stock: variant %', p_variant;
    END IF;
  ELSE
    UPDATE products SET stock = stock - p_qty WHERE id = p_product;
    IF NOT FOUND OR (SELECT stock FROM products WHERE id = p_product) < 0 THEN
      RAISE EXCEPTION 'insufficient_stock: product %', p_product;
    END IF;
  END IF;
END;
$$;

## Layouts

`src/layouts/PublicLayout.tsx` — top nav: Logo / Shop link / Cart icon (from lucide-react) with count badge / Sign in button. Cart icon opens CartDrawer (Sheet from right). Footer with copyright.

`src/layouts/AdminLayout.tsx` — sidebar: Products / Orders / Settings. Protected by AdminGuard that checks app_metadata.role === 'admin'.

## Pages (add to src/App.tsx)

- `/` — Catalog.tsx: product grid (3-col desktop, 1-col mobile), each card shows image (from Storage public URL), name, price. Use shadcn Card. Empty state when no products.
- `/product/[slug]` — ProductDetail.tsx: large image, name, description, price, stock count. If product has variants, show VariantSelector. Add to Cart button: signed-in → insert/update cart_items in DB; guest → write to localStorage as JSON array [{product_id, variant_id, qty}]. Show CartDrawer on success.
- `/cart` — Cart.tsx: reads from DB (signed-in) or localStorage (guest). CartItemRow for each line item with qty stepper and remove button. Order subtotal. 'Checkout' button → POSTs to create-checkout-session edge function.
- `/checkout` — Checkout.tsx: simple redirect wrapper — on mount it calls create-checkout-session and redirects to Stripe Checkout URL. Shows loading spinner.
- `/success` — Success.tsx: reads session_id from URL query param, shows 'Order confirmed!' message and links to /orders.
- `/orders` — Orders.tsx: signed-in only (redirect to /signin if not). Table of past orders with status badges.
- `/signin` and `/signup` — basic email+password forms. On successful sign-in, call the cart-merge logic (see useCart hook).
- `/admin/products` — admin/Products.tsx: table of all products with edit Sheet (name, price, stock, image upload, archived toggle). Add Product button.
- `/admin/orders` — admin/Orders.tsx: table of all orders with status filter chips and update button.

## Key components and hooks

`src/hooks/useCart.ts` — manages dual-mode cart:
- If signed in: read/write cart_items from DB via Supabase JS. Use supabase.from('carts').select('*, cart_items(*, products(*), variants(*))') joined.
- If guest: read/write from localStorage key 'cart_items' as JSON.
- Export: { items, addItem, updateQty, removeItem, clearCart, mergeGuestCart, cartCount, subtotalCents }.
- mergeGuestCart(): called after sign-in. Reads localStorage, upserts each item into the DB cart using INSERT INTO cart_items ON CONFLICT (cart_id, product_id, variant_id) DO UPDATE SET qty = cart_items.qty + EXCLUDED.qty, then clears localStorage.

`src/components/CartDrawer.tsx` — Sheet from right. Shows cart items from useCart, qty steppers, subtotal, 'Go to Cart' button.

`src/components/CartItemRow.tsx` — image thumbnail, name + variant, unit price, qty stepper, remove button.

`src/components/ProductCard.tsx` — product image, name, price. Click → /product/[slug].

`src/components/VariantSelector.tsx` — renders variant chips (e.g. Size: S / M / L). Updates selected variant state.

`src/components/AdminGuard.tsx` — reads JWT app_metadata.role, redirects to /unauthorized if not admin.

## Edge functions

`supabase/functions/create-checkout-session/index.ts` — POST JSON { cart_items: [{product_id, variant_id, qty, name, unit_price_cents}], customer_email, shipping_address, customer_user_id (nullable) }. Steps:
1. CORS preflight.
2. Use service-role Supabase client.
3. Validate each cart_item: fetch product (and variant if set), check archived=false and stock > 0.
4. Create Stripe Checkout Session: mode: 'payment', line_items from cart, automatic_payment_methods: { enabled: true } (do NOT set payment_method_types — these conflict in 2024+ Stripe API), success_url: SITE_URL + '/success?session_id={CHECKOUT_SESSION_ID}', cancel_url: SITE_URL + '/cart', metadata: { cart_items: JSON.stringify(cart_items), customer_user_id: customer_user_id ?? '', customer_email }.
5. Return { url: session.url } to client which immediately redirects.

`supabase/functions/stripe-webhook/index.ts` — CRITICAL: (1) const rawBody = await req.text(); MUST be line 1. (2) CORS preflight. (3) const sig = req.headers.get('stripe-signature'); (4) const event = await stripe.webhooks.constructEventAsync(rawBody, sig, Deno.env.get('STRIPE_WEBHOOK_SECRET')); — use constructEventAsync, NOT constructEvent. (5) On event.type === 'checkout.session.completed': parse metadata from event.data.object.metadata. (6) INSERT INTO orders (..., stripe_session_id) ON CONFLICT (stripe_session_id) DO NOTHING — idempotent. (7) For each cart_item in metadata: INSERT INTO order_items (..., product_name_snapshot). (8) Call decrement_stock RPC for each line item: supabase.rpc('decrement_stock', { p_product: product_id, p_variant: variant_id, p_qty: qty }). On exception ('insufficient_stock'), call stripe.refunds.create({ payment_intent: event.data.object.payment_intent }) and update order.status='refunded'. (9) Send confirmation email via Resend. (10) Return 200.

## Styling

Clean commerce: white background, slate text, single indigo-600 accent. Product grid: rounded-xl cards with shadow-sm on hover. Cart drawer: clean list, line items left-aligned with price right-aligned. Admin: table-heavy, desktop-first. Use shadcn Card, Sheet, Dialog, Badge, Toast, Skeleton, Table.

Generate migration (with decrement_stock function) first, then layouts, then pages in order, then edge functions.