106 lines
3.1 KiB
TypeScript
106 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import {
|
|
Download,
|
|
Upload,
|
|
RotateCcw,
|
|
Settings
|
|
} from 'lucide-react';
|
|
import { useSidebarLayout } from '@/hooks/use-sidebar-layout';
|
|
|
|
export function SettingsManagement() {
|
|
const { exportSettings, importSettings, resetToDefaults } = useSidebarLayout();
|
|
const [importFile, setImportFile] = useState<File | null>(null);
|
|
const [importing, setImporting] = useState(false);
|
|
const [importError, setImportError] = useState<string | null>(null);
|
|
|
|
const handleImportFile = async () => {
|
|
if (!importFile) return;
|
|
|
|
setImporting(true);
|
|
setImportError(null);
|
|
|
|
try {
|
|
await importSettings(importFile);
|
|
setImportFile(null);
|
|
// Reset file input
|
|
const fileInput = document.getElementById('settings-import') as HTMLInputElement;
|
|
if (fileInput) fileInput.value = '';
|
|
} catch (error) {
|
|
setImportError(error instanceof Error ? error.message : 'Failed to import settings');
|
|
} finally {
|
|
setImporting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card className="py-5">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Settings className="h-5 w-5" />
|
|
Settings Management
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Export, import, or reset your application settings
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button onClick={exportSettings} variant="outline">
|
|
<Download className="h-4 w-4 mr-2" />
|
|
Export Settings
|
|
</Button>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
id="settings-import"
|
|
type="file"
|
|
accept=".json"
|
|
onChange={(e) => setImportFile(e.target.files?.[0] || null)}
|
|
className="hidden"
|
|
/>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => document.getElementById('settings-import')?.click()}
|
|
>
|
|
<Upload className="h-4 w-4 mr-2" />
|
|
Select File
|
|
</Button>
|
|
|
|
{importFile && (
|
|
<Button
|
|
onClick={handleImportFile}
|
|
disabled={importing}
|
|
variant="default"
|
|
>
|
|
{importing ? 'Importing...' : 'Import'}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<Button onClick={resetToDefaults} variant="outline">
|
|
<RotateCcw className="h-4 w-4 mr-2" />
|
|
Reset to Default
|
|
</Button>
|
|
</div>
|
|
|
|
{importFile && (
|
|
<div className="text-sm text-muted-foreground">
|
|
Selected: {importFile.name}
|
|
</div>
|
|
)}
|
|
|
|
{importError && (
|
|
<div className="text-sm text-destructive">
|
|
Error: {importError}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|