wip: date range modal / prev / next

Signed-off-by: Henry Gressmann <mail@henrygressmann.de>

web/package.json

@@ -18,14 +18,14 @@
 		"@radix-ui/react-accordion": "^1.2.1",
 		"@radix-ui/react-dialog": "^1.1.2",
 		"@radix-ui/react-tabs": "^1.1.1",
-		"@scaleway/use-query-params": "^5.0.8",
-		"@tanstack/react-query": "^5.59.20",
+		"@tanstack/react-query": "^5.60.5",
 		"@uidotdev/usehooks": "^2.4.1",
 		"date-fns": "^4.1.0",
-		"fets": "^0.8.3",
+		"fets": "^0.8.4",
 		"fuzzysort": "^3.1.0",
 		"lightningcss": "^1.28.1",
-		"lucide-react": "^0.456.0",
+		"little-date": "^1.0.0",
+		"lucide-react": "^0.460.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-simple-maps": "^3.0.0",
@@ -37,7 +37,7 @@
 		"@types/react": "^18.3.12",
 		"@types/react-dom": "^18.3.1",
 		"@types/react-simple-maps": "^3.0.6",
-		"astro": "^4.16.10",
+		"astro": "^4.16.13",
 		"bun-types": "^1.1.34",
 		"rollup-plugin-license": "^3.5.3",
 		"typescript": "^5.6.3"

web/src/api/ranges.ts

@@ -5,11 +5,13 @@ import {
 	differenceInMonths,
 	endOfDay,
 	endOfHour,
+	endOfYear,
 	startOfDay,
 	startOfMonth,
 	startOfYear,
 	subDays,
 	subMonths,
+	subYears,
 } from "date-fns";
 
 import type { DateRange } from "./types";
@@ -111,3 +113,27 @@ export const ranges: Record<RangeName, () => { range: DateRange; dataPoints: num
 		return { range: { start, end: now }, dataPoints: months + 1, graphRange: "month" };
 	},
 };
+
+export const previusRange = (range: string) => {
+	if (range === "today") return "yesterday";
+	if (range === "yearToDate") {
+		const lastYear = subYears(new Date(), 1);
+		const start = startOfYear(lastYear).getTime();
+		const end = endOfYear(lastYear).getTime();
+		return serializeRange({ start, end });
+	}
+	const r = deserializeRange(range);
+	const size = r.end - r.start;
+	const start = r.start - size;
+	const end = r.end - size;
+	return serializeRange({ start: startOfDay(start).getTime(), end: endOfDay(end).getTime() });
+};
+
+export const nextRange = (range: string) => {
+	if (range === "yesterday") return "today";
+	const r = deserializeRange(range);
+	const size = r.end - r.start;
+	const start = r.start + size;
+	const end = r.end + size;
+	return serializeRange({ start: startOfDay(start).getTime(), end: endOfDay(end).getTime() });
+};

web/src/components/daterange/daterange.module.css

@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}