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

app/(dashboard)/relatorios/categorias/layout.tsx

@@ -0,0 +1,23 @@
+import PageDescription from "@/components/page-description";
+import { RiFileChartLine } from "@remixicon/react";
+
+export const metadata = {
+  title: "Relatórios | Opensheets",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-6 px-6">
+      <PageDescription
+        icon={<RiFileChartLine />}
+        title="Relatórios de Categorias"
+        subtitle="Acompanhe a evolução dos seus gastos e receitas por categoria ao longo do tempo."
+      />
+      {children}
+    </section>
+  );
+}

app/(dashboard)/relatorios/categorias/loading.tsx

@@ -0,0 +1,9 @@
+import { CategoryReportSkeleton } from "@/components/skeletons/category-report-skeleton";
+
+export default function Loading() {
+  return (
+    <main className="flex flex-col gap-6">
+      <CategoryReportSkeleton />
+    </main>
+  );
+}

app/(dashboard)/relatorios/categorias/page.tsx

@@ -0,0 +1,118 @@
+import { CategoryReportPage } from "@/components/relatorios/category-report-page";
+import { getUserId } from "@/lib/auth/server";
+import { addMonthsToPeriod, getCurrentPeriod } from "@/lib/utils/period";
+import { validateDateRange } from "@/lib/relatorios/utils";
+import { fetchCategoryReport } from "@/lib/relatorios/fetch-category-report";
+import { fetchCategoryChartData } from "@/lib/relatorios/fetch-category-chart-data";
+import type { CategoryReportFilters } from "@/lib/relatorios/types";
+import type {
+  CategoryOption,
+  FilterState,
+} from "@/components/relatorios/types";
+import { db } from "@/lib/db";
+import { categorias, type Categoria } from "@/db/schema";
+import { eq, asc } from "drizzle-orm";
+import { redirect } from "next/navigation";
+
+type PageSearchParams = Promise<Record<string, string | string[] | undefined>>;
+
+type PageProps = {
+  searchParams?: PageSearchParams;
+};
+
+const getSingleParam = (
+  params: Record<string, string | string[] | undefined> | undefined,
+  key: string
+): string | null => {
+  const value = params?.[key];
+  if (!value) return null;
+  return Array.isArray(value) ? value[0] ?? null : value;
+};
+
+export default async function Page({ searchParams }: PageProps) {
+  // Get authenticated user
+  const userId = await getUserId();
+
+  // Resolve search params
+  const resolvedSearchParams = searchParams ? await searchParams : undefined;
+
+  // Extract query params
+  const inicioParam = getSingleParam(resolvedSearchParams, "inicio");
+  const fimParam = getSingleParam(resolvedSearchParams, "fim");
+  const categoriasParam = getSingleParam(resolvedSearchParams, "categorias");
+
+  // Calculate default period (last 6 months)
+  const currentPeriod = getCurrentPeriod();
+  const defaultStartPeriod = addMonthsToPeriod(currentPeriod, -5); // 6 months including current
+
+  // Use params or defaults
+  const startPeriod = inicioParam ?? defaultStartPeriod;
+  const endPeriod = fimParam ?? currentPeriod;
+
+  // Parse selected categories
+  const selectedCategoryIds = categoriasParam
+    ? categoriasParam.split(",").filter(Boolean)
+    : [];
+
+  // Validate date range
+  const validation = validateDateRange(startPeriod, endPeriod);
+  if (!validation.isValid) {
+    // Redirect to default if validation fails
+    redirect(
+      `/relatorios/categorias?inicio=${defaultStartPeriod}&fim=${currentPeriod}`
+    );
+  }
+
+  // Fetch all categories for the user
+  const categoriaRows = await db.query.categorias.findMany({
+    where: eq(categorias.userId, userId),
+    orderBy: [asc(categorias.name)],
+  });
+
+  // Map to CategoryOption format
+  const categoryOptions: CategoryOption[] = categoriaRows.map(
+    (cat: Categoria): CategoryOption => ({
+      id: cat.id,
+      name: cat.name,
+      icon: cat.icon,
+      type: cat.type as "despesa" | "receita",
+    })
+  );
+
+  // Build filters for data fetching
+  const filters: CategoryReportFilters = {
+    startPeriod,
+    endPeriod,
+    categoryIds:
+      selectedCategoryIds.length > 0 ? selectedCategoryIds : undefined,
+  };
+
+  // Fetch report data
+  const reportData = await fetchCategoryReport(userId, filters);
+
+  // Fetch chart data with same filters
+  const chartData = await fetchCategoryChartData(
+    userId,
+    startPeriod,
+    endPeriod,
+    selectedCategoryIds.length > 0 ? selectedCategoryIds : undefined
+  );
+
+  // Build initial filter state for client component
+  const initialFilters: FilterState = {
+    selectedCategories: selectedCategoryIds,
+    startPeriod,
+    endPeriod,
+  };
+
+  return (
+    <main className="flex flex-col gap-6">
+      <CategoryReportPage
+        initialData={reportData}
+        categories={categoryOptions}
+        initialFilters={initialFilters}
+        chartData={chartData}
+      />
+    </main>
+  );
+}