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

components/relatorios/category-cell.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { formatCurrency, formatPercentageChange } from "@/lib/relatorios/utils";
+import { RiArrowDownLine, RiArrowUpLine } from "@remixicon/react";
+import { cn } from "@/lib/utils/ui";
+
+interface CategoryCellProps {
+    value: number;
+    previousValue: number;
+    categoryType: "despesa" | "receita";
+    isFirstMonth: boolean;
+}
+
+export function CategoryCell({
+    value,
+    previousValue,
+    categoryType,
+    isFirstMonth,
+}: CategoryCellProps) {
+    const percentageChange =
+        !isFirstMonth && previousValue !== 0
+            ? ((value - previousValue) / previousValue) * 100
+            : null;
+
+    const isIncrease = percentageChange !== null && percentageChange > 0;
+    const isDecrease = percentageChange !== null && percentageChange < 0;
+
+    return (
+        <div className="flex flex-col items-end gap-0.5">
+            <span className="font-medium">{formatCurrency(value)}</span>
+            {!isFirstMonth && percentageChange !== null && (
+                <div
+                    className={cn(
+                        "flex items-center gap-0.5 text-xs",
+                        isIncrease && "text-red-600 dark:text-red-400",
+                        isDecrease && "text-green-600 dark:text-green-400"
+                    )}
+                >
+                    {isIncrease && <RiArrowUpLine className="h-3 w-3" />}
+                    {isDecrease && <RiArrowDownLine className="h-3 w-3" />}
+                    <span>{formatPercentageChange(percentageChange)}</span>
+                </div>
+            )}
+        </div>
+    );
+}