mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-11-02 02:19:43 +00:00
feat(admin): add support views for dares, quiz, subscriptions, couples, and live draw
Give support read-only visibility into purchase history, streak locality fields, notification preferences, the dares loop, couples quiz sessions, invite-code lookup, and recent live-draw activity, all backed by resources already allow-listed in the admin repository.
This commit is contained in:
jjbrunton committed
1 parent
eab73e6314
commit
8e83cc0d85
11 files changed
+1261
-77
No files matched your search
@@ -0,0 +1,222 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { adminData } from '@/lib/adminApi';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { PaginationControls } from '@/components/ui/pagination';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { Pencil, Eye } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import { toast } from 'sonner';
|
||||
import { StrokeCanvas, type StrokeSegment } from '@/components/content/StrokeCanvas';
|
||||
|
||||
interface LiveDrawSession {
|
||||
couple_id: string;
|
||||
revision: number;
|
||||
updated_by: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface Profile {
|
||||
id: string;
|
||||
name: string | null;
|
||||
email: string | null;
|
||||
couple_id: string | null;
|
||||
}
|
||||
|
||||
export function LiveDrawSessionsPage() {
|
||||
const [sessions, setSessions] = useState<LiveDrawSession[]>([]);
|
||||
const [membersByCouple, setMembersByCouple] = useState<Record<string, Profile[]>>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(25);
|
||||
const [total, setTotal] = useState(0);
|
||||
|
||||
const [selectedCoupleId, setSelectedCoupleId] = useState<string | null>(null);
|
||||
const [strokes, setStrokes] = useState<StrokeSegment[]>([]);
|
||||
const [strokesLoading, setStrokesLoading] = useState(false);
|
||||
|
||||
const fetchSessions = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const from = (page - 1) * pageSize;
|
||||
const to = from + pageSize - 1;
|
||||
|
||||
const { data, error, count } = await adminData
|
||||
.from<LiveDrawSession>('live_draw_sessions')
|
||||
.select('couple_id, revision, updated_by, created_at, updated_at', { count: 'exact' })
|
||||
.order('updated_at', { ascending: false })
|
||||
.range(from, to);
|
||||
if (error) throw error;
|
||||
|
||||
const rows = data || [];
|
||||
setSessions(rows);
|
||||
setTotal(count || 0);
|
||||
|
||||
const coupleIds = rows.map((row) => row.couple_id);
|
||||
if (coupleIds.length > 0) {
|
||||
const { data: profiles } = await adminData
|
||||
.from<Profile>('profiles')
|
||||
.select('id, name, email, couple_id')
|
||||
.in('couple_id', coupleIds);
|
||||
const grouped: Record<string, Profile[]> = {};
|
||||
(profiles || []).forEach((profile) => {
|
||||
if (!profile.couple_id) return;
|
||||
(grouped[profile.couple_id] ??= []).push(profile);
|
||||
});
|
||||
setMembersByCouple(grouped);
|
||||
} else {
|
||||
setMembersByCouple({});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load live draw sessions:', error);
|
||||
toast.error('Failed to load live draw sessions');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [page, pageSize]);
|
||||
|
||||
useEffect(() => { fetchSessions(); }, [fetchSessions]);
|
||||
|
||||
useEffect(() => {
|
||||
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
||||
if (page > totalPages) setPage(totalPages);
|
||||
}, [page, pageSize, total]);
|
||||
|
||||
const previewSession = async (coupleId: string) => {
|
||||
setSelectedCoupleId(coupleId);
|
||||
setStrokesLoading(true);
|
||||
setStrokes([]);
|
||||
try {
|
||||
const { data, error } = await adminData
|
||||
.from('live_draw_sessions')
|
||||
.select('strokes')
|
||||
.eq('couple_id', coupleId)
|
||||
.maybeSingle();
|
||||
if (error) throw error;
|
||||
setStrokes((data?.strokes as StrokeSegment[]) || []);
|
||||
} catch (error) {
|
||||
console.error('Failed to load drawing:', error);
|
||||
toast.error('Failed to load drawing');
|
||||
} finally {
|
||||
setStrokesLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const renderMembers = (coupleId: string) => {
|
||||
const members = membersByCouple[coupleId] || [];
|
||||
if (members.length === 0) return <span className="text-muted-foreground text-sm">Unknown couple</span>;
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
{members.map((member) => (
|
||||
<Link key={member.id} to={`/users/${member.id}`} className="text-primary hover:underline text-sm">
|
||||
{member.name || member.email || member.id}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
|
||||
<Pencil className="h-8 w-8 text-primary" />
|
||||
Live Draw Sessions
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Recent live-draw activity across couples, most recently updated first
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Couple</TableHead>
|
||||
<TableHead>Revision</TableHead>
|
||||
<TableHead>Created</TableHead>
|
||||
<TableHead>Last Updated</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-center py-8">
|
||||
<div className="flex justify-center"><Skeleton className="h-6 w-32" /></div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : sessions.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
|
||||
No live draw sessions yet.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
sessions.map((session) => (
|
||||
<TableRow key={session.couple_id}>
|
||||
<TableCell>{renderMembers(session.couple_id)}</TableCell>
|
||||
<TableCell><Badge variant="outline">{session.revision}</Badge></TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground whitespace-nowrap">
|
||||
{format(new Date(session.created_at), 'MMM d, yyyy')}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground whitespace-nowrap">
|
||||
{format(new Date(session.updated_at), 'MMM d, yyyy HH:mm')}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button variant="ghost" size="sm" onClick={() => previewSession(session.couple_id)}>
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
Preview
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
|
||||
{total > 0 && (
|
||||
<PaginationControls
|
||||
page={page}
|
||||
pageSize={pageSize}
|
||||
totalCount={total}
|
||||
onPageChange={setPage}
|
||||
onPageSizeChange={(size) => { setPage(1); setPageSize(size); }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedCoupleId && (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-lg">Drawing Preview</CardTitle>
|
||||
<CardDescription>Read-only snapshot of the couple's shared canvas</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{strokesLoading ? (
|
||||
<Skeleton className="h-64 w-full" />
|
||||
) : strokes.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<Pencil className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<p className="text-muted-foreground">No strokes to show</p>
|
||||
</div>
|
||||
) : (
|
||||
<StrokeCanvas strokes={strokes} />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,289 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { adminData } from '@/lib/adminApi';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { PaginationControls } from '@/components/ui/pagination';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Swords, Eye, MessageSquare } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import { toast } from 'sonner';
|
||||
import { SENT_DARE_STATUS_LABELS, SENT_DARE_STATUSES, isSentDareOverdue, type SentDareStatus } from '@/lib/sentDares';
|
||||
|
||||
interface Profile {
|
||||
id: string;
|
||||
name: string | null;
|
||||
email: string | null;
|
||||
}
|
||||
|
||||
interface SentDare {
|
||||
id: string;
|
||||
couple_id: string;
|
||||
dare_text_snapshot: string;
|
||||
custom_dare_text: string | null;
|
||||
dare_intensity_snapshot: number;
|
||||
sender_id: string;
|
||||
recipient_id: string;
|
||||
status: string;
|
||||
sent_at: string;
|
||||
expires_at: string | null;
|
||||
}
|
||||
|
||||
interface DareMessage {
|
||||
id: string;
|
||||
sender_id: string;
|
||||
content: string;
|
||||
created_at: string;
|
||||
read_at: string | null;
|
||||
}
|
||||
|
||||
const STATUS_FILTER_OPTIONS: Array<'all' | SentDareStatus> = ['all', ...SENT_DARE_STATUSES];
|
||||
|
||||
export function SentDaresPage() {
|
||||
const [dares, setDares] = useState<SentDare[]>([]);
|
||||
const [profilesById, setProfilesById] = useState<Record<string, Profile>>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [statusFilter, setStatusFilter] = useState<'all' | SentDareStatus>('all');
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(25);
|
||||
const [total, setTotal] = useState(0);
|
||||
|
||||
const [selectedDare, setSelectedDare] = useState<SentDare | null>(null);
|
||||
const [messages, setMessages] = useState<DareMessage[]>([]);
|
||||
const [messagesLoading, setMessagesLoading] = useState(false);
|
||||
|
||||
const fetchDares = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const from = (page - 1) * pageSize;
|
||||
const to = from + pageSize - 1;
|
||||
|
||||
let query = adminData
|
||||
.from<SentDare>('sent_dares')
|
||||
.select('id, couple_id, dare_text_snapshot, custom_dare_text, dare_intensity_snapshot, sender_id, recipient_id, status, sent_at, expires_at', { count: 'exact' })
|
||||
.order('sent_at', { ascending: false })
|
||||
.range(from, to);
|
||||
|
||||
if (statusFilter !== 'all') {
|
||||
query = query.eq('status', statusFilter);
|
||||
}
|
||||
|
||||
const { data, error, count } = await query;
|
||||
if (error) throw error;
|
||||
|
||||
const rows = data || [];
|
||||
setDares(rows);
|
||||
setTotal(count || 0);
|
||||
|
||||
const userIds = [...new Set(rows.flatMap((row) => [row.sender_id, row.recipient_id]))];
|
||||
if (userIds.length > 0) {
|
||||
const { data: profiles } = await adminData
|
||||
.from<Profile>('profiles')
|
||||
.select('id, name, email')
|
||||
.in('id', userIds);
|
||||
setProfilesById((profiles || []).reduce((acc: Record<string, Profile>, profile) => {
|
||||
acc[profile.id] = profile;
|
||||
return acc;
|
||||
}, {}));
|
||||
} else {
|
||||
setProfilesById({});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load sent dares:', error);
|
||||
toast.error('Failed to load sent dares');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [page, pageSize, statusFilter]);
|
||||
|
||||
useEffect(() => { fetchDares(); }, [fetchDares]);
|
||||
|
||||
useEffect(() => { setPage(1); }, [statusFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
||||
if (page > totalPages) setPage(totalPages);
|
||||
}, [page, pageSize, total]);
|
||||
|
||||
const renderUserLink = (userId: string) => {
|
||||
const profile = profilesById[userId];
|
||||
return (
|
||||
<Link to={`/users/${userId}`} className="text-primary hover:underline">
|
||||
{profile?.name || profile?.email || 'Unknown user'}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
const openDetail = async (dare: SentDare) => {
|
||||
setSelectedDare(dare);
|
||||
setMessagesLoading(true);
|
||||
setMessages([]);
|
||||
try {
|
||||
const { data, error } = await adminData
|
||||
.from<DareMessage>('dare_messages')
|
||||
.select('id, sender_id, content, created_at, read_at')
|
||||
.eq('sent_dare_id', dare.id)
|
||||
.order('created_at', { ascending: true });
|
||||
if (error) throw error;
|
||||
setMessages(data || []);
|
||||
} catch (error) {
|
||||
console.error('Failed to load dare messages:', error);
|
||||
toast.error('Failed to load dare messages');
|
||||
} finally {
|
||||
setMessagesLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
|
||||
<Swords className="h-8 w-8 text-primary" />
|
||||
Sent Dares
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Review the dares loop between couples for moderation and support
|
||||
</p>
|
||||
</div>
|
||||
<Select value={statusFilter} onValueChange={(value) => setStatusFilter(value as 'all' | SentDareStatus)}>
|
||||
<SelectTrigger className="w-full sm:w-48">
|
||||
<SelectValue placeholder="Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{STATUS_FILTER_OPTIONS.map((status) => (
|
||||
<SelectItem key={status} value={status} className="capitalize">
|
||||
{status === 'all' ? 'All statuses' : SENT_DARE_STATUS_LABELS[status].label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Dare</TableHead>
|
||||
<TableHead>Sender</TableHead>
|
||||
<TableHead>Recipient</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Sent</TableHead>
|
||||
<TableHead>Expires</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center py-8">
|
||||
<div className="flex justify-center"><Skeleton className="h-6 w-32" /></div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : dares.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
|
||||
No sent dares found.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
dares.map((dare) => {
|
||||
const statusInfo = SENT_DARE_STATUS_LABELS[dare.status as SentDareStatus];
|
||||
const overdue = isSentDareOverdue(dare.status, dare.expires_at);
|
||||
return (
|
||||
<TableRow key={dare.id}>
|
||||
<TableCell className="max-w-[280px]">
|
||||
<span className="line-clamp-2 block">{dare.custom_dare_text || dare.dare_text_snapshot}</span>
|
||||
</TableCell>
|
||||
<TableCell>{renderUserLink(dare.sender_id)}</TableCell>
|
||||
<TableCell>{renderUserLink(dare.recipient_id)}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={statusInfo?.variant ?? 'secondary'} className="capitalize">{statusInfo?.label ?? dare.status}</Badge>
|
||||
{overdue && <Badge variant="destructive">Overdue</Badge>}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground whitespace-nowrap">
|
||||
{format(new Date(dare.sent_at), 'MMM d, yyyy HH:mm')}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground whitespace-nowrap">
|
||||
{dare.expires_at ? format(new Date(dare.expires_at), 'MMM d, yyyy HH:mm') : 'No expiry'}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button variant="ghost" size="sm" onClick={() => openDetail(dare)}>
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
Messages
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
|
||||
{total > 0 && (
|
||||
<PaginationControls
|
||||
page={page}
|
||||
pageSize={pageSize}
|
||||
totalCount={total}
|
||||
onPageChange={setPage}
|
||||
onPageSizeChange={(size) => { setPage(1); setPageSize(size); }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Dialog open={!!selectedDare} onOpenChange={(open) => !open && setSelectedDare(null)}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<MessageSquare className="h-5 w-5" />
|
||||
Dare Messages
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{selectedDare && (selectedDare.custom_dare_text || selectedDare.dare_text_snapshot)}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="min-h-[120px] max-h-[400px] overflow-y-auto space-y-3 bg-muted/30 rounded-md p-4">
|
||||
{messagesLoading ? (
|
||||
<Skeleton className="h-24 w-full" />
|
||||
) : messages.length === 0 ? (
|
||||
<p className="text-center text-muted-foreground py-8">No messages for this dare</p>
|
||||
) : (
|
||||
messages.map((message) => (
|
||||
<div key={message.id} className="bg-background border rounded p-3 text-sm">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="font-medium">
|
||||
{selectedDare && (message.sender_id === selectedDare.sender_id ? 'Sender' : 'Recipient')}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{format(new Date(message.created_at), 'MMM d, yyyy HH:mm')}
|
||||
</span>
|
||||
</div>
|
||||
<p className="whitespace-pre-wrap">{message.content}</p>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user