🚀 مُصادَق: تحديث برمجي جديد 2026-05-03 02:01
This commit is contained in:
Hamza-Ayed
497
public/shell.php
497
public/shell.php
@@ -25,170 +25,437 @@
|
||||
}
|
||||
}
|
||||
</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">
|
||||
|
||||
<div id="app">
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full z-50 glass border-b border-white/10 px-6 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- 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>
|
||||
|
||||
<div class="flex items-center gap-4" id="nav-user" style="display:none;">
|
||||
<button class="p-2 hover:bg-white/5 rounded-lg transition-colors">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
|
||||
<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>
|
||||
</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 class="w-10 h-10 rounded-full bg-slate-800 border border-white/10"></div>
|
||||
</div>
|
||||
</nav>
|
||||
</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 class="fixed bottom-8 right-8 z-[60]">
|
||||
<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 right-0 w-80 glass rounded-3xl border border-white/10 p-6 shadow-2xl">
|
||||
<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-white/5 rounded-xl p-3 mb-4 min-h-[60px] text-sm text-slate-300">كيف يمكنني مساعدتك اليوم؟</div>
|
||||
<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>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="pt-24 pb-12 px-6 max-w-7xl mx-auto">
|
||||
<div id="page-content"></div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Modals Container -->
|
||||
<div id="modals"></div>
|
||||
|
||||
<script>
|
||||
// ══════════════════════════════════════════════════════════
|
||||
// مُصادَق — API Client (Inlined for reliability)
|
||||
// مُصادَق — API Client
|
||||
// ══════════════════════════════════════════════════════════
|
||||
const API = {
|
||||
baseUrl: 'index.php?route=/api/v1',
|
||||
accessToken: localStorage.getItem('access_token'),
|
||||
async post(path, body) {
|
||||
const headers = { 'Accept': 'application/json', 'Content-Type': 'application/json' };
|
||||
|
||||
async _request(method, path, body = null, isFormData = false) {
|
||||
const headers = { 'Accept': 'application/json' };
|
||||
if (this.accessToken) headers['Authorization'] = `Bearer ${this.accessToken}`;
|
||||
const res = await fetch(`${this.baseUrl}${path}`, { method: 'POST', headers, body: JSON.stringify(body) });
|
||||
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) 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); }
|
||||
};
|
||||
|
||||
// ── Router ──
|
||||
// ══════════════════════════════════════════════════════════
|
||||
// SPA Engine & Views
|
||||
// ══════════════════════════════════════════════════════════
|
||||
const isLoggedIn = () => !!localStorage.getItem('access_token');
|
||||
const pageContent = document.getElementById('page-content');
|
||||
const contentDiv = document.getElementById('page-content');
|
||||
let currentChart = null;
|
||||
|
||||
function loginPage() {
|
||||
return `
|
||||
<div class="flex flex-col items-center justify-center min-h-[60vh]">
|
||||
<div class="w-full max-w-md p-8 glass rounded-3xl glow border border-white/10">
|
||||
<h2 class="text-3xl font-bold mb-2 text-center">مرحباً بك مجدداً</h2>
|
||||
<form id="login-form" class="space-y-6">
|
||||
<input type="email" id="login-email" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-primary" placeholder="البريد الإلكتروني" required>
|
||||
<input type="password" id="login-password" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 focus:outline-none focus:border-primary" placeholder="كلمة المرور" required>
|
||||
<div id="login-error" class="text-red-400 text-sm text-center hidden"></div>
|
||||
<button type="submit" class="w-full bg-primary hover:bg-primary-dark text-white font-bold py-3 rounded-xl shadow-lg">دخول</button>
|
||||
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();
|
||||
}
|
||||
|
||||
// ── 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>
|
||||
`;
|
||||
}
|
||||
|
||||
function dashboardPage() {
|
||||
return `<div class="space-y-8">
|
||||
<h2 class="text-3xl font-bold">لوحة التحكم</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div class="glass p-6 rounded-3xl border border-white/10 glow"><p class="text-slate-400 text-sm">فواتير الشهر</p><h3 class="text-3xl font-bold">1,284</h3></div>
|
||||
<div class="glass p-6 rounded-3xl border border-white/10"><p class="text-slate-400 text-sm">تمت المصادقة</p><h3 class="text-3xl font-bold text-primary">1,150</h3></div>
|
||||
<div class="glass p-6 rounded-3xl border border-white/10"><p class="text-slate-400 text-sm">قيد المعالجة</p><h3 class="text-3xl font-bold text-yellow-400">94</h3></div>
|
||||
<div class="glass p-6 rounded-3xl border border-red-500/20"><p class="text-slate-400 text-sm">تنبيهات المخاطر</p><h3 class="text-3xl font-bold text-red-400">4</h3></div>
|
||||
</div>
|
||||
<div class="glass p-8 rounded-3xl border border-white/10">
|
||||
<h4 class="font-bold mb-6">تحليل الفواتير الأسبوعي</h4>
|
||||
<canvas id="invoiceChart" height="250"></canvas>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function initCharts() {
|
||||
const ctx = document.getElementById('invoiceChart');
|
||||
if (ctx) {
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
|
||||
datasets: [{ label: 'الفواتير', data: [65, 59, 80, 81, 56, 55, 40], borderColor: '#10b981', tension: 0.4 }]
|
||||
},
|
||||
options: { scales: { y: { grid: { color: 'rgba(255,255,255,0.05)' } }, x: { grid: { display: false } } } }
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function navigate() {
|
||||
if (isLoggedIn()) {
|
||||
pageContent.innerHTML = dashboardPage();
|
||||
document.getElementById('nav-user').style.display = 'flex';
|
||||
setTimeout(initCharts, 100);
|
||||
} else {
|
||||
pageContent.innerHTML = loginPage();
|
||||
document.getElementById('nav-user').style.display = 'none';
|
||||
setTimeout(() => {
|
||||
const form = document.getElementById('login-form');
|
||||
if (form) form.onsubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const email = document.getElementById('login-email').value;
|
||||
const password = document.getElementById('login-password').value;
|
||||
try {
|
||||
const res = await API.post('/auth/login', { email, password });
|
||||
localStorage.setItem('access_token', res.data.access_token);
|
||||
API.accessToken = res.data.access_token;
|
||||
navigate();
|
||||
} catch (err) {
|
||||
const errEl = document.getElementById('login-error');
|
||||
let msg = 'خطأ في الدخول';
|
||||
if (err && err.error && err.error.details && err.error.details.message) {
|
||||
msg = err.error.details.message;
|
||||
} else if (err && err.error && err.error.message_ar) {
|
||||
msg = err.error.message_ar;
|
||||
} else if (err && err.message) {
|
||||
msg = err.message;
|
||||
} else if (typeof err === 'string') {
|
||||
msg = err;
|
||||
}
|
||||
errEl.textContent = msg;
|
||||
errEl.classList.remove('hidden');
|
||||
}
|
||||
};
|
||||
}, 50);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('ai-query').onkeydown = async (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
const query = e.target.value;
|
||||
document.getElementById('ai-answer').textContent = 'جاري التحليل...';
|
||||
document.getElementById('login-form').onsubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const btn = e.target.querySelector('button');
|
||||
btn.innerHTML = 'جاري التحقق...';
|
||||
btn.disabled = true;
|
||||
|
||||
try {
|
||||
const res = await API.post('/ai/query', { query });
|
||||
document.getElementById('ai-answer').textContent = res.data.answer;
|
||||
} catch (err) { document.getElementById('ai-answer').textContent = 'خطأ في الاتصال.'; }
|
||||
}
|
||||
};
|
||||
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;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
navigate();
|
||||
// ── 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">
|
||||
<p class="text-slate-400 text-sm mb-1">فواتير هذا الشهر</p>
|
||||
<h3 class="text-4xl font-bold text-white">${stats.total_this_month}</h3>
|
||||
</div>
|
||||
<div class="glass-panel p-6 rounded-3xl">
|
||||
<p class="text-slate-400 text-sm mb-1">نسبة الاستخدام</p>
|
||||
<h3 class="text-4xl font-bold text-primary">${stats.subscription_usage}%</h3>
|
||||
</div>
|
||||
<div class="glass-panel p-6 rounded-3xl flex flex-col justify-center gap-3">
|
||||
<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">عرض جميع الفواتير</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div class="glass-panel p-8 rounded-3xl">
|
||||
<h4 class="font-bold mb-6 text-lg">أحدث الفواتير</h4>
|
||||
<div class="space-y-4">
|
||||
`;
|
||||
|
||||
if (stats.recent_invoices.length === 0) {
|
||||
html += `<p class="text-slate-500 text-center py-4">لا توجد فواتير بعد</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-4 bg-black/20 rounded-xl border border-white/5">
|
||||
<div>
|
||||
<p class="font-bold text-sm">${inv.invoice_uuid.substring(0,8)}...</p>
|
||||
<p class="text-xs text-slate-400">${inv.company_name}</p>
|
||||
</div>
|
||||
<span class="${statusColor} text-sm font-bold bg-white/5 px-3 py-1 rounded-full">${inv.status}</span>
|
||||
</div>`;
|
||||
});
|
||||
}
|
||||
|
||||
html += `</div></div></div>`;
|
||||
contentDiv.innerHTML = html;
|
||||
} 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_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
|
||||
? '<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" id="company-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="add-company-form" class="space-y-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-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="الرقم الضريبي (مثال: 123456789)" required>
|
||||
<div class="flex gap-3 mt-6">
|
||||
<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 name = document.getElementById('comp-name').value;
|
||||
const tax = document.getElementById('comp-tax').value;
|
||||
await API.post('/companies', { name, tax_number: tax });
|
||||
document.getElementById('company-modal').remove();
|
||||
renderCompanies();
|
||||
} catch(err) {
|
||||
alert(err.error?.message_ar || 'حدث خطأ');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function showUploadInvoiceModal() {
|
||||
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">رفع فاتورة (JSON/XML)</h3>
|
||||
<form id="upload-invoice-form" class="space-y-4">
|
||||
<input type="text" 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" placeholder="معرف الشركة (Company ID)" required>
|
||||
<textarea id="inv-payload" rows="6" 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 text-sm" placeholder='{"Invoice": {...}}' required></textarea>
|
||||
<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 = parseInt(document.getElementById('inv-comp-id').value);
|
||||
const payload = JSON.parse(document.getElementById('inv-payload').value);
|
||||
|
||||
const btn = e.target.querySelector('button[type="submit"]');
|
||||
btn.textContent = 'جاري التحقق...';
|
||||
btn.disabled = true;
|
||||
|
||||
await API.post('/invoices/upload', { company_id: companyId, payload });
|
||||
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;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// ── 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>
|
||||
|
||||
Reference in New Issue
Block a user