8ce1eef6ae
- Replaced `SettingsPageClient` with `SettingsIndexPageClient` to fetch and display user preferences on the settings page. - Integrated `userPreferencesService` to retrieve all preferences asynchronously, enhancing data handling. - Refactored theme management in `ThemeContext` to use `updateViewPreferences` for saving theme changes, improving error handling and user feedback. - Marked the task for creating dedicated config sub-pages as complete in TODO.md.
225 lines
11 KiB
TypeScript
225 lines
11 KiB
TypeScript
'use client';
|
||
|
||
import { UserPreferences } from '@/lib/types';
|
||
import { Header } from '@/components/ui/Header';
|
||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||
import { UserPreferencesProvider } from '@/contexts/UserPreferencesContext';
|
||
import Link from 'next/link';
|
||
|
||
interface AdvancedSettingsPageClientProps {
|
||
initialPreferences: UserPreferences;
|
||
}
|
||
|
||
export function AdvancedSettingsPageClient({ initialPreferences }: AdvancedSettingsPageClientProps) {
|
||
return (
|
||
<UserPreferencesProvider initialPreferences={initialPreferences}>
|
||
<div className="min-h-screen bg-[var(--background)]">
|
||
<Header
|
||
title="TowerControl"
|
||
subtitle="Paramètres avancés"
|
||
/>
|
||
|
||
<div className="container mx-auto px-4 py-4">
|
||
<div className="max-w-4xl mx-auto">
|
||
{/* Breadcrumb */}
|
||
<div className="mb-4 text-sm">
|
||
<Link href="/settings" className="text-[var(--muted-foreground)] hover:text-[var(--primary)]">
|
||
Paramètres
|
||
</Link>
|
||
<span className="mx-2 text-[var(--muted-foreground)]">/</span>
|
||
<span className="text-[var(--foreground)]">Avancé</span>
|
||
</div>
|
||
|
||
{/* Page Header */}
|
||
<div className="mb-6">
|
||
<h1 className="text-2xl font-mono font-bold text-[var(--foreground)] mb-2">
|
||
🛠️ Paramètres avancés
|
||
</h1>
|
||
<p className="text-[var(--muted-foreground)]">
|
||
Configuration système, sauvegarde et outils de développement
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
{/* Sauvegarde et données */}
|
||
<Card>
|
||
<CardHeader>
|
||
<h2 className="text-lg font-semibold">💾 Sauvegarde et données</h2>
|
||
<p className="text-sm text-[var(--muted-foreground)]">
|
||
Gestion des sauvegardes automatiques et manuelles
|
||
</p>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
|
||
<h3 className="font-medium mb-2">Sauvegarde automatique</h3>
|
||
<p className="text-sm text-[var(--muted-foreground)] mb-2">
|
||
Sauvegarde toutes les 6 heures (configurable)
|
||
</p>
|
||
<p className="text-xs text-[var(--muted-foreground)]">
|
||
Prochaine sauvegarde: dans 3h 42min
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
|
||
<h3 className="font-medium mb-2">Sauvegardes disponibles</h3>
|
||
<p className="text-sm text-[var(--muted-foreground)] mb-2">
|
||
5 sauvegardes conservées
|
||
</p>
|
||
<p className="text-xs text-[var(--muted-foreground)]">
|
||
Dernière: il y a 2h 18min
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-2 pt-2">
|
||
<button className="px-3 py-1.5 bg-[var(--primary)] text-[var(--primary-foreground)] rounded text-sm font-medium">
|
||
Créer une sauvegarde
|
||
</button>
|
||
<button className="px-3 py-1.5 bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded text-sm font-medium">
|
||
Gérer les sauvegardes
|
||
</button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Base de données */}
|
||
<Card>
|
||
<CardHeader>
|
||
<h2 className="text-lg font-semibold">🗄️ Base de données</h2>
|
||
<p className="text-sm text-[var(--muted-foreground)]">
|
||
Informations et maintenance de la base de données
|
||
</p>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
|
||
<h3 className="font-medium mb-1">Tâches</h3>
|
||
<p className="text-2xl font-bold text-[var(--primary)]">247</p>
|
||
<p className="text-xs text-[var(--muted-foreground)]">entrées</p>
|
||
</div>
|
||
|
||
<div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
|
||
<h3 className="font-medium mb-1">Tags</h3>
|
||
<p className="text-2xl font-bold text-[var(--primary)]">18</p>
|
||
<p className="text-xs text-[var(--muted-foreground)]">entrées</p>
|
||
</div>
|
||
|
||
<div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
|
||
<h3 className="font-medium mb-1">Taille DB</h3>
|
||
<p className="text-2xl font-bold text-[var(--primary)]">2.4</p>
|
||
<p className="text-xs text-[var(--muted-foreground)]">MB</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Export / Import */}
|
||
<Card>
|
||
<CardHeader>
|
||
<h2 className="text-lg font-semibold">📤 Export / Import</h2>
|
||
<p className="text-sm text-[var(--muted-foreground)]">
|
||
Sauvegarde et restauration des données
|
||
</p>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
|
||
<h3 className="font-medium mb-2">Export des données</h3>
|
||
<p className="text-sm text-[var(--muted-foreground)] mb-3">
|
||
Exporter toutes les données au format JSON
|
||
</p>
|
||
<button className="px-3 py-1.5 bg-[var(--primary)] text-[var(--primary-foreground)] rounded text-sm">
|
||
Télécharger export
|
||
</button>
|
||
</div>
|
||
|
||
<div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
|
||
<h3 className="font-medium mb-2">Import des données</h3>
|
||
<p className="text-sm text-[var(--muted-foreground)] mb-3">
|
||
Restaurer des données depuis un fichier JSON
|
||
</p>
|
||
<button className="px-3 py-1.5 bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded text-sm">
|
||
Choisir fichier
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Logs et debug */}
|
||
<Card>
|
||
<CardHeader>
|
||
<h2 className="text-lg font-semibold">🐛 Debug et logs</h2>
|
||
<p className="text-sm text-[var(--muted-foreground)]">
|
||
Outils de diagnostic et de résolution de problèmes
|
||
</p>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
|
||
<h3 className="font-medium mb-2">Logs système</h3>
|
||
<p className="text-sm text-[var(--muted-foreground)] mb-3">
|
||
Consultation des logs d'erreur et d'activité
|
||
</p>
|
||
<button className="px-3 py-1.5 bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded text-sm">
|
||
Voir les logs
|
||
</button>
|
||
</div>
|
||
|
||
<div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
|
||
<h3 className="font-medium mb-2">Mode debug</h3>
|
||
<p className="text-sm text-[var(--muted-foreground)] mb-3">
|
||
Activer les informations de debug détaillées
|
||
</p>
|
||
<button className="px-3 py-1.5 bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded text-sm">
|
||
Activer debug
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Zone dangereuse */}
|
||
<Card>
|
||
<CardHeader>
|
||
<h2 className="text-lg font-semibold text-[var(--destructive)]">⚠️ Zone dangereuse</h2>
|
||
<p className="text-sm text-[var(--muted-foreground)]">
|
||
Actions irréversibles - à utiliser avec précaution
|
||
</p>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="p-4 bg-[var(--destructive)]/5 border border-[var(--destructive)]/20 rounded">
|
||
<h3 className="font-medium mb-2 text-[var(--destructive)]">Réinitialisation complète</h3>
|
||
<p className="text-sm text-[var(--muted-foreground)] mb-3">
|
||
Supprime toutes les données (tâches, tags, préférences)
|
||
</p>
|
||
<button className="px-3 py-1.5 bg-[var(--destructive)] text-[var(--destructive-foreground)] rounded text-sm">
|
||
Réinitialiser
|
||
</button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Note développement futur */}
|
||
<Card>
|
||
<CardContent className="p-4">
|
||
<div className="p-4 bg-[var(--warning)]/10 border border-[var(--warning)]/20 rounded">
|
||
<p className="text-sm text-[var(--warning)] font-medium mb-2">
|
||
🚧 Fonctionnalités en développement
|
||
</p>
|
||
<p className="text-xs text-[var(--muted-foreground)]">
|
||
La plupart des fonctions avancées seront implémentées dans les prochaines versions.
|
||
Cette page sert de prévisualisation de l'interface à venir.
|
||
</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</UserPreferencesProvider>
|
||
);
|
||
}
|