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

Fix client detail customer identity
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m17s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-06-18 16:31:22 -03:00
parent 1af624aa77
commit c35f8f8a51
8 changed files with 173 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/ClientDetails.tsx
View File

@@ -1,5 +1,5 @@
import { useMemo, useState } from 'react';
import { useParams, Link, useOutletContext } from 'react-router-dom';
import { useParams, Link, useOutletContext, useSearchParams } from 'react-router-dom';
import { ArrowLeft, User, Tag, Package, DollarSign, Clock, Phone, ChevronLeft, ChevronRight, ShoppingBag, ReceiptText } from 'lucide-react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import DateRangePicker from '../components/DateRangePicker';
@@ -27,8 +27,10 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
};
const ClientDetails = () => {
const { name } = useParams<{ name: string }>();
const decodedName = name ? decodeURIComponent(name) : '';
const { customerKey } = useParams<{ customerKey: string }>();
const decodedCustomerKey = customerKey ? decodeURIComponent(customerKey) : '';
const [searchParams] = useSearchParams();
const requestedName = searchParams.get('name') || '';
const { dateRange, setDateRange, ordersData, isDataLoading } = useOutletContext<{
dateRange: DateRange,
setDateRange: (range: DateRange) => void,
@@ -42,6 +44,7 @@ const ClientDetails = () => {
chartData,
groupedOrders,
allTimeOrderCount,
clientName,
clientPhone,
hasClient,
periodAverageTicket,
@@ -49,8 +52,9 @@ const ClientDetails = () => {
periodOrderCount,
periodSpent
} = useMemo(() => {
return buildClientDetailsMetrics(ordersData, decodedName, dateRange);
}, [dateRange, decodedName, ordersData]);
return buildClientDetailsMetrics(ordersData, decodedCustomerKey, dateRange);
}, [dateRange, decodedCustomerKey, ordersData]);
const displayName = requestedName || clientName || decodedCustomerKey.replace(/^name:/, '');
const formatCurrency = (value: number) => {
return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
@@ -102,7 +106,7 @@ const ClientDetails = () => {
<User className="w-8 h-8 text-brand-primary" />
</div>
<div>
<h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{decodedName}</h1>
<h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{displayName}</h1>
<div className="flex items-center gap-3 mt-1">
<p className="text-zinc-500 dark:text-dark-muted font-medium">
{formatNumber(allTimeOrderCount)} pedidos no histórico completo