Files
thrilltrack-explorer/src/components/admin/NovuMigrationUtility.tsx
2025-10-01 13:16:06 +00:00

197 lines
6.3 KiB
TypeScript

import { useState } from 'react';
import { supabase } from '@/integrations/supabase/client';
import { notificationService } from '@/lib/notificationService';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { CheckCircle2, XCircle, AlertCircle, Loader2 } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
interface MigrationResult {
userId: string;
email: string;
success: boolean;
error?: string;
}
export function NovuMigrationUtility() {
const { toast } = useToast();
const [isRunning, setIsRunning] = useState(false);
const [progress, setProgress] = useState(0);
const [results, setResults] = useState<MigrationResult[]>([]);
const [totalUsers, setTotalUsers] = useState(0);
const runMigration = async () => {
setIsRunning(true);
setResults([]);
setProgress(0);
try {
// Fetch users without Novu subscriber IDs
const { data: users, error: fetchError } = await supabase
.from('profiles')
.select('user_id, users:user_id(email)')
.not('user_id', 'in',
supabase
.from('user_notification_preferences')
.select('user_id')
.not('novu_subscriber_id', 'is', null)
);
if (fetchError) throw fetchError;
if (!users || users.length === 0) {
toast({
title: "No users to migrate",
description: "All users are already registered with Novu.",
});
setIsRunning(false);
return;
}
setTotalUsers(users.length);
const migrationResults: MigrationResult[] = [];
// Process users one by one
for (let i = 0; i < users.length; i++) {
const user = users[i];
const email = (user.users as any)?.email;
if (!email) {
migrationResults.push({
userId: user.user_id,
email: 'No email found',
success: false,
error: 'User email not found',
});
continue;
}
try {
const result = await notificationService.createSubscriber({
subscriberId: user.user_id,
email,
data: { userId: user.user_id },
});
migrationResults.push({
userId: user.user_id,
email,
success: result.success,
error: result.error,
});
// Small delay to avoid overwhelming the API
await new Promise(resolve => setTimeout(resolve, 100));
} catch (error: any) {
migrationResults.push({
userId: user.user_id,
email,
success: false,
error: error.message,
});
}
setProgress(((i + 1) / users.length) * 100);
setResults([...migrationResults]);
}
const successCount = migrationResults.filter(r => r.success).length;
const failureCount = migrationResults.filter(r => !r.success).length;
toast({
title: "Migration completed",
description: `Successfully migrated ${successCount} users. ${failureCount} failures.`,
});
} catch (error: any) {
toast({
variant: "destructive",
title: "Migration failed",
description: error.message,
});
} finally {
setIsRunning(false);
}
};
const successCount = results.filter(r => r.success).length;
const failureCount = results.filter(r => !r.success).length;
return (
<Card>
<CardHeader>
<CardTitle>Novu User Migration</CardTitle>
<CardDescription>
Register existing users with Novu notification service
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<Alert>
<AlertCircle className="h-4 w-4" />
<AlertDescription>
This utility will register all existing users who don't have a Novu subscriber ID.
The process is non-blocking and will continue even if individual registrations fail.
</AlertDescription>
</Alert>
<Button
onClick={runMigration}
disabled={isRunning}
className="w-full"
>
{isRunning && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{isRunning ? 'Migrating Users...' : 'Start Migration'}
</Button>
{isRunning && totalUsers > 0 && (
<div className="space-y-2">
<div className="flex justify-between text-sm text-muted-foreground">
<span>Progress</span>
<span>{Math.round(progress)}%</span>
</div>
<Progress value={progress} />
<p className="text-sm text-muted-foreground">
Processing {results.length} of {totalUsers} users
</p>
</div>
)}
{results.length > 0 && (
<div className="space-y-2">
<div className="flex gap-4 text-sm">
<div className="flex items-center gap-2 text-green-600">
<CheckCircle2 className="h-4 w-4" />
<span>{successCount} succeeded</span>
</div>
<div className="flex items-center gap-2 text-red-600">
<XCircle className="h-4 w-4" />
<span>{failureCount} failed</span>
</div>
</div>
<div className="max-h-60 overflow-y-auto border rounded-md p-2 space-y-1">
{results.map((result, idx) => (
<div
key={idx}
className="flex items-center justify-between text-xs p-2 rounded bg-muted/50"
>
<span className="truncate flex-1">{result.email}</span>
{result.success ? (
<CheckCircle2 className="h-3 w-3 text-green-600 ml-2" />
) : (
<div className="flex items-center gap-1 ml-2">
<XCircle className="h-3 w-3 text-red-600" />
<span className="text-red-600">{result.error}</span>
</div>
)}
</div>
))}
</div>
</div>
)}
</CardContent>
</Card>
);
}