Update src/components/Dashboard.tsx
This commit is contained in:
@@ -1,104 +1,110 @@
|
||||
import React from 'react';
|
||||
import { TrendingUp, Users, Calendar, BarChart3 } from 'lucide-react';
|
||||
import { BarChart3, Users, TrendingUp, DollarSign, Calendar, Bell, Search, Settings, Menu } 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>
|
||||
<header className="bg-white border-b border-gray-200 px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Menu className="h-6 w-6 text-gray-600" />
|
||||
<h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Search className="h-5 w-5 text-gray-600" />
|
||||
<Bell className="h-5 w-5 text-gray-600" />
|
||||
<Settings className="h-5 w-5 text-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||
{/* Stats Grid */}
|
||||
<main className="px-6 py-8">
|
||||
{/* Stats Cards */}
|
||||
<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 className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Total Users</p>
|
||||
<p className="text-3xl font-bold text-gray-900">2,543</p>
|
||||
</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>
|
||||
<Users className="h-8 w-8 text-blue-500" />
|
||||
</div>
|
||||
<p className="text-sm text-green-600 mt-2">+12% from last month</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Revenue</p>
|
||||
<p className="text-3xl font-bold text-gray-900">$45,231</p>
|
||||
</div>
|
||||
<DollarSign className="h-8 w-8 text-green-500" />
|
||||
</div>
|
||||
<p className="text-sm text-green-600 mt-2">+8% from last month</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Growth</p>
|
||||
<p className="text-3xl font-bold text-gray-900">+24%</p>
|
||||
</div>
|
||||
<TrendingUp className="h-8 w-8 text-purple-500" />
|
||||
</div>
|
||||
<p className="text-sm text-green-600 mt-2">+3% from last month</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Analytics</p>
|
||||
<p className="text-3xl font-bold text-gray-900">98.5%</p>
|
||||
</div>
|
||||
<BarChart3 className="h-8 w-8 text-orange-500" />
|
||||
</div>
|
||||
<p className="text-sm text-green-600 mt-2">+2% from last month</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Charts Section */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Revenue Overview</h3>
|
||||
<div className="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
|
||||
<BarChart3 className="h-16 w-16 text-gray-400" />
|
||||
<p className="text-gray-500 ml-4">Chart visualization would go here</p>
|
||||
</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 className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">User Activity</h3>
|
||||
<div className="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
|
||||
<TrendingUp className="h-16 w-16 text-gray-400" />
|
||||
<p className="text-gray-500 ml-4">Activity chart would go here</p>
|
||||
</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>
|
||||
{/* Recent Activity */}
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Recent Activity</h3>
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3, 4].map((item) => (
|
||||
<div key={item} className="flex items-center space-x-4 p-3 bg-gray-50 rounded-lg">
|
||||
<img
|
||||
src="/images/placeholder.webp"
|
||||
alt="User avatar"
|
||||
className="h-10 w-10 rounded-full"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-gray-900">User {item} completed an action</p>
|
||||
<p className="text-xs text-gray-500">2 hours ago</p>
|
||||
</div>
|
||||
<Calendar className="h-5 w-5 text-gray-400" />
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user