{title}
+ {value} +{Math.abs(progress)} desde ayer
+
- 
Hola,{' '}
diff --git a/src/components/molecules/cards/stats-card/index.tsx b/src/components/molecules/cards/stats-card/index.tsx
new file mode 100644
index 0000000..d6a3252
--- /dev/null
+++ b/src/components/molecules/cards/stats-card/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import style from './styles.module.scss'
+import classNames from 'classnames'
+
+interface Props {
+ title: string
+ value: string
+ progress: number
+ classname?: string
+ icon?: React.ReactNode
+ iconBGColor?: string
+}
+
+export default function InfoCard ({ title, value, progress, classname, icon, iconBGColor }: Props): JSX.Element {
+ const classes = classNames(style.InfoCard, classname)
+ const spanClasses = classNames({ [style.positive]: progress > 0 }, { [style.negative]: progress < 0 })
+
+ return (
+
+
+
+ {
+ icon !== undefined && (
+
+ {icon}
+
+ )
+ }
+
+ )
+}
diff --git a/src/components/molecules/cards/stats-card/styles.module.scss b/src/components/molecules/cards/stats-card/styles.module.scss
new file mode 100644
index 0000000..c6b01e8
--- /dev/null
+++ b/src/components/molecules/cards/stats-card/styles.module.scss
@@ -0,0 +1,60 @@
+.InfoCard{
+ display: flex;
+ max-height: 10rem;
+ padding: 1rem 1.3rem;
+ background-color: oklch(100% 0 0);
+ box-shadow: 0 0 2rem 0 rgba(136,152,170,.15);
+ border-radius: 1rem;
+ gap: 2rem;
+ article{
+ flex: 2;
+ h2{
+ text-transform: capitalize;
+ font-weight: 500;
+ font-size: .9rem;
+ color: oklch(55.17% 0.014 285.94);
+ }
+ b{
+ font-size: 1.5rem;
+ line-height: 1.2;
+ color: oklch(23.5% 0 0);
+ }
+ p.indicator{
+ margin-top: .2rem;
+ span{
+ width: max-content;
+ margin-top: .7rem;
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: oklch(47.47% 0 0);
+ &.positive{
+ color: oklch(63.06% 0.187 142.31);
+ &::before{
+ content: '+';
+ }
+ }
+ &.negative{
+ color: oklch(63.06% 0.226 21.66);
+ &::before{
+ content: '-';
+ }
+ }
+ &::after{
+ content: '%';
+ }
+ }
+ }
+ }
+ figure{
+ width: max-content;
+ height: max-content;
+ padding: .5rem;
+ border-radius: 50%;
+ background-color: oklch(59.99% 0 0);
+ color: oklch(100% 0 0);
+ svg{
+ width: 2.3rem;
+ height: 2.3rem;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/molecules/cards/table-payments-card/index.tsx b/src/components/molecules/cards/table-payments-card/index.tsx
new file mode 100644
index 0000000..e24fcb5
--- /dev/null
+++ b/src/components/molecules/cards/table-payments-card/index.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import style from './styles.module.scss'
+import classNames from 'classnames'
+import { type Movement } from '@/types'
+import { Currency } from '@/const/DashboardConst'
+
+interface Props {
+ title: string
+ classname?: string
+ history: Movement[]
+}
+
+export default function TablePaymentsCard ({ title, classname, history }: Props): JSX.Element {
+ const classes = classNames(style.TablePayments, classname)
+
+ return (
+
+
+
+ {history.slice(0, 5).map((m, i) => {
+ return (
+
+
+ )
+}
diff --git a/src/components/molecules/cards/table-payments-card/styles.module.scss b/src/components/molecules/cards/table-payments-card/styles.module.scss
new file mode 100644
index 0000000..b1a0daf
--- /dev/null
+++ b/src/components/molecules/cards/table-payments-card/styles.module.scss
@@ -0,0 +1,71 @@
+.TablePayments{
+ padding: 1rem 1.25rem;
+ background-color: oklch(100% 0 0);
+ box-shadow: 0 0 2rem 0 rgba(136,152,170,.15);
+ border-radius: 1rem;
+ position: relative;
+ h2{
+ text-transform: capitalize;
+ font-weight: 500;
+ font-size: 1.1rem;
+ padding: .2rem 0;
+ }
+ table{
+ width: 100%;
+ height: max-content;
+ margin: .3rem auto 0;
+ tr{
+ height: 3rem;
+ td{
+ padding: 0 1rem;
+ &:first-child{
+ h3{
+ text-transform: capitalize;
+ font-weight: 600;
+ color: oklch(33.28% 0 260.51);
+ }
+ p{
+ font-size: .8rem;
+ }
+ }
+ &:last-child{
+ text-align: end;
+ }
+ }
+ &.positive td:last-child{
+ font-size: .9rem;
+ font-weight: 500;
+ color: oklch(63.06% 0.187 142.31);
+ &::before{
+ content: '+';
+ margin-right: .2rem;
+ }
+ }
+ &.negative td:last-child{
+ font-size: .9rem;
+ font-weight: 500;
+ color: oklch(63.06% 0.226 21.66);
+ &::before{
+ content: '-';
+ margin-right: .2rem;
+ }
+ }
+ &:not(:last-child){
+ border-bottom: 2px solid #e9ecef;
+ }
+ &:hover{
+ background-color: rgba(146, 146, 146, 0.101);
+ cursor: pointer;
+ }
+ }
+ }
+ &:has(table tbody:empty)::after{
+ content: 'No hubo movimientos recientes';
+ color: rgb(33, 33, 33);
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+}
\ No newline at end of file
diff --git a/src/components/molecules/charts/expense-chart/index.tsx b/src/components/molecules/charts/expense-chart/index.tsx
new file mode 100644
index 0000000..b0533b1
--- /dev/null
+++ b/src/components/molecules/charts/expense-chart/index.tsx
@@ -0,0 +1,81 @@
+'use client'
+
+import React from 'react'
+import { Line } from 'react-chartjs-2'
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Title,
+ Tooltip,
+ Legend
+} from 'chart.js'
+
+ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Title,
+ Tooltip,
+ Legend
+)
+
+const labels = ['Domingo', 'Lunes', 'Martes', 'Jueves', 'Viernes', 'Sabado']
+
+export const data = {
+ type: 'line',
+ labels,
+ datasets: [
+ {
+ label: 'Ingresos',
+ data: labels.map(() => 2),
+ borderColor: 'rgb(53, 162, 235)',
+ backgroundColor: 'rgba(53, 162, 235, 0.5)'
+ },
+ {
+ label: 'Gastos',
+ data: labels.map(() => 2),
+ borderColor: 'rgb(255, 99, 132)',
+ backgroundColor: 'rgba(255, 99, 132, 0.5)'
+ }
+ ]
+}
+
+interface Props {
+ className?: string
+}
+
+export default function ExpenseChart ({ className }: Props): JSX.Element {
+ return (
+
{title}
+
+ {m.to}+{m.date.toLocaleDateString('es', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' })} + |
+ {Currency}${m.value} | +