trips) add dashboard overview (#54)
All checks were successful
Build and Push Image / docker-build-and-push (push) Successful in 2m14s
All checks were successful
Build and Push Image / docker-build-and-push (push) Successful in 2m14s
Reviewed-on: #54 Co-authored-by: AI Agent <ai-agent@campbellwireless.net> Co-committed-by: AI Agent <ai-agent@campbellwireless.net>
This commit was merged in pull request #54.
This commit is contained in:
@@ -1,10 +1,449 @@
|
||||
<script lang="ts">
|
||||
import { base } from '$app/paths';
|
||||
import type { DashboardData, DashboardMapStop } from '$lib/server/dashboard.js';
|
||||
|
||||
let { data } = $props();
|
||||
const dashboard = $derived(data.dashboard) as DashboardData;
|
||||
|
||||
const markers = $derived(
|
||||
dashboard.mapStops.map((stop: DashboardMapStop, index: number) => {
|
||||
const x = ((stop.lon + 180) / 360) * 100;
|
||||
const y = ((90 - stop.lat) / 180) * 100;
|
||||
return {
|
||||
...stop,
|
||||
id: `${stop.tripId}-${index}`,
|
||||
x: Math.min(98, Math.max(2, x)),
|
||||
y: Math.min(96, Math.max(4, y))
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
function parseDate(value: string | null): Date | null {
|
||||
if (!value) return null;
|
||||
const parsed = new Date(`${value}T00:00:00`);
|
||||
return Number.isNaN(parsed.getTime()) ? null : parsed;
|
||||
}
|
||||
|
||||
function formatDate(value: string | null): string {
|
||||
if (!value) return 'TBD';
|
||||
return new Date(`${value}T00:00:00`).toLocaleDateString(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
function formatRange(start: string | null, end: string | null): string {
|
||||
if (!start && !end) return 'Dates not set yet';
|
||||
return `${formatDate(start)} — ${formatDate(end)}`;
|
||||
}
|
||||
|
||||
function dayDiffInclusive(start: string | null, end: string | null): number | null {
|
||||
const startDate = parseDate(start);
|
||||
const endDate = parseDate(end);
|
||||
if (!startDate || !endDate) return null;
|
||||
const diffMs = endDate.getTime() - startDate.getTime();
|
||||
if (Number.isNaN(diffMs)) return null;
|
||||
return Math.max(0, Math.round(diffMs / 86400000) + 1);
|
||||
}
|
||||
|
||||
function progressPercent(start: string | null, end: string | null): number | null {
|
||||
const startDate = parseDate(start);
|
||||
const endDate = parseDate(end);
|
||||
if (!startDate || !endDate) return null;
|
||||
const now = new Date();
|
||||
const totalMs = endDate.getTime() - startDate.getTime();
|
||||
if (totalMs <= 0) return null;
|
||||
const elapsedMs = now.getTime() - startDate.getTime();
|
||||
return Math.min(100, Math.max(0, Math.round((elapsedMs / totalMs) * 100)));
|
||||
}
|
||||
|
||||
function daysUntil(value: string | null): number | null {
|
||||
const target = parseDate(value);
|
||||
if (!target) return null;
|
||||
const now = new Date();
|
||||
const diffMs = target.getTime() - now.getTime();
|
||||
return Math.ceil(diffMs / 86400000);
|
||||
}
|
||||
|
||||
function currentTripDay(start: string | null, end: string | null): { current: number; total: number } | null {
|
||||
const startDate = parseDate(start);
|
||||
const endDate = parseDate(end);
|
||||
const total = dayDiffInclusive(start, end);
|
||||
if (!startDate || !endDate || !total) return null;
|
||||
const now = new Date();
|
||||
const elapsed = Math.floor((now.getTime() - startDate.getTime()) / 86400000) + 1;
|
||||
return { current: Math.min(total, Math.max(1, elapsed)), total };
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Dashboard — Trips</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Manrope:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<h1 class="mb-2 text-2xl font-bold text-gray-900">Dashboard</h1>
|
||||
<p class="text-gray-600">Welcome, {data.session.user?.name ?? data.session.user?.email}.</p>
|
||||
<div class="dashboard-shell space-y-8">
|
||||
<header class="relative overflow-hidden rounded-3xl border border-slate-200 bg-gradient-to-br from-amber-50 via-white to-sky-50 p-6">
|
||||
<div class="absolute -right-10 top-6 h-32 w-32 rounded-full bg-sky-200/40 blur-3xl"></div>
|
||||
<div class="absolute -left-12 bottom-6 h-40 w-40 rounded-full bg-amber-200/40 blur-3xl"></div>
|
||||
<div class="relative">
|
||||
<p class="text-xs uppercase tracking-[0.2em] text-slate-500">Overview</p>
|
||||
<h1 class="display mt-2 text-3xl text-slate-900 sm:text-4xl">Dashboard</h1>
|
||||
<p class="mt-2 text-sm text-slate-600">
|
||||
Welcome back, {data.session.user?.name ?? data.session.user?.email}. Here’s a quick pulse on
|
||||
your travel story.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="grid gap-6 lg:grid-cols-[1.6fr,1fr]">
|
||||
<div
|
||||
class="relative overflow-hidden rounded-3xl border border-slate-200 bg-slate-950/90 p-6 text-white"
|
||||
data-testid="trip-map"
|
||||
>
|
||||
<div class="absolute inset-0 map-grid opacity-30"></div>
|
||||
<div class="absolute -left-20 top-10 h-48 w-48 rounded-full bg-emerald-400/20 blur-3xl"></div>
|
||||
<div class="absolute right-0 bottom-0 h-56 w-56 rounded-full bg-sky-400/20 blur-3xl"></div>
|
||||
<svg
|
||||
class="absolute inset-0 h-full w-full opacity-70"
|
||||
viewBox="0 0 1000 500"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect width="1000" height="500" fill="none" />
|
||||
<polygon class="map-land" points="110,140 220,90 330,120 360,200 290,260 170,240" />
|
||||
<polygon class="map-land" points="260,260 330,260 370,320 340,430 260,400 230,320" />
|
||||
<polygon class="map-land" points="420,120 520,110 560,150 520,190 450,170" />
|
||||
<polygon class="map-land" points="450,200 560,210 610,320 550,420 470,340" />
|
||||
<polygon class="map-land" points="580,120 760,110 880,200 780,270 620,220" />
|
||||
<polygon class="map-land" points="740,320 830,330 860,400 800,440 720,380" />
|
||||
</svg>
|
||||
<div class="relative">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p class="text-xs uppercase tracking-[0.2em] text-emerald-200">World map</p>
|
||||
<h2 class="display mt-2 text-xl text-white">Past & future routes</h2>
|
||||
<p class="mt-2 text-sm text-slate-200/80">
|
||||
Pins highlight places from your journey log and what’s still ahead.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 text-xs text-slate-200">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="legend-dot legend-past"></span>
|
||||
Past trips
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="legend-dot legend-current"></span>
|
||||
In progress
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="legend-dot legend-future"></span>
|
||||
Upcoming
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative mt-6 h-64">
|
||||
{#if markers.length === 0}
|
||||
<div class="flex h-full items-center justify-center rounded-2xl border border-dashed border-white/30 text-sm text-slate-200">
|
||||
Add destinations to your trips to light up the map.
|
||||
</div>
|
||||
{:else}
|
||||
{#each markers as marker}
|
||||
<span
|
||||
class="map-marker map-marker--{marker.status}"
|
||||
data-testid="map-stop"
|
||||
data-status={marker.status}
|
||||
style={`left:${marker.x}%; top:${marker.y}%;`}
|
||||
title={`${marker.tripName} · ${marker.label}`}
|
||||
></span>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4">
|
||||
<div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
|
||||
<p class="text-xs uppercase tracking-[0.2em] text-slate-500">Travel diary</p>
|
||||
<h2 class="display mt-2 text-xl text-slate-900">Where you’ve been</h2>
|
||||
<div class="mt-4 grid grid-cols-2 gap-4">
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">Past trips</span>
|
||||
<span class="stat-value" data-testid="stat-past-trips">{dashboard.stats.pastTrips}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">Days away</span>
|
||||
<span class="stat-value" data-testid="stat-days-away">{dashboard.stats.daysAway}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">Countries visited</span>
|
||||
<span class="stat-value" data-testid="stat-countries">{dashboard.stats.countriesVisited}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">Cities explored</span>
|
||||
<span class="stat-value" data-testid="stat-cities">{dashboard.stats.citiesVisited}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<p class="text-xs uppercase tracking-[0.2em] text-slate-500">Top destinations</p>
|
||||
{#if dashboard.stats.topCountries.length === 0}
|
||||
<p class="mt-2 text-sm text-slate-500">No past destinations yet.</p>
|
||||
{:else}
|
||||
<div class="mt-3 space-y-2">
|
||||
{#each dashboard.stats.topCountries as country}
|
||||
<div class="flex items-center justify-between text-sm text-slate-700">
|
||||
<span>{country.country}</span>
|
||||
<span class="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-600">
|
||||
{country.count} stop{country.count === 1 ? '' : 's'}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-3xl border border-slate-200 bg-gradient-to-br from-slate-900 via-slate-900 to-emerald-900 p-5 text-white shadow-sm">
|
||||
<p class="text-xs uppercase tracking-[0.2em] text-emerald-200">Next up</p>
|
||||
<h2 class="display mt-2 text-xl">Trips in progress</h2>
|
||||
{#if dashboard.inProgressTrips.length === 0}
|
||||
<p class="mt-3 text-sm text-emerald-100/80">No trips are underway right now.</p>
|
||||
{:else}
|
||||
<div class="mt-4 space-y-3">
|
||||
{#each dashboard.inProgressTrips as trip}
|
||||
<a
|
||||
href="{base}/trips/{trip.id}"
|
||||
class="block rounded-2xl border border-white/10 bg-white/5 p-4 transition hover:bg-white/10"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-semibold text-white">{trip.name}</h3>
|
||||
<span class="badge badge-current">In progress</span>
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-emerald-100/80">
|
||||
{formatRange(trip.start_date, trip.end_date)}
|
||||
</p>
|
||||
{#if progressPercent(trip.start_date, trip.end_date) !== null}
|
||||
<div class="mt-3 h-1.5 w-full rounded-full bg-white/10">
|
||||
<div
|
||||
class="h-1.5 rounded-full bg-emerald-300"
|
||||
style={`width:${progressPercent(trip.start_date, trip.end_date)}%`}
|
||||
></div>
|
||||
</div>
|
||||
{/if}
|
||||
<p class="mt-2 text-xs text-emerald-100/70">
|
||||
{#if currentTripDay(trip.start_date, trip.end_date)}
|
||||
Day {currentTripDay(trip.start_date, trip.end_date)?.current} of {currentTripDay(
|
||||
trip.start_date,
|
||||
trip.end_date
|
||||
)?.total}
|
||||
·
|
||||
{/if}
|
||||
{trip.planCount} plans logged
|
||||
</p>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grid gap-6 lg:grid-cols-2">
|
||||
<div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-xs uppercase tracking-[0.2em] text-slate-500">On the horizon</p>
|
||||
<h2 class="display mt-2 text-xl text-slate-900">Trips being planned</h2>
|
||||
</div>
|
||||
<a href="{base}/trips/upcoming" class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 hover:text-slate-800">
|
||||
View all
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{#if dashboard.plannedTrips.length === 0}
|
||||
<p class="mt-4 text-sm text-slate-500">No future trips yet. Start planning the next adventure.</p>
|
||||
{:else}
|
||||
<div class="mt-4 space-y-3">
|
||||
{#each dashboard.plannedTrips as trip}
|
||||
<a
|
||||
href="{base}/trips/{trip.id}"
|
||||
class="block rounded-2xl border border-slate-200 bg-slate-50 p-4 transition hover:bg-white"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-semibold text-slate-900">{trip.name}</h3>
|
||||
<span class="badge badge-future">Planning</span>
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-slate-500">{formatRange(trip.start_date, trip.end_date)}</p>
|
||||
<p class="mt-2 text-xs text-slate-600">
|
||||
{#if daysUntil(trip.start_date) !== null}
|
||||
Starts in {daysUntil(trip.start_date)} day{daysUntil(trip.start_date) === 1 ? '' : 's'}
|
||||
{:else}
|
||||
Dates to be confirmed
|
||||
{/if}
|
||||
· {trip.planCount} plans sketched
|
||||
</p>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="rounded-3xl border border-slate-200 bg-gradient-to-br from-white via-white to-sky-50 p-6 shadow-sm">
|
||||
<p class="text-xs uppercase tracking-[0.2em] text-slate-500">Quick actions</p>
|
||||
<h2 class="display mt-2 text-xl text-slate-900">Build your next story</h2>
|
||||
<p class="mt-2 text-sm text-slate-600">
|
||||
Add a destination, log transportation, or save an idea to keep your timeline evolving.
|
||||
</p>
|
||||
<div class="mt-4 flex flex-wrap gap-3">
|
||||
<a
|
||||
href="{base}/trips/new"
|
||||
class="rounded-full bg-slate-900 px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-white transition hover:bg-slate-800"
|
||||
>
|
||||
Plan new trip
|
||||
</a>
|
||||
<a
|
||||
href="{base}/trips/upcoming"
|
||||
class="rounded-full border border-slate-300 px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-slate-600 transition hover:border-slate-400 hover:text-slate-900"
|
||||
>
|
||||
Browse upcoming
|
||||
</a>
|
||||
<a
|
||||
href="{base}/trips/past"
|
||||
class="rounded-full border border-slate-300 px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-slate-600 transition hover:border-slate-400 hover:text-slate-900"
|
||||
>
|
||||
Revisit past trips
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.dashboard-shell {
|
||||
font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.display {
|
||||
font-family: 'Fraunces', 'Times New Roman', serif;
|
||||
}
|
||||
|
||||
.map-grid {
|
||||
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
}
|
||||
|
||||
.map-land {
|
||||
fill: rgba(148, 163, 184, 0.25);
|
||||
stroke: rgba(148, 163, 184, 0.35);
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.map-marker {
|
||||
position: absolute;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
border-radius: 999px;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15), 0 8px 20px rgba(15, 23, 42, 0.35);
|
||||
}
|
||||
|
||||
.map-marker--past {
|
||||
background: #e2e8f0;
|
||||
border: 2px solid #94a3b8;
|
||||
}
|
||||
|
||||
.map-marker--current {
|
||||
background: #34d399;
|
||||
border: 2px solid #0f766e;
|
||||
animation: pulse 2.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.map-marker--future {
|
||||
background: #fbbf24;
|
||||
border: 2px solid #b45309;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
height: 0.6rem;
|
||||
width: 0.6rem;
|
||||
border-radius: 999px;
|
||||
border: 2px solid transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.legend-past {
|
||||
background: #e2e8f0;
|
||||
border-color: #94a3b8;
|
||||
}
|
||||
|
||||
.legend-current {
|
||||
background: #34d399;
|
||||
border-color: #0f766e;
|
||||
}
|
||||
|
||||
.legend-future {
|
||||
background: #fbbf24;
|
||||
border-color: #b45309;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
border-radius: 1rem;
|
||||
background: #f8fafc;
|
||||
padding: 0.9rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.badge {
|
||||
border-radius: 999px;
|
||||
padding: 0.25rem 0.6rem;
|
||||
font-size: 0.65rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
.badge-current {
|
||||
background: rgba(52, 211, 153, 0.2);
|
||||
color: #a7f3d0;
|
||||
border: 1px solid rgba(52, 211, 153, 0.4);
|
||||
}
|
||||
|
||||
.badge-future {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
border: 1px solid #fcd34d;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.3), 0 8px 20px rgba(15, 23, 42, 0.35);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -50%) scale(1.12);
|
||||
box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.18), 0 8px 20px rgba(15, 23, 42, 0.35);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user