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
2025-11-15 15:49:36 -03:00
commit ea0b8618e0
441 changed files with 53569 additions and 0 deletions
--- a/components/dashboard/payment-methods-widget.tsx
+++ b/components/dashboard/payment-methods-widget.tsx
@@ -0,0 +1,87 @@
+import MoneyValues from "@/components/money-values";
+import type { PaymentMethodsData } from "@/lib/dashboard/payments/payment-methods";
+import { getPaymentMethodIcon } from "@/lib/utils/icons";
+import { RiBankCardLine, RiMoneyDollarCircleLine } from "@remixicon/react";
+import { Progress } from "../ui/progress";
+import { WidgetEmptyState } from "../widget-empty-state";
+
+type PaymentMethodsWidgetProps = {
+  data: PaymentMethodsData;
+};
+
+const ICON_WRAPPER_CLASS =
+  "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground";
+
+const formatPercentage = (value: number) =>
+  new Intl.NumberFormat("pt-BR", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 1,
+  }).format(value);
+
+const resolveIcon = (paymentMethod: string | null | undefined) => {
+  if (!paymentMethod) {
+    return <RiMoneyDollarCircleLine className="size-5" aria-hidden />;
+  }
+
+  const icon = getPaymentMethodIcon(paymentMethod);
+  if (icon) {
+    return icon;
+  }
+
+  return <RiBankCardLine className="size-5" aria-hidden />;
+};
+
+export function PaymentMethodsWidget({ data }: PaymentMethodsWidgetProps) {
+  if (data.methods.length === 0) {
+    return (
+      <WidgetEmptyState
+        icon={
+          <RiMoneyDollarCircleLine className="size-6 text-muted-foreground" />
+        }
+        title="Nenhuma despesa encontrada"
+        description="Cadastre despesas para visualizar a distribuição por forma de pagamento."
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4 px-0">
+      <ul className="flex flex-col gap-2">
+        {data.methods.map((method) => {
+          const icon = resolveIcon(method.paymentMethod);
+          const percentageLabel = formatPercentage(method.percentage);
+
+          return (
+            <li
+              key={method.paymentMethod}
+              className="flex items-center gap-3 border-b border-dashed pb-4 last:border-b-0 last:pb-0"
+            >
+              <div className={ICON_WRAPPER_CLASS}>{icon}</div>
+
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center justify-between gap-3">
+                  <p className="font-medium text-foreground text-sm">
+                    {method.paymentMethod}
+                  </p>
+                  <MoneyValues amount={method.amount} />
+                </div>
+
+                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                  <span>
+                    {method.transactions}{" "}
+                    {method.transactions === 1 ? "lançamento" : "lançamentos"}
+                  </span>
+                  <span>{percentageLabel}%</span>
+                </div>
+
+                <div className="mt-1">
+                  <Progress value={method.percentage} />
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}