From f92348958baa8794a1176964a9cfc6058ad9ad5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Tue, 14 Jul 2026 14:51:07 -0300
Subject: [PATCH] Make dashboard trend line optional

---
 src/pages/Dashboard.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index cf1d2e6..4fe6f58 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -303,6 +303,7 @@ const Dashboard = () => {
   const [focusedSellerId, setFocusedSellerId] = useState<string | null>(null);
   const [sellerMetric, setSellerMetric] = useState<SellerMetricKey>('revenue');
   const [selectedSellerBucket, setSelectedSellerBucket] = useState<string | null>(null);
+  const [showSellerTrend, setShowSellerTrend] = useState(false);
 
   const loadDashboardMetrics = useCallback(async (range: DateRange, options?: { force?: boolean }) => {
     setIsMetricsLoading(true);
@@ -603,13 +604,28 @@ const Dashboard = () => {
                 : sellerTimeSeries.isFallback
                   ? sellerMetricConfig.fallbackDescription
                   : sellerTimeSeries.dateBucket === 'day'
-                    ? `${sellerMetricConfig.trendDescription} Média móvel de 7 dias.`
+                    ? sellerMetricConfig.trendDescription
                     : sellerTimeSeries.dateBucket === 'week'
-                      ? 'Evolução agrupada por semana. Média móvel de 4 semanas.'
-                      : 'Evolução agrupada por mês. Média móvel de 3 meses.'}
+                      ? 'Evolução agrupada por semana no período selecionado.'
+                      : 'Evolução agrupada por mês no período selecionado.'}
             </p>
           </div>
           <div className="flex flex-wrap items-center gap-2">
+            {!sellerTimeSeries.isHourly && !sellerTimeSeries.isFallback && sellerTimeSeries.movingAverageWindow > 1 && (
+              <button
+                type="button"
+                onClick={() => setShowSellerTrend(current => !current)}
+                aria-pressed={showSellerTrend}
+                className={`h-9 cursor-pointer rounded-lg border px-3 text-xs font-bold transition-colors ${
+                  showSellerTrend
+                    ? 'border-brand-primary bg-brand-primary/10 text-brand-primary'
+                    : 'border-dark-border bg-dark-input text-dark-muted hover:text-dark-text'
+                }`}
+                title="Mostrar ou esconder média móvel"
+              >
+                Tendência
+              </button>
+            )}
             <div className="inline-flex rounded-xl border border-dark-border bg-dark-input p-1">
               {sellerMetricOptions.map(option => (
                 <button
@@ -684,7 +700,7 @@ const Dashboard = () => {
                     content={<SellerMetricTooltip focusedSellerId={effectiveFocusedSellerId} sellers={sellerTimeSeries.sellers} metricConfig={sellerMetricConfig} isHourly={sellerTimeSeries.isHourly} dateBucket={sellerTimeSeries.dateBucket} />}
                     cursor={{ stroke: CHART_AXIS_COLOR, strokeDasharray: '4 4' }}
                   />
-                  {!sellerTimeSeries.isHourly && !sellerTimeSeries.isFallback && sellerTimeSeries.movingAverageWindow > 1 && (
+                  {showSellerTrend && !sellerTimeSeries.isHourly && !sellerTimeSeries.isFallback && sellerTimeSeries.movingAverageWindow > 1 && (
                     <Line
                       type="monotone"
                       dataKey="movingAverage"