feat: topbar de navegação como experimento de UI (v1.7.0)

- Substitui header fixo por topbar com backdrop blur e navegação agrupada em 5 seções
- Adiciona FerramentasDropdown consolidando calculadora e modo privacidade
- NotificationBell expandida com orçamentos e pré-lançamentos
- Remove logout-button, header-dashboard e privacy-mode-toggle como componentes separados
- Logo refatorado com variante compact; topbar com links em lowercase
- Adiciona dependência radix-ui ^1.4.3
- Atualiza CHANGELOG para v1.7.0

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-02-24 15:43:14 +00:00
parent af7dd6f737
commit 1b90be6b54
54 changed files with 1492 additions and 787 deletions

View File

@@ -1,11 +1,11 @@
import { format } from "date-fns";
import { ptBR } from "date-fns/locale";
import { and, eq, inArray, isNull, or, sql } from "drizzle-orm";
import { categorias, lancamentos, pagadores } from "@/db/schema";
import { categorias, lancamentos } from "@/db/schema";
import { ACCOUNT_AUTO_INVOICE_NOTE_PREFIX } from "@/lib/accounts/constants";
import { toNumber } from "@/lib/dashboard/common";
import { db } from "@/lib/db";
import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
import { getAdminPagadorId } from "@/lib/pagadores/get-admin-id";
import { generatePeriodRange } from "./utils";
export type CategoryChartData = {
@@ -34,14 +34,17 @@ export async function fetchCategoryChartData(
endPeriod: string,
categoryIds?: string[],
): Promise<CategoryChartData> {
// Generate all periods in the range
const periods = generatePeriodRange(startPeriod, endPeriod);
// Build WHERE conditions
const adminPagadorId = await getAdminPagadorId(userId);
if (!adminPagadorId) {
return { months: [], categories: [], chartData: [], allCategories: [] };
}
const whereConditions = [
eq(lancamentos.userId, userId),
eq(lancamentos.pagadorId, adminPagadorId),
inArray(lancamentos.period, periods),
eq(pagadores.role, PAGADOR_ROLE_ADMIN),
or(eq(categorias.type, "despesa"), eq(categorias.type, "receita")),
or(
isNull(lancamentos.note),
@@ -49,46 +52,42 @@ export async function fetchCategoryChartData(
),
];
// Add optional category filter
if (categoryIds && categoryIds.length > 0) {
whereConditions.push(inArray(categorias.id, categoryIds));
}
// Query to get aggregated data by category and period
const rows = await db
.select({
categoryId: categorias.id,
categoryName: categorias.name,
categoryIcon: categorias.icon,
categoryType: categorias.type,
period: lancamentos.period,
total: sql<number>`coalesce(sum(abs(${lancamentos.amount})), 0)`,
})
.from(lancamentos)
.innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
.innerJoin(categorias, eq(lancamentos.categoriaId, categorias.id))
.where(and(...whereConditions))
.groupBy(
categorias.id,
categorias.name,
categorias.icon,
categorias.type,
lancamentos.period,
);
const [rows, allCategoriesRows] = await Promise.all([
db
.select({
categoryId: categorias.id,
categoryName: categorias.name,
categoryIcon: categorias.icon,
categoryType: categorias.type,
period: lancamentos.period,
total: sql<number>`coalesce(sum(abs(${lancamentos.amount})), 0)`,
})
.from(lancamentos)
.innerJoin(categorias, eq(lancamentos.categoriaId, categorias.id))
.where(and(...whereConditions))
.groupBy(
categorias.id,
categorias.name,
categorias.icon,
categorias.type,
lancamentos.period,
),
db
.select({
id: categorias.id,
name: categorias.name,
icon: categorias.icon,
type: categorias.type,
})
.from(categorias)
.where(eq(categorias.userId, userId))
.orderBy(categorias.type, categorias.name),
]);
// Fetch all categories for the user (for category selection)
const allCategoriesRows = await db
.select({
id: categorias.id,
name: categorias.name,
icon: categorias.icon,
type: categorias.type,
})
.from(categorias)
.where(eq(categorias.userId, userId))
.orderBy(categorias.type, categorias.name);
// Map all categories
const allCategories = allCategoriesRows.map(
(cat: { id: string; name: string; icon: string | null; type: string }) => ({
id: cat.id,
@@ -98,7 +97,6 @@ export async function fetchCategoryChartData(
}),
);
// Process results into chart format
const categoryMap = new Map<
string,
{
@@ -110,7 +108,6 @@ export async function fetchCategoryChartData(
}
>();
// Process each row
for (const row of rows) {
const amount = Math.abs(toNumber(row.total));
const { categoryId, categoryName, categoryIcon, categoryType, period } =
@@ -126,37 +123,31 @@ export async function fetchCategoryChartData(
});
}
const categoryItem = categoryMap.get(categoryId)!;
categoryItem.dataByPeriod.set(period, amount);
categoryMap.get(categoryId)!.dataByPeriod.set(period, amount);
}
// Build chart data
const chartData = periods.map((period) => {
const [year, month] = period.split("-");
const date = new Date(parseInt(year, 10), parseInt(month, 10) - 1, 1);
const date = new Date(Number.parseInt(year, 10), Number.parseInt(month, 10) - 1, 1);
const monthLabel = format(date, "MMM", { locale: ptBR }).toUpperCase();
const dataPoint: { month: string; [key: string]: number | string } = {
month: monthLabel,
};
// Add data for each category
for (const category of categoryMap.values()) {
const value = category.dataByPeriod.get(period) ?? 0;
dataPoint[category.name] = value;
dataPoint[category.name] = category.dataByPeriod.get(period) ?? 0;
}
return dataPoint;
});
// Generate month labels
const months = periods.map((period) => {
const [year, month] = period.split("-");
const date = new Date(parseInt(year, 10), parseInt(month, 10) - 1, 1);
const date = new Date(Number.parseInt(year, 10), Number.parseInt(month, 10) - 1, 1);
return format(date, "MMM", { locale: ptBR }).toUpperCase();
});
// Build categories array
const categories = Array.from(categoryMap.values()).map((cat) => ({
id: cat.id,
name: cat.name,
@@ -164,10 +155,5 @@ export async function fetchCategoryChartData(
type: cat.type,
}));
return {
months,
categories,
chartData,
allCategories,
};
return { months, categories, chartData, allCategories };
}