238 lines
8.8 KiB
TypeScript
238 lines
8.8 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { authApi, familyApi } from '../api/client';
|
|
import { useStore } from '../store/useStore';
|
|
import {
|
|
Shield,
|
|
Home,
|
|
LogOut,
|
|
Users,
|
|
Plus,
|
|
Trash2,
|
|
Lock,
|
|
ArrowLeft,
|
|
} from 'lucide-react';
|
|
|
|
export default function AdminPanel() {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const { user, logout: storeLogout } = useStore();
|
|
|
|
const [newFamilyName, setNewFamilyName] = useState('');
|
|
const [newFamilyPassword, setNewFamilyPassword] = useState('');
|
|
const [families, setFamilies] = useState<Array<{ id: number; name: string }>>([]);
|
|
|
|
useEffect(() => {
|
|
loadFamilies();
|
|
}, []);
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await authApi.logout();
|
|
storeLogout();
|
|
navigate('/');
|
|
} catch (err) {
|
|
console.error('Logout error:', err);
|
|
}
|
|
};
|
|
|
|
const loadFamilies = async () => {
|
|
try {
|
|
const response = await familyApi.getAll();
|
|
setFamilies(response.data);
|
|
} catch (err) {
|
|
console.error('Error loading families:', err);
|
|
}
|
|
};
|
|
|
|
const handleCreateFamily = async () => {
|
|
if (!newFamilyName.trim() || !newFamilyPassword.trim()) {
|
|
alert(t('admin.fillNameAndPassword'));
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await familyApi.create({ name: newFamilyName, password: newFamilyPassword });
|
|
setNewFamilyName('');
|
|
setNewFamilyPassword('');
|
|
loadFamilies();
|
|
} catch (err) {
|
|
alert(t('admin.createError'));
|
|
console.error(err);
|
|
}
|
|
};
|
|
|
|
const handleDeleteFamily = async (id: number) => {
|
|
if (!confirm(t('admin.deleteConfirm'))) return;
|
|
|
|
try {
|
|
await familyApi.delete(id);
|
|
loadFamilies();
|
|
} catch (err) {
|
|
alert(t('admin.deleteError'));
|
|
console.error(err);
|
|
}
|
|
};
|
|
|
|
if (!user?.is_admin) {
|
|
return (
|
|
<div className="min-h-screen gradient-bg flex items-center justify-center py-8 sm:py-12 px-4">
|
|
<div className="max-w-md w-full">
|
|
<div className="glass-effect rounded-2xl shadow-2xl p-6 sm:p-8 text-center">
|
|
<div className="flex items-center justify-center mb-6">
|
|
<div className="p-4 btn-danger text-white rounded-2xl">
|
|
<Shield className="w-10 h-10 sm:w-12 sm:h-12" />
|
|
</div>
|
|
</div>
|
|
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">
|
|
{t('admin.accessDenied')}
|
|
</h1>
|
|
<p className="text-gray-600 mb-6 text-sm sm:text-base">
|
|
{t('admin.requiresAdmin')}
|
|
</p>
|
|
<button
|
|
onClick={() => navigate('/')}
|
|
className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-xl transition-all duration-300 font-medium"
|
|
>
|
|
<ArrowLeft className="w-5 h-5" />
|
|
{t('common.back')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen gradient-bg py-8 sm:py-12 px-4">
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="text-center mb-8">
|
|
<div className="inline-flex p-4 bg-white/20 backdrop-blur-md rounded-2xl mb-4">
|
|
<Shield className="w-12 h-12 text-white" />
|
|
</div>
|
|
<h1 className="text-4xl sm:text-5xl font-bold text-white mb-2">
|
|
{t('admin.title')}
|
|
</h1>
|
|
<p className="text-purple-100 text-base sm:text-lg mb-6">
|
|
{t('admin.subtitle')}
|
|
</p>
|
|
<div className="flex justify-center gap-3">
|
|
<button
|
|
onClick={handleLogout}
|
|
className="inline-flex items-center gap-2 px-5 py-3 bg-red-500/80 hover:bg-red-600 text-white rounded-2xl backdrop-blur-md transition-all duration-300 hover:shadow-lg font-medium"
|
|
>
|
|
<LogOut className="w-5 h-5" />
|
|
{t('common.exit')}
|
|
</button>
|
|
<button
|
|
onClick={() => navigate('/')}
|
|
className="inline-flex items-center gap-2 px-5 py-3 bg-white/20 hover:bg-white/30 text-white rounded-2xl backdrop-blur-md transition-all duration-300 hover:shadow-lg font-medium"
|
|
>
|
|
<Home className="w-5 h-5" />
|
|
{t('common.toHome')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass-effect rounded-3xl shadow-xl p-6 sm:p-10 mb-6 max-w-2xl mx-auto">
|
|
<div className="flex items-center justify-center gap-3 mb-8">
|
|
<div className="p-3 btn-success rounded-2xl">
|
|
<Plus className="w-8 h-8 text-white" />
|
|
</div>
|
|
<h2 className="text-2xl sm:text-3xl font-bold text-gray-800">
|
|
{t('admin.createFamily')}
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="space-y-5">
|
|
<div>
|
|
<label className="flex items-center justify-center gap-2 text-sm font-semibold text-gray-700 mb-3">
|
|
<Users className="w-5 h-5 text-purple-600" />
|
|
{t('admin.familyName')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder={t('admin.familyNamePlaceholder')}
|
|
value={newFamilyName}
|
|
onChange={(e) => setNewFamilyName(e.target.value)}
|
|
className="w-full px-5 py-4 border-2 border-gray-300 rounded-2xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all font-medium text-center"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="flex items-center justify-center gap-2 text-sm font-semibold text-gray-700 mb-3">
|
|
<Lock className="w-5 h-5 text-purple-600" />
|
|
{t('admin.familyPassword')}
|
|
</label>
|
|
<input
|
|
type="password"
|
|
placeholder={t('admin.familyPasswordPlaceholder')}
|
|
value={newFamilyPassword}
|
|
onChange={(e) => setNewFamilyPassword(e.target.value)}
|
|
className="w-full px-5 py-4 border-2 border-gray-300 rounded-2xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all font-medium text-center"
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={handleCreateFamily}
|
|
className="w-full flex items-center justify-center gap-2 px-6 py-4 btn-success text-white rounded-2xl hover:shadow-xl transition-all duration-300 font-semibold text-lg"
|
|
>
|
|
<Plus className="w-6 h-6" />
|
|
{t('admin.createButton')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass-effect rounded-3xl shadow-xl p-6 sm:p-10 max-w-3xl mx-auto">
|
|
<div className="flex items-center justify-center gap-3 mb-8">
|
|
<div className="p-3 category-icon rounded-2xl">
|
|
<Users className="w-8 h-8 text-white" />
|
|
</div>
|
|
<h2 className="text-2xl sm:text-3xl font-bold text-gray-800">
|
|
{t('admin.familyList')}
|
|
</h2>
|
|
</div>
|
|
|
|
{families.length === 0 ? (
|
|
<div className="text-center py-16 sm:py-20">
|
|
<div className="inline-flex p-6 bg-gray-100 rounded-3xl mb-6">
|
|
<Users className="w-20 h-20 text-gray-400" />
|
|
</div>
|
|
<p className="text-gray-600 text-lg sm:text-xl mb-2 font-semibold">
|
|
{t('admin.noFamilies')}
|
|
</p>
|
|
<p className="text-gray-500 text-sm sm:text-base">
|
|
{t('admin.createFirst')}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{families.map((family) => (
|
|
<div
|
|
key={family.id}
|
|
className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-5 bg-gray-50 rounded-2xl border-2 border-gray-200 card-hover"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-3 category-icon text-white rounded-xl shadow-md">
|
|
<Users className="w-6 h-6" />
|
|
</div>
|
|
<span className="text-lg sm:text-xl font-bold text-gray-900">
|
|
{family.name}
|
|
</span>
|
|
</div>
|
|
<button
|
|
onClick={() => handleDeleteFamily(family.id)}
|
|
className="w-full sm:w-auto flex items-center justify-center gap-2 px-5 py-3 btn-danger text-white rounded-xl transition-all font-semibold shadow-md hover:shadow-lg"
|
|
>
|
|
<Trash2 className="w-5 h-5" />
|
|
{t('common.delete')}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|