feat: adição de novos ícones SVG e configuração do ambiente

- Adicionados ícones SVG para ChatGPT, Claude, Gemini e OpenRouter
- Implementados ícones para modos claro e escuro do ChatGPT
- Criado script de inicialização para PostgreSQL com extensão pgcrypto
- Adicionado script de configuração de ambiente que faz backup do .env
- Configurado tsconfig.json para TypeScript com opções de compilação

app/(dashboard)/categorias/[categoryId]/page.tsx

@@ -0,0 +1,115 @@
+import { getRecentEstablishmentsAction } from "@/app/(dashboard)/lancamentos/actions";
+import { CategoryDetailHeader } from "@/components/categorias/category-detail-header";
+import { LancamentosPage } from "@/components/lancamentos/page/lancamentos-page";
+import MonthPicker from "@/components/month-picker/month-picker";
+import { fetchCategoryDetails } from "@/lib/dashboard/categories/category-details";
+import { getUserId } from "@/lib/auth/server";
+import {
+  buildOptionSets,
+  buildSluggedFilters,
+  fetchLancamentoFilterSources,
+} from "@/lib/lancamentos/page-helpers";
+import { parsePeriodParam } from "@/lib/utils/period";
+import { notFound } from "next/navigation";
+
+type PageSearchParams = Promise<Record<string, string | string[] | undefined>>;
+
+type PageProps = {
+  params: Promise<{ categoryId: string }>;
+  searchParams?: PageSearchParams;
+};
+
+const getSingleParam = (
+  params: Record<string, string | string[] | undefined> | undefined,
+  key: string
+) => {
+  const value = params?.[key];
+  if (!value) return null;
+  return Array.isArray(value) ? value[0] ?? null : value;
+};
+
+const formatPeriodLabel = (period: string) => {
+  const [yearStr, monthStr] = period.split("-");
+  const year = Number.parseInt(yearStr ?? "", 10);
+  const monthIndex = Number.parseInt(monthStr ?? "", 10) - 1;
+
+  if (Number.isNaN(year) || Number.isNaN(monthIndex) || monthIndex < 0) {
+    return period;
+  }
+
+  const date = new Date(year, monthIndex, 1);
+  const label = date.toLocaleDateString("pt-BR", {
+    month: "long",
+    year: "numeric",
+  });
+
+  return label.charAt(0).toUpperCase() + label.slice(1);
+};
+
+export default async function Page({ params, searchParams }: PageProps) {
+  const { categoryId } = await params;
+  const userId = await getUserId();
+  const resolvedSearchParams = searchParams ? await searchParams : undefined;
+
+  const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
+  const { period: selectedPeriod } = parsePeriodParam(periodoParam);
+
+  const [detail, filterSources, estabelecimentos] = await Promise.all([
+    fetchCategoryDetails(userId, categoryId, selectedPeriod),
+    fetchLancamentoFilterSources(userId),
+    getRecentEstablishmentsAction(),
+  ]);
+
+  if (!detail) {
+    notFound();
+  }
+
+  const sluggedFilters = buildSluggedFilters(filterSources);
+  const {
+    pagadorOptions,
+    splitPagadorOptions,
+    defaultPagadorId,
+    contaOptions,
+    cartaoOptions,
+    categoriaOptions,
+    pagadorFilterOptions,
+    categoriaFilterOptions,
+    contaCartaoFilterOptions,
+  } = buildOptionSets({
+    ...sluggedFilters,
+    pagadorRows: filterSources.pagadorRows,
+  });
+
+  const currentPeriodLabel = formatPeriodLabel(detail.period);
+  const previousPeriodLabel = formatPeriodLabel(detail.previousPeriod);
+
+  return (
+    <main className="flex flex-col gap-6">
+      <MonthPicker />
+      <CategoryDetailHeader
+        category={detail.category}
+        currentPeriodLabel={currentPeriodLabel}
+        previousPeriodLabel={previousPeriodLabel}
+        currentTotal={detail.currentTotal}
+        previousTotal={detail.previousTotal}
+        percentageChange={detail.percentageChange}
+        transactionCount={detail.transactions.length}
+      />
+      <LancamentosPage
+        lancamentos={detail.transactions}
+        pagadorOptions={pagadorOptions}
+        splitPagadorOptions={splitPagadorOptions}
+        defaultPagadorId={defaultPagadorId}
+        contaOptions={contaOptions}
+        cartaoOptions={cartaoOptions}
+        categoriaOptions={categoriaOptions}
+        pagadorFilterOptions={pagadorFilterOptions}
+        categoriaFilterOptions={categoriaFilterOptions}
+        contaCartaoFilterOptions={contaCartaoFilterOptions}
+        selectedPeriod={detail.period}
+        estabelecimentos={estabelecimentos}
+        allowCreate={true}
+      />
+    </main>
+  );
+}

app/(dashboard)/categorias/actions.ts

@@ -0,0 +1,176 @@
+"use server";
+
+import { categorias } from "@/db/schema";
+import {
+  type ActionResult,
+  handleActionError,
+  revalidateForEntity,
+} from "@/lib/actions/helpers";
+import { getUser } from "@/lib/auth/server";
+import { CATEGORY_TYPES } from "@/lib/categorias/constants";
+import { db } from "@/lib/db";
+import { uuidSchema } from "@/lib/schemas/common";
+import { normalizeIconInput } from "@/lib/utils/string";
+import { and, eq } from "drizzle-orm";
+import { z } from "zod";
+
+const categoryBaseSchema = z.object({
+  name: z
+    .string({ message: "Informe o nome da categoria." })
+    .trim()
+    .min(1, "Informe o nome da categoria."),
+  type: z.enum(CATEGORY_TYPES, {
+    message: "Tipo de categoria inválido.",
+  }),
+  icon: z
+    .string()
+    .trim()
+    .max(100, "O ícone deve ter no máximo 100 caracteres.")
+    .nullish()
+    .transform((value) => normalizeIconInput(value)),
+});
+
+const createCategorySchema = categoryBaseSchema;
+const updateCategorySchema = categoryBaseSchema.extend({
+  id: uuidSchema("Categoria"),
+});
+const deleteCategorySchema = z.object({
+  id: uuidSchema("Categoria"),
+});
+
+type CategoryCreateInput = z.infer<typeof createCategorySchema>;
+type CategoryUpdateInput = z.infer<typeof updateCategorySchema>;
+type CategoryDeleteInput = z.infer<typeof deleteCategorySchema>;
+
+export async function createCategoryAction(
+  input: CategoryCreateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = createCategorySchema.parse(input);
+
+    await db.insert(categorias).values({
+      name: data.name,
+      type: data.type,
+      icon: data.icon,
+      userId: user.id,
+    });
+
+    revalidateForEntity("categorias");
+
+    return { success: true, message: "Categoria criada com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function updateCategoryAction(
+  input: CategoryUpdateInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = updateCategorySchema.parse(input);
+
+    // Buscar categoria antes de atualizar para verificar restrições
+    const categoria = await db.query.categorias.findFirst({
+      columns: { id: true, name: true },
+      where: and(eq(categorias.id, data.id), eq(categorias.userId, user.id)),
+    });
+
+    if (!categoria) {
+      return {
+        success: false,
+        error: "Categoria não encontrada.",
+      };
+    }
+
+    // Bloquear edição das categorias protegidas
+    const categoriasProtegidas = [
+      "Transferência interna",
+      "Saldo inicial",
+      "Pagamentos",
+    ];
+    if (categoriasProtegidas.includes(categoria.name)) {
+      return {
+        success: false,
+        error: `A categoria '${categoria.name}' é protegida e não pode ser editada.`,
+      };
+    }
+
+    const [updated] = await db
+      .update(categorias)
+      .set({
+        name: data.name,
+        type: data.type,
+        icon: data.icon,
+      })
+      .where(and(eq(categorias.id, data.id), eq(categorias.userId, user.id)))
+      .returning();
+
+    if (!updated) {
+      return {
+        success: false,
+        error: "Categoria não encontrada.",
+      };
+    }
+
+    revalidateForEntity("categorias");
+
+    return { success: true, message: "Categoria atualizada com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}
+
+export async function deleteCategoryAction(
+  input: CategoryDeleteInput
+): Promise<ActionResult> {
+  try {
+    const user = await getUser();
+    const data = deleteCategorySchema.parse(input);
+
+    // Buscar categoria antes de deletar para verificar restrições
+    const categoria = await db.query.categorias.findFirst({
+      columns: { id: true, name: true },
+      where: and(eq(categorias.id, data.id), eq(categorias.userId, user.id)),
+    });
+
+    if (!categoria) {
+      return {
+        success: false,
+        error: "Categoria não encontrada.",
+      };
+    }
+
+    // Bloquear remoção das categorias protegidas
+    const categoriasProtegidas = [
+      "Transferência interna",
+      "Saldo inicial",
+      "Pagamentos",
+    ];
+    if (categoriasProtegidas.includes(categoria.name)) {
+      return {
+        success: false,
+        error: `A categoria '${categoria.name}' é protegida e não pode ser removida.`,
+      };
+    }
+
+    const [deleted] = await db
+      .delete(categorias)
+      .where(and(eq(categorias.id, data.id), eq(categorias.userId, user.id)))
+      .returning({ id: categorias.id });
+
+    if (!deleted) {
+      return {
+        success: false,
+        error: "Categoria não encontrada.",
+      };
+    }
+
+    revalidateForEntity("categorias");
+
+    return { success: true, message: "Categoria removida com sucesso." };
+  } catch (error) {
+    return handleActionError(error);
+  }
+}

app/(dashboard)/categorias/data.ts

@@ -0,0 +1,26 @@
+import type { CategoryType } from "@/components/categorias/types";
+import { categorias, type Categoria } from "@/db/schema";
+import { db } from "@/lib/db";
+import { eq } from "drizzle-orm";
+
+export type CategoryData = {
+  id: string;
+  name: string;
+  type: CategoryType;
+  icon: string | null;
+};
+
+export async function fetchCategoriesForUser(
+  userId: string
+): Promise<CategoryData[]> {
+  const categoryRows = await db.query.categorias.findMany({
+    where: eq(categorias.userId, userId),
+  });
+
+  return categoryRows.map((category: Categoria) => ({
+    id: category.id,
+    name: category.name,
+    type: category.type as CategoryType,
+    icon: category.icon,
+  }));
+}

app/(dashboard)/categorias/layout.tsx

@@ -0,0 +1,23 @@
+import PageDescription from "@/components/page-description";
+import { RiPriceTag3Line } from "@remixicon/react";
+
+export const metadata = {
+  title: "Categorias | OpenSheets",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-6 px-6">
+      <PageDescription
+        icon={<RiPriceTag3Line />}
+        title="Categorias"
+        subtitle="Gerencie suas categorias de despesas e receitas. Acompanhe o desempenho financeiro por categoria e faça ajustes conforme necessário."
+      />
+      {children}
+    </section>
+  );
+}

app/(dashboard)/categorias/loading.tsx

@@ -0,0 +1,61 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Loading state para a página de categorias
+ * Layout: Header + Tabs + Grid de cards
+ */
+export default function CategoriasLoading() {
+  return (
+    <main className="flex flex-col items-start gap-6">
+      <div className="w-full space-y-6">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
+          <Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
+        </div>
+
+        {/* Tabs */}
+        <div className="space-y-4">
+          <div className="flex gap-2 border-b">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <Skeleton
+                key={i}
+                className="h-10 w-32 rounded-t-2xl bg-foreground/10"
+              />
+            ))}
+          </div>
+
+          {/* Grid de cards de categorias */}
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {Array.from({ length: 8 }).map((_, i) => (
+              <div
+                key={i}
+                className="rounded-2xl border p-6 space-y-4"
+              >
+                {/* Ícone + Nome */}
+                <div className="flex items-center gap-3">
+                  <Skeleton className="size-12 rounded-2xl bg-foreground/10" />
+                  <div className="flex-1 space-y-2">
+                    <Skeleton className="h-5 w-full rounded-2xl bg-foreground/10" />
+                    <Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
+                  </div>
+                </div>
+
+                {/* Descrição */}
+                {i % 3 === 0 && (
+                  <Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+                )}
+
+                {/* Botões de ação */}
+                <div className="flex gap-2 pt-2 border-t">
+                  <Skeleton className="h-9 flex-1 rounded-2xl bg-foreground/10" />
+                  <Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

app/(dashboard)/categorias/page.tsx

@@ -0,0 +1,14 @@
+import { CategoriesPage } from "@/components/categorias/categories-page";
+import { getUserId } from "@/lib/auth/server";
+import { fetchCategoriesForUser } from "./data";
+
+export default async function Page() {
+  const userId = await getUserId();
+  const categories = await fetchCategoriesForUser(userId);
+
+  return (
+    <main className="flex flex-col items-start gap-6">
+      <CategoriesPage categories={categories} />
+    </main>
+  );
+}