239 lines
11 KiB
TypeScript
239 lines
11 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import { useAuth } from '../context/AuthContext';
|
|
import Card from '../components/ui/Card';
|
|
import { Settings as SettingsIcon, Code, Store, Clock, Calendar, UserCog, ChevronRight, Building2, FileType, Eye, Globe, Mail, Database } from 'lucide-react';
|
|
|
|
export default function Settings() {
|
|
const { hasPermission, developerMode, setDeveloperMode } = useAuth();
|
|
|
|
const settingsCards = [
|
|
{
|
|
to: '/settings/users',
|
|
icon: UserCog,
|
|
title: 'Benutzer',
|
|
description: 'Verwalten Sie Benutzerkonten, Rollen und Berechtigungen.',
|
|
show: hasPermission('users:read'),
|
|
},
|
|
{
|
|
to: '/settings/platforms',
|
|
icon: Store,
|
|
title: 'Vertriebsplattformen',
|
|
description: 'Verwalten Sie die Plattformen, über die Verträge abgeschlossen werden.',
|
|
show: hasPermission('platforms:read'),
|
|
},
|
|
{
|
|
to: '/settings/cancellation-periods',
|
|
icon: Clock,
|
|
title: 'Kündigungsfristen',
|
|
description: 'Konfigurieren Sie die verfügbaren Kündigungsfristen für Verträge.',
|
|
show: hasPermission('platforms:read'),
|
|
},
|
|
{
|
|
to: '/settings/contract-durations',
|
|
icon: Calendar,
|
|
title: 'Vertragslaufzeiten',
|
|
description: 'Konfigurieren Sie die verfügbaren Laufzeiten für Verträge.',
|
|
show: hasPermission('platforms:read'),
|
|
},
|
|
{
|
|
to: '/settings/providers',
|
|
icon: Building2,
|
|
title: 'Anbieter & Tarife',
|
|
description: 'Verwalten Sie Anbieter und deren Tarife für Verträge.',
|
|
show: hasPermission('providers:read') || hasPermission('platforms:read'),
|
|
},
|
|
{
|
|
to: '/settings/contract-categories',
|
|
icon: FileType,
|
|
title: 'Vertragstypen',
|
|
description: 'Konfigurieren Sie die verfügbaren Vertragstypen (Strom, Gas, Mobilfunk, etc.).',
|
|
show: hasPermission('platforms:read'),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<SettingsIcon className="w-6 h-6" />
|
|
<h1 className="text-2xl font-bold">Einstellungen</h1>
|
|
</div>
|
|
|
|
{/* Stammdaten-Konfiguration */}
|
|
<div className="mb-8">
|
|
<h2 className="text-lg font-semibold mb-4 text-gray-700">Stammdaten</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{settingsCards
|
|
.filter((card) => card.show)
|
|
.map((card) => (
|
|
<Link
|
|
key={card.to}
|
|
to={card.to}
|
|
className="block p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md hover:border-blue-300 transition-all group"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-2 bg-blue-50 rounded-lg group-hover:bg-blue-100 transition-colors">
|
|
<card.icon className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors flex items-center gap-2">
|
|
{card.title}
|
|
<ChevronRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
</h3>
|
|
<p className="text-sm text-gray-500 mt-1">{card.description}</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* System-Einstellungen */}
|
|
{hasPermission('settings:update') && (
|
|
<div className="mb-8">
|
|
<h2 className="text-lg font-semibold mb-4 text-gray-700">System</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Link
|
|
to="/settings/portal"
|
|
className="block p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md hover:border-blue-300 transition-all group"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-2 bg-blue-50 rounded-lg group-hover:bg-blue-100 transition-colors">
|
|
<Globe className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors flex items-center gap-2">
|
|
Kundenportal
|
|
<ChevronRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
</h3>
|
|
<p className="text-sm text-gray-500 mt-1">Konfigurieren Sie das Kundenportal und Support-Anfragen.</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
to="/settings/deadlines"
|
|
className="block p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md hover:border-blue-300 transition-all group"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-2 bg-blue-50 rounded-lg group-hover:bg-blue-100 transition-colors">
|
|
<Clock className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors flex items-center gap-2">
|
|
Fristenschwellen
|
|
<ChevronRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
</h3>
|
|
<p className="text-sm text-gray-500 mt-1">Konfigurieren Sie die Farbkodierung für Vertragsfristen im Cockpit.</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
to="/settings/email-providers"
|
|
className="block p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md hover:border-blue-300 transition-all group"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-2 bg-blue-50 rounded-lg group-hover:bg-blue-100 transition-colors">
|
|
<Mail className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors flex items-center gap-2">
|
|
Email-Provisionierung
|
|
<ChevronRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
</h3>
|
|
<p className="text-sm text-gray-500 mt-1">Konfigurieren Sie die automatische E-Mail-Erstellung für Stressfrei-Wechseln Adressen.</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
to="/settings/database-backup"
|
|
className="block p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md hover:border-blue-300 transition-all group"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-2 bg-blue-50 rounded-lg group-hover:bg-blue-100 transition-colors">
|
|
<Database className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors flex items-center gap-2">
|
|
Datenbank & Zurücksetzen
|
|
<ChevronRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
</h3>
|
|
<p className="text-sm text-gray-500 mt-1">Backups erstellen, wiederherstellen oder auf Werkseinstellungen zurücksetzen.</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Persönliche Einstellungen */}
|
|
<div className="mb-8">
|
|
<h2 className="text-lg font-semibold mb-4 text-gray-700">Persönlich</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Link
|
|
to="/settings/view"
|
|
className="block p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md hover:border-blue-300 transition-all group"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-2 bg-blue-50 rounded-lg group-hover:bg-blue-100 transition-colors">
|
|
<Eye className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors flex items-center gap-2">
|
|
Ansicht
|
|
<ChevronRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
</h3>
|
|
<p className="text-sm text-gray-500 mt-1">Passen Sie die Darstellung der Anwendung an.</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{hasPermission('developer:access') && (
|
|
<Card title="Entwickleroptionen" className="mb-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<Code className="w-5 h-5 text-gray-500" />
|
|
<div>
|
|
<p className="font-medium">Entwicklermodus</p>
|
|
<p className="text-sm text-gray-500">
|
|
Aktiviert erweiterte Funktionen wie direkten Datenbankzugriff
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={developerMode}
|
|
onChange={(e) => setDeveloperMode(e.target.checked)}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
|
</label>
|
|
</div>
|
|
{developerMode && (
|
|
<div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
|
|
<p className="text-sm text-yellow-800">
|
|
<strong>Warnung:</strong> Der Entwicklermodus ermöglicht direkten Zugriff auf die Datenbank.
|
|
Unsachgemäße Änderungen können zu Datenverlust oder Inkonsistenzen führen.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
)}
|
|
|
|
<Card title="Über">
|
|
<dl className="space-y-3">
|
|
<div>
|
|
<dt className="text-sm text-gray-500">Version</dt>
|
|
<dd>1.0.0</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm text-gray-500">System</dt>
|
|
<dd>OpenCRM</dd>
|
|
</div>
|
|
</dl>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|