blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Cauê Faleiros
2026-05-07 15:07:44 -03:00
parent b986eafb98
commit b048c963dd
3 changed files with 29 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/DateRangePicker.tsx
View File

@@ -5,9 +5,9 @@ import type { DateRange } from '../types';
interface DateRangePickerProps { interface DateRangePickerProps {
dateRange: DateRange; dateRange: DateRange;
onChange: (range: DateRange) => void; onChange: (range: DateRange) => void;
refreshInterval: number; refreshInterval?: number;
setRefreshInterval: (interval: number) => void; setRefreshInterval?: (interval: number) => void;
onManualRefresh: () => void; onManualRefresh?: () => void;
} }
const PRESETS = [ const PRESETS = [
@@ -73,27 +73,30 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
</div> </div>
{/* Auto Refresh Dropdown */} {/* Auto Refresh Dropdown */}
<div className="flex items-center bg-dark-card border border-dark-border rounded-xl shadow-sm overflow-hidden"> {setRefreshInterval && onManualRefresh && (
<button <div className="flex items-center bg-dark-card border border-dark-border rounded-xl shadow-sm overflow-hidden">
onClick={onManualRefresh} <button
className="px-3 py-2.5 text-dark-muted hover:text-brand-primary hover:bg-dark-input transition-colors border-r border-dark-border" onClick={onManualRefresh}
title="Atualizar Agora" 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} /> >
</button> <RefreshCw size={16} className="text-brand-primary" />
<select <span>Atualizar</span>
value={refreshInterval} </button>
onChange={(e) => setRefreshInterval(Number(e.target.value))} <select
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" value={refreshInterval}
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' }} 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"
{REFRESH_OPTIONS.map(opt => ( 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' }}
<option key={opt.label} value={opt.value} className="bg-dark-card"> >
Auto: {opt.label} {REFRESH_OPTIONS.map(opt => (
</option> <option key={opt.label} value={opt.value} className="bg-dark-card font-medium text-dark-text">
))} {opt.label}
</select> </option>
</div> ))}
</select>
</div>
)}
</div> </div>
); );
}; };

5
src/pages/ProductDetails.tsx
View File

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

5
src/pages/Products.tsx
View File

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