From 9342ae57b0de1b426df238c811eb7b6d135ffed1 Mon Sep 17 00:00:00 2001
From: codejagaban <okpusjamin@gmail.com>
Date: Sun, 27 Sep 2026 19:49:31 +0100
Subject: [PATCH 1/7] fix: Refine admin dashboard presentation

---
 .../admin/AttentionQueue/index.scss           | 18 +++----
 src/components/admin/RecentOrders/index.scss  | 48 ++++++++++++++++++-
 src/components/admin/RecentOrders/index.tsx   |  4 +-
 src/components/admin/RevenueTrend/index.scss  | 41 +++++++++++++---
 4 files changed, 94 insertions(+), 17 deletions(-)

diff --git a/src/components/admin/AttentionQueue/index.scss b/src/components/admin/AttentionQueue/index.scss
index 321dc72..d7c8fb2 100644
--- a/src/components/admin/AttentionQueue/index.scss
+++ b/src/components/admin/AttentionQueue/index.scss
@@ -35,16 +35,16 @@
   &__items {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 0.45rem;
+    gap: 0.35rem;
   }
 
   &__item {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto auto;
     align-items: center;
-    gap: 0.8rem;
+    gap: 0.6rem;
     min-width: 0;
-    padding: 0.75rem 0.85rem;
+    padding: 0.52rem 0.7rem;
     border-radius: var(--style-radius-s, 3px);
     color: var(--theme-elevation-850);
     background: var(--theme-elevation-50);
@@ -68,32 +68,32 @@
   &__copy {
     display: flex;
     flex-direction: column;
-    gap: 0.16rem;
+    gap: 0.08rem;
     min-width: 0;
 
     strong {
       color: var(--theme-elevation-900);
-      font-size: 0.86rem;
+      font-size: 0.8rem;
       font-weight: 600;
     }
 
     > span {
       color: var(--theme-elevation-500);
-      font-size: 0.76rem;
-      line-height: 1.35;
+      font-size: 0.7rem;
+      line-height: 1.25;
     }
   }
 
   &__count {
     color: var(--theme-elevation-850);
-    font-size: 1rem;
+    font-size: 0.88rem;
     font-weight: 600;
     font-variant-numeric: tabular-nums;
   }
 
   &__arrow {
     color: var(--theme-elevation-450);
-    font-size: 1rem;
+    font-size: 0.85rem;
   }
 
   &__empty {
diff --git a/src/components/admin/RecentOrders/index.scss b/src/components/admin/RecentOrders/index.scss
index 511e248..3dbdd98 100644
--- a/src/components/admin/RecentOrders/index.scss
+++ b/src/components/admin/RecentOrders/index.scss
@@ -100,7 +100,7 @@
     color: var(--theme-elevation-650);
 
     &--succeeded {
-      color: var(--theme-success-600, #16803b);
+      color: #16803b;
     }
 
     &--failed {
@@ -111,6 +111,18 @@
     &--processing {
       color: var(--theme-warning-600, #9a6700);
     }
+
+    &--completed {
+      color: #16803b;
+    }
+
+    &--cancelled {
+      color: #b42318;
+    }
+
+    &--refunded {
+      color: var(--theme-elevation-600);
+    }
   }
 
   &__empty {
@@ -164,3 +176,37 @@
     }
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  :root:where(:not([data-theme='light'])) .recent-orders__status {
+    &--succeeded,
+    &--completed {
+      color: #4ade80;
+    }
+
+    &--pending,
+    &--processing {
+      color: #fbbf24;
+    }
+
+    &--cancelled {
+      color: #f87171;
+    }
+  }
+}
+
+:root[data-theme='dark'] .recent-orders__status {
+  &--succeeded,
+  &--completed {
+    color: #4ade80;
+  }
+
+  &--pending,
+  &--processing {
+    color: #fbbf24;
+  }
+
+  &--cancelled {
+    color: #f87171;
+  }
+}
diff --git a/src/components/admin/RecentOrders/index.tsx b/src/components/admin/RecentOrders/index.tsx
index bf776e2..a888ae4 100644
--- a/src/components/admin/RecentOrders/index.tsx
+++ b/src/components/admin/RecentOrders/index.tsx
@@ -66,7 +66,9 @@ export const RecentOrders: React.FC<Props> = ({ adminPath, orders, timeZone }) =
             >
               {words(order.paymentStatus)}
             </span>
-            <span className="recent-orders__status recent-orders__status--fulfilment">
+            <span
+              className={`recent-orders__status recent-orders__status--fulfilment recent-orders__status--${order.fulfillmentStatus}`}
+            >
               {fulfillmentLabel(order.fulfillmentStatus)}
             </span>
             <time dateTime={order.createdAt}>
diff --git a/src/components/admin/RevenueTrend/index.scss b/src/components/admin/RevenueTrend/index.scss
index c310ac4..99636a1 100644
--- a/src/components/admin/RevenueTrend/index.scss
+++ b/src/components/admin/RevenueTrend/index.scss
@@ -63,12 +63,15 @@
 
   &__breakdown {
     display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 0.85rem 1.25rem;
-    margin: 1.15rem 0 0.35rem;
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    gap: 0;
+    margin: 1rem 0 0.55rem;
+    padding: 0.7rem 0;
+    border-radius: var(--style-radius-s, 3px);
+    background: var(--theme-elevation-50);
 
     dt {
-      margin: 0 0 0.2rem;
+      margin: 0 0 0.25rem;
       color: var(--theme-elevation-450);
       font-size: 0.75rem;
     }
@@ -82,7 +85,15 @@
     }
   }
 
-  &__breakdown-item { min-width: 0; }
+  &__breakdown-item {
+    min-width: 0;
+    padding: 0 0.8rem;
+    border-left: 1px solid var(--theme-elevation-100);
+
+    &:first-child {
+      border-left: 0;
+    }
+  }
 
   /* A real control, so it looks pressable and shows which mode is on. */
   &__switch {
@@ -228,7 +239,25 @@
 }
 
 @media (max-width: 760px) {
-  .revenue-trend__breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .revenue-trend__breakdown {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.7rem 0;
+
+    &-item:nth-child(odd) {
+      border-left: 0;
+    }
+  }
+}
+
+@media (min-width: 761px) and (max-width: 1100px) {
+  .revenue-trend__breakdown {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.7rem 0;
+
+    &-item:nth-child(3n + 1) {
+      border-left: 0;
+    }
+  }
 }
 
 @media (prefers-color-scheme: dark) {

From 4635c4c6e04c1ef35945c1ada3bec1da67055740 Mon Sep 17 00:00:00 2001
From: codejagaban <okpusjamin@gmail.com>
Date: Sun, 27 Sep 2026 20:07:46 +0100
Subject: [PATCH 2/7] feat: Add shadcn date picker primitives

---
 package.json                   |   2 +
 pnpm-lock.yaml                 |  65 ++++++++++++++++++++
 src/components/ui/calendar.tsx | 107 +++++++++++++++++++++++++++++++++
 src/components/ui/popover.tsx  |  28 +++++++++
 4 files changed, 202 insertions(+)
 create mode 100644 src/components/ui/calendar.tsx
 create mode 100644 src/components/ui/popover.tsx

diff --git a/package.json b/package.json
index a7faee1..909bf09 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.23",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-slot": "^1.1.2",
     "@stripe/react-stripe-js": "^3",
@@ -73,6 +74,7 @@
     "prism-react-renderer": "^2.3.1",
     "qs-esm": "8.0.1",
     "react": "19.2.6",
+    "react-day-picker": "^10.0.1",
     "react-dom": "19.2.6",
     "react-hook-form": "7.71.1",
     "sharp": "0.35.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3adfbc1..89ce7c5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -66,6 +66,9 @@ importers:
       '@radix-ui/react-label':
         specifier: ^2.1.2
         version: 2.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-popover':
+        specifier: ^1.1.23
+        version: 1.1.23(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@radix-ui/react-select':
         specifier: ^2.1.6
         version: 2.3.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -126,6 +129,9 @@ importers:
       react:
         specifier: 19.2.6
         version: 19.2.6
+      react-day-picker:
+        specifier: ^10.0.1
+        version: 10.0.1(@types/react@19.2.14)(react@19.2.6)
       react-dom:
         specifier: 19.2.6
         version: 19.2.6(react@19.2.6)
@@ -463,6 +469,9 @@ packages:
   '@date-fns/tz@1.2.0':
     resolution: {integrity: sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==}
 
+  '@date-fns/tz@1.5.0':
+    resolution: {integrity: sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==}
+
   '@dnd-kit/accessibility@3.1.1':
     resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
     peerDependencies:
@@ -1808,6 +1817,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popover@1.1.23':
+    resolution: {integrity: sha512-mw58MrBlyHWFisTOYignD0vf/3gdcgAR+9of1s9G/38CbFiUwH1nCDkc0AUM9IrXFgN5Ue8n45j9WCgyM1sbiQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popper@1.3.7':
     resolution: {integrity: sha512-UsJrrd7w4wuKKTdvd/DNERVlwSlUcyXzjhyDwBk+3aPOsCjOY6ZSbxuw8E6lZTjjfP8Cpd0J8VVkrYUWyGYXyg==}
     peerDependencies:
@@ -4718,6 +4740,16 @@ packages:
       react: ^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc
       react-dom: ^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
+  react-day-picker@10.0.1:
+    resolution: {integrity: sha512-eNh6BlwcYInWaJtRv18mXQ06Ys/H6rdTZAnTaSdOYJuTpwP1JMCHNd1FDRadA+gbeinq+psdULN5Xnowy9mV8w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/react': '>=16.8.0'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-dom@19.2.6:
     resolution: {integrity: sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==}
     peerDependencies:
@@ -5916,6 +5948,8 @@ snapshots:
 
   '@date-fns/tz@1.2.0': {}
 
+  '@date-fns/tz@1.5.0': {}
+
   '@dnd-kit/accessibility@3.1.1(react@19.2.6)':
     dependencies:
       react: 19.2.6
@@ -7270,6 +7304,29 @@ snapshots:
       '@types/react': 19.2.14
       '@types/react-dom': 19.2.3(@types/react@19.2.14)
 
+  '@radix-ui/react-popover@1.1.23(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.14)(react@19.2.6)
+      aria-hidden: 1.2.6
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.6)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
   '@radix-ui/react-popper@1.3.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@floating-ui/react-dom': 2.1.9(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -10316,6 +10373,14 @@ snapshots:
       react: 19.2.6
       react-dom: 19.2.6(react@19.2.6)
 
+  react-day-picker@10.0.1(@types/react@19.2.14)(react@19.2.6):
+    dependencies:
+      '@date-fns/tz': 1.5.0
+      date-fns: 4.4.0
+      react: 19.2.6
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   react-dom@19.2.6(react@19.2.6):
     dependencies:
       react: 19.2.6
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
new file mode 100644
index 0000000..f07ee59
--- /dev/null
+++ b/src/components/ui/calendar.tsx
@@ -0,0 +1,107 @@
+'use client'
+
+import { CaretDown, CaretLeft, CaretRight } from '@phosphor-icons/react'
+import * as React from 'react'
+import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'
+
+import { Button } from '@/components/ui/button'
+import { cn } from '@/utilities/cn'
+
+function Calendar({
+  captionLayout = 'label',
+  className,
+  classNames,
+  components,
+  formatters,
+  showOutsideDays = true,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      captionLayout={captionLayout}
+      className={cn('calendar', className)}
+      classNames={{
+        root: cn('calendar__root', defaultClassNames.root),
+        months: cn('calendar__months', defaultClassNames.months),
+        month: cn('calendar__month', defaultClassNames.month),
+        nav: cn('calendar__nav', defaultClassNames.nav),
+        button_previous: cn('calendar__nav-button', defaultClassNames.button_previous),
+        button_next: cn('calendar__nav-button', defaultClassNames.button_next),
+        month_caption: cn('calendar__caption', defaultClassNames.month_caption),
+        dropdowns: cn('calendar__dropdowns', defaultClassNames.dropdowns),
+        dropdown_root: cn('calendar__dropdown-root', defaultClassNames.dropdown_root),
+        dropdown: cn('calendar__dropdown', defaultClassNames.dropdown),
+        caption_label: cn('calendar__caption-label', defaultClassNames.caption_label),
+        month_grid: cn('calendar__grid', defaultClassNames.month_grid),
+        weekdays: cn('calendar__weekdays', defaultClassNames.weekdays),
+        weekday: cn('calendar__weekday', defaultClassNames.weekday),
+        week: cn('calendar__week', defaultClassNames.week),
+        day: cn('calendar__day', defaultClassNames.day),
+        range_start: cn('calendar__range-start', defaultClassNames.range_start),
+        range_middle: cn('calendar__range-middle', defaultClassNames.range_middle),
+        range_end: cn('calendar__range-end', defaultClassNames.range_end),
+        today: cn('calendar__today', defaultClassNames.today),
+        outside: cn('calendar__outside', defaultClassNames.outside),
+        disabled: cn('calendar__disabled', defaultClassNames.disabled),
+        hidden: cn('calendar__hidden', defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ className: iconClassName, orientation, ...iconProps }) => {
+          if (orientation === 'left') {
+            return <CaretLeft className={iconClassName} {...iconProps} />
+          }
+          if (orientation === 'right') {
+            return <CaretRight className={iconClassName} {...iconProps} />
+          }
+          return <CaretDown className={iconClassName} {...iconProps} />
+        },
+        DayButton: CalendarDayButton,
+        ...components,
+      }}
+      formatters={{
+        formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
+        ...formatters,
+      }}
+      showOutsideDays={showOutsideDays}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const ref = React.useRef<HTMLButtonElement>(null)
+
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      className={cn('calendar__day-button', className)}
+      data-day={day.date.toLocaleDateString()}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      data-range-start={modifiers.range_start}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      ref={ref}
+      size="icon"
+      variant="ghost"
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 0000000..d21fd76
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as React from 'react'
+
+import { cn } from '@/utilities/cn'
+
+const Popover = PopoverPrimitive.Root
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ align = 'center', className, sideOffset = 6, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      align={align}
+      className={cn('z-50 outline-none', className)}
+      ref={ref}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverContent, PopoverTrigger }

From c8b5d648edde1ac935398b2b7cbad50e89bd0852 Mon Sep 17 00:00:00 2001
From: codejagaban <okpusjamin@gmail.com>
Date: Sun, 27 Sep 2026 20:07:47 +0100
Subject: [PATCH 3/7] feat: Compact analytics date controls

---
 .../admin/AnalyticsControls/index.scss        | 456 +++++++++++++++---
 .../admin/AnalyticsControls/index.tsx         | 211 +++++---
 2 files changed, 556 insertions(+), 111 deletions(-)

diff --git a/src/components/admin/AnalyticsControls/index.scss b/src/components/admin/AnalyticsControls/index.scss
index f1af536..3105a3b 100644
--- a/src/components/admin/AnalyticsControls/index.scss
+++ b/src/components/admin/AnalyticsControls/index.scss
@@ -1,98 +1,442 @@
 .analytics-controls {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 0.85rem 1.25rem;
+  justify-content: flex-end;
+  gap: 0.45rem;
 
-  &__ranges,
-  &__comparison {
-    display: flex;
-    flex-wrap: wrap;
+  &__trigger,
+  &__comparison-trigger {
+    display: inline-flex;
     align-items: center;
-    gap: 0.2rem;
-  }
-
-  &__range,
-  &__comparison a {
-    padding: 0.48rem 0.68rem;
-    border-radius: var(--style-radius-s);
-    color: var(--theme-elevation-600);
-    text-decoration: none;
+    justify-content: space-between;
+    gap: 0.45rem;
+    width: auto;
+    min-height: 2.15rem;
+    margin: 0;
+    padding: 0.4rem 0.65rem;
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: var(--style-radius-s, 3px);
+    color: var(--theme-elevation-800);
+    background: var(--theme-elevation-0);
+    box-shadow: none;
+    font: inherit;
+    font-size: 0.8rem;
+    font-weight: 500;
+    line-height: 1;
+    cursor: pointer;
     transition:
       background-color 120ms ease,
-      color 120ms ease;
+      border-color 120ms ease;
 
     &:hover {
-      color: var(--theme-elevation-900);
-      background: var(--theme-elevation-100);
+      border-color: var(--theme-elevation-250);
+      background: var(--theme-elevation-50);
     }
 
-    &[aria-current] {
-      color: var(--theme-elevation-950);
-      background: var(--theme-elevation-150);
-      font-weight: 600;
+    &:focus-visible {
+      outline: 2px solid var(--theme-elevation-700);
+      outline-offset: 2px;
+    }
+
+    svg {
+      width: 0.9rem;
+      height: 0.9rem;
+      color: var(--theme-elevation-500);
     }
   }
 
-  &__comparison {
-    margin-left: auto;
+  &__trigger {
+    max-width: min(19rem, 48vw);
 
     > span {
-      margin-right: 0.3rem;
-      color: var(--theme-elevation-450);
-      font-size: 0.82rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &__caret {
+    flex: 0 0 auto;
+    margin-left: 0.15rem;
+  }
+
+  &__comparison-label {
+    color: var(--theme-elevation-450);
+    font-weight: 400;
+  }
+
+  @media (max-width: 40rem) {
+    align-items: stretch;
+
+    &__trigger,
+    &__comparison-trigger {
+      flex: 1 1 0;
+      min-width: 0;
     }
+
+    &__comparison-label {
+      display: none;
+    }
+  }
+}
+
+.analytics-controls__popover {
+  z-index: 1000;
+  display: grid;
+  box-sizing: border-box;
+  grid-template-columns: 9.5rem minmax(17.5rem, 1fr);
+  width: min(31rem, calc(100vw - 1.5rem));
+  overflow: hidden;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: var(--style-radius-s, 3px);
+  color: var(--theme-elevation-800);
+  background: var(--theme-elevation-0);
+  box-shadow: 0 5px 16px rgb(0 0 0 / 0.12);
+
+  &[data-state='open'] {
+    animation: analytics-popover-in 120ms ease-out;
+  }
+}
+
+.analytics-controls__presets {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  padding: 0.7rem;
+  background: var(--theme-elevation-50);
+
+  > p {
+    margin: 0 0 0.35rem;
+    padding: 0 0.45rem;
+    color: var(--theme-elevation-450);
+    font-size: 0.7rem;
+  }
+}
+
+.analytics-controls__preset {
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+  min-height: 2rem;
+  padding: 0.42rem 0.45rem;
+  border: 0;
+  border-radius: var(--style-radius-s, 3px);
+  color: var(--theme-elevation-700);
+  background: transparent;
+  font: inherit;
+  font-size: 0.78rem;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover,
+  &[aria-current='true'] {
+    color: var(--theme-elevation-950);
+    background: var(--theme-elevation-150);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--theme-elevation-700);
+    outline-offset: -1px;
   }
+}
+
+.analytics-controls__custom {
+  min-width: 0;
+  padding: 0.8rem;
 
-  &__custom {
-    flex: 1 0 100%;
+  &-head {
     display: flex;
-    flex-wrap: wrap;
-    align-items: end;
+    align-items: flex-start;
+    justify-content: space-between;
     gap: 0.75rem;
-    padding-top: 0.75rem;
+    min-height: 2.6rem;
+    margin-bottom: 0.55rem;
 
-    label {
-      display: grid;
-      gap: 0.35rem;
-      color: var(--theme-elevation-550);
-      font-size: 0.78rem;
+    > div {
+      display: flex;
+      flex-direction: column;
+      gap: 0.15rem;
+      min-width: 0;
     }
 
-    input {
-      min-height: 2.4rem;
-      padding: 0.45rem 0.65rem;
-      border: 1px solid var(--theme-elevation-200);
-      border-radius: var(--style-radius-s);
+    strong {
       color: var(--theme-elevation-900);
-      background: var(--theme-input-bg);
-      font: inherit;
+      font-size: 0.82rem;
+      font-weight: 600;
+    }
+
+    span {
+      overflow: hidden;
+      color: var(--theme-elevation-450);
+      font-size: 0.68rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     button {
-      min-height: 2.4rem;
-      padding: 0.45rem 0.9rem;
+      min-height: 1.9rem;
+      padding: 0.35rem 0.65rem;
       border: 0;
-      border-radius: var(--style-radius-s);
+      border-radius: var(--style-radius-s, 3px);
       color: var(--theme-elevation-0);
       background: var(--theme-elevation-900);
+      box-shadow: none;
       font: inherit;
+      font-size: 0.75rem;
       font-weight: 600;
       cursor: pointer;
+
+      &:hover {
+        background: var(--theme-elevation-750);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--theme-elevation-700);
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.45;
+      }
+    }
+  }
+}
+
+.analytics-controls__error {
+  margin: 0.45rem 0 0;
+  color: var(--theme-error-500);
+  font-size: 0.75rem;
+}
+
+.analytics-controls__select-content {
+  z-index: 1000;
+  min-width: 12rem;
+  padding: 0.25rem;
+  overflow: hidden;
+  border: 1px solid var(--theme-elevation-150);
+  border-radius: var(--style-radius-s, 3px);
+  color: var(--theme-elevation-800);
+  background: var(--theme-elevation-0);
+  box-shadow: 0 5px 16px rgb(0 0 0 / 0.12);
+}
+
+.analytics-controls__select-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 2rem;
+  padding: 0.42rem 1.8rem 0.42rem 0.55rem;
+  border-radius: var(--style-radius-s, 3px);
+  color: var(--theme-elevation-750);
+  font-size: 0.78rem;
+  outline: none;
+  cursor: default;
+
+  &[data-highlighted] {
+    color: var(--theme-elevation-950);
+    background: var(--theme-elevation-100);
+  }
+
+  > span:first-child {
+    position: absolute;
+    right: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.calendar {
+  color: var(--theme-elevation-800);
+
+  &__month {
+    position: relative;
+  }
+
+  &__nav {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    left: 0;
+    display: flex;
+    justify-content: space-between;
+    pointer-events: none;
+  }
+
+  &__nav-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--style-radius-s, 3px);
+    color: var(--theme-elevation-550);
+    background: transparent;
+    box-shadow: none;
+    pointer-events: auto;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--theme-elevation-900);
+      background: var(--theme-elevation-100);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--theme-elevation-700);
+      outline-offset: -1px;
+    }
+
+    svg {
+      width: 0.9rem;
+      height: 0.9rem;
+    }
+  }
+
+  &__caption {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 2rem;
+    margin-bottom: 0.35rem;
+  }
+
+  &__caption-label {
+    color: var(--theme-elevation-850);
+    font-size: 0.78rem;
+    font-weight: 600;
+  }
+
+  &__grid {
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+  }
+
+  &__weekday {
+    height: 1.65rem;
+    color: var(--theme-elevation-400);
+    font-size: 0.65rem;
+    font-weight: 500;
+    text-align: center;
+  }
+
+  &__day {
+    position: relative;
+    height: 2rem;
+    padding: 1px;
+    text-align: center;
+  }
+
+  &__day-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 1.9rem;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--style-radius-s, 3px);
+    color: var(--theme-elevation-750);
+    background: transparent;
+    box-shadow: none;
+    font: inherit;
+    font-size: 0.72rem;
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--theme-elevation-950);
+      background: var(--theme-elevation-100);
+    }
+
+    &:focus-visible {
+      position: relative;
+      z-index: 2;
+      outline: 2px solid var(--theme-elevation-700);
+      outline-offset: -1px;
+    }
+
+    &[data-range-start='true'],
+    &[data-range-end='true'],
+    &[data-selected-single='true'] {
+      color: var(--theme-elevation-0);
+      background: var(--theme-elevation-900);
+    }
+
+    &[data-range-middle='true'] {
+      border-radius: 0;
+      color: var(--theme-elevation-900);
+      background: var(--theme-elevation-100);
     }
+  }
+
+  &__range-start,
+  &__range-middle,
+  &__range-end {
+    background: var(--theme-elevation-100);
+  }
+
+  &__range-start {
+    border-radius: var(--style-radius-s, 3px) 0 0 var(--style-radius-s, 3px);
+  }
+
+  &__range-end {
+    border-radius: 0 var(--style-radius-s, 3px) var(--style-radius-s, 3px) 0;
+  }
+
+  &__today .calendar__day-button {
+    font-weight: 700;
+    box-shadow: inset 0 -2px 0 var(--theme-elevation-400);
+  }
+
+  &__outside {
+    opacity: 0.35;
+  }
 
-    p {
-      flex: 1 0 100%;
-      margin: 0;
-      color: var(--theme-error-500);
-      font-size: 0.8rem;
+  &__disabled {
+    opacity: 0.28;
+
+    .calendar__day-button {
+      cursor: not-allowed;
     }
   }
 
-  @media (max-width: 58rem) {
-    &__comparison {
-      flex-basis: 100%;
-      margin-left: 0;
+  &__hidden {
+    visibility: hidden;
+  }
+}
+
+@keyframes analytics-popover-in {
+  from {
+    transform: translateY(-3px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 34rem) {
+  .analytics-controls__popover {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .analytics-controls__presets {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+
+    > p {
+      grid-column: 1 / -1;
     }
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .analytics-controls__popover[data-state='open'] {
+    animation: none;
+  }
+}
diff --git a/src/components/admin/AnalyticsControls/index.tsx b/src/components/admin/AnalyticsControls/index.tsx
index cb9b26f..5ff2d8f 100644
--- a/src/components/admin/AnalyticsControls/index.tsx
+++ b/src/components/admin/AnalyticsControls/index.tsx
@@ -1,9 +1,22 @@
 'use client'
 
-import Link from 'next/link'
+import { CalendarBlank, CaretDown } from '@phosphor-icons/react'
+import { format, parseISO } from 'date-fns'
 import { useRouter } from 'next/navigation'
-import React from 'react'
-import { useForm } from 'react-hook-form'
+import React, { useEffect, useState } from 'react'
+import { type DateRange } from 'react-day-picker'
+import { useForm, useWatch } from 'react-hook-form'
+
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 
 import type { AnalyticsComparison, AnalyticsRange } from '../Dashboard/analyticsRange'
 
@@ -23,13 +36,17 @@ type CustomRangeFields = { from: string; to: string }
 const calendarDays = (from: string, to: string) =>
   Math.floor((Date.parse(`${to}T12:00:00Z`) - Date.parse(`${from}T12:00:00Z`)) / 86_400_000) + 1
 
-const options: Array<{ label: string; value: AnalyticsRange }> = [
+const options: Array<{ label: string; value: Exclude<AnalyticsRange, 'custom'> }> = [
   { label: 'Today', value: 'today' },
-  { label: '7 days', value: '7d' },
-  { label: '30 days', value: '30d' },
-  { label: '90 days', value: '90d' },
+  { label: 'Last 7 days', value: '7d' },
+  { label: 'Last 30 days', value: '30d' },
+  { label: 'Last 90 days', value: '90d' },
   { label: 'Year to date', value: 'ytd' },
-  { label: 'Custom', value: 'custom' },
+]
+
+const comparisonOptions: Array<{ label: string; value: AnalyticsComparison }> = [
+  { label: 'Previous period', value: 'previous' },
+  { label: 'Previous year', value: 'year' },
 ]
 
 const hrefFor = (
@@ -47,6 +64,18 @@ const hrefFor = (
   return `${adminPath}?${query.toString()}`
 }
 
+const humanDate = new Intl.DateTimeFormat('en', {
+  day: 'numeric',
+  month: 'short',
+  year: 'numeric',
+})
+
+const rangeLabel = (range: AnalyticsRange, from: string, to: string) => {
+  if (range !== 'custom')
+    return options.find((option) => option.value === range)?.label ?? 'Date range'
+  return `${humanDate.format(parseISO(from))} - ${humanDate.format(parseISO(to))}`
+}
+
 export const AnalyticsControls: React.FC<Props> = ({
   adminPath,
   comparison,
@@ -56,65 +85,97 @@ export const AnalyticsControls: React.FC<Props> = ({
   startDate,
 }) => {
   const router = useRouter()
+  const [rangeOpen, setRangeOpen] = useState(false)
   const {
+    control,
     formState: { errors },
     handleSubmit,
     register,
+    reset,
+    setValue,
   } = useForm<CustomRangeFields>({ defaultValues: { from: startDate, to: endDate } })
+  const [from, to] = useWatch({ control, name: ['from', 'to'] })
 
-  const applyCustom = handleSubmit(({ from, to }) => {
-    router.push(hrefFor(adminPath, 'custom', comparison, from, to))
+  useEffect(() => {
+    reset({ from: startDate, to: endDate })
+  }, [endDate, reset, startDate])
+
+  const applyCustom = handleSubmit(({ from: customFrom, to: customTo }) => {
+    setRangeOpen(false)
+    router.push(hrefFor(adminPath, 'custom', comparison, customFrom, customTo))
   })
 
+  const choosePreset = (nextRange: Exclude<AnalyticsRange, 'custom'>) => {
+    setRangeOpen(false)
+    router.push(hrefFor(adminPath, nextRange, comparison))
+  }
+
+  const selectCustomRange = (selected: DateRange | undefined) => {
+    if (!selected?.from) return
+    const nextFrom = format(selected.from, 'yyyy-MM-dd')
+    const nextTo = selected.to ? format(selected.to, 'yyyy-MM-dd') : ''
+    setValue('from', nextFrom, { shouldDirty: true, shouldValidate: true })
+    setValue('to', nextTo, { shouldDirty: true, shouldValidate: true })
+  }
+
   return (
     <div className="analytics-controls" aria-label="Analytics date controls">
-      <nav className="analytics-controls__ranges" aria-label="Date range">
-        {options.map((option) => (
-          <Link
-            aria-current={range === option.value ? 'page' : undefined}
-            className="analytics-controls__range"
-            href={hrefFor(adminPath, option.value, comparison, startDate, endDate)}
-            key={option.value}
+      <Popover onOpenChange={setRangeOpen} open={rangeOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            aria-label="Choose analytics date range"
+            className="analytics-controls__trigger"
+            size="sm"
+            type="button"
+            variant="outline"
           >
-            {option.label}
-          </Link>
-        ))}
-      </nav>
-
-      <div className="analytics-controls__comparison" aria-label="Comparison period">
-        <span>Compare</span>
-        <Link
-          aria-current={comparison === 'previous' ? 'true' : undefined}
-          href={hrefFor(adminPath, range, 'previous', startDate, endDate)}
-        >
-          Previous period
-        </Link>
-        <Link
-          aria-current={comparison === 'year' ? 'true' : undefined}
-          href={hrefFor(adminPath, range, 'year', startDate, endDate)}
-        >
-          Previous year
-        </Link>
-      </div>
-
-      {range === 'custom' && (
-        <form className="analytics-controls__custom" noValidate onSubmit={applyCustom}>
-          <label>
-            From
+            <CalendarBlank aria-hidden="true" />
+            <span>{rangeLabel(range, startDate, endDate)}</span>
+            <CaretDown aria-hidden="true" className="analytics-controls__caret" />
+          </Button>
+        </PopoverTrigger>
+
+        <PopoverContent align="start" className="analytics-controls__popover" collisionPadding={12}>
+          <div className="analytics-controls__presets" aria-label="Preset date ranges">
+            <p>Quick ranges</p>
+            {options.map((option) => (
+              <Button
+                aria-current={range === option.value ? 'true' : undefined}
+                className="analytics-controls__preset"
+                key={option.value}
+                onClick={() => choosePreset(option.value)}
+                size="clear"
+                type="button"
+                variant="ghost"
+              >
+                {option.label}
+              </Button>
+            ))}
+          </div>
+
+          <form className="analytics-controls__custom" noValidate onSubmit={applyCustom}>
+            <div className="analytics-controls__custom-head">
+              <div>
+                <strong>Custom range</strong>
+                <span>
+                  {from && to ? rangeLabel('custom', from, to) : 'Choose a start and end date'}
+                </span>
+              </div>
+              <Button disabled={!from || !to} size="sm" type="submit">
+                Apply
+              </Button>
+            </div>
+
             <input
-              type="date"
+              type="hidden"
               {...register('from', {
                 required: 'Choose a start date.',
                 validate: (value, values) =>
                   !values.to || value <= values.to || 'Start must be before end.',
               })}
             />
-          </label>
-          <label>
-            To
             <input
-              max={maxDate}
-              type="date"
+              type="hidden"
               {...register('to', {
                 required: 'Choose an end date.',
                 validate: (value, values) => {
@@ -127,13 +188,53 @@ export const AnalyticsControls: React.FC<Props> = ({
                 },
               })}
             />
-          </label>
-          <button type="submit">Apply</button>
-          {(errors.from?.message || errors.to?.message) && (
-            <p role="alert">{errors.from?.message || errors.to?.message}</p>
-          )}
-        </form>
-      )}
+
+            <Calendar
+              defaultMonth={parseISO(to || maxDate)}
+              disabled={{ after: parseISO(maxDate) }}
+              max={366}
+              mode="range"
+              onSelect={selectCustomRange}
+              resetOnSelect
+              selected={
+                from ? { from: parseISO(from), to: to ? parseISO(to) : undefined } : undefined
+              }
+            />
+
+            {(errors.from?.message || errors.to?.message) && (
+              <p className="analytics-controls__error" role="alert">
+                {errors.from?.message || errors.to?.message}
+              </p>
+            )}
+          </form>
+        </PopoverContent>
+      </Popover>
+
+      <Select
+        onValueChange={(value: AnalyticsComparison) =>
+          router.push(hrefFor(adminPath, range, value, startDate, endDate))
+        }
+        value={comparison}
+      >
+        <SelectTrigger
+          aria-label="Comparison period"
+          className="analytics-controls__comparison-trigger"
+        >
+          <span className="analytics-controls__comparison-label">Compare:</span>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent align="end" className="analytics-controls__select-content">
+          {comparisonOptions.map((option) => (
+            <SelectItem
+              className="analytics-controls__select-item"
+              key={option.value}
+              value={option.value}
+            >
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </div>
   )
 }

From 414e59f553f102ea55ca41ae43f29cfa53d398bf Mon Sep 17 00:00:00 2001
From: codejagaban <okpusjamin@gmail.com>
Date: Sun, 27 Sep 2026 20:13:10 +0100
Subject: [PATCH 4/7] fix: Align attention items in one row

---
 src/components/admin/AttentionQueue/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/admin/AttentionQueue/index.scss b/src/components/admin/AttentionQueue/index.scss
index d7c8fb2..e106f65 100644
--- a/src/components/admin/AttentionQueue/index.scss
+++ b/src/components/admin/AttentionQueue/index.scss
@@ -34,7 +34,7 @@
 
   &__items {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 0.35rem;
   }
 

From 9a5558f52c1c16479e0c386884f9f025ec8fb7a4 Mon Sep 17 00:00:00 2001
From: codejagaban <okpusjamin@gmail.com>
Date: Sun, 27 Sep 2026 20:21:32 +0100
Subject: [PATCH 5/7] fix: Improve dashboard type scale

---
 .../admin/AnalyticsControls/index.scss        | 22 +++++++++----------
 .../admin/AttentionQueue/index.scss           | 10 ++++-----
 src/components/admin/Dashboard/index.scss     | 12 +++++-----
 src/components/admin/KpiStrip/index.scss      |  8 +++----
 src/components/admin/OrderHealth/index.scss   | 10 ++++-----
 .../admin/PopularProducts/index.scss          |  8 +++----
 src/components/admin/RecentOrders/index.scss  |  8 +++----
 src/components/admin/RevenueTrend/index.scss  | 22 +++++++++----------
 8 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/components/admin/AnalyticsControls/index.scss b/src/components/admin/AnalyticsControls/index.scss
index 3105a3b..fbdfa64 100644
--- a/src/components/admin/AnalyticsControls/index.scss
+++ b/src/components/admin/AnalyticsControls/index.scss
@@ -20,7 +20,7 @@
     background: var(--theme-elevation-0);
     box-shadow: none;
     font: inherit;
-    font-size: 0.8rem;
+    font-size: 0.95rem;
     font-weight: 500;
     line-height: 1;
     cursor: pointer;
@@ -109,7 +109,7 @@
     margin: 0 0 0.35rem;
     padding: 0 0.45rem;
     color: var(--theme-elevation-450);
-    font-size: 0.7rem;
+    font-size: 0.85rem;
   }
 }
 
@@ -124,7 +124,7 @@
   color: var(--theme-elevation-700);
   background: transparent;
   font: inherit;
-  font-size: 0.78rem;
+  font-size: 0.925rem;
   text-align: left;
   cursor: pointer;
 
@@ -161,14 +161,14 @@
 
     strong {
       color: var(--theme-elevation-900);
-      font-size: 0.82rem;
+      font-size: 1rem;
       font-weight: 600;
     }
 
     span {
       overflow: hidden;
       color: var(--theme-elevation-450);
-      font-size: 0.68rem;
+      font-size: 0.85rem;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -182,7 +182,7 @@
       background: var(--theme-elevation-900);
       box-shadow: none;
       font: inherit;
-      font-size: 0.75rem;
+      font-size: 0.9rem;
       font-weight: 600;
       cursor: pointer;
 
@@ -206,7 +206,7 @@
 .analytics-controls__error {
   margin: 0.45rem 0 0;
   color: var(--theme-error-500);
-  font-size: 0.75rem;
+  font-size: 0.9rem;
 }
 
 .analytics-controls__select-content {
@@ -229,7 +229,7 @@
   padding: 0.42rem 1.8rem 0.42rem 0.55rem;
   border-radius: var(--style-radius-s, 3px);
   color: var(--theme-elevation-750);
-  font-size: 0.78rem;
+  font-size: 0.925rem;
   outline: none;
   cursor: default;
 
@@ -306,7 +306,7 @@
 
   &__caption-label {
     color: var(--theme-elevation-850);
-    font-size: 0.78rem;
+    font-size: 0.925rem;
     font-weight: 600;
   }
 
@@ -319,7 +319,7 @@
   &__weekday {
     height: 1.65rem;
     color: var(--theme-elevation-400);
-    font-size: 0.65rem;
+    font-size: 0.8rem;
     font-weight: 500;
     text-align: center;
   }
@@ -345,7 +345,7 @@
     background: transparent;
     box-shadow: none;
     font: inherit;
-    font-size: 0.72rem;
+    font-size: 0.875rem;
     font-variant-numeric: tabular-nums;
     cursor: pointer;
 
diff --git a/src/components/admin/AttentionQueue/index.scss b/src/components/admin/AttentionQueue/index.scss
index e106f65..208b04d 100644
--- a/src/components/admin/AttentionQueue/index.scss
+++ b/src/components/admin/AttentionQueue/index.scss
@@ -16,13 +16,13 @@
       align-items: center;
       gap: 0.5rem;
       margin: 0;
-      font-size: 0.95rem;
+      font-size: 1.08rem;
       font-weight: 600;
     }
 
     > span {
       color: var(--theme-elevation-450);
-      font-size: 0.78rem;
+      font-size: 0.925rem;
       font-variant-numeric: tabular-nums;
     }
   }
@@ -73,20 +73,20 @@
 
     strong {
       color: var(--theme-elevation-900);
-      font-size: 0.8rem;
+      font-size: 1rem;
       font-weight: 600;
     }
 
     > span {
       color: var(--theme-elevation-500);
-      font-size: 0.7rem;
+      font-size: 0.925rem;
       line-height: 1.25;
     }
   }
 
   &__count {
     color: var(--theme-elevation-850);
-    font-size: 0.88rem;
+    font-size: 1rem;
     font-weight: 600;
     font-variant-numeric: tabular-nums;
   }
diff --git a/src/components/admin/Dashboard/index.scss b/src/components/admin/Dashboard/index.scss
index 269609c..c8668cf 100644
--- a/src/components/admin/Dashboard/index.scss
+++ b/src/components/admin/Dashboard/index.scss
@@ -22,14 +22,14 @@
 
   &__hello {
     margin: 0;
-    font-size: 1.55rem;
+    font-size: 1.85rem;
     font-weight: 600;
     letter-spacing: -0.01em;
   }
 
   &__date {
     margin: 0;
-    font-size: 0.875rem;
+    font-size: 1rem;
     color: var(--theme-elevation-450);
   }
 
@@ -69,7 +69,7 @@
   }
 
   &__stat-label {
-    font-size: 0.8rem;
+    font-size: 1rem;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     color: var(--theme-elevation-500);
@@ -83,7 +83,7 @@
   }
 
   &__stat-hint {
-    font-size: 0.8rem;
+    font-size: 0.925rem;
     color: var(--theme-elevation-450);
   }
 
@@ -124,7 +124,7 @@
 
   &__panel-heading {
     margin: 0 0 0.85rem;
-    font-size: 0.95rem;
+    font-size: 1.08rem;
     font-weight: 600;
     display: flex;
     align-items: center;
@@ -134,7 +134,7 @@
   &__panel-icon { color: var(--theme-elevation-500); flex: 0 0 auto; }
 
   &__panel-note {
-    font-size: 0.78rem;
+    font-size: 0.925rem;
     font-weight: 400;
     color: var(--theme-elevation-450);
   }
diff --git a/src/components/admin/KpiStrip/index.scss b/src/components/admin/KpiStrip/index.scss
index e3c1701..915d4b5 100644
--- a/src/components/admin/KpiStrip/index.scss
+++ b/src/components/admin/KpiStrip/index.scss
@@ -18,7 +18,7 @@
   }
 
   &__label {
-    font-size: 0.85rem;
+    font-size: 1rem;
     color: var(--theme-elevation-500);
     display: flex;
     align-items: center;
@@ -38,7 +38,7 @@
   }
 
   &__value {
-    font-size: 1.7rem;
+    font-size: 2rem;
     font-weight: 600;
     line-height: 1.05;
     font-variant-numeric: tabular-nums;
@@ -46,7 +46,7 @@
   }
 
   &__delta {
-    font-size: 0.85rem;
+    font-size: 0.95rem;
     font-weight: 600;
     font-variant-numeric: tabular-nums;
     display: inline-flex;
@@ -59,7 +59,7 @@
   }
 
   &__compare {
-    font-size: 0.8rem;
+    font-size: 0.925rem;
     color: var(--theme-elevation-450);
     margin-top: -0.15rem;
   }
diff --git a/src/components/admin/OrderHealth/index.scss b/src/components/admin/OrderHealth/index.scss
index afdfddf..2365e78 100644
--- a/src/components/admin/OrderHealth/index.scss
+++ b/src/components/admin/OrderHealth/index.scss
@@ -22,7 +22,7 @@
 
   &__title {
     margin: 0 0 0.85rem;
-    font-size: 0.95rem;
+    font-size: 1.08rem;
     font-weight: 600;
     display: flex;
     align-items: center;
@@ -32,7 +32,7 @@
   &__icon { color: var(--theme-elevation-500); flex: 0 0 auto; }
 
   &__note {
-    font-size: 0.78rem;
+    font-size: 0.925rem;
     font-weight: 400;
     color: var(--theme-elevation-450);
   }
@@ -87,12 +87,12 @@
   }
 
   &__tip-label {
-    font-size: 0.72rem;
+    font-size: 0.85rem;
     color: var(--theme-elevation-500);
   }
 
   &__tip-value {
-    font-size: 0.85rem;
+    font-size: 1rem;
     font-weight: 600;
     font-variant-numeric: tabular-nums;
     color: var(--theme-elevation-900);
@@ -105,7 +105,7 @@
     margin: 0.8rem 0 0;
     padding: 0;
     list-style: none;
-    font-size: 0.85rem;
+    font-size: 0.95rem;
     color: var(--theme-elevation-650);
 
     li { display: flex; align-items: center; gap: 0.45rem; }
diff --git a/src/components/admin/PopularProducts/index.scss b/src/components/admin/PopularProducts/index.scss
index 6810754..7e2892b 100644
--- a/src/components/admin/PopularProducts/index.scss
+++ b/src/components/admin/PopularProducts/index.scss
@@ -23,7 +23,7 @@
 
   &__title {
     margin: 0 0 1.15rem;
-    font-size: 0.95rem;
+    font-size: 1.08rem;
     font-weight: 600;
     display: flex;
     align-items: center;
@@ -49,10 +49,10 @@
     margin-bottom: 0.4rem;
   }
 
-  &__name { font-size: 0.875rem; min-width: 0; overflow-wrap: anywhere; }
+  &__name { font-size: 1rem; min-width: 0; overflow-wrap: anywhere; }
 
   &__units {
-    font-size: 0.8rem;
+    font-size: 0.925rem;
     color: var(--theme-elevation-500);
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
@@ -90,7 +90,7 @@
     margin-top: 0.9rem;
     padding-top: 0.6rem;
     border-top: 1px solid var(--theme-elevation-100);
-    font-size: 0.72rem;
+    font-size: 0.85rem;
     color: var(--theme-elevation-450);
     font-variant-numeric: tabular-nums;
   }
diff --git a/src/components/admin/RecentOrders/index.scss b/src/components/admin/RecentOrders/index.scss
index 3dbdd98..c8a9ea9 100644
--- a/src/components/admin/RecentOrders/index.scss
+++ b/src/components/admin/RecentOrders/index.scss
@@ -16,13 +16,13 @@
       align-items: center;
       gap: 0.5rem;
       margin: 0;
-      font-size: 0.95rem;
+      font-size: 1.08rem;
       font-weight: 600;
     }
 
     a {
       color: var(--theme-elevation-650);
-      font-size: 0.8rem;
+      font-size: 0.925rem;
       text-decoration: none;
 
       &:hover {
@@ -51,7 +51,7 @@
   &__labels {
     padding: 0 0.7rem 0.45rem;
     color: var(--theme-elevation-450);
-    font-size: 0.72rem;
+    font-size: 0.85rem;
   }
 
   &__row {
@@ -59,7 +59,7 @@
     padding: 0.68rem 0.7rem;
     border-radius: var(--style-radius-s, 3px);
     color: var(--theme-elevation-700);
-    font-size: 0.82rem;
+    font-size: 1rem;
     text-decoration: none;
     transition: background-color 120ms ease;
 
diff --git a/src/components/admin/RevenueTrend/index.scss b/src/components/admin/RevenueTrend/index.scss
index 99636a1..6859cef 100644
--- a/src/components/admin/RevenueTrend/index.scss
+++ b/src/components/admin/RevenueTrend/index.scss
@@ -27,7 +27,7 @@
 
   &__title {
     margin: 0;
-    font-size: 0.95rem;
+    font-size: 1.08rem;
     font-weight: 600;
     display: flex;
     align-items: center;
@@ -39,7 +39,7 @@
   &__figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
 
   &__total {
-    font-size: 1.85rem;
+    font-size: 2.1rem;
     font-weight: 600;
     line-height: 1;
     font-variant-numeric: tabular-nums;
@@ -47,7 +47,7 @@
   }
 
   &__delta {
-    font-size: 0.875rem;
+    font-size: 0.95rem;
     font-weight: 600;
     display: inline-flex;
     gap: 0.12rem;
@@ -57,7 +57,7 @@
     &--flat { color: var(--theme-elevation-500); }
   }
 
-  &__compare { font-size: 0.8rem; color: var(--theme-elevation-450); }
+  &__compare { font-size: 0.925rem; color: var(--theme-elevation-450); }
 
   &__controls { display: flex; align-items: center; }
 
@@ -73,13 +73,13 @@
     dt {
       margin: 0 0 0.25rem;
       color: var(--theme-elevation-450);
-      font-size: 0.75rem;
+      font-size: 0.875rem;
     }
 
     dd {
       margin: 0;
       color: var(--theme-elevation-800);
-      font-size: 0.9rem;
+      font-size: 1rem;
       font-weight: 600;
       font-variant-numeric: tabular-nums;
     }
@@ -115,7 +115,7 @@
     background: transparent;
     color: var(--theme-elevation-600);
     font: inherit;
-    font-size: 0.8rem;
+    font-size: 0.925rem;
     cursor: pointer;
     transition: background-color 0.15s ease, color 0.15s ease;
 
@@ -197,12 +197,12 @@
   }
 
   &__tip-day {
-    font-size: 0.72rem;
+    font-size: 0.85rem;
     color: var(--theme-elevation-500);
   }
 
   &__tip-value {
-    font-size: 0.9rem;
+    font-size: 1rem;
     font-weight: 600;
     font-variant-numeric: tabular-nums;
     color: var(--theme-elevation-900);
@@ -212,13 +212,13 @@
 
   &__tick {
     fill: var(--theme-elevation-450);
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 500;
     font-variant-numeric: tabular-nums;
 
     &--date {
       fill: var(--theme-elevation-550);
-      font-size: 12.5px;
+      font-size: 13.5px;
     }
   }
 

From dfcbf5de9638be70b2c961b1c092de73a72b4ec8 Mon Sep 17 00:00:00 2001
From: codejagaban <okpusjamin@gmail.com>
Date: Sun, 27 Sep 2026 21:14:03 +0100
Subject: [PATCH 6/7] feat: Add dashboard request loader

---
 .../admin/AnalyticsControls/index.scss        | 35 +++++++++++++++++++
 .../admin/AnalyticsControls/index.tsx         | 35 +++++++++++++++----
 2 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/src/components/admin/AnalyticsControls/index.scss b/src/components/admin/AnalyticsControls/index.scss
index fbdfa64..95aed6d 100644
--- a/src/components/admin/AnalyticsControls/index.scss
+++ b/src/components/admin/AnalyticsControls/index.scss
@@ -4,6 +4,27 @@
   justify-content: flex-end;
   gap: 0.45rem;
 
+  &__progress {
+    position: fixed;
+    z-index: 1100;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 2px;
+    overflow: hidden;
+    background: var(--theme-elevation-100);
+    pointer-events: none;
+
+    span {
+      display: block;
+      width: 38%;
+      height: 100%;
+      background: var(--theme-elevation-900);
+      transform: translateX(-110%);
+      animation: analytics-request-progress 900ms cubic-bezier(0.45, 0, 0.2, 1) infinite;
+    }
+  }
+
   &__trigger,
   &__comparison-trigger {
     display: inline-flex;
@@ -80,6 +101,20 @@
   }
 }
 
+@keyframes analytics-request-progress {
+  0% { transform: translateX(-110%); }
+  55% { transform: translateX(115%); }
+  100% { transform: translateX(265%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .analytics-controls__progress span {
+    width: 100%;
+    transform: none;
+    animation: none;
+  }
+}
+
 .analytics-controls__popover {
   z-index: 1000;
   display: grid;
diff --git a/src/components/admin/AnalyticsControls/index.tsx b/src/components/admin/AnalyticsControls/index.tsx
index 5ff2d8f..7795694 100644
--- a/src/components/admin/AnalyticsControls/index.tsx
+++ b/src/components/admin/AnalyticsControls/index.tsx
@@ -3,7 +3,7 @@
 import { CalendarBlank, CaretDown } from '@phosphor-icons/react'
 import { format, parseISO } from 'date-fns'
 import { useRouter } from 'next/navigation'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useTransition } from 'react'
 import { type DateRange } from 'react-day-picker'
 import { useForm, useWatch } from 'react-hook-form'
 
@@ -85,6 +85,7 @@ export const AnalyticsControls: React.FC<Props> = ({
   startDate,
 }) => {
   const router = useRouter()
+  const [isPending, startTransition] = useTransition()
   const [rangeOpen, setRangeOpen] = useState(false)
   const {
     control,
@@ -100,14 +101,18 @@ export const AnalyticsControls: React.FC<Props> = ({
     reset({ from: startDate, to: endDate })
   }, [endDate, reset, startDate])
 
+  const navigate = (href: string) => {
+    startTransition(() => router.push(href))
+  }
+
   const applyCustom = handleSubmit(({ from: customFrom, to: customTo }) => {
     setRangeOpen(false)
-    router.push(hrefFor(adminPath, 'custom', comparison, customFrom, customTo))
+    navigate(hrefFor(adminPath, 'custom', comparison, customFrom, customTo))
   })
 
   const choosePreset = (nextRange: Exclude<AnalyticsRange, 'custom'>) => {
     setRangeOpen(false)
-    router.push(hrefFor(adminPath, nextRange, comparison))
+    navigate(hrefFor(adminPath, nextRange, comparison))
   }
 
   const selectCustomRange = (selected: DateRange | undefined) => {
@@ -119,12 +124,28 @@ export const AnalyticsControls: React.FC<Props> = ({
   }
 
   return (
-    <div className="analytics-controls" aria-label="Analytics date controls">
+    <div
+      className="analytics-controls"
+      aria-busy={isPending}
+      aria-label="Analytics date controls"
+      data-pending={isPending ? 'true' : undefined}
+    >
+      {isPending && (
+        <div
+          aria-label="Loading dashboard data"
+          className="analytics-controls__progress"
+          role="progressbar"
+        >
+          <span />
+        </div>
+      )}
+
       <Popover onOpenChange={setRangeOpen} open={rangeOpen}>
         <PopoverTrigger asChild>
           <Button
             aria-label="Choose analytics date range"
             className="analytics-controls__trigger"
+            disabled={isPending}
             size="sm"
             type="button"
             variant="outline"
@@ -142,6 +163,7 @@ export const AnalyticsControls: React.FC<Props> = ({
               <Button
                 aria-current={range === option.value ? 'true' : undefined}
                 className="analytics-controls__preset"
+                disabled={isPending}
                 key={option.value}
                 onClick={() => choosePreset(option.value)}
                 size="clear"
@@ -161,7 +183,7 @@ export const AnalyticsControls: React.FC<Props> = ({
                   {from && to ? rangeLabel('custom', from, to) : 'Choose a start and end date'}
                 </span>
               </div>
-              <Button disabled={!from || !to} size="sm" type="submit">
+              <Button disabled={isPending || !from || !to} size="sm" type="submit">
                 Apply
               </Button>
             </div>
@@ -211,8 +233,9 @@ export const AnalyticsControls: React.FC<Props> = ({
       </Popover>
 
       <Select
+        disabled={isPending}
         onValueChange={(value: AnalyticsComparison) =>
-          router.push(hrefFor(adminPath, range, value, startDate, endDate))
+          navigate(hrefFor(adminPath, range, value, startDate, endDate))
         }
         value={comparison}
       >

From 3d0713e1daa945cdd2c66e138a466515ada0cdd5 Mon Sep 17 00:00:00 2001
From: codejagaban <okpusjamin@gmail.com>
Date: Sun, 27 Sep 2026 21:21:54 +0100
Subject: [PATCH 7/7] fix: Show loader across admin navigation

---
 .../admin/AdminNavigationProgress/index.scss  | 34 +++++++
 .../admin/AdminNavigationProgress/index.tsx   | 90 +++++++++++++++++++
 src/components/admin/AdminStyles/index.tsx    |  6 +-
 .../admin/AnalyticsControls/index.scss        | 35 --------
 .../admin/AnalyticsControls/index.tsx         | 13 +--
 5 files changed, 132 insertions(+), 46 deletions(-)
 create mode 100644 src/components/admin/AdminNavigationProgress/index.scss
 create mode 100644 src/components/admin/AdminNavigationProgress/index.tsx

diff --git a/src/components/admin/AdminNavigationProgress/index.scss b/src/components/admin/AdminNavigationProgress/index.scss
new file mode 100644
index 0000000..a1d6f43
--- /dev/null
+++ b/src/components/admin/AdminNavigationProgress/index.scss
@@ -0,0 +1,34 @@
+.admin-navigation-progress {
+  position: fixed;
+  z-index: 1100;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 2px;
+  overflow: hidden;
+  background: var(--theme-elevation-100);
+  pointer-events: none;
+
+  span {
+    display: block;
+    width: 38%;
+    height: 100%;
+    background: var(--theme-elevation-900);
+    transform: translateX(-110%);
+    animation: admin-request-progress 900ms cubic-bezier(0.45, 0, 0.2, 1) infinite;
+  }
+}
+
+@keyframes admin-request-progress {
+  0% { transform: translateX(-110%); }
+  55% { transform: translateX(115%); }
+  100% { transform: translateX(265%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .admin-navigation-progress span {
+    width: 100%;
+    transform: none;
+    animation: none;
+  }
+}
diff --git a/src/components/admin/AdminNavigationProgress/index.tsx b/src/components/admin/AdminNavigationProgress/index.tsx
new file mode 100644
index 0000000..c04a54c
--- /dev/null
+++ b/src/components/admin/AdminNavigationProgress/index.tsx
@@ -0,0 +1,90 @@
+'use client'
+
+import { usePathname, useSearchParams } from 'next/navigation'
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import './index.scss'
+
+type ProgressContext = {
+  start: () => void
+}
+
+const AdminNavigationProgressContext = createContext<ProgressContext>({ start: () => undefined })
+
+export const useAdminNavigationProgress = () => useContext(AdminNavigationProgressContext)
+
+export const AdminNavigationProgress: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [loadingFrom, setLoadingFrom] = useState<string | null>(null)
+  const safetyTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const navigationKey = `${pathname}?${searchParams.toString()}`
+  const isLoading = loadingFrom === navigationKey
+
+  const start = useCallback(() => {
+    if (safetyTimer.current) clearTimeout(safetyTimer.current)
+    setLoadingFrom(navigationKey)
+    safetyTimer.current = setTimeout(() => setLoadingFrom(null), 15_000)
+  }, [navigationKey])
+  const context = useMemo(() => ({ start }), [start])
+
+  useEffect(() => () => {
+    if (safetyTimer.current) clearTimeout(safetyTimer.current)
+  }, [])
+
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      if (
+        event.defaultPrevented ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey
+      ) {
+        return
+      }
+
+      const target = event.target
+      if (!(target instanceof Element)) return
+
+      const anchor = target.closest<HTMLAnchorElement>('a[href]')
+      if (!anchor || anchor.download || (anchor.target && anchor.target !== '_self')) return
+
+      const destination = new URL(anchor.href, window.location.href)
+      if (destination.origin !== window.location.origin || !destination.pathname.startsWith('/admin')) {
+        return
+      }
+
+      const current = `${window.location.pathname}${window.location.search}`
+      const next = `${destination.pathname}${destination.search}`
+      if (next !== current) start()
+    }
+
+    document.addEventListener('click', handleClick, true)
+    return () => document.removeEventListener('click', handleClick, true)
+  }, [start])
+
+  return (
+    <AdminNavigationProgressContext.Provider value={context}>
+      {isLoading && (
+        <div
+          aria-label="Loading admin page"
+          className="admin-navigation-progress"
+          role="progressbar"
+        >
+          <span />
+        </div>
+      )}
+      {children}
+    </AdminNavigationProgressContext.Provider>
+  )
+}
diff --git a/src/components/admin/AdminStyles/index.tsx b/src/components/admin/AdminStyles/index.tsx
index 4ac7d70..0a69560 100644
--- a/src/components/admin/AdminStyles/index.tsx
+++ b/src/components/admin/AdminStyles/index.tsx
@@ -1,5 +1,9 @@
+'use client'
+
 import React from 'react'
 
+import { AdminNavigationProgress } from '../AdminNavigationProgress'
+
 import './nav-icons.scss'
 import './fields.scss'
 import './media-grid.scss'
@@ -12,5 +16,5 @@ import './media-grid.scss'
  * sheet loads on every admin screen, including login.
  */
 export const AdminStyles: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
-  return <>{children}</>
+  return <AdminNavigationProgress>{children}</AdminNavigationProgress>
 }
diff --git a/src/components/admin/AnalyticsControls/index.scss b/src/components/admin/AnalyticsControls/index.scss
index 95aed6d..fbdfa64 100644
--- a/src/components/admin/AnalyticsControls/index.scss
+++ b/src/components/admin/AnalyticsControls/index.scss
@@ -4,27 +4,6 @@
   justify-content: flex-end;
   gap: 0.45rem;
 
-  &__progress {
-    position: fixed;
-    z-index: 1100;
-    top: 0;
-    right: 0;
-    left: 0;
-    height: 2px;
-    overflow: hidden;
-    background: var(--theme-elevation-100);
-    pointer-events: none;
-
-    span {
-      display: block;
-      width: 38%;
-      height: 100%;
-      background: var(--theme-elevation-900);
-      transform: translateX(-110%);
-      animation: analytics-request-progress 900ms cubic-bezier(0.45, 0, 0.2, 1) infinite;
-    }
-  }
-
   &__trigger,
   &__comparison-trigger {
     display: inline-flex;
@@ -101,20 +80,6 @@
   }
 }
 
-@keyframes analytics-request-progress {
-  0% { transform: translateX(-110%); }
-  55% { transform: translateX(115%); }
-  100% { transform: translateX(265%); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .analytics-controls__progress span {
-    width: 100%;
-    transform: none;
-    animation: none;
-  }
-}
-
 .analytics-controls__popover {
   z-index: 1000;
   display: grid;
diff --git a/src/components/admin/AnalyticsControls/index.tsx b/src/components/admin/AnalyticsControls/index.tsx
index 7795694..a1d5e68 100644
--- a/src/components/admin/AnalyticsControls/index.tsx
+++ b/src/components/admin/AnalyticsControls/index.tsx
@@ -19,6 +19,7 @@ import {
 } from '@/components/ui/select'
 
 import type { AnalyticsComparison, AnalyticsRange } from '../Dashboard/analyticsRange'
+import { useAdminNavigationProgress } from '../AdminNavigationProgress'
 
 import './index.scss'
 
@@ -85,6 +86,7 @@ export const AnalyticsControls: React.FC<Props> = ({
   startDate,
 }) => {
   const router = useRouter()
+  const { start: startNavigation } = useAdminNavigationProgress()
   const [isPending, startTransition] = useTransition()
   const [rangeOpen, setRangeOpen] = useState(false)
   const {
@@ -102,6 +104,7 @@ export const AnalyticsControls: React.FC<Props> = ({
   }, [endDate, reset, startDate])
 
   const navigate = (href: string) => {
+    startNavigation()
     startTransition(() => router.push(href))
   }
 
@@ -130,16 +133,6 @@ export const AnalyticsControls: React.FC<Props> = ({
       aria-label="Analytics date controls"
       data-pending={isPending ? 'true' : undefined}
     >
-      {isPending && (
-        <div
-          aria-label="Loading dashboard data"
-          className="analytics-controls__progress"
-          role="progressbar"
-        >
-          <span />
-        </div>
-      )}
-
       <Popover onOpenChange={setRangeOpen} open={rangeOpen}>
         <PopoverTrigger asChild>
           <Button