Files
openmonetis/components/sidebar/nav-link.tsx
Felipe Coutinho 4237062bde feat: implementar relatórios de categorias e substituir seleção de período por picker visual
BREAKING CHANGE: Remove feature de seleção de período das preferências do usuário

  Alterações principais:

  - Adiciona sistema completo de relatórios por categoria
    - Cria página /relatorios/categorias com filtros e visualizações
    - Implementa tabela e gráfico de evolução mensal
    - Adiciona funcionalidade de exportação de dados
    - Cria skeleton otimizado para melhor UX de loading

  - Remove feature de seleção de período das preferências
    - Deleta lib/user-preferences/period.ts
    - Remove colunas periodMonthsBefore e periodMonthsAfter do schema
    - Remove todas as referências em 16+ arquivos
    - Atualiza database schema via Drizzle

  - Substitui Select de período por MonthPicker visual
    - Implementa componente PeriodPicker reutilizável
    - Integra shadcn MonthPicker customizado (português, Remix icons)
    - Substitui createMonthOptions em todos os formulários
    - Mantém formato "YYYY-MM" no banco de dados

  - Melhora design da tabela de relatórios
    - Mescla colunas Categoria e Tipo em uma única coluna
    - Substitui badge de tipo por dot colorido discreto
    - Reduz largura da tabela em ~120px
    - Atualiza skeleton para refletir nova estrutura

  - Melhorias gerais de UI
    - Reduz espaçamento entre títulos da sidebar (p-2 → px-2 py-1)
    - Adiciona MonthNavigation para navegação entre períodos
    - Otimiza loading states com skeletons detalhados
2026-01-04 03:03:09 +00:00

179 lines
3.8 KiB
TypeScript

import {
RiArchiveLine,
RiArrowLeftRightLine,
RiBankCardLine,
RiBankLine,
RiCalendarEventLine,
RiDashboardLine,
RiFileChartLine,
RiFundsLine,
RiGroupLine,
RiPriceTag3Line,
RiSettingsLine,
RiSparklingLine,
RiTodoLine,
type RemixiconComponentType,
} from "@remixicon/react";
export type SidebarSubItem = {
title: string;
url: string;
avatarUrl?: string | null;
isShared?: boolean;
key?: string;
icon?: RemixiconComponentType;
};
export type SidebarItem = {
title: string;
url: string;
icon: RemixiconComponentType;
isActive?: boolean;
items?: SidebarSubItem[];
};
export type SidebarSection = {
title: string;
items: SidebarItem[];
};
export type SidebarNavData = {
navMain: SidebarSection[];
navSecondary: {
title: string;
url: string;
icon: RemixiconComponentType;
}[];
};
export interface PagadorLike {
id: string;
name: string | null;
avatarUrl: string | null;
canEdit?: boolean;
}
export function createSidebarNavData(pagadores: PagadorLike[]): SidebarNavData {
const pagadorItems = pagadores
.map((pagador) => ({
title: pagador.name?.trim().length
? pagador.name.trim()
: "Pagador sem nome",
url: `/pagadores/${pagador.id}`,
key: pagador.canEdit ? pagador.id : `${pagador.id}-shared`,
isShared: !pagador.canEdit,
avatarUrl: pagador.avatarUrl,
}))
.sort((a, b) =>
a.title.localeCompare(b.title, "pt-BR", { sensitivity: "base" })
);
const pagadorItemsWithHistory: SidebarSubItem[] = pagadorItems;
return {
navMain: [
{
title: "Visão Geral",
items: [
{
title: "Dashboard",
url: "/dashboard",
icon: RiDashboardLine,
},
],
},
{
title: "Gestão Financeira",
items: [
{
title: "Lançamentos",
url: "/lancamentos",
icon: RiArrowLeftRightLine,
},
{
title: "Calendário",
url: "/calendario",
icon: RiCalendarEventLine,
},
{
title: "Cartões",
url: "/cartoes",
icon: RiBankCardLine,
},
{
title: "Contas",
url: "/contas",
icon: RiBankLine,
},
{
title: "Orçamentos",
url: "/orcamentos",
icon: RiFundsLine,
},
],
},
{
title: "Organização",
items: [
{
title: "Pagadores",
url: "/pagadores",
icon: RiGroupLine,
items: pagadorItemsWithHistory,
},
{
title: "Categorias",
url: "/categorias",
icon: RiPriceTag3Line,
},
],
},
{
title: "Análise e Anotações",
items: [
{
title: "Anotações",
url: "/anotacoes",
icon: RiTodoLine,
items: [
{
title: "Arquivadas",
url: "/anotacoes/arquivadas",
key: "anotacoes-arquivadas",
icon: RiArchiveLine,
},
],
},
{
title: "Insights",
url: "/insights",
icon: RiSparklingLine,
},
],
},
{
title: "Relatórios",
items: [
{
title: "Categorias",
url: "/relatorios/categorias",
icon: RiFileChartLine,
},
],
},
],
navSecondary: [
// {
// title: "Changelog",
// url: "/changelog",
// icon: RiGitCommitLine,
// },
{
title: "Ajustes",
url: "/ajustes",
icon: RiSettingsLine,
},
],
};
}