Re_Figma_Code/src/components/admin/AnalyticsConfig/AnalyticsConfig.tsx

90 lines
3.0 KiB
TypeScript

import { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { Save } from 'lucide-react';
import { AnalyticsSettingsForm } from './AnalyticsSettingsForm';
import { DataFeaturesSection } from './DataFeaturesSection';
import { ExportFormatsSection } from './ExportFormatsSection';
import { DataRetentionSection } from './DataRetentionSection';
import { toast } from 'sonner';
interface AnalyticsConfigData {
defaultPeriod: string;
refreshInterval: number;
autoRefresh: boolean;
realTimeUpdates: boolean;
dataExport: boolean;
exportFormats: string[];
dataRetention: number;
}
export function AnalyticsConfig() {
const [config, setConfig] = useState<AnalyticsConfigData>({
defaultPeriod: 'This Month',
refreshInterval: 5,
autoRefresh: true,
realTimeUpdates: true,
dataExport: true,
exportFormats: ['CSV', 'Excel', 'PDF'],
dataRetention: 24
});
const handleSave = () => {
// TODO: Implement API call to save configuration
toast.success('Analytics configuration saved successfully');
};
const updateConfig = (updates: Partial<AnalyticsConfigData>) => {
setConfig(prev => ({ ...prev, ...updates }));
};
return (
<Card>
<CardHeader>
<CardTitle>Analytics & Reporting Configuration</CardTitle>
<CardDescription>
Configure default reporting periods, auto-refresh, export settings, and data retention
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<AnalyticsSettingsForm
defaultPeriod={config.defaultPeriod}
refreshInterval={config.refreshInterval}
onDefaultPeriodChange={(period) => updateConfig({ defaultPeriod: period })}
onRefreshIntervalChange={(interval) => updateConfig({ refreshInterval: interval })}
/>
<Separator />
<DataFeaturesSection
autoRefresh={config.autoRefresh}
realTimeUpdates={config.realTimeUpdates}
dataExport={config.dataExport}
onAutoRefreshChange={(enabled) => updateConfig({ autoRefresh: enabled })}
onRealTimeUpdatesChange={(enabled) => updateConfig({ realTimeUpdates: enabled })}
onDataExportChange={(enabled) => updateConfig({ dataExport: enabled })}
/>
<Separator />
<ExportFormatsSection
exportFormats={config.exportFormats}
onExportFormatsChange={(formats) => updateConfig({ exportFormats: formats })}
/>
<DataRetentionSection
dataRetention={config.dataRetention}
onDataRetentionChange={(months) => updateConfig({ dataRetention: months })}
/>
<Button onClick={handleSave} className="bg-re-green hover:bg-re-green/90">
<Save className="w-4 h-4 mr-2" />
Save Analytics Configuration
</Button>
</CardContent>
</Card>
);
}