feature(dashboard): add interval picker to the overview page

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

@@ -32,7 +32,7 @@ import {
 } from '@openpanel/constants';
 import type { IServiceDashboard, getReportsByDashboardId } from '@openpanel/db';
 
-import { OverviewReportRange } from '../../overview-sticky-header';
+import { OverviewRange } from '@/components/overview/overview-range';
 
 interface ListReportsProps {
   reports: Awaited<ReturnType<typeof getReportsByDashboardId>>;
@@ -55,7 +55,7 @@ export function ListReports({ reports, dashboard }: ListReportsProps) {
       <div className="row mb-4 items-center justify-between">
         <h1 className="text-3xl font-semibold">{dashboard.name}</h1>
         <div className="flex items-center justify-end gap-2">
-          <OverviewReportRange />
+          <OverviewRange />
           <Button
             icon={PlusIcon}
             onClick={() => {

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/overview-sticky-header.tsx

@@ -1,27 +0,0 @@
-'use client';
-
-import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
-import { TimeWindowPicker } from '@/components/time-window-picker';
-import { endOfDay, formatISO, startOfDay } from 'date-fns';
-
-export function OverviewReportRange() {
-  const { range, setRange, setStartDate, setEndDate, endDate, startDate } =
-    useOverviewOptions();
-
-  return (
-    <TimeWindowPicker
-      onChange={setRange}
-      value={range}
-      onStartDateChange={(date) => {
-        const d = formatISO(startOfDay(new Date(date)));
-        setStartDate(d);
-      }}
-      onEndDateChange={(date) => {
-        const d = formatISO(endOfDay(new Date(date)));
-        setEndDate(d);
-      }}
-      endDate={endDate}
-      startDate={startDate}
-    />
-  );
-}

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx

@@ -9,7 +9,8 @@ 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 { OverviewReportRange } from './overview-sticky-header';
+import { OverviewInterval } from '@/components/overview/overview-interval';
+import { OverviewRange } from '@/components/overview/overview-range';
 
 interface PageProps {
   params: {
@@ -23,7 +24,8 @@ export default function Page({ params: { projectId } }: PageProps) {
       <div className="col gap-2 p-4">
         <div className="flex justify-between gap-2">
           <div className="flex gap-2">
-            <OverviewReportRange />
+            <OverviewRange />
+            <OverviewInterval />
             <OverviewFiltersDrawer projectId={projectId} mode="events" />
           </div>
           <div className="flex gap-2">

apps/dashboard/src/app/(public)/share/overview/[id]/page.tsx

@@ -1,5 +1,4 @@
 import { StickyBelowHeader } from '@/app/(app)/[organizationSlug]/[projectId]/layout-sticky-below-header';
-import { OverviewReportRange } from '@/app/(app)/[organizationSlug]/[projectId]/overview-sticky-header';
 import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
 import ServerLiveCounter from '@/components/overview/live-counter';
 import OverviewMetrics from '@/components/overview/overview-metrics';
@@ -10,6 +9,7 @@ import OverviewTopPages from '@/components/overview/overview-top-pages';
 import OverviewTopSources from '@/components/overview/overview-top-sources';
 import { notFound } from 'next/navigation';
 
+import { OverviewRange } from '@/components/overview/overview-range';
 import { getOrganizationBySlug, getShareOverviewById } from '@openpanel/db';
 
 interface PageProps {
@@ -56,7 +56,7 @@ export default async function Page({
         <StickyBelowHeader>
           <div className="flex justify-between gap-2 p-4">
             <div className="flex gap-2">
-              <OverviewReportRange />
+              <OverviewRange />
             </div>
             <div className="flex gap-2">
               <ServerLiveCounter projectId={projectId} />