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
This commit is contained in:
Felipe Coutinho
2026-01-04 03:03:09 +00:00
parent d192f47bc7
commit 4237062bde
54 changed files with 2987 additions and 472 deletions

View File

@@ -355,48 +355,3 @@ export function derivePeriodFromDate(value?: string | null): string {
return formatPeriod(date.getFullYear(), date.getMonth() + 1);
}
// ============================================================================
// SELECT OPTIONS GENERATION
// ============================================================================
export type SelectOption = {
value: string;
label: string;
};
/**
* Creates month options for a select dropdown, centered around current month
* @param currentValue - Current period value to ensure it's included in options
* @param monthsBefore - Number of months before current month (default: 3)
* @param monthsAfter - Number of months after current month (default: same as monthsBefore)
* @returns Array of select options with formatted labels
* @example
* createMonthOptions() // -3 to +3
* createMonthOptions(undefined, 3) // -3 to +3
* createMonthOptions(undefined, 3, 6) // -3 to +6
*/
export function createMonthOptions(
currentValue?: string,
monthsBefore: number = 3,
monthsAfter?: number
): SelectOption[] {
const now = new Date();
const options: SelectOption[] = [];
const after = monthsAfter ?? monthsBefore; // If not specified, use same as before
for (let offset = -monthsBefore; offset <= after; offset += 1) {
const date = new Date(now.getFullYear(), now.getMonth() + offset, 1);
const value = formatPeriod(date.getFullYear(), date.getMonth() + 1);
options.push({ value, label: displayPeriod(value) });
}
// Include current value if not already in options
if (currentValue && !options.some((option) => option.value === currentValue)) {
options.push({
value: currentValue,
label: displayPeriod(currentValue),
});
}
return options.sort((a, b) => a.value.localeCompare(b.value));
}