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

Merge version_1 into main #1

Merged
development merged 5 commits from version_1 into main 2026-01-16 11:56:25 +00:00
Conversation 0 Commits 5 Files Changed 5 +180
5 changed files with 180 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
package.json Normal file
View File

@@ -0,0 +1,25 @@
{
"name": "react-dashboard", "version": "0.1.0", "private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.11.47", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", "lucide-react": "^0.263.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "typescript": "^4.7.4", "web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app", "react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%", "not dead", "not op_mini all"
],
"development": [
"last 1 chrome version", "last 1 firefox version", "last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^10.4.7", "postcss": "^8.4.14", "tailwindcss": "^3.1.6"
}
}

0
public/images/placeholder.webp Normal file
View File

33
src/App.css Normal file
View File

@@ -0,0 +1,33 @@
.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);
}
}

13
src/App.tsx Normal file
View File

@@ -0,0 +1,13 @@
import React from 'react';
import './App.css';
import Dashboard from './components/Dashboard';
function App() {
return (
<div className="App">
<Dashboard />
</div>
);
}
export default App;

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;