From 908606ade24a5f15ebd8270cdc8afa9daafc2daa Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 12 Mar 2026 21:49:31 +0100
Subject: [PATCH] fix: make journey empty states consistent with dashboard
 blocks

---
 components/journeys/SankeyDiagram.tsx | 13 +++++++++++--
 components/journeys/TopPathsTable.tsx | 13 ++++++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/components/journeys/SankeyDiagram.tsx b/components/journeys/SankeyDiagram.tsx
index 4baa053..4ac3a62 100644
--- a/components/journeys/SankeyDiagram.tsx
+++ b/components/journeys/SankeyDiagram.tsx
@@ -2,6 +2,7 @@
 
 import { useMemo, useState } from 'react'
 import { useTheme } from '@ciphera-net/ui'
+import { TreeStructure } from '@phosphor-icons/react'
 import type { PathTransition } from '@/lib/api/journeys'
 
 // ─── Types ──────────────────────────────────────────────────────────
@@ -277,8 +278,16 @@ export default function SankeyDiagram({
 
   if (!transitions.length || !links.length) {
     return (
-      <div className="flex items-center justify-center h-[400px] text-neutral-500 dark:text-neutral-400 text-sm">
-        No journey data available
+      <div className="h-[400px] flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
+        <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
+          <TreeStructure className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+        </div>
+        <h4 className="font-semibold text-neutral-900 dark:text-white">
+          No journey data yet
+        </h4>
+        <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+          Navigation flows will appear here as visitors browse through your site.
+        </p>
       </div>
     )
   }
diff --git a/components/journeys/TopPathsTable.tsx b/components/journeys/TopPathsTable.tsx
index ae04ebf..d92ee70 100644
--- a/components/journeys/TopPathsTable.tsx
+++ b/components/journeys/TopPathsTable.tsx
@@ -2,6 +2,7 @@
 
 import type { TopPath } from '@/lib/api/journeys'
 import { TableSkeleton } from '@/components/skeletons'
+import { Path } from '@phosphor-icons/react'
 
 interface TopPathsTableProps {
   paths: TopPath[]
@@ -69,9 +70,15 @@ export default function TopPathsTable({ paths, loading }: TopPathsTableProps) {
           </div>
         </div>
       ) : (
-        <div className="flex items-center justify-center py-12">
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
-            No path data available
+        <div className="flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
+          <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
+            <Path className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+          </div>
+          <h4 className="font-semibold text-neutral-900 dark:text-white">
+            No path data yet
+          </h4>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+            Common navigation paths will appear here as visitors browse your site.
           </p>
         </div>
       )}