Hamza/musadaq-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚀 مُصادَق: تحديث برمجي جديد 2026-05-03 02:38

Browse Source
This commit is contained in:
Hamza-Ayed
2026-05-03 02:38:54 +03:00
parent 2579998cc7
commit ce9f14c7a3
7 changed files with 384 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
public/shell.php
View File

@@ -171,25 +171,99 @@
async function renderUsers() {
document.getElementById('page-title').textContent = 'إدارة المستخدمين';
try {
// We'll build the API for this later, for now just show a placeholder
contentDiv.innerHTML = `
<div class="flex justify-between items-center mb-6">
<p class="text-slate-400">لوحة تحكم السوبر يوزر لإدارة المحاسبين والمدراء وربطهم بالشركات.</p>
<button 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">
+ إضافة مستخدم
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="glass-panel p-12 rounded-3xl text-center">
<svg class="w-16 h-16 text-slate-600 mx-auto mb-4" 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>
<h3 class="text-xl font-bold mb-2">قريباً...</h3>
<p class="text-slate-500">جاري برمجة واجهات ربط المحاسبين بالشركات وتحديد الصلاحيات الخاصة بهم.</p>
</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');
@@ -240,50 +314,104 @@
// ── Dashboard View ───────────────────────────────────────
async function renderDashboard() {
document.getElementById('page-title').textContent = 'لوحة التحكم';
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 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">
<p class="text-slate-400 text-sm mb-1">نسبة الاستخدام</p>
<h3 class="text-4xl font-bold text-primary">${stats.subscription_usage}%</h3>
<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">
<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 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">
<h4 class="font-bold mb-6 text-lg">أحدث الفواتير</h4>
<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-4">لا توجد فواتير بعد</p>`;
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-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 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-sm font-bold bg-white/5 px-3 py-1 rounded-full">${inv.status}</span>
<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>`;
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>`;
}