feat(dashboard): project overview header

Author: gregfromstl

apps/dashboard/src/@/components/blocks/app-footer.tsx

@@ -19,7 +19,7 @@ export function AppFooter(props: AppFooterProps) {
   return (
     <footer
       className={cn(
-        "w-full border-border border-t bg-muted/50 py-6 md:py-8",
+        "w-full border-border border-t bg-white py-6 md:py-8 dark:bg-muted/50",
         props.className,
       )}
     >

apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx

@@ -50,7 +50,7 @@ export function DatePickerWithRange(props: {
           id="date"
           variant="outline"
           className={cn(
-            "justify-start gap-2 text-left font-normal",
+            "justify-start gap-2 bg-card text-left font-normal",
             props.className,
           )}
         >

apps/dashboard/src/app/team/[team_slug]/(team)/TeamOverviewPage.tsx

@@ -127,7 +127,7 @@ function ProjectCard(props: {
         <Link
           className="group static before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0"
           // remove /connect when we have overview page
-          href={`/team/${team_slug}/${project.slug}/connect/analytics`}
+          href={`/team/${team_slug}/${project.slug}`}
         >
           <h2 className="font-medium text-base">{project.name}</h2>
         </Link>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectOverviewHeader.tsx

@@ -0,0 +1,19 @@
+import type { Project } from "@/api/projects";
+import { RangeSelector } from "components/analytics/range-selector";
+
+export function ProjectOverviewHeader(props: {
+  project: Project;
+}) {
+  const { project } = props;
+
+  return (
+    <div className="flex flex-col items-start gap-6 py-6 md:h-[120px] md:flex-row md:items-center md:py-0">
+      <div className="flex-1">
+        <h1 className="font-semibold text-3xl text-foreground">
+          {project.name}
+        </h1>
+      </div>
+      <RangeSelector interval="day" />
+    </div>
+  );
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx

@@ -35,7 +35,7 @@ export default async function TeamLayout(props: {
 
   return (
     <div className="flex grow flex-col">
-      <div className="bg-muted/50">
+      <div className="bg-white dark:bg-muted/50">
         <TeamHeader
           currentProject={project}
           currentTeam={team}
@@ -44,6 +44,11 @@ export default async function TeamLayout(props: {
         <TabPathLinks
           tabContainerClassName="px-4 lg:px-6"
           links={[
+            {
+              path: `/team/${props.params.team_slug}/${props.params.project_slug}`,
+              exactMatch: true,
+              name: "Overview",
+            },
             {
               path: `/team/${props.params.team_slug}/${props.params.project_slug}/connect/analytics`,
               name: "Connect",

apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx

@@ -1,11 +1,26 @@
-import { redirect } from "next/navigation";
+import { getProjects } from "@/api/projects";
+import { notFound } from "next/navigation";
+import { ProjectOverviewHeader } from "./components/ProjectOverviewHeader";
 
-export default function ProjectOverviewPage(props: {
+export default async function ProjectOverviewPage(props: {
   params: { team_slug: string; project_slug: string };
+  searchParams: { from: string; to: string; type: string; interval: string };
 }) {
-  // TODO: implement overview page for project
-  // redirect to connect for now
-  redirect(
-    `/team/${props.params.team_slug}/${props.params.project_slug}/connect`,
+  const projects = await getProjects(props.params.team_slug);
+
+  const project = projects.find((p) => p.slug === props.params.project_slug);
+
+  if (!project) {
+    notFound();
+  }
+
+  return (
+    <div>
+      <div className="w-full border-border-800 border-b bg-muted/50 px-6">
+        <div className="container">
+          <ProjectOverviewHeader project={project} />
+        </div>
+      </div>
+    </div>
   );
 }

apps/dashboard/src/components/analytics/date-range-selector.tsx

@@ -107,7 +107,7 @@ const durationPresets = [
   },
 ] as const;
 
-type DurationId = (typeof durationPresets)[number]["id"];
+export type DurationId = (typeof durationPresets)[number]["id"];
 
 export type Range = {
   type: DurationId | "custom";

apps/dashboard/src/components/analytics/range-selector.tsx

@@ -1,23 +1,50 @@
 "use client";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { DateRangeSelector } from "components/analytics/date-range-selector";
-import type { Range } from "components/analytics/date-range-selector";
+import { useQuery } from "@tanstack/react-query";
+import {
+  DateRangeSelector,
+  getLastNDaysRange,
+} from "components/analytics/date-range-selector";
+import type {
+  DurationId,
+  Range,
+} from "components/analytics/date-range-selector";
 import { IntervalSelector } from "components/analytics/interval-selector";
 import { differenceInDays } from "date-fns";
 import { usePathname, useSearchParams } from "next/navigation";
 
 export function RangeSelector({
   range,
   interval,
-}: { range: Range; interval: "day" | "week" }) {
+}: { range?: Range; interval: "day" | "week" }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const router = useDashboardRouter();
 
+  const { data: computedRange } = useQuery({
+    queryKey: ["analytics-range", searchParams?.toString(), range],
+    queryFn: async () => {
+      if (range) {
+        return range;
+      }
+      if (searchParams) {
+        const fromStringified = searchParams.get("from");
+        const from = fromStringified
+          ? new Date(fromStringified)
+          : getLastNDaysRange("last-120").from;
+        const toStringified = searchParams.get("to");
+        const to = toStringified ? new Date(toStringified) : new Date();
+        const type = (searchParams.get("type") as DurationId) || "last-120";
+        return { from, to, type } satisfies Range;
+      }
+      return getLastNDaysRange("last-120");
+    },
+  });
+
   return (
     <div className="flex justify-end gap-3">
       <DateRangeSelector
-        range={range}
+        range={computedRange || getLastNDaysRange("last-120")}
         setRange={(newRange) => {
           const days = differenceInDays(newRange.to, newRange.from);
           const interval = days > 30 ? "week" : "day";