matt/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove custom date range

Browse Source
This commit is contained in:
Matt
2024-12-21 16:45:48 -05:00
parent 371dfb08d0
commit 243dca4ffc
1 changed files with 4 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
dashboard/src/components/dashboard/SalesChart.jsx
View File

@@ -566,8 +566,6 @@ const SkeletonTable = () => (
const SalesChart = ({ const SalesChart = ({
timeRange = "last30days", timeRange = "last30days",
startDate,
endDate,
title = "Sales Overview", title = "Sales Overview",
description = "Track your sales performance over time", description = "Track your sales performance over time",
}) => { }) => {
@@ -584,10 +582,6 @@ const SalesChart = ({
showPrevious: false, showPrevious: false,
}); });
const [summaryStats, setSummaryStats] = useState({}); const [summaryStats, setSummaryStats] = useState({});
const [customDateRange, setCustomDateRange] = useState({
startDate: formatDateForInput(startDate) || "",
endDate: formatDateForInput(endDate) || "",
});
// Fetch data function // Fetch data function
const fetchData = useCallback(async (params) => { const fetchData = useCallback(async (params) => {
@@ -632,62 +626,15 @@ const SalesChart = ({
const handleTimeRangeChange = useCallback( const handleTimeRangeChange = useCallback(
(value) => { (value) => {
setSelectedTimeRange(value); setSelectedTimeRange(value);
fetchData({ timeRange: value });
const params =
value === "custom"
? {
startDate: parseDateFromInput(
customDateRange.startDate
)?.toISOString(),
endDate: parseDateFromInput(
customDateRange.endDate
)?.toISOString(),
}
: { timeRange: value };
fetchData(params);
}, },
[customDateRange, fetchData] [fetchData]
);
// Handle custom date change
const handleCustomDateChange = useCallback(
(field, value) => {
setCustomDateRange((prev) => ({
...prev,
[field]: value,
}));
if (
selectedTimeRange === "custom" &&
customDateRange.startDate &&
customDateRange.endDate
) {
fetchData({
startDate: parseDateFromInput(
customDateRange.startDate
)?.toISOString(),
endDate: parseDateFromInput(customDateRange.endDate)?.toISOString(),
});
}
},
[selectedTimeRange, customDateRange, fetchData]
); );
// Initial load effect // Initial load effect
useEffect(() => { useEffect(() => {
const params = fetchData({ timeRange: selectedTimeRange });
selectedTimeRange === "custom" }, [selectedTimeRange, fetchData]);
? {
startDate: parseDateFromInput(
customDateRange.startDate
)?.toISOString(),
endDate: parseDateFromInput(customDateRange.endDate)?.toISOString(),
}
: { timeRange: selectedTimeRange };
fetchData(params);
}, [selectedTimeRange, customDateRange, fetchData]);
// Auto-refresh effect for 'today' view // Auto-refresh effect for 'today' view
useEffect(() => { useEffect(() => {
@@ -745,41 +692,11 @@ const SalesChart = ({
{range.label} {range.label}
</SelectItem> </SelectItem>
))} ))}
<SelectItem value="custom">Custom Range</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div> </div>
{selectedTimeRange === "custom" && (
<div className="grid grid-cols-2 gap-4 max-w-md">
<div className="space-y-2">
<Label htmlFor="startDate">Start Date</Label>
<Input
id="startDate"
type="datetime-local"
value={customDateRange.startDate}
onChange={(e) =>
handleCustomDateChange("startDate", e.target.value)
}
className="h-9"
/>
</div>
<div className="space-y-2">
<Label htmlFor="endDate">End Date</Label>
<Input
id="endDate"
type="datetime-local"
value={customDateRange.endDate}
onChange={(e) =>
handleCustomDateChange("endDate", e.target.value)
}
className="h-9"
/>
</div>
</div>
)}
{/* Show either skeletons or actual stats */} {/* Show either skeletons or actual stats */}
{loading ? <SkeletonStats /> : <SummaryStats stats={summaryStats} />} {loading ? <SkeletonStats /> : <SummaryStats stats={summaryStats} />}