<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-col items-center justify-center">
<div class="w-full max-w-4xl">
<!-- Chart Container (Placeholder) -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark mb-8">
<h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Sales Overview</h2>
<!-- Replace with your chart library integration (e.g., Chart.js, D3.js) -->
<div class="h-64 flex items-center justify-center text-gray-500 dark:text-gray-400">
[Your Chart Goes Here]
</div>
</div>
<div class="grid md:grid-cols-2 gap-8">
<!-- KPl Card 1 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">Revenue</h3>
<p class="text-2xl font-bold text-green-600 dark:text-green-400">$12,345</p>
<p class="text-sm text-gray-500 dark:text-gray-400">+5% from last month</p>
</div>
<!-- KPl Card 2 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">New Users</h3>
<p class="text-2xl font-bold text-blue-600 dark:text-blue-400">1,234</p>
<p class="text-sm text-gray-500 dark:text-gray-400">+10% from last month</p>
</div>
</div>
<!-- Table Container (Placeholder) -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark mt-8">
<h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Recent Activity</h2>
<!-- Replace with your table implementation -->
<div class="overflow-x-auto">
<table class="min-w-full text-gray-700 dark:text-gray-300">
<thead>
<tr>
<th class="text-left py-2">User</th>
<th class="text-left py-2">Action</th>
<th class="text-left py-2">Time</th>
</tr>
</thead>
<tbody>
<tr>
<td class="py-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
John Doe
</td>
<td class="py-2">Viewed Dashboard</td>
<td class="py-2">1 hour ago</td>
</tr>
<tr>
<td class="py-2 flex items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
Jane Smith
</td>
<td class="py-2">Updated Profile</td>
<td class="py-2">2 hours ago</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<style>
@layer components {
.shadow-neumorphic-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #333333;
}
}
</style>
