a lot

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

@@ -1,8 +1,9 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { StickyBelowHeader } from '@/app/(app)/layout-sticky-below-header';
 import { LazyChart } from '@/components/report/chart/LazyChart';
+import { ReportRange } from '@/components/report/ReportRange';
 import { Button } from '@/components/ui/button';
 import { Combobox } from '@/components/ui/combobox';
 import {
@@ -19,7 +20,7 @@ import { cn } from '@/utils/cn';
 import { getDefaultIntervalByRange, timeRanges } from '@/utils/constants';
 import { ChevronRight, MoreHorizontal, PlusIcon, Trash } from 'lucide-react';
 import Link from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 
 interface ListReportsProps {
   reports: Awaited<ReturnType<typeof getReportsByDashboardId>>;
@@ -33,17 +34,10 @@ export function ListReports({ reports }: ListReportsProps) {
   return (
     <>
       <StickyBelowHeader className="p-4 items-center justify-between flex">
-        <Combobox
-          className="min-w-0"
+        <ReportRange
           placeholder="Override range"
           value={range}
-          onChange={(value) => {
-            setRange((p) => (p === value ? null : value));
-          }}
-          items={Object.values(timeRanges).map((key) => ({
-            label: key,
-            value: key,
-          }))}
+          onChange={(value) => setRange((p) => (p === value ? null : value))}
         />
         <Button
           icon={PlusIcon}

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

@@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button';
 import { pushModal } from '@/modals';
 import { PlusIcon } from 'lucide-react';
 
-import { StickyBelowHeader } from '../../layout-sticky-below-header';
+import { StickyBelowHeader } from '../../../layout-sticky-below-header';
 
 interface HeaderDashboardsProps {
   projectId: string;

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

@@ -53,7 +53,7 @@ export function ListDashboards({ dashboards }: ListDashboardsProps) {
           <Card key={item.id} hover>
             <div>
               <Link
-                href={`/${organizationId}/${projectId}/${item.id}`}
+                href={`/${organizationId}/${projectId}/dashboards/${item.id}`}
                 className="block p-4 flex flex-col"
               >
                 <span className="font-medium">{item.name}</span>

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

@@ -0,0 +1,25 @@
+import PageLayout from '@/app/(app)/page-layout';
+import { getDashboardsByProjectId } from '@/server/services/dashboard.service';
+
+import { HeaderDashboards } from './header-dashboards';
+import { ListDashboards } from './list-dashboards';
+
+interface PageProps {
+  params: {
+    organizationId: string;
+    projectId: string;
+  };
+}
+
+export default async function Page({
+  params: { organizationId, projectId },
+}: PageProps) {
+  const dashboards = await getDashboardsByProjectId(projectId);
+
+  return (
+    <PageLayout title="Dashboards" organizationId={organizationId}>
+      <HeaderDashboards projectId={projectId} />
+      <ListDashboards dashboards={dashboards} />
+    </PageLayout>
+  );
+}

apps/web/src/app/(app)/[organizationId]/[projectId]/events/event-list-item.tsx

@@ -6,11 +6,9 @@ import { ListProperties } from '@/components/events/ListProperties';
 import { ExpandableListItem } from '@/components/general/ExpandableListItem';
 import { ProfileAvatar } from '@/components/profiles/ProfileAvatar';
 import { useAppParams } from '@/hooks/useAppParams';
-import { cn } from '@/utils/cn';
 import { formatDateTime } from '@/utils/date';
 import { getProfileName } from '@/utils/getters';
 import { round } from '@/utils/math';
-import { Activity, BotIcon, MonitorPlay } from 'lucide-react';
 import Link from 'next/link';
 
 import { EventIcon } from './event-icon';
@@ -48,7 +46,7 @@ export function EventListItem({
 
     switch (name) {
       case 'screen_view': {
-        const route = (properties?.route || properties?.path) as string;
+        const route = (properties?.route || properties?.path)!;
         if (route) {
           bullets.push(route);
         }

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

@@ -0,0 +1,272 @@
+'use client';
+
+import { OverviewFilters } from '@/components/overview/overview-filters';
+import { OverviewFiltersButtons } from '@/components/overview/overview-filters-buttons';
+import OverviewTopDevices from '@/components/overview/overview-top-devices';
+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 { WidgetHead } from '@/components/overview/overview-widget';
+import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
+import { Chart } from '@/components/report/chart';
+import { ReportRange } from '@/components/report/ReportRange';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Widget, WidgetBody } from '@/components/Widget';
+import type { IChartInput } from '@/types';
+import { cn } from '@/utils/cn';
+import { Eye, FilterIcon, Globe2Icon, LockIcon, X } from 'lucide-react';
+import Link from 'next/link';
+
+import { StickyBelowHeader } from '../../layout-sticky-below-header';
+
+export default function OverviewMetrics() {
+  const { previous, range, setRange, interval, metric, setMetric, filters } =
+    useOverviewOptions();
+
+  const reports = [
+    {
+      id: 'Unique visitors',
+      projectId: '', // TODO: Remove
+      events: [
+        {
+          segment: 'user',
+          filters,
+          id: 'A',
+          name: 'session_start',
+          displayName: 'Unique visitors',
+        },
+      ],
+      breakdowns: [],
+      chartType: 'metric',
+      lineType: 'monotone',
+      interval,
+      name: 'Unique visitors',
+      range,
+      previous,
+      metric: 'sum',
+    },
+    {
+      id: 'Total sessions',
+      projectId: '', // TODO: Remove
+      events: [
+        {
+          segment: 'event',
+          filters,
+          id: 'A',
+          name: 'session_start',
+          displayName: 'Total sessions',
+        },
+      ],
+      breakdowns: [],
+      chartType: 'metric',
+      lineType: 'monotone',
+      interval,
+      name: 'Total sessions',
+      range,
+      previous,
+      metric: 'sum',
+    },
+    {
+      id: 'Total pageviews',
+      projectId: '', // TODO: Remove
+      events: [
+        {
+          segment: 'event',
+          filters,
+          id: 'A',
+          name: 'screen_view',
+          displayName: 'Total pageviews',
+        },
+      ],
+      breakdowns: [],
+      chartType: 'metric',
+      lineType: 'monotone',
+      interval,
+      name: 'Total pageviews',
+      range,
+      previous,
+      metric: 'sum',
+    },
+    {
+      id: 'Views per session',
+      projectId: '', // TODO: Remove
+      events: [
+        {
+          segment: 'user_average',
+          filters,
+          id: 'A',
+          name: 'screen_view',
+          displayName: 'Views per session',
+        },
+      ],
+      breakdowns: [],
+      chartType: 'metric',
+      lineType: 'monotone',
+      interval,
+      name: 'Views per session',
+      range,
+      previous,
+      metric: 'average',
+    },
+    {
+      id: 'Bounce rate',
+      projectId: '', // TODO: Remove
+      events: [
+        {
+          segment: 'event',
+          filters: [
+            {
+              id: '1',
+              name: 'properties._bounce',
+              operator: 'is',
+              value: ['true'],
+            },
+            ...filters,
+          ],
+          id: 'A',
+          name: 'session_end',
+          displayName: 'Bounce rate',
+        },
+        {
+          segment: 'event',
+          filters: filters,
+          id: 'B',
+          name: 'session_end',
+        },
+      ],
+      breakdowns: [],
+      chartType: 'metric',
+      lineType: 'monotone',
+      interval,
+      name: 'Bounce rate',
+      range,
+      previous,
+      previousIndicatorInverted: true,
+      formula: 'A/B*100',
+      metric: 'average',
+      unit: '%',
+    },
+    {
+      id: 'Visit duration',
+      projectId: '', // TODO: Remove
+      events: [
+        {
+          segment: 'property_average',
+          filters: [
+            {
+              name: 'duration',
+              operator: 'isNot',
+              value: ['0'],
+              id: 'A',
+            },
+            ...filters,
+          ],
+          id: 'A',
+          property: 'duration',
+          name: 'screen_view',
+          displayName: 'Visit duration',
+        },
+      ],
+      breakdowns: [],
+      chartType: 'metric',
+      lineType: 'monotone',
+      interval,
+      name: 'Visit duration',
+      range,
+      previous,
+      formula: 'A/1000/60',
+      metric: 'average',
+      unit: 'min',
+    },
+  ] satisfies (IChartInput & { id: string })[];
+
+  const selectedMetric = reports[metric]!;
+
+  return (
+    <Sheet>
+      <StickyBelowHeader className="p-4 flex gap-2 justify-between">
+        <ReportRange
+          size="sm"
+          value={range}
+          onChange={(value) => setRange(value)}
+        />
+        <div className="flex-wrap flex gap-2">
+          <OverviewFiltersButtons />
+          <SheetTrigger asChild>
+            <Button size="sm" variant="cta" icon={FilterIcon}>
+              Filters
+            </Button>
+          </SheetTrigger>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="sm" icon={Globe2Icon}>
+                Public
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuGroup>
+                <DropdownMenuItem asChild>
+                  <Link href="http://localhost:3000/share/project/4e2798cb-e255-4e9d-960d-c9ad095aabd7">
+                    <Eye size={16} className="mr-2" />
+                    View
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={(event) => {}}>
+                  <LockIcon size={16} className="mr-2" />
+                  Make private
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </StickyBelowHeader>
+      <div className="p-4 grid gap-4 grid-cols-6">
+        {reports.map((report, index) => (
+          <button
+            key={index}
+            className="relative col-span-6 md:col-span-3 lg:col-span-2 group"
+            onClick={() => {
+              setMetric(index);
+            }}
+          >
+            <Chart hideID {...report} />
+
+            {/* add active border */}
+            <div
+              className={cn(
+                'transition-opacity top-0 left-0 right-0 bottom-0 absolute rounded-md w-full h-full border ring-1 border-chart-0 ring-chart-0',
+                metric === index ? 'opacity-100' : 'opacity-0'
+              )}
+            />
+          </button>
+        ))}
+        <Widget className="col-span-6">
+          <WidgetHead>
+            <div className="title">{selectedMetric.events[0]?.displayName}</div>
+          </WidgetHead>
+          <WidgetBody>
+            <Chart hideID {...selectedMetric} chartType="linear" />
+          </WidgetBody>
+        </Widget>
+        <OverviewTopSources />
+        <OverviewTopPages />
+        <OverviewTopDevices />
+        <OverviewTopGeo />
+        <OverviewTopEvents />
+      </div>
+
+      <SheetContent className="!max-w-lg w-full" side="left">
+        <OverviewFilters />
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -1,8 +1,6 @@
 import PageLayout from '@/app/(app)/page-layout';
-import { getDashboardsByProjectId } from '@/server/services/dashboard.service';
 
-import { HeaderDashboards } from './header-dashboards';
-import { ListDashboards } from './list-dashboards';
+import OverviewMetrics from './overview-metrics';
 
 interface PageProps {
   params: {
@@ -11,15 +9,10 @@ interface PageProps {
   };
 }
 
-export default async function Page({
-  params: { organizationId, projectId },
-}: PageProps) {
-  const dashboards = await getDashboardsByProjectId(projectId);
-
+export default function Page({ params: { organizationId } }: PageProps) {
   return (
-    <PageLayout title="Dashboards" organizationId={organizationId}>
-      <HeaderDashboards projectId={projectId} />
-      <ListDashboards dashboards={dashboards} />
+    <PageLayout title="Overview" organizationId={organizationId}>
+      <OverviewMetrics />
     </PageLayout>
   );
 }

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

@@ -1,12 +1,12 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
-import { api } from '@/app/_trpc/client';
+import { useEffect } from 'react';
 import { StickyBelowHeader } from '@/app/(app)/layout-sticky-below-header';
 import { Chart } from '@/components/report/chart';
 import { ReportChartType } from '@/components/report/ReportChartType';
 import { ReportInterval } from '@/components/report/ReportInterval';
 import { ReportLineType } from '@/components/report/ReportLineType';
+import { ReportRange } from '@/components/report/ReportRange';
 import { ReportSaveButton } from '@/components/report/ReportSaveButton';
 import {
   changeDateRanges,
@@ -58,17 +58,12 @@ export default function ReportEditor({
         </SheetTrigger>
         <div className="grid grid-cols-2 md:grid-cols-4 gap-2 col-span-4">
           <ReportChartType className="min-w-0 flex-1" />
-          <Combobox
+          <ReportRange
             className="min-w-0 flex-1"
-            placeholder="Range"
             value={report.range}
             onChange={(value) => {
               dispatch(changeDateRanges(value));
             }}
-            items={Object.values(timeRanges).map((key) => ({
-              label: key,
-              value: key,
-            }))}
           />
           <ReportInterval className="min-w-0 flex-1" />
           <ReportLineType className="min-w-0 flex-1" />

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

@@ -1,4 +1,4 @@
-import { getFirstProjectByOrganizationId } from '@/server/services/project.service';
+import { getProjectWithMostEvents } from '@/server/services/project.service';
 import { redirect } from 'next/navigation';
 
 interface PageProps {
@@ -8,10 +8,11 @@ interface PageProps {
 }
 
 export default async function Page({ params: { organizationId } }: PageProps) {
-  const project = await getFirstProjectByOrganizationId(organizationId);
+  const project = await getProjectWithMostEvents(organizationId);
+
   if (project) {
     return redirect(`/${organizationId}/${project.id}`);
   }
 
-  return <p>List projects maybe?</p>;
+  return null;
 }

apps/web/src/app/(app)/layout-menu.tsx

@@ -2,14 +2,17 @@
 
 import { useAppParams } from '@/hooks/useAppParams';
 import type { IServiceRecentDashboards } from '@/server/services/dashboard.service';
+import { cn } from '@/utils/cn';
 import {
   BuildingIcon,
   CogIcon,
+  DotIcon,
   GanttChartIcon,
   KeySquareIcon,
   LayoutPanelTopIcon,
   UserIcon,
   UsersIcon,
+  WallpaperIcon,
   WarehouseIcon,
 } from 'lucide-react';
 import type { LucideProps } from 'lucide-react';
@@ -20,18 +23,32 @@ function LinkWithIcon({
   href,
   icon: Icon,
   label,
+  active: overrideActive,
 }: {
   href: string;
   icon: React.ElementType<LucideProps>;
   label: React.ReactNode;
+  active?: boolean;
 }) {
+  const pathname = usePathname();
+  const active = overrideActive || href === pathname;
   return (
     <Link
-      className="flex gap-2 items-center px-3 py-3 transition-colors hover:bg-slate-100 leading-none rounded-lg"
+      className={cn(
+        'text-slate-600 flex gap-2 items-center px-3 py-3 transition-colors hover:text-white hover:bg-blue-700 leading-none rounded-lg',
+        active && 'bg-blue-600 text-white'
+      )}
       href={href}
     >
       <Icon size={20} />
-      {label}
+      <div className="flex-1">{label}</div>
+      <DotIcon
+        size={20}
+        className={cn(
+          'transition-opacity',
+          active ? 'opacity-100' : 'opacity-0'
+        )}
+      />
     </Link>
   );
 }
@@ -53,10 +70,15 @@ export default function LayoutMenu({
 
   return (
     <>
+      <LinkWithIcon
+        icon={WallpaperIcon}
+        label="Overview"
+        href={`/${params.organizationId}/${projectId}`}
+      />
       <LinkWithIcon
         icon={LayoutPanelTopIcon}
         label="Dashboards"
-        href={`/${params.organizationId}/${projectId}`}
+        href={`/${params.organizationId}/${projectId}/dashboards`}
       />
       <LinkWithIcon
         icon={GanttChartIcon}

apps/web/src/app/(app)/layout-sticky-below-header.tsx

@@ -12,7 +12,7 @@ export function StickyBelowHeader({
   return (
     <div
       className={cn(
-        'md:sticky top-16 bg-white border-b border-border z-10',
+        'md:sticky bg-white border-b border-border z-10 [[id=dashboard]_&]:top-16 [[id=dashboard]_&]:rounded-none rounded-lg top-0',
         className
       )}
     >

apps/web/src/app/(app)/layout.tsx

@@ -2,6 +2,7 @@ import { getSession } from '@/server/auth';
 import { getRecentDashboardsByUserId } from '@/server/services/dashboard.service';
 import { getOrganizations } from '@/server/services/organization.service';
 
+import Auth from '../auth';
 import { LayoutSidebar } from './layout-sidebar';
 
 interface AppLayoutProps {
@@ -15,8 +16,12 @@ export default async function AppLayout({ children }: AppLayoutProps) {
     ? await getRecentDashboardsByUserId(session?.user.id)
     : [];
 
+  if (!session) {
+    return <Auth />;
+  }
+
   return (
-    <div>
+    <div id="dashboard">
       <LayoutSidebar {...{ organizations, recentDashboards }} />
       <div className="lg:pl-72 transition-all">{children}</div>
     </div>