root
208 lines
9.1 KiB
TypeScript
208 lines
9.1 KiB
TypeScript
// /opt/erp-system/app/roles/page.tsx
|
|
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { ShieldCheck, Plus, X, Check, Edit2, Trash2 } from 'lucide-react';
|
|
import { useToast } from '../components/ToastProvider';
|
|
import { useSession } from 'next-auth/react';
|
|
|
|
const AVAILABLE_PERMISSIONS = [
|
|
{ id: 'TICKETS_VIEW', label: 'Tickets ansehen' },
|
|
{ id: 'TICKETS_EDIT', label: 'Tickets bearbeiten / Zeit buchen' },
|
|
{ id: 'CUSTOMERS_MANAGE', label: 'Kundenstamm verwalten' },
|
|
{ id: 'CUSTOMERS_EDIT', label: 'Kundendaten bearbeiten (Stammdaten, Zugangsdaten)' },
|
|
{ id: 'PURCHASING_MANAGE', label: 'Einkauf: Produkte & Bestand verwalten' },
|
|
{ id: 'SALES_MANAGE', label: 'Verkauf: Angebote, Rechnungen & Belege' },
|
|
{ id: 'DATA_DELETE', label: 'Daten löschen (Kunden, Mitarbeiter, Gruppen)' },
|
|
{ id: 'TEAM_MANAGE', label: 'Mitarbeiter & Rollen verwalten' },
|
|
{ id: 'SYSTEM_SETTINGS', label: 'Globale Einstellungen' }
|
|
];
|
|
|
|
export default function RolesPage() {
|
|
const [roles, setRoles] = useState<any[]>([]);
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [editingId, setEditingId] = useState<number | null>(null);
|
|
const [formData, setFormData] = useState({ name: '', permissions: [] as string[] });
|
|
const { toast, confirm } = useToast();
|
|
const { data: session } = useSession();
|
|
const permissions = (session?.user as any)?.permissions || [];
|
|
const canDelete = permissions.includes('DATA_DELETE');
|
|
|
|
useEffect(() => { fetchRoles(); }, []);
|
|
|
|
const fetchRoles = async () => {
|
|
const res = await fetch('/api/roles');
|
|
if (res.ok) setRoles(await res.json());
|
|
};
|
|
|
|
const handleEdit = (role: any) => {
|
|
setEditingId(role.id);
|
|
setFormData({ name: role.name, permissions: role.permissions || [] });
|
|
setShowForm(true);
|
|
};
|
|
|
|
const handleCreateNew = () => {
|
|
setEditingId(null);
|
|
setFormData({ name: '', permissions: [] });
|
|
setShowForm(!showForm);
|
|
};
|
|
|
|
const togglePermission = (permId: string) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
permissions: prev.permissions.includes(permId)
|
|
? prev.permissions.filter(p => p !== permId)
|
|
: [...prev.permissions, permId]
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
const method = editingId ? 'PUT' : 'POST';
|
|
const payload = editingId ? { id: editingId, ...formData } : formData;
|
|
|
|
const res = await fetch('/api/roles', {
|
|
method: method,
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
if (res.ok) {
|
|
setFormData({ name: '', permissions: [] });
|
|
setEditingId(null);
|
|
setShowForm(false);
|
|
fetchRoles();
|
|
// Hinweis für den Nutzer, falls er seine eigenen Rechte ändert
|
|
toast('Erfolgreich gespeichert. Hinweis: Änderungen an den eigenen Rechten werden erst nach einem Neu-Login aktiv.', 'success', 8000);
|
|
} else {
|
|
toast('Fehler beim Speichern.', 'error');
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (role: any) => {
|
|
const isConfirmed = await confirm({
|
|
title: 'Berechtigungsgruppe löschen',
|
|
message: `"${role.name}" wirklich löschen?`,
|
|
danger: true
|
|
});
|
|
if (!isConfirmed) return;
|
|
|
|
const res = await fetch(`/api/roles?id=${role.id}`, { method: 'DELETE' });
|
|
if (res.ok) {
|
|
toast('Gruppe gelöscht', 'success');
|
|
fetchRoles();
|
|
} else {
|
|
const data = await res.json();
|
|
toast(data.error || 'Fehler beim Löschen', 'error');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto space-y-6 animate-fade-in-up">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2">
|
|
<ShieldCheck className="w-6 h-6 text-indigo-600" /> Berechtigungsgruppen
|
|
</h1>
|
|
<p className="text-slate-500 mt-1">Definiere Rollen und weise granulare Rechte zu.</p>
|
|
</div>
|
|
<button onClick={handleCreateNew} className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center gap-2 font-medium">
|
|
{showForm ? <X className="w-4 h-4" /> : <Plus className="w-4 h-4" />}
|
|
{showForm ? 'Abbrechen' : 'Neue Gruppe'}
|
|
</button>
|
|
</div>
|
|
|
|
{showForm && (
|
|
<div className="bg-white p-6 rounded-2xl shadow-lg shadow-slate-200/50 border border-slate-100 animate-in fade-in slide-in-from-top-4">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h2 className="text-lg font-semibold text-slate-800">
|
|
{editingId ? 'Berechtigungsgruppe bearbeiten' : 'Neue Gruppe anlegen'}
|
|
</h2>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Name der Gruppe (z.B. Supporter, Buchhaltung) *</label>
|
|
<input type="text" required className="w-full md:w-1/2 border border-slate-300 p-2.5 rounded-xl focus-ring outline-none transition-all" value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-3">Zugeordnete Berechtigungen</label>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
{AVAILABLE_PERMISSIONS.map(perm => (
|
|
<label key={perm.id} className={`flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${formData.permissions.includes(perm.id) ? 'bg-indigo-50 border-indigo-200 text-indigo-900' : 'bg-white border-slate-200 hover:bg-slate-50'}`}>
|
|
<input
|
|
type="checkbox"
|
|
className="hidden"
|
|
checked={formData.permissions.includes(perm.id)}
|
|
onChange={() => togglePermission(perm.id)}
|
|
/>
|
|
<div className={`w-5 h-5 rounded flex items-center justify-center border transition-colors ${formData.permissions.includes(perm.id) ? 'bg-indigo-600 border-indigo-600 text-white' : 'border-slate-300 bg-white'}`}>
|
|
{formData.permissions.includes(perm.id) && <Check className="w-3 h-3" />}
|
|
</div>
|
|
<span className="font-medium text-sm">{perm.label}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end pt-2 gap-3">
|
|
<button type="button" onClick={() => setShowForm(false)} className="px-6 py-2.5 rounded-lg text-slate-600 hover:bg-slate-100 font-medium">Abbrechen</button>
|
|
<button type="submit" className="bg-slate-900 text-white px-6 py-2.5 rounded-lg hover:bg-slate-800 transition font-medium">
|
|
{editingId ? 'Änderungen speichern' : 'Gruppe speichern'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{roles.map(role => (
|
|
<div key={role.id} className="bg-white rounded-2xl shadow-lg shadow-slate-200/50 border border-slate-100 p-6 flex flex-col h-full group relative hover-lift">
|
|
|
|
{/* Action Buttons */}
|
|
<div className="absolute top-4 right-4 flex items-center gap-1">
|
|
<button
|
|
onClick={() => handleEdit(role)}
|
|
className="p-2 bg-slate-100 text-slate-600 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-all"
|
|
title="Bearbeiten"
|
|
>
|
|
<Edit2 className="w-4 h-4" />
|
|
</button>
|
|
{canDelete && (
|
|
<button
|
|
onClick={() => handleDelete(role)}
|
|
className="p-2 bg-slate-100 text-slate-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all"
|
|
title="Löschen"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex justify-between items-start mb-4 pr-8">
|
|
<h3 className="font-bold text-lg text-slate-900">{role.name}</h3>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<span className="bg-slate-100 text-slate-600 px-2.5 py-1 rounded-md text-xs font-semibold">{role._count.users} Nutzer zugeordnet</span>
|
|
</div>
|
|
|
|
<div className="flex-1 space-y-2 mt-2">
|
|
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Rechte</p>
|
|
{role.permissions.map((p: string) => (
|
|
<div key={p} className="text-sm text-slate-600 flex items-center gap-2">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-indigo-400"></div>
|
|
{AVAILABLE_PERMISSIONS.find(ap => ap.id === p)?.label || p}
|
|
</div>
|
|
))}
|
|
{(!role.permissions || role.permissions.length === 0) && <span className="text-sm text-slate-400 italic">Keine Rechte zugewiesen.</span>}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|