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:
@@ -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 };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user