Visual edit in Lovable

This commit is contained in:
gpt-engineer-app[bot]
2025-09-28 20:19:28 +00:00
parent 8bd617ddcd
commit a1f57559f1

View File

@@ -8,30 +8,23 @@ import { useToast } from '@/hooks/use-toast';
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from '@/hooks/useAuth';
import { supabase } from '@/integrations/supabase/client'; import { supabase } from '@/integrations/supabase/client';
import { Download, BarChart3, Upload, FileText, History } from 'lucide-react'; import { Download, BarChart3, Upload, FileText, History } from 'lucide-react';
export function DataExportTab() { export function DataExportTab() {
const { user, profile } = useAuth(); const {
const { toast } = useToast(); user,
profile
} = useAuth();
const {
toast
} = useToast();
const [exportLoading, setExportLoading] = useState(false); const [exportLoading, setExportLoading] = useState(false);
const [exportProgress, setExportProgress] = useState(0); const [exportProgress, setExportProgress] = useState(0);
const handleDataExport = async () => { const handleDataExport = async () => {
if (!user) return; if (!user) return;
setExportLoading(true); setExportLoading(true);
setExportProgress(0); setExportProgress(0);
try { try {
// Simulate export progress // Simulate export progress
const steps = [ const steps = ['Collecting profile data...', 'Gathering reviews...', 'Collecting ride credits...', 'Gathering top lists...', 'Packaging data...', 'Preparing download...'];
'Collecting profile data...',
'Gathering reviews...',
'Collecting ride credits...',
'Gathering top lists...',
'Packaging data...',
'Preparing download...'
];
for (let i = 0; i < steps.length; i++) { for (let i = 0; i < steps.length; i++) {
await new Promise(resolve => setTimeout(resolve, 500)); await new Promise(resolve => setTimeout(resolve, 500));
setExportProgress((i + 1) / steps.length * 100); setExportProgress((i + 1) / steps.length * 100);
@@ -41,17 +34,15 @@ export function DataExportTab() {
// 1. Fetch all user data from various tables // 1. Fetch all user data from various tables
// 2. Package it into a structured format (JSON/CSV) // 2. Package it into a structured format (JSON/CSV)
// 3. Create a downloadable file // 3. Create a downloadable file
const exportData = { const exportData = {
profile: profile, profile: profile,
export_date: new Date().toISOString(), export_date: new Date().toISOString(),
data_types: ['profile', 'reviews', 'ride_credits', 'top_lists'] data_types: ['profile', 'reviews', 'ride_credits', 'top_lists']
}; };
const blob = new Blob([JSON.stringify(exportData, null, 2)], { const blob = new Blob([JSON.stringify(exportData, null, 2)], {
type: 'application/json' type: 'application/json'
}); });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const a = document.createElement('a'); const a = document.createElement('a');
a.href = url; a.href = url;
@@ -60,7 +51,6 @@ export function DataExportTab() {
a.click(); a.click();
document.body.removeChild(a); document.body.removeChild(a);
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
toast({ toast({
title: 'Export complete', title: 'Export complete',
description: 'Your data has been exported and downloaded successfully.' description: 'Your data has been exported and downloaded successfully.'
@@ -76,16 +66,13 @@ export function DataExportTab() {
setExportProgress(0); setExportProgress(0);
} }
}; };
const handleImportData = () => { const handleImportData = () => {
toast({ toast({
title: 'Coming soon', title: 'Coming soon',
description: 'Data import functionality will be available in a future update.', description: 'Data import functionality will be available in a future update.'
}); });
}; };
return <div className="space-y-8">
return (
<div className="space-y-8">
{/* Personal Statistics */} {/* Personal Statistics */}
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -159,21 +146,15 @@ export function DataExportTab() {
<Badge variant="secondary">Account Activity</Badge> <Badge variant="secondary">Account Activity</Badge>
</div> </div>
{exportLoading && ( {exportLoading && <div className="space-y-2">
<div className="space-y-2">
<div className="flex justify-between text-sm"> <div className="flex justify-between text-sm">
<span>Exporting data...</span> <span>Exporting data...</span>
<span>{Math.round(exportProgress)}%</span> <span>{Math.round(exportProgress)}%</span>
</div> </div>
<Progress value={exportProgress} /> <Progress value={exportProgress} />
</div> </div>}
)}
<Button <Button onClick={handleDataExport} disabled={exportLoading} className="w-fit">
onClick={handleDataExport}
disabled={exportLoading}
className="w-fit"
>
<Download className="w-4 h-4 mr-2" /> <Download className="w-4 h-4 mr-2" />
{exportLoading ? 'Exporting...' : 'Export My Data'} {exportLoading ? 'Exporting...' : 'Export My Data'}
</Button> </Button>
@@ -186,65 +167,12 @@ export function DataExportTab() {
</Card> </Card>
</div> </div>
<Separator />
{/* Data Import */} {/* Data Import */}
<div className="space-y-4">
<div className="flex items-center gap-2">
<Upload className="w-5 h-5" />
<h3 className="text-lg font-medium">Import Data</h3>
</div>
<Card>
<CardHeader>
<CardTitle>Import From Other Sources</CardTitle>
<CardDescription>
Import your ride credits and reviews from other coaster tracking platforms.
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid gap-3">
<div className="flex items-center justify-between p-3 border rounded-lg">
<div>
<p className="font-medium">Coaster Count</p>
<p className="text-sm text-muted-foreground">
Import your ride credits from coaster-count.com
</p>
</div>
<Button variant="outline" size="sm" onClick={handleImportData}>
Import
</Button>
</div>
<div className="flex items-center justify-between p-3 border rounded-lg">
<div>
<p className="font-medium">Captain Coaster</p>
<p className="text-sm text-muted-foreground">
Import your coaster credits from captaincoaster.com
</p>
</div>
<Button variant="outline" size="sm" onClick={handleImportData}>
Import
</Button>
</div>
<div className="flex items-center justify-between p-3 border rounded-lg">
<div>
<p className="font-medium">CSV File</p>
<p className="text-sm text-muted-foreground">
Upload a CSV file with your ride credits
</p>
</div>
<Button variant="outline" size="sm" onClick={handleImportData}>
Upload
</Button>
</div>
</div>
</CardContent>
</Card>
</div>
<Separator />
{/* Account Activity */} {/* Account Activity */}
<div className="space-y-4"> <div className="space-y-4">
@@ -285,6 +213,5 @@ export function DataExportTab() {
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
</div> </div>;
);
} }