Chapter 25 — Dashboard va Admin Panel Naqshlari

---

25.1 Sidebar + Content Dashboard Layout

Example

index.html
HTMLNusxalash
01<div class="flex h-screen">
02  <aside class="w-64 bg-gray-900 text-white p-6 flex-none">
03    <nav class="space-y-2">
04      <a href="#" class="block px-4 py-2 rounded-lg bg-gray-800">Dashboard</a>
05      <a href="#" class="block px-4 py-2 rounded-lg hover:bg-gray-800">Sozlamalar</a>
06    </nav>
07  </aside>
08  <main class="flex-1 overflow-y-auto p-8 bg-gray-50">
09    Kontent shu yerda
10  </main>
11</div>

25.2 Stat Cards va Data Table

Example

index.html
HTMLNusxalash
01<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
02  <div class="bg-white p-6 rounded-xl shadow-sm border">
03    <p class="text-sm text-gray-500">Jami foydalanuvchi</p>
04    <p class="text-3xl font-bold mt-1">12,543</p>
05    <p class="text-sm text-green-600 mt-2">↑ 12% shu oy</p>
06  </div>
07</div>
08 
09<table class="w-full text-left">
10  <thead class="text-sm text-gray-500 border-b">
11    <tr><th class="py-3">Ism</th><th class="py-3">Status</th></tr>
12  </thead>
13  <tbody class="divide-y">
14    <tr class="hover:bg-gray-50">
15      <td class="py-3">Ali Valiyev</td>
16      <td class="py-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded-full text-xs">Faol</span></td>
17    </tr>
18  </tbody>
19</table>

⚠️ Common Mistake
Jadval qatorlariga hover:bg-gray-50 qo'shishni unutish — natijada foydalanuvchi qaysi qatorni ko'rib turganini ajratish qiyinlashadi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: 3 ta stat card yarating: Foydalanuvchilar, Daromad, Buyurtmalar — har biriga son va foiz o'zgarish bilan.

🟡 Exercise 2 — Medium

Task: Sidebar + Content dashboard layout yarating, sidebar'da kamida 4 ta havola, faol havola boshqacha fon bilan ajratilgan.

🔴 Exercise 3 — Hard

Task: To'liq data table yarating: sarlavha, 5 qator ma'lumot, status badge, hover effekt va responsive (overflow-x-auto mobil uchun).

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<table class="w-full">
02  <tr><td>Ism</td><td>Email</td><td>Telefon</td><td>Manzil</td><td>Status</td></tr>
03</table>

Your Task: Bu jadval mobil ekranda juda siqilib, o'qib bo'lmaydigan holga kelmoqda. Qanday tuzatasiz?

<details> <summary>Solution</summary> Jadvalni `<div class="overflow-x-auto">` bilan o'rab, gorizontal scroll qo'shish kerak — bu mobil qurilmalarda ko'p ustunli jadvallar uchun standart yechim: `<div class="overflow-x-auto"><table class="w-full min-w-max">...</table></div>`. </details>

---

📌 Chapter Summary

Dashboard va admin panel naqshlari — Sidebar+Content layout (flex + flex-none/flex-1), Stat Cards (grid + rang semantikasi) va Data Table (divide-y + overflow-x-auto) kombinatsiyasidan iborat.

🎯 Key Takeaways

• Sidebar layout uchun flex-none (sidebar) + flex-1 (content) standart
• Rang semantikasi (yashil=o'sish, qizil=kamayish) UI'da muhim signal beradi
• Jadvallar mobil uchun har doim overflow-x-auto bilan o'ralishi kerak

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Dashboard: flex h-screen → aside (flex-none) + main (flex-1 overflow-y-auto)
02Stat Card: grid grid-cols-3 gap-4 → bg-white rounded-xl shadow-sm border
03Table:     divide-y + overflow-x-auto (mobil uchun)

---