Skip to content

[FEAT] to [MAIN] - funcionalidade de cartão de crédito e transações #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
titorm merged 8 commits into from
Mar 2, 2026
Merged

[FEAT] to [MAIN] - funcionalidade de cartão de crédito e transações #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3c70419
feat: implement transactions feature with schema, UI and actions
titorm Feb 28, 2026
4bbf1b4
feat: seed categories, update category selector and fix currency alig…
titorm Feb 28, 2026
3b3abe4
feat: implement credit cards and robust transactions filtering
titorm Mar 2, 2026
ffe26a1
feat: move current month filter to transactions and add limit usage p…
titorm Mar 2, 2026
7fc6f74
fix: clean up transaction form on open
titorm Mar 2, 2026
3902eb4
feat: enable editing and deleting transactions
titorm Mar 2, 2026
b73acae
fix(lint): resolve lint errors across components
titorm Mar 2, 2026
1bbfadb
feat/fix: update transaction defaults and remove credit card from acc…
titorm Mar 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"@supabase/ssr": "^0.8.0",
"@supabase/supabase-js": "^2.39.0",
"clsx": "^2.1.0",
"date-fns": "^4.1.0",
"framer-motion": "^12.34.3",
"lucide-react": "^0.575.0",
"next": "16.1.6",
Expand Down
8 changes: 8 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

77 changes: 15 additions & 62 deletions src/app/(app)/accounts/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,22 +60,6 @@ const MOCK_GIRO = [
},
];

const MOCK_CREDIT = [
{
id: "4",
name: "Cartão Platinum",
institution: "Nubank",
category: "credit" as const,
balance: 0,
creditLimit: 12000,
creditUsed: 3450.9,
creditClosingDays: 4,
colorHex: "#8A05BE",
lastSyncedAt: new Date(Date.now() - 86400000 * 2), // 2 days ago
members: [{ id: "u1", name: "Você", role: "owner" as const }],
},
];

const MOCK_VAULT = [
{
id: "5",
Expand Down Expand Up @@ -156,8 +140,6 @@ export default function AccountsPage() {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [giroAccounts, setGiroAccounts] = useState<any[]>([]);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [creditAccounts, setCreditAccounts] = useState<any[]>([]);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [vaultAccounts, setVaultAccounts] = useState<any[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [isSeeding, setIsSeeding] = useState(false);
Expand All @@ -176,11 +158,9 @@ export default function AccountsPage() {
colorHex: account.color_hex || "#8A05BE",
lastSyncedAt: new Date(account.updated_at),
members: [{ id: "u1", name: "Você", role: "owner" as const }],
creditUsed: account.category === "credit" ? 0 : undefined,
}));

setGiroAccounts(mapped.filter((a) => ["checking", "wallet"].includes(a.category)));
setCreditAccounts(mapped.filter((a) => ["credit"].includes(a.category)));
setVaultAccounts(mapped.filter((a) => ["savings", "vault"].includes(a.category)));
}
if (isMounted) setIsLoading(false);
Expand All @@ -192,8 +172,7 @@ export default function AccountsPage() {
}, []);

const totalGiro = giroAccounts.reduce((acc, curr) => acc + curr.balance, 0);
const totalCreditBills = creditAccounts.reduce((acc, curr) => acc + (curr.creditUsed || 0), 0);
const realLiquidity = totalGiro - totalCreditBills;
const realLiquidity = totalGiro;

const totalReserves = vaultAccounts.reduce((acc, curr) => acc + curr.balance, 0);

Expand Down Expand Up @@ -227,7 +206,7 @@ export default function AccountsPage() {
e.preventDefault();
setDragOverId(null);
if (draggedAccountId && draggedAccountId !== targetId) {
const tempAll = [...giroAccounts, ...creditAccounts, ...vaultAccounts];
const tempAll = [...giroAccounts, ...vaultAccounts];
const targetAccount = tempAll.find((a) => a.id === targetId);

if (targetAccount?.category === "credit") {
Expand All @@ -244,7 +223,7 @@ export default function AccountsPage() {
};

// Combine all mock data to find specific accounts for the transfer modal
const ALL_ACCOUNTS = [...giroAccounts, ...creditAccounts, ...vaultAccounts];
const ALL_ACCOUNTS = [...giroAccounts, ...vaultAccounts];

const handleTransferValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value.replace(/\D/g, "");
Expand All @@ -268,7 +247,6 @@ export default function AccountsPage() {

const updateBalance = (id: string, amount: number) => {
setGiroAccounts((prev) => prev.map((a) => (a.id === id ? { ...a, balance: a.balance + amount } : a)));
setCreditAccounts((prev) => prev.map((a) => (a.id === id ? { ...a, balance: a.balance + amount } : a)));
setVaultAccounts((prev) => prev.map((a) => (a.id === id ? { ...a, balance: a.balance + amount } : a)));
};

Expand All @@ -287,7 +265,6 @@ export default function AccountsPage() {
const mapUpdate = (prev: any[]) =>
prev.map((a) => (a.id === id ? { ...a, ...updates, colorHex: updates.color_hex || a.colorHex } : a));
setGiroAccounts(mapUpdate);
setCreditAccounts(mapUpdate);
setVaultAccounts(mapUpdate);
}
};
Expand All @@ -296,7 +273,6 @@ export default function AccountsPage() {
const res = await deleteAccountAction(id);
if (res.success) {
setGiroAccounts((prev) => prev.filter((a) => a.id !== id));
setCreditAccounts((prev) => prev.filter((a) => a.id !== id));
setVaultAccounts((prev) => prev.filter((a) => a.id !== id));
}
};
Expand All @@ -310,6 +286,7 @@ export default function AccountsPage() {
balance: newAccount.balance || 0,
color_hex: newAccount.colorHex,
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const res = await createAccountAction(accountInsert as any);

if (res.success && res.data) {
Expand All @@ -324,8 +301,6 @@ export default function AccountsPage() {
dbAccount.category === "wallet"
) {
setGiroAccounts((prev) => [...prev, dbAccount]);
} else if (dbAccount.category === "credit") {
setCreditAccounts((prev) => [...prev, dbAccount]);
} else if (dbAccount.category === "vault") {
setVaultAccounts((prev) => [...prev, dbAccount]);
}
Expand All @@ -334,14 +309,15 @@ export default function AccountsPage() {

const handleSeedData = async () => {
setIsSeeding(true);
const defaults = [...MOCK_GIRO, ...MOCK_CREDIT, ...MOCK_VAULT];
const defaults = [...MOCK_GIRO, ...MOCK_VAULT];
for (const acc of defaults) {
await createAccountAction({
name: acc.name,
institution: acc.institution,
category: acc.category,
balance: acc.balance || 0,
color_hex: acc.colorHex,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} as any);
}
window.location.reload();
Expand All @@ -364,21 +340,17 @@ export default function AccountsPage() {
subtitle="Liquidez Imediata"
className="mb-16"
title={<span className="tabular-nums tracking-tight">{formatCurrency(realLiquidity)}</span>}
badge="Livre de faturas fechadas"
action={
<div className="flex gap-4 items-center">
{!isLoading &&
giroAccounts.length === 0 &&
creditAccounts.length === 0 &&
vaultAccounts.length === 0 && (
<button
onClick={handleSeedData}
disabled={isSeeding}
className="flex items-center gap-2 bg-zinc-800 text-zinc-300 px-6 py-3 rounded-xl font-semibold hover:bg-zinc-700 hover:text-white transition-all w-full md:w-auto justify-center disabled:opacity-50"
>
{isSeeding ? "Populando..." : "Popular Teste"}
</button>
)}
{!isLoading && giroAccounts.length === 0 && vaultAccounts.length === 0 && (
<button
onClick={handleSeedData}
disabled={isSeeding}
className="flex items-center gap-2 bg-zinc-800 text-zinc-300 px-6 py-3 rounded-xl font-semibold hover:bg-zinc-700 hover:text-white transition-all w-full md:w-auto justify-center disabled:opacity-50"
>
{isSeeding ? "Populando..." : "Popular Teste"}
</button>
)}
<button
onClick={() => setIsCreateModalOpen(true)}
className="flex items-center gap-2 bg-primary text-primary-foreground px-6 py-3 rounded-xl font-semibold hover:bg-primary/90 transition-all shadow-[0_0_20px_rgba(34,197,94,0.2)] hover:shadow-[0_0_30px_rgba(34,197,94,0.4)] w-full md:w-auto justify-center group"
Expand Down Expand Up @@ -416,25 +388,6 @@ export default function AccountsPage() {
))}
</AccountSection>

<AccountSection title="Passivos Circulantes">
{creditAccounts.map((account) => (
<div
key={account.id}
className={cn("transition-transform", dragOverId === account.id && "scale-105 opacity-80")}
>
<AccountCard
{...account}
onClick={() => setSelectedAccount(account)}
draggable
onDragStart={(e) => handleDragStart(e, account.id)}
onDragOver={(e) => handleDragOver(e, account.id)}
onDragLeave={handleDragLeave}
onDrop={(e) => handleDrop(e, account.id)}
/>
</div>
))}
</AccountSection>

<AccountSection title="Reservas e Cofres" defaultOpen={false}>
{vaultAccounts.map((account) => (
<div
Expand Down
Loading
Loading