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

fix: frontend consistency audit — 55 files cleaned up

Browse Source 
Consistency fixes:
- Extract getThisWeekRange/getThisMonthRange to shared lib/utils/dateRanges.ts
  (removed 4 identical copy-pasted definitions)
- Add error boundaries for behavior, cdn, search, pagespeed pages
  (4 new error.tsx files — previously fell through to generic parent error)
- Add "View setup guide" CTA to empty states on journeys and behavior pages
  (previously showed text with no actionable button)
- Fix non-lazy useState initializer in funnel detail page
- Fix Bot & Spam settings header from text-xl to text-2xl (matches all other sections)
- Add useMinimumLoading to PageSpeed skeleton (consistent with all other pages)

Cleanup:
- Remove 438 redundant dark: class prefixes (app is dark-mode only)
  text-neutral-500 dark:text-neutral-400 → text-neutral-400 (206 occurrences)
  text-neutral-900 dark:text-white → text-white (232 occurrences)
- Remove dead @stripe/react-stripe-js and @stripe/stripe-js packages
  (billing migrated to Polar, no code imports Stripe)
- Remove duplicate motion package (framer-motion is the one actually used)
This commit is contained in:
Usman Baig
2026-03-23 19:50:16 +01:00
parent eca21bf627
commit a3c1af7c95
55 changed files with 560 additions and 530 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/admin/filtered-traffic/page.tsx
View File

@@ -28,8 +28,8 @@ export default function FilteredTrafficPage() {
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h2 className="text-xl font-semibold text-neutral-900 dark:text-white">Filtered Traffic</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1">
<h2 className="text-xl font-semibold text-white">Filtered Traffic</h2>
<p className="text-sm text-neutral-400 mt-1">
{totalBlocked.toLocaleString()} spam referrers blocked in the last {days} days
</p>
</div>
@@ -52,22 +52,22 @@ export default function FilteredTrafficPage() {
<div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 shadow-sm overflow-hidden">
{referrers.length === 0 ? (
<div className="p-12 text-center text-neutral-500 dark:text-neutral-400">
<div className="p-12 text-center text-neutral-400">
No filtered referrers in this period
</div>
) : (
<table className="w-full text-left text-sm">
<thead className="border-b border-neutral-200 dark:border-neutral-800">
<tr>
<th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Domain</th>
<th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Reason</th>
<th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400 text-right">Blocked</th>
<th className="px-4 py-3 font-medium text-neutral-400">Domain</th>
<th className="px-4 py-3 font-medium text-neutral-400">Reason</th>
<th className="px-4 py-3 font-medium text-neutral-400 text-right">Blocked</th>
</tr>
</thead>
<tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
{referrers.map((r) => (
<tr key={`${r.domain}-${r.reason}`} className="hover:bg-neutral-50 dark:hover:bg-neutral-900/50">
<td className="px-4 py-3 text-neutral-900 dark:text-white font-mono text-xs">{r.domain}</td>
<td className="px-4 py-3 text-white font-mono text-xs">{r.domain}</td>
<td className="px-4 py-3">
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
r.reason === 'blocklist'
@@ -77,7 +77,7 @@ export default function FilteredTrafficPage() {
{r.reason}
</span>
</td>
<td className="px-4 py-3 text-right text-neutral-900 dark:text-white tabular-nums">
<td className="px-4 py-3 text-right text-white tabular-nums">
{r.count.toLocaleString()}
</td>
</tr>

2
app/admin/layout.tsx
View File

@@ -37,7 +37,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
return (
<div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
<div className="mb-8 flex items-center justify-between">
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Pulse Admin</h1>
<h1 className="text-2xl font-bold text-white">Pulse Admin</h1>
</div>
{children}
</div>

10
app/admin/orgs/[id]/page.tsx
View File

@@ -107,7 +107,7 @@ export default function AdminOrgDetailPage() {
return (
<div className="space-y-6 max-w-4xl mx-auto">
<div className="flex items-center justify-between">
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white">
<h2 className="text-2xl font-bold text-white">
{org.business_name || 'Unnamed Organization'}
</h2>
<span className="text-sm font-mono text-neutral-500">{org.organization_id}</span>
@@ -116,7 +116,7 @@ export default function AdminOrgDetailPage() {
<div className="grid gap-6 md:grid-cols-2">
{/* Current Status */}
<div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-sm">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-4">Current Status</h3>
<h3 className="text-lg font-semibold text-white mb-4">Current Status</h3>
<div className="grid grid-cols-2 gap-2 text-sm">
<span className="text-neutral-500">Plan:</span>
<span className="font-medium">{org.plan_id}</span>
@@ -145,7 +145,7 @@ export default function AdminOrgDetailPage() {
{/* Sites */}
<div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-sm">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-4">Sites ({org.sites.length})</h3>
<h3 className="text-lg font-semibold text-white mb-4">Sites ({org.sites.length})</h3>
<ul className="space-y-2 max-h-60 overflow-y-auto">
{org.sites.map((site) => (
<li key={site.id} className="flex justify-between items-center text-sm p-2 bg-neutral-50 dark:bg-neutral-900 rounded">
@@ -160,7 +160,7 @@ export default function AdminOrgDetailPage() {
{/* Grant Plan Form */}
<div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-sm">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-4">Grant Plan (Manual Override)</h3>
<h3 className="text-lg font-semibold text-white mb-4">Grant Plan (Manual Override)</h3>
<form onSubmit={handleGrantPlan} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
@@ -196,7 +196,7 @@ export default function AdminOrgDetailPage() {
type="datetime-local"
value={periodEnd}
onChange={(e) => setPeriodEnd(e.target.value)}
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
required
/>
<div className="flex gap-2 mt-1">

20
app/admin/orgs/page.tsx
View File

@@ -43,28 +43,28 @@ export default function AdminOrgsPage() {
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<h2 className="text-xl font-semibold text-neutral-900 dark:text-white">Organizations</h2>
<h2 className="text-xl font-semibold text-white">Organizations</h2>
</div>
<div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-sm">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-4">All Organizations</h3>
<h3 className="text-lg font-semibold text-white mb-4">All Organizations</h3>
<div className="overflow-x-auto">
<table className="w-full text-left text-sm">
<thead className="border-b border-neutral-200 dark:border-neutral-800">
<tr>
<th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Name</th>
<th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Org ID</th>
<th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Plan</th>
<th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Status</th>
<th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Limit</th>
<th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Updated</th>
<th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Actions</th>
<th className="px-4 py-3 font-medium text-neutral-400">Name</th>
<th className="px-4 py-3 font-medium text-neutral-400">Org ID</th>
<th className="px-4 py-3 font-medium text-neutral-400">Plan</th>
<th className="px-4 py-3 font-medium text-neutral-400">Status</th>
<th className="px-4 py-3 font-medium text-neutral-400">Limit</th>
<th className="px-4 py-3 font-medium text-neutral-400">Updated</th>
<th className="px-4 py-3 font-medium text-neutral-400">Actions</th>
</tr>
</thead>
<tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
{orgs.map((org) => (
<tr key={org.organization_id} className="hover:bg-neutral-50 dark:hover:bg-neutral-900/50">
<td className="px-4 py-3 text-neutral-900 dark:text-white font-medium">
<td className="px-4 py-3 text-white font-medium">
{org.business_name || 'N/A'}
</td>
<td className="px-4 py-3">

12
app/admin/page.tsx
View File

@@ -9,9 +9,9 @@ export default function AdminDashboard() {
href="/admin/orgs"
className="block transition-transform hover:scale-[1.02] rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-sm"
>
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Organizations</h3>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1">Manage organization plans and limits</p>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-4">
<h3 className="text-lg font-semibold text-white">Organizations</h3>
<p className="text-sm text-neutral-400 mt-1">Manage organization plans and limits</p>
<p className="text-sm text-neutral-400 mt-4">
View all organizations, check billing status, and manually grant plans.
</p>
</Link>
@@ -19,9 +19,9 @@ export default function AdminDashboard() {
href="/admin/filtered-traffic"
className="block transition-transform hover:scale-[1.02] rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-sm"
>
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Filtered Traffic</h3>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1">Monitor blocked referrer spam</p>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-4">
<h3 className="text-lg font-semibold text-white">Filtered Traffic</h3>
<p className="text-sm text-neutral-400 mt-1">Monitor blocked referrer spam</p>
<p className="text-sm text-neutral-400 mt-4">
View domains blocked by the spam filter and check for false positives.
</p>
</Link>

2
app/changelog/page.tsx
View File

@@ -18,7 +18,7 @@ export default function ChangelogPage() {
return (
<div className="mx-auto max-w-3xl px-4 sm:px-6 py-8">
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-2">
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-2">
Changelog
</h1>
<p className="text-neutral-600 dark:text-neutral-400 mb-8 text-sm">

14
app/notifications/page.tsx
View File

@@ -122,8 +122,8 @@ export default function NotificationsPage() {
)}
</div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">Notifications</h1>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6">
<h1 className="text-2xl font-bold text-white mb-2">Notifications</h1>
<p className="text-sm text-neutral-400 mb-6">
Manage which notifications you receive in{' '}
<Link href="/org-settings?tab=notifications" className="text-brand-orange hover:underline">
Organization Settings → Notifications
@@ -137,7 +137,7 @@ export default function NotificationsPage() {
{error}
</div>
) : notifications.length === 0 ? (
<div className="p-6 text-center text-neutral-500 dark:text-neutral-400 rounded-2xl border border-neutral-200 dark:border-neutral-800">
<div className="p-6 text-center text-neutral-400 rounded-2xl border border-neutral-200 dark:border-neutral-800">
<p>No notifications yet</p>
<p className="text-sm mt-2">
Manage which notifications you receive in{' '}
@@ -159,11 +159,11 @@ export default function NotificationsPage() {
<div className="flex gap-3">
{getTypeIcon(n.type)}
<div className="min-w-0 flex-1">
<p className={`text-sm ${!n.read ? 'font-medium' : ''} text-neutral-900 dark:text-white`}>
<p className={`text-sm ${!n.read ? 'font-medium' : ''} text-white`}>
{n.title}
</p>
{n.body && (
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">{n.body}</p>
<p className="text-xs text-neutral-400 mt-0.5">{n.body}</p>
)}
<p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
{formatTimeAgo(n.created_at)}
@@ -182,11 +182,11 @@ export default function NotificationsPage() {
<div className="flex gap-3">
{getTypeIcon(n.type)}
<div className="min-w-0 flex-1">
<p className={`text-sm ${!n.read ? 'font-medium' : ''} text-neutral-900 dark:text-white`}>
<p className={`text-sm ${!n.read ? 'font-medium' : ''} text-white`}>
{n.title}
</p>
{n.body && (
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">{n.body}</p>
<p className="text-xs text-neutral-400 mt-0.5">{n.body}</p>
)}
<p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
{formatTimeAgo(n.created_at)}

2
app/onboarding/page.tsx
View File

@@ -47,7 +47,7 @@ export default function OnboardingPage() {
<div className="min-h-screen flex items-center justify-center bg-neutral-50 dark:bg-neutral-900 px-4">
<div className="max-w-md w-full space-y-8">
<div className="text-center">
<h2 className="mt-6 text-2xl font-bold text-neutral-900 dark:text-white">
<h2 className="mt-6 text-2xl font-bold text-white">
Welcome to Pulse
</h2>
<p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">

6
app/share/[id]/page.tsx
View File

@@ -195,7 +195,7 @@ export default function PublicDashboardPage() {
<div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mx-auto mb-4 text-brand-orange">
<ZapIcon className="w-6 h-6" />
</div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
<h1 className="text-2xl font-bold text-white mb-2">
Protected Dashboard
</h1>
<p className="text-neutral-600 dark:text-neutral-400">
@@ -210,7 +210,7 @@ export default function PublicDashboardPage() {
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter password"
className="w-full px-4 py-2 border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange focus:border-transparent"
className="w-full px-4 py-2 border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-white focus:ring-2 focus:ring-brand-orange focus:border-transparent"
autoFocus
/>
</div>
@@ -270,7 +270,7 @@ export default function PublicDashboardPage() {
<div className="w-2 h-2 rounded-full bg-brand-orange animate-pulse" />
<span className="text-sm font-medium text-brand-orange uppercase tracking-wider">Public Dashboard</span>
</div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white flex items-center gap-3">
<h1 className="text-2xl font-bold text-white flex items-center gap-3">
<Image
src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
alt={site.name}

13
app/sites/[id]/behavior/error.tsx Normal file
View File

@@ -0,0 +1,13 @@
'use client'
import ErrorDisplay from '@/components/ErrorDisplay'
export default function BehaviorError({ reset }: { error: Error; reset: () => void }) {
return (
<ErrorDisplay
title="Behavior data failed to load"
message="We couldn't load the frustration signals. This might be a temporary issue — try again."
onRetry={reset}
/>
)
}

20
app/sites/[id]/behavior/page.tsx
View File

@@ -2,7 +2,7 @@
import { useCallback, useEffect, useState } from 'react'
import { useParams } from 'next/navigation'
import { getDateRange, formatDate } from '@ciphera-net/ui'
import { getDateRange, formatDate, getThisWeekRange, getThisMonthRange } from '@/lib/utils/dateRanges'
import { Select, DatePicker } from '@ciphera-net/ui'
import dynamic from 'next/dynamic'
import { getRageClicks, getDeadClicks } from '@/lib/api/stats'
@@ -15,20 +15,6 @@ import { BehaviorSkeleton, useMinimumLoading, useSkeletonFade } from '@/componen
const ScrollDepth = dynamic(() => import('@/components/dashboard/ScrollDepth'))
function getThisWeekRange(): { start: string; end: string } {
const today = new Date()
const dayOfWeek = today.getDay()
const monday = new Date(today)
monday.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1))
return { start: formatDate(monday), end: formatDate(today) }
}
function getThisMonthRange(): { start: string; end: string } {
const today = new Date()
const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
return { start: formatDate(firstOfMonth), end: formatDate(today) }
}
export default function BehaviorPage() {
const params = useParams()
const siteId = params.id as string
@@ -74,10 +60,10 @@ export default function BehaviorPage() {
{/* Header */}
<div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
<h1 className="text-2xl font-bold text-white mb-1">
Behavior
</h1>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<p className="text-sm text-neutral-400">
Frustration signals and user engagement patterns
</p>
</div>

13
app/sites/[id]/cdn/error.tsx Normal file
View File

@@ -0,0 +1,13 @@
'use client'
import ErrorDisplay from '@/components/ErrorDisplay'
export default function CDNError({ reset }: { error: Error; reset: () => void }) {
return (
<ErrorDisplay
title="CDN data failed to load"
message="We couldn't load the BunnyCDN data. This might be a temporary issue — try again."
onRetry={reset}
/>
)
}

36
app/sites/[id]/cdn/page.tsx
View File

@@ -177,10 +177,10 @@ export default function CDNPage() {
<div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-5 mb-6">
<CloudArrowUp size={40} className="text-neutral-400 dark:text-neutral-500" />
</div>
<h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-2">
<h2 className="text-xl font-semibold text-white mb-2">
Connect BunnyCDN
</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md mb-6">
<p className="text-sm text-neutral-400 max-w-md mb-6">
Monitor your CDN performance including bandwidth usage, cache hit rates, request volumes, and geographic distribution.
</p>
<Link
@@ -212,10 +212,10 @@ export default function CDNPage() {
{/* Header */}
<div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
<h1 className="text-2xl font-bold text-white mb-1">
CDN Analytics
</h1>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<p className="text-sm text-neutral-400">
BunnyCDN performance, bandwidth, and cache metrics
</p>
</div>
@@ -281,7 +281,7 @@ export default function CDNPage() {
{/* Bandwidth chart */}
<div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 mb-6">
<h2 className="text-sm font-semibold text-neutral-900 dark:text-white mb-4">Bandwidth</h2>
<h2 className="text-sm font-semibold text-white mb-4">Bandwidth</h2>
{daily.length > 0 ? (
<ResponsiveContainer width="100%" height={280}>
<AreaChart data={daily} margin={{ top: 4, right: 4, bottom: 0, left: 0 }}>
@@ -317,8 +317,8 @@ export default function CDNPage() {
if (!active || !payload?.length) return null
return (
<div className="rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 shadow-lg text-sm">
<p className="text-neutral-500 dark:text-neutral-400 mb-1">{formatDateShort(label)}</p>
<p className="text-neutral-900 dark:text-white font-medium">
<p className="text-neutral-400 mb-1">{formatDateShort(label)}</p>
<p className="text-white font-medium">
Total: {formatBytes(payload[0]?.value as number)}
</p>
{payload[1] && (
@@ -359,7 +359,7 @@ export default function CDNPage() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
{/* Requests chart */}
<div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6">
<h2 className="text-sm font-semibold text-neutral-900 dark:text-white mb-4">Requests</h2>
<h2 className="text-sm font-semibold text-white mb-4">Requests</h2>
{daily.length > 0 ? (
<ResponsiveContainer width="100%" height={220}>
<BarChart data={daily} margin={{ top: 4, right: 4, bottom: 0, left: 0 }}>
@@ -385,8 +385,8 @@ export default function CDNPage() {
if (!active || !payload?.length) return null
return (
<div className="rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 shadow-lg text-sm">
<p className="text-neutral-500 dark:text-neutral-400 mb-1">{formatDateShort(label)}</p>
<p className="text-neutral-900 dark:text-white font-medium">
<p className="text-neutral-400 mb-1">{formatDateShort(label)}</p>
<p className="text-white font-medium">
{formatNumber(payload[0]?.value as number)} requests
</p>
</div>
@@ -405,7 +405,7 @@ export default function CDNPage() {
{/* Errors chart */}
<div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6">
<h2 className="text-sm font-semibold text-neutral-900 dark:text-white mb-4">Errors</h2>
<h2 className="text-sm font-semibold text-white mb-4">Errors</h2>
{daily.length > 0 ? (
<ResponsiveContainer width="100%" height={220}>
<BarChart
@@ -439,7 +439,7 @@ export default function CDNPage() {
if (!active || !payload?.length) return null
return (
<div className="rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 shadow-lg text-sm">
<p className="text-neutral-500 dark:text-neutral-400 mb-1">{formatDateShort(label)}</p>
<p className="text-neutral-400 mb-1">{formatDateShort(label)}</p>
{payload.map((entry) => (
<p key={entry.name} style={{ color: entry.color }} className="font-medium">
{entry.name}: {formatNumber(entry.value as number)}
@@ -464,7 +464,7 @@ export default function CDNPage() {
{/* Traffic Distribution */}
<div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6">
<h2 className="text-sm font-semibold text-neutral-900 dark:text-white mb-4">Traffic Distribution</h2>
<h2 className="text-sm font-semibold text-white mb-4">Traffic Distribution</h2>
{countries.length > 0 ? (
<>
<div className="h-[360px] mb-8">
@@ -480,9 +480,9 @@ export default function CDNPage() {
<div className="flex items-center gap-2.5 mb-2">
{cc && getFlagIcon(cc)}
<div className="flex-1 min-w-0">
<span className="text-sm font-medium text-neutral-900 dark:text-white truncate block">{city}</span>
<span className="text-sm font-medium text-white truncate block">{city}</span>
</div>
<span className="text-sm tabular-nums text-neutral-500 dark:text-neutral-400 shrink-0">
<span className="text-sm tabular-nums text-neutral-400 shrink-0">
{formatBytes(row.bandwidth)}
</span>
</div>
@@ -530,13 +530,13 @@ function OverviewCard({
return (
<div className="p-4 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
<p className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1">{label}</p>
<p className="text-2xl font-bold text-neutral-900 dark:text-white">{value}</p>
<p className="text-xs font-medium text-neutral-400 mb-1">{label}</p>
<p className="text-2xl font-bold text-white">{value}</p>
{changeLabel && (
<p className={`text-xs mt-1 font-medium ${
isGood ? 'text-green-600 dark:text-green-400' :
isBad ? 'text-red-600 dark:text-red-400' :
'text-neutral-500 dark:text-neutral-400'
'text-neutral-400'
}`}>
{changeLabel} vs previous period
</p>

20
app/sites/[id]/funnels/[funnelId]/page.tsx
View File

@@ -25,7 +25,7 @@ export default function FunnelReportPage() {
const [funnel, setFunnel] = useState<Funnel | null>(null)
const [stats, setStats] = useState<FunnelStats | null>(null)
const [loading, setLoading] = useState(true)
const [dateRange, setDateRange] = useState(getDateRange(30))
const [dateRange, setDateRange] = useState(() => getDateRange(30))
const [datePreset, setDatePreset] = useState<'7' | '30' | 'custom'>('30')
const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
const [loadError, setLoadError] = useState<'not_found' | 'forbidden' | 'error' | null>(null)
@@ -154,7 +154,7 @@ export default function FunnelReportPage() {
<ChevronLeftIcon className="w-5 h-5" />
</Link>
<div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
<h1 className="text-2xl font-bold text-white">
{funnel.name}
</h1>
{funnel.description && (
@@ -236,7 +236,7 @@ export default function FunnelReportPage() {
{trends && trends.dates.length > 1 && (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden shadow-sm p-6 mb-8">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
<h3 className="text-lg font-semibold text-white">
Conversion Trends
</h3>
<div className="flex flex-wrap gap-2">
@@ -322,10 +322,10 @@ export default function FunnelReportPage() {
<table className="w-full text-left text-sm">
<thead className="bg-neutral-50 dark:bg-neutral-800/50 border-b border-neutral-200 dark:border-neutral-800">
<tr>
<th className="px-6 py-4 font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Step</th>
<th className="px-6 py-4 font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider text-right">Visitors</th>
<th className="px-6 py-4 font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider text-right">Drop-off</th>
<th className="px-6 py-4 font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider text-right">Conversion</th>
<th className="px-6 py-4 font-medium text-neutral-400 uppercase tracking-wider">Step</th>
<th className="px-6 py-4 font-medium text-neutral-400 uppercase tracking-wider text-right">Visitors</th>
<th className="px-6 py-4 font-medium text-neutral-400 uppercase tracking-wider text-right">Drop-off</th>
<th className="px-6 py-4 font-medium text-neutral-400 uppercase tracking-wider text-right">Conversion</th>
</tr>
</thead>
<tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
@@ -338,13 +338,13 @@ export default function FunnelReportPage() {
{i + 1}
</span>
<div>
<p className="font-medium text-neutral-900 dark:text-white">{step.step.name}</p>
<p className="text-neutral-500 dark:text-neutral-400 text-xs font-mono mt-0.5">{step.step.value}</p>
<p className="font-medium text-white">{step.step.name}</p>
<p className="text-neutral-400 text-xs font-mono mt-0.5">{step.step.value}</p>
</div>
</div>
</td>
<td className="px-6 py-4 text-right">
<span className="font-medium text-neutral-900 dark:text-white">
<span className="font-medium text-white">
{step.visitors.toLocaleString()}
</span>
</td>

6
app/sites/[id]/funnels/page.tsx
View File

@@ -40,7 +40,7 @@ export default function FunnelsPage() {
<div className="mb-8">
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
<h1 className="text-2xl font-bold text-white">
Funnels
</h1>
<p className="text-neutral-600 dark:text-neutral-400">
@@ -65,7 +65,7 @@ export default function FunnelsPage() {
className="mb-6"
unoptimized
/>
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-2">
<h3 className="text-lg font-semibold text-white mb-2">
No funnels yet
</h3>
<p className="text-neutral-600 dark:text-neutral-400 mb-6 max-w-md mx-auto">
@@ -89,7 +89,7 @@ export default function FunnelsPage() {
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 hover:border-brand-orange/50 transition-colors">
<div className="flex items-center justify-between">
<div>
<h3 className="text-xl font-bold text-neutral-900 dark:text-white group-hover:text-brand-orange transition-colors">
<h3 className="text-xl font-bold text-white group-hover:text-brand-orange transition-colors">
{funnel.name}
</h3>
{funnel.description && (

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

@@ -3,7 +3,7 @@
import { useEffect, useState } from 'react'
import { useParams } from 'next/navigation'
import { motion } from 'framer-motion'
import { getDateRange, formatDate } from '@ciphera-net/ui'
import { getDateRange, formatDate, getThisWeekRange, getThisMonthRange } from '@/lib/utils/dateRanges'
import { Select, DatePicker } from '@ciphera-net/ui'
import ColumnJourney from '@/components/journeys/ColumnJourney'
import SankeyJourney from '@/components/journeys/SankeyJourney'
@@ -18,20 +18,6 @@ import {
const DEFAULT_DEPTH = 4
function getThisWeekRange(): { start: string; end: string } {
const today = new Date()
const dayOfWeek = today.getDay()
const monday = new Date(today)
monday.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1))
return { start: formatDate(monday), end: formatDate(today) }
}
function getThisMonthRange(): { start: string; end: string } {
const today = new Date()
const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
return { start: formatDate(firstOfMonth), end: formatDate(today) }
}
export default function JourneysPage() {
const params = useParams()
const siteId = params.id as string
@@ -91,10 +77,10 @@ export default function JourneysPage() {
{/* Header */}
<div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
<h1 className="text-2xl font-bold text-white mb-1">
Journeys
</h1>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<p className="text-sm text-neutral-400">
How visitors navigate through your site
</p>
</div>
@@ -143,7 +129,7 @@ export default function JourneysPage() {
<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">
<div className="flex justify-between text-sm font-medium text-neutral-400 mb-3">
<span>2 steps</span>
<span className="text-brand-orange font-bold">
{depth} steps deep
@@ -196,7 +182,7 @@ export default function JourneysPage() {
aria-selected={viewMode === mode}
className={`relative px-3 py-1 text-xs font-medium transition-colors capitalize focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded cursor-pointer ${
viewMode === mode
? 'text-neutral-900 dark:text-white'
? 'text-white'
: 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
}`}
>
@@ -232,7 +218,7 @@ export default function JourneysPage() {
{/* Footer */}
{totalSessions > 0 && (
<div className="px-6 pb-5 text-sm text-neutral-500 dark:text-neutral-400">
<div className="px-6 pb-5 text-sm text-neutral-400">
{totalSessions.toLocaleString()} sessions tracked
</div>
)}

17
app/sites/[id]/page.tsx
View File

@@ -17,7 +17,7 @@ import {
type Stats,
type DailyStat,
} from '@/lib/api/stats'
import { getDateRange, formatDate } from '@ciphera-net/ui'
import { getDateRange, formatDate, getThisWeekRange, getThisMonthRange } from '@/lib/utils/dateRanges'
import { toast } from '@ciphera-net/ui'
import { Button } from '@ciphera-net/ui'
import { Select, DatePicker, DownloadIcon } from '@ciphera-net/ui'
@@ -63,19 +63,6 @@ function loadSavedSettings(): {
}
}
function getThisWeekRange(): { start: string; end: string } {
const today = new Date()
const dayOfWeek = today.getDay()
const monday = new Date(today)
monday.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1))
return { start: formatDate(monday), end: formatDate(today) }
}
function getThisMonthRange(): { start: string; end: string } {
const today = new Date()
const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
return { start: formatDate(firstOfMonth), end: formatDate(today) }
}
function getInitialDateRange(): { start: string; end: string } {
const settings = loadSavedSettings()
@@ -442,7 +429,7 @@ export default function SiteDashboardPage() {
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-4">
<div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
<h1 className="text-2xl font-bold text-white mb-1">
{site.name}
</h1>
<p className="text-neutral-600 dark:text-neutral-400">

13
app/sites/[id]/pagespeed/error.tsx Normal file
View File

@@ -0,0 +1,13 @@
'use client'
import ErrorDisplay from '@/components/ErrorDisplay'
export default function PageSpeedError({ reset }: { error: Error; reset: () => void }) {
return (
<ErrorDisplay
title="PageSpeed data failed to load"
message="We couldn't load the PageSpeed data. This might be a temporary issue — try again."
onRetry={reset}
/>
)
}

53
app/sites/[id]/pagespeed/page.tsx
View File

@@ -9,6 +9,7 @@ import { toast, Button } from '@ciphera-net/ui'
import { motion } from 'framer-motion'
import ScoreGauge from '@/components/pagespeed/ScoreGauge'
import { AreaChart as VisxAreaChart, Area as VisxArea, Grid as VisxGrid, XAxis as VisxXAxis, YAxis as VisxYAxis, ChartTooltip as VisxChartTooltip } from '@/components/ui/area-chart'
import { useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
// * Metric status thresholds (Google's Core Web Vitals thresholds)
function getMetricStatus(metric: string, value: number | null): { label: string; color: string } {
@@ -223,8 +224,10 @@ export default function PageSpeedPage() {
}
}
// * Loading state
if (isLoading && !latestChecks) return <PageSpeedSkeleton />
// * Loading state with minimum display time (consistent with other pages)
const showSkeleton = useMinimumLoading(isLoading && !latestChecks)
const fadeClass = useSkeletonFade(showSkeleton)
if (showSkeleton) return <PageSpeedSkeleton />
if (!site) return <div className="p-8 text-neutral-500">Site not found</div>
const enabled = config?.enabled ?? false
@@ -235,10 +238,10 @@ export default function PageSpeedPage() {
<div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
{/* Header */}
<div className="mb-8">
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
<h1 className="text-2xl font-bold text-white mb-1">
PageSpeed
</h1>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<p className="text-sm text-neutral-400">
Monitor your site&apos;s performance and Core Web Vitals
</p>
</div>
@@ -246,14 +249,14 @@ export default function PageSpeedPage() {
{/* Empty state */}
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-12 text-center">
<div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
<svg className="w-8 h-8 text-neutral-500 dark:text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<svg className="w-8 h-8 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 className="font-semibold text-neutral-900 dark:text-white mb-2">
<h3 className="font-semibold text-white mb-2">
PageSpeed monitoring is disabled
</h3>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6 max-w-md mx-auto">
<p className="text-sm text-neutral-400 mb-6 max-w-md mx-auto">
Enable PageSpeed monitoring to track your site&apos;s performance scores, Core Web Vitals, and get actionable improvement suggestions.
</p>
@@ -263,7 +266,7 @@ export default function PageSpeedPage() {
<select
value={frequency}
onChange={(e) => setFrequency(e.target.value)}
className="text-sm border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-100"
className="text-sm border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-white rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-100"
>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
@@ -358,10 +361,10 @@ export default function PageSpeedPage() {
{/* Header */}
<div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
<h1 className="text-2xl font-bold text-white mb-1">
PageSpeed
</h1>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<p className="text-sm text-neutral-400">
Performance scores and Core Web Vitals for {site.domain}
</p>
</div>
@@ -443,7 +446,7 @@ export default function PageSpeedPage() {
{/* Check navigator + frequency + legend */}
<div className="flex flex-wrap items-center gap-x-4 gap-y-2 mt-6 pt-4 border-t border-neutral-100 dark:border-neutral-800">
<div className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400">
<div className="flex items-center gap-2 text-sm text-neutral-400">
{/* Prev/Next arrows */}
{checkTimestamps.length > 1 && (
<button
@@ -497,7 +500,7 @@ export default function PageSpeedPage() {
{/* Filmstrip — page load progression */}
{currentCheck?.filmstrip && currentCheck.filmstrip.length > 0 && (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6 relative">
<h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-4">
<h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-4">
Page Load Timeline
</h3>
<div className="flex items-center overflow-x-auto gap-1 scrollbar-none">
@@ -521,7 +524,7 @@ export default function PageSpeedPage() {
{/* Section 2 — Metrics Card */}
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6">
<h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-5">
<h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-5">
Metrics
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
@@ -529,10 +532,10 @@ export default function PageSpeedPage() {
<div key={key} className="flex items-start gap-3">
<span className={`mt-1.5 inline-block w-2.5 h-2.5 rounded-full flex-shrink-0 ${getMetricDotColor(key, value)}`} />
<div>
<div className="text-sm text-neutral-500 dark:text-neutral-400">
<div className="text-sm text-neutral-400">
{label}
</div>
<div className="text-2xl font-semibold text-neutral-900 dark:text-white tabular-nums">
<div className="text-2xl font-semibold text-white tabular-nums">
{formatMetricValue(key, value)}
</div>
</div>
@@ -544,7 +547,7 @@ export default function PageSpeedPage() {
{/* Section 3 — Score Trend Chart (visx) */}
{chartData.length >= 2 && (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6 overflow-hidden">
<h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-4">
<h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-4">
Performance Score Trend
</h3>
<div>
@@ -597,10 +600,10 @@ export default function PageSpeedPage() {
<div className="flex items-center gap-5 mb-6">
<ScoreGauge score={scoreByGroup[group.key]} label="" size={56} />
<div>
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
<h3 className="text-lg font-semibold text-white">
{group.label}
</h3>
<p className="text-xs text-neutral-500 dark:text-neutral-400">
<p className="text-xs text-neutral-400">
{(() => {
const realIssues = groupAudits.filter(a => a.score !== null && a.score !== undefined).length
return realIssues === 0 ? 'No issues found' : `${realIssues} issue${realIssues !== 1 ? 's' : ''} found`
@@ -615,7 +618,7 @@ export default function PageSpeedPage() {
{groupManual.length > 0 && (
<details className="mt-4">
<summary className="cursor-pointer text-sm font-medium text-neutral-500 dark:text-neutral-400 select-none hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
<summary className="cursor-pointer text-sm font-medium text-neutral-400 select-none hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
<span className="ml-1">Additional items to manually check ({groupManual.length})</span>
</summary>
<div className="mt-2 divide-y divide-neutral-100 dark:divide-neutral-800">
@@ -626,7 +629,7 @@ export default function PageSpeedPage() {
{groupPassed.length > 0 && (
<details className="mt-4">
<summary className="cursor-pointer text-sm font-medium text-neutral-500 dark:text-neutral-400 select-none hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
<summary className="cursor-pointer text-sm font-medium text-neutral-400 select-none hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
<span className="ml-1">{groupPassed.length} passed audit{groupPassed.length !== 1 ? 's' : ''}</span>
</summary>
<div className="mt-2 divide-y divide-neutral-100 dark:divide-neutral-800">
@@ -738,7 +741,7 @@ function AuditRow({ audit }: { audit: AuditSummary }) {
<details className="group">
<summary className="flex items-center gap-3 py-3 px-2 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800/50 cursor-pointer list-none">
<AuditSeverityIcon score={audit.score} />
<span className="font-medium text-sm text-neutral-900 dark:text-white flex-1 min-w-0 truncate">{audit.title}</span>
<span className="font-medium text-sm text-white flex-1 min-w-0 truncate">{audit.title}</span>
{audit.display_value && (
<span className="text-xs text-neutral-500 dark:text-neutral-500 flex-shrink-0 tabular-nums">{audit.display_value}</span>
)}
@@ -754,7 +757,7 @@ function AuditRow({ audit }: { audit: AuditSummary }) {
<div className="pl-8 pr-2 pb-3 pt-1">
{/* Description with parsed markdown links */}
{audit.description && (
<p className="text-xs text-neutral-500 dark:text-neutral-400 mb-3 leading-relaxed">
<p className="text-xs text-neutral-400 mb-3 leading-relaxed">
<AuditDescription text={audit.description} />
</p>
)}
@@ -822,15 +825,15 @@ function AuditItem({ item }: { item: Record<string, any> }) {
{/* Content */}
<div className="flex-1 min-w-0">
{label && (
<div className="font-medium text-neutral-900 dark:text-white text-xs mb-0.5">
<div className="font-medium text-white text-xs mb-0.5">
{label}
</div>
)}
{url && (
<div className="font-mono text-xs text-neutral-500 dark:text-neutral-400 break-all">{url}</div>
<div className="font-mono text-xs text-neutral-400 break-all">{url}</div>
)}
{text && (
<div className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">{text}</div>
<div className="text-xs text-neutral-400 mt-0.5">{text}</div>
)}
{item.node?.snippet && (
<code className="text-xs bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded break-all mt-1 inline-block">{item.node.snippet}</code>

13
app/sites/[id]/search/error.tsx Normal file
View File

@@ -0,0 +1,13 @@
'use client'
import ErrorDisplay from '@/components/ErrorDisplay'
export default function SearchError({ reset }: { error: Error; reset: () => void }) {
return (
<ErrorDisplay
title="Search Console data failed to load"
message="We couldn't load the Google Search Console data. This might be a temporary issue — try again."
onRetry={reset}
/>
)
}

83
app/sites/[id]/search/page.tsx
View File

@@ -3,7 +3,8 @@
import { useEffect, useState } from 'react'
import { useParams } from 'next/navigation'
import Link from 'next/link'
import { getDateRange, formatDate, Select, DatePicker } from '@ciphera-net/ui'
import { Select, DatePicker } from '@ciphera-net/ui'
import { getDateRange, formatDate, getThisWeekRange, getThisMonthRange } from '@/lib/utils/dateRanges'
import { CaretDown, CaretUp, MagnifyingGlass, ArrowSquareOut } from '@phosphor-icons/react'
import { useDashboard, useGSCStatus, useGSCOverview, useGSCTopQueries, useGSCTopPages, useGSCNewQueries } from '@/lib/swr/dashboard'
import { getGSCQueryPages, getGSCPageQueries } from '@/lib/api/gsc'
@@ -13,20 +14,6 @@ import ClicksImpressionsChart from '@/components/search/ClicksImpressionsChart'
// ─── Helpers ────────────────────────────────────────────────────
function getThisWeekRange(): { start: string; end: string } {
const today = new Date()
const dayOfWeek = today.getDay()
const monday = new Date(today)
monday.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1))
return { start: formatDate(monday), end: formatDate(today) }
}
function getThisMonthRange(): { start: string; end: string } {
const today = new Date()
const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
return { start: formatDate(firstOfMonth), end: formatDate(today) }
}
const formatPosition = (pos: number) => pos.toFixed(1)
const formatCTR = (ctr: number) => (ctr * 100).toFixed(1) + '%'
@@ -179,10 +166,10 @@ export default function SearchConsolePage() {
<div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-5 mb-6">
<MagnifyingGlass size={40} className="text-neutral-400 dark:text-neutral-500" />
</div>
<h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-2">
<h2 className="text-xl font-semibold text-white mb-2">
Connect Google Search Console
</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md mb-6">
<p className="text-sm text-neutral-400 max-w-md mb-6">
See how your site performs in Google Search. View top queries, pages, click-through rates, and average position data.
</p>
<Link
@@ -215,10 +202,10 @@ export default function SearchConsolePage() {
{/* Header */}
<div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
<h1 className="text-2xl font-bold text-white mb-1">
Search Console
</h1>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<p className="text-sm text-neutral-400">
Google Search performance, queries, and page rankings
</p>
</div>
@@ -296,9 +283,9 @@ export default function SearchConsolePage() {
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3 mb-6">
{topQueries.queries.slice(0, 5).map((q) => (
<div key={q.query} className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3">
<p className="text-xs text-neutral-500 dark:text-neutral-400 truncate mb-1">{q.query}</p>
<p className="text-xs text-neutral-400 truncate mb-1">{q.query}</p>
<div className="flex items-baseline gap-1.5">
<p className="text-lg font-semibold text-neutral-900 dark:text-white">{q.position.toFixed(1)}</p>
<p className="text-lg font-semibold text-white">{q.position.toFixed(1)}</p>
<p className="text-xs text-neutral-400">pos</p>
</div>
<p className="text-xs text-neutral-500 mt-0.5">{q.clicks} {q.clicks === 1 ? 'click' : 'clicks'}</p>
@@ -322,8 +309,8 @@ export default function SearchConsolePage() {
onClick={() => { setActiveView('queries'); setExpandedQuery(null); setExpandedData([]) }}
className={`px-4 py-1.5 text-sm font-medium rounded-md transition-all cursor-pointer ${
activeView === 'queries'
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
: 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
? 'bg-white dark:bg-neutral-700 text-white shadow-sm'
: 'text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
}`}
>
Top Queries
@@ -332,8 +319,8 @@ export default function SearchConsolePage() {
onClick={() => { setActiveView('pages'); setExpandedPage(null); setExpandedData([]) }}
className={`px-4 py-1.5 text-sm font-medium rounded-md transition-all cursor-pointer ${
activeView === 'pages'
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
: 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
? 'bg-white dark:bg-neutral-700 text-white shadow-sm'
: 'text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
}`}
>
Top Pages
@@ -347,12 +334,12 @@ export default function SearchConsolePage() {
<table className="w-full text-sm">
<thead>
<tr className="border-b border-neutral-200 dark:border-neutral-800">
<th className="text-left px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400 w-8" />
<th className="text-left px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Query</th>
<th className="text-right px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Clicks</th>
<th className="text-right px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Impressions</th>
<th className="text-right px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">CTR</th>
<th className="text-right px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Position</th>
<th className="text-left px-4 py-3 font-medium text-neutral-400 w-8" />
<th className="text-left px-4 py-3 font-medium text-neutral-400">Query</th>
<th className="text-right px-4 py-3 font-medium text-neutral-400">Clicks</th>
<th className="text-right px-4 py-3 font-medium text-neutral-400">Impressions</th>
<th className="text-right px-4 py-3 font-medium text-neutral-400">CTR</th>
<th className="text-right px-4 py-3 font-medium text-neutral-400">Position</th>
</tr>
</thead>
<tbody>
@@ -369,7 +356,7 @@ export default function SearchConsolePage() {
))
) : queries.length === 0 ? (
<tr>
<td colSpan={6} className="px-4 py-12 text-center text-neutral-500 dark:text-neutral-400">
<td colSpan={6} className="px-4 py-12 text-center text-neutral-400">
No query data available for this period.
</td>
</tr>
@@ -391,7 +378,7 @@ export default function SearchConsolePage() {
{/* Pagination */}
{queriesTotal > PAGE_SIZE && (
<div className="flex items-center justify-between px-4 py-3 border-t border-neutral-200 dark:border-neutral-800">
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<p className="text-sm text-neutral-400">
Showing {queryPage * PAGE_SIZE + 1}-{Math.min((queryPage + 1) * PAGE_SIZE, queriesTotal)} of {queriesTotal.toLocaleString()}
</p>
<div className="flex gap-2">
@@ -421,12 +408,12 @@ export default function SearchConsolePage() {
<table className="w-full text-sm">
<thead>
<tr className="border-b border-neutral-200 dark:border-neutral-800">
<th className="text-left px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400 w-8" />
<th className="text-left px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Page</th>
<th className="text-right px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Clicks</th>
<th className="text-right px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Impressions</th>
<th className="text-right px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">CTR</th>
<th className="text-right px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Position</th>
<th className="text-left px-4 py-3 font-medium text-neutral-400 w-8" />
<th className="text-left px-4 py-3 font-medium text-neutral-400">Page</th>
<th className="text-right px-4 py-3 font-medium text-neutral-400">Clicks</th>
<th className="text-right px-4 py-3 font-medium text-neutral-400">Impressions</th>
<th className="text-right px-4 py-3 font-medium text-neutral-400">CTR</th>
<th className="text-right px-4 py-3 font-medium text-neutral-400">Position</th>
</tr>
</thead>
<tbody>
@@ -443,7 +430,7 @@ export default function SearchConsolePage() {
))
) : pages.length === 0 ? (
<tr>
<td colSpan={6} className="px-4 py-12 text-center text-neutral-500 dark:text-neutral-400">
<td colSpan={6} className="px-4 py-12 text-center text-neutral-400">
No page data available for this period.
</td>
</tr>
@@ -465,7 +452,7 @@ export default function SearchConsolePage() {
{/* Pagination */}
{pagesTotal > PAGE_SIZE && (
<div className="flex items-center justify-between px-4 py-3 border-t border-neutral-200 dark:border-neutral-800">
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<p className="text-sm text-neutral-400">
Showing {pagePage * PAGE_SIZE + 1}-{Math.min((pagePage + 1) * PAGE_SIZE, pagesTotal)} of {pagesTotal.toLocaleString()}
</p>
<div className="flex gap-2">
@@ -522,13 +509,13 @@ function OverviewCard({
return (
<div className="p-4 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
<p className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1">{label}</p>
<p className="text-2xl font-bold text-neutral-900 dark:text-white">{value}</p>
<p className="text-xs font-medium text-neutral-400 mb-1">{label}</p>
<p className="text-2xl font-bold text-white">{value}</p>
{change && (
<p className={`text-xs mt-1 font-medium ${
isPositive ? 'text-green-600 dark:text-green-400' :
isNegative ? 'text-red-600 dark:text-red-400' :
'text-neutral-500 dark:text-neutral-400'
'text-neutral-400'
}`}>
{change.label} vs previous period
</p>
@@ -560,7 +547,7 @@ function QueryRow({
<td className="px-4 py-3 text-neutral-400 dark:text-neutral-500">
<Caret size={14} />
</td>
<td className="px-4 py-3 text-neutral-900 dark:text-white font-medium">{row.query}</td>
<td className="px-4 py-3 text-white font-medium">{row.query}</td>
<td className="px-4 py-3 text-right text-neutral-700 dark:text-neutral-300 tabular-nums">{row.clicks.toLocaleString()}</td>
<td className="px-4 py-3 text-right text-neutral-700 dark:text-neutral-300 tabular-nums">{row.impressions.toLocaleString()}</td>
<td className="px-4 py-3 text-right text-neutral-700 dark:text-neutral-300 tabular-nums">{formatCTR(row.ctr)}</td>
@@ -576,7 +563,7 @@ function QueryRow({
))}
</div>
) : expandedData.length === 0 ? (
<p className="text-sm text-neutral-500 dark:text-neutral-400 py-1">No pages found for this query.</p>
<p className="text-sm text-neutral-400 py-1">No pages found for this query.</p>
) : (
<table className="w-full text-sm">
<thead>
@@ -631,7 +618,7 @@ function PageRow({
<td className="px-4 py-3 text-neutral-400 dark:text-neutral-500">
<Caret size={14} />
</td>
<td className="px-4 py-3 text-neutral-900 dark:text-white font-medium max-w-md truncate" title={row.page}>{row.page}</td>
<td className="px-4 py-3 text-white font-medium max-w-md truncate" title={row.page}>{row.page}</td>
<td className="px-4 py-3 text-right text-neutral-700 dark:text-neutral-300 tabular-nums">{row.clicks.toLocaleString()}</td>
<td className="px-4 py-3 text-right text-neutral-700 dark:text-neutral-300 tabular-nums">{row.impressions.toLocaleString()}</td>
<td className="px-4 py-3 text-right text-neutral-700 dark:text-neutral-300 tabular-nums">{formatCTR(row.ctr)}</td>
@@ -647,7 +634,7 @@ function PageRow({
))}
</div>
) : expandedData.length === 0 ? (
<p className="text-sm text-neutral-500 dark:text-neutral-400 py-1">No queries found for this page.</p>
<p className="text-sm text-neutral-400 py-1">No queries found for this page.</p>
) : (
<table className="w-full text-sm">
<thead>

180
app/sites/[id]/settings/page.tsx
View File

@@ -738,9 +738,9 @@ export default function SiteSettingsPage() {
<div className="space-y-8">
<div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Site Settings</h1>
<h1 className="text-2xl font-bold text-white">Site Settings</h1>
<p className="mt-2 text-neutral-600 dark:text-neutral-400">
Manage settings for <span className="font-medium text-neutral-900 dark:text-white">{site.domain}</span>
Manage settings for <span className="font-medium text-white">{site.domain}</span>
</p>
</div>
@@ -860,8 +860,8 @@ export default function SiteSettingsPage() {
<div className="space-y-12">
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">General Configuration</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400">Update your site details and tracking script.</p>
<h2 className="text-2xl font-bold text-white mb-1">General Configuration</h2>
<p className="text-sm text-neutral-400">Update your site details and tracking script.</p>
</div>
<div className="space-y-4">
@@ -907,17 +907,17 @@ export default function SiteSettingsPage() {
type="text"
value={site.domain}
disabled
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-neutral-100 dark:bg-neutral-800/50 text-neutral-500 dark:text-neutral-400 cursor-not-allowed"
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-neutral-100 dark:bg-neutral-800/50 text-neutral-400 cursor-not-allowed"
/>
<p className="text-xs text-neutral-500 dark:text-neutral-400">
<p className="text-xs text-neutral-400">
Domain cannot be changed after creation
</p>
</div>
</div>
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-2">Tracking Script</h3>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
<h3 className="text-lg font-semibold text-white mb-2">Tracking Script</h3>
<p className="text-sm text-neutral-400 mb-4">
Add this script to your website to start tracking visitors. Choose your framework for setup instructions.
</p>
<ScriptSetupBlock
@@ -945,7 +945,7 @@ export default function SiteSettingsPage() {
{site.is_verified ? <CheckIcon className="w-4 h-4" /> : <ZapIcon className="w-4 h-4" />}
{site.is_verified ? 'Verified' : 'Verify Installation'}
</button>
<p className="text-xs text-neutral-500 dark:text-neutral-400">
<p className="text-xs text-neutral-400">
{site.is_verified ? 'Your site is sending data correctly.' : 'Check if your site is sending data correctly.'}
</p>
</div>
@@ -964,7 +964,7 @@ export default function SiteSettingsPage() {
<div className="space-y-6">
<div>
<h2 className="text-2xl font-bold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400">Irreversible actions for your site.</p>
<p className="text-sm text-neutral-400">Irreversible actions for your site.</p>
</div>
<div className="space-y-4">
@@ -1003,8 +1003,8 @@ export default function SiteSettingsPage() {
<div className="space-y-12">
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Visibility Settings</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400">Manage who can view your dashboard.</p>
<h2 className="text-2xl font-bold text-white mb-1">Visibility Settings</h2>
<p className="text-sm text-neutral-400">Manage who can view your dashboard.</p>
</div>
<div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
@@ -1014,8 +1014,8 @@ export default function SiteSettingsPage() {
<GlobeIcon className="w-6 h-6" />
</div>
<div>
<h3 className="font-medium text-neutral-900 dark:text-white">Public Dashboard</h3>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<h3 className="font-medium text-white">Public Dashboard</h3>
<p className="text-sm text-neutral-400">
Allow anyone with the link to view this dashboard
</p>
</div>
@@ -1041,7 +1041,7 @@ export default function SiteSettingsPage() {
className="mt-6 pt-6 border-t border-neutral-200 dark:border-neutral-800 overflow-hidden space-y-6"
>
<div>
<label className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
<label className="block text-sm font-medium mb-2 text-white">
Public Link
</label>
<div className="flex gap-2">
@@ -1054,12 +1054,12 @@ export default function SiteSettingsPage() {
<button
type="button"
onClick={copyLink}
className="px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-900 dark:text-white rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
className="px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-white rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
>
{linkCopied ? 'Copied!' : 'Copy Link'}
</button>
</div>
<p className="mt-2 text-xs text-neutral-500 dark:text-neutral-400">
<p className="mt-2 text-xs text-neutral-400">
Share this link with others to view the dashboard.
</p>
</div>
@@ -1154,8 +1154,8 @@ export default function SiteSettingsPage() {
<div className="space-y-12">
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Data & Privacy</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400">Control what visitor data is collected. Less data = more privacy.</p>
<h2 className="text-2xl font-bold text-white mb-1">Data & Privacy</h2>
<p className="text-sm text-neutral-400">Control what visitor data is collected. Less data = more privacy.</p>
</div>
{/* Data Collection Controls */}
@@ -1166,8 +1166,8 @@ export default function SiteSettingsPage() {
<div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
<div className="flex items-center justify-between">
<div>
<h4 className="font-medium text-neutral-900 dark:text-white">Page Paths</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
<h4 className="font-medium text-white">Page Paths</h4>
<p className="text-sm text-neutral-400 mt-0.5">
Track which pages visitors view
</p>
</div>
@@ -1187,8 +1187,8 @@ export default function SiteSettingsPage() {
<div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
<div className="flex items-center justify-between">
<div>
<h4 className="font-medium text-neutral-900 dark:text-white">Referrers</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
<h4 className="font-medium text-white">Referrers</h4>
<p className="text-sm text-neutral-400 mt-0.5">
Track where visitors come from
</p>
</div>
@@ -1208,8 +1208,8 @@ export default function SiteSettingsPage() {
<div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
<div className="flex items-center justify-between">
<div>
<h4 className="font-medium text-neutral-900 dark:text-white">Device Info</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
<h4 className="font-medium text-white">Device Info</h4>
<p className="text-sm text-neutral-400 mt-0.5">
Track browser, OS, and device type
</p>
</div>
@@ -1229,8 +1229,8 @@ export default function SiteSettingsPage() {
<div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
<div className="flex items-center justify-between">
<div>
<h4 className="font-medium text-neutral-900 dark:text-white">Geographic Data</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
<h4 className="font-medium text-white">Geographic Data</h4>
<p className="text-sm text-neutral-400 mt-0.5">
Control location tracking granularity
</p>
</div>
@@ -1253,8 +1253,8 @@ export default function SiteSettingsPage() {
<div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
<div className="flex items-center justify-between">
<div>
<h4 className="font-medium text-neutral-900 dark:text-white">Screen Resolution</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
<h4 className="font-medium text-white">Screen Resolution</h4>
<p className="text-sm text-neutral-400 mt-0.5">
Track visitor screen sizes
</p>
</div>
@@ -1277,8 +1277,8 @@ export default function SiteSettingsPage() {
<div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
<div className="flex items-center justify-between">
<div>
<h4 className="font-medium text-neutral-900 dark:text-white">Hide unknown locations</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
<h4 className="font-medium text-white">Hide unknown locations</h4>
<p className="text-sm text-neutral-400 mt-0.5">
Exclude entries where geographic data could not be resolved from location stats
</p>
</div>
@@ -1315,8 +1315,8 @@ export default function SiteSettingsPage() {
<div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
<div className="flex items-center justify-between">
<div>
<h4 className="font-medium text-neutral-900 dark:text-white">Keep raw event data for</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
<h4 className="font-medium text-white">Keep raw event data for</h4>
<p className="text-sm text-neutral-400 mt-0.5">
Events older than this are automatically deleted. Aggregated daily stats are kept permanently.
</p>
</div>
@@ -1353,8 +1353,8 @@ export default function SiteSettingsPage() {
<div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
<div className="flex items-center justify-between">
<div>
<h4 className="font-medium text-neutral-900 dark:text-white">Check frequency</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
<h4 className="font-medium text-white">Check frequency</h4>
<p className="text-sm text-neutral-400 mt-0.5">
How often PageSpeed Insights runs automated checks on your site.
</p>
</div>
@@ -1406,7 +1406,7 @@ export default function SiteSettingsPage() {
focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 outline-none transition-all duration-200 dark:text-white font-mono text-sm"
/>
</div>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-2">
<p className="text-sm text-neutral-400 mt-2">
Enter paths to exclude from tracking (one per line). Supports wildcards (e.g., /admin/*).
</p>
</div>
@@ -1417,7 +1417,7 @@ export default function SiteSettingsPage() {
<h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
For your privacy policy
</h3>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<p className="text-sm text-neutral-400">
Copy the text below into your site&apos;s Privacy Policy to describe your use of Pulse.
It updates automatically based on your saved settings above.
</p>
@@ -1445,7 +1445,7 @@ export default function SiteSettingsPage() {
{snippetCopied ? (
<CheckIcon className="w-4 h-4 text-green-600" />
) : (
<svg className="w-4 h-4 text-neutral-500 dark:text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg className="w-4 h-4 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
@@ -1468,7 +1468,7 @@ export default function SiteSettingsPage() {
{activeTab === 'bot' && (
<div className="flex-1 space-y-6">
<div>
<h2 className="text-xl font-bold text-white mb-1">Bot & Spam</h2>
<h2 className="text-2xl font-bold text-white mb-1">Bot & Spam</h2>
<p className="text-neutral-400 text-sm">Manage automated and manual bot filtering.</p>
</div>
@@ -1627,8 +1627,8 @@ export default function SiteSettingsPage() {
{activeTab === 'goals' && (
<div className="space-y-6">
<div>
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Goals & Events</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<h2 className="text-2xl font-bold text-white mb-1">Goals & Events</h2>
<p className="text-sm text-neutral-400">
Define goals to label custom events (e.g. signup, purchase). Track with <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-xs">pulse.track(&apos;event_name&apos;)</code> in your snippet.
</p>
</div>
@@ -1643,7 +1643,7 @@ export default function SiteSettingsPage() {
)}
<div className="space-y-2">
{goals.length === 0 ? (
<div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-500 dark:text-neutral-400 text-sm">
<div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-400 text-sm">
No goals yet. Add a goal to give custom events a display name in the dashboard.
</div>
) : (
@@ -1653,8 +1653,8 @@ export default function SiteSettingsPage() {
className="flex items-center justify-between py-3 px-4 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50"
>
<div>
<span className="font-medium text-neutral-900 dark:text-white">{goal.name}</span>
<span className="text-neutral-500 dark:text-neutral-400 text-sm ml-2">({goal.event_name})</span>
<span className="font-medium text-white">{goal.name}</span>
<span className="text-neutral-400 text-sm ml-2">({goal.event_name})</span>
</div>
{canEdit && (
<div className="flex items-center gap-2">
@@ -1686,16 +1686,16 @@ export default function SiteSettingsPage() {
{activeTab === 'notifications' && (
<div className="space-y-8">
<div>
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Notifications</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400">Configure how you receive reports and alerts.</p>
<h2 className="text-2xl font-bold text-white mb-1">Notifications</h2>
<p className="text-sm text-neutral-400">Configure how you receive reports and alerts.</p>
</div>
{/* Reports subsection */}
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h3 className="text-base font-medium text-neutral-900 dark:text-white">Reports</h3>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">Automatically deliver analytics reports via email or webhooks.</p>
<h3 className="text-base font-medium text-white">Reports</h3>
<p className="text-sm text-neutral-400 mt-0.5">Automatically deliver analytics reports via email or webhooks.</p>
</div>
{canEdit && (
<Button onClick={() => { setEditingSchedule(null); resetReportForm(); setReportModalOpen(true) }}>
@@ -1711,7 +1711,7 @@ export default function SiteSettingsPage() {
))}
</div>
) : reportSchedules.length === 0 ? (
<div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-500 dark:text-neutral-400 text-sm">
<div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-400 text-sm">
No scheduled reports yet. Add a report to automatically receive analytics summaries.
</div>
) : (
@@ -1732,7 +1732,7 @@ export default function SiteSettingsPage() {
</div>
<div className="min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<span className="font-medium text-neutral-900 dark:text-white">
<span className="font-medium text-white">
{getChannelLabel(schedule.channel)}
</span>
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-brand-orange/10 text-brand-orange">
@@ -1742,7 +1742,7 @@ export default function SiteSettingsPage() {
{getReportTypeLabel(schedule.report_type)}
</span>
</div>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 truncate">
<p className="text-sm text-neutral-400 mt-1 truncate">
{schedule.channel === 'email'
? (schedule.channel_config as EmailConfig).recipients.join(', ')
: (schedule.channel_config as WebhookConfig).url}
@@ -1821,8 +1821,8 @@ export default function SiteSettingsPage() {
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h3 className="text-base font-medium text-neutral-900 dark:text-white">Alerts</h3>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">Get notified when your site goes down or recovers.</p>
<h3 className="text-base font-medium text-white">Alerts</h3>
<p className="text-sm text-neutral-400 mt-0.5">Get notified when your site goes down or recovers.</p>
</div>
{canEdit && (
<Button onClick={() => { setEditingAlert(null); resetAlertForm(); setAlertModalOpen(true) }}>
@@ -1838,7 +1838,7 @@ export default function SiteSettingsPage() {
))}
</div>
) : alertSchedules.length === 0 ? (
<div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-500 dark:text-neutral-400 text-sm">
<div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-400 text-sm">
No alert channels configured. Add a channel to receive uptime alerts when your site goes down or recovers.
</div>
) : (
@@ -1859,14 +1859,14 @@ export default function SiteSettingsPage() {
</div>
<div className="min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<span className="font-medium text-neutral-900 dark:text-white">
<span className="font-medium text-white">
{getChannelLabel(schedule.channel)}
</span>
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-500">
Uptime Alert
</span>
</div>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 truncate">
<p className="text-sm text-neutral-400 mt-1 truncate">
{schedule.channel === 'email'
? (schedule.channel_config as EmailConfig).recipients.join(', ')
: (schedule.channel_config as WebhookConfig).url}
@@ -1940,8 +1940,8 @@ export default function SiteSettingsPage() {
{activeTab === 'integrations' && (
<div className="space-y-6">
<div>
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Integrations</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400">Connect external services to enrich your analytics data.</p>
<h2 className="text-2xl font-bold text-white mb-1">Integrations</h2>
<p className="text-sm text-neutral-400">Connect external services to enrich your analytics data.</p>
</div>
{/* Google Search Console */}
@@ -1958,7 +1958,7 @@ export default function SiteSettingsPage() {
</svg>
</div>
<div>
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Google Search Console</h3>
<h3 className="text-lg font-semibold text-white">Google Search Console</h3>
<p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">
See which search queries bring visitors to your site, with impressions, clicks, CTR, and ranking position.
</p>
@@ -1968,7 +1968,7 @@ export default function SiteSettingsPage() {
<svg className="w-4 h-4 text-neutral-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
</svg>
<p className="text-xs text-neutral-500 dark:text-neutral-400">
<p className="text-xs text-neutral-400">
Pulse only requests read-only access. Your tokens are encrypted at rest and all data can be fully removed at any time.
</p>
</div>
@@ -2005,7 +2005,7 @@ export default function SiteSettingsPage() {
</svg>
</div>
<div>
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Google Search Console</h3>
<h3 className="text-lg font-semibold text-white">Google Search Console</h3>
<div className="flex items-center gap-2 mt-1.5">
<span className={`inline-flex items-center gap-1.5 text-xs font-medium ${
gscStatus.status === 'active'
@@ -2031,28 +2031,28 @@ export default function SiteSettingsPage() {
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{gscStatus.google_email && (
<div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
<p className="text-xs text-neutral-500 dark:text-neutral-400">Google Account</p>
<p className="text-sm font-medium text-neutral-900 dark:text-white mt-0.5 truncate">{gscStatus.google_email}</p>
<p className="text-xs text-neutral-400">Google Account</p>
<p className="text-sm font-medium text-white mt-0.5 truncate">{gscStatus.google_email}</p>
</div>
)}
{gscStatus.gsc_property && (
<div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
<p className="text-xs text-neutral-500 dark:text-neutral-400">Property</p>
<p className="text-sm font-medium text-neutral-900 dark:text-white mt-0.5 truncate">{gscStatus.gsc_property}</p>
<p className="text-xs text-neutral-400">Property</p>
<p className="text-sm font-medium text-white mt-0.5 truncate">{gscStatus.gsc_property}</p>
</div>
)}
{gscStatus.last_synced_at && (
<div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
<p className="text-xs text-neutral-500 dark:text-neutral-400">Last Synced</p>
<p className="text-sm font-medium text-neutral-900 dark:text-white mt-0.5">
<p className="text-xs text-neutral-400">Last Synced</p>
<p className="text-sm font-medium text-white mt-0.5">
{new Date(gscStatus.last_synced_at).toLocaleString('en-GB')}
</p>
</div>
)}
{gscStatus.created_at && (
<div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
<p className="text-xs text-neutral-500 dark:text-neutral-400">Connected Since</p>
<p className="text-sm font-medium text-neutral-900 dark:text-white mt-0.5">
<p className="text-xs text-neutral-400">Connected Since</p>
<p className="text-sm font-medium text-white mt-0.5">
{new Date(gscStatus.created_at).toLocaleString('en-GB')}
</p>
</div>
@@ -2121,7 +2121,7 @@ export default function SiteSettingsPage() {
</svg>
</div>
<div>
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">BunnyCDN</h3>
<h3 className="text-lg font-semibold text-white">BunnyCDN</h3>
<p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">
Monitor CDN performance with bandwidth usage, cache hit rates, response times, and geographic distribution.
</p>
@@ -2131,7 +2131,7 @@ export default function SiteSettingsPage() {
<svg className="w-4 h-4 text-neutral-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
</svg>
<p className="text-xs text-neutral-500 dark:text-neutral-400">
<p className="text-xs text-neutral-400">
Your API key is encrypted at rest and only used to fetch read-only statistics. You can disconnect at any time.
</p>
</div>
@@ -2147,7 +2147,7 @@ export default function SiteSettingsPage() {
setBunnySelectedZone(null)
}}
placeholder="BunnyCDN API key"
className="flex-1 px-4 py-2.5 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white text-sm placeholder:text-neutral-400"
className="flex-1 px-4 py-2.5 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-white dark:bg-neutral-900 text-white text-sm placeholder:text-neutral-400"
/>
<button
onClick={async () => {
@@ -2190,7 +2190,7 @@ export default function SiteSettingsPage() {
const zone = bunnyPullZones.find(z => z.id === Number(e.target.value))
setBunnySelectedZone(zone || null)
}}
className="w-full px-4 py-2.5 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white text-sm"
className="w-full px-4 py-2.5 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-white dark:bg-neutral-900 text-white text-sm"
>
{bunnyPullZones.map((zone) => (
<option key={zone.id} value={zone.id}>{zone.name}</option>
@@ -2252,7 +2252,7 @@ export default function SiteSettingsPage() {
</svg>
</div>
<div>
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">BunnyCDN</h3>
<h3 className="text-lg font-semibold text-white">BunnyCDN</h3>
<div className="flex items-center gap-2 mt-1.5">
<span className={`inline-flex items-center gap-1.5 text-xs font-medium ${
bunnyStatus.status === 'active'
@@ -2278,22 +2278,22 @@ export default function SiteSettingsPage() {
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{bunnyStatus.pull_zone_name && (
<div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
<p className="text-xs text-neutral-500 dark:text-neutral-400">Pull Zone</p>
<p className="text-sm font-medium text-neutral-900 dark:text-white mt-0.5 truncate">{bunnyStatus.pull_zone_name}</p>
<p className="text-xs text-neutral-400">Pull Zone</p>
<p className="text-sm font-medium text-white mt-0.5 truncate">{bunnyStatus.pull_zone_name}</p>
</div>
)}
{bunnyStatus.last_synced_at && (
<div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
<p className="text-xs text-neutral-500 dark:text-neutral-400">Last Synced</p>
<p className="text-sm font-medium text-neutral-900 dark:text-white mt-0.5">
<p className="text-xs text-neutral-400">Last Synced</p>
<p className="text-sm font-medium text-white mt-0.5">
{new Date(bunnyStatus.last_synced_at).toLocaleString('en-GB')}
</p>
</div>
)}
{bunnyStatus.created_at && (
<div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
<p className="text-xs text-neutral-500 dark:text-neutral-400">Connected Since</p>
<p className="text-sm font-medium text-neutral-900 dark:text-white mt-0.5">
<p className="text-xs text-neutral-400">Connected Since</p>
<p className="text-sm font-medium text-white mt-0.5">
{new Date(bunnyStatus.created_at).toLocaleString('en-GB')}
</p>
</div>
@@ -2354,7 +2354,7 @@ export default function SiteSettingsPage() {
onChange={(e) => setGoalForm({ ...goalForm, name: e.target.value })}
placeholder="e.g. Signups"
autoFocus
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
required
/>
</div>
@@ -2366,11 +2366,11 @@ export default function SiteSettingsPage() {
onChange={(e) => setGoalForm({ ...goalForm, event_name: e.target.value })}
placeholder="e.g. signup_click (letters, numbers, underscores only)"
maxLength={64}
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
required
/>
<div className="flex justify-between mt-1">
<p className="text-xs text-neutral-500 dark:text-neutral-400">Letters, numbers, and underscores only. Spaces become underscores.</p>
<p className="text-xs text-neutral-400">Letters, numbers, and underscores only. Spaces become underscores.</p>
<span className={`text-xs tabular-nums ${goalForm.event_name.length > 56 ? 'text-amber-500' : 'text-neutral-400'}`}>{goalForm.event_name.length}/64</span>
</div>
{editingGoal && goalForm.event_name.trim().toLowerCase().replace(/\s+/g, '_') !== editingGoal.event_name && (
@@ -2423,10 +2423,10 @@ export default function SiteSettingsPage() {
value={reportForm.recipients}
onChange={(e) => setReportForm({ ...reportForm, recipients: e.target.value })}
placeholder="email1@example.com, email2@example.com"
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
required
/>
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">Comma-separated email addresses.</p>
<p className="text-xs text-neutral-400 mt-1">Comma-separated email addresses.</p>
</div>
) : (
<div>
@@ -2438,7 +2438,7 @@ export default function SiteSettingsPage() {
value={reportForm.webhookUrl}
onChange={(e) => setReportForm({ ...reportForm, webhookUrl: e.target.value })}
placeholder="https://hooks.example.com/..."
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
required
/>
</div>
@@ -2582,10 +2582,10 @@ export default function SiteSettingsPage() {
value={alertForm.recipients}
onChange={(e) => setAlertForm({ ...alertForm, recipients: e.target.value })}
placeholder="email1@example.com, email2@example.com"
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
required
/>
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">Comma-separated email addresses.</p>
<p className="text-xs text-neutral-400 mt-1">Comma-separated email addresses.</p>
</div>
) : (
<div>
@@ -2597,14 +2597,14 @@ export default function SiteSettingsPage() {
value={alertForm.webhookUrl}
onChange={(e) => setAlertForm({ ...alertForm, webhookUrl: e.target.value })}
placeholder="https://hooks.example.com/..."
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
required
/>
</div>
)}
<div className="p-3 rounded-lg bg-neutral-50 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700">
<p className="text-xs text-neutral-500 dark:text-neutral-400">
<p className="text-xs text-neutral-400">
Alerts are sent automatically when your site goes down or recovers. No schedule configuration needed.
</p>
</div>

60
app/sites/[id]/uptime/page.tsx
View File

@@ -100,7 +100,7 @@ function getOverallStatusTextColor(status: string): string {
case 'down':
return 'text-red-600 dark:text-red-400'
default:
return 'text-neutral-500 dark:text-neutral-400'
return 'text-neutral-400'
}
}
@@ -168,22 +168,22 @@ function StatusBarTooltip({
style={{ left: position.x, top: position.y - 10, transform: 'translate(-50%, -100%)' }}
>
<div className="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-lg transition-shadow duration-300 px-3 py-2.5 text-xs min-w-40">
<div className="font-semibold text-neutral-900 dark:text-white mb-1.5">{formattedDate}</div>
<div className="font-semibold text-white mb-1.5">{formattedDate}</div>
{stat && stat.total_checks > 0 ? (
<div className="space-y-1">
<div className="flex justify-between gap-4">
<span className="text-neutral-500 dark:text-neutral-400">Uptime</span>
<span className="font-medium text-neutral-900 dark:text-white">
<span className="text-neutral-400">Uptime</span>
<span className="font-medium text-white">
{formatUptime(stat.uptime_percentage)}
</span>
</div>
<div className="flex justify-between gap-4">
<span className="text-neutral-500 dark:text-neutral-400">Checks</span>
<span className="font-medium text-neutral-900 dark:text-white">{stat.total_checks}</span>
<span className="text-neutral-400">Checks</span>
<span className="font-medium text-white">{stat.total_checks}</span>
</div>
<div className="flex justify-between gap-4">
<span className="text-neutral-500 dark:text-neutral-400">Avg Response</span>
<span className="font-medium text-neutral-900 dark:text-white">
<span className="text-neutral-400">Avg Response</span>
<span className="font-medium text-white">
{formatMs(Math.round(stat.avg_response_time_ms))}
</span>
</div>
@@ -275,7 +275,7 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
return (
<div className="mt-4">
<h4 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
<h4 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-3">
Response Time
</h4>
<ChartContainer config={responseTimeChartConfig} className="h-40">
@@ -406,10 +406,10 @@ export default function UptimePage() {
<div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
{/* Header */}
<div className="mb-8">
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
<h1 className="text-2xl font-bold text-white mb-1">
Uptime
</h1>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<p className="text-sm text-neutral-400">
Monitor your site&apos;s availability and response time
</p>
</div>
@@ -417,14 +417,14 @@ export default function UptimePage() {
{/* Empty state */}
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-12 text-center">
<div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
<svg className="w-8 h-8 text-neutral-500 dark:text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<svg className="w-8 h-8 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 className="font-semibold text-neutral-900 dark:text-white mb-2">
<h3 className="font-semibold text-white mb-2">
Uptime monitoring is disabled
</h3>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6 max-w-md mx-auto">
<p className="text-sm text-neutral-400 mb-6 max-w-md mx-auto">
Enable uptime monitoring to track your site&apos;s availability and response time around the clock.
</p>
{canEdit && (
@@ -446,10 +446,10 @@ export default function UptimePage() {
{/* Header */}
<div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
<h1 className="text-2xl font-bold text-white mb-1">
Uptime
</h1>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<p className="text-sm text-neutral-400">
Monitor your site&apos;s availability and response time
</p>
</div>
@@ -471,7 +471,7 @@ export default function UptimePage() {
<div className="flex items-center gap-3">
<div className={`w-3.5 h-3.5 rounded-full ${getStatusDotColor(overallStatus)}`} />
<div>
<span className="font-semibold text-neutral-900 dark:text-white text-lg">
<span className="font-semibold text-white text-lg">
{site.name}
</span>
<span className={`text-sm font-medium ml-3 ${getOverallStatusTextColor(overallStatus)}`}>
@@ -480,11 +480,11 @@ export default function UptimePage() {
</div>
</div>
<div className="text-right">
<span className="text-sm font-semibold text-neutral-900 dark:text-white">
<span className="text-sm font-semibold text-white">
{formatUptime(overallUptime)} uptime
</span>
{monitor && (
<div className="text-xs text-neutral-500 dark:text-neutral-400">
<div className="text-xs text-neutral-400">
Last checked {formatTimeAgo(monitor.monitor.last_checked_at)}
</div>
)}
@@ -495,7 +495,7 @@ export default function UptimePage() {
{/* 90-day uptime bar */}
{monitor && (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 mb-6">
<h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
<h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-3">
90-Day Availability
</h3>
<UptimeStatusBar dailyStats={monitor.daily_stats} />
@@ -512,39 +512,39 @@ export default function UptimePage() {
{/* Monitor details grid */}
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-5">
<div>
<div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
<div className="text-xs font-medium text-neutral-400 uppercase tracking-wider mb-1">
Status
</div>
<div className="flex items-center gap-2">
<div className={`w-2 h-2 rounded-full ${getStatusDotColor(monitor.monitor.last_status)}`} />
<span className="text-sm font-medium text-neutral-900 dark:text-white">
<span className="text-sm font-medium text-white">
{getStatusLabel(monitor.monitor.last_status)}
</span>
</div>
</div>
<div>
<div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
<div className="text-xs font-medium text-neutral-400 uppercase tracking-wider mb-1">
Response Time
</div>
<span className="text-sm font-medium text-neutral-900 dark:text-white">
<span className="text-sm font-medium text-white">
{formatMs(monitor.monitor.last_response_time_ms)}
</span>
</div>
<div>
<div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
<div className="text-xs font-medium text-neutral-400 uppercase tracking-wider mb-1">
Check Interval
</div>
<span className="text-sm font-medium text-neutral-900 dark:text-white">
<span className="text-sm font-medium text-white">
{monitor.monitor.check_interval_seconds >= 60
? `${Math.floor(monitor.monitor.check_interval_seconds / 60)}m`
: `${monitor.monitor.check_interval_seconds}s`}
</span>
</div>
<div>
<div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
<div className="text-xs font-medium text-neutral-400 uppercase tracking-wider mb-1">
Overall Uptime
</div>
<span className="text-sm font-medium text-neutral-900 dark:text-white">
<span className="text-sm font-medium text-white">
{formatUptime(monitor.overall_uptime)}
</span>
</div>
@@ -559,7 +559,7 @@ export default function UptimePage() {
{/* Recent checks */}
<div className="mt-5">
<h4 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
<h4 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-3">
Recent Checks
</h4>
<div className="space-y-1.5 max-h-48 overflow-y-auto">
@@ -576,7 +576,7 @@ export default function UptimePage() {
</div>
<div className="flex items-center gap-3">
{check.status_code && (
<span className="text-xs text-neutral-500 dark:text-neutral-400">
<span className="text-xs text-neutral-400">
{check.status_code}
</span>
)}

12
app/sites/new/page.tsx
View File

@@ -113,7 +113,7 @@ export default function NewSitePage() {
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10 text-green-600 dark:text-green-400 mb-6">
<CheckCircleIcon className="h-7 w-7" />
</div>
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white">
<h2 className="text-2xl font-bold text-white">
Site created
</h2>
<p className="mt-2 text-neutral-600 dark:text-neutral-400">
@@ -137,7 +137,7 @@ export default function NewSitePage() {
>
<span className="text-brand-orange">Verify installation</span>
</button>
<p className="text-xs text-neutral-500 dark:text-neutral-400">
<p className="text-xs text-neutral-400">
Check if your site is sending data correctly.
</p>
</div>
@@ -146,7 +146,7 @@ export default function NewSitePage() {
<button
type="button"
onClick={handleBackToForm}
className="text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 underline"
className="text-sm text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 underline"
>
Edit site details
</button>
@@ -174,7 +174,7 @@ export default function NewSitePage() {
// * Step 1: Name & domain form
return (
<div className="w-full max-w-2xl mx-auto px-4 sm:px-6 py-8">
<h1 className="text-2xl font-bold mb-8 text-neutral-900 dark:text-white">
<h1 className="text-2xl font-bold mb-8 text-white">
Create New Site
</h1>
@@ -186,7 +186,7 @@ export default function NewSitePage() {
<form onSubmit={handleSubmit} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
<div className="mb-4">
<label htmlFor="name" className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
<label htmlFor="name" className="block text-sm font-medium mb-2 text-white">
Site Name
</label>
<Input
@@ -201,7 +201,7 @@ export default function NewSitePage() {
</div>
<div className="mb-6">
<label htmlFor="domain" className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
<label htmlFor="domain" className="block text-sm font-medium mb-2 text-white">
Domain
</label>
<Input

26
app/welcome/page.tsx
View File

@@ -378,10 +378,10 @@ function WelcomeContent() {
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-orange/20 to-brand-orange/5 text-brand-orange mb-5 shadow-sm">
<BarChartIcon className="h-8 w-8" />
</div>
<h2 className="text-2xl font-bold tracking-tight text-neutral-900 dark:text-white">
<h2 className="text-2xl font-bold tracking-tight text-white">
Choose your organization
</h2>
<p className="mt-2 text-sm text-neutral-500 dark:text-neutral-400 max-w-sm mx-auto">
<p className="mt-2 text-sm text-neutral-400 max-w-sm mx-auto">
Continue with an existing one or create a new organization.
</p>
</div>
@@ -413,7 +413,7 @@ function WelcomeContent() {
>
{initial}
</div>
<span className="flex-1 font-medium text-neutral-900 dark:text-white truncate">
<span className="flex-1 font-medium text-white truncate">
{org.organization_name || 'Organization'}
</span>
{isCurrent && (
@@ -443,7 +443,7 @@ function WelcomeContent() {
alt="Welcome to Pulse"
className="w-48 h-auto mx-auto mb-6"
/>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
<h1 className="text-2xl font-bold text-white">
Welcome to Pulse
</h1>
<p className="mt-2 text-neutral-600 dark:text-neutral-400">
@@ -475,7 +475,7 @@ function WelcomeContent() {
<button
type="button"
onClick={() => setStep(1)}
className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded"
className="flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded"
aria-label="Back to welcome"
>
<ArrowLeftIcon className="h-4 w-4" />
@@ -485,7 +485,7 @@ function WelcomeContent() {
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange/10 text-brand-orange mb-4">
<BarChartIcon className="h-7 w-7" />
</div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
<h1 className="text-2xl font-bold text-white">
Name your organization
</h1>
<p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
@@ -520,7 +520,7 @@ function WelcomeContent() {
onChange={(e) => setOrgSlug(e.target.value)}
className="w-full"
/>
<p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
<p className="mt-1 text-xs text-neutral-400">
Used in your organization URL.
</p>
</div>
@@ -546,7 +546,7 @@ function WelcomeContent() {
<button
type="button"
onClick={() => setStep(2)}
className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded"
className="flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded"
aria-label="Back to organization"
>
<ArrowLeftIcon className="h-4 w-4" />
@@ -556,7 +556,7 @@ function WelcomeContent() {
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10 text-green-600 dark:text-green-400 mb-4">
<CheckCircleIcon className="h-7 w-7" />
</div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
<h1 className="text-2xl font-bold text-white">
{showPendingCheckoutInStep3 ? 'Complete your plan' : "You're on the free plan"}
</h1>
<p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
@@ -631,7 +631,7 @@ function WelcomeContent() {
<button
type="button"
onClick={() => setStep(3)}
className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded"
className="flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded"
aria-label="Back to plan"
>
<ArrowLeftIcon className="h-4 w-4" />
@@ -643,7 +643,7 @@ function WelcomeContent() {
alt="Add your first site"
className="w-44 h-auto mx-auto mb-4"
/>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
<h1 className="text-2xl font-bold text-white">
Add your first site
</h1>
<p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
@@ -730,7 +730,7 @@ function WelcomeContent() {
alt="All set"
className="w-44 h-auto mx-auto mb-6"
/>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
<h1 className="text-2xl font-bold text-white">
You're all set
</h1>
<p className="mt-2 text-neutral-600 dark:text-neutral-400">
@@ -758,7 +758,7 @@ function WelcomeContent() {
>
<span className="text-brand-orange">Verify installation</span>
</button>
<p className="text-xs text-neutral-500 dark:text-neutral-400">
<p className="text-xs text-neutral-400">
Check if your site is sending data correctly.
</p>
</div>

2
components/ErrorDisplay.tsx
View File

@@ -36,7 +36,7 @@ export default function ErrorDisplay({
className="w-56 h-auto mx-auto mb-8"
/>
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
<h2 className="text-2xl font-bold text-white mb-4">
{title}
</h2>
<p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-md mx-auto mb-10 leading-relaxed">

16
components/Footer.tsx
View File

@@ -48,7 +48,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
<footer className="w-full py-8 mt-auto border-t border-neutral-100 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
<div className="text-sm text-neutral-500 dark:text-neutral-400">
<div className="text-sm text-neutral-400">
© 2024-{year} Ciphera. All rights reserved.
</div>
<div className="flex gap-6 text-sm font-medium text-neutral-600 dark:text-neutral-300">
@@ -88,7 +88,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
loading="lazy"
className="w-9 h-9 object-contain group-hover:scale-105 transition-transform duration-300"
/>
<span className="text-xl font-bold text-neutral-900 dark:text-white group-hover:text-brand-orange transition-colors duration-300">
<span className="text-xl font-bold text-white group-hover:text-brand-orange transition-colors duration-300">
Pulse
</span>
</Link>
@@ -125,7 +125,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
{/* * Products */}
<div>
<h4 className="font-semibold text-neutral-900 dark:text-white mb-4">Products</h4>
<h4 className="font-semibold text-white mb-4">Products</h4>
<ul className="space-y-3">
{footerLinks.products.map((link) => (
<li key={link.name}>
@@ -153,7 +153,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
{/* * Company */}
<div>
<h4 className="font-semibold text-neutral-900 dark:text-white mb-4">Company</h4>
<h4 className="font-semibold text-white mb-4">Company</h4>
<ul className="space-y-3">
{footerLinks.company.map((link) => (
<li key={link.name}>
@@ -181,7 +181,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
{/* * Resources */}
<div>
<h4 className="font-semibold text-neutral-900 dark:text-white mb-4">Resources</h4>
<h4 className="font-semibold text-white mb-4">Resources</h4>
<ul className="space-y-3">
{footerLinks.resources.map((link) => (
<li key={link.name}>
@@ -209,7 +209,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
{/* * Legal */}
<div>
<h4 className="font-semibold text-neutral-900 dark:text-white mb-4">Legal</h4>
<h4 className="font-semibold text-white mb-4">Legal</h4>
<ul className="space-y-3">
{footerLinks.legal.map((link) => (
<li key={link.name}>
@@ -232,10 +232,10 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
{/* * Bottom bar */}
<div className="flex flex-col sm:flex-row items-center justify-between gap-4">
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<p className="text-sm text-neutral-400">
© 2024-{year} Ciphera. All rights reserved.
</p>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<p className="text-sm text-neutral-400">
Where Privacy Still Exists
</p>
</div>

17
components/behavior/FrustrationByPageTable.tsx
View File

@@ -34,11 +34,11 @@ export default function FrustrationByPageTable({ pages, loading }: FrustrationBy
return (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 mb-8">
<div className="flex items-center justify-between mb-1">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
<h3 className="text-lg font-semibold text-white">
Frustration by Page
</h3>
</div>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
<p className="text-sm text-neutral-400 mb-4">
Pages with the most frustration signals
</p>
@@ -72,7 +72,7 @@ export default function FrustrationByPageTable({ pages, loading }: FrustrationBy
style={{ width: `${barWidth}%` }}
/>
<span
className="relative text-sm text-neutral-900 dark:text-white truncate max-w-[200px] sm:max-w-[300px]"
className="relative text-sm text-white truncate max-w-[200px] sm:max-w-[300px]"
title={page.page_path}
>
{page.page_path}
@@ -84,7 +84,7 @@ export default function FrustrationByPageTable({ pages, loading }: FrustrationBy
<span className="w-12 text-right text-sm tabular-nums text-neutral-600 dark:text-neutral-400">
{formatNumber(page.dead_clicks)}
</span>
<span className="w-12 text-right text-sm font-semibold tabular-nums text-neutral-900 dark:text-white">
<span className="w-12 text-right text-sm font-semibold tabular-nums text-white">
{formatNumber(page.total)}
</span>
<span className="w-16 text-right text-sm tabular-nums text-neutral-600 dark:text-neutral-400">
@@ -99,14 +99,17 @@ export default function FrustrationByPageTable({ pages, loading }: FrustrationBy
) : (
<div className="flex flex-col items-center justify-center text-center px-6 py-8 gap-4 min-h-[200px]">
<div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
<Files className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
<Files className="w-8 h-8 text-neutral-400" />
</div>
<h4 className="font-semibold text-neutral-900 dark:text-white">
<h4 className="font-semibold text-white">
No frustration signals detected
</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
<p className="text-sm text-neutral-400 max-w-md">
Page-level frustration data will appear here once rage clicks or dead clicks are detected on your site.
</p>
<a href="/installation" target="_blank" rel="noopener noreferrer" className="mt-1 text-sm font-medium text-brand-orange hover:underline">
View setup guide
</a>
</div>
)}
</div>

14
components/behavior/FrustrationSummaryCards.tsx
View File

@@ -31,7 +31,7 @@ function ChangeIndicator({ change }: { change: ReturnType<typeof pctChange> }) {
? 'text-red-600 dark:text-red-400'
: isDown
? 'text-green-600 dark:text-green-400'
: 'text-neutral-500 dark:text-neutral-400'
: 'text-neutral-400'
}`}
>
{isUp ? '+' : ''}{change.value}%
@@ -71,11 +71,11 @@ export default function FrustrationSummaryCards({ data, loading }: FrustrationSu
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
{/* Rage Clicks */}
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-1">
<p className="text-sm font-medium text-neutral-400 mb-1">
Rage Clicks
</p>
<div className="flex items-baseline gap-2">
<span className="text-2xl font-bold text-neutral-900 dark:text-white tabular-nums">
<span className="text-2xl font-bold text-white tabular-nums">
{data.rage_clicks.toLocaleString()}
</span>
<ChangeIndicator change={rageChange} />
@@ -87,11 +87,11 @@ export default function FrustrationSummaryCards({ data, loading }: FrustrationSu
{/* Dead Clicks */}
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-1">
<p className="text-sm font-medium text-neutral-400 mb-1">
Dead Clicks
</p>
<div className="flex items-baseline gap-2">
<span className="text-2xl font-bold text-neutral-900 dark:text-white tabular-nums">
<span className="text-2xl font-bold text-white tabular-nums">
{data.dead_clicks.toLocaleString()}
</span>
<ChangeIndicator change={deadChange} />
@@ -103,10 +103,10 @@ export default function FrustrationSummaryCards({ data, loading }: FrustrationSu
{/* Total Frustration Signals */}
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-1">
<p className="text-sm font-medium text-neutral-400 mb-1">
Total Signals
</p>
<span className="text-2xl font-bold text-neutral-900 dark:text-white tabular-nums">
<span className="text-2xl font-bold text-white tabular-nums">
{totalSignals.toLocaleString()}
</span>
{topPage ? (

15
components/behavior/FrustrationTable.tsx
View File

@@ -53,7 +53,7 @@ function SelectorCell({ selector }: { selector: string }) {
className="flex items-center gap-1 min-w-0 group/copy cursor-pointer"
title={selector}
>
<span className="text-sm font-mono text-neutral-900 dark:text-white truncate">
<span className="text-sm font-mono text-white truncate">
{selector}
</span>
<span className="opacity-0 group-hover/copy:opacity-100 transition-opacity shrink-0">
@@ -145,7 +145,7 @@ export default function FrustrationTable({
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
<div className="flex items-center justify-between mb-1">
<div className="flex items-center gap-2">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
<h3 className="text-lg font-semibold text-white">
{title}
</h3>
{showViewAll && (
@@ -159,7 +159,7 @@ export default function FrustrationTable({
)}
</div>
</div>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
<p className="text-sm text-neutral-400 mb-4">
{description}
</p>
@@ -182,15 +182,18 @@ export default function FrustrationTable({
alt="No frustration signals"
className="w-44 h-auto mb-1"
/>
<h4 className="font-semibold text-neutral-900 dark:text-white">
<h4 className="font-semibold text-white">
No {title.toLowerCase()} detected
</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
<p className="text-sm text-neutral-400 max-w-md">
Frustration tracking requires the add-on script. Add it after your core Pulse script:
</p>
<code className="text-xs bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 px-3 py-2 rounded-lg font-mono break-all">
{'<script defer src="https://pulse.ciphera.net/script.frustration.js"></script>'}
</code>
<a href="/installation" target="_blank" rel="noopener noreferrer" className="mt-1 text-sm font-medium text-brand-orange hover:underline">
View setup guide
</a>
</div>
)}
</div>
@@ -214,7 +217,7 @@ export default function FrustrationTable({
))}
</div>
) : (
<p className="text-sm text-neutral-500 dark:text-neutral-400 py-8 text-center">
<p className="text-sm text-neutral-400 py-8 text-center">
No data available
</p>
)}

16
components/behavior/FrustrationTrend.tsx
View File

@@ -59,7 +59,7 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
className="h-2.5 w-2.5 shrink-0 rounded-full"
style={{ backgroundColor: item.fill }}
/>
<span className="text-neutral-500 dark:text-neutral-400">
<span className="text-neutral-400">
{LABELS[item.type] ?? item.type}
</span>
<span className="font-mono font-medium tabular-nums text-neutral-900 dark:text-neutral-50">
@@ -93,21 +93,21 @@ export default function FrustrationTrend({ summary, loading }: FrustrationTrendP
return (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
<div className="flex items-center justify-between mb-1">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
<h3 className="text-lg font-semibold text-white">
Frustration Trend
</h3>
</div>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
<p className="text-sm text-neutral-400 mb-4">
Rage vs. dead click breakdown
</p>
<div className="flex-1 min-h-[270px] flex flex-col items-center justify-center text-center px-6 py-8 gap-4">
<div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
<TrendUp className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
<TrendUp className="w-8 h-8 text-neutral-400" />
</div>
<h4 className="font-semibold text-neutral-900 dark:text-white">
<h4 className="font-semibold text-white">
No trend data yet
</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
<p className="text-sm text-neutral-400 max-w-md">
Frustration trend data will appear here once rage clicks or dead clicks are detected on your site.
</p>
</div>
@@ -118,11 +118,11 @@ export default function FrustrationTrend({ summary, loading }: FrustrationTrendP
return (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
<div className="flex items-center justify-between mb-1">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
<h3 className="text-lg font-semibold text-white">
Frustration Trend
</h3>
</div>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
<p className="text-sm text-neutral-400 mb-4">
{hasPrevious
? 'Rage and dead clicks split across current and previous period'
: 'Rage vs. dead click breakdown'}

24
components/dashboard/Chart.tsx
View File

@@ -322,7 +322,7 @@ export default function Chart({
>
<div className={cn('text-[10px] font-semibold uppercase tracking-widest mb-2', metric === m.key ? 'text-brand-orange' : 'text-neutral-400 dark:text-neutral-500')}>{m.label}</div>
<div className="flex items-baseline gap-2">
<AnimatedNumber value={m.value} format={m.format} className="text-2xl font-bold text-neutral-900 dark:text-white" />
<AnimatedNumber value={m.value} format={m.format} className="text-2xl font-bold text-white" />
{m.change !== null && (
<span className={cn('flex items-center gap-0.5 text-sm font-semibold', m.isPositive ? 'text-[#10B981]' : 'text-[#EF4444]')}>
{m.isPositive ? <ArrowUpRight weight="bold" className="size-3.5" /> : <ArrowDownRight weight="bold" className="size-3.5" />}
@@ -357,7 +357,7 @@ export default function Chart({
{/* Toolbar */}
<div className="flex items-center justify-between gap-3 mb-4 px-2">
<div className="flex items-center gap-3">
<span className="text-xs font-medium text-neutral-500 dark:text-neutral-400">
<span className="text-xs font-medium text-neutral-400">
{METRIC_CONFIGS.find((m) => m.key === metric)?.label}
</span>
</div>
@@ -526,7 +526,7 @@ export default function Chart({
<span className="font-medium text-neutral-400 dark:text-neutral-500">
{ANNOTATION_LABELS[a.category] || 'Note'} &middot; {formatEU(a.date)}{a.time ? ` at ${a.time}` : ''}
</span>
<p className="text-neutral-900 dark:text-white">{a.text}</p>
<p className="text-white">{a.text}</p>
</div>
</div>
))}
@@ -593,16 +593,16 @@ export default function Chart({
{annotationForm.visible && (
<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/20 dark:bg-black/40 rounded-2xl">
<div className="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl p-5 w-[340px] max-w-[90%]">
<h3 className="text-sm font-semibold text-neutral-900 dark:text-white mb-3">
<h3 className="text-sm font-semibold text-white mb-3">
{annotationForm.editingId ? 'Edit annotation' : 'Add annotation'}
</h3>
<div className="space-y-3">
<div>
<label className="block text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1">Date</label>
<label className="block text-xs font-medium text-neutral-400 mb-1">Date</label>
<button
type="button"
onClick={() => setCalendarOpen(true)}
className="w-full px-3 py-1.5 text-sm rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-orange/30 text-left flex items-center justify-between"
className="w-full px-3 py-1.5 text-sm rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-white focus:outline-none focus:ring-2 focus:ring-brand-orange/30 text-left flex items-center justify-between"
>
<span>{annotationForm.date ? formatEU(annotationForm.date) : 'Select date'}</span>
<svg className="w-4 h-4 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -611,7 +611,7 @@ export default function Chart({
</button>
</div>
<div>
<label className="block text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1">
<label className="block text-xs font-medium text-neutral-400 mb-1">
Time <span className="text-neutral-400 dark:text-neutral-500">(optional)</span>
</label>
<div className="flex items-center gap-2">
@@ -619,7 +619,7 @@ export default function Chart({
type="time"
value={annotationForm.time}
onChange={(e) => setAnnotationForm((f) => ({ ...f, time: e.target.value }))}
className="flex-1 px-3 py-1.5 text-sm rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-orange/30"
className="flex-1 px-3 py-1.5 text-sm rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-white focus:outline-none focus:ring-2 focus:ring-brand-orange/30"
/>
{annotationForm.time && (
<button
@@ -634,20 +634,20 @@ export default function Chart({
</div>
</div>
<div>
<label className="block text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1">Note</label>
<label className="block text-xs font-medium text-neutral-400 mb-1">Note</label>
<input
type="text"
value={annotationForm.text}
onChange={(e) => setAnnotationForm((f) => ({ ...f, text: e.target.value.slice(0, 200) }))}
placeholder="e.g. Launched new homepage"
maxLength={200}
className="w-full px-3 py-1.5 text-sm rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-orange/30"
className="w-full px-3 py-1.5 text-sm rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-white focus:outline-none focus:ring-2 focus:ring-brand-orange/30"
autoFocus
/>
<span className="text-[10px] text-neutral-400 mt-0.5 block text-right">{annotationForm.text.length}/200</span>
</div>
<div>
<label className="block text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1">Category</label>
<label className="block text-xs font-medium text-neutral-400 mb-1">Category</label>
<Select
value={annotationForm.category}
onChange={(v) => setAnnotationForm((f) => ({ ...f, category: v }))}
@@ -675,7 +675,7 @@ export default function Chart({
<button
type="button"
onClick={() => setAnnotationForm({ visible: false, date: '', time: '', text: '', category: 'other' })}
className="px-3 py-1.5 text-xs font-medium text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 cursor-pointer"
className="px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 cursor-pointer"
>
Cancel
</button>

2
components/dashboard/ExportModal.tsx
View File

@@ -480,7 +480,7 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
{/* Progress Bar */}
{(isExporting || exportDone) && (
<div className="space-y-2 pt-2">
<div className="flex items-center justify-between text-xs text-neutral-500 dark:text-neutral-400">
<div className="flex items-center justify-between text-xs text-neutral-400">
<span>{exportDone ? 'Export complete' : exportProgress.label}</span>
<span>{exportDone ? '100%' : `${Math.round((exportProgress.step / exportProgress.total) * 100)}%`}</span>
</div>

2
components/dashboard/FilterBar.tsx
View File

@@ -29,7 +29,7 @@ export default function FilterBar({ filters, onRemove, onClear }: FilterBarProps
{filters.length > 1 && (
<button
onClick={onClear}
className="px-2 py-1.5 text-xs font-medium text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors cursor-pointer"
className="px-2 py-1.5 text-xs font-medium text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors cursor-pointer"
>
Clear all
</button>

2
components/dashboard/SiteNav.tsx
View File

@@ -46,7 +46,7 @@ export default function SiteNav({ siteId }: SiteNavProps) {
tabIndex={isActive(tab.href) ? 0 : -1}
className={`relative shrink-0 whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded-t cursor-pointer -mb-px ${
isActive(tab.href)
? 'text-neutral-900 dark:text-white'
? 'text-white'
: 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
}`}
>

16
components/dashboard/TopReferrers.tsx
View File

@@ -97,7 +97,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<ArrowSquareOut className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
<h3 className="text-lg font-semibold text-white">
Referrers
</h3>
{showViewAll && (
@@ -115,7 +115,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
<div className="space-y-2 flex-1 min-h-[270px]">
{!collectReferrers ? (
<div className="h-full flex flex-col items-center justify-center text-center px-4">
<p className="text-neutral-500 dark:text-neutral-400 text-sm">Referrer tracking is disabled in site settings</p>
<p className="text-neutral-400 text-sm">Referrer tracking is disabled in site settings</p>
</div>
) : hasData ? (
<>
@@ -132,7 +132,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
style={{ width: `${barWidth}%` }}
/>
<div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
<div className="relative flex-1 truncate text-white flex items-center gap-3">
{renderReferrerIcon(ref.referrer)}
<span className="truncate" title={ref.referrer}>{getReferrerDisplayName(ref.referrer)}</span>
</div>
@@ -154,12 +154,12 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
) : (
<div className="h-full 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">
<GlobeIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
<GlobeIcon className="w-8 h-8 text-neutral-400" />
</div>
<h4 className="font-semibold text-neutral-900 dark:text-white">
<h4 className="font-semibold text-white">
No referrers yet
</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
<p className="text-sm text-neutral-400 max-w-xs">
Traffic sources will appear here when visitors come from external sites.
</p>
<Link
@@ -186,7 +186,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
value={modalSearch}
onChange={(e) => setModalSearch(e.target.value)}
placeholder="Search referrers..."
className="w-full px-3 py-2 mb-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
className="w-full px-3 py-2 mb-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
/>
</div>
<div className="max-h-[80vh]">
@@ -208,7 +208,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
onClick={() => { if (onFilter) { onFilter({ dimension: 'referrer', operator: 'is', values: [ref.referrer] }); setIsModalOpen(false) } }}
className={`flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
>
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
<div className="flex-1 truncate text-white flex items-center gap-3">
{renderReferrerIcon(ref.referrer)}
<span className="truncate" title={ref.referrer}>{getReferrerDisplayName(ref.referrer)}</span>
</div>

4
components/funnels/BreakdownDrawer.tsx
View File

@@ -50,7 +50,7 @@ export default function BreakdownDrawer({ siteId, funnelId, stepIndex, stepName,
{/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-neutral-200 dark:border-neutral-800">
<div>
<h3 className="font-semibold text-neutral-900 dark:text-white">Step Breakdown</h3>
<h3 className="font-semibold text-white">Step Breakdown</h3>
<p className="text-sm text-neutral-500">{stepName}</p>
</div>
<button onClick={onClose} className="p-2 text-neutral-400 hover:text-neutral-600 rounded-lg">
@@ -91,7 +91,7 @@ export default function BreakdownDrawer({ siteId, funnelId, stepIndex, stepName,
<div className="space-y-2">
{breakdown.entries.map(entry => (
<div key={entry.value} className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800/50">
<span className="text-sm text-neutral-900 dark:text-white truncate mr-4">
<span className="text-sm text-white truncate mr-4">
{entry.value || '(unknown)'}
</span>
<div className="flex items-center gap-4 text-sm shrink-0">

4
components/funnels/FunnelForm.tsx
View File

@@ -206,7 +206,7 @@ export default function FunnelForm({ siteId, initialData, onSubmit, submitLabel,
Back to Funnels
</Link>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
<h1 className="text-2xl font-bold text-white mb-2">
{initialData ? 'Edit Funnel' : 'Create New Funnel'}
</h1>
<p className="text-neutral-600 dark:text-neutral-400">
@@ -252,7 +252,7 @@ export default function FunnelForm({ siteId, initialData, onSubmit, submitLabel,
{/* Steps */}
<div className="space-y-4 mb-6">
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
<h3 className="text-lg font-semibold text-white">
Funnel Steps
</h3>
</div>

13
components/journeys/ColumnJourney.tsx
View File

@@ -166,7 +166,7 @@ function ColumnHeader({
{column.index === 0 ? 'Entry' : `Step ${column.index}`}
</span>
<div className="flex items-baseline gap-1.5">
<span className="text-sm font-semibold text-neutral-900 dark:text-white tabular-nums">
<span className="text-sm font-semibold text-white tabular-nums">
{column.totalSessions.toLocaleString()} visitors
</span>
{column.dropOffPercent !== 0 && (
@@ -235,10 +235,10 @@ function PageRow({
<span
className={`relative flex-1 truncate text-sm ${
isSelected
? 'text-neutral-900 dark:text-white font-medium'
? 'text-white font-medium'
: isOther
? 'italic text-neutral-400 dark:text-neutral-500'
: 'text-neutral-900 dark:text-white'
: 'text-white'
}`}
>
{isOther ? page.path : smartLabel(page.path)}
@@ -561,12 +561,15 @@ export default function ColumnJourney({
alt="No journey data"
className="w-52 h-auto mb-2"
/>
<h4 className="font-semibold text-neutral-900 dark:text-white">
<h4 className="font-semibold text-white">
No journey data yet
</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
<p className="text-sm text-neutral-400 max-w-xs">
Navigation flows will appear here as visitors browse through your site.
</p>
<a href="/installation" target="_blank" rel="noopener noreferrer" className="mt-2 text-sm font-medium text-brand-orange hover:underline">
View setup guide
</a>
</div>
)
}

11
components/journeys/SankeyJourney.tsx
View File

@@ -510,14 +510,17 @@ export default function SankeyJourney({
return (
<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" />
<TreeStructure className="w-8 h-8 text-neutral-400" />
</div>
<h4 className="font-semibold text-neutral-900 dark:text-white">
<h4 className="font-semibold text-white">
No journey data yet
</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
<p className="text-sm text-neutral-400 max-w-xs">
Navigation flows will appear here as visitors browse through your site.
</p>
<a href="/installation" target="_blank" rel="noopener noreferrer" className="mt-2 text-sm font-medium text-brand-orange hover:underline">
View setup guide
</a>
</div>
)
}
@@ -528,7 +531,7 @@ export default function SankeyJourney({
<div className="flex items-center gap-2 mb-3 px-3 py-2 rounded-lg bg-brand-orange/10 text-sm">
<span className="text-neutral-700 dark:text-neutral-300">
Showing flows through{' '}
<span className="font-medium text-neutral-900 dark:text-white">
<span className="font-medium text-white">
{filterPath}
</span>
</span>

12
components/journeys/TopPathsTable.tsx
View File

@@ -38,11 +38,11 @@ export default function TopPathsTable({ paths, loading }: TopPathsTableProps) {
return (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
<div className="mb-1">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
<h3 className="text-lg font-semibold text-white">
Top Paths
</h3>
</div>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mb-5">
<p className="text-sm text-neutral-400 mb-5">
Most common navigation paths across sessions
</p>
@@ -83,7 +83,7 @@ export default function TopPathsTable({ paths, loading }: TopPathsTableProps) {
</span>
) : (
<span
className="text-sm text-neutral-900 dark:text-white truncate"
className="text-sm text-white truncate"
title={page}
>
{smartLabel(page)}
@@ -113,12 +113,12 @@ export default function TopPathsTable({ paths, loading }: TopPathsTableProps) {
) : (
<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" />
<Path className="w-8 h-8 text-neutral-400" />
</div>
<h4 className="font-semibold text-neutral-900 dark:text-white">
<h4 className="font-semibold text-white">
No path data yet
</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
<p className="text-sm text-neutral-400 max-w-xs">
Common navigation paths will appear here as visitors browse your site.
</p>
</div>

14
components/notifications/NotificationCenter.tsx
View File

@@ -212,7 +212,7 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
style={anchor === 'right' && fixedPos ? { left: fixedPos.left, top: fixedPos.top, bottom: fixedPos.bottom } : undefined}
>
<div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
<h3 className="font-semibold text-neutral-900 dark:text-white">Notifications</h3>
<h3 className="font-semibold text-white">Notifications</h3>
{unreadCount > 0 && (
<button
type="button"
@@ -243,7 +243,7 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
<div className="p-6 text-center text-red-500 text-sm">{error}</div>
)}
{!loading && !error && (notifications?.length ?? 0) === 0 && (
<div className="p-6 text-center text-neutral-500 dark:text-neutral-400 text-sm">
<div className="p-6 text-center text-neutral-400 text-sm">
No notifications yet
</div>
)}
@@ -260,11 +260,11 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
<div className="flex gap-3">
{getTypeIcon(n.type)}
<div className="min-w-0 flex-1">
<p className={`text-sm ${!n.read ? 'font-medium' : ''} text-neutral-900 dark:text-white`}>
<p className={`text-sm ${!n.read ? 'font-medium' : ''} text-white`}>
{n.title}
</p>
{n.body && (
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5 line-clamp-2">
<p className="text-xs text-neutral-400 mt-0.5 line-clamp-2">
{n.body}
</p>
)}
@@ -283,11 +283,11 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
<div className="flex gap-3">
{getTypeIcon(n.type)}
<div className="min-w-0 flex-1">
<p className={`text-sm ${!n.read ? 'font-medium' : ''} text-neutral-900 dark:text-white`}>
<p className={`text-sm ${!n.read ? 'font-medium' : ''} text-white`}>
{n.title}
</p>
{n.body && (
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5 line-clamp-2">
<p className="text-xs text-neutral-400 mt-0.5 line-clamp-2">
{n.body}
</p>
)}
@@ -315,7 +315,7 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
<Link
href="/org-settings?tab=notifications"
onClick={() => setOpen(false)}
className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
className="flex items-center gap-2 text-sm text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
>
<SettingsIcon className="w-4 h-4" aria-hidden="true" />
Manage settings

10
components/search/ClicksImpressionsChart.tsx
View File

@@ -31,19 +31,19 @@ function CustomTooltip({ active, payload, label }: TooltipProps) {
return (
<div className="rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 p-3 shadow-sm shadow-black/5 min-w-[140px]">
<div className="text-xs text-neutral-500 dark:text-neutral-400 mb-1.5">{label}</div>
<div className="text-xs text-neutral-400 mb-1.5">{label}</div>
{clicks && (
<div className="flex items-center gap-2 text-sm">
<div className="size-1.5 rounded-full" style={{ backgroundColor: '#FD5E0F' }} />
<span className="text-neutral-500 dark:text-neutral-400">Clicks:</span>
<span className="font-semibold text-neutral-900 dark:text-white">{clicks.value.toLocaleString()}</span>
<span className="text-neutral-400">Clicks:</span>
<span className="font-semibold text-white">{clicks.value.toLocaleString()}</span>
</div>
)}
{impressions && (
<div className="flex items-center gap-2 text-sm mt-1">
<div className="size-1.5 rounded-full" style={{ backgroundColor: '#9CA3AF' }} />
<span className="text-neutral-500 dark:text-neutral-400">Impressions:</span>
<span className="font-semibold text-neutral-900 dark:text-white">{impressions.value.toLocaleString()}</span>
<span className="text-neutral-400">Impressions:</span>
<span className="font-semibold text-white">{impressions.value.toLocaleString()}</span>
</div>
)}
</div>

100
components/settings/OrganizationSettings.tsx
View File

@@ -311,7 +311,7 @@ export default function OrganizationSettings() {
// If no org ID, we are in personal organization context, so don't show org settings
if (!currentOrgId) {
return (
<div className="p-6 text-center text-neutral-500 dark:text-neutral-400">
<div className="p-6 text-center text-neutral-400">
<p>You are in your personal context. Switch to an Organization to manage its settings.</p>
</div>
)
@@ -490,7 +490,7 @@ export default function OrganizationSettings() {
return (
<div className="space-y-8">
<div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Organization Settings</h1>
<h1 className="text-2xl font-bold text-white">Organization Settings</h1>
<p className="mt-2 text-neutral-600 dark:text-neutral-400">
Manage your organization workspace and members.
</p>
@@ -580,8 +580,8 @@ export default function OrganizationSettings() {
{activeTab === 'general' && (
<div className="space-y-12">
<div>
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">General Information</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400">Basic details about your organization.</p>
<h2 className="text-2xl font-bold text-white mb-1">General Information</h2>
<p className="text-sm text-neutral-400">Basic details about your organization.</p>
</div>
<form onSubmit={handleUpdateOrg} className="space-y-4">
@@ -597,7 +597,7 @@ export default function OrganizationSettings() {
minLength={2}
maxLength={50}
disabled={!isEditing}
className={`bg-white dark:bg-neutral-900 ${!isEditing ? 'text-neutral-500 dark:text-neutral-400' : ''}`}
className={`bg-white dark:bg-neutral-900 ${!isEditing ? 'text-neutral-400' : ''}`}
/>
</div>
@@ -606,7 +606,7 @@ export default function OrganizationSettings() {
Organization Slug
</label>
<div className="flex rounded-xl shadow-sm">
<span className="inline-flex items-center px-3 rounded-l-xl border border-r-0 border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 text-neutral-500 dark:text-neutral-400 text-sm">
<span className="inline-flex items-center px-3 rounded-l-xl border border-r-0 border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 text-neutral-400 text-sm">
pulse.ciphera.net/
</span>
<Input
@@ -617,10 +617,10 @@ export default function OrganizationSettings() {
minLength={3}
maxLength={30}
disabled={!isEditing}
className={`rounded-l-none bg-white dark:bg-neutral-900 ${!isEditing ? 'text-neutral-500 dark:text-neutral-400' : ''}`}
className={`rounded-l-none bg-white dark:bg-neutral-900 ${!isEditing ? 'text-neutral-400' : ''}`}
/>
</div>
<p className="text-xs text-neutral-500 dark:text-neutral-400">
<p className="text-xs text-neutral-400">
Changing the slug will change your organization's URL.
</p>
</div>
@@ -658,7 +658,7 @@ export default function OrganizationSettings() {
<div className="space-y-6">
<div>
<h2 className="text-2xl font-bold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400">Irreversible actions for this organization.</p>
<p className="text-sm text-neutral-400">Irreversible actions for this organization.</p>
</div>
<div className="p-6 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl flex items-center justify-between">
@@ -696,11 +696,11 @@ export default function OrganizationSettings() {
<div className="space-y-12">
{/* Invite Section */}
<div>
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Organization Members</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6">Manage who has access to this organization.</p>
<h2 className="text-2xl font-bold text-white mb-1">Organization Members</h2>
<p className="text-sm text-neutral-400 mb-6">Manage who has access to this organization.</p>
<div className="bg-neutral-50 dark:bg-neutral-900/50 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-4">
<h3 className="text-sm font-medium text-neutral-900 dark:text-white mb-3">Invite New Member</h3>
<h3 className="text-sm font-medium text-white mb-3">Invite New Member</h3>
<form onSubmit={handleSendInvite} className="flex gap-3 items-end">
<div className="flex-1">
<Input
@@ -744,12 +744,12 @@ export default function OrganizationSettings() {
{/* Members List */}
<div className="space-y-4">
<h3 className="text-sm font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Active Members</h3>
<h3 className="text-sm font-medium text-neutral-400 uppercase tracking-wider">Active Members</h3>
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
{isLoadingMembers ? (
<MembersListSkeleton />
) : members.length === 0 ? (
<div className="p-8 text-center text-neutral-500 dark:text-neutral-400">No members found.</div>
<div className="p-8 text-center text-neutral-400">No members found.</div>
) : (
members.map((member) => (
<div key={member.user_id} className="p-4 flex items-center justify-between hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors">
@@ -758,10 +758,10 @@ export default function OrganizationSettings() {
{member.user_email?.[0].toUpperCase() || '?'}
</div>
<div>
<div className="text-sm font-medium text-neutral-900 dark:text-white">
<div className="text-sm font-medium text-white">
{member.user_email || 'Unknown User'}
</div>
<div className="text-xs text-neutral-500 dark:text-neutral-400">
<div className="text-xs text-neutral-400">
Joined {formatDate(new Date(member.joined_at))}
</div>
</div>
@@ -786,7 +786,7 @@ export default function OrganizationSettings() {
{/* Pending Invitations */}
{invitations.length > 0 && (
<div className="space-y-4">
<h3 className="text-sm font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Pending Invitations</h3>
<h3 className="text-sm font-medium text-neutral-400 uppercase tracking-wider">Pending Invitations</h3>
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
{invitations.map((invite) => (
<div key={invite.id} className="p-4 flex items-center justify-between">
@@ -795,10 +795,10 @@ export default function OrganizationSettings() {
<div className="w-2 h-2 rounded-full bg-neutral-400 animate-pulse"></div>
</div>
<div>
<div className="text-sm font-medium text-neutral-900 dark:text-white">
<div className="text-sm font-medium text-white">
{invite.email}
</div>
<div className="text-xs text-neutral-500 dark:text-neutral-400">
<div className="text-xs text-neutral-400">
Invited as <span className="capitalize font-medium">{invite.role}</span> • Expires {formatDate(new Date(invite.expires_at))}
</div>
</div>
@@ -821,8 +821,8 @@ export default function OrganizationSettings() {
{activeTab === 'billing' && (
<div className="space-y-8">
<div>
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Billing & Subscription</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400">Manage your plan, usage, and payment details.</p>
<h2 className="text-2xl font-bold text-white mb-1">Billing & Subscription</h2>
<p className="text-sm text-neutral-400">Manage your plan, usage, and payment details.</p>
</div>
{isLoadingSubscription ? (
@@ -832,7 +832,7 @@ export default function OrganizationSettings() {
</div>
) : !subscription ? (
<div className="p-6 text-center bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-200 dark:border-neutral-800">
<p className="text-neutral-500 dark:text-neutral-400">Could not load subscription details.</p>
<p className="text-neutral-400">Could not load subscription details.</p>
<Button variant="ghost" onClick={loadSubscription} className="mt-4">Retry</Button>
</div>
) : (
@@ -915,7 +915,7 @@ export default function OrganizationSettings() {
{/* Plan header */}
<div className="p-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex items-center gap-3">
<span className="text-xl font-bold text-neutral-900 dark:text-white capitalize">
<span className="text-xl font-bold text-white capitalize">
{subscription.plan_id?.startsWith('price_') ? 'Pro' : (subscription.plan_id === 'free' || !subscription.plan_id ? 'Free' : subscription.plan_id)} Plan
</span>
<span className={`px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${
@@ -940,7 +940,7 @@ export default function OrganizationSettings() {
</Button>
</div>
{(subscription.business_name || subscription.tax_id) && (
<div className="px-6 pb-2 -mt-2 space-y-1 text-sm text-neutral-500 dark:text-neutral-400">
<div className="px-6 pb-2 -mt-2 space-y-1 text-sm text-neutral-400">
{subscription.business_name && (
<div>Billing for: {subscription.business_name}</div>
)}
@@ -956,7 +956,7 @@ export default function OrganizationSettings() {
<div className="border-t border-neutral-200 dark:border-neutral-800 p-6 grid grid-cols-2 md:grid-cols-4 gap-y-4 gap-x-6">
<div>
<div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Sites</div>
<div className="text-lg font-semibold text-neutral-900 dark:text-white">
<div className="text-lg font-semibold text-white">
{typeof subscription.sites_count === 'number'
? (() => {
const limit = getSitesLimitForPlan(subscription.plan_id)
@@ -967,7 +967,7 @@ export default function OrganizationSettings() {
</div>
<div>
<div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Pageviews</div>
<div className="text-lg font-semibold text-neutral-900 dark:text-white">
<div className="text-lg font-semibold text-white">
{subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number'
? `${subscription.pageview_usage.toLocaleString()} / ${subscription.pageview_limit.toLocaleString()}`
: '—'}
@@ -993,7 +993,7 @@ export default function OrganizationSettings() {
<div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">
{subscription.subscription_status === 'trialing' ? 'Trial ends' : (subscription.cancel_at_period_end ? 'Access until' : 'Renews')}
</div>
<div className="text-lg font-semibold text-neutral-900 dark:text-white">
<div className="text-lg font-semibold text-white">
{(() => {
const ts = subscription.current_period_end
const d = ts ? new Date(ts) : null
@@ -1005,7 +1005,7 @@ export default function OrganizationSettings() {
</div>
<div>
<div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Limit</div>
<div className="text-lg font-semibold text-neutral-900 dark:text-white">
<div className="text-lg font-semibold text-white">
{subscription.pageview_limit > 0 ? `${subscription.pageview_limit.toLocaleString()} / mo` : 'Unlimited'}
</div>
</div>
@@ -1038,19 +1038,19 @@ export default function OrganizationSettings() {
{/* Order History */}
<div>
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-3">Recent orders</h3>
<h3 className="text-lg font-semibold text-white mb-3">Recent orders</h3>
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
{isLoadingInvoices ? (
<InvoicesListSkeleton />
) : orders.length === 0 ? (
<div className="p-8 text-center text-neutral-500 dark:text-neutral-400">No orders found.</div>
<div className="p-8 text-center text-neutral-400">No orders found.</div>
) : (
<>
{orders.map((order) => (
<div key={order.id} className="px-4 py-3 flex items-center justify-between hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors">
<div className="flex items-center gap-3">
<div>
<span className="font-medium text-sm text-neutral-900 dark:text-white">
<span className="font-medium text-sm text-white">
{(order.total_amount / 100).toLocaleString('en-US', { style: 'currency', currency: order.currency.toUpperCase() })}
</span>
<span className="text-xs text-neutral-500 ml-2">
@@ -1084,8 +1084,8 @@ export default function OrganizationSettings() {
{activeTab === 'notifications' && (
<div className="space-y-8">
<div>
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Notification Settings</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6">
<h2 className="text-2xl font-bold text-white mb-1">Notification Settings</h2>
<p className="text-sm text-neutral-400 mb-6">
Choose which notification types you want to receive. These apply to the notification center for owners and admins.
</p>
</div>
@@ -1094,7 +1094,7 @@ export default function OrganizationSettings() {
<SettingsFormSkeleton />
) : (
<div className="space-y-4">
<h3 className="text-sm font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Notification categories</h3>
<h3 className="text-sm font-medium text-neutral-400 uppercase tracking-wider">Notification categories</h3>
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
{notificationCategories.map((cat) => (
<div
@@ -1102,8 +1102,8 @@ export default function OrganizationSettings() {
className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors"
>
<div className="flex-1">
<p className="text-sm font-medium text-neutral-900 dark:text-white">{cat.label}</p>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">{cat.description}</p>
<p className="text-sm font-medium text-white">{cat.label}</p>
<p className="text-sm text-neutral-400 mt-0.5">{cat.description}</p>
</div>
<div className="flex items-center shrink-0">
<button
@@ -1149,8 +1149,8 @@ export default function OrganizationSettings() {
{activeTab === 'audit' && (
<div className="space-y-12">
<div>
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Audit log</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400">Who did what and when for this organization.</p>
<h2 className="text-2xl font-bold text-white mb-1">Audit log</h2>
<p className="text-sm text-neutral-400">Who did what and when for this organization.</p>
</div>
{/* Advanced Filters */}
@@ -1163,7 +1163,7 @@ export default function OrganizationSettings() {
placeholder="e.g. 8a2b3c"
value={auditLogIdFilter}
onChange={(e) => setAuditLogIdFilter(e.target.value)}
className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
/>
</div>
<div className="space-y-1">
@@ -1173,7 +1173,7 @@ export default function OrganizationSettings() {
placeholder="e.g. site_created"
value={auditActionFilter}
onChange={(e) => setAuditActionFilter(e.target.value)}
className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
/>
</div>
<div className="space-y-1">
@@ -1182,7 +1182,7 @@ export default function OrganizationSettings() {
type="date"
value={auditStartDate}
onChange={(e) => setAuditStartDate(e.target.value)}
className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
/>
</div>
<div className="space-y-1">
@@ -1191,7 +1191,7 @@ export default function OrganizationSettings() {
type="date"
value={auditEndDate}
onChange={(e) => setAuditEndDate(e.target.value)}
className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
/>
</div>
</div>
@@ -1240,10 +1240,10 @@ export default function OrganizationSettings() {
<td className="px-4 py-3 text-neutral-600 dark:text-neutral-400 whitespace-nowrap">
{formatDateTime(new Date(entry.occurred_at))}
</td>
<td className="px-4 py-3 text-neutral-900 dark:text-white whitespace-nowrap" title={entry.actor_email || entry.actor_id || 'System'}>
<td className="px-4 py-3 text-white whitespace-nowrap" title={entry.actor_email || entry.actor_id || 'System'}>
{entry.actor_email || entry.actor_id || 'System'}
</td>
<td className="px-4 py-3 font-medium text-neutral-900 dark:text-white whitespace-nowrap" title={entry.action}>{entry.action}</td>
<td className="px-4 py-3 font-medium text-white whitespace-nowrap" title={entry.action}>{entry.action}</td>
<td className="px-4 py-3 text-neutral-600 dark:text-neutral-400">{entry.resource_type}</td>
</tr>
))}
@@ -1255,7 +1255,7 @@ export default function OrganizationSettings() {
{/* Pagination */}
{auditTotal > auditPageSize && (
<div className="flex items-center justify-between px-4 py-3 border-t border-neutral-200 dark:border-neutral-800">
<span className="text-sm text-neutral-500 dark:text-neutral-400">
<span className="text-sm text-neutral-400">
{auditPage * auditPageSize + 1}–{Math.min((auditPage + 1) * auditPageSize, auditTotal)} of {auditTotal}
</span>
<div className="flex gap-2">
@@ -1361,7 +1361,7 @@ export default function OrganizationSettings() {
value={deleteConfirm}
onChange={(e) => setDeleteConfirm(e.target.value)}
autoComplete="off"
className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
placeholder="DELETE"
/>
</div>
@@ -1410,7 +1410,7 @@ export default function OrganizationSettings() {
className="bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-md w-full p-6 border border-neutral-200 dark:border-neutral-800"
>
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Cancel subscription?</h3>
<h3 className="text-lg font-semibold text-white">Cancel subscription?</h3>
<button
onClick={() => setShowCancelPrompt(false)}
className="text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-400"
@@ -1464,7 +1464,7 @@ export default function OrganizationSettings() {
className="bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-md w-full p-6 border border-neutral-200 dark:border-neutral-800"
>
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Change plan</h3>
<h3 className="text-lg font-semibold text-white">Change plan</h3>
<button
type="button"
onClick={() => setShowChangePlanModal(false)}
@@ -1500,7 +1500,7 @@ export default function OrganizationSettings() {
: 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600'
}`}
>
<span className={`block text-sm font-semibold ${isSelected ? 'text-brand-orange' : 'text-neutral-900 dark:text-white'}`}>
<span className={`block text-sm font-semibold ${isSelected ? 'text-brand-orange' : 'text-white'}`}>
{plan.name}
</span>
<span className="block text-xs text-neutral-500 mt-0.5">{plan.sites}</span>
@@ -1519,7 +1519,7 @@ export default function OrganizationSettings() {
<select
value={changePlanTierIndex}
onChange={(e) => setChangePlanTierIndex(Number(e.target.value))}
className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange outline-none"
className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-white focus:ring-2 focus:ring-brand-orange outline-none"
>
{TRAFFIC_TIERS.map((tier, idx) => (
<option key={tier.value} value={idx}>

16
components/settings/SecurityActivityCard.tsx
View File

@@ -38,7 +38,7 @@ function getEventColor(eventType: string, outcome: string): string {
if (eventType === '2fa_disabled') return 'text-amber-500 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30'
if (eventType === 'account_deleted') return 'text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-950/30'
if (eventType === 'recovery_codes_regenerated') return 'text-amber-500 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30'
return 'text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800'
return 'text-neutral-400 bg-neutral-100 dark:bg-neutral-800'
}
function getMethodLabel(entry: AuditLogEntry): string | null {
@@ -120,8 +120,8 @@ export default function SecurityActivityCard() {
return (
<div>
<h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">Security Activity</h2>
<p className="text-neutral-500 dark:text-neutral-400 text-sm mb-6">
<h2 className="text-xl font-semibold text-white mb-1">Security Activity</h2>
<p className="text-neutral-400 text-sm mb-6">
Recent security events on your account{totalCount > 0 ? ` (${totalCount})` : ''}
</p>
@@ -138,7 +138,7 @@ export default function SecurityActivityCard() {
<svg className="w-12 h-12 mx-auto mb-3 text-neutral-300 dark:text-neutral-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
</svg>
<p className="text-neutral-500 dark:text-neutral-400">No activity recorded yet.</p>
<p className="text-neutral-400">No activity recorded yet.</p>
</div>
) : (
<div className="space-y-2">
@@ -165,11 +165,11 @@ export default function SecurityActivityCard() {
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<span className="font-medium text-neutral-900 dark:text-white text-sm">
<span className="font-medium text-white text-sm">
{label}
</span>
{method && (
<span className="text-xs px-1.5 py-0.5 rounded bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400">
<span className="text-xs px-1.5 py-0.5 rounded bg-neutral-100 dark:bg-neutral-800 text-neutral-400">
{method}
</span>
)}
@@ -179,7 +179,7 @@ export default function SecurityActivityCard() {
</span>
)}
</div>
<div className="flex items-center gap-2 mt-0.5 text-xs text-neutral-500 dark:text-neutral-400 flex-wrap">
<div className="flex items-center gap-2 mt-0.5 text-xs text-neutral-400 flex-wrap">
{reason && <span>{reason}</span>}
{reason && (deviceStr || entry.ip_address) && <span>&middot;</span>}
{deviceStr && <span>{deviceStr}</span>}
@@ -189,7 +189,7 @@ export default function SecurityActivityCard() {
</div>
<div className="flex-shrink-0 text-right">
<span className="text-xs text-neutral-500 dark:text-neutral-400" title={formatDateTimeFull(new Date(entry.created_at))}>
<span className="text-xs text-neutral-400" title={formatDateTimeFull(new Date(entry.created_at))}>
{formatRelativeTime(entry.created_at)}
</span>
</div>

2
components/settings/SettingsModalWrapper.tsx
View File

@@ -72,7 +72,7 @@ function NotificationCenterPlaceholder() {
return (
<div className="text-center max-w-md mx-auto py-8">
<BellIcon className="w-12 h-12 text-neutral-300 mx-auto mb-4" />
<h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">Notification Center</h3>
<h3 className="text-lg font-medium text-white mb-2">Notification Center</h3>
<p className="text-sm text-neutral-500 mb-4">View and manage all your notifications in one place.</p>
<Link href="/notifications" className="inline-flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors">
Open Notification Center

12
components/settings/TrustedDevicesCard.tsx
View File

@@ -56,8 +56,8 @@ export default function TrustedDevicesCard() {
return (
<div>
<h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">Trusted Devices</h2>
<p className="text-neutral-500 dark:text-neutral-400 text-sm mb-6">
<h2 className="text-xl font-semibold text-white mb-1">Trusted Devices</h2>
<p className="text-neutral-400 text-sm mb-6">
Devices that have signed in to your account. Removing a device means the next sign-in from it will trigger a new device alert.
</p>
@@ -74,7 +74,7 @@ export default function TrustedDevicesCard() {
<svg className="w-12 h-12 mx-auto mb-3 text-neutral-300 dark:text-neutral-600" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25A2.25 2.25 0 015.25 3h13.5A2.25 2.25 0 0121 5.25z" />
</svg>
<p className="text-neutral-500 dark:text-neutral-400">No trusted devices yet. They appear after you sign in.</p>
<p className="text-neutral-400">No trusted devices yet. They appear after you sign in.</p>
</div>
) : (
<div className="space-y-2">
@@ -83,7 +83,7 @@ export default function TrustedDevicesCard() {
key={device.id}
className="flex items-center gap-3 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-3"
>
<div className="flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400">
<div className="flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-100 dark:bg-neutral-800 text-neutral-400">
<svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" d={getDeviceIcon(device.display_hint)} />
</svg>
@@ -91,7 +91,7 @@ export default function TrustedDevicesCard() {
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="font-medium text-neutral-900 dark:text-white text-sm truncate">
<span className="font-medium text-white text-sm truncate">
{device.display_hint || 'Unknown device'}
</span>
{device.is_current && (
@@ -100,7 +100,7 @@ export default function TrustedDevicesCard() {
</span>
)}
</div>
<div className="flex items-center gap-2 mt-0.5 text-xs text-neutral-500 dark:text-neutral-400">
<div className="flex items-center gap-2 mt-0.5 text-xs text-neutral-400">
<span title={formatDateTimeFull(new Date(device.first_seen_at))}>
First seen {formatRelativeTime(device.first_seen_at)}
</span>

4
components/sites/DeleteSiteModal.tsx
View File

@@ -124,7 +124,7 @@ export default function DeleteSiteModal({ open, onClose, onDeleted, siteName, si
value={deleteConfirm}
onChange={(e) => setDeleteConfirm(e.target.value)}
autoComplete="off"
className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
placeholder="DELETE"
/>
</div>
@@ -187,7 +187,7 @@ export default function DeleteSiteModal({ open, onClose, onDeleted, siteName, si
value={permanentConfirm}
onChange={(e) => setPermanentConfirm(e.target.value)}
autoComplete="off"
className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
placeholder={siteDomain}
/>
</div>

22
components/sites/ScriptSetupBlock.tsx
View File

@@ -167,7 +167,7 @@ export default function ScriptSetupBlock({
{/* ── Feature toggles ─────────────────────────────────────────────── */}
<div className="mt-6">
<h4 className="text-sm font-semibold text-neutral-900 dark:text-white mb-3">
<h4 className="text-sm font-semibold text-white mb-3">
Features
</h4>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
@@ -177,10 +177,10 @@ export default function ScriptSetupBlock({
className="flex items-center justify-between rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-3"
>
<div className="min-w-0 mr-3">
<span className="text-sm font-medium text-neutral-900 dark:text-white block">
<span className="text-sm font-medium text-white block">
{f.label}
</span>
<span className="text-xs text-neutral-500 dark:text-neutral-400">
<span className="text-xs text-neutral-400">
{f.description}
</span>
</div>
@@ -191,10 +191,10 @@ export default function ScriptSetupBlock({
{/* * Frustration — full-width, visually distinct as add-on */}
<div className="mt-3 flex items-center justify-between rounded-xl border border-dashed border-neutral-300 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900/50 px-4 py-3">
<div className="min-w-0 mr-3">
<span className="text-sm font-medium text-neutral-900 dark:text-white block">
<span className="text-sm font-medium text-white block">
Frustration tracking
</span>
<span className="text-xs text-neutral-500 dark:text-neutral-400">
<span className="text-xs text-neutral-400">
Rage clicks &amp; dead clicks &middot; Loads separate add-on script
</span>
</div>
@@ -204,15 +204,15 @@ export default function ScriptSetupBlock({
{/* ── Storage + TTL ───────────────────────────────────────────────── */}
<div className="mt-6">
<h4 className="text-sm font-semibold text-neutral-900 dark:text-white mb-1">
<h4 className="text-sm font-semibold text-white mb-1">
Visitor identity
</h4>
<p className="text-xs text-neutral-500 dark:text-neutral-400 mb-3">
<p className="text-xs text-neutral-400 mb-3">
How returning visitors are recognized. Stricter settings increase privacy but may raise unique visitor counts.
</p>
<div className="flex items-end gap-3">
<div className="min-w-0">
<label className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1 block">
<label className="text-xs font-medium text-neutral-400 mb-1 block">
Recognition
</label>
<Select
@@ -224,7 +224,7 @@ export default function ScriptSetupBlock({
</div>
{storage === 'local' && (
<div>
<label className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1 block">
<label className="text-xs font-medium text-neutral-400 mb-1 block">
Reset after
</label>
<Select
@@ -242,14 +242,14 @@ export default function ScriptSetupBlock({
{showFrameworkPicker && (
<div className="mt-6">
<div className="flex items-center justify-between mb-3">
<h4 className="text-sm font-semibold text-neutral-900 dark:text-white">
<h4 className="text-sm font-semibold text-white">
Setup guide
</h4>
<Link
href="/integrations"
target="_blank"
rel="noopener noreferrer"
className="text-xs font-medium text-neutral-500 dark:text-neutral-400 hover:text-brand-orange transition-colors"
className="text-xs font-medium text-neutral-400 hover:text-brand-orange transition-colors"
>
All integrations →
</Link>

16
components/sites/SiteList.tsx
View File

@@ -46,8 +46,8 @@ function SiteCard({ site, stats, statsLoading, onDelete, canDelete }: SiteCardPr
/>
</div>
<div>
<h3 className="font-semibold text-neutral-900 dark:text-white">{site.name}</h3>
<div className="flex items-center gap-1 text-sm text-neutral-500 dark:text-neutral-400">
<h3 className="font-semibold text-white">{site.name}</h3>
<div className="flex items-center gap-1 text-sm text-neutral-400">
{site.domain}
<a
href={`https://${site.domain}`}
@@ -84,13 +84,13 @@ function SiteCard({ site, stats, statsLoading, onDelete, canDelete }: SiteCardPr
<div className="mb-6 grid grid-cols-2 gap-4 rounded-lg bg-neutral-50 p-3 dark:bg-neutral-800/50">
<div>
<p className="text-xs text-neutral-500">Visitors (24h)</p>
<p className="font-mono text-lg font-medium text-neutral-900 dark:text-white">
<p className="font-mono text-lg font-medium text-white">
{statsLoading ? '--' : formatNumber(visitors24h)}
</p>
</div>
<div>
<p className="text-xs text-neutral-500">Pageviews</p>
<p className="font-mono text-lg font-medium text-neutral-900 dark:text-white">
<p className="font-mono text-lg font-medium text-white">
{statsLoading ? '--' : formatNumber(pageviews)}
</p>
</div>
@@ -144,8 +144,8 @@ export default function SiteList({ sites, siteStats, loading, onDelete }: SiteLi
className="mb-6"
unoptimized
/>
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">No sites yet</h3>
<p className="mt-2 text-sm text-neutral-500 dark:text-neutral-400 mb-4">Create your first site to get started.</p>
<h3 className="text-lg font-semibold text-white">No sites yet</h3>
<p className="mt-2 text-sm text-neutral-400 mb-4">Create your first site to get started.</p>
<Link href="/sites/new">
<Button variant="primary" className="text-sm">
Add your first site
@@ -176,8 +176,8 @@ export default function SiteList({ sites, siteStats, loading, onDelete }: SiteLi
<div className="mb-3 rounded-full bg-neutral-200 p-3 dark:bg-neutral-800">
<BookOpenIcon className="h-6 w-6 text-neutral-500" />
</div>
<h3 className="font-semibold text-neutral-900 dark:text-white">Need help setup?</h3>
<p className="mb-4 text-sm text-neutral-500 dark:text-neutral-400">Check our documentation for installation guides.</p>
<h3 className="font-semibold text-white">Need help setup?</h3>
<p className="mb-4 text-sm text-neutral-400">Check our documentation for installation guides.</p>
<Link href="https://docs.ciphera.net" target="_blank" className="text-sm font-medium text-brand-orange hover:underline">
Read Documentation &rarr;
</Link>

12
components/sites/VerificationModal.tsx
View File

@@ -105,7 +105,7 @@ export default function VerificationModal({ isOpen, onClose, site, onVerified }:
>
{/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-neutral-100 dark:border-neutral-800">
<h3 className="font-semibold text-neutral-900 dark:text-white">
<h3 className="font-semibold text-white">
Verify Installation
</h3>
<button
@@ -148,10 +148,10 @@ export default function VerificationModal({ isOpen, onClose, site, onVerified }:
<div className="absolute inset-0 w-16 h-16 border-4 border-brand-orange border-t-transparent rounded-full animate-spin" />
</div>
<div className="text-center space-y-1">
<h4 className="font-medium text-neutral-900 dark:text-white">
<h4 className="font-medium text-white">
Checking connection...
</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<p className="text-sm text-neutral-400">
Waiting for signal from {site.domain}
</p>
</div>
@@ -164,10 +164,10 @@ export default function VerificationModal({ isOpen, onClose, site, onVerified }:
<CheckCircleIcon className="w-8 h-8" />
</div>
<div className="text-center space-y-1">
<h4 className="text-xl font-bold text-neutral-900 dark:text-white">
<h4 className="text-xl font-bold text-white">
You're all set!
</h4>
<p className="text-neutral-500 dark:text-neutral-400">
<p className="text-neutral-400">
We are successfully receiving data from your website.
</p>
</div>
@@ -189,7 +189,7 @@ export default function VerificationModal({ isOpen, onClose, site, onVerified }:
</div>
<div className="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-xl border border-neutral-100 dark:border-neutral-800">
<p className="text-sm font-medium text-neutral-900 dark:text-white mb-2">
<p className="text-sm font-medium text-white mb-2">
Troubleshooting Checklist:
</p>
<ul className="text-sm text-neutral-600 dark:text-neutral-400 space-y-1 list-disc list-inside">

12
components/tools/UtmBuilder.tsx
View File

@@ -125,7 +125,7 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
{/* Site Selector */}
{sites.length > 0 && (
<div>
<label className="block text-sm font-medium mb-1 text-neutral-900 dark:text-white">Select Site</label>
<label className="block text-sm font-medium mb-1 text-white">Select Site</label>
<Select
value={selectedSiteId}
onChange={handleSiteChange}
@@ -138,7 +138,7 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
)}
<div>
<label className="block text-sm font-medium mb-1.5 text-neutral-900 dark:text-white">Website URL *</label>
<label className="block text-sm font-medium mb-1.5 text-white">Website URL *</label>
{selectedSite ? (
<div className="flex rounded-xl shadow-sm transition-all duration-200 focus-within:ring-4 focus-within:ring-brand-orange/10 focus-within:border-brand-orange hover:border-brand-orange/50 border border-neutral-200 dark:border-neutral-800">
<span className="inline-flex items-center px-4 rounded-l-xl border-r border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 text-neutral-500 text-sm select-none">
@@ -146,7 +146,7 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
</span>
<input
type="text"
className="flex-1 min-w-0 block w-full px-4 py-3 rounded-none rounded-r-xl bg-neutral-50/50 dark:bg-neutral-900/50 outline-none transition-all text-neutral-900 dark:text-white text-sm placeholder:text-neutral-400"
className="flex-1 min-w-0 block w-full px-4 py-3 rounded-none rounded-r-xl bg-neutral-50/50 dark:bg-neutral-900/50 outline-none transition-all text-white text-sm placeholder:text-neutral-400"
placeholder="/blog/post-1"
value={getCurrentPath()}
onChange={handlePathChange}
@@ -167,7 +167,7 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium mb-1.5 text-neutral-900 dark:text-white">Source *</label>
<label className="block text-sm font-medium mb-1.5 text-white">Source *</label>
<Input
name="source"
placeholder="google, newsletter"
@@ -176,7 +176,7 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
/>
</div>
<div>
<label className="block text-sm font-medium mb-1.5 text-neutral-900 dark:text-white">Medium *</label>
<label className="block text-sm font-medium mb-1.5 text-white">Medium *</label>
<Input
name="medium"
placeholder="cpc, email"
@@ -186,7 +186,7 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
</div>
</div>
<div>
<label className="block text-sm font-medium mb-1.5 text-neutral-900 dark:text-white">Campaign Name *</label>
<label className="block text-sm font-medium mb-1.5 text-white">Campaign Name *</label>
<Input
name="campaign"
placeholder="spring_sale"

2
lib/integration-guides.tsx
View File

@@ -2310,7 +2310,7 @@ export default defineConfig({
</p>
<details>
<summary className="cursor-pointer text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300">
<summary className="cursor-pointer text-sm text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300">
Advanced: override domain or configure options
</summary>
<p className="mt-3 text-sm text-neutral-600 dark:text-neutral-400">

20
lib/utils/dateRanges.ts Normal file
View File

@@ -0,0 +1,20 @@
import { getDateRange, formatDate } from '@ciphera-net/ui'
/** Monday–today range for "This week" option */
export function getThisWeekRange(): { start: string; end: string } {
const today = new Date()
const dayOfWeek = today.getDay()
const monday = new Date(today)
monday.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1))
return { start: formatDate(monday), end: formatDate(today) }
}
/** 1st of month–today range for "This month" option */
export function getThisMonthRange(): { start: string; end: string } {
const today = new Date()
const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
return { start: formatDate(firstOfMonth), end: formatDate(today) }
}
// Re-export for convenience
export { getDateRange, formatDate }

3
package.json
View File

@@ -20,8 +20,6 @@
"@radix-ui/react-navigation-menu": "^1.2.14",
"@radix-ui/react-slot": "^1.2.4",
"@simplewebauthn/browser": "^13.2.2",
"@stripe/react-stripe-js": "^5.6.0",
"@stripe/stripe-js": "^8.7.0",
"@tanstack/react-virtual": "^3.13.21",
"@types/d3": "^7.4.3",
"@visx/curve": "^3.12.0",
@@ -44,7 +42,6 @@
"jspdf": "^4.0.0",
"jspdf-autotable": "^5.0.7",
"lucide-react": "^0.577.0",
"motion": "^12.35.2",
"next": "^16.1.1",
"radix-ui": "^1.4.3",
"react": "^19.2.3",