feat: add dashboard page

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