lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
159 lines (146 loc) • 8.91 kB
JSX
import React, { useState } from 'react';
import { Line, Bar } from 'react-chartjs-2';
import { Chart as ChartJS, Title, Tooltip, Legend, CategoryScale, LinearScale, BarElement, LineElement, PointElement, ArcElement } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
ChartJS.register(Title, Tooltip, Legend, CategoryScale, LinearScale, BarElement, LineElement, PointElement, ArcElement, ChartDataLabels);
const BasicAdminDash = () => {
const [darkMode, setDarkMode] = useState(false);
// Sales Chart Data
const salesData = {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [
{
label: 'Sales',
data: [65, 59, 80, 81, 56],
borderColor: 'rgb(75, 192, 192)',
fill: false,
},
],
};
// Traffic Chart Data
const trafficData = {
labels: ['Page Views', 'Unique Visitors', 'Conversions'],
datasets: [
{
label: 'Traffic',
data: [3500, 2300, 1200],
backgroundColor: 'rgb(54, 162, 235)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1,
},
],
};
const toggleDarkMode = () => {
setDarkMode(!darkMode);
};
return (
<div className={`flex h-screen ${darkMode ? 'dark-mode' : 'light-mode'}`} id="dashboard-body">
{/* Sidebar */}
<div className="w-64 bg-gray-800 text-white p-5">
<div className="text-lg font-bold mb-5">Admin Dashboard</div>
<ul className="space-y-4">
<li><a href="#" className="flex items-center py-2 px-4 hover:bg-gray-700 rounded"><i className="fas fa-tachometer-alt mr-3"></i> Dashboard</a></li>
<li><a href="#analytics" className="flex items-center py-2 px-4 hover:bg-gray-700 rounded"><i className="fas fa-chart-line mr-3"></i> Analytics</a></li>
<li><a href="#tasks" className="flex items-center py-2 px-4 hover:bg-gray-700 rounded"><i className="fas fa-tasks mr-3"></i> Tasks</a></li>
<li><a href="#users" className="flex items-center py-2 px-4 hover:bg-gray-700 rounded"><i className="fas fa-users mr-3"></i> Users</a></li>
<li><a href="#settings" className="flex items-center py-2 px-4 hover:bg-gray-700 rounded"><i className="fas fa-cogs mr-3"></i> Settings</a></li>
<li><button onClick={toggleDarkMode} className="flex items-center py-2 px-4 hover:bg-gray-700 rounded"><i className="fas fa-moon mr-3"></i> Toggle Dark Mode</button></li>
</ul>
</div>
{/* Main Content */}
<div className="flex-1 bg-gray-100 p-5 overflow-auto">
{/* Dashboard Overview Section */}
<section id="dashboard" className="mb-8">
<h2 className="text-2xl font-semibold mb-5">Dashboard Overview</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="bg-white p-5 rounded-lg shadow-md">
<h3 className="text-xl font-bold">Total Users</h3>
<p className="text-3xl">2,350</p>
</div>
<div className="bg-white p-5 rounded-lg shadow-md">
<h3 className="text-xl font-bold">Total Sales</h3>
<p className="text-3xl">$18,745</p>
</div>
<div className="bg-white p-5 rounded-lg shadow-md">
<h3 className="text-xl font-bold">Pending Orders</h3>
<p className="text-3xl">120</p>
</div>
</div>
</section>
{/* Analytics Section */}
<section id="analytics" className="mb-8">
<h2 className="text-2xl font-semibold mb-5">Analytics</h2>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="bg-white p-5 rounded-lg shadow-md">
<Line data={salesData} options={{ plugins: { datalabels: { display: true, color: 'black' } }, scales: { y: { beginAtZero: true } } }} />
</div>
<div className="bg-white p-5 rounded-lg shadow-md">
<Bar data={trafficData} options={{ plugins: { datalabels: { display: true, color: 'black' } }, scales: { y: { beginAtZero: true } } }} />
</div>
</div>
</section>
{/* Tasks Section */}
<section id="tasks" className="mb-8">
<h2 className="text-2xl font-semibold mb-5">Tasks</h2>
<div className="bg-white p-5 rounded-lg shadow-md">
<h3 className="text-xl font-bold mb-3">Task List</h3>
<div className="scrollable space-y-3">
<div className="flex items-center justify-between">
<span>Design New Logo</span>
<button className="bg-blue-500 text-white px-3 py-1 rounded">In Progress</button>
</div>
<div className="flex items-center justify-between">
<span>Implement New Feature</span>
<button className="bg-green-500 text-white px-3 py-1 rounded">Completed</button>
</div>
<div className="flex items-center justify-between">
<span>Update Analytics Dashboard</span>
<button className="bg-red-500 text-white px-3 py-1 rounded">Pending</button>
</div>
</div>
</div>
</section>
{/* User Management Section */}
<section id="users" className="mb-8">
<h2 className="text-2xl font-semibold mb-5">User Management</h2>
<div className="bg-white p-5 rounded-lg shadow-md">
<table className="w-full table-auto">
<thead>
<tr className="bg-gray-200">
<th className="py-2 px-4">Name</th>
<th className="py-2 px-4">Email</th>
<th className="py-2 px-4">Status</th>
<th className="py-2 px-4">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td className="py-2 px-4">John Doe</td>
<td className="py-2 px-4">johndoe@example.com</td>
<td className="py-2 px-4"><span className="bg-green-500 text-white py-1 px-3 rounded">Active</span></td>
<td className="py-2 px-4"><button className="bg-blue-500 text-white px-3 py-1 rounded">Edit</button></td>
</tr>
<tr>
<td className="py-2 px-4">Jane Smith</td>
<td className="py-2 px-4">janesmith@example.com</td>
<td className="py-2 px-4"><span className="bg-red-500 text-white py-1 px-3 rounded">Inactive</span></td>
<td className="py-2 px-4"><button className="bg-blue-500 text-white px-3 py-1 rounded">Edit</button></td>
</tr>
</tbody>
</table>
</div>
</section>
{/* Settings Section */}
<section id="settings">
<h2 className="text-2xl font-semibold mb-5">Settings</h2>
<div className="bg-white p-5 rounded-lg shadow-md">
<h3 className="text-xl font-bold">Notifications</h3>
<p className="mb-4">Enable or disable notifications for tasks, messages, etc.</p>
<button className="bg-green-500 text-white px-4 py-2 rounded">Save Settings</button>
</div>
</section>
</div>
</div>
);
};
export default BasicAdminDash;