forked from git.gladyson/openmonetis
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
This commit is contained in:
Felipe Coutinho
90
components/pagadores/details/pagador-card-usage-card.tsx
Normal file
90
components/pagadores/details/pagador-card-usage-card.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import MoneyValues from "@/components/money-values";
|
||||
import { WidgetEmptyState } from "@/components/widget-empty-state";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import type { PagadorCardUsageItem } from "@/lib/pagadores/details";
|
||||
import { RiBankCardLine } from "@remixicon/react";
|
||||
import Image from "next/image";
|
||||
|
||||
const resolveLogoPath = (logo?: string | null) => {
|
||||
if (!logo) return null;
|
||||
if (
|
||||
logo.startsWith("http://") ||
|
||||
logo.startsWith("https://") ||
|
||||
logo.startsWith("data:")
|
||||
) {
|
||||
return logo;
|
||||
}
|
||||
return logo.startsWith("/") ? logo : `/logos/${logo}`;
|
||||
};
|
||||
|
||||
type PagadorCardUsageCardProps = {
|
||||
items: PagadorCardUsageItem[];
|
||||
};
|
||||
|
||||
export function PagadorCardUsageCard({ items }: PagadorCardUsageCardProps) {
|
||||
return (
|
||||
<Card className="border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-semibold">
|
||||
Cartões utilizados
|
||||
</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Valores por cartão neste período (inclui logo quando disponível).
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-3 pt-2">
|
||||
{items.length === 0 ? (
|
||||
<WidgetEmptyState
|
||||
icon={<RiBankCardLine className="size-6 text-muted-foreground" />}
|
||||
title="Nenhum lançamento com cartão de crédito"
|
||||
description="Quando houver despesas registradas com cartão, elas aparecerão aqui."
|
||||
/>
|
||||
) : (
|
||||
<ul className="space-y-3">
|
||||
{items.map((item) => {
|
||||
const logoPath = resolveLogoPath(item.logo);
|
||||
return (
|
||||
<li
|
||||
key={item.id}
|
||||
className="flex items-center justify-between gap-3 rounded-xl border border-border/80 px-4 py-3"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{logoPath ? (
|
||||
<span className="flex size-10 items-center justify-center overflow-hidden rounded-lg border border-border/60 bg-background">
|
||||
<Image
|
||||
src={logoPath}
|
||||
alt={`Logo ${item.name}`}
|
||||
width={40}
|
||||
height={40}
|
||||
className="h-full w-full object-contain"
|
||||
/>
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex size-10 items-center justify-center rounded-lg bg-muted text-xs font-semibold uppercase text-muted-foreground">
|
||||
{item.name.slice(0, 2)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium text-foreground">
|
||||
{item.name}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Despesas no mês
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<MoneyValues
|
||||
amount={item.amount}
|
||||
className="text-lg font-semibold text-foreground"
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
107
components/pagadores/details/pagador-history-card.tsx
Normal file
107
components/pagadores/details/pagador-history-card.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
"use client";
|
||||
|
||||
import { WidgetEmptyState } from "@/components/widget-empty-state";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/components/ui/chart";
|
||||
import type { PagadorHistoryPoint } from "@/lib/pagadores/details";
|
||||
import { RiBarChartLine } from "@remixicon/react";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
LabelList,
|
||||
type LabelProps,
|
||||
XAxis,
|
||||
} from "recharts";
|
||||
import { currencyFormatter } from "@/lib/lancamentos/formatting-helpers";
|
||||
|
||||
const chartConfig = {
|
||||
despesas: {
|
||||
label: "Despesas",
|
||||
color: "hsl(356, 72%, 50%)",
|
||||
},
|
||||
};
|
||||
|
||||
type PagadorHistoryCardProps = {
|
||||
data: PagadorHistoryPoint[];
|
||||
};
|
||||
|
||||
const ValueLabel = (props: LabelProps) => {
|
||||
const { x, y, value, width } = props;
|
||||
if (typeof x !== "number" || typeof y !== "number" || width === undefined) {
|
||||
return null;
|
||||
}
|
||||
const labelX = x + (Number(width) ?? 0) / 2;
|
||||
const amount =
|
||||
typeof value === "number" ? currencyFormatter.format(value) : value;
|
||||
const labelY = Math.max(y - 6, 12);
|
||||
return (
|
||||
<text
|
||||
x={labelX}
|
||||
y={labelY}
|
||||
fill="currentColor"
|
||||
textAnchor="middle"
|
||||
className="text-[11px] font-semibold text-muted-foreground"
|
||||
>
|
||||
{amount}
|
||||
</text>
|
||||
);
|
||||
};
|
||||
|
||||
export function PagadorHistoryCard({ data }: PagadorHistoryCardProps) {
|
||||
const hasData = data.length > 0;
|
||||
|
||||
return (
|
||||
<Card className="border">
|
||||
<CardHeader className="gap-1.5 pb-3">
|
||||
<CardTitle className="text-lg font-semibold">
|
||||
Evolução (últimos 6 meses)
|
||||
</CardTitle>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Despesas registradas para este pagador ao longo do tempo.
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="pt-0">
|
||||
{hasData ? (
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="mx-auto flex h-[210px] w-full max-w-[520px] items-center justify-center aspect-auto"
|
||||
>
|
||||
<BarChart
|
||||
data={data}
|
||||
barCategoryGap={16}
|
||||
margin={{ top: 28, right: 8, left: 8, bottom: 0 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} />
|
||||
<XAxis
|
||||
dataKey="label"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
/>
|
||||
<ChartTooltip content={<ChartTooltipContent />} />
|
||||
<Bar
|
||||
dataKey="despesas"
|
||||
fill="var(--color-despesas)"
|
||||
radius={[6, 6, 0, 0]}
|
||||
>
|
||||
<LabelList dataKey="despesas" content={<ValueLabel />} />
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
) : (
|
||||
<WidgetEmptyState
|
||||
icon={<RiBarChartLine className="size-6 text-muted-foreground" />}
|
||||
title="Sem dados para exibir"
|
||||
description="Ainda não há movimentações suficientes para gerar este gráfico."
|
||||
/>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
407
components/pagadores/details/pagador-info-card.tsx
Normal file
407
components/pagadores/details/pagador-info-card.tsx
Normal file
@@ -0,0 +1,407 @@
|
||||
"use client";
|
||||
|
||||
import { sendPagadorSummaryAction } from "@/app/(dashboard)/pagadores/[pagadorId]/actions";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
|
||||
import { getAvatarSrc } from "@/lib/pagadores/utils";
|
||||
import { cn } from "@/lib/utils/ui";
|
||||
import {
|
||||
RiMailLine,
|
||||
RiMailSendLine,
|
||||
RiUser3Line,
|
||||
RiVerifiedBadgeFill,
|
||||
} from "@remixicon/react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useMemo, useState, useTransition, type ReactNode } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
type PagadorInfo = {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string | null;
|
||||
avatarUrl: string | null;
|
||||
status: string;
|
||||
note: string | null;
|
||||
role: string | null;
|
||||
isAutoSend: boolean;
|
||||
createdAt: string;
|
||||
lastMailAt: string | null;
|
||||
shareCode: string | null;
|
||||
canEdit: boolean;
|
||||
};
|
||||
|
||||
type PagadorSummaryPreview = {
|
||||
periodLabel: string;
|
||||
totalExpenses: number;
|
||||
paymentSplits: {
|
||||
card: number;
|
||||
boleto: number;
|
||||
instant: number;
|
||||
};
|
||||
cardUsage: { name: string; amount: number }[];
|
||||
boletoStats: {
|
||||
totalAmount: number;
|
||||
paidAmount: number;
|
||||
pendingAmount: number;
|
||||
paidCount: number;
|
||||
pendingCount: number;
|
||||
};
|
||||
lancamentoCount: number;
|
||||
};
|
||||
|
||||
type PagadorInfoCardProps = {
|
||||
pagador: PagadorInfo;
|
||||
selectedPeriod: string;
|
||||
summary: PagadorSummaryPreview;
|
||||
};
|
||||
|
||||
export function PagadorInfoCard({
|
||||
pagador,
|
||||
selectedPeriod,
|
||||
summary,
|
||||
}: PagadorInfoCardProps) {
|
||||
const router = useRouter();
|
||||
const [isSending, startTransition] = useTransition();
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
|
||||
const avatarSrc = getAvatarSrc(pagador.avatarUrl);
|
||||
const createdAtLabel = formatDate(pagador.createdAt);
|
||||
const isAdmin = pagador.role === PAGADOR_ROLE_ADMIN;
|
||||
|
||||
const lastMailLabel = useMemo(() => {
|
||||
if (!pagador.lastMailAt) {
|
||||
return "Nunca enviado";
|
||||
}
|
||||
const date = new Date(pagador.lastMailAt);
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return "Nunca enviado";
|
||||
}
|
||||
return date.toLocaleString("pt-BR", {
|
||||
dateStyle: "short",
|
||||
timeStyle: "short",
|
||||
});
|
||||
}, [pagador.lastMailAt]);
|
||||
|
||||
const disableSend = isSending || !pagador.email || !pagador.canEdit;
|
||||
|
||||
const openConfirmDialog = () => {
|
||||
if (!pagador.email) {
|
||||
toast.error("Cadastre um e-mail para este pagador antes de enviar.");
|
||||
return;
|
||||
}
|
||||
setConfirmOpen(true);
|
||||
};
|
||||
|
||||
const handleSendSummary = () => {
|
||||
if (!pagador.email) {
|
||||
toast.error("Cadastre um e-mail para este pagador antes de enviar.");
|
||||
return;
|
||||
}
|
||||
|
||||
startTransition(async () => {
|
||||
const result = await sendPagadorSummaryAction({
|
||||
pagadorId: pagador.id,
|
||||
period: selectedPeriod,
|
||||
});
|
||||
|
||||
if (!result.success) {
|
||||
toast.error(result.error);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success(result.message);
|
||||
setConfirmOpen(false);
|
||||
router.refresh();
|
||||
});
|
||||
};
|
||||
|
||||
const getStatusBadgeVariant = (status: string): "success" | "secondary" => {
|
||||
const normalizedStatus = status.toLowerCase();
|
||||
if (normalizedStatus === "ativo") {
|
||||
return "success";
|
||||
}
|
||||
return "outline";
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="border gap-4">
|
||||
<CardHeader className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div className="flex flex-1 items-start gap-4">
|
||||
<div className="relative flex size-16 shrink-0 items-center justify-center overflow-hidden">
|
||||
<Image
|
||||
src={avatarSrc}
|
||||
alt={`Avatar de ${pagador.name}`}
|
||||
width={64}
|
||||
height={64}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-1">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<CardTitle className="text-xl font-semibold text-foreground">
|
||||
{pagador.name}
|
||||
</CardTitle>
|
||||
{isAdmin ? (
|
||||
<RiVerifiedBadgeFill
|
||||
className="size-4 text-sky-500"
|
||||
aria-hidden
|
||||
/>
|
||||
) : null}
|
||||
{pagador.isAutoSend ? (
|
||||
<RiMailSendLine
|
||||
className="size-4 text-primary"
|
||||
aria-label="Envio automático habilitado"
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Criado em {createdAtLabel}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col items-stretch gap-2 lg:w-auto lg:items-end">
|
||||
{pagador.canEdit ? (
|
||||
<>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={openConfirmDialog}
|
||||
disabled={disableSend}
|
||||
className="w-full min-w-[180px] lg:w-auto"
|
||||
>
|
||||
{isSending ? "Enviando..." : "Enviar resumo"}
|
||||
</Button>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Último envio: {lastMailLabel}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-xs font-medium text-amber-600">
|
||||
Acesso somente leitura
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="grid gap-4 border-t border-dashed border-border/60 pt-6 text-sm sm:grid-cols-2">
|
||||
<InfoItem
|
||||
label="E-mail"
|
||||
value={
|
||||
pagador.email ? (
|
||||
<Link
|
||||
prefetch
|
||||
href={`mailto:${pagador.email}`}
|
||||
className="inline-flex items-center gap-2 text-primary"
|
||||
>
|
||||
<RiMailLine className="size-4" aria-hidden />
|
||||
{pagador.email}
|
||||
</Link>
|
||||
) : (
|
||||
"—"
|
||||
)
|
||||
}
|
||||
/>
|
||||
<InfoItem
|
||||
label="Status"
|
||||
value={
|
||||
<Badge
|
||||
variant={getStatusBadgeVariant(pagador.status)}
|
||||
className="text-xs"
|
||||
>
|
||||
{pagador.status}
|
||||
</Badge>
|
||||
}
|
||||
/>
|
||||
|
||||
<InfoItem
|
||||
label="Papel"
|
||||
value={
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<RiUser3Line className="size-4 text-muted-foreground" />
|
||||
{resolveRoleLabel(pagador.role)}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
<InfoItem
|
||||
label="Envio automático"
|
||||
value={pagador.isAutoSend ? "Ativado" : "Desativado"}
|
||||
/>
|
||||
{!pagador.email ? (
|
||||
<InfoItem
|
||||
label="Aviso"
|
||||
value={
|
||||
<span className="text-[13px] text-amber-700">
|
||||
Cadastre um e-mail para permitir o envio automático.
|
||||
</span>
|
||||
}
|
||||
className="sm:col-span-2"
|
||||
/>
|
||||
) : null}
|
||||
<InfoItem
|
||||
label="Observações"
|
||||
value={
|
||||
pagador.note ? (
|
||||
<span className="text-muted-foreground">{pagador.note}</span>
|
||||
) : (
|
||||
"—"
|
||||
)
|
||||
}
|
||||
className="sm:col-span-2"
|
||||
/>
|
||||
</CardContent>
|
||||
|
||||
{pagador.canEdit ? (
|
||||
<Dialog
|
||||
open={confirmOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (isSending) return;
|
||||
setConfirmOpen(open);
|
||||
}}
|
||||
>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Confirmar envio do resumo</DialogTitle>
|
||||
<DialogDescription>
|
||||
O resumo de{" "}
|
||||
<span className="font-semibold text-foreground">
|
||||
{summary.periodLabel}
|
||||
</span>{" "}
|
||||
será enviado para{" "}
|
||||
<span className="font-medium text-foreground">
|
||||
{pagador.email ?? "—"}
|
||||
</span>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-3 rounded-lg border border-dashed border-border/70 bg-muted/30 p-4 text-sm text-muted-foreground">
|
||||
<div>
|
||||
<span className="text-xs font-semibold uppercase text-muted-foreground/70">
|
||||
Totais do mês
|
||||
</span>
|
||||
<p className="text-foreground">
|
||||
{formatCurrency(summary.totalExpenses)} em despesas
|
||||
registradas
|
||||
</p>
|
||||
<p className="text-xs">
|
||||
Cartões: {formatCurrency(summary.paymentSplits.card)} •
|
||||
Boletos: {formatCurrency(summary.paymentSplits.boleto)} •
|
||||
Pix/Débito/Dinheiro:{" "}
|
||||
{formatCurrency(summary.paymentSplits.instant)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span className="text-xs font-semibold uppercase text-muted-foreground/70">
|
||||
Principais cartões
|
||||
</span>
|
||||
<p>
|
||||
{summary.cardUsage.length
|
||||
? summary.cardUsage
|
||||
.map(
|
||||
(item) =>
|
||||
`${item.name}: ${formatCurrency(item.amount)}`
|
||||
)
|
||||
.join(" • ")
|
||||
: "Sem lançamentos com cartão no período."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-border/60 p-3">
|
||||
<div className="space-y-1">
|
||||
<span className="text-xs font-semibold uppercase text-muted-foreground/70">
|
||||
Boletos
|
||||
</span>
|
||||
<p>
|
||||
Pagos: {formatCurrency(summary.boletoStats.paidAmount)} (
|
||||
{summary.boletoStats.paidCount})
|
||||
</p>
|
||||
<p>
|
||||
Pendentes:{" "}
|
||||
{formatCurrency(summary.boletoStats.pendingAmount)} (
|
||||
{summary.boletoStats.pendingCount})
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>Inclui {summary.lancamentoCount} lançamentos.</span>
|
||||
<span>Último envio: {lastMailLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={isSending}
|
||||
onClick={() => setConfirmOpen(false)}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSendSummary}
|
||||
disabled={disableSend}
|
||||
>
|
||||
{isSending ? "Enviando..." : "Confirmar envio"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
) : null}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const formatDate = (value: string) => {
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return "—";
|
||||
return date.toLocaleDateString("pt-BR", {
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
const resolveRoleLabel = (role: string | null) => {
|
||||
if (role === PAGADOR_ROLE_ADMIN) return "Administrador";
|
||||
return "Pagador";
|
||||
};
|
||||
|
||||
const formatCurrency = (value: number) =>
|
||||
value.toLocaleString("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
|
||||
type InfoItemProps = {
|
||||
label: string;
|
||||
value: ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function InfoItem({ label, value, className }: InfoItemProps) {
|
||||
return (
|
||||
<div className={cn("space-y-1", className)}>
|
||||
<span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground/80">
|
||||
{label}
|
||||
</span>
|
||||
<div className="text-base text-foreground">{value}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
119
components/pagadores/details/pagador-monthly-summary-card.tsx
Normal file
119
components/pagadores/details/pagador-monthly-summary-card.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
106
components/pagadores/details/pagador-payment-method-cards.tsx
Normal file
106
components/pagadores/details/pagador-payment-method-cards.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import MoneyValues from "@/components/money-values";
|
||||
import { WidgetEmptyState } from "@/components/widget-empty-state";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import type { PagadorBoletoStats } from "@/lib/pagadores/details";
|
||||
import { cn } from "@/lib/utils/ui";
|
||||
import { RiBarcodeLine } from "@remixicon/react";
|
||||
|
||||
type PagadorBoletoCardProps = {
|
||||
stats: PagadorBoletoStats;
|
||||
};
|
||||
|
||||
export function PagadorBoletoCard({ stats }: PagadorBoletoCardProps) {
|
||||
const total = stats.totalAmount;
|
||||
const paidPercent =
|
||||
total > 0 ? Math.round((stats.paidAmount / total) * 100) : 0;
|
||||
const pendingPercent =
|
||||
total > 0 ? Math.round((stats.pendingAmount / total) * 100) : 0;
|
||||
|
||||
return (
|
||||
<Card className="border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-semibold">Boletos</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Totais por status considerando o período atual.
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 pt-2">
|
||||
{total === 0 ? (
|
||||
<WidgetEmptyState
|
||||
icon={<RiBarcodeLine className="size-6 text-muted-foreground" />}
|
||||
title="Nenhum lançamento com boleto"
|
||||
description="Quando houver despesas registradas com boleto, elas aparecerão aqui."
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<span className="text-xs uppercase tracking-wide text-muted-foreground">
|
||||
Total de boletos
|
||||
</span>
|
||||
<MoneyValues
|
||||
amount={total}
|
||||
className="block text-2xl font-semibold text-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 rounded-xl border border-dashed p-3">
|
||||
<StatusRow
|
||||
label="Pagos"
|
||||
amount={stats.paidAmount}
|
||||
count={stats.paidCount}
|
||||
percent={paidPercent}
|
||||
tone="success"
|
||||
/>
|
||||
<StatusRow
|
||||
label="Pendentes"
|
||||
amount={stats.pendingAmount}
|
||||
count={stats.pendingCount}
|
||||
percent={pendingPercent}
|
||||
tone="warning"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
type StatusRowProps = {
|
||||
label: string;
|
||||
amount: number;
|
||||
count: number;
|
||||
percent: number;
|
||||
tone: "success" | "warning";
|
||||
};
|
||||
|
||||
function StatusRow({ label, amount, count, percent, tone }: StatusRowProps) {
|
||||
const clampedPercent = Math.min(Math.max(percent, 0), 100);
|
||||
return (
|
||||
<div className="space-y-1 rounded-lg bg-muted/40 p-3">
|
||||
<div className="flex items-center justify-between text-sm font-semibold">
|
||||
<span>{label}</span>
|
||||
<span className="text-muted-foreground">{count} registros</span>
|
||||
</div>
|
||||
<MoneyValues
|
||||
amount={amount}
|
||||
className={cn(
|
||||
"text-xl font-semibold",
|
||||
tone === "success" ? "text-emerald-600" : "text-amber-600"
|
||||
)}
|
||||
/>
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>{clampedPercent}% do total</span>
|
||||
<div className="h-1.5 w-1/2 rounded-full bg-border/80">
|
||||
<div
|
||||
className={cn(
|
||||
"h-full rounded-full",
|
||||
tone === "success" ? "bg-emerald-500" : "bg-amber-500"
|
||||
)}
|
||||
style={{ width: `${clampedPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
160
components/pagadores/details/pagador-sharing-card.tsx
Normal file
160
components/pagadores/details/pagador-sharing-card.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
deletePagadorShareAction,
|
||||
regeneratePagadorShareCodeAction,
|
||||
} from "@/app/(dashboard)/pagadores/actions";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { RiDeleteBin5Line } from "@remixicon/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState, useTransition } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
type PagadorShare = {
|
||||
id: string;
|
||||
userId: string;
|
||||
name: string;
|
||||
email: string;
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
interface PagadorSharingCardProps {
|
||||
pagadorId: string;
|
||||
shareCode: string;
|
||||
shares: PagadorShare[];
|
||||
}
|
||||
|
||||
export function PagadorSharingCard({
|
||||
pagadorId,
|
||||
shareCode,
|
||||
shares,
|
||||
}: PagadorSharingCardProps) {
|
||||
const router = useRouter();
|
||||
const [currentCode, setCurrentCode] = useState(shareCode);
|
||||
const [regeneratePending, startRegenerate] = useTransition();
|
||||
const [removePendingId, setRemovePendingId] = useState<string | null>(null);
|
||||
|
||||
const handleCopyCode = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(currentCode);
|
||||
toast.success("Código copiado para a área de transferência.");
|
||||
} catch {
|
||||
toast.error("Não foi possível copiar o código.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleRegenerate = () => {
|
||||
startRegenerate(async () => {
|
||||
const result = await regeneratePagadorShareCodeAction({ pagadorId });
|
||||
|
||||
if (!result.success) {
|
||||
toast.error(result.error);
|
||||
return;
|
||||
}
|
||||
|
||||
setCurrentCode(result.code);
|
||||
toast.success("Novo código gerado com sucesso.");
|
||||
router.refresh();
|
||||
});
|
||||
};
|
||||
|
||||
const handleRemove = (shareId: string) => {
|
||||
setRemovePendingId(shareId);
|
||||
startRegenerate(async () => {
|
||||
const result = await deletePagadorShareAction({ shareId });
|
||||
|
||||
if (!result.success) {
|
||||
toast.error(result.error);
|
||||
setRemovePendingId(null);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success(result.message);
|
||||
setRemovePendingId(null);
|
||||
router.refresh();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="border">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base font-semibold">
|
||||
Compartilhamentos
|
||||
</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Compartilhe o código abaixo com outra pessoa. Ela poderá adicioná-lo
|
||||
na página de pagadores usando a opção Adicionar por código para ter
|
||||
acesso somente leitura.
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex flex-col gap-2 rounded-lg border border-dashed p-4 text-sm">
|
||||
<span className="text-xs font-semibold uppercase text-muted-foreground/80">
|
||||
Código de compartilhamento
|
||||
</span>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<code className="rounded bg-muted px-2 py-1 text-xs font-mono">
|
||||
{currentCode}
|
||||
</code>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={handleCopyCode}
|
||||
>
|
||||
Copiar
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={handleRegenerate}
|
||||
disabled={regeneratePending}
|
||||
>
|
||||
{regeneratePending ? "Gerando..." : "Gerar novo código"}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Gerar um novo código não remove acessos existentes, apenas impede
|
||||
que novos convites usem o código anterior.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{shares.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nenhum usuário com acesso de leitura.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-3">
|
||||
{shares.map((share) => (
|
||||
<li
|
||||
key={share.id}
|
||||
className="flex items-center justify-between rounded-lg border border-dashed p-4 text-sm"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium text-foreground">
|
||||
{share.name}
|
||||
</span>
|
||||
<span className="text-muted-foreground">{share.email}</span>
|
||||
<span className="text-xs text-muted-foreground/80">
|
||||
ID: ****{share.userId.slice(-4)}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => handleRemove(share.id)}
|
||||
disabled={removePendingId === share.id}
|
||||
>
|
||||
<RiDeleteBin5Line className="size-4" />
|
||||
<span className="sr-only">Remover acesso</span>
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user