feat: update settings page and theme context for user preferences
- 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.
This commit is contained in:
Julien Froidefond
224
components/settings/AdvancedSettingsPageClient.tsx
Normal file
224
components/settings/AdvancedSettingsPageClient.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user