<div>
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-slate-800">نظرة عامة</h1>
        <p class="text-slate-500 mt-1">ملخص سريع للأرصدة والحركات المالية لليوم.</p>
    </div>

    <!-- Stat Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex flex-col hover:shadow-md transition">
            <span class="text-sm font-medium text-slate-500">إجمالي الأطراف</span>
            <span class="text-3xl font-bold text-slate-800 mt-2">1,240</span>
            <span class="text-xs text-emerald-500 font-medium mt-2 flex items-center gap-1">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
                +12 هذا الأسبوع
            </span>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex flex-col hover:shadow-md transition">
            <span class="text-sm font-medium text-slate-500">الدفاتر النشطة</span>
            <span class="text-3xl font-bold text-slate-800 mt-2">48</span>
            <span class="text-xs text-emerald-500 font-medium mt-2 flex items-center gap-1">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
                +3 هذا الشهر
            </span>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex flex-col hover:shadow-md transition relative overflow-hidden">
            <div class="absolute -right-6 -top-6 w-24 h-24 bg-indigo-50 rounded-full opacity-50"></div>
            <span class="text-sm font-medium text-indigo-600 relative z-10">إجمالي العمليات (اليوم)</span>
            <span class="text-3xl font-bold text-indigo-900 mt-2 relative z-10">342</span>
            <span class="text-xs text-indigo-500 font-medium mt-2 relative z-10">بقيمة 45,000 ريال</span>
        </div>
    </div>

    <!-- Chart / Table Placeholder -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 min-h-[400px] flex items-center justify-center flex-col text-slate-400">
        <svg class="w-16 h-16 mb-4 text-slate-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
        <span class="text-sm">سيتم عرض الرسوم البيانية وأحدث العمليات هنا...</span>
    </div>
</div>