blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use recent data for purchase hour pattern
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m29s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-07-01 13:17:05 -03:00
parent 57fd48ccc5
commit 27d2980b32
5 changed files with 82 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/Clients.tsx
View File

@@ -522,6 +522,8 @@ const Clients = () => {
const shouldShowRfmLoading = isRfmLoading && clientAnalytics.length > 0;
const hasWeekdayPattern = purchasePattern?.purchaseWeekdays.some(day => day.value > 0) ?? false;
const hasHourPattern = purchasePattern?.purchaseHours.some(hour => hour.value > 0) ?? false;
const weekdayRangeLabel = purchasePattern?.weekdayRangeLabel || 'Todo período';
const hourRangeLabel = purchasePattern?.hourRangeLabel || 'Últimos 60 dias';
return (
<div className="space-y-6">
@@ -831,18 +833,20 @@ const Clients = () => {
<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
<div>
<h2 className="text-lg font-bold text-zinc-900 dark:text-dark-text">Padrão de Compra</h2>
<p className="mt-1 text-sm font-medium text-zinc-500 dark:text-dark-muted">Quando os clientes costumam comprar.</p>
<p className="mt-1 text-sm font-medium text-zinc-500 dark:text-dark-muted">Quando os clientes costumam comprar, separando histórico de data e horário confiável.</p>
</div>
<span className="w-fit rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs font-bold uppercase tracking-wide text-zinc-500 dark:border-dark-border dark:bg-dark-card dark:text-dark-muted">
Todo período
</span>
</div>
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
<h3 className="text-sm font-bold uppercase tracking-widest text-zinc-500 dark:text-dark-muted">Compras por Dia</h3>
<div className="mb-5 flex items-start justify-between gap-4">
<h3 className="text-sm font-bold uppercase tracking-widest text-zinc-500 dark:text-dark-muted">Compras por Dia</h3>
<span className="shrink-0 rounded-full border border-zinc-200 bg-white px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-zinc-500 dark:border-dark-border dark:bg-dark-input dark:text-dark-muted">
{weekdayRangeLabel}
</span>
</div>
{hasWeekdayPattern ? (
<div className="mt-5 h-56">
<div className="h-56">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={purchasePattern?.purchaseWeekdays || []} margin={{ top: 8, right: 10, left: -18, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} vertical={false} />
@@ -865,9 +869,14 @@ const Clients = () => {
</div>
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
<h3 className="text-sm font-bold uppercase tracking-widest text-zinc-500 dark:text-dark-muted">Compras por Horário</h3>
<div className="mb-5 flex items-start justify-between gap-4">
<h3 className="text-sm font-bold uppercase tracking-widest text-zinc-500 dark:text-dark-muted">Compras por Horário</h3>
<span className="shrink-0 rounded-full border border-zinc-200 bg-white px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-zinc-500 dark:border-dark-border dark:bg-dark-input dark:text-dark-muted">
{hourRangeLabel}
</span>
</div>
{hasHourPattern ? (
<div className="mt-5 h-56">
<div className="h-56">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={purchasePattern?.purchaseHours || []} margin={{ top: 8, right: 10, left: -18, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} vertical={false} />