feat: add dashboard page

app/Dashboard/page.tsx

@@ -0,0 +1,85 @@
+"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;

package/components/organisms/Dashboard/Chart.tsx

@@ -0,0 +1,36 @@
+"use client"
+import React from "react"
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts"
+import CustomCard from "@molecules/CustomCard"
+
+interface ChartProps {
+  data: Array<{ name: string; total: number }>
+}
+
+const Chart: React.FC<ChartProps> = ({ data }) => {
+  return (
+    <CustomCard title="Resumen de Ventas">
+      <ResponsiveContainer width="100%" height={350}>
+        <BarChart data={data}>
+          <XAxis
+            dataKey="name" 
+            stroke="#888888" 
+            fontSize={12} 
+            tickLine={false} 
+            axisLine={false} 
+          />
+          <YAxis 
+            stroke="#888888" 
+            fontSize={12} 
+            tickLine={false} 
+            axisLine={false} 
+            tickFormatter={(value = 0) => `$${value}`}  // Establecer valor por defecto aquí
+          />
+          <Bar dataKey="total" fill="#1976d2" radius={[4, 4, 0, 0]} />
+        </BarChart>
+      </ResponsiveContainer>
+    </CustomCard>
+  )
+}
+
+export default Chart

package/components/organisms/Dashboard/DashboardHeader.tsx

@@ -0,0 +1,16 @@
+"use client"
+import { AppBar, Toolbar } from "@mui/material"
+import React from "react"
+import Title from "@atoms/Title"
+
+const DashboardHeader: React.FC = () => {
+  return (
+    <AppBar position="static" color="default" elevation={0}>
+      <Toolbar>
+        <Title text="Dashboard" size="h4" />
+      </Toolbar>
+    </AppBar>
+  )
+}
+
+export default DashboardHeader

package/components/organisms/Dashboard/RecentTransactions.tsx

@@ -0,0 +1,45 @@
+"use client"
+import { Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material"
+import React from "react"
+import CustomCard from "@molecules/CustomCard"
+
+interface Transaction {
+    id: number
+    customer: string
+    products: number
+    total: number
+    date: string
+  }
+  
+  interface RecentTransactionsProps {
+    transactions: Transaction[]
+  }
+
+const RecentTransactions: React.FC<RecentTransactionsProps> = ({ transactions }) => {
+    return (
+      <CustomCard title="Transacciones Recientes">
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Cliente</TableCell>
+              <TableCell>Productos</TableCell>
+              <TableCell>Total</TableCell>
+              <TableCell>Fecha</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {transactions.map((transaction) => (
+              <TableRow key={transaction.id}>
+                <TableCell>{transaction.customer}</TableCell>
+                <TableCell>{transaction.products}</TableCell>
+                <TableCell>${transaction.total.toFixed(2)}</TableCell>
+                <TableCell>{transaction.date}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CustomCard>
+    )
+  }
+  
+  export default RecentTransactions

package/components/organisms/Dashboard/Sidebar.tsx

@@ -0,0 +1,46 @@
+"use client"
+import { Drawer, List, ListItem, ListItemIcon, ListItemText } from "@mui/material"
+import React from "react"
+import Icon from "@atoms/Icon"
+import Title from "@atoms/Title"
+
+const sidebarItems = [
+  { text: "Dashboard", icon: "Dashboard" },
+  { text: "Transacciones", icon: "Receipt" },
+  { text: "Inventario", icon: "Inventory" },
+  { text: "Reportes", icon: "Assessment" },
+]
+
+const Sidebar: React.FC = () => {
+  return (
+    <Drawer
+      variant="permanent"
+      sx={{
+        width: 240,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width: 240,
+          boxSizing: "border-box",
+          backgroundColor: "#1e293b",
+          color: "white",
+        },
+      }}
+    >
+      <div className="p-4">
+        <Title text="Self-Checkout Dashboard" size="h6" />
+      </div>
+      <List>
+        {sidebarItems.map((item) => (
+          <ListItem key={item.text} component="li">
+            <ListItemIcon>
+              <Icon name={item.icon as any} className="text-white" />
+            </ListItemIcon>
+            <ListItemText primary={item.text} />
+          </ListItem>
+        ))}
+      </List>
+    </Drawer>
+  )
+}
+
+export default Sidebar

package/components/organisms/Dashboard/StatCard.tsx

@@ -0,0 +1,29 @@
+"use client"
+import React from "react"
+import Icon from "@atoms/Icon"
+import Title from "@atoms/Title"
+import CustomCard from "@molecules/CustomCard"
+
+interface StatCardProps {
+  title: string
+  value: string
+  change: string
+  icon: string
+}
+
+const StatCard: React.FC<StatCardProps> = ({ title, value, change, icon }) => {
+  return (
+    <CustomCard>
+      <div className="flex justify-between items-center">
+        <div>
+          <Title text={title} size="h6" />
+          <Title text={value} size="h4" />
+          <p className="text-sm text-gray-500">{change}</p>
+        </div>
+        <Icon name={icon as any} className="text-4xl text-gray-400" />
+      </div>
+    </CustomCard>
+  )
+}
+
+export default StatCard