feat: redesign top paths as breadcrumb cards with icons

app/sites/[id]/journeys/page.tsx

@@ -5,10 +5,12 @@ import { useParams } from 'next/navigation'
 import { getDateRange, formatDate } from '@ciphera-net/ui'
 import { Select, DatePicker } from '@ciphera-net/ui'
 import SankeyDiagram from '@/components/journeys/SankeyDiagram'
+import TopPathsTable from '@/components/journeys/TopPathsTable'
 import { JourneysSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 import {
   useDashboard,
   useJourneyTransitions,
+  useJourneyTopPaths,
   useJourneyEntryPoints,
 } from '@/lib/swr/dashboard'
 
@@ -44,6 +46,9 @@ export default function JourneysPage() {
   const { data: transitionsData, isLoading: transitionsLoading } = useJourneyTransitions(
     siteId, dateRange.start, dateRange.end, depth, 1, entryPath || undefined
   )
+  const { data: topPaths, isLoading: topPathsLoading } = useJourneyTopPaths(
+    siteId, dateRange.start, dateRange.end, 20, 1, entryPath || undefined
+  )
   const { data: entryPoints } = useJourneyEntryPoints(siteId, dateRange.start, dateRange.end)
   const { data: dashboard } = useDashboard(siteId, dateRange.start, dateRange.end)
 
@@ -185,6 +190,11 @@ export default function JourneysPage() {
         )}
       </div>
 
+      {/* Top Paths */}
+      <div className="mt-6">
+        <TopPathsTable paths={topPaths ?? []} loading={topPathsLoading} />
+      </div>
+
       {/* Date Picker Modal */}
       <DatePicker
         isOpen={isDatePickerOpen}