development/708f039b-794e-41b0-b83d-50aa4d695167
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add src/components/Dashboard.tsx

Browse Source
This commit is contained in:
development
2026-01-16 11:56:20 +00:00
parent f74cb2f7e8
commit d11586d99b
1 changed files with 109 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/components/Dashboard.tsx Normal file
View File

@@ -0,0 +1,109 @@
import React from 'react';
import { TrendingUp, Users, Calendar, BarChart3 } from 'lucide-react';
const Dashboard: React.FC = () => {
return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<header className="bg-white shadow-sm border-b">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
<div className="flex items-center">
<img className="h-8 w-8" src="/images/placeholder.webp" alt="Logo" />
<span className="ml-2 text-xl font-semibold text-gray-900">Dashboard</span>
</div>
<div className="flex items-center space-x-4">
<button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
New Report
</button>
</div>
</div>
</div>
</header>
{/* Main Content */}
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
{/* Stats Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div className="bg-white rounded-lg shadow p-6">
<div className="flex items-center">
<div className="flex-shrink-0">
<TrendingUp className="h-8 w-8 text-green-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-500">Total Revenue</p>
<p className="text-2xl font-semibold text-gray-900">$45,231</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="flex items-center">
<div className="flex-shrink-0">
<Users className="h-8 w-8 text-blue-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-500">Active Users</p>
<p className="text-2xl font-semibold text-gray-900">2,451</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="flex items-center">
<div className="flex-shrink-0">
<Calendar className="h-8 w-8 text-purple-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-500">Events</p>
<p className="text-2xl font-semibold text-gray-900">12</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="flex items-center">
<div className="flex-shrink-0">
<BarChart3 className="h-8 w-8 text-orange-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-500">Conversion</p>
<p className="text-2xl font-semibold text-gray-900">3.24%</p>
</div>
</div>
</div>
</div>
{/* Chart Section */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="bg-white rounded-lg shadow p-6">
<h3 className="text-lg font-medium text-gray-900 mb-4">Analytics Overview</h3>
<div className="h-64 bg-gray-100 rounded flex items-center justify-center">
<p className="text-gray-500">Chart placeholder</p>
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<h3 className="text-lg font-medium text-gray-900 mb-4">Recent Activity</h3>
<div className="space-y-3">
<div className="flex items-center space-x-3">
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
<span className="text-sm text-gray-600">User registered</span>
</div>
<div className="flex items-center space-x-3">
<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
<span className="text-sm text-gray-600">New order received</span>
</div>
<div className="flex items-center space-x-3">
<div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
<span className="text-sm text-gray-600">Payment processed</span>
</div>
</div>
</div>
</div>
</main>
</div>
);
};
export default Dashboard;