277 lines
16 KiB
PHP
277 lines
16 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>
|
|
</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">
|
|
<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>
|
|
</button>
|
|
<div class="w-10 h-10 rounded-full bg-slate-800 border border-white/10"></div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- AI Floating Assistant -->
|
|
<div class="fixed bottom-8 right-8 z-[60]">
|
|
<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">
|
|
<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 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>
|
|
|
|
<!-- Load API Client -->
|
|
<script src="assets/js/api.js"></script>
|
|
|
|
<script>
|
|
// ══════════════════════════════════════════════════════════
|
|
// مُصادَق — SPA Router (No frameworks, no race conditions)
|
|
// ══════════════════════════════════════════════════════════
|
|
|
|
const isLoggedIn = () => !!localStorage.getItem('access_token');
|
|
const pageContent = document.getElementById('page-content');
|
|
|
|
// ── Login Page Template ──────────────────────────────────
|
|
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>
|
|
<p class="text-slate-400 text-center mb-8">قم بتسجيل الدخول للوصول إلى لوحة التحكم</p>
|
|
|
|
<form id="login-form" class="space-y-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-300 mb-2">البريد الإلكتروني</label>
|
|
<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 transition-colors" placeholder="name@company.com" required>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-300 mb-2">كلمة المرور</label>
|
|
<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 transition-colors" placeholder="••••••••" required>
|
|
</div>
|
|
<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 transition-all shadow-lg shadow-primary/20">
|
|
دخول
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// ── Dashboard Page Template ──────────────────────────────
|
|
function dashboardPage() {
|
|
return `
|
|
<div class="space-y-8">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-3xl font-bold">لوحة التحكم</h2>
|
|
<button class="bg-primary hover:bg-primary-dark text-white px-6 py-2 rounded-xl transition-all shadow-lg shadow-primary/20 flex items-center gap-2">
|
|
<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 4v16m8-8H4"></path></svg>
|
|
رفع فاتورة جديدة
|
|
</button>
|
|
</div>
|
|
<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 mb-1">فواتير الشهر</p>
|
|
<h3 class="text-3xl font-bold">1,284</h3>
|
|
<div class="mt-2 text-xs text-primary flex items-center gap-1">
|
|
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd"></path></svg>
|
|
12%+ زيادة عن الشهر الماضي
|
|
</div>
|
|
</div>
|
|
<div class="glass p-6 rounded-3xl border border-white/10">
|
|
<p class="text-slate-400 text-sm mb-1">تمت المصادقة</p>
|
|
<h3 class="text-3xl font-bold text-primary">1,150</h3>
|
|
<div class="w-full bg-white/5 h-1.5 rounded-full mt-4 overflow-hidden">
|
|
<div class="bg-primary h-full rounded-full" style="width: 89%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="glass p-6 rounded-3xl border border-white/10">
|
|
<p class="text-slate-400 text-sm mb-1">قيد المعالجة</p>
|
|
<h3 class="text-3xl font-bold text-yellow-400">94</h3>
|
|
<div class="w-full bg-white/5 h-1.5 rounded-full mt-4 overflow-hidden">
|
|
<div class="bg-yellow-400 h-full rounded-full" style="width: 25%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="glass p-6 rounded-3xl border border-red-500/20">
|
|
<p class="text-slate-400 text-sm mb-1">تنبيهات المخاطر</p>
|
|
<h3 class="text-3xl font-bold text-red-400">4</h3>
|
|
<p class="mt-2 text-xs text-red-400">تطلب تدخل بشري فوري</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div class="lg:col-span-2 glass p-8 rounded-3xl border border-white/10">
|
|
<h4 class="font-bold mb-6">تحليل الفواتير الأسبوعي</h4>
|
|
<canvas id="invoiceChart" height="250"></canvas>
|
|
</div>
|
|
<div class="glass p-8 rounded-3xl border border-white/10">
|
|
<h4 class="font-bold mb-6">توزيع الحالات</h4>
|
|
<canvas id="statusChart" height="250"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// ── Chart Initialization ─────────────────────────────────
|
|
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,
|
|
fill: true,
|
|
backgroundColor: 'rgba(16, 185, 129, 0.1)'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: { legend: { display: false } },
|
|
scales: {
|
|
y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#94a3b8' } },
|
|
x: { grid: { display: false }, ticks: { color: '#94a3b8' } }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
const statusCtx = document.getElementById('statusChart');
|
|
if (statusCtx) {
|
|
new Chart(statusCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['مقبول', 'مرفوض', 'معلق'],
|
|
datasets: [{
|
|
data: [80, 10, 10],
|
|
backgroundColor: ['#10b981', '#ef4444', '#f59e0b'],
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
cutout: '80%',
|
|
plugins: { legend: { position: 'bottom', labels: { color: '#94a3b8', padding: 20 } } }
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// ── Router ───────────────────────────────────────────────
|
|
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';
|
|
|
|
// Attach login form handler
|
|
setTimeout(() => {
|
|
const form = document.getElementById('login-form');
|
|
if (form) {
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const email = document.getElementById('login-email').value;
|
|
const password = document.getElementById('login-password').value;
|
|
const errorEl = document.getElementById('login-error');
|
|
|
|
try {
|
|
const result = await window.API.post('/auth/login', { email, password });
|
|
if (result.success) {
|
|
localStorage.setItem('access_token', result.data.access_token);
|
|
if (result.data.refresh_token) {
|
|
localStorage.setItem('refresh_token', result.data.refresh_token);
|
|
}
|
|
window.API.accessToken = result.data.access_token;
|
|
navigate();
|
|
}
|
|
} catch (err) {
|
|
errorEl.textContent = err.message || 'خطأ في البريد الإلكتروني أو كلمة المرور';
|
|
errorEl.classList.remove('hidden');
|
|
}
|
|
});
|
|
}
|
|
}, 50);
|
|
}
|
|
}
|
|
|
|
// ── AI Query Handler ─────────────────────────────────────
|
|
document.getElementById('ai-query').addEventListener('keydown', async (e) => {
|
|
if (e.key === 'Enter') {
|
|
const query = e.target.value;
|
|
const answerEl = document.getElementById('ai-answer');
|
|
if (!query) return;
|
|
|
|
answerEl.textContent = 'جاري التحليل...';
|
|
e.target.value = '';
|
|
|
|
try {
|
|
const res = await window.API.post('/ai/query', { query });
|
|
answerEl.textContent = res.data.answer;
|
|
} catch (err) {
|
|
answerEl.textContent = 'عذراً، حدث خطأ أثناء معالجة طلبك.';
|
|
}
|
|
}
|
|
});
|
|
|
|
// ── Start the app ────────────────────────────────────────
|
|
navigate();
|
|
</script>
|
|
</body>
|
|
</html>
|