429 lines
26 KiB
PHP
429 lines
26 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="ar" dir="rtl" data-theme="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>مُصادَق | لوحة التحكم</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||
<style>
|
||
:root {
|
||
--emerald: #10b981;
|
||
--bg-base: #080c14;
|
||
--bg-surface: #0d1424;
|
||
--border-default: rgba(255,255,255,0.1);
|
||
--text-primary: #f0f6fc;
|
||
}
|
||
body { font-family: 'IBM Plex Sans Arabic', sans-serif; background-color: var(--bg-base); color: var(--text-primary); }
|
||
[x-cloak] { display: none !important; }
|
||
</style>
|
||
</head>
|
||
<body x-data="app" x-init="init()">
|
||
|
||
<!-- Global Error Toast -->
|
||
<div x-show="globalError" x-cloak
|
||
class="fixed top-4 left-1/2 -translate-x-1/2 z-[100] bg-red-900/90 border border-red-500 text-white px-6 py-3 rounded-lg shadow-2xl max-w-lg text-center"
|
||
x-text="globalError"
|
||
x-transition
|
||
@click="globalError = ''">
|
||
</div>
|
||
|
||
<div class="flex h-screen overflow-hidden">
|
||
<!-- Sidebar -->
|
||
<aside class="w-64 bg-surface border-l border-gray-800 flex flex-col">
|
||
<div class="p-6">
|
||
<h1 class="text-xl font-bold text-emerald-500">مُصادَق</h1>
|
||
</div>
|
||
<nav class="flex-1 px-4 space-y-2">
|
||
<a href="#" @click="page='dashboard'" class="block p-3 rounded hover:bg-gray-800" :class="page==='dashboard'?'bg-emerald-900/20 text-emerald-500':''">📊 لوحة التحكم</a>
|
||
<a x-show="user?.role === 'super_admin'" href="#" @click="page='tenants'" class="block p-3 rounded hover:bg-gray-800" :class="page==='tenants'?'bg-emerald-900/20 text-emerald-500':''">🏢 المكاتب</a>
|
||
<a x-show="user?.role !== 'viewer'" href="#" @click="page='companies'" class="block p-3 rounded hover:bg-gray-800" :class="page==='companies'?'bg-emerald-900/20 text-emerald-500':''">🏭 الشركات</a>
|
||
<a x-show="user?.role === 'super_admin' || user?.role === 'admin'" href="#" @click="page='users'" class="block p-3 rounded hover:bg-gray-800" :class="page==='users'?'bg-emerald-900/20 text-emerald-500':''">👥 المستخدمون</a>
|
||
</nav>
|
||
<div class="p-6 border-t border-gray-800">
|
||
<button @click="logout()" class="w-full text-right text-red-400 text-sm">🚪 تسجيل الخروج</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main -->
|
||
<main class="flex-1 overflow-y-auto p-10">
|
||
<header class="mb-10 flex justify-between items-center">
|
||
<h2 class="text-2xl font-bold" x-text="title()"></h2>
|
||
<div class="flex items-center gap-4">
|
||
<button x-show="page==='tenants' && user?.role === 'super_admin'" @click="showAddTenantModal = true" class="bg-emerald-600 hover:bg-emerald-500 px-4 py-2 rounded text-sm font-bold transition">➕ إضافة مكتب</button>
|
||
<button x-show="page==='users' && (user?.role === 'super_admin' || user?.role === 'admin')" @click="showAddModal = true" class="bg-emerald-600 hover:bg-emerald-500 px-4 py-2 rounded text-sm font-bold transition">➕ إضافة مستخدم</button>
|
||
<button x-show="page==='companies' && (user?.role === 'super_admin' || user?.role === 'admin')" @click="showAddCompanyModal = true" class="bg-emerald-600 hover:bg-emerald-500 px-4 py-2 rounded text-sm font-bold transition">➕ إضافة شركة</button>
|
||
<div class="text-sm text-gray-500" x-text="user?.name"></div>
|
||
</div>
|
||
</header>
|
||
|
||
<div id="content">
|
||
<!-- Dashboard -->
|
||
<div x-show="page === 'dashboard'">
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div class="p-6 bg-surface border border-gray-800 rounded">
|
||
<p class="text-gray-500 text-sm">إجمالي الفواتير</p>
|
||
<p class="text-3xl font-bold mt-2" x-text="stats.total || 0"></p>
|
||
</div>
|
||
<div class="p-6 bg-surface border border-gray-800 rounded">
|
||
<p class="text-gray-500 text-sm">قيد المعالجة</p>
|
||
<p class="text-3xl font-bold mt-2 text-yellow-500" x-text="stats.pending || 0"></p>
|
||
</div>
|
||
<div class="p-6 bg-surface border border-gray-800 rounded">
|
||
<p class="text-gray-500 text-sm">تم الاعتماد</p>
|
||
<p class="text-3xl font-bold mt-2 text-emerald-500" x-text="stats.approved || 0"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tenants List -->
|
||
<div x-show="page === 'tenants'">
|
||
<div class="bg-surface border border-gray-800 rounded overflow-hidden">
|
||
<table class="w-full text-right">
|
||
<thead class="bg-gray-900/50">
|
||
<tr>
|
||
<th class="p-4">اسم المكتب</th>
|
||
<th class="p-4">البريد الإلكتروني</th>
|
||
<th class="p-4">الهاتف</th>
|
||
<th class="p-4">الحالة</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr x-show="tenants.length === 0"><td colspan="4" class="p-8 text-center text-gray-600">لا توجد مكاتب بعد</td></tr>
|
||
<template x-for="t in tenants" :key="t.id">
|
||
<tr class="border-t border-gray-800">
|
||
<td class="p-4 font-bold text-emerald-500" x-text="t.name"></td>
|
||
<td class="p-4" x-text="t.email"></td>
|
||
<td class="p-4" x-text="t.phone || '-'"></td>
|
||
<td class="p-4"><span class="px-2 py-1 bg-emerald-900/30 text-emerald-400 rounded text-xs" x-text="t.status"></span></td>
|
||
</tr>
|
||
</template>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Companies List -->
|
||
<div x-show="page === 'companies'">
|
||
<div class="bg-surface border border-gray-800 rounded overflow-hidden">
|
||
<table class="w-full text-right">
|
||
<thead class="bg-gray-900/50">
|
||
<tr>
|
||
<th class="p-4">اسم الشركة</th>
|
||
<th class="p-4">الرقم الضريبي</th>
|
||
<th class="p-4">رقم التسجيل</th>
|
||
<th class="p-4">تاريخ الإضافة</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr x-show="companies.length === 0"><td colspan="4" class="p-8 text-center text-gray-600">لا توجد شركات بعد</td></tr>
|
||
<template x-for="c in companies" :key="c.id">
|
||
<tr class="border-t border-gray-800">
|
||
<td class="p-4 font-bold text-emerald-500" x-text="c.name"></td>
|
||
<td class="p-4" x-text="c.tax_identification_number"></td>
|
||
<td class="p-4" x-text="c.commercial_registration_number"></td>
|
||
<td class="p-4 text-xs text-gray-500" x-text="c.created_at"></td>
|
||
</tr>
|
||
</template>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Users List -->
|
||
<div x-show="page === 'users'">
|
||
<div class="bg-surface border border-gray-800 rounded overflow-hidden">
|
||
<table class="w-full text-right">
|
||
<thead class="bg-gray-900/50">
|
||
<tr>
|
||
<th class="p-4">الاسم</th>
|
||
<th class="p-4">البريد الإلكتروني</th>
|
||
<th class="p-4">المكتب</th>
|
||
<th class="p-4">الدور</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr x-show="users.length === 0"><td colspan="4" class="p-8 text-center text-gray-600">لا يوجد مستخدمون بعد</td></tr>
|
||
<template x-for="u in users" :key="u.id">
|
||
<tr class="border-t border-gray-800">
|
||
<td class="p-4" x-text="u.name"></td>
|
||
<td class="p-4" x-text="u.email"></td>
|
||
<td class="p-4 text-xs text-gray-400" x-text="u.tenant_name || '-'"></td>
|
||
<td class="p-4"><span class="px-2 py-1 bg-gray-800 rounded text-xs" x-text="u.role"></span></td>
|
||
</tr>
|
||
</template>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Add User Modal -->
|
||
<div x-show="showAddModal" x-cloak class="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
||
<div class="bg-surface border border-gray-800 w-full max-w-md p-8 rounded-lg shadow-2xl" @click.away="showAddModal = false">
|
||
<h3 class="text-xl font-bold mb-6">إضافة مستخدم جديد 👤</h3>
|
||
<form @submit.prevent="createUser" class="space-y-4">
|
||
<div>
|
||
<label class="block text-xs text-gray-500 uppercase mb-1">الاسم الكامل</label>
|
||
<input type="text" x-model="newUser.name" class="w-full bg-gray-950 border border-gray-800 p-3 rounded outline-none focus:border-emerald-500" required>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 uppercase mb-1">البريد الإلكتروني</label>
|
||
<input type="email" x-model="newUser.email" class="w-full bg-gray-950 border border-gray-800 p-3 rounded outline-none focus:border-emerald-500" required>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 uppercase mb-1">كلمة المرور</label>
|
||
<input type="password" x-model="newUser.password" class="w-full bg-gray-950 border border-gray-800 p-3 rounded outline-none focus:border-emerald-500" required>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 uppercase mb-1">الدور</label>
|
||
<select x-model="newUser.role" class="w-full bg-gray-950 border border-gray-800 p-3 rounded outline-none focus:border-emerald-500">
|
||
<option value="employee">موظف</option>
|
||
<option value="accountant">محاسب</option>
|
||
<option value="admin">مدير مكتب</option>
|
||
</select>
|
||
</div>
|
||
<div x-show="user?.role === 'super_admin'">
|
||
<label class="block text-xs text-gray-500 uppercase mb-1">تعيين لمكتب</label>
|
||
<select x-model="newUser.tenant_id" class="w-full bg-gray-950 border border-gray-800 p-3 rounded outline-none focus:border-emerald-500">
|
||
<option value="">-- اختر المكتب --</option>
|
||
<template x-for="t in tenants" :key="t.id">
|
||
<option :value="t.id" x-text="t.name"></option>
|
||
</template>
|
||
</select>
|
||
</div>
|
||
<div class="pt-4 flex gap-3">
|
||
<button type="submit" class="flex-1 bg-emerald-600 hover:bg-emerald-500 py-3 rounded font-bold transition">حفظ المستخدم</button>
|
||
<button type="button" @click="showAddModal = false" class="px-6 py-3 border border-gray-800 rounded hover:bg-gray-800 transition">إلغاء</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add Tenant Modal -->
|
||
<div x-show="showAddTenantModal" x-cloak class="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
||
<div class="bg-surface border border-gray-800 rounded-lg p-6 w-full max-w-md shadow-2xl" @click.away="showAddTenantModal = false">
|
||
<h3 class="text-xl font-bold mb-6 text-emerald-500">مكتب جديد + مدير</h3>
|
||
<form @submit.prevent="createTenant" class="space-y-4">
|
||
<div>
|
||
<label class="block text-xs text-gray-500 uppercase mb-1">اسم المكتب</label>
|
||
<input type="text" x-model="newTenant.name" required class="w-full bg-gray-950 border border-gray-800 p-3 rounded outline-none focus:border-emerald-500">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 uppercase mb-1">بريد المكتب</label>
|
||
<input type="email" x-model="newTenant.email" required class="w-full bg-gray-950 border border-gray-800 p-3 rounded outline-none focus:border-emerald-500">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 uppercase mb-1">الهاتف</label>
|
||
<input type="text" x-model="newTenant.phone" class="w-full bg-gray-950 border border-gray-800 p-3 rounded outline-none focus:border-emerald-500">
|
||
</div>
|
||
<hr class="border-gray-800 my-4">
|
||
<h4 class="text-sm font-bold text-gray-400">معلومات مدير المكتب (Admin)</h4>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 uppercase mb-1">اسم المدير</label>
|
||
<input type="text" x-model="newTenant.manager_name" required class="w-full bg-gray-950 border border-gray-800 p-3 rounded outline-none focus:border-emerald-500">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 uppercase mb-1">بريد المدير (لتسجيل الدخول)</label>
|
||
<input type="email" x-model="newTenant.manager_email" required class="w-full bg-gray-950 border border-gray-800 p-3 rounded outline-none focus:border-emerald-500">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 uppercase mb-1">كلمة المرور</label>
|
||
<input type="password" x-model="newTenant.manager_password" required class="w-full bg-gray-950 border border-gray-800 p-3 rounded outline-none focus:border-emerald-500">
|
||
</div>
|
||
<div class="flex gap-3 pt-4">
|
||
<button type="submit" class="flex-1 bg-emerald-600 hover:bg-emerald-500 p-3 rounded font-bold transition">حفظ</button>
|
||
<button type="button" @click="showAddTenantModal = false" class="flex-1 bg-gray-800 hover:bg-gray-700 p-3 rounded transition">إلغاء</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add Company Modal -->
|
||
<div x-show="showAddCompanyModal" x-cloak class="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
||
<div class="bg-surface border border-gray-800 w-full max-w-md p-8 rounded-lg shadow-2xl" @click.away="showAddCompanyModal = false">
|
||
<h3 class="text-xl font-bold mb-6">إنشاء شركة جديدة 🏭</h3>
|
||
<form @submit.prevent="createCompany" class="space-y-4">
|
||
<div x-show="user?.role === 'super_admin'">
|
||
<label class="block text-xs text-gray-500 uppercase mb-1">المكتب المحاسبي</label>
|
||
<select x-model="newCompany.tenant_id" class="w-full bg-gray-950 border border-gray-800 p-3 rounded outline-none focus:border-emerald-500">
|
||
<option value="">-- اختر المكتب --</option>
|
||
<template x-for="t in tenants" :key="t.id">
|
||
<option :value="t.id" x-text="t.name"></option>
|
||
</template>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 uppercase mb-1">اسم الشركة</label>
|
||
<input type="text" x-model="newCompany.name" class="w-full bg-gray-950 border border-gray-800 p-3 rounded outline-none focus:border-emerald-500" required>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 uppercase mb-1">الرقم الضريبي</label>
|
||
<input type="text" x-model="newCompany.tax_identification_number" class="w-full bg-gray-950 border border-gray-800 p-3 rounded outline-none focus:border-emerald-500">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 uppercase mb-1">رقم التسجيل</label>
|
||
<input type="text" x-model="newCompany.commercial_registration_number" class="w-full bg-gray-950 border border-gray-800 p-3 rounded outline-none focus:border-emerald-500">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs text-gray-500 uppercase mb-1">العنوان</label>
|
||
<textarea x-model="newCompany.address" class="w-full bg-gray-950 border border-gray-800 p-3 rounded outline-none focus:border-emerald-500"></textarea>
|
||
</div>
|
||
<div class="pt-4 flex gap-3">
|
||
<button type="submit" class="flex-1 bg-emerald-600 hover:bg-emerald-500 py-3 rounded font-bold transition">حفظ الشركة</button>
|
||
<button type="button" @click="showAddCompanyModal = false" class="px-6 py-3 border border-gray-800 rounded hover:bg-gray-800 transition">إلغاء</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('alpine:init', () => {
|
||
Alpine.data('app', () => ({
|
||
user: JSON.parse(localStorage.getItem('user')),
|
||
page: 'dashboard',
|
||
users: [],
|
||
companies: [],
|
||
tenants: [],
|
||
stats: { total: 0, pending: 0, approved: 0 },
|
||
showAddModal: false,
|
||
showAddCompanyModal: false,
|
||
showAddTenantModal: false,
|
||
globalError: '',
|
||
newUser: { name: '', email: '', password: '', role: 'employee', tenant_id: '' },
|
||
newCompany: { name: '', tax_identification_number: '', commercial_registration_number: '', address: '', tenant_id: '' },
|
||
newTenant: { name: '', email: '', phone: '', manager_name: '', manager_email: '', manager_password: '' },
|
||
|
||
init() {
|
||
if (!this.user) { window.location.href = '/login.php'; return; }
|
||
this.loadStats();
|
||
this.loadCompanies();
|
||
if (this.user.role === 'super_admin' || this.user.role === 'admin') {
|
||
this.loadUsers();
|
||
}
|
||
if (this.user.role === 'super_admin') {
|
||
this.loadTenants();
|
||
}
|
||
},
|
||
|
||
title() {
|
||
return { dashboard: 'نظرة عامة', users: 'المستخدمون', companies: 'الشركات', tenants: 'المكاتب المحاسبية' }[this.page] || '';
|
||
},
|
||
|
||
showError(msg) {
|
||
this.globalError = msg;
|
||
console.error('[مُصادَق Error]', msg);
|
||
setTimeout(() => this.globalError = '', 6000);
|
||
},
|
||
|
||
token() {
|
||
return localStorage.getItem('access_token');
|
||
},
|
||
|
||
async apiGet(route) {
|
||
try {
|
||
const res = await fetch('/index.php?route=' + route, {
|
||
headers: { 'Authorization': 'Bearer ' + this.token() }
|
||
});
|
||
if (res.status === 401) { this.logout(); return null; }
|
||
const json = await res.json();
|
||
console.log('[API GET]', route, json);
|
||
if (!json.success) {
|
||
this.showError(json.message || 'خطأ في جلب البيانات');
|
||
return null;
|
||
}
|
||
return json.data;
|
||
} catch (e) {
|
||
this.showError('خطأ في الاتصال: ' + route + ' — ' + e.message);
|
||
console.error('[API ERROR]', route, e);
|
||
return null;
|
||
}
|
||
},
|
||
|
||
async apiPost(route, body) {
|
||
try {
|
||
const res = await fetch('/index.php?route=' + route, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': 'Bearer ' + this.token()
|
||
},
|
||
body: JSON.stringify(body)
|
||
});
|
||
const json = await res.json();
|
||
console.log('[API POST]', route, json);
|
||
if (!json.success) {
|
||
this.showError(json.message || 'خطأ في حفظ البيانات');
|
||
}
|
||
return json;
|
||
} catch (e) {
|
||
this.showError('خطأ في الاتصال: ' + route + ' — ' + e.message);
|
||
console.error('[API ERROR]', route, e);
|
||
return { success: false };
|
||
}
|
||
},
|
||
|
||
async loadUsers() {
|
||
const data = await this.apiGet('v1/users');
|
||
if (data) this.users = data;
|
||
},
|
||
|
||
async loadCompanies() {
|
||
const data = await this.apiGet('v1/companies');
|
||
if (data) this.companies = data;
|
||
},
|
||
|
||
async loadStats() {
|
||
const data = await this.apiGet('v1/dashboard/stats');
|
||
if (data) this.stats = data;
|
||
},
|
||
|
||
async loadTenants() {
|
||
const data = await this.apiGet('v1/tenants');
|
||
if (data) this.tenants = data;
|
||
},
|
||
|
||
async createUser() {
|
||
const json = await this.apiPost('v1/users/create', this.newUser);
|
||
if (json.success) {
|
||
this.showAddModal = false;
|
||
this.newUser = { name: '', email: '', password: '', role: 'employee', tenant_id: '' };
|
||
this.loadUsers();
|
||
alert('تم إضافة المستخدم بنجاح');
|
||
}
|
||
},
|
||
|
||
async createCompany() {
|
||
const json = await this.apiPost('v1/companies/create', this.newCompany);
|
||
if (json.success) {
|
||
this.showAddCompanyModal = false;
|
||
this.newCompany = { name: '', tax_identification_number: '', commercial_registration_number: '', address: '', tenant_id: '' };
|
||
this.loadCompanies();
|
||
alert('تم إنشاء الشركة بنجاح');
|
||
}
|
||
},
|
||
|
||
async createTenant() {
|
||
const json = await this.apiPost('v1/tenants/create', this.newTenant);
|
||
if (json.success) {
|
||
this.showAddTenantModal = false;
|
||
this.newTenant = { name: '', email: '', phone: '', manager_name: '', manager_email: '', manager_password: '' };
|
||
this.loadTenants();
|
||
this.loadUsers();
|
||
alert('تم إنشاء المكتب وتعيين المدير بنجاح!');
|
||
}
|
||
},
|
||
|
||
logout() {
|
||
localStorage.clear();
|
||
window.location.href = '/login.php';
|
||
}
|
||
}));
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|