use range instead of dates across the web

apps/web/src/components/report/ReportDateRange.tsx

@@ -4,27 +4,29 @@ import { changeDateRanges, changeInterval } from "./reportSlice";
 import { Combobox } from "../ui/combobox";
 import { type IInterval } from "@/types";
 import { timeRanges } from "@/utils/constants";
-import { entries } from "@/utils/object";
 
 export function ReportDateRange() {
   const dispatch = useDispatch();
+  const range = useSelector((state) => state.report.range);
   const interval = useSelector((state) => state.report.interval);
   const chartType = useSelector((state) => state.report.chartType);
 
   return (
     <>
       <RadioGroup>
-        {entries(timeRanges).map(([range, title]) => (
-          <RadioGroupItem
-            key={range}
-            // active={range === interval}
-            onClick={() => {
-              dispatch(changeDateRanges(range));
-            }}
-          >
-            {title}
-          </RadioGroupItem>
-        ))}
+        {timeRanges.map(item => {
+          return (
+            <RadioGroupItem
+              key={item.range}
+              active={item.range === range}
+              onClick={() => {
+                dispatch(changeDateRanges(item.range));
+              }}
+            >
+              {item.title}
+            </RadioGroupItem>
+          )
+        })}
       </RadioGroup>
       {chartType === "linear" && (
         <div className="w-full max-w-[200px]">

apps/web/src/components/report/chart/index.tsx

@@ -8,23 +8,23 @@ type ReportLineChartProps = IChartInput
 
 export const Chart = withChartProivder(({
   interval,
-  startDate,
-  endDate,
   events,
   breakdowns,
   chartType,
   name,
+  range,
 }: ReportLineChartProps) =>  {
   const hasEmptyFilters = events.some((event) => event.filters.some((filter) => filter.value.length === 0));
   const chart = api.chart.chart.useQuery(
     {
       interval,
       chartType,
-      startDate,
-      endDate,
       events,
       breakdowns,
       name,
+      range,
+      startDate: null,
+      endDate: null,
     },
     {
       keepPreviousData: true,

apps/web/src/components/report/reportSlice.ts

@@ -4,22 +4,26 @@ import {
   type IChartEvent,
   type IInterval,
   type IChartType,
+  type IChartRange,
 } from "@/types";
 import { alphabetIds } from "@/utils/constants";
-import { getDaysOldDate } from "@/utils/date";
 import { type PayloadAction, createSlice } from "@reduxjs/toolkit";
 
-type InitialState = IChartInput;
+type InitialState = IChartInput & {
+  startDate: string | null;
+  endDate: string | null;
+}
 
 // First approach: define the initial state using that type
 const initialState: InitialState = {
   name: "screen_view",
   chartType: "linear",
-  startDate: getDaysOldDate(7).toISOString(),
-  endDate: new Date().toISOString(),
   interval: "day",
   breakdowns: [],
   events: [],
+  range: 30,
+  startDate: null,
+  endDate: null,
 };
 
 export const reportSlice = createSlice({
@@ -30,7 +34,11 @@ export const reportSlice = createSlice({
       return initialState
     },
     setReport(state, action: PayloadAction<IChartInput>) {     
-      return action.payload      
+      return {
+        ...action.payload,
+        startDate: null,
+        endDate: null,
+      }
     },
     // Events
     addEvent: (state, action: PayloadAction<Omit<IChartEvent, "id">>) => {
@@ -107,21 +115,9 @@ export const reportSlice = createSlice({
       state.endDate = action.payload;
     },
 
-    changeDateRanges: (state, action: PayloadAction<number | 'today'>) => {
-      if(action.payload === 'today') {
-        const startDate = new Date()
-        startDate.setHours(0,0,0,0)
-
-        state.startDate = startDate.toISOString();
-        state.endDate = new Date().toISOString();
-        state.interval = 'hour'
-        return state
-      }
-
-      state.startDate = getDaysOldDate(action.payload).toISOString();
-      state.endDate = new Date().toISOString()
-
-      if (action.payload === 1) {
+    changeDateRanges: (state, action: PayloadAction<IChartRange>) => {
+      state.range = action.payload
+      if (action.payload === 0 || action.payload === 1) {
         state.interval = "hour";
       } else if (action.payload <= 30) {
         state.interval = "day";