706 lines
46 KiB
PHP
706 lines
46 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>
|
|
|
|
<!-- Styles -->
|
|
<link rel="stylesheet" href="assets/css/app.css">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#10b981',
|
|
'primary-dark': '#059669',
|
|
dark: '#0a0f1a',
|
|
card: '#0f172a'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.nav-link.active { background: rgba(16, 185, 129, 0.1); color: #10b981; border-right: 3px solid #10b981; }
|
|
.glass-panel { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-dark text-slate-100 antialiased overflow-x-hidden">
|
|
|
|
<!-- App Wrapper -->
|
|
<div id="app" class="flex h-screen overflow-hidden">
|
|
|
|
<!-- Sidebar -->
|
|
<aside id="sidebar" class="w-64 glass-panel flex-shrink-0 hidden flex-col transition-all duration-300">
|
|
<div class="h-20 flex items-center gap-3 px-6 border-b border-white/10">
|
|
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center shadow-lg shadow-primary/20">
|
|
<span class="text-white font-bold text-xl">م</span>
|
|
</div>
|
|
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-slate-400">مُصادَق</h1>
|
|
</div>
|
|
<nav class="flex-1 py-6 space-y-2">
|
|
<a href="#" onclick="navigateTo('dashboard')" id="nav-dashboard" class="nav-link flex items-center gap-3 px-6 py-3 text-slate-400 hover:text-white transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
|
|
لوحة التحكم
|
|
</a>
|
|
<a href="#" onclick="navigateTo('companies')" id="nav-companies" class="nav-link flex items-center gap-3 px-6 py-3 text-slate-400 hover:text-white transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
|
|
الشركات
|
|
</a>
|
|
<a href="#" onclick="navigateTo('invoices')" id="nav-invoices" class="nav-link flex items-center gap-3 px-6 py-3 text-slate-400 hover:text-white transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
|
|
الفواتير المرفوعة
|
|
</a>
|
|
<a href="#" onclick="navigateTo('users')" id="nav-users" class="nav-link flex items-center gap-3 px-6 py-3 text-slate-400 hover:text-white transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
|
|
المستخدمين
|
|
</a>
|
|
</nav>
|
|
<div class="p-6 border-t border-white/10">
|
|
<button onclick="logout()" class="flex items-center gap-3 text-red-400 hover:text-red-300 transition-colors w-full">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
|
|
تسجيل الخروج
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Area -->
|
|
<div class="flex-1 flex flex-col h-screen overflow-hidden">
|
|
<!-- Header -->
|
|
<header id="header" class="h-20 glass-panel flex items-center justify-between px-8 flex-shrink-0 hidden">
|
|
<h2 id="page-title" class="text-2xl font-bold">لوحة التحكم</h2>
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-full bg-slate-800 border border-white/10 flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Content -->
|
|
<main class="flex-1 overflow-y-auto p-8 relative">
|
|
<div id="page-content" class="max-w-7xl mx-auto pb-24"></div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- AI Floating Assistant -->
|
|
<div id="ai-container" class="fixed bottom-8 left-8 z-[60] hidden">
|
|
<button onclick="document.getElementById('ai-chat').classList.toggle('hidden')" class="w-16 h-16 bg-gradient-to-tr from-primary to-emerald-400 rounded-full flex items-center justify-center shadow-2xl shadow-primary/40 hover:scale-110 transition-transform">
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path></svg>
|
|
</button>
|
|
|
|
<!-- Chat Popover -->
|
|
<div id="ai-chat" class="hidden absolute bottom-20 left-0 w-80 glass-panel rounded-3xl p-6 shadow-2xl">
|
|
<h4 class="font-bold mb-4 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-primary rounded-full animate-pulse"></span>
|
|
مُساعد مُصادَق الذكي
|
|
</h4>
|
|
<div id="ai-answer" class="bg-black/20 rounded-xl p-3 mb-4 min-h-[60px] text-sm text-slate-300">كيف يمكنني مساعدتك اليوم؟</div>
|
|
<div class="relative">
|
|
<input type="text" id="ai-query" class="w-full bg-white/10 border border-white/10 rounded-xl px-4 py-2 text-sm focus:outline-none focus:border-primary" placeholder="اسأل عن فواتيرك...">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modals Container -->
|
|
<div id="modals"></div>
|
|
|
|
<script>
|
|
// ══════════════════════════════════════════════════════════
|
|
// مُصادَق — API Client
|
|
// ══════════════════════════════════════════════════════════
|
|
const API = {
|
|
baseUrl: 'index.php?route=/api/v1',
|
|
accessToken: localStorage.getItem('access_token'),
|
|
|
|
async _request(method, path, body = null, isFormData = false) {
|
|
const headers = { 'Accept': 'application/json' };
|
|
if (this.accessToken) headers['Authorization'] = `Bearer ${this.accessToken}`;
|
|
if (!isFormData && body) {
|
|
headers['Content-Type'] = 'application/json';
|
|
body = JSON.stringify(body);
|
|
}
|
|
const res = await fetch(`${this.baseUrl}${path}`, { method, headers, body });
|
|
const data = await res.json();
|
|
if (!res.ok) {
|
|
if (res.status === 401) {
|
|
logout();
|
|
}
|
|
throw data;
|
|
}
|
|
return data;
|
|
},
|
|
|
|
get(path) { return this._request('GET', path); },
|
|
post(path, body) { return this._request('POST', path, body); },
|
|
upload(path, formData) { return this._request('POST', path, formData, true); }
|
|
};
|
|
|
|
// ══════════════════════════════════════════════════════════
|
|
// SPA Engine & Views
|
|
// ══════════════════════════════════════════════════════════
|
|
const isLoggedIn = () => !!localStorage.getItem('access_token');
|
|
const contentDiv = document.getElementById('page-content');
|
|
let currentChart = null;
|
|
|
|
function logout() {
|
|
localStorage.removeItem('access_token');
|
|
API.accessToken = null;
|
|
initApp();
|
|
}
|
|
|
|
async function navigateTo(page) {
|
|
document.querySelectorAll('.nav-link').forEach(el => el.classList.remove('active'));
|
|
const activeLink = document.getElementById(`nav-${page}`);
|
|
if (activeLink) activeLink.classList.add('active');
|
|
|
|
contentDiv.innerHTML = '<div class="flex justify-center mt-20"><div class="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin"></div></div>';
|
|
|
|
if (page === 'dashboard') await renderDashboard();
|
|
else if (page === 'companies') await renderCompanies();
|
|
else if (page === 'invoices') await renderInvoices();
|
|
else if (page === 'users') await renderUsers();
|
|
}
|
|
|
|
// ── Users View ───────────────────────────────────────────
|
|
async function renderUsers() {
|
|
document.getElementById('page-title').textContent = 'إدارة المستخدمين';
|
|
try {
|
|
const res = await API.get('/users');
|
|
const users = res.data;
|
|
|
|
let html = `
|
|
<div class="flex justify-end mb-6">
|
|
<button onclick="showAddUserModal()" class="bg-primary hover:bg-primary-dark text-white px-6 py-2 rounded-xl transition-all shadow-lg flex items-center gap-2 font-bold">
|
|
+ إضافة مستخدم جديد
|
|
</button>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
`;
|
|
|
|
if (users.length === 0) {
|
|
html += `<div class="col-span-full text-center py-12 text-slate-500 glass-panel rounded-3xl">لا يوجد مستخدمين مسجلين.</div>`;
|
|
} else {
|
|
users.forEach(user => {
|
|
const roleColor = user.role === 'admin' ? 'text-primary' : (user.role === 'manager' ? 'text-blue-400' : 'text-slate-400');
|
|
const roleLabel = user.role === 'admin' ? 'سوبر أدمن' : (user.role === 'manager' ? 'مدير' : 'محاسب');
|
|
html += `
|
|
<div class="glass-panel p-6 rounded-3xl flex flex-col h-full border-t-4 border-t-primary">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<div class="w-12 h-12 rounded-full bg-black/40 flex items-center justify-center font-bold text-xl text-primary">
|
|
${user.name.charAt(0)}
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold">${user.name}</h3>
|
|
<p class="text-slate-400 text-sm">${user.email}</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-auto space-y-3">
|
|
<div class="flex items-center justify-between text-sm p-3 bg-black/20 rounded-xl border border-white/5">
|
|
<span class="text-slate-400">الصلاحية</span>
|
|
<span class="${roleColor} font-bold">${roleLabel}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-sm p-3 bg-black/20 rounded-xl border border-white/5">
|
|
<span class="text-slate-400">الحالة</span>
|
|
${user.is_active ? '<span class="text-emerald-400 font-bold">نشط</span>' : '<span class="text-red-400 font-bold">معطل</span>'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
}
|
|
|
|
html += `</div>`;
|
|
contentDiv.innerHTML = html;
|
|
} catch(err) {
|
|
contentDiv.innerHTML = `<div class="text-red-400">خطأ في جلب المستخدمين</div>`;
|
|
}
|
|
}
|
|
|
|
function showAddUserModal() {
|
|
const modals = document.getElementById('modals');
|
|
modals.innerHTML = `
|
|
<div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4 overflow-y-auto" id="user-modal">
|
|
<div class="glass-panel p-8 rounded-3xl w-full max-w-md border border-white/10 shadow-2xl my-auto">
|
|
<h3 class="text-2xl font-bold mb-6">إضافة مستخدم جديد</h3>
|
|
<form id="add-user-form" class="space-y-4">
|
|
<input type="text" id="usr-name" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" placeholder="الاسم الكامل" required>
|
|
<input type="email" id="usr-email" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" placeholder="البريد الإلكتروني" required>
|
|
<input type="password" id="usr-password" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" placeholder="كلمة المرور" required>
|
|
<select id="usr-role" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" required>
|
|
<option value="accountant">محاسب</option>
|
|
<option value="manager">مدير</option>
|
|
</select>
|
|
|
|
<div class="flex gap-3 mt-6 pt-4 border-t border-white/10">
|
|
<button type="button" onclick="document.getElementById('user-modal').remove()" class="flex-1 py-3 bg-white/5 hover:bg-white/10 rounded-xl transition">إلغاء</button>
|
|
<button type="submit" class="flex-1 py-3 bg-primary hover:bg-primary-dark text-white font-bold rounded-xl shadow-lg transition">إضافة المستخدم</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('add-user-form').onsubmit = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const data = {
|
|
name: document.getElementById('usr-name').value,
|
|
email: document.getElementById('usr-email').value,
|
|
password: document.getElementById('usr-password').value,
|
|
role: document.getElementById('usr-role').value
|
|
};
|
|
await API.post('/users', data);
|
|
document.getElementById('user-modal').remove();
|
|
renderUsers();
|
|
} catch(err) {
|
|
alert(err.error?.message_ar || err.error?.details?.message || err.message || 'حدث خطأ');
|
|
}
|
|
};
|
|
}
|
|
|
|
// ── Login View ───────────────────────────────────────────
|
|
function renderLogin() {
|
|
document.getElementById('sidebar').classList.add('hidden');
|
|
document.getElementById('header').classList.add('hidden');
|
|
document.getElementById('ai-container').classList.add('hidden');
|
|
|
|
contentDiv.innerHTML = `
|
|
<div class="flex flex-col items-center justify-center min-h-[80vh]">
|
|
<div class="w-full max-w-md p-10 glass-panel rounded-3xl shadow-2xl">
|
|
<div class="w-16 h-16 bg-primary rounded-2xl flex items-center justify-center shadow-lg shadow-primary/30 mx-auto mb-6">
|
|
<span class="text-white font-bold text-3xl">م</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold mb-2 text-center">مرحباً بك في مُصادَق</h2>
|
|
<p class="text-slate-400 text-center mb-8">سجل دخولك للوصول إلى منصة الفوترة</p>
|
|
|
|
<form id="login-form" class="space-y-5">
|
|
<input type="email" id="login-email" class="w-full bg-black/20 border border-white/10 rounded-xl px-5 py-3 focus:outline-none focus:border-primary text-white" placeholder="البريد الإلكتروني" required>
|
|
<input type="password" id="login-password" class="w-full bg-black/20 border border-white/10 rounded-xl px-5 py-3 focus:outline-none focus:border-primary text-white" placeholder="كلمة المرور" required>
|
|
<div id="login-error" class="text-red-400 text-sm text-center hidden p-2 bg-red-500/10 rounded-lg border border-red-500/20"></div>
|
|
<button type="submit" class="w-full bg-gradient-to-r from-primary to-emerald-400 hover:from-primary-dark hover:to-primary text-white font-bold py-3 rounded-xl shadow-lg transition-all">تسجيل الدخول</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('login-form').onsubmit = async (e) => {
|
|
e.preventDefault();
|
|
const btn = e.target.querySelector('button');
|
|
btn.innerHTML = 'جاري التحقق...';
|
|
btn.disabled = true;
|
|
|
|
try {
|
|
const email = document.getElementById('login-email').value;
|
|
const password = document.getElementById('login-password').value;
|
|
const res = await API.post('/auth/login', { email, password });
|
|
localStorage.setItem('access_token', res.data.access_token);
|
|
API.accessToken = res.data.access_token;
|
|
initApp();
|
|
} catch (err) {
|
|
const errEl = document.getElementById('login-error');
|
|
errEl.textContent = err.error?.message_ar || err.error?.details?.message || err.message || 'خطأ في الدخول';
|
|
errEl.classList.remove('hidden');
|
|
btn.innerHTML = 'تسجيل الدخول';
|
|
btn.disabled = false;
|
|
}
|
|
};
|
|
}
|
|
|
|
// ── Dashboard View ───────────────────────────────────────
|
|
async function renderDashboard() {
|
|
document.getElementById('page-title').textContent = 'لوحة التحكم السريعة';
|
|
try {
|
|
const res = await API.get('/dashboard');
|
|
const stats = res.data;
|
|
|
|
let html = `
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
<div class="glass-panel p-6 rounded-3xl border-t-4 border-t-primary shadow-xl bg-gradient-to-br from-black/40 to-transparent">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<p class="text-slate-400 font-bold">فواتير هذا الشهر</p>
|
|
<svg class="w-8 h-8 text-primary opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
|
|
</div>
|
|
<h3 class="text-5xl font-black text-white">${stats.total_this_month}</h3>
|
|
</div>
|
|
<div class="glass-panel p-6 rounded-3xl border-t-4 border-t-emerald-500 shadow-xl bg-gradient-to-br from-black/40 to-transparent">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<p class="text-slate-400 font-bold">نسبة استهلاك الباقة</p>
|
|
<svg class="w-8 h-8 text-emerald-500 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
|
</div>
|
|
<h3 class="text-5xl font-black text-emerald-400">${stats.subscription_usage}%</h3>
|
|
</div>
|
|
<div class="glass-panel p-6 rounded-3xl flex flex-col justify-center gap-3 bg-gradient-to-br from-primary/10 to-transparent">
|
|
<h3 class="text-lg font-bold text-white mb-2">إجراءات سريعة</h3>
|
|
<button onclick="navigateTo('invoices')" class="w-full py-3 bg-white/10 hover:bg-white/20 rounded-xl transition border border-white/5 text-sm font-bold flex items-center justify-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
|
|
عرض الفواتير
|
|
</button>
|
|
<button onclick="showUploadInvoiceModal()" class="w-full py-3 bg-primary hover:bg-primary-dark rounded-xl transition text-white text-sm font-bold shadow-lg flex items-center justify-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
|
|
رفع فاتورة جديدة
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div class="glass-panel p-8 rounded-3xl shadow-2xl">
|
|
<h4 class="font-bold mb-6 text-xl flex items-center gap-2"><span class="w-2 h-6 bg-primary rounded-full"></span> أحدث الفواتير</h4>
|
|
<div class="space-y-4">
|
|
`;
|
|
|
|
if (stats.recent_invoices.length === 0) {
|
|
html += `<p class="text-slate-500 text-center py-8 bg-black/20 rounded-xl">لا توجد فواتير بعد</p>`;
|
|
} else {
|
|
stats.recent_invoices.forEach(inv => {
|
|
const statusColor = inv.status === 'APPROVED' ? 'text-primary' : (inv.status === 'REJECTED' ? 'text-red-400' : 'text-yellow-400');
|
|
html += `
|
|
<div class="flex justify-between items-center p-5 bg-black/30 rounded-2xl border border-white/5 hover:border-white/10 transition-colors">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-sm text-slate-200">${inv.invoice_uuid.substring(0,8)}...</p>
|
|
<p class="text-xs text-slate-400 mt-1">${inv.company_name}</p>
|
|
</div>
|
|
</div>
|
|
<span class="${statusColor} text-xs font-bold bg-white/5 px-4 py-2 rounded-full tracking-wider border border-white/5">${inv.status}</span>
|
|
</div>`;
|
|
});
|
|
}
|
|
|
|
html += `
|
|
</div>
|
|
</div>
|
|
<div class="glass-panel p-8 rounded-3xl shadow-2xl flex flex-col items-center justify-center">
|
|
<h4 class="font-bold mb-6 text-xl self-start flex items-center gap-2"><span class="w-2 h-6 bg-primary rounded-full"></span> حالة الفواتير</h4>
|
|
<div class="w-full max-w-[250px] aspect-square relative">
|
|
<canvas id="statusChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
contentDiv.innerHTML = html;
|
|
|
|
// Render Chart
|
|
if (stats.status_distribution && stats.status_distribution.length > 0) {
|
|
const ctx = document.getElementById('statusChart').getContext('2d');
|
|
if (currentChart) currentChart.destroy();
|
|
currentChart = new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: stats.status_distribution.map(s => s.status),
|
|
datasets: [{
|
|
data: stats.status_distribution.map(s => s.count),
|
|
backgroundColor: ['#10b981', '#fbbf24', '#f87171', '#60a5fa'],
|
|
borderWidth: 0,
|
|
hoverOffset: 4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: { position: 'bottom', labels: { color: '#cbd5e1', font: { family: 'system-ui' } } }
|
|
},
|
|
cutout: '70%'
|
|
}
|
|
});
|
|
}
|
|
|
|
} catch (err) {
|
|
contentDiv.innerHTML = `<div class="text-red-400 p-4 glass-panel rounded-xl">خطأ في جلب الإحصائيات: ${err.error?.message_ar || err.message}</div>`;
|
|
}
|
|
}
|
|
|
|
// ── Companies View ───────────────────────────────────────
|
|
async function renderCompanies() {
|
|
document.getElementById('page-title').textContent = 'إدارة الشركات';
|
|
try {
|
|
const res = await API.get('/companies');
|
|
const companies = res.data;
|
|
|
|
let html = `
|
|
<div class="flex justify-end mb-6">
|
|
<button onclick="showAddCompanyModal()" class="bg-primary hover:bg-primary-dark text-white px-6 py-2 rounded-xl transition-all shadow-lg flex items-center gap-2 font-bold">
|
|
+ إضافة شركة جديدة
|
|
</button>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
`;
|
|
|
|
if (companies.length === 0) {
|
|
html += `<div class="col-span-full text-center py-12 text-slate-500 glass-panel rounded-3xl">لا توجد شركات مسجلة بعد.</div>`;
|
|
} else {
|
|
companies.forEach(company => {
|
|
html += `
|
|
<div class="glass-panel p-6 rounded-3xl flex flex-col h-full border-t-4 border-t-primary">
|
|
<h3 class="text-xl font-bold mb-1">${company.name}</h3>
|
|
<p class="text-slate-400 text-sm font-mono mb-4">الرقم الضريبي: ${company.tax_identification_number || company.tax_number || 'غير متوفر'}</p>
|
|
|
|
<div class="mt-auto space-y-3">
|
|
<div class="flex items-center justify-between text-sm p-3 bg-black/20 rounded-xl border border-white/5">
|
|
<span class="text-slate-400">بوابة JoFotara</span>
|
|
${company.jofotara_client_id_encrypted
|
|
? '<span class="text-primary font-bold">مربوط ✓</span>'
|
|
: '<span class="text-yellow-400 font-bold">غير مربوط ⚠</span>'}
|
|
</div>
|
|
<button onclick="showJoFotaraModal('${company.id}')" class="w-full py-2 bg-white/5 hover:bg-white/10 rounded-xl text-sm transition border border-white/10">إعدادات الربط</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
}
|
|
|
|
html += `</div>`;
|
|
contentDiv.innerHTML = html;
|
|
} catch (err) {
|
|
contentDiv.innerHTML = `<div class="text-red-400">خطأ في جلب الشركات</div>`;
|
|
}
|
|
}
|
|
|
|
// ── Invoices View ────────────────────────────────────────
|
|
async function renderInvoices() {
|
|
document.getElementById('page-title').textContent = 'سجل الفواتير';
|
|
try {
|
|
const res = await API.get('/invoices');
|
|
const invoices = res.data;
|
|
|
|
let html = `
|
|
<div class="flex justify-end mb-6">
|
|
<button onclick="showUploadInvoiceModal()" class="bg-primary hover:bg-primary-dark text-white px-6 py-2 rounded-xl transition-all shadow-lg flex items-center gap-2 font-bold">
|
|
رفع فاتورة يدوياً
|
|
</button>
|
|
</div>
|
|
<div class="glass-panel rounded-3xl overflow-hidden">
|
|
<table class="w-full text-right text-sm">
|
|
<thead class="bg-white/5 border-b border-white/10 text-slate-300">
|
|
<tr>
|
|
<th class="p-4">الرقم التسلسلي</th>
|
|
<th class="p-4">الشركة</th>
|
|
<th class="p-4">التاريخ</th>
|
|
<th class="p-4">الحالة</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-white/5">
|
|
`;
|
|
|
|
if (invoices.length === 0) {
|
|
html += `<tr><td colspan="4" class="p-8 text-center text-slate-500">لا توجد فواتير.</td></tr>`;
|
|
} else {
|
|
invoices.forEach(inv => {
|
|
const statusColor = inv.status === 'APPROVED' ? 'text-primary' : (inv.status === 'REJECTED' ? 'text-red-400' : 'text-yellow-400');
|
|
html += `
|
|
<tr class="hover:bg-white/5 transition-colors">
|
|
<td class="p-4 font-mono text-xs text-slate-300">${inv.invoice_uuid}</td>
|
|
<td class="p-4 font-bold text-slate-200">${inv.company_id}</td>
|
|
<td class="p-4 text-slate-400">${new Date(inv.created_at).toLocaleDateString('ar-JO')}</td>
|
|
<td class="p-4 font-bold ${statusColor}">${inv.status}</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
}
|
|
|
|
html += `</tbody></table></div>`;
|
|
contentDiv.innerHTML = html;
|
|
} catch (err) {
|
|
contentDiv.innerHTML = `<div class="text-red-400">خطأ في جلب الفواتير</div>`;
|
|
}
|
|
}
|
|
|
|
// ── Modals & Actions ─────────────────────────────────────
|
|
function showAddCompanyModal() {
|
|
const modals = document.getElementById('modals');
|
|
modals.innerHTML = `
|
|
<div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4 overflow-y-auto" id="company-modal">
|
|
<div class="glass-panel p-8 rounded-3xl w-full max-w-lg border border-white/10 shadow-2xl my-auto">
|
|
<h3 class="text-2xl font-bold mb-6">إضافة شركة جديدة</h3>
|
|
<form id="add-company-form" class="space-y-4">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<input type="text" id="comp-name" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" placeholder="الاسم (عربي) *" required>
|
|
<input type="text" id="comp-name-en" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" placeholder="الاسم (إنجليزي)">
|
|
<input type="text" id="comp-tax" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" placeholder="الرقم الضريبي *" required>
|
|
<input type="text" id="comp-cr" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" placeholder="السجل التجاري">
|
|
<input type="text" id="comp-city" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" placeholder="المدينة">
|
|
<input type="text" id="comp-address" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" placeholder="العنوان">
|
|
<input type="email" id="comp-email" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" placeholder="البريد الإلكتروني">
|
|
<input type="text" id="comp-phone" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" placeholder="رقم الهاتف">
|
|
</div>
|
|
<div class="flex gap-3 mt-6 pt-4 border-t border-white/10">
|
|
<button type="button" onclick="document.getElementById('company-modal').remove()" class="flex-1 py-3 bg-white/5 hover:bg-white/10 rounded-xl transition">إلغاء</button>
|
|
<button type="submit" class="flex-1 py-3 bg-primary hover:bg-primary-dark text-white font-bold rounded-xl shadow-lg transition">حفظ الشركة</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('add-company-form').onsubmit = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const data = {
|
|
name: document.getElementById('comp-name').value,
|
|
name_en: document.getElementById('comp-name-en').value || null,
|
|
tax_identification_number: document.getElementById('comp-tax').value,
|
|
commercial_registration_number: document.getElementById('comp-cr').value || null,
|
|
city: document.getElementById('comp-city').value || null,
|
|
address: document.getElementById('comp-address').value || null,
|
|
contact_email: document.getElementById('comp-email').value || null,
|
|
contact_phone: document.getElementById('comp-phone').value || null
|
|
};
|
|
await API.post('/companies', data);
|
|
document.getElementById('company-modal').remove();
|
|
renderCompanies();
|
|
} catch(err) {
|
|
alert(err.error?.message_ar || err.error?.details?.message || err.message || 'حدث خطأ');
|
|
}
|
|
};
|
|
}
|
|
|
|
function showJoFotaraModal(companyId) {
|
|
const modals = document.getElementById('modals');
|
|
modals.innerHTML = `
|
|
<div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4" id="jofotara-modal">
|
|
<div class="glass-panel p-8 rounded-3xl w-full max-w-md border border-white/10 shadow-2xl">
|
|
<h3 class="text-2xl font-bold mb-6">إعدادات الربط مع JoFotara</h3>
|
|
<form id="jofotara-form" class="space-y-4">
|
|
<input type="text" id="jf-client-id" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none font-mono" placeholder="Client ID" required>
|
|
<input type="password" id="jf-secret-key" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none font-mono" placeholder="Secret Key" required>
|
|
<div class="flex gap-3 mt-6">
|
|
<button type="button" onclick="document.getElementById('jofotara-modal').remove()" class="flex-1 py-3 bg-white/5 hover:bg-white/10 rounded-xl transition">إلغاء</button>
|
|
<button type="submit" class="flex-1 py-3 bg-primary hover:bg-primary-dark text-white font-bold rounded-xl shadow-lg transition">حفظ الإعدادات</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('jofotara-form').onsubmit = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const client_id = document.getElementById('jf-client-id').value;
|
|
const secret_key = document.getElementById('jf-secret-key').value;
|
|
// Note: We need a PUT endpoint to update Jofotara credentials.
|
|
// Our API has: PUT /api/v1/companies/{id}/jofotara
|
|
const res = await fetch(`${API.baseUrl}/companies/${companyId}/jofotara`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${API.accessToken}`
|
|
},
|
|
body: JSON.stringify({ client_id, secret_key })
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) throw data;
|
|
|
|
document.getElementById('jofotara-modal').remove();
|
|
renderCompanies();
|
|
} catch(err) {
|
|
alert(err.error?.message_ar || err.error?.details?.message || 'حدث خطأ أثناء حفظ الإعدادات');
|
|
}
|
|
};
|
|
}
|
|
|
|
async function showUploadInvoiceModal() {
|
|
try {
|
|
// Fetch companies to populate the select dropdown
|
|
const res = await API.get('/companies');
|
|
const companies = res.data;
|
|
|
|
let optionsHtml = '<option value="" disabled selected>-- اختر الشركة --</option>';
|
|
companies.forEach(c => {
|
|
optionsHtml += `<option value="${c.id}">${c.name} (${c.tax_identification_number || ''})</option>`;
|
|
});
|
|
|
|
const modals = document.getElementById('modals');
|
|
modals.innerHTML = `
|
|
<div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center" id="invoice-modal">
|
|
<div class="glass-panel p-8 rounded-3xl w-full max-w-md border border-white/10 shadow-2xl">
|
|
<h3 class="text-2xl font-bold mb-6">رفع فاتورة للتدقيق</h3>
|
|
<form id="upload-invoice-form" class="space-y-4" enctype="multipart/form-data">
|
|
<select id="inv-comp-id" class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none" required>
|
|
${optionsHtml}
|
|
</select>
|
|
<div class="p-4 border-2 border-dashed border-white/20 rounded-xl bg-black/10 text-center">
|
|
<p class="text-sm text-slate-400 mb-2">اختر ملف الفاتورة (JSON/XML/PDF)</p>
|
|
<input type="file" id="inv-file" class="text-sm w-full" required>
|
|
</div>
|
|
<div class="flex gap-3 mt-6">
|
|
<button type="button" onclick="document.getElementById('invoice-modal').remove()" class="flex-1 py-3 bg-white/5 hover:bg-white/10 rounded-xl transition">إلغاء</button>
|
|
<button type="submit" class="flex-1 py-3 bg-primary hover:bg-primary-dark text-white font-bold rounded-xl shadow-lg transition">تحقق ورفع</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('upload-invoice-form').onsubmit = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const companyId = document.getElementById('inv-comp-id').value;
|
|
const fileInput = document.getElementById('inv-file');
|
|
|
|
const formData = new FormData();
|
|
formData.append('company_id', companyId);
|
|
formData.append('invoice', fileInput.files[0]);
|
|
|
|
const btn = e.target.querySelector('button[type="submit"]');
|
|
btn.textContent = 'جاري التحقق...';
|
|
btn.disabled = true;
|
|
|
|
await API.upload('/invoices/upload', formData);
|
|
document.getElementById('invoice-modal').remove();
|
|
renderInvoices();
|
|
} catch(err) {
|
|
alert(err.error?.message_ar || 'صيغة البيانات غير صحيحة أو حدث خطأ ضريبي.');
|
|
e.target.querySelector('button[type="submit"]').textContent = 'تحقق ورفع';
|
|
e.target.querySelector('button[type="submit"]').disabled = false;
|
|
}
|
|
};
|
|
} catch(err) {
|
|
alert('خطأ في جلب بيانات الشركات المربوطة بك.');
|
|
}
|
|
}
|
|
|
|
// ── Init Engine ──────────────────────────────────────────
|
|
function initApp() {
|
|
if (isLoggedIn()) {
|
|
document.getElementById('sidebar').classList.remove('hidden');
|
|
document.getElementById('header').classList.remove('hidden');
|
|
document.getElementById('ai-container').classList.remove('hidden');
|
|
document.getElementById('sidebar').classList.add('flex');
|
|
document.getElementById('header').classList.add('flex');
|
|
|
|
// AI Chat Listener
|
|
document.getElementById('ai-query').onkeydown = async (e) => {
|
|
if (e.key === 'Enter') {
|
|
const q = e.target.value;
|
|
if (!q) return;
|
|
e.target.value = '';
|
|
document.getElementById('ai-answer').textContent = 'جاري التحليل...';
|
|
try {
|
|
const res = await API.post('/ai/query', { query: q });
|
|
document.getElementById('ai-answer').textContent = res.data.answer;
|
|
} catch (err) {
|
|
document.getElementById('ai-answer').textContent = 'حدث خطأ في الاتصال بالمساعد الذكي.';
|
|
}
|
|
}
|
|
};
|
|
|
|
navigateTo('dashboard');
|
|
} else {
|
|
renderLogin();
|
|
}
|
|
}
|
|
|
|
// Start
|
|
initApp();
|
|
</script>
|
|
</body>
|
|
</html>
|