ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

refactor: remake journeys page with pricing-style slider, remove top paths table

Browse Source
This commit is contained in:
Usman Baig
2026-03-15 11:39:33 +01:00
parent 302e683b32
commit f858bb7811
1 changed files with 66 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
app/sites/[id]/journeys/page.tsx
View File

@@ -5,15 +5,15 @@ 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'
const DEPTH_STEPS = [2, 3, 4, 5, 6, 7, 8, 9, 10]
function getThisWeekRange(): { start: string; end: string } {
const today = new Date()
const dayOfWeek = today.getDay()
@@ -38,12 +38,11 @@ export default function JourneysPage() {
const [depth, setDepth] = useState(3)
const [entryPath, setEntryPath] = useState('')
const sliderIndex = DEPTH_STEPS.indexOf(depth)
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)
@@ -65,6 +64,8 @@ export default function JourneysPage() {
if (showSkeleton) return <JourneysSkeleton />
const totalSessions = transitionsData?.total_sessions ?? 0
return (
<div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
{/* Header */}
@@ -115,53 +116,72 @@ export default function JourneysPage() {
/>
</div>
{/* Controls */}
<div className="flex flex-wrap items-center gap-4 mb-6">
<div className="flex items-center gap-3">
<label className="text-sm text-neutral-500 dark:text-neutral-400">Depth</label>
<input
type="range"
min={2}
max={10}
step={1}
value={depth}
onChange={(e) => setDepth(Number(e.target.value))}
className="w-32 accent-brand-orange"
/>
<span className="text-sm font-medium text-neutral-900 dark:text-white w-5">{depth}</span>
{/* Single card: toolbar + chart */}
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden">
{/* Toolbar */}
<div className="p-6 border-b border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50">
<div className="flex flex-col sm:flex-row sm:items-center gap-6">
{/* Depth slider */}
<div className="flex-1">
<div className="flex justify-between text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-3">
<span>2 steps</span>
<span className="text-brand-orange font-bold">
{depth} steps deep
</span>
<span>10 steps</span>
</div>
<input
type="range"
min="0"
max={DEPTH_STEPS.length - 1}
step="1"
value={sliderIndex}
onChange={(e) => setDepth(DEPTH_STEPS[parseInt(e.target.value)])}
aria-label="Journey depth"
aria-valuetext={`${depth} steps deep`}
className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700 accent-brand-orange focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
/>
</div>
{/* Entry point + Reset */}
<div className="flex items-center gap-3 shrink-0">
<Select
variant="input"
className="min-w-[180px]"
value={entryPath}
onChange={(value) => setEntryPath(value)}
options={entryPointOptions}
/>
{(depth !== 3 || entryPath) && (
<button
onClick={() => { setDepth(3); setEntryPath('') }}
className="text-sm text-neutral-500 hover:text-neutral-900 dark:hover:text-white transition-colors whitespace-nowrap"
>
Reset
</button>
)}
</div>
</div>
</div>
<Select
variant="input"
className="min-w-[180px]"
value={entryPath}
onChange={(value) => setEntryPath(value)}
options={entryPointOptions}
/>
{/* Sankey Diagram */}
<div className="p-6">
<SankeyDiagram
transitions={transitionsData?.transitions ?? []}
totalSessions={totalSessions}
depth={depth}
onNodeClick={(path) => setEntryPath(path)}
/>
</div>
{(depth !== 3 || entryPath) && (
<button
onClick={() => { setDepth(3); setEntryPath('') }}
className="text-sm text-neutral-500 hover:text-neutral-900 dark:hover:text-white transition-colors"
>
Reset
</button>
{/* Footer */}
{totalSessions > 0 && (
<div className="px-6 pb-5 text-sm text-neutral-500 dark:text-neutral-400">
{totalSessions.toLocaleString()} sessions tracked
</div>
)}
</div>
{/* Sankey Diagram */}
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 mb-6">
<SankeyDiagram
transitions={transitionsData?.transitions ?? []}
totalSessions={transitionsData?.total_sessions ?? 0}
depth={depth}
onNodeClick={(path) => setEntryPath(path)}
/>
</div>
{/* Top Paths */}
<TopPathsTable paths={topPaths ?? []} loading={topPathsLoading} />
{/* Date Picker Modal */}
<DatePicker
isOpen={isDatePickerOpen}