Make dashboard trend line optional

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 semana no período selecionado.'
-                      : 'Evolução agrupada por mês. Média móvel de 3 meses.'}
+                      : '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"

src/pages/ProductGroupDetails.tsx

@@ -493,7 +493,7 @@ const ProductGroupDetails = () => {
           <div className="overflow-x-auto">
             <table className="w-full min-w-[1100px] table-fixed text-left text-sm">
               <colgroup>
-                <col className="w-[120px]" />
+                <col className="w-[150px]" />
                 <col className="w-[360px]" />
                 <col className="w-[120px]" />
                 <col className="w-[100px]" />
@@ -533,9 +533,9 @@ const ProductGroupDetails = () => {
                       </span>
                     </td>
                     <td className="px-6 py-2.5 whitespace-nowrap">
-                      <div className="flex items-center gap-2">
+                      <div className="flex min-w-0 items-center gap-2">
-                        <Package className="h-3.5 w-3.5 text-zinc-400 dark:text-dark-muted" />
+                        <Package className="h-3.5 w-3.5 shrink-0 text-zinc-400 dark:text-dark-muted" />
-                        <span className="font-bold text-zinc-900 dark:text-dark-text">{formatNumber(row.quantitySold)} un.</span>
+                        <span className="min-w-0 font-bold tabular-nums text-zinc-900 dark:text-dark-text">{formatNumber(row.quantitySold)} un.</span>
                       </div>
                     </td>
                     <td className="px-6 py-2.5 whitespace-nowrap font-bold text-zinc-900 dark:text-dark-text">{formatNumber(row.stock)} un.</td>

src/pages/Products.tsx

@@ -626,7 +626,7 @@ const Products = () => {
                 <col className="w-[120px]" />
                 <col className="w-[390px]" />
                 <col className="w-[170px]" />
-                <col className="w-[130px]" />
+                <col className="w-[150px]" />
                 <col className="w-[120px]" />
                 <col className="w-[130px]" />
                 <col className="w-[130px]" />
@@ -670,9 +670,9 @@ const Products = () => {
                         </span>
                       </td>
                       <td className="px-6 py-2.5 whitespace-nowrap">
-                        <div className="flex items-center gap-2">
+                        <div className="flex min-w-0 items-center gap-2">
-                          <Package className="w-3.5 h-3.5 text-zinc-400 dark:text-dark-muted" />
+                          <Package className="h-3.5 w-3.5 shrink-0 text-zinc-400 dark:text-dark-muted" />
-                          <span className="font-bold text-zinc-900 dark:text-dark-text">{formatNumber(product.quantitySold)} un.</span>
+                          <span className="min-w-0 font-bold tabular-nums text-zinc-900 dark:text-dark-text">{formatNumber(product.quantitySold)} un.</span>
                         </div>
                       </td>
                       <td className="px-6 py-2.5 font-bold text-zinc-900 dark:text-dark-text whitespace-nowrap">{formatNumber(product.stock)} un.</td>