mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-10-31 18:19:43 +00:00
jjbrunton
006761d3b0
Replace the Supabase application data plane with the Node/PostgreSQL API, migrate mobile, admin, web, and MCP callers, add controlled cutover tooling, and define hardened Dokploy infrastructure.
617 lines
28 KiB
TypeScript
617 lines
28 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
|
|
import { adminData } from '@/lib/adminApi';
|
|
import { auditedAdminData } from '@/hooks/useAuditedAdminData';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import { PaginationControls } from '@/components/ui/pagination';
|
|
|
|
import { Switch } from '@/components/ui/switch';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Search, Ticket, Trash2, Plus, Copy, Users } from 'lucide-react';
|
|
import { format } from 'date-fns';
|
|
import { toast } from 'sonner';
|
|
|
|
interface RedemptionCode {
|
|
id: string;
|
|
code: string;
|
|
description: string | null;
|
|
max_uses: number;
|
|
current_uses: number;
|
|
expires_at: string | null;
|
|
is_active: boolean;
|
|
created_by: string | null;
|
|
created_at: string;
|
|
updated_at: string;
|
|
}
|
|
|
|
interface CodeRedemption {
|
|
id: string;
|
|
user_id: string;
|
|
redeemed_at: string;
|
|
profile?: {
|
|
name: string | null;
|
|
email: string | null;
|
|
};
|
|
}
|
|
|
|
function generateCode(length: number = 8): string {
|
|
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; // Removed confusing chars like 0, O, I, 1
|
|
let result = '';
|
|
for (let i = 0; i < length; i++) {
|
|
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
|
}
|
|
return result;
|
|
}
|
|
|
|
export function RedemptionCodesPage() {
|
|
const [codes, setCodes] = useState<RedemptionCode[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [search, setSearch] = useState('');
|
|
const [page, setPage] = useState(1);
|
|
const [pageSize, setPageSize] = useState(25);
|
|
const [totalCount, setTotalCount] = useState(0);
|
|
|
|
|
|
// Add Code State
|
|
const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [formData, setFormData] = useState({
|
|
code: '',
|
|
description: '',
|
|
max_uses: 1,
|
|
expires_at: '',
|
|
});
|
|
|
|
// View Redemptions State
|
|
const [viewingCode, setViewingCode] = useState<RedemptionCode | null>(null);
|
|
const [redemptions, setRedemptions] = useState<CodeRedemption[]>([]);
|
|
const [loadingRedemptions, setLoadingRedemptions] = useState(false);
|
|
const [redemptionsPage, setRedemptionsPage] = useState(1);
|
|
const [redemptionsPageSize, setRedemptionsPageSize] = useState(10);
|
|
const [redemptionsTotal, setRedemptionsTotal] = useState(0);
|
|
|
|
|
|
|
|
|
|
const fetchCodes = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const from = (page - 1) * pageSize;
|
|
const to = from + pageSize - 1;
|
|
const trimmedSearch = search.trim();
|
|
|
|
let query = adminData
|
|
.from('redemption_codes')
|
|
.select('*', { count: 'exact' })
|
|
.order('created_at', { ascending: false });
|
|
|
|
if (trimmedSearch) {
|
|
query = query.or(`code.ilike.%${trimmedSearch}%,description.ilike.%${trimmedSearch}%`);
|
|
}
|
|
|
|
const { data, error, count } = await query.range(from, to);
|
|
|
|
if (error) throw error;
|
|
setCodes(data || []);
|
|
setTotalCount(count || 0);
|
|
} catch (error: any) {
|
|
console.error('Failed to load codes:', error);
|
|
toast.error("Failed to load redemption codes");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [page, pageSize, search]);
|
|
|
|
|
|
const fetchRedemptions = useCallback(async (codeId: string) => {
|
|
setLoadingRedemptions(true);
|
|
try {
|
|
const from = (redemptionsPage - 1) * redemptionsPageSize;
|
|
const to = from + redemptionsPageSize - 1;
|
|
|
|
const { data: redemptionData, error: redemptionError, count } = await adminData
|
|
.from('code_redemptions')
|
|
.select('id, user_id, redeemed_at', { count: 'exact' })
|
|
.eq('code_id', codeId)
|
|
.order('redeemed_at', { ascending: false })
|
|
.range(from, to);
|
|
|
|
if (redemptionError) throw redemptionError;
|
|
|
|
setRedemptionsTotal(count || 0);
|
|
|
|
if (redemptionData && redemptionData.length > 0) {
|
|
const userIds = redemptionData.map(r => r.user_id);
|
|
const { data: profileData } = await adminData
|
|
.from('profiles')
|
|
.select('id, name, email')
|
|
.in('id', userIds);
|
|
|
|
const joined = redemptionData.map(r => ({
|
|
...r,
|
|
profile: profileData?.find(p => p.id === r.user_id)
|
|
}));
|
|
setRedemptions(joined);
|
|
} else {
|
|
setRedemptions([]);
|
|
}
|
|
} catch (error: any) {
|
|
console.error('Failed to load redemptions:', error);
|
|
toast.error("Failed to load redemptions");
|
|
} finally {
|
|
setLoadingRedemptions(false);
|
|
}
|
|
}, [redemptionsPage, redemptionsPageSize]);
|
|
|
|
useEffect(() => {
|
|
fetchCodes();
|
|
}, [fetchCodes]);
|
|
|
|
useEffect(() => {
|
|
setPage(1);
|
|
}, [search]);
|
|
|
|
useEffect(() => {
|
|
const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
|
|
if (page > totalPages) {
|
|
setPage(totalPages);
|
|
}
|
|
}, [page, pageSize, totalCount]);
|
|
|
|
useEffect(() => {
|
|
if (viewingCode) {
|
|
fetchRedemptions(viewingCode.id);
|
|
}
|
|
}, [viewingCode, fetchRedemptions]);
|
|
|
|
useEffect(() => {
|
|
const totalPages = Math.max(1, Math.ceil(redemptionsTotal / redemptionsPageSize));
|
|
if (redemptionsPage > totalPages) {
|
|
setRedemptionsPage(totalPages);
|
|
}
|
|
}, [redemptionsPage, redemptionsPageSize, redemptionsTotal]);
|
|
|
|
|
|
const handleAddCode = async () => {
|
|
if (!formData.code.trim()) {
|
|
toast.error("Please enter a code");
|
|
return;
|
|
}
|
|
|
|
setIsSubmitting(true);
|
|
try {
|
|
const { error } = await auditedAdminData.insert('redemption_codes', {
|
|
code: formData.code.toUpperCase().trim(),
|
|
description: formData.description.trim() || null,
|
|
max_uses: formData.max_uses,
|
|
current_uses: 0,
|
|
expires_at: formData.expires_at || null,
|
|
is_active: true,
|
|
});
|
|
|
|
if (error) throw error;
|
|
|
|
toast.success("Redemption code created");
|
|
setIsAddDialogOpen(false);
|
|
resetForm();
|
|
fetchCodes();
|
|
} catch (error: any) {
|
|
console.error('Failed to create code:', error);
|
|
if (error.message?.includes('duplicate') || error.code === '23505') {
|
|
toast.error("This code already exists");
|
|
} else {
|
|
toast.error(error.message || "Failed to create code");
|
|
}
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleToggleActive = async (code: RedemptionCode) => {
|
|
try {
|
|
const { error } = await auditedAdminData.update('redemption_codes', code.id, {
|
|
is_active: !code.is_active,
|
|
});
|
|
|
|
if (error) throw error;
|
|
|
|
toast.success(code.is_active ? "Code deactivated" : "Code activated");
|
|
fetchCodes();
|
|
} catch (error: any) {
|
|
toast.error("Failed to update code");
|
|
}
|
|
};
|
|
|
|
const handleDeleteCode = async (code: RedemptionCode) => {
|
|
if (!confirm(`Are you sure you want to delete the code "${code.code}"? This cannot be undone.`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const { error } = await auditedAdminData.delete('redemption_codes', code.id);
|
|
|
|
if (error) throw error;
|
|
|
|
toast.success("Code deleted");
|
|
fetchCodes();
|
|
} catch (error: any) {
|
|
toast.error("Failed to delete code");
|
|
}
|
|
};
|
|
|
|
const copyToClipboard = (text: string) => {
|
|
navigator.clipboard.writeText(text);
|
|
toast.success("Copied to clipboard");
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setFormData({
|
|
code: '',
|
|
description: '',
|
|
max_uses: 1,
|
|
expires_at: '',
|
|
});
|
|
};
|
|
|
|
const handleOpenAddDialog = () => {
|
|
resetForm();
|
|
setFormData(prev => ({ ...prev, code: generateCode() }));
|
|
setIsAddDialogOpen(true);
|
|
};
|
|
|
|
const handleViewRedemptions = (code: RedemptionCode) => {
|
|
setViewingCode(code);
|
|
setRedemptionsPage(1);
|
|
};
|
|
|
|
|
|
const filteredCodes = codes;
|
|
|
|
|
|
const getStatusBadge = (code: RedemptionCode) => {
|
|
if (!code.is_active) {
|
|
return <Badge variant="secondary">Inactive</Badge>;
|
|
}
|
|
if (code.expires_at && new Date(code.expires_at) < new Date()) {
|
|
return <Badge variant="destructive">Expired</Badge>;
|
|
}
|
|
if (code.current_uses >= code.max_uses) {
|
|
return <Badge variant="outline">Exhausted</Badge>;
|
|
}
|
|
return <Badge variant="default">Active</Badge>;
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Redemption Codes</h1>
|
|
<p className="text-muted-foreground">
|
|
Generate and manage codes that grant premium access
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
|
<div className="relative w-full sm:w-64">
|
|
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Search codes..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
<Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button onClick={handleOpenAddDialog} className="w-full sm:w-auto">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Generate Code
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Generate Redemption Code</DialogTitle>
|
|
<DialogDescription>
|
|
Create a new code that users can redeem for premium access.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid gap-2">
|
|
<Label>Code</Label>
|
|
<div className="flex flex-col gap-2 sm:flex-row">
|
|
<Input
|
|
value={formData.code}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, code: e.target.value.toUpperCase() }))}
|
|
placeholder="e.g., PREMIUM2024"
|
|
className="font-mono"
|
|
/>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => setFormData(prev => ({ ...prev, code: generateCode() }))}
|
|
title="Generate random code"
|
|
>
|
|
<Ticket className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label>Description (optional)</Label>
|
|
<Input
|
|
value={formData.description}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
|
|
placeholder="e.g., Early adopter reward"
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label>Max Uses</Label>
|
|
<Input
|
|
type="number"
|
|
min={1}
|
|
value={formData.max_uses}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, max_uses: parseInt(e.target.value) || 1 }))}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
How many times this code can be redeemed
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label>Expires At (optional)</Label>
|
|
<Input
|
|
type="datetime-local"
|
|
value={formData.expires_at}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, expires_at: e.target.value }))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
|
|
<Button onClick={handleAddCode} disabled={!formData.code.trim() || isSubmitting}>
|
|
{isSubmitting ? 'Creating...' : 'Create Code'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Code</TableHead>
|
|
<TableHead className="hidden lg:table-cell">Description</TableHead>
|
|
<TableHead className="hidden md:table-cell">Usage</TableHead>
|
|
<TableHead className="hidden lg:table-cell">Expires</TableHead>
|
|
<TableHead className="hidden md:table-cell">Status</TableHead>
|
|
<TableHead className="hidden xl:table-cell">Created</TableHead>
|
|
<TableHead className="hidden md:table-cell w-[150px]">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>
|
|
) : filteredCodes.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
|
|
{search ? 'No codes match your search.' : 'No redemption codes yet. Generate your first one!'}
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredCodes.map((code) => {
|
|
const statusBadge = getStatusBadge(code);
|
|
const expiresLabel = code.expires_at
|
|
? format(new Date(code.expires_at), 'MMM d, yyyy HH:mm')
|
|
: 'Never';
|
|
|
|
return (
|
|
<TableRow key={code.id}>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<code className="font-mono font-medium text-sm bg-muted px-2 py-1 rounded">
|
|
{code.code}
|
|
</code>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6"
|
|
onClick={() => copyToClipboard(code.code)}
|
|
title="Copy code"
|
|
>
|
|
<Copy className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
<div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground md:hidden">
|
|
{statusBadge}
|
|
<span>
|
|
{code.current_uses} / {code.max_uses} uses
|
|
</span>
|
|
<span>Expires {expiresLabel}</span>
|
|
{code.description && <span className="truncate max-w-[220px]">{code.description}</span>}
|
|
</div>
|
|
<div className="mt-3 flex flex-wrap items-center gap-2 md:hidden">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleViewRedemptions(code)}
|
|
>
|
|
<Users className="h-3 w-3 mr-1" />
|
|
Redemptions
|
|
</Button>
|
|
<div className="flex items-center gap-2 rounded-md border px-2 py-1">
|
|
<Switch
|
|
checked={code.is_active}
|
|
onCheckedChange={() => handleToggleActive(code)}
|
|
title={code.is_active ? "Deactivate" : "Activate"}
|
|
/>
|
|
<span className="text-xs text-muted-foreground">
|
|
{code.is_active ? 'Active' : 'Inactive'}
|
|
</span>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="text-destructive hover:text-destructive hover:bg-destructive/10"
|
|
onClick={() => handleDeleteCode(code)}
|
|
>
|
|
<Trash2 className="h-3 w-3 mr-1" />
|
|
Delete
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="hidden lg:table-cell text-muted-foreground">
|
|
{code.description || '—'}
|
|
</TableCell>
|
|
<TableCell className="hidden md:table-cell">
|
|
<span className="font-medium">{code.current_uses}</span>
|
|
<span className="text-muted-foreground"> / {code.max_uses}</span>
|
|
</TableCell>
|
|
<TableCell className="hidden lg:table-cell text-muted-foreground text-sm">
|
|
{expiresLabel}
|
|
</TableCell>
|
|
<TableCell className="hidden md:table-cell">
|
|
{statusBadge}
|
|
</TableCell>
|
|
<TableCell className="hidden xl:table-cell text-muted-foreground text-sm">
|
|
{format(new Date(code.created_at), 'MMM d, yyyy')}
|
|
</TableCell>
|
|
<TableCell className="hidden md:table-cell">
|
|
<div className="flex items-center gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => handleViewRedemptions(code)}
|
|
title="View redemptions"
|
|
>
|
|
<Users className="h-4 w-4" />
|
|
</Button>
|
|
<Switch
|
|
checked={code.is_active}
|
|
onCheckedChange={() => handleToggleActive(code)}
|
|
title={code.is_active ? "Deactivate" : "Activate"}
|
|
/>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-destructive hover:text-destructive hover:bg-destructive/10"
|
|
onClick={() => handleDeleteCode(code)}
|
|
title="Delete code"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
{filteredCodes.length > 0 && (
|
|
<PaginationControls
|
|
page={page}
|
|
pageSize={pageSize}
|
|
totalCount={totalCount}
|
|
onPageChange={setPage}
|
|
onPageSizeChange={(size) => {
|
|
setPage(1);
|
|
setPageSize(size);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
|
|
{/* View Redemptions Dialog */}
|
|
<Dialog open={!!viewingCode} onOpenChange={(open) => !open && setViewingCode(null)}>
|
|
<DialogContent className="sm:max-w-[500px]">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
Redemptions for <code className="font-mono bg-muted px-2 py-0.5 rounded">{viewingCode?.code}</code>
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{viewingCode?.current_uses || 0} of {viewingCode?.max_uses} uses
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="max-h-[300px] overflow-y-auto">
|
|
{loadingRedemptions ? (
|
|
<div className="flex justify-center py-8">
|
|
<Skeleton className="h-6 w-32" />
|
|
</div>
|
|
) : redemptions.length === 0 ? (
|
|
<p className="text-center py-8 text-muted-foreground">
|
|
No one has redeemed this code yet.
|
|
</p>
|
|
) : (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>User</TableHead>
|
|
<TableHead>Redeemed At</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{redemptions.map((r) => (
|
|
<TableRow key={r.id}>
|
|
<TableCell>
|
|
<div>
|
|
<div className="font-medium">{r.profile?.name || 'Unknown'}</div>
|
|
<div className="text-xs text-muted-foreground">{r.profile?.email}</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-muted-foreground text-sm">
|
|
{format(new Date(r.redeemed_at), 'MMM d, yyyy HH:mm')}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</div>
|
|
|
|
{redemptionsTotal > 0 && (
|
|
<PaginationControls
|
|
page={redemptionsPage}
|
|
pageSize={redemptionsPageSize}
|
|
totalCount={redemptionsTotal}
|
|
onPageChange={setRedemptionsPage}
|
|
onPageSizeChange={(size) => {
|
|
setRedemptionsPage(1);
|
|
setRedemptionsPageSize(size);
|
|
}}
|
|
/>
|
|
)}
|
|
<DialogFooter>
|
|
|
|
<Button variant="outline" onClick={() => setViewingCode(null)}>Close</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|