Add dares feature schema and admin portal

apps/admin/src/App.tsx

@@ -7,6 +7,8 @@ import { DashboardPage } from '@/pages/DashboardPage';
 import { CategoriesPage } from '@/pages/content/CategoriesPage';
 import { PacksPage } from '@/pages/content/PacksPage';
 import { QuestionsPage } from '@/pages/content/QuestionsPage';
+import { DarePacksPage } from '@/pages/content/DarePacksPage';
+import { DaresPage } from '@/pages/content/DaresPage';
 import { UsersPage } from '@/pages/users/UsersPage';
 import { UserDetailPage } from '@/pages/users/UserDetailPage';
 import { MatchChatPage } from '@/pages/users/MatchChatPage';
@@ -64,6 +66,22 @@ function App() {
                                 </ProtectedRoute>
                             }
                         />
+                        <Route
+                            path="/dare-packs"
+                            element={
+                                <ProtectedRoute requiredPermission={PERMISSION_KEYS.MANAGE_PACKS}>
+                                    <DarePacksPage />
+                                </ProtectedRoute>
+                            }
+                        />
+                        <Route
+                            path="/dare-packs/:packId/dares"
+                            element={
+                                <ProtectedRoute requiredPermission={PERMISSION_KEYS.MANAGE_QUESTIONS}>
+                                    <DaresPage />
+                                </ProtectedRoute>
+                            }
+                        />
 
                         {/* User management */}
                         <Route

apps/admin/src/components/layout/Sidebar.tsx

@@ -18,6 +18,7 @@ import {
     Home,
     Activity,
     AlertTriangle,
+    Zap,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
@@ -47,6 +48,12 @@ const contentNav: NavItem[] = [
         icon: <LayoutGrid className="h-5 w-5" />,
         requiredPermission: PERMISSION_KEYS.MANAGE_CATEGORIES,
     },
+    {
+        label: 'Dare Packs',
+        href: '/dare-packs',
+        icon: <Zap className="h-5 w-5" />,
+        requiredPermission: PERMISSION_KEYS.MANAGE_PACKS,
+    },
 ];
 
 const usersNav: NavItem[] = [

apps/admin/src/pages/content/DarePacksPage.tsx

@@ -0,0 +1,578 @@
+import { useEffect, useState, useCallback } from 'react';
+import { Link } from 'react-router-dom';
+import { supabase } from '@/config';
+import { auditedSupabase } from '@/hooks/useAuditedSupabase';
+import { useEntityForm } from '@/hooks/useEntityForm';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Switch } from '@/components/ui/switch';
+import { IconPicker, IconPreview } from '@/components/ui/icon-picker';
+import { Skeleton } from '@/components/ui/skeleton';
+import { PaginationControls } from '@/components/ui/pagination';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import { Plus, Zap, Pencil, Trash2, Loader2, Crown, Eye, EyeOff, Flame, Heart, ChevronUp, ChevronDown } from 'lucide-react';
+import { toast } from 'sonner';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface Category {
+    id: string;
+    name: string;
+}
+
+interface DarePack {
+    id: string;
+    name: string;
+    description: string | null;
+    icon: string | null;
+    is_premium: boolean;
+    is_public: boolean;
+    is_explicit: boolean;
+    sort_order: number;
+    category_id: string | null;
+    min_intensity: number | null;
+    max_intensity: number | null;
+    avg_intensity: number | null;
+    created_at: string | null;
+    dare_count?: number;
+}
+
+interface DarePackFormData {
+    name: string;
+    description: string;
+    icon: string;
+    is_premium: boolean;
+    is_public: boolean;
+    is_explicit: boolean;
+    category_id: string;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export function DarePacksPage() {
+    // Data state
+    const [darePacks, setDarePacks] = useState<DarePack[]>([]);
+    const [categories, setCategories] = useState<Category[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(12);
+    const [totalCount, setTotalCount] = useState(0);
+
+    // Form state using the hook
+    const form = useEntityForm<DarePackFormData, DarePack>(
+        {
+            name: '',
+            description: '',
+            icon: 'flame-outline',
+            is_premium: false,
+            is_public: false,
+            is_explicit: false,
+            category_id: '',
+        },
+        (pack) => ({
+            name: pack.name,
+            description: pack.description || '',
+            icon: pack.icon || 'flame-outline',
+            is_premium: pack.is_premium,
+            is_public: pack.is_public,
+            is_explicit: pack.is_explicit,
+            category_id: pack.category_id || '',
+        })
+    );
+
+    // =============================================================================
+    // Data Fetching
+    // =============================================================================
+
+    const fetchData = useCallback(async () => {
+        setLoading(true);
+        try {
+            const from = (page - 1) * pageSize;
+            const to = from + pageSize - 1;
+
+            // Fetch dare packs
+            const { data: packData, error, count } = await supabase
+                .from('dare_packs')
+                .select('*', { count: 'exact' })
+                .order('sort_order', { ascending: true })
+                .range(from, to);
+
+            if (error) throw error;
+
+            setTotalCount(count || 0);
+
+            // Fetch dare counts
+            const packIds = (packData || []).map(p => p.id);
+            const dareCounts: Record<string, number> = {};
+
+            if (packIds.length > 0) {
+                const { data: dares } = await supabase
+                    .from('dares')
+                    .select('pack_id')
+                    .in('pack_id', packIds);
+
+                dares?.forEach(d => {
+                    dareCounts[d.pack_id] = (dareCounts[d.pack_id] || 0) + 1;
+                });
+            }
+
+            // Fetch categories
+            const { data: categoryData } = await supabase
+                .from('categories')
+                .select('id, name')
+                .order('name');
+
+            setCategories(categoryData || []);
+
+            setDarePacks(
+                (packData || []).map(p => ({
+                    ...p,
+                    dare_count: dareCounts[p.id] || 0,
+                }))
+            );
+        } catch (error) {
+            toast.error('Failed to load dare packs');
+            console.error(error);
+        } finally {
+            setLoading(false);
+        }
+    }, [page, pageSize]);
+
+    useEffect(() => {
+        fetchData();
+    }, [fetchData]);
+
+    useEffect(() => {
+        const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+        if (page > totalPages) {
+            setPage(totalPages);
+        }
+    }, [page, pageSize, totalCount]);
+
+    // =============================================================================
+    // Handlers
+    // =============================================================================
+
+    const handleSave = async () => {
+        if (!form.formData.name.trim()) {
+            toast.error('Name is required');
+            return;
+        }
+
+        form.setSaving(true);
+        try {
+            if (form.editingItem) {
+                const { error } = await auditedSupabase.update('dare_packs', form.editingItem.id, {
+                    name: form.formData.name,
+                    description: form.formData.description || null,
+                    icon: form.formData.icon || null,
+                    is_premium: form.formData.is_premium,
+                    is_public: form.formData.is_public,
+                    is_explicit: form.formData.is_explicit,
+                    category_id: form.formData.category_id || null,
+                });
+                if (error) throw error;
+                toast.success('Dare pack updated');
+            } else {
+                const { error } = await auditedSupabase.insert('dare_packs', {
+                    name: form.formData.name,
+                    description: form.formData.description || null,
+                    icon: form.formData.icon || null,
+                    is_premium: form.formData.is_premium,
+                    is_public: form.formData.is_public,
+                    is_explicit: form.formData.is_explicit,
+                    category_id: form.formData.category_id || null,
+                    sort_order: totalCount,
+                });
+                if (error) throw error;
+                toast.success('Dare pack created');
+            }
+
+            form.close();
+            fetchData();
+        } catch (error) {
+            toast.error('Failed to save dare pack');
+            console.error(error);
+        } finally {
+            form.setSaving(false);
+        }
+    };
+
+    const handleDelete = async (pack: DarePack) => {
+        if (!confirm(`Delete dare pack "${pack.name}"? This will delete all dares in this pack.`)) {
+            return;
+        }
+
+        try {
+            const { error } = await auditedSupabase.delete('dare_packs', pack.id);
+            if (error) throw error;
+            toast.success('Dare pack deleted');
+            fetchData();
+        } catch (error) {
+            toast.error('Failed to delete dare pack');
+            console.error(error);
+        }
+    };
+
+    const handleMove = async (pack: DarePack, direction: 'up' | 'down') => {
+        const currentIndex = darePacks.findIndex(p => p.id === pack.id);
+        const targetIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1;
+
+        if (targetIndex < 0 || targetIndex >= darePacks.length) return;
+
+        const targetPack = darePacks[targetIndex];
+
+        try {
+            const currentOrder = pack.sort_order ?? currentIndex;
+            const targetOrder = targetPack.sort_order ?? targetIndex;
+
+            await Promise.all([
+                auditedSupabase.update('dare_packs', pack.id, { sort_order: targetOrder }),
+                auditedSupabase.update('dare_packs', targetPack.id, { sort_order: currentOrder }),
+            ]);
+
+            // Optimistic update
+            const newPacks = [...darePacks];
+            [newPacks[currentIndex], newPacks[targetIndex]] = [newPacks[targetIndex], newPacks[currentIndex]];
+            setDarePacks(newPacks);
+        } catch (error) {
+            toast.error('Failed to reorder dare packs');
+            console.error(error);
+            fetchData();
+        }
+    };
+
+    const getIntensityColor = (avg: number | null) => {
+        if (avg === null) return 'bg-muted';
+        if (avg <= 1.5) return 'bg-green-500';
+        if (avg <= 2.5) return 'bg-lime-500';
+        if (avg <= 3.5) return 'bg-yellow-500';
+        if (avg <= 4.5) return 'bg-orange-500';
+        return 'bg-red-500';
+    };
+
+    // =============================================================================
+    // Render
+    // =============================================================================
+
+    if (loading) {
+        return (
+            <div className="space-y-6">
+                <div className="flex items-center justify-between">
+                    <Skeleton className="h-9 w-48" />
+                    <Skeleton className="h-10 w-40" />
+                </div>
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                    {[1, 2, 3].map(i => (
+                        <Skeleton key={i} className="h-48" />
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-6">
+            {/* Header */}
+            <div className="flex items-center justify-between">
+                <div>
+                    <h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
+                        <Zap className="h-8 w-8 text-orange-500" />
+                        Dare Packs
+                    </h1>
+                    <p className="text-muted-foreground">
+                        Manage dare packs that users can send to their partners
+                    </p>
+                </div>
+                <Dialog open={form.dialogOpen} onOpenChange={form.setDialogOpen}>
+                    <DialogTrigger asChild>
+                        <Button onClick={form.openCreate}>
+                            <Plus className="mr-2 h-4 w-4" />
+                            Add Dare Pack
+                        </Button>
+                    </DialogTrigger>
+                    <DialogContent>
+                        <DialogHeader>
+                            <DialogTitle>
+                                {form.isEditing ? 'Edit Dare Pack' : 'Create Dare Pack'}
+                            </DialogTitle>
+                            <DialogDescription>
+                                {form.isEditing
+                                    ? 'Update the dare pack details below.'
+                                    : 'Add a new dare pack for couples to challenge each other.'}
+                            </DialogDescription>
+                        </DialogHeader>
+
+                        <div className="space-y-4 py-4">
+                            <div className="space-y-2">
+                                <Label>Icon</Label>
+                                <IconPicker
+                                    value={form.formData.icon}
+                                    onChange={(iconName) => form.setField('icon', iconName)}
+                                />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="name">Name</Label>
+                                <Input
+                                    id="name"
+                                    value={form.formData.name}
+                                    onChange={(e) => form.setField('name', e.target.value)}
+                                    placeholder="e.g., Romantic Dares"
+                                />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="description">Description</Label>
+                                <Textarea
+                                    id="description"
+                                    value={form.formData.description}
+                                    onChange={(e) => form.setField('description', e.target.value)}
+                                    placeholder="Describe this dare pack..."
+                                    rows={3}
+                                />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>Category (optional)</Label>
+                                <Select
+                                    value={form.formData.category_id}
+                                    onValueChange={(value) => form.setField('category_id', value)}
+                                >
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Select a category" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="">No category</SelectItem>
+                                        {categories.map((cat) => (
+                                            <SelectItem key={cat.id} value={cat.id}>
+                                                {cat.name}
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="flex items-center justify-between">
+                                <div className="space-y-0.5">
+                                    <Label>Premium</Label>
+                                    <p className="text-xs text-muted-foreground">
+                                        Only available to premium users
+                                    </p>
+                                </div>
+                                <Switch
+                                    checked={form.formData.is_premium}
+                                    onCheckedChange={(checked) => form.setField('is_premium', checked)}
+                                />
+                            </div>
+
+                            <div className="flex items-center justify-between">
+                                <div className="space-y-0.5">
+                                    <Label>Published</Label>
+                                    <p className="text-xs text-muted-foreground">
+                                        Visible to users in the app
+                                    </p>
+                                </div>
+                                <Switch
+                                    checked={form.formData.is_public}
+                                    onCheckedChange={(checked) => form.setField('is_public', checked)}
+                                />
+                            </div>
+
+                            <div className="flex items-center justify-between">
+                                <div className="space-y-0.5">
+                                    <Label>Explicit</Label>
+                                    <p className="text-xs text-muted-foreground">
+                                        Contains adult/explicit content
+                                    </p>
+                                </div>
+                                <Switch
+                                    checked={form.formData.is_explicit}
+                                    onCheckedChange={(checked) => form.setField('is_explicit', checked)}
+                                />
+                            </div>
+                        </div>
+
+                        <DialogFooter>
+                            <Button variant="outline" onClick={form.close}>
+                                Cancel
+                            </Button>
+                            <Button onClick={handleSave} disabled={form.saving}>
+                                {form.saving ? (
+                                    <>
+                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                        Saving...
+                                    </>
+                                ) : (
+                                    'Save'
+                                )}
+                            </Button>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
+            </div>
+
+            {/* Dare Packs Grid */}
+            {darePacks.length === 0 ? (
+                <Card className="flex flex-col items-center justify-center py-12">
+                    <Zap className="h-12 w-12 text-muted-foreground mb-4" />
+                    <h3 className="text-lg font-semibold">No dare packs yet</h3>
+                    <p className="text-muted-foreground mb-4">
+                        Create your first dare pack to get started
+                    </p>
+                    <Button onClick={form.openCreate}>
+                        <Plus className="mr-2 h-4 w-4" />
+                        Add Dare Pack
+                    </Button>
+                </Card>
+            ) : (
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                    {darePacks.map((pack, index) => (
+                        <Card key={pack.id} className="group hover:shadow-md transition-shadow">
+                            <CardHeader className="pb-3">
+                                <div className="flex items-start justify-between">
+                                    <div className="flex items-center gap-2">
+                                        <div className="flex flex-col opacity-0 group-hover:opacity-100 transition-opacity">
+                                            <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                className="h-6 w-6"
+                                                onClick={() => handleMove(pack, 'up')}
+                                                disabled={index === 0}
+                                            >
+                                                <ChevronUp className="h-4 w-4" />
+                                            </Button>
+                                            <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                className="h-6 w-6"
+                                                onClick={() => handleMove(pack, 'down')}
+                                                disabled={index === darePacks.length - 1}
+                                            >
+                                                <ChevronDown className="h-4 w-4" />
+                                            </Button>
+                                        </div>
+                                        <div className="text-4xl mb-2">
+                                            <IconPreview value={pack.icon} fallback="flame-outline" className="text-4xl" />
+                                        </div>
+                                    </div>
+                                    <div className="flex items-center gap-1">
+                                        {pack.is_premium && (
+                                            <Badge variant="default" className="bg-amber-500">
+                                                <Crown className="h-3 w-3 mr-1" />
+                                                Premium
+                                            </Badge>
+                                        )}
+                                        {pack.is_public ? (
+                                            <Badge variant="outline" className="border-green-500 text-green-400">
+                                                <Eye className="h-3 w-3 mr-1" />
+                                                Published
+                                            </Badge>
+                                        ) : (
+                                            <Badge variant="secondary">
+                                                <EyeOff className="h-3 w-3 mr-1" />
+                                                Draft
+                                            </Badge>
+                                        )}
+                                        {pack.is_explicit ? (
+                                            <Badge variant="outline" className="border-red-500 text-red-400">
+                                                <Flame className="h-3 w-3 mr-1" />
+                                                Explicit
+                                            </Badge>
+                                        ) : (
+                                            <Badge variant="outline" className="border-pink-400 text-pink-300">
+                                                <Heart className="h-3 w-3 mr-1" />
+                                                Safe
+                                            </Badge>
+                                        )}
+                                    </div>
+                                </div>
+                                <div className="flex items-start justify-between">
+                                    <CardTitle className="flex-1">{pack.name}</CardTitle>
+                                    <div className="opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
+                                        <Button
+                                            variant="ghost"
+                                            size="icon"
+                                            onClick={() => form.openEdit(pack)}
+                                        >
+                                            <Pencil className="h-4 w-4" />
+                                        </Button>
+                                        <Button
+                                            variant="ghost"
+                                            size="icon"
+                                            onClick={() => handleDelete(pack)}
+                                        >
+                                            <Trash2 className="h-4 w-4 text-destructive" />
+                                        </Button>
+                                    </div>
+                                </div>
+                                <CardDescription className="line-clamp-2">
+                                    {pack.description || 'No description'}
+                                </CardDescription>
+                                {/* Intensity indicator */}
+                                {pack.avg_intensity !== null && (
+                                    <div className="flex items-center gap-2 mt-2">
+                                        <Badge className={`${getIntensityColor(pack.avg_intensity)} text-white`}>
+                                            Avg: {pack.avg_intensity?.toFixed(1)}
+                                        </Badge>
+                                        <span className="text-xs text-muted-foreground">
+                                            Range: {pack.min_intensity ?? '?'} - {pack.max_intensity ?? '?'}
+                                        </span>
+                                    </div>
+                                )}
+                            </CardHeader>
+                            <CardContent>
+                                <div className="flex items-center justify-between">
+                                    <span className="text-sm text-muted-foreground">
+                                        {pack.dare_count} dare{pack.dare_count !== 1 ? 's' : ''}
+                                    </span>
+                                    <Link to={`/dare-packs/${pack.id}/dares`}>
+                                        <Button variant="outline" size="sm">
+                                            Manage Dares
+                                        </Button>
+                                    </Link>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </div>
+            )}
+
+            {darePacks.length > 0 && (
+                <PaginationControls
+                    page={page}
+                    pageSize={pageSize}
+                    totalCount={totalCount}
+                    onPageChange={setPage}
+                    onPageSizeChange={(size) => {
+                        setPage(1);
+                        setPageSize(size);
+                    }}
+                />
+            )}
+        </div>
+    );
+}

apps/admin/src/pages/content/DaresPage.tsx

@@ -0,0 +1,551 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { supabase } from '@/config';
+import { auditedSupabase } from '@/hooks/useAuditedSupabase';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { PaginationControls } from '@/components/ui/pagination';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/ui/table';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import { Card } from '@/components/ui/card';
+import { Plus, Pencil, Trash2, Zap, Loader2, Clock } from 'lucide-react';
+import { Checkbox } from '@/components/ui/checkbox';
+import { toast } from 'sonner';
+import { IconPreview } from '@/components/ui/icon-picker';
+import { INTENSITY_LEVELS } from '@/lib/openai';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface DarePack {
+    id: string;
+    name: string;
+    description: string | null;
+    icon: string | null;
+    is_explicit: boolean;
+}
+
+interface Dare {
+    id: string;
+    pack_id: string;
+    text: string;
+    intensity: number;
+    suggested_duration_hours: number | null;
+    created_at: string | null;
+}
+
+// Duration options for dares
+const DURATION_OPTIONS = [
+    { value: '', label: 'No suggestion' },
+    { value: '1', label: '1 hour' },
+    { value: '6', label: '6 hours' },
+    { value: '12', label: '12 hours' },
+    { value: '24', label: '24 hours' },
+    { value: '72', label: '3 days' },
+    { value: '168', label: '1 week' },
+];
+
+// Helper to get intensity info by level (1-indexed)
+const getIntensity = (level: number) => INTENSITY_LEVELS[level - 1] || INTENSITY_LEVELS[0];
+
+// Format duration for display
+const formatDuration = (hours: number | null): string => {
+    if (hours === null) return '—';
+    if (hours < 24) return `${hours}h`;
+    if (hours < 168) return `${Math.round(hours / 24)}d`;
+    return `${Math.round(hours / 168)}w`;
+};
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export function DaresPage() {
+    const { packId } = useParams<{ packId: string }>();
+    const [pack, setPack] = useState<DarePack | null>(null);
+    const [dares, setDares] = useState<Dare[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editingDare, setEditingDare] = useState<Dare | null>(null);
+    const [saving, setSaving] = useState(false);
+    const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+    const [bulkDeleting, setBulkDeleting] = useState(false);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(25);
+    const [totalCount, setTotalCount] = useState(0);
+
+    // Form state
+    const [formData, setFormData] = useState<{
+        text: string;
+        intensity: number;
+        suggested_duration_hours: string;
+    }>({
+        text: '',
+        intensity: 1,
+        suggested_duration_hours: '',
+    });
+
+    const fetchData = useCallback(async () => {
+        if (!packId) return;
+
+        setLoading(true);
+        try {
+            // Fetch pack info
+            const { data: packData } = await supabase
+                .from('dare_packs')
+                .select('id, name, description, icon, is_explicit')
+                .eq('id', packId)
+                .single();
+
+            setPack(packData);
+
+            const from = (page - 1) * pageSize;
+            const to = from + pageSize - 1;
+
+            // Fetch dares
+            const { data: dareData, error, count } = await supabase
+                .from('dares')
+                .select('*', { count: 'exact' })
+                .eq('pack_id', packId)
+                .order('created_at', { ascending: true })
+                .range(from, to);
+
+            if (error) throw error;
+            setTotalCount(count || 0);
+            setDares(dareData || []);
+        } catch (error) {
+            toast.error('Failed to load dares');
+            console.error(error);
+        } finally {
+            setLoading(false);
+        }
+    }, [packId, page, pageSize]);
+
+    useEffect(() => {
+        fetchData();
+    }, [fetchData]);
+
+    useEffect(() => {
+        const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+        if (page > totalPages) {
+            setPage(totalPages);
+        }
+    }, [page, pageSize, totalCount]);
+
+    useEffect(() => {
+        setPage(1);
+        setSelectedIds(new Set());
+    }, [packId]);
+
+    useEffect(() => {
+        setSelectedIds(new Set());
+    }, [page, pageSize]);
+
+    const openCreateDialog = () => {
+        setEditingDare(null);
+        setFormData({ text: '', intensity: 1, suggested_duration_hours: '' });
+        setDialogOpen(true);
+    };
+
+    const openEditDialog = (dare: Dare) => {
+        setEditingDare(dare);
+        setFormData({
+            text: dare.text,
+            intensity: dare.intensity,
+            suggested_duration_hours: dare.suggested_duration_hours?.toString() || '',
+        });
+        setDialogOpen(true);
+    };
+
+    const handleSave = async () => {
+        if (!formData.text.trim()) {
+            toast.error('Dare text is required');
+            return;
+        }
+
+        setSaving(true);
+        try {
+            const dareData = {
+                text: formData.text,
+                intensity: formData.intensity,
+                suggested_duration_hours: formData.suggested_duration_hours
+                    ? parseInt(formData.suggested_duration_hours, 10)
+                    : null,
+            };
+
+            if (editingDare) {
+                const { error } = await auditedSupabase.update('dares', editingDare.id, dareData);
+                if (error) throw error;
+                toast.success('Dare updated');
+            } else {
+                const { error } = await auditedSupabase.insert('dares', {
+                    ...dareData,
+                    pack_id: packId,
+                });
+                if (error) throw error;
+                toast.success('Dare created');
+            }
+
+            setDialogOpen(false);
+            fetchData();
+        } catch (error) {
+            toast.error('Failed to save dare');
+            console.error(error);
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    const handleDelete = async (dare: Dare) => {
+        if (!confirm('Delete this dare? This cannot be undone.')) {
+            return;
+        }
+
+        try {
+            const { error } = await auditedSupabase.delete('dares', dare.id);
+            if (error) throw error;
+            toast.success('Dare deleted');
+            fetchData();
+        } catch (error) {
+            toast.error('Failed to delete dare');
+            console.error(error);
+        }
+    };
+
+    // Selection handlers
+    const toggleSelection = (id: string) => {
+        const next = new Set(selectedIds);
+        if (next.has(id)) {
+            next.delete(id);
+        } else {
+            next.add(id);
+        }
+        setSelectedIds(next);
+    };
+
+    const toggleSelectAll = () => {
+        if (selectedIds.size === dares.length) {
+            setSelectedIds(new Set());
+        } else {
+            setSelectedIds(new Set(dares.map(d => d.id)));
+        }
+    };
+
+    const handleBulkDelete = async () => {
+        if (selectedIds.size === 0) return;
+
+        const count = selectedIds.size;
+        if (!confirm(`Delete ${count} dare${count !== 1 ? 's' : ''}? This cannot be undone.`)) {
+            return;
+        }
+
+        setBulkDeleting(true);
+        try {
+            await Promise.all(
+                Array.from(selectedIds).map(id => auditedSupabase.delete('dares', id))
+            );
+            toast.success(`${count} dare${count !== 1 ? 's' : ''} deleted`);
+            setSelectedIds(new Set());
+            fetchData();
+        } catch (error) {
+            toast.error('Failed to delete dares');
+            console.error(error);
+        } finally {
+            setBulkDeleting(false);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="space-y-6">
+                <div className="flex items-center justify-between">
+                    <Skeleton className="h-9 w-64" />
+                    <Skeleton className="h-10 w-40" />
+                </div>
+                <Skeleton className="h-96" />
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-6">
+            {/* Header */}
+            <div className="flex items-center justify-between">
+                <div>
+                    <h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
+                        {pack && (
+                            <>
+                                <span className="text-3xl">
+                                    <IconPreview value={pack.icon} fallback="flame-outline" className="text-3xl" />
+                                </span>
+                                {pack.name}
+                            </>
+                        )}
+                    </h1>
+                    <p className="text-muted-foreground">
+                        {totalCount} dare{totalCount !== 1 ? 's' : ''} in this pack
+                    </p>
+                </div>
+                <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                    <DialogTrigger asChild>
+                        <Button onClick={openCreateDialog}>
+                            <Plus className="mr-2 h-4 w-4" />
+                            Add Dare
+                        </Button>
+                    </DialogTrigger>
+                    <DialogContent className="max-w-2xl">
+                        <DialogHeader>
+                            <DialogTitle>
+                                {editingDare ? 'Edit Dare' : 'Add Dare'}
+                            </DialogTitle>
+                            <DialogDescription>
+                                {editingDare
+                                    ? 'Update the dare details below.'
+                                    : 'Add a new dare to this pack.'}
+                            </DialogDescription>
+                        </DialogHeader>
+
+                        <div className="space-y-4 py-4">
+                            <div className="space-y-2">
+                                <Label htmlFor="text">Dare Text</Label>
+                                <Textarea
+                                    id="text"
+                                    value={formData.text}
+                                    onChange={(e) => setFormData(d => ({ ...d, text: e.target.value }))}
+                                    placeholder="e.g., Give your partner a 5-minute massage..."
+                                    rows={3}
+                                />
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>Intensity Level</Label>
+                                <div className="flex gap-2 flex-wrap">
+                                    {INTENSITY_LEVELS.map((intensity) => (
+                                        <Button
+                                            key={intensity.level}
+                                            type="button"
+                                            variant={formData.intensity === intensity.level ? 'default' : 'outline'}
+                                            size="sm"
+                                            onClick={() => setFormData(d => ({ ...d, intensity: intensity.level }))}
+                                            className={formData.intensity === intensity.level ? intensity.color : ''}
+                                            title={intensity.description}
+                                        >
+                                            {intensity.level} - {intensity.label}
+                                        </Button>
+                                    ))}
+                                </div>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label>Suggested Duration</Label>
+                                <Select
+                                    value={formData.suggested_duration_hours}
+                                    onValueChange={(value) => setFormData(d => ({ ...d, suggested_duration_hours: value }))}
+                                >
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Select a duration" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {DURATION_OPTIONS.map((opt) => (
+                                            <SelectItem key={opt.value} value={opt.value}>
+                                                {opt.label}
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                                <p className="text-xs text-muted-foreground">
+                                    This is a suggestion shown to users when sending the dare. They can choose a different timeframe.
+                                </p>
+                            </div>
+                        </div>
+
+                        <DialogFooter>
+                            <Button variant="outline" onClick={() => setDialogOpen(false)}>
+                                Cancel
+                            </Button>
+                            <Button onClick={handleSave} disabled={saving}>
+                                {saving ? (
+                                    <>
+                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                        Saving...
+                                    </>
+                                ) : (
+                                    'Save'
+                                )}
+                            </Button>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
+            </div>
+
+            {/* Bulk Action Bar */}
+            {selectedIds.size > 0 && (
+                <div className="flex items-center justify-between bg-muted/50 border rounded-lg px-4 py-3">
+                    <div className="flex items-center gap-3">
+                        <span className="text-sm font-medium">
+                            {selectedIds.size} dare{selectedIds.size !== 1 ? 's' : ''} selected
+                        </span>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setSelectedIds(new Set())}
+                        >
+                            Clear selection
+                        </Button>
+                    </div>
+                    <Button
+                        variant="destructive"
+                        size="sm"
+                        onClick={handleBulkDelete}
+                        disabled={bulkDeleting}
+                    >
+                        {bulkDeleting ? (
+                            <>
+                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                Deleting...
+                            </>
+                        ) : (
+                            <>
+                                <Trash2 className="mr-2 h-4 w-4" />
+                                Delete {selectedIds.size} Dare{selectedIds.size !== 1 ? 's' : ''}
+                            </>
+                        )}
+                    </Button>
+                </div>
+            )}
+
+            {/* Dares Table */}
+            {dares.length === 0 ? (
+                <Card className="flex flex-col items-center justify-center py-12">
+                    <Zap className="h-12 w-12 text-muted-foreground mb-4" />
+                    <h3 className="text-lg font-semibold">No dares yet</h3>
+                    <p className="text-muted-foreground mb-4">
+                        Add dares to this pack for couples to challenge each other
+                    </p>
+                    <Button onClick={openCreateDialog}>
+                        <Plus className="mr-2 h-4 w-4" />
+                        Add Dare
+                    </Button>
+                </Card>
+            ) : (
+                <div className="rounded-md border">
+                    <Table>
+                        <TableHeader>
+                            <TableRow>
+                                <TableHead className="w-12">
+                                    <Checkbox
+                                        checked={selectedIds.size === dares.length && dares.length > 0}
+                                        onCheckedChange={toggleSelectAll}
+                                        aria-label="Select all"
+                                    />
+                                </TableHead>
+                                <TableHead className="w-12">#</TableHead>
+                                <TableHead>Dare</TableHead>
+                                <TableHead className="w-24">Intensity</TableHead>
+                                <TableHead className="w-24">Duration</TableHead>
+                                <TableHead className="w-24">Actions</TableHead>
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {dares.map((dare, index) => (
+                                <TableRow
+                                    key={dare.id}
+                                    className={selectedIds.has(dare.id) ? 'bg-muted/50' : ''}
+                                >
+                                    <TableCell>
+                                        <Checkbox
+                                            checked={selectedIds.has(dare.id)}
+                                            onCheckedChange={() => toggleSelection(dare.id)}
+                                            aria-label={`Select dare ${index + 1}`}
+                                        />
+                                    </TableCell>
+                                    <TableCell className="font-medium text-muted-foreground">
+                                        {(page - 1) * pageSize + index + 1}
+                                    </TableCell>
+                                    <TableCell>
+                                        <span className="line-clamp-2">{dare.text}</span>
+                                    </TableCell>
+                                    <TableCell>
+                                        <Badge
+                                            className={`${getIntensity(dare.intensity).color} text-white`}
+                                            title={getIntensity(dare.intensity).description}
+                                        >
+                                            {getIntensity(dare.intensity).label}
+                                        </Badge>
+                                    </TableCell>
+                                    <TableCell>
+                                        {dare.suggested_duration_hours ? (
+                                            <Badge variant="outline" className="text-xs">
+                                                <Clock className="h-3 w-3 mr-1" />
+                                                {formatDuration(dare.suggested_duration_hours)}
+                                            </Badge>
+                                        ) : (
+                                            <span className="text-muted-foreground text-xs">—</span>
+                                        )}
+                                    </TableCell>
+                                    <TableCell>
+                                        <div className="flex gap-1">
+                                            <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                onClick={() => openEditDialog(dare)}
+                                            >
+                                                <Pencil className="h-4 w-4" />
+                                            </Button>
+                                            <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                onClick={() => handleDelete(dare)}
+                                            >
+                                                <Trash2 className="h-4 w-4 text-destructive" />
+                                            </Button>
+                                        </div>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </div>
+            )}
+
+            {dares.length > 0 && (
+                <PaginationControls
+                    page={page}
+                    pageSize={pageSize}
+                    totalCount={totalCount}
+                    onPageChange={setPage}
+                    onPageSizeChange={(size) => {
+                        setPage(1);
+                        setPageSize(size);
+                    }}
+                />
+            )}
+        </div>
+    );
+}

apps/supabase/migrations/20260109000000_create_dares_feature.sql

@@ -0,0 +1,377 @@
+-- Dares Feature Migration
+-- Creates dare_packs, dares, sent_dares, dare_messages tables
+-- with RLS policies, triggers, and stats functions
+
+-- ============================================================================
+-- CUSTOM TYPES
+-- ============================================================================
+CREATE TYPE dare_status AS ENUM (
+  'pending',    -- Sent, waiting for recipient to accept/decline
+  'active',     -- Recipient accepted, timer started (if applicable)
+  'completed',  -- Sender marked as complete
+  'expired',    -- Time ran out (only if had deadline)
+  'declined',   -- Recipient declined
+  'cancelled'   -- Sender cancelled before completion
+);
+
+-- ============================================================================
+-- TABLES
+-- ============================================================================
+
+-- Dare packs table (mirrors question_packs structure)
+CREATE TABLE dare_packs (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  name TEXT NOT NULL,
+  description TEXT,
+  icon TEXT,
+  is_premium BOOLEAN NOT NULL DEFAULT false,
+  is_public BOOLEAN NOT NULL DEFAULT true,
+  is_explicit BOOLEAN NOT NULL DEFAULT false,
+  sort_order INTEGER NOT NULL DEFAULT 0,
+  category_id UUID REFERENCES categories(id) ON DELETE SET NULL,
+  min_intensity INTEGER,
+  max_intensity INTEGER,
+  avg_intensity NUMERIC(3,2),
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+COMMENT ON TABLE dare_packs IS 'Collections of dares organized by theme or intensity level';
+COMMENT ON COLUMN dare_packs.min_intensity IS 'Auto-calculated minimum intensity from dares in this pack';
+COMMENT ON COLUMN dare_packs.max_intensity IS 'Auto-calculated maximum intensity from dares in this pack';
+COMMENT ON COLUMN dare_packs.avg_intensity IS 'Auto-calculated average intensity from dares in this pack';
+
+-- Create indexes for dare_packs
+CREATE INDEX idx_dare_packs_sort_order ON dare_packs(sort_order);
+CREATE INDEX idx_dare_packs_visibility ON dare_packs(is_public, is_premium);
+CREATE INDEX idx_dare_packs_category ON dare_packs(category_id);
+
+-- Dares table (individual dare content)
+CREATE TABLE dares (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  pack_id UUID NOT NULL REFERENCES dare_packs(id) ON DELETE CASCADE,
+  text TEXT NOT NULL,
+  intensity INTEGER NOT NULL DEFAULT 1 CHECK (intensity >= 1 AND intensity <= 5),
+  suggested_duration_hours INTEGER,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+COMMENT ON TABLE dares IS 'Individual dares within dare packs';
+COMMENT ON COLUMN dares.intensity IS 'Difficulty/spiciness level from 1 (mild) to 5 (intense)';
+COMMENT ON COLUMN dares.suggested_duration_hours IS 'Suggested time to complete the dare in hours (null = no suggestion)';
+
+-- Create indexes for dares
+CREATE INDEX idx_dares_pack_id ON dares(pack_id);
+CREATE INDEX idx_dares_intensity ON dares(intensity);
+
+-- Sent dares table (tracks dare instances between partners)
+CREATE TABLE sent_dares (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  couple_id UUID NOT NULL REFERENCES couples(id) ON DELETE CASCADE,
+  dare_id UUID REFERENCES dares(id) ON DELETE SET NULL,
+  custom_dare_text TEXT,
+  custom_dare_intensity INTEGER CHECK (custom_dare_intensity IS NULL OR (custom_dare_intensity >= 1 AND custom_dare_intensity <= 5)),
+  sender_id UUID NOT NULL REFERENCES profiles(id) ON DELETE CASCADE,
+  recipient_id UUID NOT NULL REFERENCES profiles(id) ON DELETE CASCADE,
+  status dare_status NOT NULL DEFAULT 'pending',
+  sent_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  accepted_at TIMESTAMPTZ,
+  expires_at TIMESTAMPTZ,
+  completed_at TIMESTAMPTZ,
+  sender_notes TEXT,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  CONSTRAINT dare_or_custom CHECK (dare_id IS NOT NULL OR custom_dare_text IS NOT NULL)
+);
+
+COMMENT ON TABLE sent_dares IS 'Dare instances sent between partners in a couple';
+COMMENT ON COLUMN sent_dares.dare_id IS 'Reference to the dare from a pack (null for custom dares)';
+COMMENT ON COLUMN sent_dares.custom_dare_text IS 'Text for custom dares created by premium users';
+COMMENT ON COLUMN sent_dares.custom_dare_intensity IS 'Intensity for custom dares (1-5)';
+COMMENT ON COLUMN sent_dares.expires_at IS 'Deadline for completing the dare (null = no time limit)';
+COMMENT ON COLUMN sent_dares.sender_notes IS 'Optional message from sender when sending the dare';
+
+-- Create indexes for sent_dares
+CREATE INDEX idx_sent_dares_couple_id ON sent_dares(couple_id);
+CREATE INDEX idx_sent_dares_sender_id ON sent_dares(sender_id);
+CREATE INDEX idx_sent_dares_recipient_id ON sent_dares(recipient_id);
+CREATE INDEX idx_sent_dares_status ON sent_dares(status);
+CREATE INDEX idx_sent_dares_expires_at ON sent_dares(expires_at) WHERE expires_at IS NOT NULL AND status = 'active';
+
+-- Dare messages table (chat for each dare)
+CREATE TABLE dare_messages (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  sent_dare_id UUID NOT NULL REFERENCES sent_dares(id) ON DELETE CASCADE,
+  sender_id UUID NOT NULL REFERENCES profiles(id) ON DELETE CASCADE,
+  content TEXT NOT NULL,
+  read_at TIMESTAMPTZ,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+COMMENT ON TABLE dare_messages IS 'Chat messages associated with each sent dare';
+
+-- Create indexes for dare_messages
+CREATE INDEX idx_dare_messages_sent_dare_id ON dare_messages(sent_dare_id);
+CREATE INDEX idx_dare_messages_created_at ON dare_messages(sent_dare_id, created_at);
+
+-- ============================================================================
+-- TRIGGERS
+-- ============================================================================
+
+-- Trigger function to auto-calculate dare pack intensity stats
+CREATE OR REPLACE FUNCTION update_dare_pack_intensity_stats()
+RETURNS TRIGGER AS $$
+DECLARE
+  target_pack_id UUID;
+BEGIN
+  -- Get the pack_id to update
+  target_pack_id := COALESCE(NEW.pack_id, OLD.pack_id);
+  
+  -- Update the dare pack stats
+  UPDATE dare_packs
+  SET 
+    min_intensity = (SELECT MIN(intensity) FROM dares WHERE pack_id = target_pack_id),
+    max_intensity = (SELECT MAX(intensity) FROM dares WHERE pack_id = target_pack_id),
+    avg_intensity = (SELECT ROUND(AVG(intensity)::numeric, 2) FROM dares WHERE pack_id = target_pack_id)
+  WHERE id = target_pack_id;
+  
+  RETURN COALESCE(NEW, OLD);
+END;
+$$ LANGUAGE plpgsql;
+
+-- Create trigger on dares table
+CREATE TRIGGER dare_intensity_stats_trigger
+AFTER INSERT OR UPDATE OR DELETE ON dares
+FOR EACH ROW EXECUTE FUNCTION update_dare_pack_intensity_stats();
+
+-- ============================================================================
+-- STATS FUNCTIONS
+-- ============================================================================
+
+-- Function to get dare stats for a specific user
+CREATE OR REPLACE FUNCTION get_user_dare_stats(p_user_id UUID)
+RETURNS TABLE (
+  dares_sent_count BIGINT,
+  dares_received_count BIGINT,
+  dares_completed_as_sender BIGINT,
+  dares_completed_as_recipient BIGINT
+) AS $$
+BEGIN
+  RETURN QUERY
+  SELECT
+    (SELECT COUNT(*) FROM sent_dares WHERE sender_id = p_user_id)::BIGINT,
+    (SELECT COUNT(*) FROM sent_dares WHERE recipient_id = p_user_id)::BIGINT,
+    (SELECT COUNT(*) FROM sent_dares WHERE sender_id = p_user_id AND status = 'completed')::BIGINT,
+    (SELECT COUNT(*) FROM sent_dares WHERE recipient_id = p_user_id AND status = 'completed')::BIGINT;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+-- Function to get dare stats for a couple
+CREATE OR REPLACE FUNCTION get_couple_dare_stats(p_couple_id UUID)
+RETURNS TABLE (
+  total_dares_sent BIGINT,
+  total_dares_completed BIGINT,
+  total_dares_active BIGINT
+) AS $$
+BEGIN
+  RETURN QUERY
+  SELECT
+    (SELECT COUNT(*) FROM sent_dares WHERE couple_id = p_couple_id)::BIGINT,
+    (SELECT COUNT(*) FROM sent_dares WHERE couple_id = p_couple_id AND status = 'completed')::BIGINT,
+    (SELECT COUNT(*) FROM sent_dares WHERE couple_id = p_couple_id AND status = 'active')::BIGINT;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+-- ============================================================================
+-- ROW LEVEL SECURITY
+-- ============================================================================
+
+-- Enable RLS on all tables
+ALTER TABLE dare_packs ENABLE ROW LEVEL SECURITY;
+ALTER TABLE dares ENABLE ROW LEVEL SECURITY;
+ALTER TABLE sent_dares ENABLE ROW LEVEL SECURITY;
+ALTER TABLE dare_messages ENABLE ROW LEVEL SECURITY;
+
+-- -------------------------
+-- dare_packs policies
+-- -------------------------
+
+-- Anyone can view public dare packs
+CREATE POLICY "Public dare packs are viewable by everyone"
+ON dare_packs FOR SELECT
+USING (is_public = true);
+
+-- Admins can view all dare packs
+CREATE POLICY "Admins can view all dare packs"
+ON dare_packs FOR SELECT
+USING (
+  EXISTS (
+    SELECT 1 FROM admin_users WHERE user_id = auth.uid()
+  )
+);
+
+-- Admins can insert dare packs
+CREATE POLICY "Admins can insert dare packs"
+ON dare_packs FOR INSERT
+WITH CHECK (
+  EXISTS (
+    SELECT 1 FROM admin_users WHERE user_id = auth.uid()
+  )
+);
+
+-- Admins can update dare packs
+CREATE POLICY "Admins can update dare packs"
+ON dare_packs FOR UPDATE
+USING (
+  EXISTS (
+    SELECT 1 FROM admin_users WHERE user_id = auth.uid()
+  )
+);
+
+-- Admins can delete dare packs
+CREATE POLICY "Admins can delete dare packs"
+ON dare_packs FOR DELETE
+USING (
+  EXISTS (
+    SELECT 1 FROM admin_users WHERE user_id = auth.uid()
+  )
+);
+
+-- -------------------------
+-- dares policies
+-- -------------------------
+
+-- Users can view dares in accessible packs (public and free, or public and user is premium)
+CREATE POLICY "Users can view dares in accessible packs"
+ON dares FOR SELECT
+USING (
+  EXISTS (
+    SELECT 1 FROM dare_packs dp
+    WHERE dp.id = dares.pack_id
+    AND dp.is_public = true
+    AND (
+      dp.is_premium = false
+      OR EXISTS (SELECT 1 FROM profiles WHERE id = auth.uid() AND is_premium = true)
+    )
+  )
+);
+
+-- Admins can view all dares
+CREATE POLICY "Admins can view all dares"
+ON dares FOR SELECT
+USING (
+  EXISTS (
+    SELECT 1 FROM admin_users WHERE user_id = auth.uid()
+  )
+);
+
+-- Admins can insert dares
+CREATE POLICY "Admins can insert dares"
+ON dares FOR INSERT
+WITH CHECK (
+  EXISTS (
+    SELECT 1 FROM admin_users WHERE user_id = auth.uid()
+  )
+);
+
+-- Admins can update dares
+CREATE POLICY "Admins can update dares"
+ON dares FOR UPDATE
+USING (
+  EXISTS (
+    SELECT 1 FROM admin_users WHERE user_id = auth.uid()
+  )
+);
+
+-- Admins can delete dares
+CREATE POLICY "Admins can delete dares"
+ON dares FOR DELETE
+USING (
+  EXISTS (
+    SELECT 1 FROM admin_users WHERE user_id = auth.uid()
+  )
+);
+
+-- -------------------------
+-- sent_dares policies
+-- -------------------------
+
+-- Users can view sent dares in their couple
+CREATE POLICY "Users can view their couple's sent dares"
+ON sent_dares FOR SELECT
+USING (couple_id = get_auth_user_couple_id());
+
+-- Users can insert sent dares (sender must be the authenticated user)
+CREATE POLICY "Users can send dares to their partner"
+ON sent_dares FOR INSERT
+WITH CHECK (
+  sender_id = auth.uid()
+  AND couple_id = get_auth_user_couple_id()
+);
+
+-- Users can update sent dares in their couple
+CREATE POLICY "Users can update their couple's sent dares"
+ON sent_dares FOR UPDATE
+USING (couple_id = get_auth_user_couple_id());
+
+-- Admins can view all sent dares
+CREATE POLICY "Admins can view all sent dares"
+ON sent_dares FOR SELECT
+USING (
+  EXISTS (
+    SELECT 1 FROM admin_users WHERE user_id = auth.uid()
+  )
+);
+
+-- -------------------------
+-- dare_messages policies
+-- -------------------------
+
+-- Users can view messages for their couple's dares
+CREATE POLICY "Users can view messages for their dares"
+ON dare_messages FOR SELECT
+USING (
+  EXISTS (
+    SELECT 1 FROM sent_dares sd
+    WHERE sd.id = dare_messages.sent_dare_id
+    AND sd.couple_id = get_auth_user_couple_id()
+  )
+);
+
+-- Users can insert messages for their couple's dares
+CREATE POLICY "Users can send messages for their dares"
+ON dare_messages FOR INSERT
+WITH CHECK (
+  sender_id = auth.uid()
+  AND EXISTS (
+    SELECT 1 FROM sent_dares sd
+    WHERE sd.id = dare_messages.sent_dare_id
+    AND sd.couple_id = get_auth_user_couple_id()
+  )
+);
+
+-- Users can update messages in their dares (for read_at)
+CREATE POLICY "Users can update message read status"
+ON dare_messages FOR UPDATE
+USING (
+  EXISTS (
+    SELECT 1 FROM sent_dares sd
+    WHERE sd.id = dare_messages.sent_dare_id
+    AND sd.couple_id = get_auth_user_couple_id()
+  )
+);
+
+-- Admins can view all dare messages
+CREATE POLICY "Admins can view all dare messages"
+ON dare_messages FOR SELECT
+USING (
+  EXISTS (
+    SELECT 1 FROM admin_users WHERE user_id = auth.uid()
+  )
+);
+
+-- ============================================================================
+-- REALTIME
+-- ============================================================================
+
+-- Add tables to realtime publication for live updates
+ALTER PUBLICATION supabase_realtime ADD TABLE sent_dares;
+ALTER PUBLICATION supabase_realtime ADD TABLE dare_messages;

docs/dares-feature.md

@@ -1,8 +1,34 @@
 # Dares Feature - Architecture & Implementation Plan
 
-> **Status**: Planning Complete - Ready for Implementation  
+> **Status**: Phase 1 Complete (Database + Admin Portal)  
 > **Created**: 2026-01-08  
-> **Target**: Schema + Admin Portal (Phase 1), Mobile App (Phase 2 - Later)
+> **Updated**: 2026-01-08  
+> **Target**: Schema + Admin Portal (Phase 1 - DONE), Mobile App (Phase 2 - Later)
+
+## Implementation Summary
+
+### Completed (Phase 1)
+
+| Component | Files | Status |
+|-----------|-------|--------|
+| Database Migration | `apps/supabase/migrations/20260109000000_create_dares_feature.sql` | Applied to prod |
+| Dare Packs Page | `apps/admin/src/pages/content/DarePacksPage.tsx` | Complete |
+| Dares Page | `apps/admin/src/pages/content/DaresPage.tsx` | Complete |
+| Routes | `apps/admin/src/App.tsx` | Updated |
+| Sidebar | `apps/admin/src/components/layout/Sidebar.tsx` | Updated |
+
+### Database Tables Created
+
+- `dare_packs` - Collections of dares (0 rows)
+- `dares` - Individual dare content (0 rows)
+- `sent_dares` - Dare instances between partners (0 rows)
+- `dare_messages` - Chat messages for dares (0 rows)
+- `dare_status` enum type with states: pending, active, completed, expired, declined, cancelled
+
+### Admin Routes Added
+
+- `/dare-packs` - List all dare packs
+- `/dare-packs/:packId/dares` - List dares in a pack
 
 ## Overview