85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
"use client";
|
|
import Grid from "@mui/material/Grid2"; // Usamos Grid2 según tu versión avanzada
|
|
import React from "react";
|
|
import Chart from "@organisms/Dashboard/Chart";
|
|
import DashboardHeader from "@organisms/Dashboard/DashboardHeader";
|
|
import RecentTransactions from "@organisms/Dashboard/RecentTransactions";
|
|
import Sidebar from "@organisms/Dashboard/Sidebar";
|
|
import StatCard from "@organisms/Dashboard/StatCard";
|
|
|
|
const salesData = [
|
|
{ name: "Ene", total: 4000 },
|
|
{ name: "Feb", total: 3000 },
|
|
{ name: "Mar", total: 5000 },
|
|
{ name: "Abr", total: 4500 },
|
|
{ name: "May", total: 6000 },
|
|
{ name: "Jun", total: 5500 },
|
|
];
|
|
|
|
const recentTransactions = [
|
|
{ id: 1, customer: "Cliente 1", products: 3, total: 150.5, date: "2023-06-01" },
|
|
{ id: 2, customer: "Cliente 2", products: 2, total: 75.2, date: "2023-06-02" },
|
|
{ id: 3, customer: "Cliente 3", products: 5, total: 220.0, date: "2023-06-03" },
|
|
{ id: 4, customer: "Cliente 4", products: 1, total: 30.99, date: "2023-06-04" },
|
|
{ id: 5, customer: "Cliente 5", products: 4, total: 180.75, date: "2023-06-05" },
|
|
];
|
|
|
|
const Dashboard: React.FC = () => {
|
|
return (
|
|
<div className="flex">
|
|
<Sidebar />
|
|
<div className="flex-1">
|
|
<DashboardHeader />
|
|
<div className="p-4">
|
|
<Grid container spacing={3}>
|
|
{/* Tarjetas de Estadísticas */}
|
|
<Grid size={{ xs: 12, sm: 6, md: 3 }}>
|
|
<StatCard
|
|
title="Ventas Totales"
|
|
value="$45,231.89"
|
|
change="+20.1% respecto al mes anterior"
|
|
icon="AttachMoney"
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6, md: 3 }}>
|
|
<StatCard
|
|
title="Transacciones"
|
|
value="2,350"
|
|
change="+180.1% respecto al mes anterior"
|
|
icon="ShoppingCart"
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6, md: 3 }}>
|
|
<StatCard
|
|
title="Clientes Activos"
|
|
value="573"
|
|
change="+201 desde la última semana"
|
|
icon="People"
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, sm: 6, md: 3 }}>
|
|
<StatCard
|
|
title="Tasa de Conversión"
|
|
value="88.6%"
|
|
change="+2.2% respecto al mes anterior"
|
|
icon="TrendingUp"
|
|
/>
|
|
</Grid>
|
|
|
|
{/* Gráfico */}
|
|
<Grid size={{ xs: 12, md: 8 }}>
|
|
<Chart data={salesData} />
|
|
</Grid>
|
|
|
|
{/* Transacciones Recientes */}
|
|
<Grid size={{ xs: 12, md: 8 }}>
|
|
<RecentTransactions transactions={recentTransactions} />
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|