ability to use custom dates everywhere

apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/[dashboardId]/list-reports.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import { useState } from 'react';
 import { StickyBelowHeader } from '@/app/(app)/[organizationId]/[projectId]/layout-sticky-below-header';
+import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
 import { LazyChart } from '@/components/report/chart/LazyChart';
-import { ReportRange } from '@/components/report/ReportRange';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -18,9 +17,13 @@ import { ChevronRight, MoreHorizontal, PlusIcon, Trash } from 'lucide-react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
-import { getDefaultIntervalByRange } from '@mixan/constants';
+import {
+  getDefaultIntervalByDates,
+  getDefaultIntervalByRange,
+} from '@mixan/constants';
 import type { getReportsByDashboardId } from '@mixan/db';
-import type { IChartRange } from '@mixan/validation';
+
+import { OverviewReportRange } from '../../overview-sticky-header';
 
 interface ListReportsProps {
   reports: Awaited<ReturnType<typeof getReportsByDashboardId>>;
@@ -29,16 +32,12 @@ interface ListReportsProps {
 export function ListReports({ reports }: ListReportsProps) {
   const router = useRouter();
   const params = useAppParams<{ dashboardId: string }>();
-  const [range, setRange] = useState<null | IChartRange>(null);
+  const { range, startDate, endDate } = useOverviewOptions();
 
   return (
     <>
       <StickyBelowHeader className="p-4 items-center justify-between flex">
-        <ReportRange
+        <OverviewReportRange />
-          placeholder="Override range"
-          value={range}
-          onChange={(value) => setRange((p) => (p === value ? null : value))}
-        />
         <Button
           icon={PlusIcon}
           onClick={() => {
@@ -72,10 +71,20 @@ export function ListReports({ reports }: ListReportsProps) {
                   <div className="font-medium">{report.name}</div>
                   {chartRange !== null && (
                     <div className="mt-2 text-sm flex gap-2">
-                      <span className={range !== null ? 'line-through' : ''}>
+                      <span
+                        className={
+                          range !== null || (startDate && endDate)
+                            ? 'line-through'
+                            : ''
+                        }
+                      >
                         {chartRange}
                       </span>
-                      {range !== null && <span>{range}</span>}
+                      {startDate && endDate ? (
+                        <span>Custom dates</span>
+                      ) : (
+                        range !== null && <span>{range}</span>
+                      )}
                     </div>
                   )}
                 </div>
@@ -116,8 +125,11 @@ export function ListReports({ reports }: ListReportsProps) {
                 <LazyChart
                   {...report}
                   range={range ?? report.range}
+                  startDate={startDate}
+                  endDate={endDate}
                   interval={
-                    range ? getDefaultIntervalByRange(range) : report.interval
+                    getDefaultIntervalByDates(startDate, endDate) ||
+                    (range ? getDefaultIntervalByRange(range) : report.interval)
                   }
                   editMode={false}
                 />

apps/web/src/app/(app)/[organizationId]/[projectId]/overview-metrics.tsx

@@ -14,13 +14,16 @@ interface OverviewMetricsProps {
 }
 
 export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
-  const { previous, range, interval, metric, setMetric } = useOverviewOptions();
+  const { previous, range, interval, metric, setMetric, startDate, endDate } =
+    useOverviewOptions();
   const [filters] = useEventQueryFilters();
 
   const reports = [
     {
       id: 'Visitors',
       projectId,
+      startDate,
+      endDate,
       events: [
         {
           segment: 'user',
@@ -42,6 +45,8 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
     {
       id: 'Sessions',
       projectId,
+      startDate,
+      endDate,
       events: [
         {
           segment: 'event',
@@ -63,6 +68,8 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
     {
       id: 'Pageviews',
       projectId,
+      startDate,
+      endDate,
       events: [
         {
           segment: 'event',
@@ -84,6 +91,8 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
     {
       id: 'Views per session',
       projectId,
+      startDate,
+      endDate,
       events: [
         {
           segment: 'user_average',
@@ -105,6 +114,8 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
     {
       id: 'Bounce rate',
       projectId,
+      startDate,
+      endDate,
       events: [
         {
           segment: 'event',
@@ -143,6 +154,8 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
     {
       id: 'Visit duration',
       projectId,
+      startDate,
+      endDate,
       events: [
         {
           segment: 'property_average',

apps/web/src/app/(app)/[organizationId]/[projectId]/overview-sticky-header.tsx

@@ -2,8 +2,36 @@
 
 import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
 import { ReportRange } from '@/components/report/ReportRange';
+import { endOfDay, startOfDay } from 'date-fns';
 
 export function OverviewReportRange() {
-  const { range, setRange } = useOverviewOptions();
+  const { range, setRange, setEndDate, setStartDate, startDate, endDate } =
-  return <ReportRange value={range} onChange={(value) => setRange(value)} />;
+    useOverviewOptions();
+  return (
+    <ReportRange
+      range={range}
+      onRangeChange={(value) => {
+        setRange(value);
+        setStartDate(null);
+        setEndDate(null);
+      }}
+      dates={{
+        startDate,
+        endDate,
+      }}
+      onDatesChange={(val) => {
+        if (!val) return;
+
+        if (val.from && val.to) {
+          setRange(null);
+          setStartDate(startOfDay(val.from).toISOString());
+          setEndDate(endOfDay(val.to).toISOString());
+        } else if (val.from) {
+          setStartDate(startOfDay(val.from).toISOString());
+        } else if (val.to) {
+          setEndDate(endOfDay(val.to).toISOString());
+        }
+      }}
+    />
+  );
 }

apps/web/src/app/(app)/[organizationId]/[projectId]/page.tsx

@@ -9,7 +9,6 @@ import OverviewTopEvents from '@/components/overview/overview-top-events';
 import OverviewTopGeo from '@/components/overview/overview-top-geo';
 import OverviewTopPages from '@/components/overview/overview-top-pages';
 import OverviewTopSources from '@/components/overview/overview-top-sources';
-import { Dialog } from '@/components/ui/dialog';
 import { getExists } from '@/server/pageExists';
 
 import { db } from '@mixan/db';

apps/web/src/app/(app)/[organizationId]/[projectId]/profiles/[profileId]/page.tsx

@@ -1,10 +1,8 @@
 import PageLayout from '@/app/(app)/[organizationId]/[projectId]/page-layout';
-import { ListProperties } from '@/components/events/ListProperties';
 import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
 import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
 import { ProfileAvatar } from '@/components/profiles/ProfileAvatar';
 import { ChartSwitch } from '@/components/report/chart';
-import { GradientBackground } from '@/components/ui/gradient-background';
 import { KeyValue } from '@/components/ui/key-value';
 import { Widget, WidgetBody, WidgetHead } from '@/components/Widget';
 import {
@@ -12,25 +10,21 @@ import {
   eventQueryNamesFilter,
 } from '@/hooks/useEventQueryFilters';
 import { getExists } from '@/server/pageExists';
-import { formatDateTime } from '@/utils/date';
 import { getProfileName } from '@/utils/getters';
 import { notFound } from 'next/navigation';
-import { parseAsInteger } from 'nuqs';
+import { parseAsInteger, parseAsString } from 'nuqs';
 
 import type { GetEventListOptions } from '@mixan/db';
 import {
   getConversionEventNames,
   getEventList,
-  getEventMeta,
   getEventsCount,
   getProfileById,
-  getProfilesByExternalId,
 } from '@mixan/db';
-import type { IChartInput } from '@mixan/validation';
+import type { IChartEvent, IChartInput } from '@mixan/validation';
 
 import { EventList } from '../../events/event-list';
 import { StickyBelowHeader } from '../../layout-sticky-below-header';
-import ListProfileEvents from './list-profile-events';
 
 interface PageProps {
   params: {
@@ -42,6 +36,8 @@ interface PageProps {
     events?: string;
     cursor?: string;
     f?: string;
+    startDate: string;
+    endDate: string;
   };
 }
 
@@ -57,6 +53,8 @@ export default async function Page({
     events: eventQueryNamesFilter.parse(searchParams.events ?? ''),
     filters: eventQueryFiltersParser.parse(searchParams.f ?? '') ?? undefined,
   };
+  const startDate = parseAsString.parse(searchParams.startDate);
+  const endDate = parseAsString.parse(searchParams.endDate);
   const [profile, events, count, conversions] = await Promise.all([
     getProfileById(profileId),
     getEventList(eventListOptions),
@@ -65,7 +63,7 @@ export default async function Page({
     getExists(organizationId, projectId),
   ]);
 
-  const chartSelectedEvents = [
+  const chartSelectedEvents: IChartEvent[] = [
     {
       segment: 'event',
       filters: [
@@ -107,6 +105,8 @@ export default async function Page({
 
   const profileChart: IChartInput = {
     projectId,
+    startDate,
+    endDate,
     chartType: 'histogram',
     events: chartSelectedEvents,
     breakdowns: [],

apps/web/src/app/(app)/[organizationId]/[projectId]/reports/report-editor.tsx

@@ -10,6 +10,9 @@ import { ReportRange } from '@/components/report/ReportRange';
 import { ReportSaveButton } from '@/components/report/ReportSaveButton';
 import {
   changeDateRanges,
+  changeDates,
+  changeEndDate,
+  changeStartDate,
   ready,
   reset,
   setReport,
@@ -19,6 +22,7 @@ import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useDispatch, useSelector } from '@/redux';
+import { endOfDay, startOfDay } from 'date-fns';
 import { GanttChartSquareIcon } from 'lucide-react';
 
 import type { IServiceReport } from '@mixan/db';
@@ -61,10 +65,30 @@ export default function ReportEditor({
           <ReportChartType className="min-w-0 flex-1" />
           <ReportRange
             className="min-w-0 flex-1"
-            value={report.range}
+            range={report.range}
-            onChange={(value) => {
+            onRangeChange={(value) => {
               dispatch(changeDateRanges(value));
             }}
+            dates={{
+              startDate: report.startDate,
+              endDate: report.endDate,
+            }}
+            onDatesChange={(val) => {
+              if (!val) return;
+
+              if (val.from && val.to) {
+                dispatch(
+                  changeDates({
+                    startDate: startOfDay(val.from).toISOString(),
+                    endDate: endOfDay(val.to).toISOString(),
+                  })
+                );
+              } else if (val.from) {
+                dispatch(changeStartDate(startOfDay(val.from).toISOString()));
+              } else if (val.to) {
+                dispatch(changeEndDate(endOfDay(val.to).toISOString()));
+              }
+            }}
           />
           <ReportInterval className="min-w-0 flex-1" />
           <ReportLineType className="min-w-0 flex-1" />

apps/web/src/components/overview/overview-top-devices.tsx

@@ -15,7 +15,8 @@ interface OverviewTopDevicesProps {
 export default function OverviewTopDevices({
   projectId,
 }: OverviewTopDevicesProps) {
-  const { interval, range, previous } = useOverviewOptions();
+  const { interval, range, previous, startDate, endDate } =
+    useOverviewOptions();
   const [filters, setFilter] = useEventQueryFilters();
   const [widget, setWidget, widgets] = useOverviewWidget('tech', {
     devices: {
@@ -23,6 +24,8 @@ export default function OverviewTopDevices({
       btn: 'Devices',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'user',
@@ -51,6 +54,8 @@ export default function OverviewTopDevices({
       btn: 'Browser',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'user',
@@ -79,6 +84,8 @@ export default function OverviewTopDevices({
       btn: 'Browser Version',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'user',
@@ -107,6 +114,8 @@ export default function OverviewTopDevices({
       btn: 'OS',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'user',
@@ -135,6 +144,8 @@ export default function OverviewTopDevices({
       btn: 'OS Version',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'user',

apps/web/src/components/overview/overview-top-events.tsx

@@ -15,7 +15,8 @@ interface OverviewTopEventsProps {
 export default function OverviewTopEvents({
   projectId,
 }: OverviewTopEventsProps) {
-  const { interval, range, previous } = useOverviewOptions();
+  const { interval, range, previous, startDate, endDate } =
+    useOverviewOptions();
   const [filters] = useEventQueryFilters();
   const [widget, setWidget, widgets] = useOverviewWidget('ev', {
     all: {
@@ -23,6 +24,8 @@ export default function OverviewTopEvents({
       btn: 'All',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'event',

apps/web/src/components/overview/overview-top-geo.tsx

@@ -13,7 +13,8 @@ interface OverviewTopGeoProps {
   projectId: string;
 }
 export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
-  const { interval, range, previous } = useOverviewOptions();
+  const { interval, range, previous, startDate, endDate } =
+    useOverviewOptions();
   const [filters, setFilter] = useEventQueryFilters();
   const [widget, setWidget, widgets] = useOverviewWidget('geo', {
     map: {
@@ -21,6 +22,8 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
       btn: 'Map',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'event',
@@ -49,6 +52,8 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
       btn: 'Countries',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'event',
@@ -77,6 +82,8 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
       btn: 'Regions',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'event',
@@ -105,6 +112,8 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
       btn: 'Cities',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'event',

apps/web/src/components/overview/overview-top-pages.tsx

@@ -13,7 +13,8 @@ interface OverviewTopPagesProps {
   projectId: string;
 }
 export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
-  const { interval, range, previous } = useOverviewOptions();
+  const { interval, range, previous, startDate, endDate } =
+    useOverviewOptions();
   const [filters, setFilter] = useEventQueryFilters();
   const [widget, setWidget, widgets] = useOverviewWidget('pages', {
     top: {
@@ -21,6 +22,8 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
       btn: 'Top pages',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'event',
@@ -49,6 +52,8 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
       btn: 'Entries',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'event',
@@ -77,6 +82,8 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
       btn: 'Exits',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'event',

apps/web/src/components/overview/overview-top-sources.tsx

@@ -15,7 +15,8 @@ interface OverviewTopSourcesProps {
 export default function OverviewTopSources({
   projectId,
 }: OverviewTopSourcesProps) {
-  const { interval, range, previous } = useOverviewOptions();
+  const { interval, range, previous, startDate, endDate } =
+    useOverviewOptions();
   const [filters, setFilter] = useEventQueryFilters();
   const [widget, setWidget, widgets] = useOverviewWidget('sources', {
     all: {
@@ -23,6 +24,8 @@ export default function OverviewTopSources({
       btn: 'All',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'event',
@@ -51,6 +54,8 @@ export default function OverviewTopSources({
       btn: 'URLs',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'event',
@@ -79,6 +84,8 @@ export default function OverviewTopSources({
       btn: 'Types',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'event',
@@ -107,6 +114,8 @@ export default function OverviewTopSources({
       btn: 'Source',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'event',
@@ -135,6 +144,8 @@ export default function OverviewTopSources({
       btn: 'Medium',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'event',
@@ -163,6 +174,8 @@ export default function OverviewTopSources({
       btn: 'Campaign',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'event',
@@ -191,6 +204,8 @@ export default function OverviewTopSources({
       btn: 'Term',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'event',
@@ -219,6 +234,8 @@ export default function OverviewTopSources({
       btn: 'Content',
       chart: {
         projectId,
+        startDate,
+        endDate,
         events: [
           {
             segment: 'event',

apps/web/src/components/overview/useOverviewOptions.ts

@@ -1,11 +1,17 @@
+import { useEffect } from 'react';
 import {
   parseAsBoolean,
   parseAsInteger,
+  parseAsString,
   parseAsStringEnum,
   useQueryState,
 } from 'nuqs';
 
-import { getDefaultIntervalByRange, timeRanges } from '@mixan/constants';
+import {
+  getDefaultIntervalByDates,
+  getDefaultIntervalByRange,
+  timeRanges,
+} from '@mixan/constants';
 import { mapKeys } from '@mixan/validation';
 
 const nuqsOptions = { history: 'push' } as const;
@@ -15,13 +21,25 @@ export function useOverviewOptions() {
     'compare',
     parseAsBoolean.withDefault(true).withOptions(nuqsOptions)
   );
+  const [startDate, setStartDate] = useQueryState(
+    'start',
+    parseAsString.withOptions(nuqsOptions)
+  );
+  const [endDate, setEndDate] = useQueryState(
+    'end',
+    parseAsString.withOptions(nuqsOptions)
+  );
   const [range, setRange] = useQueryState(
     'range',
     parseAsStringEnum(mapKeys(timeRanges))
       .withDefault('7d')
       .withOptions(nuqsOptions)
   );
-  const interval = getDefaultIntervalByRange(range);
+
+  const interval =
+    getDefaultIntervalByDates(startDate, endDate) ||
+    getDefaultIntervalByRange(range);
+
   const [metric, setMetric] = useQueryState(
     'metric',
     parseAsInteger.withDefault(0).withOptions(nuqsOptions)
@@ -40,6 +58,10 @@ export function useOverviewOptions() {
     setRange,
     metric,
     setMetric,
+    startDate,
+    setStartDate,
+    endDate,
+    setEndDate,
 
     // Computed
     interval,

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

@@ -7,48 +7,32 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { useBreakpoint } from '@/hooks/useBreakpoint';
-import { pushModal } from '@/modals';
 import { useDispatch, useSelector } from '@/redux';
 import { cn } from '@/utils/cn';
-import { addDays, endOfDay, format, startOfDay, subDays } from 'date-fns';
+import { endOfDay, format, startOfDay } from 'date-fns';
 import { CalendarIcon, ChevronsUpDownIcon } from 'lucide-react';
-import type { DateRange, SelectRangeEventHandler } from 'react-day-picker';
+import type { SelectRangeEventHandler } from 'react-day-picker';
 
 import { timeRanges } from '@mixan/constants';
 import type { IChartRange } from '@mixan/validation';
 
 import type { ExtendedComboboxProps } from '../ui/combobox';
-import { Combobox } from '../ui/combobox';
 import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group';
 import { changeDates, changeEndDate, changeStartDate } from './reportSlice';
 
 export function ReportRange({
-  onChange,
+  range,
-  value,
+  onRangeChange,
+  onDatesChange,
+  dates,
   className,
   ...props
-}: ExtendedComboboxProps<IChartRange>) {
+}: {
-  const dispatch = useDispatch();
+  range: IChartRange;
-  const startDate = useSelector((state) => state.report.startDate);
+  onRangeChange: (range: IChartRange) => void;
-  const endDate = useSelector((state) => state.report.endDate);
+  onDatesChange: SelectRangeEventHandler;
-
+  dates: { startDate: string | null; endDate: string | null };
-  const setDate: SelectRangeEventHandler = (val) => {
+} & Omit<ExtendedComboboxProps<string>, 'value' | 'onChange'>) {
-    if (!val) return;
-
-    if (val.from && val.to) {
-      dispatch(
-        changeDates({
-          startDate: startOfDay(val.from).toISOString(),
-          endDate: endOfDay(val.to).toISOString(),
-        })
-      );
-    } else if (val.from) {
-      dispatch(changeStartDate(startOfDay(val.from).toISOString()));
-    } else if (val.to) {
-      dispatch(changeEndDate(endOfDay(val.to).toISOString()));
-    }
-  };
-
   const { isBelowSm } = useBreakpoint('sm');
 
   return (
@@ -63,16 +47,17 @@ export function ReportRange({
             {...props}
           >
             <span className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
-              {startDate ? (
+              {dates.startDate ? (
-                endDate ? (
+                dates.endDate ? (
                   <>
-                    {format(startDate, 'LLL dd')} - {format(endDate, 'LLL dd')}
+                    {format(dates.startDate, 'LLL dd')} -{' '}
+                    {format(dates.endDate, 'LLL dd')}
                   </>
                 ) : (
-                  format(startDate, 'LLL dd, y')
+                  format(dates.startDate, 'LLL dd, y')
                 )
               ) : (
-                <span>{value}</span>
+                <span>{range}</span>
               )}
             </span>
             <ChevronsUpDownIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
@@ -81,9 +66,9 @@ export function ReportRange({
         <PopoverContent className="w-auto p-0" align="start">
           <div className="p-4 border-b border-border">
             <ToggleGroup
-              value={value}
+              value={range}
               onValueChange={(value) => {
-                if (value) onChange(value);
+                if (value) onRangeChange(value as IChartRange);
               }}
               type="single"
               variant="outline"
@@ -99,12 +84,14 @@ export function ReportRange({
           <Calendar
             initialFocus
             mode="range"
-            defaultMonth={startDate ? new Date(startDate) : new Date()}
+            defaultMonth={
+              dates.startDate ? new Date(dates.startDate) : new Date()
+            }
             selected={{
-              from: startDate ? new Date(startDate) : undefined,
+              from: dates.startDate ? new Date(dates.startDate) : undefined,
-              to: endDate ? new Date(endDate) : undefined,
+              to: dates.endDate ? new Date(dates.endDate) : undefined,
             }}
-            onSelect={setDate}
+            onSelect={onDatesChange}
             numberOfMonths={isBelowSm ? 1 : 2}
             className="[&_table]:mx-auto [&_table]:w-auto"
           />

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

@@ -5,6 +5,7 @@ import { isSameDay, isSameMonth } from 'date-fns';
 
 import {
   alphabetIds,
+  getDefaultIntervalByDates,
   getDefaultIntervalByRange,
   isHourIntervalEnabledByRange,
   isMinuteIntervalEnabledByRange,
@@ -39,8 +40,8 @@ const initialState: InitialState = {
   breakdowns: [],
   events: [],
   range: '1m',
-  startDate: new Date('2024-02-24 00:00:00').toISOString(),
+  startDate: null,
-  endDate: new Date('2024-02-24 23:59:59').toISOString(),
+  endDate: null,
   previous: false,
   formula: undefined,
   unit: undefined,
@@ -205,14 +206,12 @@ export const reportSlice = createSlice({
       state.dirty = true;
       state.startDate = action.payload;
 
-      if (state.startDate && state.endDate) {
+      const interval = getDefaultIntervalByDates(
-        if (isSameDay(state.startDate, state.endDate)) {
+        state.startDate,
-          state.interval = 'hour';
+        state.endDate
-        } else if (isSameMonth(state.startDate, state.endDate)) {
+      );
-          state.interval = 'day';
+      if (interval) {
-        } else {
+        state.interval = interval;
-          state.interval = 'month';
-        }
       }
     },
 
@@ -221,14 +220,12 @@ export const reportSlice = createSlice({
       state.dirty = true;
       state.endDate = action.payload;
 
-      if (state.startDate && state.endDate) {
+      const interval = getDefaultIntervalByDates(
-        if (isSameDay(state.startDate, state.endDate)) {
+        state.startDate,
-          state.interval = 'hour';
+        state.endDate
-        } else if (isSameMonth(state.startDate, state.endDate)) {
+      );
-          state.interval = 'day';
+      if (interval) {
-        } else {
+        state.interval = interval;
-          state.interval = 'month';
-        }
       }
     },
 

apps/web/src/components/ui/key-value.tsx

@@ -1,9 +1,10 @@
+import { isValidElement } from 'react';
 import { cn } from '@/utils/cn';
 import Link from 'next/link';
 
 interface KeyValueProps {
   name: string;
-  value: string | number | undefined;
+  value: unknown;
   onClick?: () => void;
   href?: string;
 }
@@ -11,6 +12,10 @@ interface KeyValueProps {
 export function KeyValue({ href, onClick, name, value }: KeyValueProps) {
   const clickable = href || onClick;
   const Component = href ? (Link as any) : onClick ? 'button' : 'div';
+  if (!isValidElement(value)) {
+    return null;
+  }
+
   return (
     <Component
       className={cn(
@@ -35,6 +40,10 @@ export function KeyValue({ href, onClick, name, value }: KeyValueProps) {
 export function KeyValueSubtle({ href, onClick, name, value }: KeyValueProps) {
   const clickable = href || onClick;
   const Component = href ? (Link as any) : onClick ? 'button' : 'div';
+  if (!isValidElement(value)) {
+    return null;
+  }
+
   return (
     <Component
       className="group flex text-[10px] sm:text-xs gap-2 font-medium self-start min-w-0 max-w-full items-center"

packages/constants/index.ts

@@ -1,3 +1,5 @@
+import { isSameDay, isSameMonth } from 'date-fns';
+
 export const NOT_SET_VALUE = '(not set)';
 
 export const operators = {
@@ -100,3 +102,19 @@ export function getDefaultIntervalByRange(
   }
   return 'month';
 }
+
+export function getDefaultIntervalByDates(
+  startDate: string | null,
+  endDate: string | null
+): null | keyof typeof intervals {
+  if (startDate && endDate) {
+    if (isSameDay(startDate, endDate)) {
+      return 'hour';
+    } else if (isSameMonth(startDate, endDate)) {
+      return 'day';
+    }
+    return 'month';
+  }
+
+  return null;
+}

packages/constants/package.json

@@ -11,6 +11,7 @@
     "@mixan/eslint-config": "workspace:*",
     "@mixan/prettier-config": "workspace:*",
     "@mixan/tsconfig": "workspace:*",
+    "date-fns": "^3.3.1",
     "eslint": "^8.48.0",
     "prettier": "^3.0.3",
     "prisma": "^5.1.1",

packages/db/clickhouse_tables.sql

@@ -40,7 +40,7 @@ CREATE TABLE openpanel.events_bots (
 ORDER BY
   (project_id, created_at) SETTINGS index_granularity = 8192;
 
-CREATE TABLE profiles (
+CREATE TABLE openpanel.profiles (
   `id` String,
   `external_id` String,
   `first_name` String,

pnpm-lock.yaml

@@ -716,6 +716,9 @@ importers:
       '@mixan/tsconfig':
         specifier: workspace:*
         version: link:../../tooling/typescript
+      date-fns:
+        specifier: ^3.3.1
+        version: 3.3.1
       eslint:
         specifier: ^8.48.0
         version: 8.56.0
@@ -7947,7 +7950,6 @@ packages:
 
   /date-fns@3.3.1:
     resolution: {integrity: sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==}
-    dev: false
 
   /dayjs@1.11.10:
     resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}