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

Update src/components/Dashboard.tsx

Browse Source
This commit is contained in:
development
2026-01-16 11:58:23 +00:00
parent f3b10cf9d3
commit 8800663e0a
1 changed files with 91 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/components/Dashboard.tsx
View File

@@ -1,113 +1,108 @@
import React from 'react';
import { BarChart3, Users, TrendingUp, DollarSign, Calendar, Bell, Search, Settings, Menu } from 'lucide-react';
import { BarChart3, Users, DollarSign, TrendingUp } from 'lucide-react';
interface StatCardProps {
title: string;
value: string;
icon: React.ReactNode;
trend: string;
}
const StatCard: React.FC<StatCardProps> = ({ title, value, icon, trend }) => {
return (
<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">{title}</p>
<p className="text-2xl font-bold text-gray-900">{value}</p>
<p className="text-xs text-green-600 font-medium">{trend}</p>
</div>
<div className="text-gray-400">
{icon}
</div>
</div>
</div>
);
};
const Dashboard: React.FC = () => {
const stats = [
{
title: "Total Revenue", value: "$45,231", icon: <DollarSign className="h-8 w-8" />,
trend: "+20.1% from last month"
},
{
title: "Active Users", value: "2,350", icon: <Users className="h-8 w-8" />,
trend: "+180.1% from last month"
},
{
title: "Sales", value: "12,234", icon: <BarChart3 className="h-8 w-8" />,
trend: "+19% from last month"
},
{
title: "Growth Rate", value: "89.5%", icon: <TrendingUp className="h-8 w-8" />,
trend: "+2.5% from last month"
}
];
return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<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 className="min-h-screen bg-gray-50 p-8">
<div className="max-w-7xl mx-auto">
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
<p className="text-gray-600">Welcome to your analytics dashboard</p>
</div>
</header>
{/* Main Content */}
<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 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>
<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>
{stats.map((stat, index) => (
<StatCard
key={index}
title={stat.title}
value={stat.value}
icon={stat.icon}
trend={stat.trend}
/>
))}
</div>
{/* Charts Section */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<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>
<h3 className="text-lg font-semibold 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-blue-500 rounded-full"></div>
<span className="text-sm text-gray-600">New user registered</span>
</div>
<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">Payment 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">System update completed</span>
</div>
</div>
</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>
<h3 className="text-lg font-semibold text-gray-900 mb-4">Quick Stats</h3>
<div className="space-y-4">
<div className="flex justify-between items-center">
<span className="text-sm text-gray-600">Conversion Rate</span>
<span className="text-sm font-semibold text-gray-900">3.2%</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-gray-600">Bounce Rate</span>
<span className="text-sm font-semibold text-gray-900">24.5%</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-gray-600">Session Duration</span>
<span className="text-sm font-semibold text-gray-900">2m 34s</span>
</div>
</div>
</div>
</div>
{/* 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>
</div>
</main>
</div>
</div>
);
};