feat: convert to nextjs
This commit is contained in:
337
components/Content.tsx
Normal file
337
components/Content.tsx
Normal file
@@ -0,0 +1,337 @@
|
||||
import { useState } from 'react';
|
||||
import { Consumer, consumerSchema } from '@utils/consumer/types';
|
||||
import { PurchaseList, purchasesRequestSchema } from '@purchases/types';
|
||||
import { Button } from './Button';
|
||||
import { useToast } from '../context/toast/ToastContext';
|
||||
import { Toasts } from './Toast';
|
||||
import { LineChart, PersonStanding, Download, Sparkles } from 'lucide-react';
|
||||
|
||||
export const Content = () => {
|
||||
const [consumerId, setConsumerId] = useState<number>();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [consumer, setConsumer] = useState<Consumer | null>(null);
|
||||
const [purchasesError, setPurchasesError] = useState<string | null>(null);
|
||||
const [editedConsumer, setEditedConsumer] = useState('');
|
||||
const [purchasesResult, setPurchasesResult] = useState<PurchaseList | null>(
|
||||
null
|
||||
);
|
||||
const { showToast, toasts } = useToast();
|
||||
|
||||
const downloadJson = (data: Consumer | PurchaseList, filename: string) => {
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], {
|
||||
type: 'application/json'
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleDownloadConsumer = () => {
|
||||
if (!consumer) return;
|
||||
try {
|
||||
downloadJson(consumer, 'consumer.json');
|
||||
} catch (err) {
|
||||
showToast('Failed to download consumer data');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadPurchases = () => {
|
||||
if (!purchasesResult) return;
|
||||
try {
|
||||
downloadJson(purchasesResult, 'purchases.json');
|
||||
} catch (err) {
|
||||
showToast('Failed to download purchase history');
|
||||
}
|
||||
};
|
||||
|
||||
const handleGenerateConsumer = async () => {
|
||||
setLoading(true);
|
||||
setConsumer(null);
|
||||
setPurchasesError(null);
|
||||
setEditedConsumer('');
|
||||
setPurchasesResult(null);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/consumer', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || 'Failed to generate consumer');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
setConsumerId(data.id);
|
||||
setConsumer(data.consumer);
|
||||
|
||||
setEditedConsumer(JSON.stringify(data.consumer, null, 2));
|
||||
} catch (err) {
|
||||
showToast(err instanceof Error ? err.message : 'Something went wrong');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleJsonEdit = (value: string) => {
|
||||
setEditedConsumer(value);
|
||||
try {
|
||||
const parsed = JSON.parse(value);
|
||||
const validConsumer = consumerSchema.safeParse(parsed);
|
||||
if (!validConsumer.success) {
|
||||
setPurchasesError('Invalid consumer format');
|
||||
return;
|
||||
}
|
||||
setPurchasesError(null);
|
||||
} catch {
|
||||
setPurchasesError('Invalid JSON format');
|
||||
}
|
||||
};
|
||||
|
||||
const handleGeneratePurchases = async () => {
|
||||
if (purchasesError) {
|
||||
showToast('Please fix the JSON errors before submitting');
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
setPurchasesResult(null);
|
||||
|
||||
try {
|
||||
const jsonData = JSON.parse(editedConsumer);
|
||||
const requestData = { id: consumerId, consumer: jsonData };
|
||||
|
||||
const validationResult = purchasesRequestSchema.safeParse(requestData);
|
||||
if (!validationResult.success) {
|
||||
throw new Error(validationResult.error.issues[0].message);
|
||||
}
|
||||
|
||||
const response = await fetch('/api/purchase-list', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(requestData)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || 'Failed to generate purchases');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
setPurchasesResult(data);
|
||||
} catch (err) {
|
||||
showToast(err instanceof Error ? err.message : 'Something went wrong');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='min-h-screen relative'>
|
||||
<div
|
||||
className='fixed inset-0 bg-white'
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(30deg, #e2e8f0 12%, transparent 12.5%, transparent 87.5%, #e2e8f0 87.5%, #e2e8f0),
|
||||
linear-gradient(150deg, #e2e8f0 12%, transparent 12.5%, transparent 87.5%, #e2e8f0 87.5%, #e2e8f0),
|
||||
linear-gradient(30deg, #e2e8f0 12%, transparent 12.5%, transparent 87.5%, #e2e8f0 87.5%, #e2e8f0),
|
||||
linear-gradient(150deg, #e2e8f0 12%, transparent 12.5%, transparent 87.5%, #e2e8f0 87.5%, #e2e8f0),
|
||||
linear-gradient(60deg, rgba(226,232,240,0.25) 25%, transparent 25.5%, transparent 75%, rgba(226,232,240,0.25) 75%, rgba(226,232,240,0.25)),
|
||||
linear-gradient(60deg, rgba(226,232,240,0.25) 25%, transparent 25.5%, transparent 75%, rgba(226,232,240,0.25) 75%, rgba(226,232,240,0.25))
|
||||
`,
|
||||
backgroundSize: '80px 140px',
|
||||
backgroundPosition: '0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px',
|
||||
opacity: 0.4
|
||||
}}
|
||||
/>
|
||||
<div className='container mx-auto px-4 py-12'>
|
||||
<Toasts toasts={toasts} />
|
||||
|
||||
<div className='max-w-7xl mx-auto mb-12'>
|
||||
<div className='bg-gradient-to-r from-white/70 to-white/90 backdrop-blur-sm rounded-2xl border border-slate-200 shadow-xl p-6 hover:shadow-2xl transition-all duration-300'>
|
||||
<div className='flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<div className='p-2 bg-indigo-100 rounded-lg'>
|
||||
<Sparkles className='w-5 h-5 text-indigo-600' />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className='text-lg font-semibold text-slate-900'>
|
||||
Quick Start
|
||||
</h2>
|
||||
<p className='text-sm text-slate-600'>
|
||||
Generate synthetic data in minutes
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<a
|
||||
href='/samples/consumer.json'
|
||||
download
|
||||
className='flex-1 md:flex-none inline-flex items-center justify-center gap-2 px-3 py-2 bg-slate-100 hover:bg-slate-200
|
||||
text-slate-700 rounded-lg text-sm font-medium transition-colors'
|
||||
>
|
||||
<Download className='w-4 h-4' />
|
||||
Sample Consumer
|
||||
</a>
|
||||
<a
|
||||
href='/samples/purchases.json'
|
||||
download
|
||||
className='flex-1 md:flex-none inline-flex items-center justify-center gap-2 px-3 py-2 bg-slate-100 hover:bg-slate-200
|
||||
text-slate-700 rounded-lg text-sm font-medium transition-colors'
|
||||
>
|
||||
<Download className='w-4 h-4' />
|
||||
Sample Purchases
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className='grid md:grid-cols-3 gap-4'>
|
||||
<div className='p-4 bg-blue-50/50 rounded-lg border border-blue-100'>
|
||||
<div className='text-xl font-bold text-blue-600 mb-1'>01</div>
|
||||
<h3 className='font-medium text-slate-900'>Generate Profile</h3>
|
||||
<p className='text-sm text-slate-600'>
|
||||
Create a synthetic consumer profile
|
||||
</p>
|
||||
</div>
|
||||
<div className='p-4 bg-indigo-50/50 rounded-lg border border-indigo-100'>
|
||||
<div className='text-xl font-bold text-indigo-600 mb-1'>02</div>
|
||||
<h3 className='font-medium text-slate-900'>Review Data</h3>
|
||||
<p className='text-sm text-slate-600'>
|
||||
Check and modify the generated profile
|
||||
</p>
|
||||
</div>
|
||||
<div className='p-4 bg-purple-50/50 rounded-lg border border-purple-100'>
|
||||
<div className='text-xl font-bold text-purple-600 mb-1'>03</div>
|
||||
<h3 className='font-medium text-slate-900'>Get History</h3>
|
||||
<p className='text-sm text-slate-600'>
|
||||
Generate purchase history data
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-7xl mx-auto'>
|
||||
<div className='bg-white/70 backdrop-blur-sm rounded-2xl border border-slate-200 shadow-xl hover:shadow-2xl transition-all duration-300'>
|
||||
<div className='p-6 border-b border-slate-100 bg-gradient-to-r from-blue-50 to-indigo-50'>
|
||||
<div className='flex items-center gap-4'>
|
||||
<div className='p-2 bg-blue-100 rounded-lg'>
|
||||
<PersonStanding className='w-5 h-5 text-blue-600' />
|
||||
</div>
|
||||
<h2 className='text-xl font-semibold text-slate-900'>
|
||||
Consumer Data
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className='p-8 space-y-6'>
|
||||
<Button
|
||||
loading={loading}
|
||||
disabled={loading || submitting}
|
||||
labelLoading='Generating consumer... (it can take up to 30 seconds)'
|
||||
labelReady='Generate Consumer Profile'
|
||||
onClick={handleGenerateConsumer}
|
||||
/>
|
||||
|
||||
<div className='space-y-3'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<label className='text-sm font-medium text-slate-700'>
|
||||
Edit Consumer Data
|
||||
</label>
|
||||
{purchasesError && (
|
||||
<span className='text-sm text-red-600 bg-red-50 px-4 py-1 rounded-full'>
|
||||
{purchasesError}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className='relative'>
|
||||
<textarea
|
||||
value={editedConsumer}
|
||||
onChange={e => handleJsonEdit(e.target.value)}
|
||||
className='w-full h-96 p-4 font-mono text-sm
|
||||
bg-slate-50 rounded-xl border border-slate-200
|
||||
focus:ring-2 focus:ring-blue-500 focus:border-blue-500
|
||||
resize-none transition-all duration-200'
|
||||
spellCheck='false'
|
||||
disabled={submitting}
|
||||
placeholder={
|
||||
consumer
|
||||
? ''
|
||||
: 'Generated consumer profile will appear here'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
labelReady='Download generated consumer data'
|
||||
onClick={handleDownloadConsumer}
|
||||
disabled={!consumer}
|
||||
className='w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-slate-100 hover:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed text-slate-700 rounded-lg text-sm font-medium transition-colors'
|
||||
/>
|
||||
|
||||
<Button
|
||||
loading={submitting}
|
||||
disabled={
|
||||
!editedConsumer || Boolean(purchasesError) || submitting
|
||||
}
|
||||
labelLoading='Generating purchases... (it can take up to a minute)'
|
||||
labelReady='Generate Purchase History'
|
||||
onClick={handleGeneratePurchases}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='bg-white/70 backdrop-blur-sm rounded-2xl border border-slate-200 shadow-xl hover:shadow-2xl transition-all duration-300'>
|
||||
<div className='p-6 border-b border-slate-100 bg-gradient-to-r from-indigo-50 to-blue-50'>
|
||||
<div className='flex items-center gap-4'>
|
||||
<div className='p-2 bg-blue-100 rounded-lg'>
|
||||
<LineChart className='w-5 h-5 text-blue-600' />
|
||||
</div>
|
||||
<h2 className='text-xl font-semibold text-slate-900'>
|
||||
Purchase History
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className='p-8'>
|
||||
<div className='h-[34rem] rounded-xl'>
|
||||
{purchasesResult ? (
|
||||
<div className='h-full bg-slate-50 border border-slate-200 rounded-xl'>
|
||||
<pre className='text-sm text-slate-700 whitespace-pre-wrap p-6 h-full overflow-auto'>
|
||||
{JSON.stringify(purchasesResult, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className='flex flex-col items-center justify-center h-full
|
||||
bg-slate-50 border border-slate-200 rounded-xl gap-4'
|
||||
>
|
||||
<LineChart className='w-12 h-12 text-slate-300' />
|
||||
<p className='text-sm font-medium text-slate-500'>
|
||||
No purchase history generated yet
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-8'>
|
||||
<Button
|
||||
labelReady='Download generated purchase history data'
|
||||
onClick={handleDownloadPurchases}
|
||||
disabled={!purchasesResult}
|
||||
className='w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-slate-100 hover:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed text-slate-700 rounded-lg text-sm font-medium transition-colors'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user