✨ Feat: Dashboard accuracy, Staff & Settings modules, and File Auth fix
This commit is contained in:
Hamza-Ayed
212
frontend/src/pages/staff/StaffPage.tsx
Normal file
212
frontend/src/pages/staff/StaffPage.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
/**
|
||||
* ════════════════════════════════════════════════════════════
|
||||
* مُصادَق (Musadaq) — Staff Management Page
|
||||
* ════════════════════════════════════════════════════════════
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Users, UserPlus, Shield, Mail, Phone, Trash2, Power } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import apiClient from '../../api/client';
|
||||
|
||||
export const StaffPage = () => {
|
||||
const [staff, setStaff] = useState<any[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
||||
|
||||
// Form State
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [role, setRole] = useState('accountant');
|
||||
|
||||
const fetchStaff = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const { data } = await apiClient.get('/users');
|
||||
setStaff(data);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch staff', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchStaff();
|
||||
}, []);
|
||||
|
||||
const handleAddStaff = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await apiClient.post('/users', {
|
||||
full_name: fullName,
|
||||
email,
|
||||
password,
|
||||
role
|
||||
});
|
||||
setIsAddModalOpen(false);
|
||||
setFullName('');
|
||||
setEmail('');
|
||||
setPassword('');
|
||||
fetchStaff();
|
||||
} catch (error: any) {
|
||||
alert(error.response?.data?.message || 'فشل إضافة الموظف');
|
||||
}
|
||||
};
|
||||
|
||||
const toggleStatus = async (id: string) => {
|
||||
try {
|
||||
await apiClient.delete(`/users/${id}`);
|
||||
fetchStaff();
|
||||
} catch (error) {
|
||||
alert('فشل تغيير حالة الموظف');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
||||
<header className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-slate-900 tracking-tight">إدارة الموظفين</h2>
|
||||
<p className="text-slate-500 mt-1 font-medium">إدارة المحاسبين والمديرين في مكتبك.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsAddModalOpen(true)}
|
||||
className="btn-primary py-3 px-8 rounded-2xl flex items-center gap-2 shadow-xl shadow-primary-500/25 active:scale-95 transition-all"
|
||||
>
|
||||
<UserPlus className="w-5 h-5" />
|
||||
إضافة موظف جديد
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center p-20">
|
||||
<div className="animate-spin rounded-full h-10 w-10 border-b-2 border-primary-600"></div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{staff.map((member) => (
|
||||
<motion.div
|
||||
key={member.id}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="card-premium p-6 group hover:border-primary-200 transition-all border border-slate-100"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<div className="w-14 h-14 rounded-2xl bg-slate-50 text-slate-400 flex items-center justify-center group-hover:bg-primary-50 group-hover:text-primary-600 transition-all">
|
||||
<Users className="w-7 h-7" />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => toggleStatus(member.id)}
|
||||
className={`p-2 rounded-xl transition-all ${member.is_active ? 'text-emerald-500 bg-emerald-50' : 'text-slate-400 bg-slate-50'}`}
|
||||
title={member.is_active ? 'تعطيل الحساب' : 'تفعيل الحساب'}
|
||||
>
|
||||
<Power className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-slate-900 mb-1">{member.full_name}</h3>
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<span className={`text-[10px] font-black uppercase tracking-widest px-2 py-0.5 rounded-md ${
|
||||
member.role === 'admin' ? 'bg-indigo-50 text-indigo-600' : 'bg-slate-50 text-slate-600'
|
||||
}`}>
|
||||
{member.role === 'admin' ? 'مدير نظام' : 'محاسب'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3 text-sm text-slate-500">
|
||||
<Mail className="w-4 h-4" />
|
||||
{member.email}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Add Staff Modal ──────────────────────────────────── */}
|
||||
<AnimatePresence>
|
||||
{isAddModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm">
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.9, opacity: 0 }}
|
||||
className="bg-white rounded-[32px] p-8 w-full max-w-md shadow-2xl relative"
|
||||
>
|
||||
<h3 className="text-2xl font-bold text-slate-900 mb-2">إضافة موظف جديد</h3>
|
||||
<p className="text-slate-500 mb-8">سيتمكن الموظف من الدخول لمكتبك ومساعدة الشركات.</p>
|
||||
|
||||
<form onSubmit={handleAddStaff} className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-slate-700 mb-2">الاسم الكامل</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={fullName}
|
||||
onChange={e => setFullName(e.target.value)}
|
||||
className="w-full bg-slate-50 border border-slate-200 rounded-2xl px-5 py-4 outline-none focus:border-primary-500 transition-all"
|
||||
placeholder="مثال: أحمد محمد"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-slate-700 mb-2">البريد الإلكتروني</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
className="w-full bg-slate-50 border border-slate-200 rounded-2xl px-5 py-4 outline-none focus:border-primary-500 transition-all"
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-slate-700 mb-2">كلمة المرور المؤقتة</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
className="w-full bg-slate-50 border border-slate-200 rounded-2xl px-5 py-4 outline-none focus:border-primary-500 transition-all"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-slate-700 mb-2">الصلاحية</label>
|
||||
<select
|
||||
value={role}
|
||||
onChange={e => setRole(e.target.value)}
|
||||
className="w-full bg-slate-50 border border-slate-200 rounded-2xl px-5 py-4 outline-none focus:border-primary-500 transition-all appearance-none"
|
||||
>
|
||||
<option value="accountant">محاسب</option>
|
||||
<option value="admin">مدير نظام</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsAddModalOpen(false)}
|
||||
className="flex-1 bg-slate-100 text-slate-700 font-bold py-4 rounded-2xl hover:bg-slate-200 transition-all"
|
||||
>
|
||||
إلغاء
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-[2] btn-primary py-4 rounded-2xl shadow-lg shadow-primary-500/30"
|
||||
>
|
||||
حفظ وإضافة
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user