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/lancamentos/dialogs/lancamento-dialog/basic-fields-section.tsx

@@ -2,13 +2,7 @@
 
 import { Label } from "@/components/ui/label";
 import { DatePicker } from "@/components/ui/date-picker";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { PeriodPicker } from "@/components/period-picker";
 import { CurrencyInput } from "@/components/ui/currency-input";
 import { CalculatorDialogButton } from "@/components/calculadora/calculator-dialog";
 import { RiCalculatorLine } from "@remixicon/react";
@@ -19,8 +13,7 @@ export function BasicFieldsSection({
   formState,
   onFieldChange,
   estabelecimentos,
-  monthOptions,
-}: BasicFieldsSectionProps) {
+}: Omit<BasicFieldsSectionProps, "monthOptions">) {
   return (
     <>
       <div className="flex w-full flex-col gap-2 md:flex-row">
@@ -37,21 +30,11 @@ export function BasicFieldsSection({
 
         <div className="w-1/2 space-y-1">
           <Label htmlFor="period">Período</Label>
-          <Select
+          <PeriodPicker
             value={formState.period}
-            onValueChange={(value) => onFieldChange("period", value)}
-          >
-            <SelectTrigger id="period" className="w-full">
-              <SelectValue placeholder="Selecione" />
-            </SelectTrigger>
-            <SelectContent>
-              {monthOptions.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+            onChange={(value) => onFieldChange("period", value)}
+            className="w-full"
+          />
         </div>
       </div>
 

components/lancamentos/dialogs/lancamento-dialog/lancamento-dialog-types.ts

@@ -1,5 +1,4 @@
 import type { LancamentoFormState } from "@/lib/lancamentos/form-helpers";
-import type { PeriodPreferences } from "@/lib/user-preferences/period";
 import type { LancamentoItem, SelectOption } from "../../types";
 
 export type FormState = LancamentoFormState;
@@ -18,7 +17,6 @@ export interface LancamentoDialogProps {
   estabelecimentos: string[];
   lancamento?: LancamentoItem;
   defaultPeriod?: string;
-  periodPreferences: PeriodPreferences;
   defaultCartaoId?: string | null;
   defaultPaymentMethod?: string | null;
   defaultPurchaseDate?: string | null;
@@ -48,7 +46,6 @@ export interface BaseFieldSectionProps {
 
 export interface BasicFieldsSectionProps extends BaseFieldSectionProps {
   estabelecimentos: string[];
-  monthOptions: Array<{ value: string; label: string }>;
 }
 
 export interface CategorySectionProps extends BaseFieldSectionProps {

components/lancamentos/dialogs/lancamento-dialog/lancamento-dialog.tsx

@@ -22,7 +22,6 @@ import {
   applyFieldDependencies,
   buildLancamentoInitialState,
 } from "@/lib/lancamentos/form-helpers";
-import { createMonthOptions } from "@/lib/utils/period";
 import {
   useCallback,
   useEffect,
@@ -58,7 +57,6 @@ export function LancamentoDialog({
   estabelecimentos,
   lancamento,
   defaultPeriod,
-  periodPreferences,
   defaultCartaoId,
   defaultPaymentMethod,
   defaultPurchaseDate,
@@ -125,15 +123,6 @@ export function LancamentoDialog({
     return groupAndSortCategorias(filtered);
   }, [categoriaOptions, formState.transactionType]);
 
-  const monthOptions = useMemo(
-    () =>
-      createMonthOptions(
-        formState.period,
-        periodPreferences.monthsBefore,
-        periodPreferences.monthsAfter
-      ),
-    [formState.period, periodPreferences.monthsBefore, periodPreferences.monthsAfter]
-  );
 
   const handleFieldChange = useCallback(
     <Key extends keyof FormState>(key: Key, value: FormState[Key]) => {
@@ -352,7 +341,6 @@ export function LancamentoDialog({
             formState={formState}
             onFieldChange={handleFieldChange}
             estabelecimentos={estabelecimentos}
-            monthOptions={monthOptions}
           />
 
           <CategorySection