From fbca397a312c0490f502dbe70cc2c523a133c5f5 Mon Sep 17 00:00:00 2001 From: jorgepeniaranda Date: Mon, 19 Feb 2024 11:57:21 -0300 Subject: [PATCH 1/8] feat: install chart.js and react-credit-cards --- package-lock.json | 59 ++++++++++++++++++- package.json | 2 + .../dashboard/(control-panel)/money/index.tsx | 10 ++-- 3 files changed, 66 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7f57621..4fbbe98 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,12 +15,14 @@ "@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-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", @@ -1897,6 +1899,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", + "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" + }, "node_modules/@next/env": { "version": "14.1.0", "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.0.tgz", @@ -4099,6 +4106,17 @@ "node": ">=10" } }, + "node_modules/chart.js": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz", + "integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=7" + } + }, "node_modules/chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -4304,6 +4322,11 @@ "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", "dev": true }, + "node_modules/credit-card-type": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/credit-card-type/-/credit-card-type-9.1.0.tgz", + "integrity": "sha512-CpNFuLxiPFxuZqhSKml3M+t0K/484pMAnfYWH14JoD7OZMnmC0Lmo+P7JX9SobqFpRoo7ifA18kOHdxJywYPEA==" + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -5915,7 +5938,6 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz", "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==", - "dev": true, "dependencies": { "define-properties": "^1.1.3" }, @@ -8038,6 +8060,14 @@ "node": ">=10" } }, + "node_modules/luhn": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/luhn/-/luhn-2.4.1.tgz", + "integrity": "sha512-p1eEWSb2RJAfv+BzrPEUqbUXV1H3ylHEAOk9yDM1L12ojD6OQQGrE29DqKLa0XYluJTIwXIOFmyzVOme3QSyww==", + "engines": { + "node": ">=10" + } + }, "node_modules/lz-string": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", @@ -8679,6 +8709,15 @@ "node": ">=8" } }, + "node_modules/payment": { + "version": "2.4.6", + "resolved": "https://registry.npmjs.org/payment/-/payment-2.4.6.tgz", + "integrity": "sha512-QSCAa1yQSkqbe4Ghac3sSA5SQ+Cxc3e4xwCxxun5NT6hUSWsNXXlN8KCCY0kAFFXBP9C7DrfyXP4REB7nPJa8g==", + "dependencies": { + "globalthis": "^1.0.2", + "qj": "~2.0.0" + } + }, "node_modules/peberminta": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/peberminta/-/peberminta-0.9.0.tgz", @@ -9073,6 +9112,11 @@ } ] }, + "node_modules/qj": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/qj/-/qj-2.0.0.tgz", + "integrity": "sha512-8466vlnAF/piI42tzMBUfhaAWn2yBNPOLSSbA2YBlEh+S8CxBXbAO1AwuDReGKYX6LlsK19wBL9cpXZGlgsXxA==" + }, "node_modules/querystringify": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", @@ -9160,6 +9204,19 @@ "object-assign": "^4.1.1" } }, + "node_modules/react-credit-cards-2": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/react-credit-cards-2/-/react-credit-cards-2-1.0.2.tgz", + "integrity": "sha512-XvDa7x+rzdtrHIglARMhiQpuWIqMP1bSN8gajBGD93Zn4Y3DdhPKEPKafChTAOAfhMRZpFZ23DUXNQWJAIUDFA==", + "dependencies": { + "credit-card-type": "^9.1.0", + "luhn": "^2.4.1", + "payment": "^2.3.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", diff --git a/package.json b/package.json index 1c94cbf..6376495 100644 --- a/package.json +++ b/package.json @@ -19,12 +19,14 @@ "@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-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", diff --git a/src/app/dashboard/(control-panel)/money/index.tsx b/src/app/dashboard/(control-panel)/money/index.tsx index 62ffb11..dab7f2a 100644 --- a/src/app/dashboard/(control-panel)/money/index.tsx +++ b/src/app/dashboard/(control-panel)/money/index.tsx @@ -1,10 +1,12 @@ import React from 'react' -import Text from '@/components/atoms/text/Text' export default function Money (): JSX.Element { return ( - - Home - +
+
+

Su dinero

+ ARS$2.000 +
+
) } From 3d70830a648c8a808c563d5569b8d42cfb03bab5 Mon Sep 17 00:00:00 2001 From: jorgepeniaranda Date: Mon, 19 Feb 2024 17:38:44 -0300 Subject: [PATCH 2/8] feat: reply dashboard design --- package-lock.json | 10 +++ package.json | 1 + .../dashboard/(control-panel)/money/index.tsx | 8 +- .../molecules/cards/stats-card/index.tsx | 34 +++++++++ .../cards/stats-card/styles.module.scss | 57 +++++++++++++++ .../cards/table-payments-card/index.tsx | 35 +++++++++ .../table-payments-card/styles.module.scss | 61 ++++++++++++++++ .../molecules/charts/expense-chart/index.tsx | 73 +++++++++++++++++++ .../templates/dashboard/money/index.tsx | 42 +++++++++++ src/const/DashboardConst.tsx | 15 ++++ src/types/index.d.ts | 7 ++ 11 files changed, 337 insertions(+), 6 deletions(-) create mode 100644 src/components/molecules/cards/stats-card/index.tsx create mode 100644 src/components/molecules/cards/stats-card/styles.module.scss create mode 100644 src/components/molecules/cards/table-payments-card/index.tsx create mode 100644 src/components/molecules/cards/table-payments-card/styles.module.scss create mode 100644 src/components/molecules/charts/expense-chart/index.tsx create mode 100644 src/components/templates/dashboard/money/index.tsx diff --git a/package-lock.json b/package-lock.json index 4fbbe98..30389c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "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", @@ -9154,6 +9155,15 @@ "node": ">=0.10.0" } }, + "node_modules/react-chartjs-2": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz", + "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==", + "peerDependencies": { + "chart.js": "^4.1.1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-code-input": { "version": "3.10.1", "resolved": "https://registry.npmjs.org/react-code-input/-/react-code-input-3.10.1.tgz", diff --git a/package.json b/package.json index 6376495..e86aed5 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "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", diff --git a/src/app/dashboard/(control-panel)/money/index.tsx b/src/app/dashboard/(control-panel)/money/index.tsx index dab7f2a..86e481f 100644 --- a/src/app/dashboard/(control-panel)/money/index.tsx +++ b/src/app/dashboard/(control-panel)/money/index.tsx @@ -1,12 +1,8 @@ +import MoneyTemplate from '@/components/templates/dashboard/money' import React from 'react' export default function Money (): JSX.Element { return ( -
-
-

Su dinero

- ARS$2.000 -
-
+ ) } 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..8eb04d0 --- /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 ( +
+
+

{title}

+ {value} +

{progress} desde ayer

+
+ { + 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..f48310b --- /dev/null +++ b/src/components/molecules/cards/stats-card/styles.module.scss @@ -0,0 +1,57 @@ +.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); + } + &::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..a004aea --- /dev/null +++ b/src/components/molecules/cards/table-payments-card/index.tsx @@ -0,0 +1,35 @@ +import React from 'react' +import style from './styles.module.scss' +import classNames from 'classnames' +import { type Movement } from '@/types' + +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 ( +
+

{title}

+ + + {history.slice(0, 5).map((m, i) => { + return ( + + + + + ) + })} + +
+

{m.to}

+

{m.date.toLocaleDateString('es', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' })}

+ 		ARS${m.value}
+
+ ) +} 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..8dc817a --- /dev/null +++ b/src/components/molecules/cards/table-payments-card/styles.module.scss @@ -0,0 +1,61 @@ +.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; + 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; + } + } + } +} \ 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..35e29c6 --- /dev/null +++ b/src/components/molecules/charts/expense-chart/index.tsx @@ -0,0 +1,73 @@ +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)' + } + ] +} + +export default function ExpenseChart (): JSX.Element { + return ( + + ) +} diff --git a/src/components/templates/dashboard/money/index.tsx b/src/components/templates/dashboard/money/index.tsx new file mode 100644 index 0000000..5ea9154 --- /dev/null +++ b/src/components/templates/dashboard/money/index.tsx @@ -0,0 +1,42 @@ +'use client' + +import React from 'react' +import InfoCard from '@/components/molecules/cards/stats-card' +import TablePaymentsCard from '@/components/molecules/cards/table-payments-card' +import { cardsIcons } from '@/const/DashboardConst' +import ExpenseChart from '@/components/molecules/charts/expense-chart' + +const history = [ + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: false, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() } +] + +export default function MoneyTemplate (): JSX.Element { + return ( + <> +
+ + + +
+
+
+

Registro Semanal

+ +
+ +
+ + ) +} diff --git a/src/const/DashboardConst.tsx b/src/const/DashboardConst.tsx index eb490e1..2e6ec3a 100644 --- a/src/const/DashboardConst.tsx +++ b/src/const/DashboardConst.tsx @@ -89,3 +89,18 @@ export const NavIcons = { ) } + +export const cardsIcons = { + Money: { + icon: , + color: 'oklch(68.85% 0.15 146.54)' + }, + Graph: { + icon: , + color: 'oklch(86.06% 0.173 91.94)' + }, + Expenses: { + icon: , + color: 'oklch(63.68% 0.208 25.33)' + } +} diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 9ce2266..b15ab48 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -25,3 +25,10 @@ export interface ErrorResponse { error: string status: number } + +export interface Movement { + to: string + value: number + date: Date + balance: boolean +} From 9fe570a3d643f51c9a1e23325b947599aa0de55f Mon Sep 17 00:00:00 2001 From: jorgepeniaranda Date: Mon, 19 Feb 2024 18:19:41 -0300 Subject: [PATCH 3/8] feat: adjust animation time --- .../pages/sections/about-lycokat/styles.module.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/pages/sections/about-lycokat/styles.module.scss b/src/components/pages/sections/about-lycokat/styles.module.scss index e5f5652..719a7a4 100644 --- a/src/components/pages/sections/about-lycokat/styles.module.scss +++ b/src/components/pages/sections/about-lycokat/styles.module.scss @@ -5,13 +5,13 @@ $lycokat-text-color: oklch(58.01% 0.014 202.82); flex-direction: column; align-items: center; img { - animation: color 3s linear infinite alternate; + animation: color 5.5s linear infinite alternate; @keyframes color { 0% { - filter: invert(10%); + filter: invert(0); } 100% { - filter: invert(80%); + filter: invert(90%); } } } From 0cb6521b38a90c8864cafae1c8c35231438fe949 Mon Sep 17 00:00:00 2001 From: jorgepeniaranda Date: Mon, 19 Feb 2024 21:06:52 -0300 Subject: [PATCH 4/8] refactor: set currency and userData --- .../dashboard/(control-panel)/money/index.tsx | 23 ++++++++++- .../cards/table-payments-card/index.tsx | 3 +- .../table-payments-card/styles.module.scss | 10 +++++ .../molecules/charts/expense-chart/index.tsx | 10 ++++- .../templates/dashboard/money/index.tsx | 38 +++++++------------ src/const/DashboardConst.tsx | 2 + 6 files changed, 59 insertions(+), 27 deletions(-) diff --git a/src/app/dashboard/(control-panel)/money/index.tsx b/src/app/dashboard/(control-panel)/money/index.tsx index 86e481f..bcc024e 100644 --- a/src/app/dashboard/(control-panel)/money/index.tsx +++ b/src/app/dashboard/(control-panel)/money/index.tsx @@ -1,8 +1,29 @@ import MoneyTemplate from '@/components/templates/dashboard/money' import React from 'react' +const user = { + currentMoney: 2138, + earnedMoney: 3210, + spentMoney: 2422, + history: [ + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: false, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() } + ] +} + export default function Money (): JSX.Element { return ( - + ) } diff --git a/src/components/molecules/cards/table-payments-card/index.tsx b/src/components/molecules/cards/table-payments-card/index.tsx index a004aea..e24fcb5 100644 --- a/src/components/molecules/cards/table-payments-card/index.tsx +++ b/src/components/molecules/cards/table-payments-card/index.tsx @@ -2,6 +2,7 @@ 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 @@ -24,7 +25,7 @@ export default function TablePaymentsCard ({ title, classname, history }: Props)

{m.to}

{m.date.toLocaleDateString('es', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' })}

- ARS${m.value} + {Currency}${m.value} ) })} diff --git a/src/components/molecules/cards/table-payments-card/styles.module.scss b/src/components/molecules/cards/table-payments-card/styles.module.scss index 8dc817a..b1a0daf 100644 --- a/src/components/molecules/cards/table-payments-card/styles.module.scss +++ b/src/components/molecules/cards/table-payments-card/styles.module.scss @@ -3,6 +3,7 @@ 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; @@ -58,4 +59,13 @@ } } } + &: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 index 35e29c6..b0533b1 100644 --- a/src/components/molecules/charts/expense-chart/index.tsx +++ b/src/components/molecules/charts/expense-chart/index.tsx @@ -1,3 +1,5 @@ +'use client' + import React from 'react' import { Line } from 'react-chartjs-2' import { @@ -42,11 +44,16 @@ export const data = { ] } -export default function ExpenseChart (): JSX.Element { +interface Props { + className?: string +} + +export default function ExpenseChart ({ className }: Props): JSX.Element { return ( ) } diff --git a/src/components/templates/dashboard/money/index.tsx b/src/components/templates/dashboard/money/index.tsx index 5ea9154..87f7e29 100644 --- a/src/components/templates/dashboard/money/index.tsx +++ b/src/components/templates/dashboard/money/index.tsx @@ -1,39 +1,29 @@ -'use client' - import React from 'react' import InfoCard from '@/components/molecules/cards/stats-card' import TablePaymentsCard from '@/components/molecules/cards/table-payments-card' -import { cardsIcons } from '@/const/DashboardConst' +import { Currency, cardsIcons } from '@/const/DashboardConst' import ExpenseChart from '@/components/molecules/charts/expense-chart' +import { type Movement } from '@/types' -const history = [ - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: false, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() } -] +interface Props { + currentMoney: number + earnedMoney: number + spentMoney: number + history: Movement[] +} -export default function MoneyTemplate (): JSX.Element { +export default function MoneyTemplate ({ currentMoney, earnedMoney, spentMoney, history }: Props): JSX.Element { return ( <>
- - - + + +
-
+

Registro Semanal

- +
diff --git a/src/const/DashboardConst.tsx b/src/const/DashboardConst.tsx index 2e6ec3a..5fad38b 100644 --- a/src/const/DashboardConst.tsx +++ b/src/const/DashboardConst.tsx @@ -1,5 +1,7 @@ import React from 'react' +export const Currency = 'ARS' + export const AsideIcons = { messages: ( Date: Mon, 19 Feb 2024 21:44:47 -0300 Subject: [PATCH 5/8] fix: delete token cookie when jwt is expired --- src/components/templates/dashboard/money/index.tsx | 2 +- src/middleware.ts | 12 ++++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/templates/dashboard/money/index.tsx b/src/components/templates/dashboard/money/index.tsx index 87f7e29..024fa29 100644 --- a/src/components/templates/dashboard/money/index.tsx +++ b/src/components/templates/dashboard/money/index.tsx @@ -21,7 +21,7 @@ export default function MoneyTemplate ({ currentMoney, earnedMoney, spentMoney,
-
+

Registro Semanal

diff --git a/src/middleware.ts b/src/middleware.ts index 663560a..3c0e5f6 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -19,7 +19,11 @@ export async function middleware (request: NextRequest): Promise { return NextResponse.redirect(new URL('/dashboard', request.nextUrl)) } } catch (error) { - console.log(error) + if (error instanceof Error && error.name === 'JWTExpired') { + const response = NextResponse.redirect(new URL('/login', request.nextUrl)) + response.cookies.delete('token') + return response + } else console.log(error) } } else if (AuthorizedURLs.includes(request.nextUrl.pathname)) { if (typeof token?.value === 'string') { @@ -33,7 +37,11 @@ export async function middleware (request: NextRequest): Promise { return NextResponse.redirect(new URL('/login', request.nextUrl)) } } catch (error) { - console.log(error) + if (error instanceof Error && error.name === 'JWTExpired') { + const response = NextResponse.redirect(new URL('/login', request.nextUrl)) + response.cookies.delete('token') + return response + } else console.log(error) } } else { return NextResponse.redirect(new URL('/login', request.nextUrl)) From 848a02c1d37d31c65e5e0c6154c6fbbb26afef88 Mon Sep 17 00:00:00 2001 From: jorgepeniaranda Date: Tue, 20 Feb 2024 10:17:20 -0300 Subject: [PATCH 6/8] feat: create userContext --- src/context/userContext.tsx | 54 +++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 src/context/userContext.tsx diff --git a/src/context/userContext.tsx b/src/context/userContext.tsx new file mode 100644 index 0000000..cb04f4b --- /dev/null +++ b/src/context/userContext.tsx @@ -0,0 +1,54 @@ +'use client' + +import React, { createContext } from 'react' + +const user = { + name: 'John', + lastName: 'Doe', + profileURL: 'https://i.pinimg.com/originals/56/a6/14/56a614261d423da1825452363174c685.gif', + currentMoney: 2138, + earnedMoney: 3210, + spentMoney: 2422, + messages: [ + { from: 'pepe', profileURL: 'https://i.pinimg.com/originals/56/a6/14/56a614261d423da1825452363174c685.gif', message: 'coso', date: new Date() }, + { from: 'pepe', profileURL: 'https://i.pinimg.com/originals/56/a6/14/56a614261d423da1825452363174c685.gif', message: 'coso', date: new Date() }, + { from: 'pepe', profileURL: 'https://i.pinimg.com/originals/56/a6/14/56a614261d423da1825452363174c685.gif', message: 'coso', date: new Date() }, + { from: 'pepe', profileURL: 'https://i.pinimg.com/originals/56/a6/14/56a614261d423da1825452363174c685.gif', message: 'coso', date: new Date() } + ], + notifications: [ + { message: 'coso', date: new Date() }, + { message: 'coso', date: new Date() }, + { message: 'coso', date: new Date() }, + { message: 'coso', date: new Date() }, + { message: 'coso', date: new Date() }, + { message: 'coso', date: new Date() }, + { message: 'coso', date: new Date() }, + { message: 'coso', date: new Date() }, + { message: 'coso', date: new Date() } + ], + history: [ + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: false, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, + { to: 'Golden Duck', value: 2000, balance: true, date: new Date() } + ] +} + +export const userContext = createContext(user) + +export function UserProvider ({ children }: { children: React.ReactNode }): JSX.Element { + return ( + + {children} + + ) +} From c50e62c3899eb9697f3faa239ba8396a8ef34481 Mon Sep 17 00:00:00 2001 From: jorgepeniaranda Date: Tue, 20 Feb 2024 10:17:27 -0300 Subject: [PATCH 7/8] refactor: implement userContext --- .../dashboard/(control-panel)/money/index.tsx | 28 +--- src/app/dashboard/layout.tsx | 7 +- .../buttons/profile-button/index.tsx | 3 +- .../pages/layouts/dashboard-layout/index.tsx | 129 ++++++------------ 4 files changed, 56 insertions(+), 111 deletions(-) diff --git a/src/app/dashboard/(control-panel)/money/index.tsx b/src/app/dashboard/(control-panel)/money/index.tsx index bcc024e..c563a58 100644 --- a/src/app/dashboard/(control-panel)/money/index.tsx +++ b/src/app/dashboard/(control-panel)/money/index.tsx @@ -1,28 +1,12 @@ -import MoneyTemplate from '@/components/templates/dashboard/money' -import React from 'react' +'use client' -const user = { - currentMoney: 2138, - earnedMoney: 3210, - spentMoney: 2422, - history: [ - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: false, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() }, - { to: 'Golden Duck', value: 2000, balance: true, date: new Date() } - ] -} +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 ( ) diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx index c6e83c9..41caaf2 100644 --- a/src/app/dashboard/layout.tsx +++ b/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 {children} + return ( + + {children} + + ) } diff --git a/src/components/molecules/buttons/profile-button/index.tsx b/src/components/molecules/buttons/profile-button/index.tsx index 4e2bfa2..93b06e5 100644 --- a/src/components/molecules/buttons/profile-button/index.tsx +++ b/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 (
- Profile Picture + Profile Picture Hola,{' '} diff --git a/src/components/pages/layouts/dashboard-layout/index.tsx b/src/components/pages/layouts/dashboard-layout/index.tsx index 5f9885b..a983d52 100644 --- a/src/components/pages/layouts/dashboard-layout/index.tsx +++ b/src/components/pages/layouts/dashboard-layout/index.tsx @@ -1,8 +1,10 @@ +'use client' + import style from './styles.module.scss' import Text from '@/components/atoms/text/Text' import Breadcrumb from '@/components/molecules/breadcrumb' import Image from 'next/image' -import React from 'react' +import React, { useContext } from 'react' import ButtonWithPopover, { CardLinkPopover } from '@/components/molecules/buttons/button-with-popover' @@ -10,12 +12,15 @@ import ProfileButton from '@/components/molecules/buttons/profile-button' import NavDisclosure from '@/components/molecules/disclosures/nav-disclosure' import { AsideIcons, NavIcons, NavLinks } from '@/const/DashboardConst' import CurrentLocation from '@/components/atoms/text/CurrentLocation' +import { userContext } from '@/context/userContext' interface Props { children: React.ReactNode } export default function DashboardLayout ({ children }: Props): JSX.Element { + const user = useContext(userContext) + return (