Merge version_1 into main #2
1232
public/index.html
Normal file
1232
public/index.html
Normal file
File diff suppressed because it is too large
Load Diff
34
src/App.css
34
src/App.css
@@ -1,33 +1,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
17
src/index.css
Normal file
17
src/index.css
Normal file
@@ -0,0 +1,17 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
13
src/index.tsx
Normal file
13
src/index.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
Reference in New Issue
Block a user