Add Account Page

econominhas · Nov 14, 2023 · 9299441 · 9299441
1 parent 13c6bc8
commit 9299441
Show file tree

Hide file tree

Showing 17 changed files with 363 additions and 72 deletions.
diff --git a/src/app/(public)/ajustes/page.tsx b/src/app/(public)/ajustes/page.tsx
diff --git a/src/app/(public)/cartao/[cardId]/page.tsx b/src/app/(public)/cartao/[cardId]/page.tsx
@@ -1,6 +1,6 @@
 import { cards } from "assets/data";
 import { Header } from "components/Header";
-import { BsFillTrashFill, BsPencilFill } from "react-icons/bs";
+import { Icon } from "components/Icon";
 import { CardTypeEnum } from "types/enums/card-type";
 import { formatMoney } from "utils/format";
 
@@ -46,11 +46,11 @@ const Card = ({ params }: Props) => {
 				</div>
 
 				<button className="w-full btn">
-					<BsPencilFill />
+					<Icon icon="pencil" />
 					Editar cartão
 				</button>
 				<button className="w-full btn btn-error">
-					<BsFillTrashFill />
+					<Icon icon="trashcan" />
 					Excluir
 				</button>
 			</main>

diff --git a/src/app/(public)/carteira/page.tsx b/src/app/(public)/carteira/page.tsx
@@ -5,10 +5,10 @@ import {
 	cards as cardsData,
 } from "assets/data";
 import { Header } from "components/Header";
+import { Icon } from "components/Icon";
 import { Space } from "components/Space";
 import { WalletItem } from "components/WalletItem";
 import Link from "next/link";
-import { PiPlusCircleBold } from "react-icons/pi";
 import { PostpaidCard, PrepaidCard } from "types/card";
 import { CardTypeEnum } from "types/enums/card-type";
 import { formatBankAccountNumber } from "utils/format";
@@ -72,7 +72,7 @@ const Wallet = () => {
 						))}
 
 						<Link href="/adicionar-conta" className="btn">
-							<PiPlusCircleBold /> Adicionar nova conta
+							<Icon icon="pluscircle" /> Adicionar nova conta
 						</Link>
 					</div>
 				</section>
@@ -103,7 +103,7 @@ const Wallet = () => {
 							href={`/adicionar-cartao?type=${CardTypeEnum.POSTPAID}`}
 							className="btn"
 						>
-							<PiPlusCircleBold /> Adicionar novo cartão
+							<Icon icon="pluscircle" /> Adicionar novo cartão
 						</Link>
 					</div>
 				</section>
@@ -134,7 +134,7 @@ const Wallet = () => {
 							href={`/adicionar-cartao?type=${CardTypeEnum.PREPAID}`}
 							className="btn"
 						>
-							<PiPlusCircleBold /> Adicionar novo vale
+							<Icon icon="pluscircle" /> Adicionar novo vale
 						</Link>
 					</div>
 				</section>

diff --git a/src/app/(public)/conta-bancaria/[bankAccountId]/page.tsx b/src/app/(public)/conta-bancaria/[bankAccountId]/page.tsx
@@ -1,6 +1,6 @@
 import { bankAccounts } from "assets/data";
 import { Header } from "components/Header";
-import { BsFillTrashFill, BsPencilFill } from "react-icons/bs";
+import { Icon } from "components/Icon";
 import { formatBankAccountNumber, formatMoney } from "utils/format";
 
 interface Props {
@@ -34,11 +34,11 @@ const BankAccount = ({ params }: Props) => {
 				</div>
 
 				<button className="w-full btn">
-					<BsPencilFill />
+					<Icon icon="pencil" />
 					Editar conta bancária
 				</button>
 				<button className="w-full btn btn-error">
-					<BsFillTrashFill />
+					<Icon icon="trashcan" />
 					Excluir
 				</button>
 			</main>

diff --git a/src/app/(public)/conta/page.tsx b/src/app/(public)/conta/page.tsx
@@ -0,0 +1,171 @@
+import {
+	bankAccounts,
+	cards,
+	categories,
+	plans,
+	transactions,
+} from "assets/data";
+import { Header } from "components/Header";
+import { Icon } from "components/Icon";
+import { Space } from "components/Space";
+import Link from "next/link";
+import { CardTypeEnum } from "types/enums/card-type";
+
+const premiumBenefits = [
+	{
+		title: "Contas bancárias ilimitadas",
+		description: "Adicione quantas contas bancárias quiser",
+		icon: "bank",
+	},
+	{
+		title: "Cartões de crédito ilimitados",
+		description: "Adicione quantos cartões de crédito quiser",
+		icon: "card",
+	},
+	{
+		title: "Vales ilimitados",
+		description: "Adicione quantos vales quiser",
+		icon: "ticket",
+	},
+	{
+		title: "Categorias ilimitados",
+		description: "Adicione quantas categorias quiser",
+		icon: "category",
+	},
+	{
+		title: "Gere relatórios",
+		description:
+			"Gere relatórios dos seus gastos, orçamentos e muito mais, em diversos formatos",
+		icon: "pdf",
+	},
+	{
+		title: "Tags",
+		description: "Adicione tags as suas transações",
+		icon: "tag",
+	},
+	{
+		title: "Lembretes",
+		description: "Receba lembretes para pagar suas contas",
+		icon: "bell",
+	},
+	{
+		title: "(Em breve) Integração com bancos",
+		description:
+			"Integre suas contas bancárias para anotar seus gastos automaticamente",
+		icon: "connect",
+	},
+];
+
+const Account = () => {
+	return (
+		<>
+			<Header title="Conta" />
+
+			<main className="min-h-[100dvh] w-full flex flex-col container-padding">
+				<section>
+					<h2 className="font-bold text-lg text-center">Resumo da sua conta</h2>
+
+					<div className="flex flex-col gap-1 px-4">
+						<span>
+							Contas: {Object.keys(bankAccounts).length}/
+							{plans.free.limits.bankAccounts}
+						</span>
+						<span>
+							Cartões de crédito:{" "}
+							{
+								Object.values(cards).filter(
+									(c) => c.type === CardTypeEnum.POSTPAID,
+								).length
+							}
+							/{plans.free.limits.postpaidCard}
+						</span>
+						<span>
+							Vales:{" "}
+							{
+								Object.values(cards).filter(
+									(c) => c.type === CardTypeEnum.PREPAID,
+								).length
+							}
+							/{plans.free.limits.prepaidCard}
+						</span>
+						<span>
+							Categorias: {Object.keys(categories).length}/
+							{plans.free.limits.categories}
+						</span>
+						<span>
+							Transações: {transactions.length}/
+							{plans.free.limits.transactionsPerMonth}
+						</span>
+						<span>
+							Transações recorrentes: {0}/
+							{plans.free.limits.recurrentTransactions}
+						</span>
+					</div>
+				</section>
+
+				<Space />
+
+				<section>
+					<h2 className="font-bold text-lg text-center">
+						Desbloqueie os benefícios premium
+					</h2>
+
+					<Space />
+
+					<div className="flex flex-col gap-2">
+						{premiumBenefits.map(({ title, description, icon }) => (
+							<div key={title} className="flex flex-row items-center gap-2">
+								<Icon icon={icon} size={6} className="mx-4" />
+
+								<div>
+									<span className="font-bold">{title}</span>
+									<p className="text-sm">{description}</p>
+								</div>
+							</div>
+						))}
+					</div>
+
+					<Space />
+
+					<Link
+						href="/premium"
+						className="btn btn-secondary w-full pointer-events-none"
+					>
+						<Icon icon="crown" className="text-yellow" />
+						Seja premium
+					</Link>
+				</section>
+
+				<div className="divider" />
+
+				<section className="flex flex-col gap-2">
+					<Link
+						href="/logout"
+						className="btn btn-error w-full pointer-events-none"
+					>
+						<Icon icon="logout" />
+						Logout
+					</Link>
+					<Link
+						href="/termos-de-uso"
+						className="btn btn-ghost w-full pointer-events-none"
+					>
+						Termos de uso
+					</Link>
+					<Link
+						href="/politica-de-privacidade"
+						className="btn btn-ghost w-full pointer-events-none"
+					>
+						Politica de privacidade
+					</Link>
+				</section>
+
+				<Space />
+				<Space />
+				<Space />
+			</main>
+		</>
+	);
+};
+
+export default Account;
diff --git a/src/app/(public)/login/page.tsx b/src/app/(public)/login/page.tsx
@@ -1,6 +1,5 @@
+import { Icon } from "components/Icon";
 import Link from "next/link";
-import { FcGoogle } from "react-icons/fc";
-import { MdEmail, MdLocalPhone } from "react-icons/md";
 
 const GOOGLE_LINK_AUTH = process.env["GOOGLE_LINK_AUTH"];
 
@@ -19,7 +18,7 @@ const Auth = () => {
 					className="btn btn-google w-full normal-case"
 					href={GOOGLE_LINK_AUTH || "#"}
 				>
-					<FcGoogle className="mr-2" />
+					<Icon icon="google" className="mr-2" />
 					Continuar com Google
 				</Link>
 				<div className="divider">OU</div>
@@ -30,7 +29,7 @@ const Auth = () => {
 						className="btn btn-primary w-full normal-case"
 						href="/login/e-mail"
 					>
-						<MdEmail className="mr-2" />
+						<Icon icon="email" className="mr-2" />
 						Continuar com E-mail
 					</Link>
 					<Link
@@ -39,7 +38,7 @@ const Auth = () => {
 						className="btn btn-secondary w-full normal-case"
 						href="/login/telefone"
 					>
-						<MdLocalPhone className="mr-2" />
+						<Icon icon="phone" className="mr-2" />
 						Continuar com Telefone
 					</Link>
 				</div>

diff --git a/src/app/(public)/orcamento/page.tsx b/src/app/(public)/orcamento/page.tsx
@@ -6,6 +6,7 @@ import { Icon } from "components/Icon";
 import { NoBudget } from "components/NoBudget";
 import { Space } from "components/Space";
 import { useCurrentBudget } from "contexts/current-budget";
+import Link from "next/link";
 import { PieChart, Pie, Cell } from "recharts";
 import { getTextColor } from "utils/color";
 import { getMonthsArray, getYear } from "utils/date";
@@ -147,8 +148,8 @@ const Budget = () => {
 							}))}
 							width={250}
 							height={250}
-							cx="50%"
-							cy="50%"
+							startAngle={89}
+							endAngle={360 + 89}
 							outerRadius={100}
 							fill="#8884d8"
 							dataKey="value"
@@ -199,6 +200,13 @@ const Budget = () => {
 						</tbody>
 					</table>
 				</section>
+
+				<Space />
+
+				<Link href="/categorias" className="btn w-full">
+					<Icon icon="pencil" />
+					Editar categorias
+				</Link>
 			</main>
 		</>
 	);

diff --git a/src/assets/data.ts b/src/assets/data.ts
@@ -6,6 +6,7 @@ import { CardTypeEnum } from "types/enums/card-type";
 import { NetworkEnum } from "types/enums/network";
 import { PayAtEnum } from "types/enums/pay-at";
 import { TransactionTypeEnum } from "types/enums/transaction-type";
+import { Plan } from "types/plan";
 import { TransactionInOut, TransactionTransfer } from "types/transaction";
 
 export const transactions: Array<TransactionInOut | TransactionTransfer> = [
@@ -293,3 +294,32 @@ export const cards: Record<string, Card> = {
 		balance: 1000,
 	},
 };
+
+export const plans: Record<string, Plan> = {
+	free: {
+		planId: "free",
+		name: "Gratuito",
+		icon: "ad",
+		limits: {
+			bankAccounts: 1,
+			postpaidCard: 1,
+			prepaidCard: 0,
+			categories: 10,
+			transactionsPerMonth: 100,
+			recurrentTransactions: 0,
+		},
+	},
+	premium: {
+		planId: "premium",
+		name: "Premium",
+		icon: "crown",
+		limits: {
+			bankAccounts: 1,
+			postpaidCard: 1,
+			prepaidCard: 0,
+			categories: 10,
+			transactionsPerMonth: 100,
+			recurrentTransactions: 0,
+		},
+	},
+};