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

Apply recent hour pattern to client details
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m36s
Details

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

27
src/pages/ClientDetails.tsx
View File

@@ -230,6 +230,8 @@ const ClientDetails = () => {
chartData,
groupedOrders,
purchaseHours = [],
purchaseHourRangeLabel = 'Últimos 60 dias',
purchaseWeekdayRangeLabel = 'Todo período',
purchaseWeekdays = [],
allTimeOrderCount,
clientName,
@@ -382,18 +384,20 @@ const ClientDetails = () => {
<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
<div>
<h3 className="text-lg font-bold text-zinc-900 dark:text-dark-text">Padrão de Compra</h3>
<p className="mt-1 text-sm font-medium text-zinc-500 dark:text-dark-muted">Quando este cliente costuma comprar.</p>
<p className="mt-1 text-sm font-medium text-zinc-500 dark:text-dark-muted">Quando este cliente costuma 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">
<h4 className="text-sm font-bold uppercase tracking-widest text-zinc-500 dark:text-dark-muted">Compras por Dia</h4>
<div className="mb-5 flex items-start justify-between gap-4">
<h4 className="text-sm font-bold uppercase tracking-widest text-zinc-500 dark:text-dark-muted">Compras por Dia</h4>
<span className="shrink-0 rounded-full border border-zinc-200 bg-zinc-50 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-zinc-500 dark:border-dark-border dark:bg-dark-surface dark:text-dark-muted">
{purchaseWeekdayRangeLabel}
</span>
</div>
{hasWeekdayPattern ? (
<div className="mt-5 h-56">
<div className="h-56">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={purchaseWeekdays} margin={{ top: 8, right: 10, left: -18, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} vertical={false} />
@@ -416,9 +420,14 @@ const ClientDetails = () => {
</div>
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
<h4 className="text-sm font-bold uppercase tracking-widest text-zinc-500 dark:text-dark-muted">Compras por Horário</h4>
<div className="mb-5 flex items-start justify-between gap-4">
<h4 className="text-sm font-bold uppercase tracking-widest text-zinc-500 dark:text-dark-muted">Compras por Horário</h4>
<span className="shrink-0 rounded-full border border-zinc-200 bg-zinc-50 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-zinc-500 dark:border-dark-border dark:bg-dark-surface dark:text-dark-muted">
{purchaseHourRangeLabel}
</span>
</div>
{hasHourPattern ? (
<div className="mt-5 h-56">
<div className="h-56">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={purchaseHours} margin={{ top: 8, right: 10, left: -18, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} vertical={false} />
@@ -443,7 +452,7 @@ const ClientDetails = () => {
</div>
) : (
<div className="flex h-56 items-center justify-center px-6 text-center text-sm font-semibold text-zinc-500 dark:text-dark-muted">
Sem horário de compra disponível para este período.
Sem horário de compra disponível para os últimos 60 dias.
</div>
)}
</div>

2
src/types.ts
View File

@@ -245,6 +245,8 @@ export interface ClientDetailsAnalytics {
label: string;
value: number;
}>;
purchaseWeekdayRangeLabel?: string;
purchaseHourRangeLabel?: string;
groupedOrders: GroupedClientOrder[];
allTimeOrderCount: number;
clientName: string;