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

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">