From 880c3453ee8fc0fabbde0afb752a17894cd579a0 Mon Sep 17 00:00:00 2001
From: gregfromstl <gregfromstl@gmail.com>
Date: Tue, 5 Nov 2024 21:53:29 +0000
Subject: [PATCH] [Dashboard] Feature: Overview Page Empty State (#5312)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Completes:
- CNCT-2181
- CNCT-2175

Adds the Project Overview page empty state, set to "Coming Soon" copy for now

![Screenshot 2024-11-05 at 12 44 44 PM](https://github.com/user-attachments/assets/25289323-777c-41a6-b51d-2a7cf795bb37)

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on enhancing UI components, improving type exports, and refining styles across various files in the application. It introduces new features and fixes, particularly in the `ProjectOverviewHeader` and `EmptyState` components, while updating SVG assets.

### Detailed summary
- Updated `className` styles in `DatePickerWithRange` and `app-footer`.
- Exported `DurationId` type in `date-range-selector`.
- Added background styling in `layout.tsx`.
- Made `projectStub` function exportable.
- Adjusted CSS variables for light and dark themes in `globals.css`.
- Modified routing in `TeamOverviewPage` and `ProjectOverviewPage`.
- Enhanced `RangeSelector` to handle computed ranges.
- Introduced `EmptyState` and `ProjectOverviewHeader` components with new UI elements.
- Added new SVG assets for various icons.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../assets/tw-icons/account-abstraction.svg   |  26 ++++
 .../dashboard/public/assets/tw-icons/auth.svg |  27 ++++
 apps/dashboard/public/assets/tw-icons/pay.svg |  31 ++++
 .../public/assets/tw-icons/social-auth.svg    |  30 ++++
 .../public/assets/tw-icons/wallets.svg        |  28 ++++
 .../src/@/components/blocks/app-footer.tsx    |   2 +-
 .../@/components/ui/DatePickerWithRange.tsx   |   2 +-
 apps/dashboard/src/@/styles/globals.css       |   4 +-
 .../SecondaryNav/account-button.client.tsx    |  13 +-
 .../[team_slug]/(team)/TeamOverviewPage.tsx   |   2 +-
 .../components/EmptyState.stories.tsx         |  41 +++++
 .../[project_slug]/components/EmptyState.tsx  | 145 ++++++++++++++++++
 .../ProjectOverviewHeader.stories.tsx         |  42 +++++
 .../components/ProjectOverviewHeader.tsx      |  19 +++
 .../[team_slug]/[project_slug]/layout.tsx     |   7 +-
 .../team/[team_slug]/[project_slug]/page.tsx  |  27 +++-
 .../src/app/team/[team_slug]/layout.tsx       |   2 +-
 .../analytics/date-range-selector.tsx         |   2 +-
 .../components/analytics/range-selector.tsx   |  37 ++++-
 apps/dashboard/src/stories/stubs.ts           |   2 +-
 20 files changed, 467 insertions(+), 22 deletions(-)
 create mode 100644 apps/dashboard/public/assets/tw-icons/account-abstraction.svg
 create mode 100644 apps/dashboard/public/assets/tw-icons/auth.svg
 create mode 100644 apps/dashboard/public/assets/tw-icons/pay.svg
 create mode 100644 apps/dashboard/public/assets/tw-icons/social-auth.svg
 create mode 100644 apps/dashboard/public/assets/tw-icons/wallets.svg
 create mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/EmptyState.stories.tsx
 create mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/EmptyState.tsx
 create mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectOverviewHeader.stories.tsx
 create mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectOverviewHeader.tsx

diff --git a/apps/dashboard/public/assets/tw-icons/account-abstraction.svg b/apps/dashboard/public/assets/tw-icons/account-abstraction.svg
new file mode 100644
index 00000000000..36061a2f9c6
--- /dev/null
+++ b/apps/dashboard/public/assets/tw-icons/account-abstraction.svg
@@ -0,0 +1,26 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="12.813" y="18.824" width="13.4583" height="9.33069" rx="1.49536" transform="rotate(-80 12.813 18.824)" fill="url(#paint0_linear_176_19664)"/>
+<g filter="url(#filter0_bi_176_19664)">
+<path d="M8.63443 22.4473C9.10456 22.866 9.75478 22.9806 10.3397 22.748C12.1658 22.0219 16.0712 20.0922 16.6714 16.6883L17.3498 12.8408C17.4946 12.0198 17.1149 11.1951 16.397 10.7712L12.6731 8.57281C12.2567 8.32698 11.7653 8.24034 11.29 8.32893L7.0388 9.12114C6.21922 9.27387 5.58034 9.91897 5.43557 10.74L4.75715 14.5875C4.15696 17.9914 7.1668 21.1405 8.63443 22.4473Z" fill="#B9DDFF" fill-opacity="0.8"/>
+</g>
+<path d="M10.6767 15.8535C11.6031 16.0169 12.4866 15.3983 12.6499 14.4719C12.8133 13.5454 12.1947 12.662 11.2683 12.4986C10.3418 12.3353 9.45839 12.9539 9.29504 13.8803C9.13169 14.8067 9.75028 15.6902 10.6767 15.8535Z" fill="white"/>
+<path d="M10.8049 15.1276C11.13 15.1849 11.3459 15.5036 11.2867 15.8396L10.8578 18.2722C10.7986 18.6079 10.4869 18.8339 10.1615 18.7765C9.83634 18.7192 9.6204 18.4005 9.67966 18.0644L10.1086 15.6319C10.1678 15.2962 10.4794 15.0702 10.8049 15.1276Z" fill="white"/>
+<defs>
+<filter id="filter0_bi_176_19664" x="2.6792" y="6.29507" width="16.7012" height="18.5715" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_176_19664"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_176_19664" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.2"/>
+<feGaussianBlur stdDeviation="0.05"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_176_19664"/>
+</filter>
+<linearGradient id="paint0_linear_176_19664" x1="23.6039" y1="22.7328" x2="13.5455" y2="27.1317" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2567FF"/>
+<stop offset="1" stop-color="#22A7FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/dashboard/public/assets/tw-icons/auth.svg b/apps/dashboard/public/assets/tw-icons/auth.svg
new file mode 100644
index 00000000000..606088e1c00
--- /dev/null
+++ b/apps/dashboard/public/assets/tw-icons/auth.svg
@@ -0,0 +1,27 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_176_19666)">
+<path d="M10.2684 4.78857C11.0382 3.45524 12.9627 3.45524 13.7325 4.78857L20.7761 16.9885C21.5459 18.3218 20.5837 19.9885 19.0441 19.9885H4.95684C3.41724 19.9885 2.45499 18.3218 3.22479 16.9885L10.2684 4.78857Z" fill="url(#paint0_linear_176_19666)"/>
+<g filter="url(#filter0_i_176_19666)">
+<path d="M11.1341 13.3799C11.519 12.7132 12.4812 12.7132 12.8661 13.3799L15.811 18.4806C16.1959 19.1473 15.7148 19.9806 14.945 19.9806H9.05519C8.28539 19.9806 7.80426 19.1473 8.18916 18.4806L11.1341 13.3799Z" fill="#B9DDFF" fill-opacity="0.8"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_176_19666" x="8.05371" y="12.8799" width="7.89258" height="7.20071" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.2"/>
+<feGaussianBlur stdDeviation="0.05"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_176_19666"/>
+</filter>
+<linearGradient id="paint0_linear_176_19666" x1="3.35247" y1="20.8199" x2="21.8623" y2="12.4791" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2567FF"/>
+<stop offset="1" stop-color="#22A7FF"/>
+</linearGradient>
+<clipPath id="clip0_176_19666">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/dashboard/public/assets/tw-icons/pay.svg b/apps/dashboard/public/assets/tw-icons/pay.svg
new file mode 100644
index 00000000000..a282686883a
--- /dev/null
+++ b/apps/dashboard/public/assets/tw-icons/pay.svg
@@ -0,0 +1,31 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_176_19660)">
+<circle cx="18.6199" cy="17.2472" r="5" transform="rotate(-10 18.6199 17.2472)" fill="url(#paint0_linear_176_19660)"/>
+<g filter="url(#filter0_bi_176_19660)">
+<path d="M3.83469 8.17681C3.69084 7.36097 4.23559 6.58298 5.05143 6.43913L17.8539 4.1817C18.6698 4.03785 19.4478 4.5826 19.5916 5.39844L21.1544 14.2617C21.2983 15.0776 20.7536 15.8555 19.9377 15.9994L7.13521 18.2568C6.31937 18.4007 5.54138 17.8559 5.39752 17.0401L3.83469 8.17681Z" fill="#B9DDFF" fill-opacity="0.8"/>
+</g>
+<rect x="6.65332" y="12.7048" width="3.54886" height="3.54886" rx="1" transform="rotate(-10 6.65332 12.7048)" fill="white"/>
+<path d="M4.09668 9.64545L19.8505 6.86762" stroke="white"/>
+</g>
+<defs>
+<filter id="filter0_bi_176_19660" x="1.81152" y="2.15866" width="21.3657" height="18.1212" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_176_19660"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_176_19660" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.2"/>
+<feGaussianBlur stdDeviation="0.05"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_176_19660"/>
+</filter>
+<linearGradient id="paint0_linear_176_19660" x1="21.6379" y1="16.4364" x2="13.4844" y2="18.9086" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2567FF"/>
+<stop offset="1" stop-color="#22A7FF"/>
+</linearGradient>
+<clipPath id="clip0_176_19660">
+<rect width="24" height="24" fill="white" transform="translate(0.0986328 4.26613) rotate(-10)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/dashboard/public/assets/tw-icons/social-auth.svg b/apps/dashboard/public/assets/tw-icons/social-auth.svg
new file mode 100644
index 00000000000..c21c1a0061f
--- /dev/null
+++ b/apps/dashboard/public/assets/tw-icons/social-auth.svg
@@ -0,0 +1,30 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_176_19662)">
+<rect x="12.7549" y="5.24113" width="13.4583" height="9.33069" rx="1.49536" transform="rotate(20 12.7549 5.24113)" fill="url(#paint0_linear_176_19662)"/>
+<g filter="url(#filter0_bi_176_19662)">
+<path d="M8.56889 10.1027C8.94667 9.06477 10.0944 8.5296 11.1323 8.90738L24.288 13.6957C25.326 14.0735 25.8611 15.2211 25.4834 16.2591L22.0632 25.656C21.6854 26.694 20.5377 27.2291 19.4997 26.8514L6.34403 22.0631C5.30608 21.6853 4.7709 20.5376 5.14869 19.4997L8.56889 10.1027Z" fill="#B9DDFF" fill-opacity="0.8"/>
+</g>
+<path d="M11.0957 12.0434L15.3474 18.4228L22.4439 16.1739" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_bi_176_19662" x="3.02734" y="6.78622" width="24.5771" height="22.1863" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_176_19662"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_176_19662" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.2"/>
+<feGaussianBlur stdDeviation="0.05"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_176_19662"/>
+</filter>
+<linearGradient id="paint0_linear_176_19662" x1="23.5457" y1="9.14994" x2="13.4874" y2="13.5488" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2567FF"/>
+<stop offset="1" stop-color="#22A7FF"/>
+</linearGradient>
+<clipPath id="clip0_176_19662">
+<rect width="24" height="24" fill="white" transform="translate(8.82812 0.619431) rotate(20)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/dashboard/public/assets/tw-icons/wallets.svg b/apps/dashboard/public/assets/tw-icons/wallets.svg
new file mode 100644
index 00000000000..a110bfdf19e
--- /dev/null
+++ b/apps/dashboard/public/assets/tw-icons/wallets.svg
@@ -0,0 +1,28 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_176_19658)">
+<rect x="24.7207" y="12.0584" width="16" height="10" rx="1.5" transform="rotate(132.102 24.7207 12.0584)" fill="url(#paint0_linear_176_19658)"/>
+<g filter="url(#filter0_i_176_19658)">
+<path d="M7.17965 18.0792C6.80186 17.0413 7.33703 15.8936 8.37499 15.5158L19.6513 11.4116C20.6893 11.0338 21.8369 11.569 22.2147 12.6069L24.9509 20.1245C25.3287 21.1624 24.7935 22.3101 23.7555 22.6879L12.4792 26.7921C11.4413 27.1699 10.2936 26.6347 9.91581 25.5968L7.17965 18.0792Z" fill="#B9DDFF" fill-opacity="0.8"/>
+</g>
+<path d="M9.40967 18.3986L12.344 17.3306C12.8956 17.1298 13.5112 17.2202 13.9819 17.5709V17.5709C14.9874 18.3203 16.4315 17.7947 16.72 16.5744V16.5744C16.8551 16.0031 17.2686 15.5382 17.8202 15.3374L20.712 14.2849" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_i_176_19658" x="7.05859" y="11.2904" width="18.0137" height="15.7229" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.2"/>
+<feGaussianBlur stdDeviation="0.05"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_176_19658"/>
+</filter>
+<linearGradient id="paint0_linear_176_19658" x1="37.5495" y1="16.2476" x2="26.0184" y2="21.8418" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2567FF"/>
+<stop offset="1" stop-color="#22A7FF"/>
+</linearGradient>
+<clipPath id="clip0_176_19658">
+<rect width="24" height="24" fill="white" transform="translate(0.619629 8.82776) rotate(-20)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/dashboard/src/@/components/blocks/app-footer.tsx b/apps/dashboard/src/@/components/blocks/app-footer.tsx
index 1660984f689..8ffad479b3c 100644
--- a/apps/dashboard/src/@/components/blocks/app-footer.tsx
+++ b/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,
       )}
     >
diff --git a/apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx b/apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx
index 43b1bfb395c..75643301b2f 100644
--- a/apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx
+++ b/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,
           )}
         >
diff --git a/apps/dashboard/src/@/styles/globals.css b/apps/dashboard/src/@/styles/globals.css
index d89596e0c75..36051d742f4 100644
--- a/apps/dashboard/src/@/styles/globals.css
+++ b/apps/dashboard/src/@/styles/globals.css
@@ -6,7 +6,7 @@
   :root,
   [data-theme="light"] {
     /* bg - neutral  */
-    --background: 0 0% 100%;
+    --background: 0 0% 98%;
     --popover: 0 0% 100%;
     --card: 0 0% 100%;
     --secondary: 0 0% 92%;
@@ -46,7 +46,7 @@
   [data-theme="dark"] {
     /* bg - neutral  */
     --background: 0 0% 0%;
-    --card: 0 0% 0%;
+    --card: 0 0% 5%;
     --popover: 0 0% 0%;
     --secondary: 0 0% 10%;
     --muted: 0 0% 9%;
diff --git a/apps/dashboard/src/app/components/Header/SecondaryNav/account-button.client.tsx b/apps/dashboard/src/app/components/Header/SecondaryNav/account-button.client.tsx
index 37d32a2fb3b..15f6eb2d138 100644
--- a/apps/dashboard/src/app/components/Header/SecondaryNav/account-button.client.tsx
+++ b/apps/dashboard/src/app/components/Header/SecondaryNav/account-button.client.tsx
@@ -26,11 +26,18 @@ export function AccountButton(props: {
       <DropdownMenuTrigger asChild>
         <Button
           size="icon"
-          className="!p-0 !h-auto size-10 rounded-full hover:ring-2 hover:ring-offset-2"
+          asChild
+          className="size-10 rounded-full hover:ring-2 hover:ring-offset-2"
           variant="ghost"
         >
-          {/* TODO - set account image */}
-          <GradientAvatar id={props.account?.id} src={""} className="size-9" />
+          <button type="button">
+            {/* TODO - set account image */}
+            <GradientAvatar
+              id={props.account?.id}
+              src={""}
+              className="size-9"
+            />
+          </button>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-[300px] rounded-lg p-0" align="end">
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/TeamOverviewPage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/TeamOverviewPage.tsx
index 89e5afd1cdc..a5150ededc9 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/TeamOverviewPage.tsx
+++ b/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>
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/EmptyState.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/EmptyState.stories.tsx
new file mode 100644
index 00000000000..2f43ef321c1
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/EmptyState.stories.tsx
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BadgeContainer, mobileViewport } from "stories/utils";
+import { EmptyState } from "./EmptyState";
+
+const meta = {
+  title: "project/Overview/EmptyState",
+  component: Component,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+};
+
+export const Mobile: Story = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Component() {
+  return (
+    <div className="container max-w-[1150px] py-8">
+      <BadgeContainer label="Base">
+        <EmptyState />
+      </BadgeContainer>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/EmptyState.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/EmptyState.tsx
new file mode 100644
index 00000000000..437b23990bd
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/EmptyState.tsx
@@ -0,0 +1,145 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { DotNetIcon } from "components/icons/brand-icons/DotNetIcon";
+import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
+import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
+import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
+import { UnrealIcon } from "components/icons/brand-icons/UnrealIcon";
+import { DocLink } from "components/shared/DocLink";
+import { ArrowRightIcon } from "lucide-react";
+import Image, { type StaticImageData } from "next/image";
+import Link from "next/link";
+import accountAbstractionIcon from "../../../../../../public/assets/tw-icons/account-abstraction.svg";
+import authIcon from "../../../../../../public/assets/tw-icons/auth.svg";
+import payIcon from "../../../../../../public/assets/tw-icons/pay.svg";
+import socialAuthIcon from "../../../../../../public/assets/tw-icons/social-auth.svg";
+import walletsIcon from "../../../../../../public/assets/tw-icons/wallets.svg";
+
+export function EmptyState() {
+  return (
+    <div className="container flex items-center justify-center p-6 md:h-[770px]">
+      <div className="group container flex flex-col items-center justify-center gap-8 rounded-lg border bg-card p-6 py-24">
+        <div className="flex max-w-[500px] flex-col items-center justify-center gap-6">
+          <AnimatedIcons />
+          <div className="flex flex-col gap-0.5 text-center">
+            <h3 className="font-semibold text-2xl text-foreground">
+              Project Overview is Coming Soon
+            </h3>
+            <p className="text-base text-muted-foreground">
+              Understand how users are interacting with your project
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center justify-center gap-2">
+            <SDKBadge
+              icon={TypeScriptIcon}
+              label="TypeScript"
+              href="https://portal.thirdweb.com/typescript/v5"
+            />
+            <SDKBadge
+              icon={ReactIcon}
+              label="React"
+              href="https://portal.thirdweb.com/react/v5"
+            />
+            <SDKBadge
+              icon={ReactIcon}
+              label="React Native"
+              href="https://portal.thirdweb.com/react-native/v5"
+            />
+            <SDKBadge
+              icon={UnityIcon}
+              label="Unity"
+              href="https://portal.thirdweb.com/unity/v5"
+            />
+            <SDKBadge
+              icon={UnrealIcon}
+              label="Unreal"
+              href="https://portal.thirdweb.com/unreal-engine"
+            />
+            <SDKBadge
+              icon={DotNetIcon}
+              label=".NET"
+              href="https://portal.thirdweb.com/dotnet"
+            />
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" asChild>
+            <Link href="https://portal.thirdweb.com/connect" target="_blank">
+              View Docs
+            </Link>
+          </Button>
+          <Button asChild variant="primary">
+            <Link href="https://thirdweb.com/dashboard/settings/api-keys">
+              Get Started
+              <ArrowRightIcon className="ml-2 size-4" />
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AnimatedIcons() {
+  return (
+    <div className="-space-x-2 flex">
+      <Icon
+        icon={walletsIcon}
+        className="-rotate-[16deg] group-hover:-rotate-[32deg] group-hover:-translate-x-[44px] group-hover:-translate-y-[12px] z-[0] translate-x-[0px] translate-y-[0px] scale-1 group-hover:scale-[1.2]"
+      />
+      <Icon
+        icon={payIcon}
+        className="-rotate-[12deg] group-hover:-rotate-[24deg] group-hover:-translate-x-[28px] -translate-y-[12px] group-hover:-translate-y-[40px] z-[1] translate-x-[0px] scale-1 group-hover:scale-[1.2]"
+      />
+      <Icon
+        icon={authIcon}
+        className="-translate-y-[16px] group-hover:-translate-y-[52px] z-[2] scale-1 group-hover:scale-[1.2]"
+      />
+      <Icon
+        icon={accountAbstractionIcon}
+        className="-translate-y-[12px] group-hover:-translate-y-[40px] z-[1] translate-x-[0px] rotate-[12deg] scale-1 group-hover:translate-x-[28px] group-hover:rotate-[24deg] group-hover:scale-[1.2]"
+      />
+      <Icon
+        icon={socialAuthIcon}
+        className="group-hover:-translate-y-[12px] z-[0] translate-x-[0px] translate-y-[0px] rotate-[16deg] scale-1 group-hover:translate-x-[44px] group-hover:rotate-[32deg] group-hover:scale-[1.2]"
+      />
+    </div>
+  );
+}
+
+function Icon({
+  icon,
+  className,
+}: {
+  icon: StaticImageData;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex size-10 items-center justify-center rounded-xl border bg-card transition-all duration-200 ease-in-out",
+        className,
+      )}
+    >
+      <Image
+        src={icon}
+        alt=""
+        width={24}
+        height={24}
+        className="rounded-full"
+      />
+    </div>
+  );
+}
+
+function SDKBadge({
+  icon,
+  label,
+  href,
+}: { icon: React.FC<{ className?: string }>; label: string; href: string }) {
+  return (
+    <div className="rounded-full bg-neutral-200 px-2.5 py-1 dark:bg-neutral-800">
+      <DocLink link={href} label={label} icon={icon} />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectOverviewHeader.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectOverviewHeader.stories.tsx
new file mode 100644
index 00000000000..313d71dd4c2
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectOverviewHeader.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { projectStub } from "stories/stubs";
+import { BadgeContainer, mobileViewport } from "stories/utils";
+import { ProjectOverviewHeader } from "./ProjectOverviewHeader";
+
+const meta = {
+  title: "project/Overview/Header",
+  component: Component,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+};
+
+export const Mobile: Story = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Component() {
+  return (
+    <div className="container max-w-[1150px] py-8">
+      <BadgeContainer label="Base">
+        <ProjectOverviewHeader project={projectStub("123", "456")} />
+      </BadgeContainer>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectOverviewHeader.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectOverviewHeader.tsx
new file mode 100644
index 00000000000..541a78e5762
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx
index 834a56a2ca0..174cc979238 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx
@@ -36,7 +36,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}
@@ -45,6 +45,11 @@ export default async function TeamLayout(props: {
         <TabPathLinks
           tabContainerClassName="px-4 lg:px-6"
           links={[
+            {
+              path: `/team/${params.team_slug}/${params.project_slug}`,
+              exactMatch: true,
+              name: "Overview",
+            },
             {
               path: `/team/${params.team_slug}/${params.project_slug}/connect/analytics`,
               name: "Connect",
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx
index 1f8017f0fc7..5c9c52f9087 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx
@@ -1,11 +1,28 @@
-import { redirect } from "next/navigation";
+import { getProjects } from "@/api/projects";
+import { notFound } from "next/navigation";
+import { EmptyState } from "./components/EmptyState";
+import { ProjectOverviewHeader } from "./components/ProjectOverviewHeader";
 
 export default async function ProjectOverviewPage(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
 }) {
-  // TODO: implement overview page for project
-  // redirect to connect for now
-  redirect(
-    `/team/${(await props.params).team_slug}/${(await props.params).project_slug}/connect`,
+  const params = await props.params;
+  const projects = await getProjects(params.team_slug);
+
+  const project = projects.find((p) => p.slug === params.project_slug);
+
+  if (!project) {
+    notFound();
+  }
+
+  return (
+    <div className="">
+      <div className="w-full border-border-800 border-b px-6 dark:bg-muted/50">
+        <div className="container">
+          <ProjectOverviewHeader project={project} />
+        </div>
+      </div>
+      <EmptyState />
+    </div>
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/layout.tsx
index c6ed8b22dd6..203c1a62926 100644
--- a/apps/dashboard/src/app/team/[team_slug]/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/layout.tsx
@@ -7,7 +7,7 @@ export default function RootTeamLayout(props: {
   params: Promise<{ team_slug: string }>;
 }) {
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex min-h-screen flex-col bg-background">
       <div className="flex grow flex-col">{props.children}</div>
       <TWAutoConnect />
       <AppFooter />
diff --git a/apps/dashboard/src/components/analytics/date-range-selector.tsx b/apps/dashboard/src/components/analytics/date-range-selector.tsx
index 65841f7607c..7439f37c936 100644
--- a/apps/dashboard/src/components/analytics/date-range-selector.tsx
+++ b/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";
diff --git a/apps/dashboard/src/components/analytics/range-selector.tsx b/apps/dashboard/src/components/analytics/range-selector.tsx
index d929a5939fc..018166b5f84 100644
--- a/apps/dashboard/src/components/analytics/range-selector.tsx
+++ b/apps/dashboard/src/components/analytics/range-selector.tsx
@@ -1,7 +1,14 @@
 "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";
@@ -9,15 +16,35 @@ 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">
+    <div className="flex flex-col justify-end gap-3 sm:flex-row">
       <DateRangeSelector
-        range={range}
+        range={computedRange || getLastNDaysRange("last-120")}
         setRange={(newRange) => {
           const days = differenceInDays(newRange.to, newRange.from);
           const interval = days > 30 ? "week" : "day";
diff --git a/apps/dashboard/src/stories/stubs.ts b/apps/dashboard/src/stories/stubs.ts
index 4fe910e5640..82b6f2faefd 100644
--- a/apps/dashboard/src/stories/stubs.ts
+++ b/apps/dashboard/src/stories/stubs.ts
@@ -15,7 +15,7 @@ import type {
 } from "@3rdweb-sdk/react/hooks/useEngine";
 import { ZERO_ADDRESS } from "thirdweb";
 
-function projectStub(id: string, teamId: string) {
+export function projectStub(id: string, teamId: string) {
   const project: Project = {
     bundleIds: [] as string[],
     createdAt: new Date(),