fix: make journey empty states consistent with dashboard blocks

This commit is contained in:
Usman Baig
2026-03-12 21:49:31 +01:00
parent 4cd9544672
commit 908606ade2
2 changed files with 21 additions and 5 deletions

View File

@@ -2,6 +2,7 @@
import { useMemo, useState } from 'react' import { useMemo, useState } from 'react'
import { useTheme } from '@ciphera-net/ui' import { useTheme } from '@ciphera-net/ui'
import { TreeStructure } from '@phosphor-icons/react'
import type { PathTransition } from '@/lib/api/journeys' import type { PathTransition } from '@/lib/api/journeys'
// ─── Types ────────────────────────────────────────────────────────── // ─── Types ──────────────────────────────────────────────────────────
@@ -277,8 +278,16 @@ export default function SankeyDiagram({
if (!transitions.length || !links.length) { if (!transitions.length || !links.length) {
return ( return (
<div className="flex items-center justify-center h-[400px] text-neutral-500 dark:text-neutral-400 text-sm"> <div className="h-[400px] flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
No journey data available <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> </div>
) )
} }

View File

@@ -2,6 +2,7 @@
import type { TopPath } from '@/lib/api/journeys' import type { TopPath } from '@/lib/api/journeys'
import { TableSkeleton } from '@/components/skeletons' import { TableSkeleton } from '@/components/skeletons'
import { Path } from '@phosphor-icons/react'
interface TopPathsTableProps { interface TopPathsTableProps {
paths: TopPath[] paths: TopPath[]
@@ -69,9 +70,15 @@ export default function TopPathsTable({ paths, loading }: TopPathsTableProps) {
</div> </div>
</div> </div>
) : ( ) : (
<div className="flex items-center justify-center py-12"> <div className="flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
<p className="text-sm text-neutral-500 dark:text-neutral-400"> <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
No path data available <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> </p>
</div> </div>
)} )}