javascript
Sao chép mã
import React from "react";
import download from "~/assets/Admin_image/download.svg";
import create from "~/assets/Admin_image/create.svg";
import sales from "~/assets/Admin_image/sales.svg";
import revenue from "~/assets/Admin_image/revenue.svg";
import growth from "~/assets/Admin_image/growth.svg";
import orders from "~/assets/Admin_image/orders.svg";
import { Bar, Doughnut } from "react-chartjs-2";
import "chart.js/auto";
function AdminDashboard() {
const revenueData = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [
{
label: "Profit",
data: [60, 30, 40, 50, 70, 50, 30],
backgroundColor: "rgba(54, 162, 235, 0.6)",
},
{
label: "Loss",
data: [20, 10, 15, 25, 30, 20, 10],
backgroundColor: "rgba(255, 99, 132, 0.6)",
},
],
};
const paymentStatusData = {
labels: ["Paid", "Unpaid", "Partial"],
datasets: [
{
data: [20, 5, 10],
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
},
],
};
const pageViewsData = {
labels: ["M", "T", "W", "T", "F", "S", "S"],
datasets: [
{
label: "Page Views",
data: [3, 4, 5, 7, 4, 2, 1],
backgroundColor: "rgba(75, 192, 192, 0.6)",
},
],
};
const inventoryData = {
datasets: [
{
data: [15.2, 84.8],
backgroundColor: ["#FF6384", "#E8E8E8"],
},
],
};
const systemStatusData = {
datasets: [
{
data: [66, 34],
backgroundColor: ["#36A2EB", "#E8E8E8"],
},
],
};
return (
<div className="flex-grow no-scrollbar">
<div className="w-full bg-white shadow-md p-3">
<div className="flex justify-between items-center">
<h1 className="text-2xl font-bold text-gray-500">Dashboard</h1>
<div className="flex space-x-6">
<button className="flex items-center px-4 py-2 bg-white text-gray-900 border border-gray-300 rounded-md shadow-sm hover:bg-gray-100">
<img src={download} alt="download icon" className="mr-3" />
Download
</button>
<button className="flex items-center px-4 py-2 bg-blue-500 text-white rounded-md shadow-sm hover:bg-blue-600">
<img src={create} alt="create icon" className="mr-3" />
Create
</button>
</div>
</div>
</div>
<div className="m-6">
<div className="grid grid-cols-4 gap-6">
<div className="col-span-2 bg-white p-4 rounded-2xl shadow-sm border border-gray-300">
<h2 className="text-xl font-bold mb-4">Total Revenue</h2>
<Bar data={revenueData} />
</div>
<div className="bg-white p-4 rounded-2xl shadow-sm border border-gray-300">
<h2 className="text-xl font-bold mb-4">Payment Status</h2>
<Doughnut data={paymentStatusData} />
</div>
<div className="bg-white p-4 rounded-2xl shadow-sm border border-gray-300">
<h2 className="text-xl font-bold mb-4">Teams</h2>
<div className="flex flex-col space-y-2">
<div className="flex items-center">
<span className="w-3 h-3 rounded-full bg-blue-500 mr-2"></span> Marketing
</div>
<div className="flex items-center">
<span className="w-3 h-3 rounded-full bg-orange-500 mr-2"></span> Development
</div>
<div className="flex items-center">
<span className="w-3 h-3 rounded-full bg-green-500 mr-2"></span> Design
</div>
<div className="flex items-center">
<span className="w-3 h-3 rounded-full bg-pink-500 mr-2"></span> Social Media
</div>
</div>
</div>
<div className="col-span-4 bg-white p-4 rounded-2xl shadow-sm border border-gray-300">
<h2 className="text-xl font-bold mb-4">Page Views</h2>
<Bar data={pageViewsData} />
</div>
<div className="bg-white p-4 rounded-2xl shadow-sm border border-gray-300">
<h2 className="text-xl font-bold mb-4">Inventory</h2>
<Doughnut data={inventoryData} />
<div className="text-center text-xl font-bold text-gray-900 mt-2">15.2%</div>
</div>
<div className="bg-white p-4 rounded-2xl shadow-sm border border-gray-300">
<h2 className="text-xl font-bold mb-4">System Status</h2>
<Doughnut data={systemStatusData} />
<div className="text-center text-xl font-bold text-gray-900 mt-2">66%</div>
</div>
</div>
</div>
</div>
);
}
export default AdminDashboard;