feat: hide auto-refresh controls outside of dashboard and update refresh UI design

src/components/DateRangePicker.tsx

@@ -5,9 +5,9 @@ import type { DateRange } from '../types';
 interface DateRangePickerProps {
   dateRange: DateRange;
   onChange: (range: DateRange) => void;
-  refreshInterval: number;
-  setRefreshInterval: (interval: number) => void;
-  onManualRefresh: () => void;
+  refreshInterval?: number;
+  setRefreshInterval?: (interval: number) => void;
+  onManualRefresh?: () => void;
 }
 
 const PRESETS = [
@@ -73,27 +73,30 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
       </div>
 
       {/* Auto Refresh Dropdown */}
-      <div className="flex items-center bg-dark-card border border-dark-border rounded-xl shadow-sm overflow-hidden">
-        <button 
-          onClick={onManualRefresh}
-          className="px-3 py-2.5 text-dark-muted hover:text-brand-primary hover:bg-dark-input transition-colors border-r border-dark-border"
-          title="Atualizar Agora"
-        >
-          <RefreshCw size={16} />
-        </button>
-        <select
-          value={refreshInterval}
-          onChange={(e) => setRefreshInterval(Number(e.target.value))}
-          className="appearance-none bg-transparent text-sm font-medium text-dark-text pl-3 pr-8 py-2.5 focus:outline-none cursor-pointer relative"
-          style={{ backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 0.5rem center', backgroundSize: '1em' }}
-        >
-          {REFRESH_OPTIONS.map(opt => (
-            <option key={opt.label} value={opt.value} className="bg-dark-card">
-              Auto: {opt.label}
-            </option>
-          ))}
-        </select>
-      </div>
+      {setRefreshInterval && onManualRefresh && (
+        <div className="flex items-center bg-dark-card border border-dark-border rounded-xl shadow-sm overflow-hidden">
+          <button 
+            onClick={onManualRefresh}
+            className="flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium text-dark-text hover:text-brand-primary hover:bg-dark-input transition-colors border-r border-dark-border"
+            title="Atualizar Agora"
+          >
+            <RefreshCw size={16} className="text-brand-primary" />
+            <span>Atualizar</span>
+          </button>
+          <select
+            value={refreshInterval}
+            onChange={(e) => setRefreshInterval(Number(e.target.value))}
+            className="appearance-none bg-transparent text-sm font-bold text-dark-muted pl-4 pr-10 py-2.5 focus:outline-none cursor-pointer relative"
+            style={{ backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 0.75rem center', backgroundSize: '1em' }}
+          >
+            {REFRESH_OPTIONS.map(opt => (
+              <option key={opt.label} value={opt.value} className="bg-dark-card font-medium text-dark-text">
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
     </div>
   );
 };

src/pages/ProductDetails.tsx

@@ -20,7 +20,7 @@ const CustomTooltip = ({ active, payload, label }: any) => {
 
 const ProductDetails = () => {
   const { id } = useParams<{ id: string }>();
-  const { dateRange, setDateRange, ordersData, refreshInterval, setRefreshInterval, loadData } = useOutletContext<{ 
+  const { dateRange, setDateRange, ordersData } = useOutletContext<{ 
     dateRange: DateRange, 
     setDateRange: (range: DateRange) => void, 
     ordersData: OrderData[],
@@ -102,9 +102,6 @@ const ProductDetails = () => {
         <DateRangePicker 
           dateRange={dateRange} 
           onChange={setDateRange} 
-          refreshInterval={refreshInterval}
-          setRefreshInterval={setRefreshInterval}
-          onManualRefresh={() => loadData(true)}
         />      </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">

src/pages/Products.tsx

@@ -6,7 +6,7 @@ import type { OrderData, DateRange } from '../types';
 import { parseOrderDate } from '../dataService';
 
 const Products = () => {
-  const { dateRange, setDateRange, ordersData, refreshInterval, setRefreshInterval, loadData } = useOutletContext<{ 
+  const { dateRange, setDateRange, ordersData } = useOutletContext<{ 
     dateRange: DateRange, 
     setDateRange: (range: DateRange) => void, 
     ordersData: OrderData[],
@@ -77,9 +77,6 @@ const Products = () => {
           <DateRangePicker 
             dateRange={dateRange} 
             onChange={setDateRange} 
-            refreshInterval={refreshInterval}
-            setRefreshInterval={setRefreshInterval}
-            onManualRefresh={() => loadData(true)}
           />
           
           <div className="relative">