डेटा तालिका और चार्ट प्लेसहोल्डर

<div class="rounded-xl bg-white shadow-sm overflow-hidden">
  <!-- Table header bar -->
  <div class="flex items-center justify-between border-b border-gray-100 px-6 py-4">
    <h3 class="font-semibold text-gray-900">Recent Users</h3>
    <button class="text-sm font-medium text-blue-600 hover:text-blue-700">View all</button>
  </div>
  <!-- Scrollable table -->
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <!-- thead and tbody -->
    </table>
  </div>
</div>

<thead class="bg-gray-50">
  <tr>
    <th scope="col"
        class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
      Name
    </th>
    <th scope="col"
        class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
      Email
    </th>
    <th scope="col"
        class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
      Status
    </th>
    <th scope="col"
        class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
      Role
    </th>
    <th scope="col" class="relative px-6 py-3"><span class="sr-only">Actions</span></th>
  </tr>
</thead>

<tbody class="divide-y divide-gray-100 bg-white">
  <tr class="even:bg-gray-50 hover:bg-blue-50 transition-colors">
    <td class="whitespace-nowrap px-6 py-4">
      <div class="flex items-center gap-3">
        <img src="/avatar.jpg" class="h-8 w-8 rounded-full" alt="">
        <div>
          <p class="font-medium text-gray-900">Alice Johnson</p>
          <p class="text-xs text-gray-500">Joined Jan 2026</p>
        </div>
      </div>
    </td>
    <td class="whitespace-nowrap px-6 py-4 text-gray-500">alice@example.com</td>
    <!-- More cells -->
  </tr>
</tbody>

<td class="whitespace-nowrap px-6 py-4">
  <!-- Active -->
  <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5
               text-xs font-semibold text-green-800">
    Active
  </span>

  <!-- Pending -->
  <span class="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5
               text-xs font-semibold text-yellow-800">
    Pending
  </span>

  <!-- Suspended -->
  <span class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5
               text-xs font-semibold text-red-800">
    Suspended
  </span>
</td>

<td class="whitespace-nowrap px-6 py-4 text-right">
  <a href="/users/1/edit"
     class="text-sm font-medium text-blue-600 hover:text-blue-700">
    Edit
  </a>
  <span class="mx-2 text-gray-300">|</span>
  <button onclick="deleteUser(1)"
          class="text-sm font-medium text-red-500 hover:text-red-700">
    Delete
  </button>
</td>

<div class="flex items-center justify-between border-t border-gray-100 px-6 py-4">
  <p class="text-sm text-gray-500">
    Showing <span class="font-medium">1</span> to <span class="font-medium">10</span>
    of <span class="font-medium">48</span> results
  </p>
  <div class="flex gap-2">
    <button class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm
                   font-medium text-gray-700 transition hover:bg-gray-50
                   disabled:cursor-not-allowed disabled:opacity-40"
            disabled>
      Previous
    </button>
    <button class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm
                   font-medium text-gray-700 transition hover:bg-gray-50">
      Next
    </button>
  </div>
</div>

<div class="rounded-xl bg-white shadow-sm">
  <!-- Chart header -->
  <div class="flex items-center justify-between border-b border-gray-100 px-6 py-4">
    <h3 class="font-semibold text-gray-900">Revenue Over Time</h3>
    <select class="rounded-lg border border-gray-200 px-3 py-1.5 text-sm text-gray-600">
      <option>Last 7 days</option>
      <option>Last 30 days</option>
      <option>Last 90 days</option>
    </select>
  </div>
  <!-- Chart canvas area -->
  <div class="h-64 p-6">
    <!-- Chart.js or Recharts renders here -->
    <canvas id="revenue-chart"></canvas>
  </div>
</div>

<!-- Bar chart skeleton -->
<div class="flex h-52 items-end gap-2 animate-pulse">
  <div class="flex-1 rounded-t bg-gray-200" style="height: 60%"></div>
  <div class="flex-1 rounded-t bg-gray-200" style="height: 80%"></div>
  <div class="flex-1 rounded-t bg-gray-200" style="height: 45%"></div>
  <div class="flex-1 rounded-t bg-gray-200" style="height: 90%"></div>
  <div class="flex-1 rounded-t bg-gray-200" style="height: 70%"></div>
  <div class="flex-1 rounded-t bg-gray-200" style="height: 55%"></div>
  <div class="flex-1 rounded-t bg-gray-200" style="height: 75%"></div>
</div>

<!-- Main dashboard grid: chart + top-users table -->
<div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3">
  <!-- Line chart (2/3 width) -->
  <div class="rounded-xl bg-white shadow-sm lg:col-span-2">
    <!-- Chart content -->
  </div>

  <!-- Top users list (1/3 width) -->
  <div class="rounded-xl bg-white shadow-sm">
    <!-- Mini leaderboard -->
  </div>
</div>

<!-- Empty state inside a table or list container -->
<div class="flex flex-col items-center justify-center py-16 text-center">
  <svg class="h-12 w-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
          d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0H4"/>
  </svg>
  <h3 class="mt-4 font-semibold text-gray-900">No users found</h3>
  <p class="mt-1 text-sm text-gray-500">Get started by adding your first team member.</p>
  <button class="mt-6 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white">
    Add user
  </button>
</div>