Refine dashboard and RFV visuals

src/pages/Dashboard.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useOutletContext, useNavigate } from 'react-router-dom';
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, LabelList } from 'recharts';
 import { DollarSign, Loader2, ShoppingCart, TrendingUp } from 'lucide-react';
 import DateRangePicker from '../components/DateRangePicker';
 import type { DashboardAnalytics, OrderData, DateRange } from '../types';
@@ -11,6 +11,43 @@ const formatCurrency = (value: number) => {
   return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
 };
 
+const truncateLabel = (value: string, maxLength = 22) => {
+  if (value.length <= maxLength) return value;
+  return `${value.slice(0, maxLength - 1)}...`;
+};
+
+const SELLER_COLORS = [
+  '#25C2FF',
+  '#52DFA0',
+  '#A06BFF',
+  '#FF8A63',
+  '#FFC247',
+  '#FF7A9B',
+  '#18D6B5',
+  '#FFA24A',
+  '#82B8FF',
+  '#B8E84D'
+];
+
+const BAR_FILL_OPACITY = 0.5;
+const BAR_STROKE_OPACITY = 0.85;
+const PIE_FILL_OPACITY = 0.68;
+
+const getBarGlowStyle = (color: string) => ({
+  filter: `drop-shadow(0 0 3px ${color}40)`
+});
+
+const getPieGlowStyle = (color: string) => ({
+  filter: `drop-shadow(0 0 8px ${color}80)`,
+  cursor: 'pointer'
+});
+
+const kpiIconStyle = (color: string) => ({
+  backgroundColor: `${color}14`,
+  borderColor: `${color}26`,
+  color
+});
+
 type ChartTooltipPayload = {
   value: number;
   name?: string;
@@ -84,6 +121,69 @@ const Dashboard = () => {
     return buildDashboardMetrics(ordersData, dateRange);
   }, [dateRange, ordersData, serverMetrics]);
 
+  const sellerColorMap = useMemo(() => {
+    const colorMap = new Map<string, string>();
+
+    [...revenueBySeller, ...ordersBySeller].forEach((seller) => {
+      const key = seller.id || seller.name;
+      if (!colorMap.has(key)) {
+        colorMap.set(key, SELLER_COLORS[colorMap.size % SELLER_COLORS.length]);
+      }
+    });
+
+    return colorMap;
+  }, [ordersBySeller, revenueBySeller]);
+
+  const revenueBySellerChartData = useMemo(() => {
+    return revenueBySeller.map((seller) => ({
+      ...seller,
+      fill: sellerColorMap.get(seller.id || seller.name) || seller.fill
+    }));
+  }, [revenueBySeller, sellerColorMap]);
+
+  const sellerPerformanceRows = useMemo(() => {
+    const rowsBySeller = new Map<string, { id: string; name: string; revenue: number; orders: number; fill: string }>();
+
+    revenueBySeller.forEach((seller) => {
+      const key = seller.id || seller.name;
+      rowsBySeller.set(seller.id || seller.name, {
+        id: key,
+        name: seller.name,
+        revenue: seller.value,
+        orders: 0,
+        fill: sellerColorMap.get(key) || seller.fill
+      });
+    });
+
+    ordersBySeller.forEach((seller) => {
+      const key = seller.id || seller.name;
+      const existing = rowsBySeller.get(key);
+      rowsBySeller.set(key, {
+        id: key,
+        name: existing?.name || seller.name,
+        revenue: existing?.revenue || 0,
+        orders: seller.value,
+        fill: existing?.fill || sellerColorMap.get(key) || seller.fill
+      });
+    });
+
+    return [...rowsBySeller.values()]
+      .sort((a, b) => b.revenue - a.revenue)
+      .slice(0, 10);
+  }, [ordersBySeller, revenueBySeller, sellerColorMap]);
+
+  const ticketBySellerChartData = useMemo(() => {
+    return sellerPerformanceRows
+      .filter((seller) => seller.orders > 0)
+      .map((seller) => ({
+        id: seller.id,
+        name: seller.name,
+        value: seller.revenue / seller.orders,
+        fill: seller.fill
+      }))
+      .sort((a, b) => b.value - a.value);
+  }, [sellerPerformanceRows]);
+
   const handleManualRefresh = () => {
     void loadDashboardMetrics(dateRange, { force: true });
   };
@@ -118,8 +218,8 @@ const Dashboard = () => {
               <p className="text-dark-muted text-sm font-medium mb-1">Receita Total</p>
               <h3 className="text-3xl font-bold text-dark-text">{formatCurrency(totalRevenue)}</h3>
             </div>
-            <div className="p-3 bg-emerald-500/10 rounded-xl">
-              <DollarSign className="w-6 h-6 text-emerald-500" />
+            <div className="rounded-xl border p-3" style={kpiIconStyle('#52DFA0')}>
+              <DollarSign className="w-6 h-6" />
             </div>
           </div>
         </div>
@@ -130,8 +230,8 @@ const Dashboard = () => {
               <p className="text-dark-muted text-sm font-medium mb-1">Total de Produtos Vendidos</p>
               <h3 className="text-3xl font-bold text-dark-text">{totalOrders}</h3>
             </div>
-            <div className="p-3 bg-blue-500/10 rounded-xl">
-              <ShoppingCart className="w-6 h-6 text-blue-500" />
+            <div className="rounded-xl border p-3" style={kpiIconStyle('#82B8FF')}>
+              <ShoppingCart className="w-6 h-6" />
             </div>
           </div>
         </div>
@@ -142,8 +242,8 @@ const Dashboard = () => {
               <p className="text-dark-muted text-sm font-medium mb-1">Ticket Médio (Por Item)</p>
               <h3 className="text-3xl font-bold text-dark-text">{formatCurrency(averageOrderValue)}</h3>
             </div>
-            <div className="p-3 bg-purple-500/10 rounded-xl">
-              <TrendingUp className="w-6 h-6 text-purple-500" />
+            <div className="rounded-xl border p-3" style={kpiIconStyle('#B992FF')}>
+              <TrendingUp className="w-6 h-6" />
             </div>
           </div>
         </div>
@@ -152,18 +252,36 @@ const Dashboard = () => {
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm flex flex-col">
           <h3 className="text-lg font-bold mb-6 text-dark-text">Receita por Vendedor</h3>
-          <div className="h-72 w-full flex items-center justify-center">
-            {revenueBySeller.length ? (
+          <div className="h-80 w-full flex items-center justify-center">
+            {revenueBySellerChartData.length ? (
               <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={revenueBySeller} margin={{ top: 5, right: 24, left: 18, bottom: 5 }}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
-                  <XAxis dataKey="name" stroke="#888888" fontSize={10} tickLine={false} axisLine={false} tick={false} />
-                  <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
+                <BarChart data={revenueBySellerChartData} layout="vertical" margin={{ top: 5, right: 88, left: 8, bottom: 5 }}>
+                  <CartesianGrid strokeDasharray="3 3" stroke="#222222" horizontal={false} />
+                  <XAxis type="number" stroke="#888888" fontSize={11} tickLine={false} axisLine={false} tickFormatter={(value) => `${Number(value) / 1000}k`} />
+                  <YAxis
+                    dataKey="name"
+                    type="category"
+                    width={150}
+                    stroke="#888888"
+                    fontSize={11}
+                    tickLine={false}
+                    axisLine={false}
+                    tickFormatter={(value) => truncateLabel(String(value))}
+                  />
                   <Tooltip content={<CustomTooltip isCurrency valueLabel="Receita:" />} cursor={{ fill: '#222222' }} />
-                  <Bar dataKey="value" radius={[4, 4, 0, 0]}>
-                    {revenueBySeller.map((entry) => (
-                      <Cell key={`seller-revenue-${entry.id}`} fill={entry.fill} />
+                  <Bar dataKey="value" radius={[0, 4, 4, 0]} isAnimationActive={false}>
+                    {revenueBySellerChartData.map((entry) => (
+                      <Cell
+                        key={`seller-revenue-${entry.id}`}
+                        fill={entry.fill}
+                        fillOpacity={BAR_FILL_OPACITY}
+                        stroke={entry.fill}
+                        strokeOpacity={BAR_STROKE_OPACITY}
+                        strokeWidth={1.25}
+                        style={getBarGlowStyle(entry.fill)}
+                      />
                     ))}
+                    <LabelList dataKey="value" position="right" fill="#ededed" fontSize={11} fontWeight={700} formatter={(value) => formatCurrency(Number(value) || 0)} />
                   </Bar>
                 </BarChart>
               </ResponsiveContainer>
@@ -171,54 +289,83 @@ const Dashboard = () => {
               <p className="text-sm font-semibold text-dark-muted">Nenhuma venda com vendedor no período.</p>
             )}
           </div>
-          <div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
-            {revenueBySeller.map((entry) => (
-              <div key={`seller-revenue-legend-${entry.id}`} className="flex min-w-0 items-center justify-between gap-3 text-[10px]">
-                <div className="flex min-w-0 items-center">
-                  <span className="mr-2 h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: entry.fill }} />
-                  <span className="truncate font-semibold text-dark-muted" title={entry.name}>{entry.name}</span>
-                </div>
-                <span className="shrink-0 font-bold text-dark-text">{formatCurrency(entry.value)}</span>
-              </div>
-            ))}
-          </div>
         </div>
 
         <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm flex flex-col">
-          <h3 className="text-lg font-bold mb-6 text-dark-text">Pedidos por Vendedor</h3>
-          <div className="h-72 w-full flex items-center justify-center">
-            {ordersBySeller.length ? (
+          <h3 className="text-lg font-bold mb-6 text-dark-text">Ticket Médio por Vendedor</h3>
+          <div className="h-80 w-full flex items-center justify-center">
+            {ticketBySellerChartData.length ? (
               <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={ordersBySeller} margin={{ top: 5, right: 24, left: 18, bottom: 5 }}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
-                  <XAxis dataKey="name" stroke="#888888" fontSize={10} tickLine={false} axisLine={false} tick={false} />
-                  <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} allowDecimals={false} />
-                  <Tooltip content={<CustomTooltip valueLabel="Pedidos:" />} cursor={{ fill: '#222222' }} />
-                  <Bar dataKey="value" radius={[4, 4, 0, 0]}>
-                    {ordersBySeller.map((entry) => (
-                      <Cell key={`seller-orders-${entry.id}`} fill={entry.fill} />
+                <BarChart data={ticketBySellerChartData} layout="vertical" margin={{ top: 5, right: 88, left: 8, bottom: 5 }}>
+                  <CartesianGrid strokeDasharray="3 3" stroke="#222222" horizontal={false} />
+                  <XAxis type="number" stroke="#888888" fontSize={11} tickLine={false} axisLine={false} tickFormatter={(value) => `${Number(value) / 1000}k`} />
+                  <YAxis
+                    dataKey="name"
+                    type="category"
+                    width={150}
+                    stroke="#888888"
+                    fontSize={11}
+                    tickLine={false}
+                    axisLine={false}
+                    tickFormatter={(value) => truncateLabel(String(value))}
+                  />
+                  <Tooltip content={<CustomTooltip isCurrency valueLabel="Ticket médio:" />} cursor={{ fill: '#222222' }} />
+                  <Bar dataKey="value" radius={[0, 4, 4, 0]} isAnimationActive={false}>
+                    {ticketBySellerChartData.map((entry) => (
+                      <Cell
+                        key={`seller-ticket-${entry.id}`}
+                        fill={entry.fill}
+                        fillOpacity={BAR_FILL_OPACITY}
+                        stroke={entry.fill}
+                        strokeOpacity={BAR_STROKE_OPACITY}
+                        strokeWidth={1.25}
+                        style={getBarGlowStyle(entry.fill)}
+                      />
                     ))}
+                    <LabelList dataKey="value" position="right" fill="#ededed" fontSize={11} fontWeight={700} formatter={(value) => formatCurrency(Number(value) || 0)} />
                   </Bar>
                 </BarChart>
               </ResponsiveContainer>
             ) : (
-              <p className="text-sm font-semibold text-dark-muted">Nenhum pedido com vendedor no período.</p>
+              <p className="text-sm font-semibold text-dark-muted">Nenhum ticket médio por vendedor no período.</p>
             )}
           </div>
-          <div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
-            {ordersBySeller.map((entry) => (
-              <div key={`seller-orders-legend-${entry.id}`} className="flex min-w-0 items-center justify-between gap-3 text-[10px]">
-                <div className="flex min-w-0 items-center">
-                  <span className="mr-2 h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: entry.fill }} />
-                  <span className="truncate font-semibold text-dark-muted" title={entry.name}>{entry.name}</span>
-                </div>
-                <span className="shrink-0 font-bold text-dark-text">{entry.value}</span>
-              </div>
-            ))}
-          </div>
         </div>
       </div>
 
+      {sellerPerformanceRows.length > 0 && (
+        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
+          <h3 className="text-lg font-bold mb-4 text-dark-text">Resumo por Vendedor</h3>
+          <div className="overflow-x-auto">
+            <table className="w-full min-w-[640px] text-left text-sm">
+              <thead>
+                <tr className="border-b border-dark-border text-xs uppercase tracking-wide text-dark-muted">
+                  <th className="pb-3 font-bold">Vendedor</th>
+                  <th className="pb-3 text-right font-bold">Receita</th>
+                  <th className="pb-3 text-right font-bold">Pedidos</th>
+                  <th className="pb-3 text-right font-bold">Ticket médio</th>
+                </tr>
+              </thead>
+              <tbody>
+                {sellerPerformanceRows.map((seller) => (
+                  <tr key={`seller-summary-${seller.id}`} className="border-b border-dark-border/70 last:border-0">
+                    <td className="max-w-[320px] py-3 font-semibold text-dark-text">
+                      <div className="flex min-w-0 items-center gap-2">
+                        <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: seller.fill }} />
+                        <span className="block truncate" title={seller.name}>{seller.name}</span>
+                      </div>
+                    </td>
+                    <td className="py-3 text-right font-bold text-dark-text">{formatCurrency(seller.revenue)}</td>
+                    <td className="py-3 text-right font-semibold text-dark-muted">{seller.orders}</td>
+                    <td className="py-3 text-right font-semibold text-dark-muted">{seller.orders ? formatCurrency(seller.revenue / seller.orders) : '-'}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm flex flex-col">
           <h3 className="text-lg font-bold mb-6 text-dark-text">Produtos Mais Vendidos</h3>
@@ -234,7 +381,15 @@ const Dashboard = () => {
                 <Tooltip content={<CustomTooltip />} cursor={{ fill: '#222222' }} />
                 <Bar dataKey="value" radius={[4, 4, 0, 0]} onClick={(data) => { if(data?.payload?.id) navigate(`/products/${data.payload.id}`) }} style={{ cursor: 'pointer' }}>
                   {salesByProduct.map((entry) => (
-                    <Cell key={`cell-${entry.name}`} fill={entry.fill} style={{ cursor: 'pointer' }} />
+                    <Cell
+                      key={`cell-${entry.name}`}
+                      fill={entry.fill}
+                      fillOpacity={BAR_FILL_OPACITY}
+                      stroke={entry.fill}
+                      strokeOpacity={BAR_STROKE_OPACITY}
+                      strokeWidth={1.25}
+                      style={{ ...getBarGlowStyle(entry.fill), cursor: 'pointer' }}
+                    />
                   ))}
                 </Bar>
               </BarChart>
@@ -255,9 +410,17 @@ const Dashboard = () => {
           <div className="h-80 w-full flex items-center justify-center">
             <ResponsiveContainer width="100%" height="100%">
               <PieChart>
-                <Pie data={revenueByProduct} cx="50%" cy="50%" innerRadius={80} outerRadius={110} paddingAngle={5} dataKey="value" stroke="none" onClick={(data) => { if(data?.payload?.id) navigate(`/products/${data.payload.id}`) }} style={{ cursor: 'pointer' }}>
+                <Pie data={revenueByProduct} cx="50%" cy="50%" innerRadius={80} outerRadius={110} paddingAngle={5} dataKey="value" onClick={(data) => { if(data?.payload?.id) navigate(`/products/${data.payload.id}`) }} style={{ cursor: 'pointer' }}>
                   {revenueByProduct.map((entry) => (
-                    <Cell key={`cell-${entry.name}`} fill={entry.fill} style={{ cursor: 'pointer' }} />
+                    <Cell
+                      key={`cell-${entry.name}`}
+                      fill={entry.fill}
+                      fillOpacity={PIE_FILL_OPACITY}
+                      stroke={entry.fill}
+                      strokeOpacity={BAR_STROKE_OPACITY}
+                      strokeWidth={1.5}
+                      style={getPieGlowStyle(entry.fill)}
+                    />
                   ))}
                 </Pie>
                 <Tooltip content={<CustomTooltip isCurrency={true} />} cursor={{ fill: '#222222' }} />