feat: Complete Z.CRM system with all 6 modules
✨ Features: - Complete authentication system with JWT - Dashboard with all 6 modules visible - Contact Management module (Salesforce-style) - CRM & Sales Pipeline module (Pipedrive-style) - Inventory & Assets module (SAP-style) - Tasks & Projects module (Jira/Asana-style) - HR Management module (BambooHR-style) - Marketing Management module (HubSpot-style) - Admin Panel with user management and role matrix - World-class UI/UX with RTL Arabic support - Cairo font (headings) + Readex Pro font (body) - Sample data for all modules - Protected routes and authentication flow - Backend API with Prisma + PostgreSQL - Comprehensive documentation 🎨 Design: - Color-coded modules - Professional data tables - Stats cards with metrics - Progress bars and status badges - Search and filters - Responsive layout 📊 Tech Stack: - Frontend: Next.js 14, TypeScript, Tailwind CSS - Backend: Node.js, Express, Prisma - Database: PostgreSQL - Auth: JWT with bcrypt 🚀 Production-ready frontend with all features accessible
This commit is contained in:
Talal Sharabi
225
frontend/src/app/admin/page.tsx
Normal file
225
frontend/src/app/admin/page.tsx
Normal file
@@ -0,0 +1,225 @@
|
||||
'use client'
|
||||
|
||||
import { useAuth } from '@/contexts/AuthContext'
|
||||
import {
|
||||
Users,
|
||||
Shield,
|
||||
Database,
|
||||
Activity,
|
||||
AlertCircle,
|
||||
CheckCircle,
|
||||
TrendingUp,
|
||||
Server
|
||||
} from 'lucide-react'
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const { user } = useAuth()
|
||||
|
||||
const stats = [
|
||||
{
|
||||
icon: Users,
|
||||
label: 'إجمالي المستخدمين',
|
||||
value: '24',
|
||||
change: '+3 هذا الشهر',
|
||||
color: 'bg-blue-500'
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
label: 'الأدوار النشطة',
|
||||
value: '8',
|
||||
change: '2 مخصص',
|
||||
color: 'bg-purple-500'
|
||||
},
|
||||
{
|
||||
icon: Database,
|
||||
label: 'آخر نسخة احتياطية',
|
||||
value: 'منذ ساعتين',
|
||||
change: 'تلقائي يومياً',
|
||||
color: 'bg-green-500'
|
||||
},
|
||||
{
|
||||
icon: Activity,
|
||||
label: 'صحة النظام',
|
||||
value: '99.9%',
|
||||
change: 'ممتاز',
|
||||
color: 'bg-teal-500'
|
||||
}
|
||||
]
|
||||
|
||||
const systemAlerts = [
|
||||
{
|
||||
type: 'warning',
|
||||
message: 'يوجد 3 مستخدمين لم يسجلوا الدخول منذ 30 يوم',
|
||||
time: 'منذ ساعة'
|
||||
},
|
||||
{
|
||||
type: 'info',
|
||||
message: 'تحديث النظام متاح - الإصدار 1.1.0',
|
||||
time: 'منذ 3 ساعات'
|
||||
}
|
||||
]
|
||||
|
||||
const recentActivities = [
|
||||
{
|
||||
user: 'أحمد محمد',
|
||||
action: 'قام بإنشاء مستخدم جديد',
|
||||
time: 'منذ 10 دقائق'
|
||||
},
|
||||
{
|
||||
user: 'فاطمة علي',
|
||||
action: 'قام بتحديث صلاحيات الدور "مدير المبيعات"',
|
||||
time: 'منذ 25 دقيقة'
|
||||
},
|
||||
{
|
||||
user: 'النظام',
|
||||
action: 'تم إنشاء نسخة احتياطية تلقائية',
|
||||
time: 'منذ ساعتين'
|
||||
},
|
||||
{
|
||||
user: 'محمد خالد',
|
||||
action: 'قام بتغيير إعدادات البريد الإلكتروني',
|
||||
time: 'منذ 3 ساعات'
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">لوحة تحكم المدير</h1>
|
||||
<p className="text-gray-600">مرحباً {user?.username}، إليك نظرة عامة على النظام</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
{stats.map((stat, index) => {
|
||||
const Icon = stat.icon
|
||||
return (
|
||||
<div key={index} className="bg-white rounded-xl shadow-md p-6 border border-gray-100">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className={`${stat.color} p-3 rounded-lg`}>
|
||||
<Icon className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-1">{stat.value}</h3>
|
||||
<p className="text-sm text-gray-600 mb-1">{stat.label}</p>
|
||||
<p className="text-xs text-gray-500">{stat.change}</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* System Alerts */}
|
||||
<div className="bg-white rounded-xl shadow-md p-6 border border-gray-100">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<AlertCircle className="h-6 w-6 text-orange-500" />
|
||||
تنبيهات النظام
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{systemAlerts.map((alert, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`p-4 rounded-lg border ${
|
||||
alert.type === 'warning'
|
||||
? 'bg-yellow-50 border-yellow-200'
|
||||
: 'bg-blue-50 border-blue-200'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
{alert.type === 'warning' ? (
|
||||
<AlertCircle className="h-5 w-5 text-yellow-600 flex-shrink-0 mt-0.5" />
|
||||
) : (
|
||||
<Activity className="h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" />
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-gray-900">{alert.message}</p>
|
||||
<p className="text-xs text-gray-600 mt-1">{alert.time}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Activities */}
|
||||
<div className="bg-white rounded-xl shadow-md p-6 border border-gray-100">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<Activity className="h-6 w-6 text-green-500" />
|
||||
النشاطات الأخيرة
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{recentActivities.map((activity, index) => (
|
||||
<div key={index} className="flex items-start gap-3 p-3 hover:bg-gray-50 rounded-lg transition-colors">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-gray-900">
|
||||
<span className="font-semibold">{activity.user}</span> {activity.action}
|
||||
</p>
|
||||
<p className="text-xs text-gray-600 mt-1">{activity.time}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* System Status */}
|
||||
<div className="mt-8 bg-white rounded-xl shadow-md p-6 border border-gray-100">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<Server className="h-6 w-6 text-teal-500" />
|
||||
حالة الخدمات
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{[
|
||||
{ name: 'قاعدة البيانات', status: 'operational', uptime: '99.99%' },
|
||||
{ name: 'خادم التطبيق', status: 'operational', uptime: '99.95%' },
|
||||
{ name: 'خدمة البريد', status: 'operational', uptime: '99.90%' }
|
||||
].map((service, index) => (
|
||||
<div key={index} className="p-4 border border-gray-200 rounded-lg">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className="font-semibold text-gray-900">{service.name}</p>
|
||||
<CheckCircle className="h-5 w-5 text-green-500" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">Uptime: {service.uptime}</p>
|
||||
<div className="mt-2 h-2 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-green-500" style={{ width: service.uptime }}></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<a
|
||||
href="/admin/users"
|
||||
className="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1"
|
||||
>
|
||||
<Users className="h-8 w-8 mb-3" />
|
||||
<h3 className="text-lg font-bold mb-2">إدارة المستخدمين</h3>
|
||||
<p className="text-sm text-blue-100">إضافة وتعديل المستخدمين</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/admin/roles"
|
||||
className="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1"
|
||||
>
|
||||
<Shield className="h-8 w-8 mb-3" />
|
||||
<h3 className="text-lg font-bold mb-2">الأدوار والصلاحيات</h3>
|
||||
<p className="text-sm text-purple-100">إدارة صلاحيات المستخدمين</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/admin/backup"
|
||||
className="bg-gradient-to-br from-green-500 to-green-600 text-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1"
|
||||
>
|
||||
<Database className="h-8 w-8 mb-3" />
|
||||
<h3 className="text-lg font-bold mb-2">النسخ الاحتياطي</h3>
|
||||
<p className="text-sm text-green-100">نسخ واستعادة قاعدة البيانات</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user