mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-10-31 18:19:43 +00:00
Add dares feature schema and admin portal
This commit is contained in:
jjbrunton committed
1 parent
aff0bc0888
commit
b933c3c421
6 files changed
+1559
-2
No files matched your search
@@ -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
|
||||
|
||||
@@ -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[] = [
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user