<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>داشبورد مدیریت عامل</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />
    <style>body { font-family: Vazirmatn, sans-serif; }</style>
</head>
<body class="bg-slate-900 p-6 text-slate-100">
    <div class="max-w-6xl mx-auto space-y-6">
        <!-- هدر مدیریتی -->
        <div class="flex justify-between items-center border-b border-slate-700 pb-4">
            <div>
                <h1 class="text-2xl font-bold text-white">📊 پنل فرماندهی و گزارشات مدیرعامل</h1>
                <p class="text-xs text-slate-400 mt-1">نظارت بر تعهدات دوره‌ای تورم و کنترل مانده بستانکاری‌ها</p>
            </div>
            <div class="bg-rose-500/10 border border-rose-500 text-rose-400 px-4 py-2 rounded-xl text-sm font-bold">
                ⚠️ بخش ابلاغ استراتژیک لیست قیمت جدید
            </div>
        </div>

        <!-- ۳ کارت رنگی وضعیت اعتبار کلی -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-slate-800 p-6 rounded-2xl border border-slate-700 shadow-xl">
                <span class="text-sm text-slate-400 block mb-1">💰 مبلغ اعتبار کلی (کل بستانکاری‌ها)</span>
                <span class="text-2xl font-black text-emerald-400">۴,۵۰۰,۰۰۰,۰۰۰ تومان</span>
            </div>
            <div class="bg-slate-800 p-6 rounded-2xl border border-slate-700 shadow-xl">
                <span class="text-sm text-slate-400 block mb-1">💵 کل بستانکاری نقدی جاری</span>
                <span class="text-2xl font-black text-blue-400">۳,۱۰۰,۰۰۰,۰۰0 تومان</span>
            </div>
            <div class="bg-slate-800 p-6 rounded-2xl border border-slate-700 shadow-xl">
                <span class="text-sm text-slate-400 block mb-1">✍️ کل بستانکاری چکی (اسناد دریافتی)</span>
                <span class="text-2xl font-black text-amber-400">۱,۴۰۰,۰۰۰,۰۰۰ تومان</span>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- بخش ابلاغ لیست قیمت و انقضای اتوماتیک قبلی -->
            <div class="bg-slate-800 p-5 rounded-2xl border border-slate-700 space-y-4">
                <h3 class="font-bold text-white text-base border-b border-slate-700 pb-2">🔄 ابلاغ قیمت جدید و انقضای خودکار</h3>
                <div>
                    <label class="text-xs text-slate-400 block mb-1">بارگذاری فایل اکسل جدید (سایز، طرح، درجه):</label>
                    <input type="file" class="w-full text-xs text-slate-300 bg-slate-900 border border-slate-600 p-2 rounded-lg">
                </div>
                <div>
                    <label class="text-xs text-slate-400 block mb-1">تاریخ شروع اعتبار زنجیره جدید:</label>
                    <input type="text" value="۱۴۰۵/۰۵/۰۱" class="w-full bg-slate-900 border border-slate-600 p-2 rounded-lg text-sm text-center">
                </div>
                <button class="w-full bg-rose-600 hover:bg-rose-700 text-white font-bold py-3 px-4 rounded-xl text-sm transition">
                    ⚠️ تایید نهایی و انقضای خودکار لیست قیمت قبل
                </button>
            </div>

            <!-- گزارش تک مشتری و لیست قیمت تعهدی -->
            <div class="bg-slate-800 p-5 rounded-2xl border border-slate-700 md:col-span-2 space-y-4">
                <h3 class="font-bold text-white text-base border-b border-slate-700 pb-2">🔍 گزارش تفکیکی بستانکاری تک‌مشتری بر اساس FIFO</h3>
                <div class="flex gap-2">
                    <input type="text" placeholder="جستجوی نام مشتری (مثلا بازرگانی احمدی)..." class="w-full bg-slate-900 border border-slate-600 p-2 rounded-lg text-sm text-slate-100">
                    <button class="bg-blue-600 px-4 rounded-lg text-sm">جستجو</button>
                </div>
                <!-- جدول فرضی تفکیک بسته های بستانکاری -->
                <div class="bg-slate-900 rounded-xl overflow-hidden text-xs">
                    <table class="w-full text-right">
                        <thead class="bg-slate-700 text-slate-300">
                            <tr>
                                <th class="p-2.5">نوع بسته</th>
                                <th class="p-2.5">قفل شده روی لیست قیمت</th>
                                <th class="p-2.5">مانده اعتبار مصرف نشده</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-800">
                            <tr>
                                <td class="p-2.5 text-blue-400">💵 واریز نقدی</td>
                                <td class="p-2.5">لیست شماره ۲ (فروردین ماه)</td>
                                <td class="p-2.5 font-bold">۲۰,۰۰۰,۰۰۰ تومان</td>
                            </tr>
                            <tr>
                                <td class="p-2.5 text-amber-400">✍️ چک صیاد (ش: ۴۵۲۱)</td>
                                <td class="p-2.5">لیست شماره ۳ (خرداد ماه)</td>
                                <td class="p-2.5 font-bold">۸۰,۰۰۰,۰۰۰ تومان</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- گزارش تعهد کل لیست های قیمتی -->
                <div class="pt-2">
                    <h4 class="text-xs font-bold text-slate-400 mb-2">📋 گزارش تعهد ریالی کل شرکت به تفکیک لیست‌های قیمت:</h4>
                    <div class="space-y-1.5 text-xs">
                        <div class="flex justify-between bg-slate-900 p-2 rounded"><span>تعهد باقی‌مانده روی لیست قیمت شماره ۲ (قدیمی):</span><span class="text-rose-400 font-bold">۵۰۰ میلیون تومان</span></div>
                        <div class="flex justify-between bg-slate-900 p-2 rounded"><span>تعهد باقی‌مانده روی لیست قیمت شماره ۳ (جاری):</span><span class="text-emerald-400 font-bold">۴ میلیارد تومان</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>