From aad1998e567559d020d63b6b5916b92120c47ede Mon Sep 17 00:00:00 2001 From: Hamza-Ayed Date: Sat, 18 Apr 2026 01:04:33 +0300 Subject: [PATCH] Live Dashboard and debug logging --- .../src/pages/dashboard/DashboardPage.tsx | 289 +++++++++++------- frontend/src/pages/invoices/InvoicesPage.tsx | 3 + 2 files changed, 188 insertions(+), 104 deletions(-) diff --git a/frontend/src/pages/dashboard/DashboardPage.tsx b/frontend/src/pages/dashboard/DashboardPage.tsx index 7516d1c..1546658 100644 --- a/frontend/src/pages/dashboard/DashboardPage.tsx +++ b/frontend/src/pages/dashboard/DashboardPage.tsx @@ -1,118 +1,199 @@ /** * ════════════════════════════════════════════════════════════ - * مُصادَق (Musadaq) — Dashboard Statistics Components + * مُصادَق (Musadaq) — Dashboard Page * ════════════════════════════════════════════════════════════ */ -import { motion } from 'framer-motion'; +import { useState, useEffect } from 'react'; import { + BarChart3, + Users, FileText, - CheckCircle2, - AlertCircle, TrendingUp, - Wallet, - ArrowUpRight + ArrowUpRight, + ArrowDownRight, + Clock, + CheckCircle2, + AlertCircle, + Building2 } from 'lucide-react'; - -const stats = [ - { label: 'إجمالي الفواتير', value: '1,280', icon: FileText, color: 'text-primary-600', bg: 'bg-primary-50', change: '+12%' }, - { label: 'تمت مصادقتها', value: '1,150', icon: CheckCircle2, color: 'text-emerald-600', bg: 'bg-emerald-50', change: '+18%' }, - { label: 'قيد المراجعة', value: '42', icon: AlertCircle, color: 'text-amber-600', bg: 'bg-amber-50', change: '-5%' }, - { label: 'مجموع الضريبة (JOD)', value: '14,250.000', icon: Wallet, color: 'text-blue-600', bg: 'bg-blue-50', change: '+8%' }, -]; +import { motion } from 'framer-motion'; +import apiClient from '../../api/client'; export const DashboardPage = () => { + const [stats, setStats] = useState(null); + const [isLoading, setIsLoading] = useState(true); + + const fetchStats = async () => { + try { + const { data } = await apiClient.get('/dashboard/stats'); + setStats(data); + } catch (error) { + console.error('Failed to fetch dashboard stats', error); + } finally { + setIsLoading(false); + } + }; + + useEffect(() => { + fetchStats(); + }, []); + + if (isLoading) { return ( -
-
-
-

لوحة التحكم

-

نظرة عامة على نشاطك الضريبي هذا الشهر.

-
-
- - -
-
- - {/* ── Stats Grid ────────────────────────────────────────── */} -
- {stats.map((stat, i) => ( - -
-
- -
-
- - {stat.change} -
-
-

{stat.label}

-

{stat.value}

- - ))} -
- - {/* ── Main Dashboard Content (Placeholder for Charts/Lists) ── */} -
-
-
-
-

تحليلات الفوترة الأسبوعية

- -
-
-

رسم بياني توضيحي (Chart integration goes here)

-
-
-
- -
-
-

استهلاك الاشتراك الحالي

-

لقد استهلكت 65% من حصتك الشهرية من الفواتير.

-
-
-
- -
- -
-

آخر النشاطات

-
- {[1, 2, 3].map(i => ( -
-
- -
-
-

فاتورة مبيعات #A-2024-001

-

منذ 10 دقائق · تمت المصادقة

-
-
- ))} -
-
-
-
-
+
+
+
); + } + + const statCards = [ + { + title: 'إجمالي الفواتير', + value: stats?.totalInvoices || 0, + icon: FileText, + color: 'bg-blue-500', + trend: '+12%', + isUp: true + }, + { + title: 'الفواتير المصدقة', + value: stats?.approvedInvoices || 0, + icon: CheckCircle2, + color: 'bg-emerald-500', + trend: '+8%', + isUp: true + }, + { + title: 'إجمالي الشركات', + value: stats?.companiesCount || 0, + icon: Building2, + color: 'bg-purple-500', + trend: '+2', + isUp: true + }, + { + title: 'إجمالي الضرائب (JOD)', + value: Number(stats?.totalTax || 0).toLocaleString('ar-JO', { minimumFractionDigits: 3 }), + icon: TrendingUp, + color: 'bg-amber-500', + trend: '+5%', + isUp: true + }, + ]; + + return ( +
+
+
+

لوحة التحكم

+

مرحباً بك مجدداً! إليك ملخص نشاط مكتبك اليوم.

+
+
+ +
+
+ + {/* ── Stats Grid ────────────────────────────────────────── */} +
+ {statCards.map((card, idx) => ( + +
+
+ +
+ + {card.trend} + {card.isUp ? : } + +
+

{card.title}

+
{card.value}
+ + ))} +
+ +
+ {/* ── Recent Activities ────────────────────────────────── */} +
+
+

+ + آخر الفواتير المرفوعة +

+ +
+ +
+ {(!stats?.recentActivities || stats.recentActivities.length === 0) ? ( +
+ لا توجد نشاطات حديثة بعد. +
+ ) : ( + + + + + + + + + + + {stats.recentActivities.map((inv: any) => ( + + + + + + + ))} + +
الفاتورةالشركةالمبلغالحالة
{inv.invoice_number || 'OCR_PENDING'}{inv.company?.name}{Number(inv.total_amount || 0).toFixed(3)} + + {inv.status === 'approved' ? 'مصدقة' : 'قيد المعالجة'} + +
+ )} +
+
+ + {/* ── Quick Actions ────────────────────────────────────── */} +
+

إجراءات سريعة

+
+ + + +
+
+
+
+ ); }; diff --git a/frontend/src/pages/invoices/InvoicesPage.tsx b/frontend/src/pages/invoices/InvoicesPage.tsx index 891f232..c585966 100644 --- a/frontend/src/pages/invoices/InvoicesPage.tsx +++ b/frontend/src/pages/invoices/InvoicesPage.tsx @@ -37,10 +37,13 @@ export const InvoicesPage = () => { const fetchData = async () => { try { + setIsLoading(true); const [invRes, compRes] = await Promise.all([ apiClient.get('/invoices'), apiClient.get('/companies') ]); + console.log('Fetched Invoices:', invRes.data); + console.log('Fetched Companies:', compRes.data); setInvoices(invRes.data); setCompanies(compRes.data); } catch (error) {