Add period metrics to client details

src/analytics/clients.ts

@@ -33,10 +33,18 @@ export interface GroupedClientOrder {
 }
 
 export interface ClientDetailsMetrics {
+  chartData: Array<{
+    date: string;
+    value: number;
+  }>;
   groupedOrders: GroupedClientOrder[];
-  totalSpent: number;
+  allTimeOrderCount: number;
-  totalItems: number;
   clientPhone: string;
+  hasClient: boolean;
+  periodAverageTicket: number;
+  periodOrderCount: number;
+  periodSpent: number;
+  periodItems: number;
 }
 
 const scoreTertile = (value: number, values: number[], higherIsBetter = true) => {
@@ -162,18 +170,23 @@ export const buildClientsSummary = (
   });
 };
 
-export const buildClientDetailsMetrics = (ordersData: OrderData[], clientName: string): ClientDetailsMetrics => {
+export const buildClientDetailsMetrics = (ordersData: OrderData[], clientName: string, dateRange: DateRange): ClientDetailsMetrics => {
   const clientOrders = ordersData.filter(order => getClientDisplayName(order) === clientName);
+  const periodOrders = filterOrdersByDateRange(clientOrders, dateRange);
   const groupedOrdersMap: Record<string, GroupedClientOrder> = {};
+  const spentByDate: Record<string, number> = {};
   let clientPhone = '';
-  let totalSpent = 0;
+  let periodSpent = 0;
-  let totalItems = 0;
+  let periodItems = 0;
 
   clientOrders.forEach(order => {
     if (order.Fone_Cliente && !clientPhone) clientPhone = order.Fone_Cliente;
+  });
 
-    totalSpent += getOrderItemRevenue(order);
+  periodOrders.forEach(order => {
-    totalItems += order.Quantidade;
+    periodSpent += getOrderItemRevenue(order);
+    periodItems += order.Quantidade;
+    spentByDate[order.Data_Pedido] = (spentByDate[order.Data_Pedido] || 0) + getOrderItemRevenue(order);
 
     const key = order.ID_Pedido || `${order.Data_Pedido}_${order.Valor_Pedido}`;
     if (!groupedOrdersMap[key]) {
@@ -191,5 +204,22 @@ export const buildClientDetailsMetrics = (ordersData: OrderData[], clientName: s
     return parseOrderDate(b.date).getTime() - parseOrderDate(a.date).getTime();
   });
 
-  return { groupedOrders, totalSpent, totalItems, clientPhone };
+  const allTimeOrderIds = new Set(clientOrders.map(order => order.ID_Pedido || `${order.Data_Pedido}_${order.Valor_Pedido}`));
+  const periodOrderCount = groupedOrders.length;
+  const chartData = Object.keys(spentByDate).map(date => ({
+    date,
+    value: spentByDate[date]
+  })).sort((a, b) => parseOrderDate(a.date).getTime() - parseOrderDate(b.date).getTime());
+
+  return {
+    chartData,
+    groupedOrders,
+    allTimeOrderCount: allTimeOrderIds.size,
+    clientPhone,
+    hasClient: clientOrders.length > 0,
+    periodAverageTicket: periodOrderCount ? periodSpent / periodOrderCount : 0,
+    periodOrderCount,
+    periodSpent,
+    periodItems
+  };
 };

src/pages/ClientDetails.tsx

@@ -1,30 +1,76 @@
 import { useMemo, useState } from 'react';
 import { useParams, Link, useOutletContext } from 'react-router-dom';
-import { ArrowLeft, User, Tag, Package, DollarSign, Clock, Phone, ChevronLeft, ChevronRight } from 'lucide-react';
+import { ArrowLeft, User, Tag, Package, DollarSign, Clock, Phone, ChevronLeft, ChevronRight, ShoppingBag, ReceiptText } from 'lucide-react';
-import type { OrderData } from '../types';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+import DateRangePicker from '../components/DateRangePicker';
+import type { DateRange, OrderData } from '../types';
 import { buildClientDetailsMetrics } from '../analytics/clients';
 
+type CustomTooltipProps = {
+  active?: boolean;
+  payload?: Array<{ value: number }>;
+  label?: string;
+};
+
+const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="rounded-xl bg-dark-card p-3 shadow-lg">
+        <p className="mb-1 font-bold text-brand-primary">{label}</p>
+        <p className="m-0 text-dark-text">
+          Gasto: {new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(payload[0].value)}
+        </p>
+      </div>
+    );
+  }
+  return null;
+};
+
 const ClientDetails = () => {
   const { name } = useParams<{ name: string }>();
   const decodedName = name ? decodeURIComponent(name) : '';
-  const { ordersData, isDataLoading } = useOutletContext<{ ordersData: OrderData[], isDataLoading: boolean }>();
+  const { dateRange, setDateRange, ordersData, isDataLoading } = useOutletContext<{
+    dateRange: DateRange,
+    setDateRange: (range: DateRange) => void,
+    ordersData: OrderData[],
+    isDataLoading: boolean
+  }>();
   const [currentPage, setCurrentPage] = useState(1);
   const [ordersPerPage, setOrdersPerPage] = useState(5);
 
-  const { groupedOrders, totalSpent, totalItems, clientPhone } = useMemo(() => {
+  const {
-    return buildClientDetailsMetrics(ordersData, decodedName);
+    chartData,
-  }, [decodedName, ordersData]);
+    groupedOrders,
+    allTimeOrderCount,
+    clientPhone,
+    hasClient,
+    periodAverageTicket,
+    periodItems,
+    periodOrderCount,
+    periodSpent
+  } = useMemo(() => {
+    return buildClientDetailsMetrics(ordersData, decodedName, dateRange);
+  }, [dateRange, decodedName, ordersData]);
 
   const formatCurrency = (value: number) => {
     return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
   };
 
+  const formatNumber = (value: number) => {
+    return new Intl.NumberFormat('pt-BR').format(value);
+  };
+
+  const handleDateRangeChange = (range: DateRange) => {
+    setCurrentPage(1);
+    setDateRange(range);
+  };
+
   const totalPages = Math.ceil(groupedOrders.length / ordersPerPage);
   const safeCurrentPage = Math.min(currentPage, totalPages || 1);
   const startIndex = (safeCurrentPage - 1) * ordersPerPage;
   const paginatedOrders = groupedOrders.slice(startIndex, startIndex + ordersPerPage);
 
-  if (!groupedOrders.length && isDataLoading) {
+  if (!hasClient && isDataLoading) {
     return (
       <div className="text-center py-12">
         <p className="text-zinc-500 dark:text-dark-muted font-medium">Carregando cliente...</p>
@@ -32,7 +78,7 @@ const ClientDetails = () => {
     );
   }
 
-  if (!groupedOrders.length) {
+  if (!hasClient) {
     return (
       <div className="text-center py-12">
         <p className="text-zinc-500 dark:text-dark-muted font-medium">Cliente não encontrado.</p>
@@ -58,7 +104,9 @@ const ClientDetails = () => {
             <div>
               <h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{decodedName}</h1>
               <div className="flex items-center gap-3 mt-1">
-                <p className="text-zinc-500 dark:text-dark-muted font-medium">Histórico completo de compras</p>
+                <p className="text-zinc-500 dark:text-dark-muted font-medium">
+                  {formatNumber(allTimeOrderCount)} pedidos no histórico completo
+                </p>
                 {clientPhone && (
                   <>
                     <span className="text-zinc-300 dark:text-dark-border">•</span>
@@ -72,67 +120,90 @@ const ClientDetails = () => {
             </div>
           </div>
           
-          <div className="flex gap-8">
+          <DateRangePicker
-            <div className="flex flex-col items-center">
+            dateRange={dateRange}
-              <p className="text-xs font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest mb-1">Total Gasto</p>
+            onChange={handleDateRangeChange}
-              <p className="text-2xl font-bold text-brand-primary">{formatCurrency(totalSpent)}</p>
+          />
         </div>
-            <div className="flex flex-col items-center">
+      </div>
-              <p className="text-xs font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest mb-1">Itens Comprados</p>
+
-              <p className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{totalItems}</p>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
+        <div className="bg-dark-card p-5 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
+          <div>
+            <p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Gasto no Período</p>
+            <p className="text-2xl font-bold text-brand-primary">{formatCurrency(periodSpent)}</p>
+          </div>
+          <div className="p-3 bg-brand-primary/10 rounded-xl text-brand-primary">
+            <DollarSign size={22} />
+          </div>
+        </div>
+        <div className="bg-dark-card p-5 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
+          <div>
+            <p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Ticket no Período</p>
+            <p className="text-2xl font-bold text-dark-text">{formatCurrency(periodAverageTicket)}</p>
+          </div>
+          <div className="p-3 bg-emerald-500/10 rounded-xl text-emerald-400">
+            <ReceiptText size={22} />
+          </div>
+        </div>
+        <div className="bg-dark-card p-5 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
+          <div>
+            <p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Total Pedidos</p>
+            <p className="text-2xl font-bold text-dark-text">{formatNumber(periodOrderCount)}</p>
+          </div>
+          <div className="p-3 bg-blue-500/10 rounded-xl text-blue-300">
+            <ShoppingBag size={22} />
+          </div>
+        </div>
+        <div className="bg-dark-card p-5 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
+          <div>
+            <p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Itens no Período</p>
+            <p className="text-2xl font-bold text-dark-text">{formatNumber(periodItems)}</p>
+          </div>
+          <div className="p-3 bg-purple-500/10 rounded-xl text-purple-300">
+            <Package size={22} />
           </div>
         </div>
       </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-lg font-bold mb-8 text-zinc-900 dark:text-dark-text">Gasto por Data</h3>
+        {chartData.length === 0 ? (
+          <div className="flex h-[320px] items-center justify-center text-sm font-semibold text-zinc-500 dark:text-dark-muted">
+            Nenhum gasto no período selecionado.
+          </div>
+        ) : (
+          <div className="h-[320px] w-full">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 80 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
+                <XAxis
+                  dataKey="date"
+                  stroke="#888888"
+                  fontSize={10}
+                  tickLine={false}
+                  axisLine={false}
+                  interval={0}
+                  angle={-45}
+                  textAnchor="end"
+                  height={80}
+                />
+                <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} tickFormatter={(value) => formatCurrency(Number(value))} />
+                <Tooltip content={<CustomTooltip />} cursor={{ fill: '#222222' }} />
+                <Bar dataKey="value" fill="#9ECAE1" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        )}
       </div>
 {/* Orders List */}
 <div className="flex flex-col gap-6">
-      <div className="px-6 py-4 border border-zinc-200 dark:border-dark-border rounded-2xl bg-white dark:bg-dark-card flex flex-col sm:flex-row items-center justify-between gap-4">
+  {paginatedOrders.length === 0 ? (
-        <div>
+    <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-8 text-center shadow-sm">
-          <h2 className="text-sm font-bold text-zinc-900 dark:text-dark-text">Últimos pedidos</h2>
+      <p className="text-sm font-bold text-zinc-900 dark:text-dark-text">Nenhum pedido no período selecionado.</p>
-          <p className="text-xs font-semibold text-zinc-500 dark:text-dark-muted">
+      <p className="mt-1 text-sm text-zinc-500 dark:text-dark-muted">Altere o filtro de data para ver outros pedidos deste cliente.</p>
-            Mostrando {groupedOrders.length > 0 ? startIndex + 1 : 0} a {Math.min(startIndex + ordersPerPage, groupedOrders.length)} de {groupedOrders.length} pedidos
-          </p>
     </div>
-
+  ) : paginatedOrders.map((group, groupIndex) => (
-        <div className="flex flex-col sm:flex-row sm:items-center gap-3">
-          <div className="flex items-center gap-2 text-sm text-zinc-500 dark:text-dark-muted">
-            <span>Mostrar</span>
-            <select
-              value={ordersPerPage}
-              onChange={(event) => {
-                setOrdersPerPage(Number(event.target.value));
-                setCurrentPage(1);
-              }}
-              className="bg-dark-card border border-dark-border rounded-lg px-2 py-1 focus:outline-none focus:border-brand-primary cursor-pointer text-dark-text"
-            >
-              <option value={5}>5</option>
-              <option value={10}>10</option>
-              <option value={20}>20</option>
-              <option value={50}>50</option>
-            </select>
-            <span>pedidos por página</span>
-          </div>
-
-          <div className="flex gap-1 justify-center">
-            <button
-              onClick={() => setCurrentPage(page => Math.max(1, page - 1))}
-              disabled={safeCurrentPage === 1}
-              className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
-            >
-              <ChevronLeft className="w-5 h-5" />
-            </button>
-            <button
-              onClick={() => setCurrentPage(page => Math.min(totalPages, page + 1))}
-              disabled={safeCurrentPage === totalPages || totalPages === 0}
-              className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
-            >
-              <ChevronRight className="w-5 h-5" />
-            </button>
-          </div>
-        </div>
-      </div>
-
-  {paginatedOrders.map((group, groupIndex) => (
     <div key={groupIndex} className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm">
       <div className="p-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50/50 dark:bg-dark-header flex justify-between items-center">
         <h2 className="text-sm font-bold uppercase tracking-wider text-zinc-500 dark:text-dark-muted flex items-center gap-2">