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