Add Wallet

.eslintrc.json

@@ -29,6 +29,7 @@
 				"groups": ["module", ["parent", "sibling", "index"]],
 				"alphabetize": { "order": "asc", "ignoreCase": true }
 			}
-		]
+		],
+		"@next/next/no-img-element": "off"
 	}
 }

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;

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;

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

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"

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;

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;

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"
 			>

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;

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;

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;

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

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

src/types/enums/card-type.ts

@@ -3,4 +3,5 @@ export enum CardTypeEnum {
 	"DEBIT" = "DEBIT",
 	"VA" = "VA",
 	"VR" = "VR",
+	"VT" = "VT",
 }

src/utils/money.ts → 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,
+	)}`;

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",