Merge pull request #27 from JorgePeniaranda/feat/create-dashboard

Feat/create dashboard home

package.json

@@ -19,12 +19,15 @@
     "@react-email/components": "0.0.14",
     "axios": "1.6.7",
     "bcryptjs": "2.4.3",
+    "chart.js": "^4.4.1",
     "classnames": "2.5.1",
     "jose": "5.2.1",
     "jsonwebtoken": "9.0.2",
     "next": "14.1.0",
     "react": "18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-code-input": "3.10.1",
+    "react-credit-cards-2": "^1.0.2",
     "react-dom": "18.2.0",
     "react-hook-form": "7.50.1",
     "react-simple-typewriter": "5.0.1",

src/app/dashboard/(control-panel)/money/index.tsx

@@ -1,10 +1,13 @@
-import React from 'react'
-import Text from '@/components/atoms/text/Text'
+'use client'
+
+import React, { useContext } from 'react'
+import MoneyTemplate from '@/components/templates/dashboard/money'
+import { userContext } from '@/context/userContext'
 
 export default function Money (): JSX.Element {
+  const user = useContext(userContext)
+
   return (
-    <Text tag="h1" size="2rem" weight="700">
-      Home
-    </Text>
+    <MoneyTemplate currentMoney={user.currentMoney} earnedMoney={user.earnedMoney} spentMoney={user.spentMoney} history={user.history}/>
   )
 }

src/app/dashboard/layout.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import type { Metadata } from 'next'
 import DashboardContainer from '@/components/pages/layouts/dashboard-layout'
+import { UserProvider } from '@/context/userContext'
 
 export const metadata: Metadata = {
   title: 'Panel de control | Golden Duck'
@@ -11,5 +12,9 @@ export default function DashboardLayout ({
 }: {
   children: React.ReactNode
 }): JSX.Element {
-  return <DashboardContainer>{children}</DashboardContainer>
+  return (
+    <UserProvider>
+      <DashboardContainer>{children}</DashboardContainer>
+    </UserProvider>
+  )
 }

src/components/molecules/buttons/profile-button/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import Text from '@/components/atoms/text/Text'
-import Image from 'next/image'
 import style from './styles.module.scss'
 
 interface Props {
@@ -14,7 +13,7 @@ export default function ProfileButton ({
 }: Props): JSX.Element {
   return (
     <div className={style.Profile}>
-      <Image src={src} width={32} height={32} alt="Profile Picture" />
+      <img src={src} width={32} height={32} alt="Profile Picture" />
       <Text tag="h3">
         Hola,{' '}
         <Text tag="span" size={'inherit'} weight="700">

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 (
+    <section className={classes}>
+        <article>
+            <h2>{title}</h2>
+            <b>{value}</b>
+            <p className={style.indicator}><span className={spanClasses}>{Math.abs(progress)}</span> desde ayer</p>
+        </article>
+        {
+            icon !== undefined && (
+                <figure style={{ backgroundColor: iconBGColor }}>
+                    {icon}
+                </figure>
+            )
+        }
+    </section>
+  )
+}

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;
+        }
+    }
+}

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 (
+    <section className={classes}>
+      <h2>{title}</h2>
+      <table>
+        <tbody>
+          {history.slice(0, 5).map((m, i) => {
+            return (
+              <tr key={i} className={classNames({ [style.positive]: m.balance }, { [style.negative]: !m.balance })}>
+                <td>
+                  <h3>{m.to}</h3>
+                  <p>{m.date.toLocaleDateString('es', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' })}</p>
+                </td>
+                <td>{Currency}${m.value}</td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </section>
+  )
+}