From a49f23c633ce41e8807b273c03b8f768e276c7ae Mon Sep 17 00:00:00 2001
From: Henrique Leite <contact.henriqueleite42@gmail.com>
Date: Mon, 13 Nov 2023 08:38:41 -0300
Subject: [PATCH] Add Wallet

---
 .eslintrc.json                                |   3 +-
 src/app/(public)/carteira/page.tsx            | 160 ++++++++++++++++++
 .../TransactionInOut/index.tsx                |   2 +-
 src/assets/data.ts                            |  15 ++
 src/components/AddTransaction/index.tsx       |   2 +-
 src/components/BudgetCard/index.tsx           |   2 +-
 src/components/ExpensesPerCategory/index.tsx  |   2 +-
 src/components/Footer/NavBar/index.tsx        |  18 +-
 src/components/Inputs/Money/index.tsx         |   2 +-
 src/components/StoresCarousel/Chart/index.tsx |   2 +-
 src/components/TransactionInOut/index.tsx     |   2 +-
 src/components/WalletItem/index.tsx           |  37 ++++
 src/types/card.ts                             |   7 +-
 src/types/enums/card-type.ts                  |   1 +
 src/utils/{money.ts => format.ts}             |   5 +
 tailwind.config.ts                            |   2 +-
 16 files changed, 247 insertions(+), 15 deletions(-)
 create mode 100644 src/app/(public)/carteira/page.tsx
 create mode 100644 src/components/WalletItem/index.tsx
 rename src/utils/{money.ts => format.ts} (50%)

diff --git a/.eslintrc.json b/.eslintrc.json
index f8364d1..dc8fa20 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -29,6 +29,7 @@
 				"groups": ["module", ["parent", "sibling", "index"]],
 				"alphabetize": { "order": "asc", "ignoreCase": true }
 			}
-		]
+		],
+		"@next/next/no-img-element": "off"
 	}
 }
diff --git a/src/app/(public)/carteira/page.tsx b/src/app/(public)/carteira/page.tsx
new file mode 100644
index 0000000..98dc422
--- /dev/null
+++ b/src/app/(public)/carteira/page.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import {
+	bankAccounts as bankAccountsData,
+	cards as cardsData,
+} from "assets/data";
+import { Header } from "components/Header";
+import { Space } from "components/Space";
+import { WalletItem } from "components/WalletItem";
+import { PiPlusCircleBold } from "react-icons/pi";
+import { CardTypeEnum } from "types/enums/card-type";
+import { formatBankAccount } from "utils/format";
+import { formatMoney } from "utils/format";
+
+const bankAccounts = Object.values(bankAccountsData);
+const cards = Object.values(cardsData);
+
+const Wallet = () => {
+	return (
+		<>
+			<Header title="Carteira" />
+
+			<main className="min-h-[100dvh] w-full flex flex-col pt-2 container-padding">
+				<section>
+					<h2 className="font-bold text-lg">Resumo</h2>
+
+					<div>
+						<div className="flex flex-row justify-between">
+							<span>Saldo total</span>
+							<span>
+								{formatMoney(
+									bankAccounts.reduce((acc, cur) => acc + cur.balance, 0) +
+										cards.reduce((acc, cur) => acc + (cur.balance || 0), 0),
+								)}
+							</span>
+						</div>
+						<div className="pl-3 text-sm">
+							<div className="flex flex-row justify-between">
+								<span>Bancos</span>
+								<span>
+									{formatMoney(
+										bankAccounts.reduce((acc, cur) => acc + cur.balance, 0),
+									)}
+								</span>
+							</div>
+
+							<div className="flex flex-row justify-between">
+								<span>Vale Alimentação</span>
+								<span>
+									{formatMoney(
+										cards.reduce((acc, cur) => {
+											if (cur.type === CardTypeEnum.VA) {
+												return acc + (cur.balance || 0);
+											}
+
+											return acc;
+										}, 0),
+									)}
+								</span>
+							</div>
+
+							<div className="flex flex-row justify-between">
+								<span>Vale Refeição</span>
+								<span>
+									{formatMoney(
+										cards.reduce((acc, cur) => {
+											if (cur.type === CardTypeEnum.VR) {
+												return acc + (cur.balance || 0);
+											}
+
+											return acc;
+										}, 0),
+									)}
+								</span>
+							</div>
+
+							<div className="flex flex-row justify-between">
+								<span>Vale Transporte</span>
+								<span>
+									{formatMoney(
+										cards.reduce((acc, cur) => {
+											if (cur.type === CardTypeEnum.VT) {
+												return acc + (cur.balance || 0);
+											}
+
+											return acc;
+										}, 0),
+									)}
+								</span>
+							</div>
+						</div>
+
+						<div className="flex flex-row justify-between">
+							<span>Fatura total</span>
+							<span>
+								{formatMoney(
+									cards.reduce((acc, cur) => {
+										if (cur.type === CardTypeEnum.CREDIT) {
+											return acc + 0;
+										}
+
+										return acc;
+									}, 0),
+								)}
+							</span>
+						</div>
+					</div>
+				</section>
+
+				<Space />
+
+				<section>
+					<h2 className="font-bold text-lg">Contas</h2>
+
+					<div className="flex flex-col gap-1">
+						{bankAccounts.map((ba) => (
+							<WalletItem
+								key={ba.bankAccountId}
+								iconUrl={ba.iconUrl}
+								label={formatBankAccount(ba.accountNumber)}
+								name={ba.name}
+								valueLabel="Saldo"
+								value={formatMoney(ba.balance)}
+							/>
+						))}
+
+						<button className="btn">
+							<PiPlusCircleBold /> Adicionar nova conta
+						</button>
+					</div>
+				</section>
+
+				<Space />
+
+				<section>
+					<h2 className="font-bold text-lg">Cartões</h2>
+
+					<div className="flex flex-col gap-1">
+						{cards.map((c) => (
+							<WalletItem
+								key={c.bankAccountId}
+								iconUrl={c.iconUrl}
+								label={`**** ${c.lastFourDigits}`}
+								name={c.name}
+								valueLabel={c.type === CardTypeEnum.CREDIT ? "Fatura" : "Saldo"}
+								value={formatMoney(0)}
+							/>
+						))}
+
+						<button className="btn">
+							<PiPlusCircleBold /> Adicionar novo cartão
+						</button>
+					</div>
+				</section>
+			</main>
+		</>
+	);
+};
+
+export default Wallet;
diff --git a/src/app/(public)/transacao/[transactionId]/TransactionInOut/index.tsx b/src/app/(public)/transacao/[transactionId]/TransactionInOut/index.tsx
index 901b7aa..ee63099 100644
--- a/src/app/(public)/transacao/[transactionId]/TransactionInOut/index.tsx
+++ b/src/app/(public)/transacao/[transactionId]/TransactionInOut/index.tsx
@@ -6,7 +6,7 @@ import { useCurrentBudget } from "contexts/current-budget";
 import { CardTypeEnum } from "types/enums/card-type";
 import { TransactionInOut as TransactionInOutType } from "types/transaction";
 import { formatFullDate } from "utils/date";
-import { formatMoney } from "utils/money";
+import { formatMoney } from "utils/format";
 
 interface Props {
 	transaction: TransactionInOutType;
diff --git a/src/assets/data.ts b/src/assets/data.ts
index 4278c1e..fdf33c9 100644
--- a/src/assets/data.ts
+++ b/src/assets/data.ts
@@ -241,4 +241,19 @@ export const cards: Record<string, Card> = {
 		payAt: PayAtEnum.DUE,
 		payWithBankAccountId: bankAccounts["nubank"].bankAccountId,
 	},
+	aleloVa: {
+		cardId: "aleloVa",
+		accountId: "foo1",
+		cardProviderId: "aleloVa",
+		iconUrl:
+			"https://logodownload.org/wp-content/uploads/2017/09/alelo-logo-1-599x393.png",
+		color: "#017958",
+		type: CardTypeEnum.VA,
+		network: NetworkEnum.ELO,
+		name: "Alelo VA",
+		lastFourDigits: "1234",
+
+		// VA, VR, VT
+		balance: 1000,
+	},
 };
diff --git a/src/components/AddTransaction/index.tsx b/src/components/AddTransaction/index.tsx
index 227ccc9..e3514e2 100644
--- a/src/components/AddTransaction/index.tsx
+++ b/src/components/AddTransaction/index.tsx
@@ -43,7 +43,7 @@ export const AddTransaction = () => {
 				className="absolute top-0 w-full bg-shadow min-h-[100dvh]"
 				onClick={() => close()}
 			/>
-			<form className="absolute bottom-0 max-h-[90dvh] z-50 w-full bg-accent rounded-t-lg container-padding overflow-auto">
+			<form className="absolute bottom-0 max-h-[90dvh] z-50 w-full bg-base-100 rounded-t-lg container-padding overflow-auto">
 				<Select
 					label="Tipo de transação"
 					toBeSelectedLabel="Selecione o tipo de transação"
diff --git a/src/components/BudgetCard/index.tsx b/src/components/BudgetCard/index.tsx
index 3616797..a1cd3fc 100644
--- a/src/components/BudgetCard/index.tsx
+++ b/src/components/BudgetCard/index.tsx
@@ -3,7 +3,7 @@
 import { colors } from "assets/colors";
 import { Cell, Pie, PieChart } from "recharts";
 import { MonthBudget } from "types/budget";
-import { formatMoney } from "utils/money";
+import { formatMoney } from "utils/format";
 
 interface Props {
 	budget: MonthBudget;
diff --git a/src/components/ExpensesPerCategory/index.tsx b/src/components/ExpensesPerCategory/index.tsx
index 174ad57..a44a148 100644
--- a/src/components/ExpensesPerCategory/index.tsx
+++ b/src/components/ExpensesPerCategory/index.tsx
@@ -4,7 +4,7 @@ import { categories } from "assets/data";
 import { Icon } from "components/Icon";
 import { MonthBudget } from "types/budget";
 import { getTextColor } from "utils/color";
-import { formatMoney } from "utils/money";
+import { formatMoney } from "utils/format";
 
 interface Props {
 	budget: MonthBudget;
diff --git a/src/components/Footer/NavBar/index.tsx b/src/components/Footer/NavBar/index.tsx
index 2e6a53d..8df761a 100644
--- a/src/components/Footer/NavBar/index.tsx
+++ b/src/components/Footer/NavBar/index.tsx
@@ -2,17 +2,21 @@
 
 import { useAddTransaction } from "contexts/add-transaction";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { BsFillGearFill, BsFillHouseFill } from "react-icons/bs";
 import { FaFileInvoiceDollar, FaPlus } from "react-icons/fa";
 import { PiWalletFill } from "react-icons/pi";
 
 export const NavBar = () => {
+	const pathname = usePathname();
 	const { setActive } = useAddTransaction();
 
 	return (
 		<div className="navbar bg-primary flex justify-around text-3xl">
 			<Link
-				className="tooltip flex flex-col justify-center"
+				className={`tooltip flex flex-col justify-center ${
+					pathname === "/orcamento" ? "text-white" : ""
+				}`}
 				data-tip="Orçamento"
 				href="/orcamento"
 			>
@@ -21,7 +25,9 @@ export const NavBar = () => {
 			</Link>
 
 			<Link
-				className="tooltip flex flex-col justify-center"
+				className={`tooltip flex flex-col justify-center ${
+					pathname === "/" ? "text-white" : ""
+				}`}
 				data-tip="Home"
 				href="/"
 			>
@@ -42,7 +48,9 @@ export const NavBar = () => {
 			</button>
 
 			<Link
-				className="tooltip flex flex-col justify-center"
+				className={`tooltip flex flex-col justify-center ${
+					pathname === "/carteira" ? "text-white" : ""
+				}`}
 				data-tip="Carteira"
 				href="/carteira"
 			>
@@ -51,7 +59,9 @@ export const NavBar = () => {
 			</Link>
 
 			<Link
-				className="tooltip flex flex-col justify-center"
+				className={`tooltip flex flex-col justify-center ${
+					pathname === "/ajustes" ? "text-white" : ""
+				}`}
 				data-tip="Ajustes"
 				href="/ajustes"
 			>
diff --git a/src/components/Inputs/Money/index.tsx b/src/components/Inputs/Money/index.tsx
index 970f76c..7e5fd34 100644
--- a/src/components/Inputs/Money/index.tsx
+++ b/src/components/Inputs/Money/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { formatMoney } from "utils/money";
+import { formatMoney } from "utils/format";
 
 interface Props {
 	label: string;
diff --git a/src/components/StoresCarousel/Chart/index.tsx b/src/components/StoresCarousel/Chart/index.tsx
index f32c16e..202589e 100644
--- a/src/components/StoresCarousel/Chart/index.tsx
+++ b/src/components/StoresCarousel/Chart/index.tsx
@@ -1,5 +1,5 @@
 import { Icon } from "components/Icon";
-import { formatMoney } from "utils/money";
+import { formatMoney } from "utils/format";
 
 interface Props {
 	budget: number;
diff --git a/src/components/TransactionInOut/index.tsx b/src/components/TransactionInOut/index.tsx
index f244229..0d22c0a 100644
--- a/src/components/TransactionInOut/index.tsx
+++ b/src/components/TransactionInOut/index.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { Category } from "types/category";
 import { TransactionTypeEnum } from "types/enums/transaction-type";
 import { TransactionInOut as TransactionInOutType } from "types/transaction";
-import { formatMoney } from "utils/money";
+import { formatMoney } from "utils/format";
 
 interface Props {
 	transaction: TransactionInOutType;
diff --git a/src/components/WalletItem/index.tsx b/src/components/WalletItem/index.tsx
new file mode 100644
index 0000000..e24a16e
--- /dev/null
+++ b/src/components/WalletItem/index.tsx
@@ -0,0 +1,37 @@
+import { MdKeyboardArrowRight } from "react-icons/md";
+
+interface Props {
+	iconUrl: string;
+	name: string;
+	label: string;
+	valueLabel: string;
+	value: string;
+}
+
+export const WalletItem = ({
+	iconUrl,
+	name,
+	label,
+	valueLabel,
+	value,
+}: Props) => {
+	return (
+		<div className="relative grid grid-cols-7 gap-1 items-center bg-accent text-accent-content container-padding rounded">
+			<img src={iconUrl} alt={label} className="w-12 h-full rounded" />
+
+			<div className="flex flex-col col-span-3">
+				<span className="font-semibold">{name}</span>
+				<span className="text-sm">{label}</span>
+			</div>
+
+			<div className="flex flex-col col-span-3">
+				<span className="text-sm">{valueLabel}</span>
+				<span>{value}</span>
+			</div>
+
+			<button className="absolute right-2 top-7 text-2xl flex justify-end">
+				<MdKeyboardArrowRight />
+			</button>
+		</div>
+	);
+};
diff --git a/src/types/card.ts b/src/types/card.ts
index a6ca3cf..31800a1 100644
--- a/src/types/card.ts
+++ b/src/types/card.ts
@@ -23,15 +23,18 @@ export interface Card {
 	type: CardTypeEnum;
 	network: NetworkEnum;
 	name: string;
+	lastFourDigits: string;
 
 	// Credit cards
-	lastFourDigits?: string;
 	dueDay?: number;
 	statementDays?: number;
 	limit?: number;
 	payAt?: PayAtEnum;
 	payWithBankAccountId?: string;
 
-	// Debit, VA, VR
+	// Debit
 	bankAccountId?: string;
+
+	// VA, VR, VT
+	balance?: number;
 }
diff --git a/src/types/enums/card-type.ts b/src/types/enums/card-type.ts
index 36a2427..79b637a 100644
--- a/src/types/enums/card-type.ts
+++ b/src/types/enums/card-type.ts
@@ -3,4 +3,5 @@ export enum CardTypeEnum {
 	"DEBIT" = "DEBIT",
 	"VA" = "VA",
 	"VR" = "VR",
+	"VT" = "VT",
 }
diff --git a/src/utils/money.ts b/src/utils/format.ts
similarity index 50%
rename from src/utils/money.ts
rename to src/utils/format.ts
index c2eb777..5c2537a 100644
--- a/src/utils/money.ts
+++ b/src/utils/format.ts
@@ -4,3 +4,8 @@ const formatter = new Intl.NumberFormat("pt-BR", {
 });
 
 export const formatMoney = (price: number) => formatter.format(price / 100);
+
+export const formatBankAccount = (bankAccount: string) =>
+	`${bankAccount.substring(0, bankAccount.length - 1)}-${bankAccount.substring(
+		bankAccount.length - 1,
+	)}`;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 73fd7ab..2db297b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -24,7 +24,7 @@ module.exports = {
 					"primary-content": "#333333",
 					secondary: "#5838F5",
 					"secondary-content": "#ffffff",
-					accent: "#ffffff",
+					accent: "#f4f4f4",
 					neutral: "#3855F5",
 					"neutral-content": "#ffffff",
 					"base-100": "#ffffff",