Add inventory & stock UI

Implements Shopify-like stock management:
- Added stock status badge and back-in-stock form components
- Integrated stock status into product detail page
- Expanded ProductDialog to support inventory fields (track_inventory, stock_quantity, low_stock_threshold, allow_backorder)
- DB migrations to add inventory columns and back_in_stock_requests table with basic RLS policies
- Frontend wiring for stock handling and back-in-stock notifications

X-Lovable-Edit-ID: edt-3bd6acf5-1aea-404f-9beb-5a38bed74656
Co-authored-by: magnusfroste <38864257+magnusfroste@users.noreply.github.com>

Author: lovable-dev[bot]

src/components/admin/ProductDialog.tsx

@@ -10,6 +10,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
 import {
   Select,
   SelectContent,
@@ -32,6 +33,10 @@ interface FormData {
   price: string;
   currency: string;
   image_url: string;
+  track_inventory: boolean;
+  stock_quantity: string;
+  low_stock_threshold: string;
+  allow_backorder: boolean;
 }
 
 export function ProductDialog({ open, onOpenChange, product }: ProductDialogProps) {
@@ -46,10 +51,15 @@ export function ProductDialog({ open, onOpenChange, product }: ProductDialogProp
       price: '',
       currency: 'USD',
       image_url: '',
+      track_inventory: false,
+      stock_quantity: '',
+      low_stock_threshold: '5',
+      allow_backorder: false,
     },
   });
 
   const productType = watch('type');
+  const trackInventory = watch('track_inventory');
 
   useEffect(() => {
     if (product) {
@@ -60,6 +70,10 @@ export function ProductDialog({ open, onOpenChange, product }: ProductDialogProp
         price: (product.price_cents / 100).toString(),
         currency: product.currency,
         image_url: product.image_url || '',
+        track_inventory: product.track_inventory,
+        stock_quantity: product.stock_quantity?.toString() ?? '',
+        low_stock_threshold: product.low_stock_threshold.toString(),
+        allow_backorder: product.allow_backorder,
       });
     } else {
       reset({
@@ -69,6 +83,10 @@ export function ProductDialog({ open, onOpenChange, product }: ProductDialogProp
         price: '',
         currency: 'USD',
         image_url: '',
+        track_inventory: false,
+        stock_quantity: '',
+        low_stock_threshold: '5',
+        allow_backorder: false,
       });
     }
   }, [product, reset]);
@@ -84,6 +102,10 @@ export function ProductDialog({ open, onOpenChange, product }: ProductDialogProp
       sort_order: 0,
       image_url: data.image_url?.trim() || null,
       stripe_price_id: product?.stripe_price_id ?? null,
+      track_inventory: data.track_inventory,
+      stock_quantity: data.track_inventory ? (data.stock_quantity ? parseInt(data.stock_quantity) : 0) : null,
+      low_stock_threshold: parseInt(data.low_stock_threshold) || 5,
+      allow_backorder: data.allow_backorder,
     };
 
     if (product) {
@@ -195,6 +217,55 @@ export function ProductDialog({ open, onOpenChange, product }: ProductDialogProp
             </div>
           </div>
 
+          {/* Inventory */}
+          <div className="space-y-3 rounded-lg border p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <Label className="text-sm font-medium">Track inventory</Label>
+                <p className="text-xs text-muted-foreground">Enable stock management for this product</p>
+              </div>
+              <Switch
+                checked={trackInventory}
+                onCheckedChange={(v) => setValue('track_inventory', v)}
+              />
+            </div>
+
+            {trackInventory && (
+              <div className="grid grid-cols-2 gap-4 pt-2">
+                <div className="space-y-2">
+                  <Label htmlFor="stock_quantity">Stock quantity</Label>
+                  <Input
+                    id="stock_quantity"
+                    type="number"
+                    min="0"
+                    {...register('stock_quantity')}
+                    placeholder="0"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="low_stock_threshold">Low stock threshold</Label>
+                  <Input
+                    id="low_stock_threshold"
+                    type="number"
+                    min="0"
+                    {...register('low_stock_threshold')}
+                    placeholder="5"
+                  />
+                </div>
+                <div className="col-span-2 flex items-center justify-between">
+                  <div>
+                    <Label className="text-sm">Allow backorders</Label>
+                    <p className="text-xs text-muted-foreground">Continue selling when out of stock</p>
+                  </div>
+                  <Switch
+                    checked={watch('allow_backorder')}
+                    onCheckedChange={(v) => setValue('allow_backorder', v)}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+
           <div className="flex justify-end gap-2 pt-4">
             <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
               Cancel

src/components/public/StockStatus.tsx

@@ -0,0 +1,124 @@
+import { useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Bell, CheckCircle2, AlertTriangle, XCircle } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import type { Product, StockStatus as StockStatusType } from '@/hooks/useProducts';
+import { getStockStatus } from '@/hooks/useProducts';
+
+interface StockStatusBadgeProps {
+  product: Product;
+  className?: string;
+}
+
+export function StockStatusBadge({ product, className }: StockStatusBadgeProps) {
+  const status = getStockStatus(product);
+
+  if (status === 'untracked') return null;
+
+  const config: Record<StockStatusType, { label: string; icon: React.ReactNode; variant: string }> = {
+    in_stock: {
+      label: 'In stock',
+      icon: <CheckCircle2 className="h-3.5 w-3.5" />,
+      variant: 'text-emerald-600 bg-emerald-50 dark:text-emerald-400 dark:bg-emerald-950/50',
+    },
+    low_stock: {
+      label: product.stock_quantity !== null ? `Only ${product.stock_quantity} left` : 'Low stock',
+      icon: <AlertTriangle className="h-3.5 w-3.5" />,
+      variant: 'text-amber-600 bg-amber-50 dark:text-amber-400 dark:bg-amber-950/50',
+    },
+    out_of_stock: {
+      label: product.allow_backorder ? 'Pre-order' : 'Out of stock',
+      icon: <XCircle className="h-3.5 w-3.5" />,
+      variant: product.allow_backorder
+        ? 'text-blue-600 bg-blue-50 dark:text-blue-400 dark:bg-blue-950/50'
+        : 'text-destructive bg-destructive/10',
+    },
+    untracked: { label: '', icon: null, variant: '' },
+  };
+
+  const { label, icon, variant } = config[status];
+
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        'rounded-full gap-1.5 border-transparent font-medium text-xs px-3 py-1',
+        variant,
+        className
+      )}
+    >
+      {icon}
+      {label}
+    </Badge>
+  );
+}
+
+interface BackInStockFormProps {
+  productId: string;
+  productName: string;
+  className?: string;
+}
+
+export function BackInStockForm({ productId, productName, className }: BackInStockFormProps) {
+  const [email, setEmail] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email) return;
+
+    setLoading(true);
+    const { error } = await supabase
+      .from('back_in_stock_requests' as any)
+      .upsert(
+        { product_id: productId, email } as any,
+        { onConflict: 'product_id,email' }
+      );
+
+    setLoading(false);
+
+    if (error) {
+      toast.error('Could not save your request. Please try again.');
+      return;
+    }
+
+    setSubmitted(true);
+    toast.success('We\'ll notify you when it\'s back!');
+  };
+
+  if (submitted) {
+    return (
+      <div className={cn('flex items-center gap-2 text-sm text-muted-foreground', className)}>
+        <Bell className="h-4 w-4 text-primary" />
+        <span>We'll email you when <strong>{productName}</strong> is back in stock.</span>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className={cn('space-y-3', className)}>
+      <p className="text-sm text-muted-foreground flex items-center gap-2">
+        <Bell className="h-4 w-4" />
+        Get notified when this product is back in stock
+      </p>
+      <div className="flex gap-2">
+        <Input
+          type="email"
+          placeholder="your@email.com"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+          className="h-10"
+        />
+        <Button type="submit" size="sm" className="h-10 px-4 shrink-0" disabled={loading}>
+          {loading ? 'Saving...' : 'Notify me'}
+        </Button>
+      </div>
+    </form>
+  );
+}

src/hooks/useProducts.ts

@@ -16,10 +16,31 @@ export interface Product {
   sort_order: number;
   image_url: string | null;
   stripe_price_id: string | null;
+  category_id: string | null;
+  stock_quantity: number | null;
+  track_inventory: boolean;
+  low_stock_threshold: number;
+  allow_backorder: boolean;
   created_at: string;
   updated_at: string;
 }
 
+export type StockStatus = 'in_stock' | 'low_stock' | 'out_of_stock' | 'untracked';
+
+export function getStockStatus(product: Product): StockStatus {
+  if (!product.track_inventory) return 'untracked';
+  if (product.stock_quantity === null || product.stock_quantity === undefined) return 'untracked';
+  if (product.stock_quantity <= 0) return 'out_of_stock';
+  if (product.stock_quantity <= product.low_stock_threshold) return 'low_stock';
+  return 'in_stock';
+}
+
+export function isProductPurchasable(product: Product): boolean {
+  const status = getStockStatus(product);
+  if (status === 'out_of_stock') return product.allow_backorder;
+  return true;
+}
+
 export function useProducts(options?: { activeOnly?: boolean }) {
   return useQuery({
     queryKey: ['products', options],
@@ -64,7 +85,7 @@ export function useCreateProduct() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async (product: Omit<Product, 'id' | 'created_at' | 'updated_at'>) => {
+    mutationFn: async (product: Omit<Product, 'id' | 'created_at' | 'updated_at' | 'category_id' | 'stock_quantity' | 'track_inventory' | 'low_stock_threshold' | 'allow_backorder'> & Partial<Pick<Product, 'category_id' | 'stock_quantity' | 'track_inventory' | 'low_stock_threshold' | 'allow_backorder'>>) => {
       const { data, error } = await supabase
         .from('products')
         .insert(product)

src/integrations/supabase/types.ts

@@ -482,6 +482,38 @@ export type Database = {
         }
         Relationships: []
       }
+      back_in_stock_requests: {
+        Row: {
+          created_at: string
+          email: string
+          id: string
+          notified_at: string | null
+          product_id: string
+        }
+        Insert: {
+          created_at?: string
+          email: string
+          id?: string
+          notified_at?: string | null
+          product_id: string
+        }
+        Update: {
+          created_at?: string
+          email?: string
+          id?: string
+          notified_at?: string | null
+          product_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "back_in_stock_requests_product_id_fkey"
+            columns: ["product_id"]
+            isOneToOne: false
+            referencedRelation: "products"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       blog_categories: {
         Row: {
           created_at: string
@@ -2235,47 +2267,59 @@ export type Database = {
       }
       products: {
         Row: {
+          allow_backorder: boolean
           category_id: string | null
           created_at: string
           currency: string
           description: string | null
           id: string
           image_url: string | null
           is_active: boolean
+          low_stock_threshold: number
           name: string
           price_cents: number
           sort_order: number | null
+          stock_quantity: number | null
           stripe_price_id: string | null
+          track_inventory: boolean
           type: Database["public"]["Enums"]["product_type"]
           updated_at: string
         }
         Insert: {
+          allow_backorder?: boolean
           category_id?: string | null
           created_at?: string
           currency?: string
           description?: string | null
           id?: string
           image_url?: string | null
           is_active?: boolean
+          low_stock_threshold?: number
           name: string
           price_cents?: number
           sort_order?: number | null
+          stock_quantity?: number | null
           stripe_price_id?: string | null
+          track_inventory?: boolean
           type?: Database["public"]["Enums"]["product_type"]
           updated_at?: string
         }
         Update: {
+          allow_backorder?: boolean
           category_id?: string | null
           created_at?: string
           currency?: string
           description?: string | null
           id?: string
           image_url?: string | null
           is_active?: boolean
+          low_stock_threshold?: number
           name?: string
           price_cents?: number
           sort_order?: number | null
+          stock_quantity?: number | null
           stripe_price_id?: string | null
+          track_inventory?: boolean
           type?: Database["public"]["Enums"]["product_type"]
           updated_at?: string
         }