35daa52767
✨ 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
75 lines
3.2 KiB
TypeScript
75 lines
3.2 KiB
TypeScript
'use client'
|
||
|
||
import { Key, Plus, Trash2, Copy, Eye, EyeOff } from 'lucide-react'
|
||
|
||
export default function APIKeys() {
|
||
return (
|
||
<div>
|
||
<div className="mb-8 flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-3xl font-bold text-gray-900 mb-2">مفاتيح API</h1>
|
||
<p className="text-gray-600">إدارة مفاتيح الوصول للـ API</p>
|
||
</div>
|
||
<button className="flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all shadow-md">
|
||
<Plus className="h-5 w-5" />
|
||
<span className="font-semibold">إنشاء مفتاح جديد</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div className="bg-blue-50 border border-blue-200 rounded-xl p-6 mb-8">
|
||
<h3 className="text-lg font-bold text-blue-900 mb-2">💡 معلومات مهمة</h3>
|
||
<ul className="text-sm text-blue-800 space-y-2">
|
||
<li>• لا تشارك مفاتيح API الخاصة بك مع أي شخص</li>
|
||
<li>• احفظ المفاتيح في مكان آمن</li>
|
||
<li>• قم بتجديد المفاتيح بشكل دوري لزيادة الأمان</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
{[
|
||
{ name: 'Production API Key', key: 'sk_live_abc123...', created: '2024-01-01', lastUsed: '2024-01-06' },
|
||
{ name: 'Development API Key', key: 'sk_test_xyz789...', created: '2024-01-01', lastUsed: '2024-01-05' }
|
||
].map((apiKey, index) => (
|
||
<div key={index} className="bg-white rounded-xl shadow-md p-6 border border-gray-100">
|
||
<div className="flex items-start justify-between mb-4">
|
||
<div className="flex items-center gap-3">
|
||
<div className="bg-purple-100 p-3 rounded-lg">
|
||
<Key className="h-6 w-6 text-purple-600" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-bold text-gray-900">{apiKey.name}</h3>
|
||
<p className="text-sm text-gray-600">تم الإنشاء: {apiKey.created}</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg">
|
||
<Copy className="h-4 w-4" />
|
||
</button>
|
||
<button className="p-2 text-red-600 hover:bg-red-50 rounded-lg">
|
||
<Trash2 className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gray-50 p-4 rounded-lg font-mono text-sm flex items-center justify-between">
|
||
<span className="text-gray-700">{apiKey.key}</span>
|
||
<button className="text-gray-600 hover:text-gray-900">
|
||
<Eye className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="mt-4 flex items-center justify-between text-sm text-gray-600">
|
||
<span>آخر استخدام: {apiKey.lastUsed}</span>
|
||
<span className="flex items-center gap-1">
|
||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||
نشط
|
||
</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|