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

components/pagadores/details/pagador-monthly-summary-card.tsx

@@ -0,0 +1,119 @@
+import MoneyValues from "@/components/money-values";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { PagadorMonthlyBreakdown } from "@/lib/pagadores/details";
+import { cn } from "@/lib/utils/ui";
+import type { CSSProperties } from "react";
+
+const segmentConfig = {
+  card: {
+    label: "Cartões",
+    color: "bg-violet-500",
+  },
+  boleto: {
+    label: "Boletos",
+    color: "bg-amber-500",
+  },
+  instant: {
+    label: "Pix/Débito/Dinheiro",
+    color: "bg-emerald-500",
+  },
+} as const;
+
+type PagadorMonthlySummaryCardProps = {
+  periodLabel: string;
+  breakdown: PagadorMonthlyBreakdown;
+};
+
+export function PagadorMonthlySummaryCard({
+  periodLabel,
+  breakdown,
+}: PagadorMonthlySummaryCardProps) {
+  const splittableEntries = (
+    Object.keys(segmentConfig) as Array<keyof typeof segmentConfig>
+  ).map((key) => ({
+    key,
+    ...segmentConfig[key],
+    value: breakdown.paymentSplits[key],
+  }));
+
+  const totalBase = splittableEntries.reduce(
+    (sum, entry) => sum + entry.value,
+    0
+  );
+
+  let offset = 0;
+
+  return (
+    <Card className="border">
+      <CardHeader className="flex flex-col gap-1.5 pb-4">
+        <CardTitle className="text-lg font-semibold">Totais do mês</CardTitle>
+        <p className="text-xs text-muted-foreground">
+          {periodLabel} • despesas por forma de pagamento
+        </p>
+      </CardHeader>
+
+      <CardContent className="space-y-4 pt-0">
+        <div className="space-y-2">
+          <div>
+            <span className="text-[11px] uppercase tracking-wide text-muted-foreground">
+              Total gasto no mês
+            </span>
+            <MoneyValues
+              amount={breakdown.totalExpenses}
+              className="block text-2xl font-semibold text-foreground"
+            />
+          </div>
+
+          <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-muted">
+            {splittableEntries.map((entry) => {
+              const percent =
+                totalBase > 0
+                  ? Math.max((entry.value / totalBase) * 100, 0)
+                  : 0;
+              const style: CSSProperties = {
+                width: `${percent}%`,
+                left: `${offset}%`,
+              };
+              offset += percent;
+              return (
+                <span
+                  key={entry.key}
+                  className={cn(
+                    "absolute inset-y-0 rounded-full transition-all",
+                    entry.color
+                  )}
+                  style={style}
+                />
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="grid gap-3 sm:grid-cols-3">
+          {splittableEntries.map((entry) => {
+            const percent =
+              totalBase > 0 ? Math.round((entry.value / totalBase) * 100) : 0;
+            return (
+              <div key={entry.key} className="space-y-1 rounded-lg border p-3">
+                <span className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/70">
+                  <span
+                    className={cn("size-2 rounded-full", entry.color)}
+                    aria-hidden
+                  />
+                  {entry.label}
+                </span>
+                <MoneyValues
+                  amount={entry.value}
+                  className="block text-lg font-semibold text-foreground"
+                />
+                <span className="text-xs text-muted-foreground">
+                  {percent}% das despesas
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}