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

Merge pull request #30 from ciphera-net/staging

Browse Source 
[PULSE-56] Consolidate pulse-frontend with ciphera-ui (design system migration)
This commit is contained in:
Usman
2026-02-17 21:09:39 +01:00
committed by GitHub
parent 32d8b90284 3e8cd8d046
commit 5ed4afd389
47 changed files with 2011 additions and 557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
CHANGELOG.md
View File

@@ -6,6 +6,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
## [Unreleased]
## [0.7.0-alpha] - 2026-02-17
### Changed
- **ciphera-ui consolidation.** Migrated shared components and utilities to @ciphera-net/ui (v0.0.57): SwissFlagIcon, CodeBlock, Spinner, format utilities (formatNumber, formatDuration, formatDate, getDateRange, formatUpdatedAgo, formatRelativeTime), and auth error utilities (getAuthErrorMessage, authMessageFromStatus, authMessageFromErrorType). Removed 6 local duplicate files (LoadingOverlay, SwissFlagIcon, CodeBlock, authErrors.ts, format.ts).
- **Form card border radius.** Login, signup, invite accept, verify, reset-password, forgot-password, and organization create cards now use rounded-2xl to match design system.
- **Hardcoded brand colors.** Uptime page chart uses CSS variable var(--color-brand-orange) instead of #FD5E0F.
- **Selection styling.** Removed redundant selection:bg-brand-orange/20 from page wrappers; relies on ciphera-ui base styles.
- **Inline spinners.** Dashboard widgets (TopReferrers, Locations, TechSpecs, Campaigns, ContentStats), notifications page, and OrganizationSettings now use Spinner from ciphera-ui.
### Removed
- **Dead components.** LoadingOverlay.tsx (unused; all usage already from ciphera-ui).
## [0.6.0-alpha] - 2026-02-13
### Added
@@ -67,7 +81,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
---
[Unreleased]: https://github.com/ciphera-net/pulse/compare/v0.6.0-alpha...HEAD
[Unreleased]: https://github.com/ciphera-net/pulse/compare/v0.7.0-alpha...HEAD
[0.7.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.6.0-alpha...v0.7.0-alpha
[0.6.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.5.1-alpha...v0.6.0-alpha
[0.5.1-alpha]: https://github.com/ciphera-net/pulse/compare/v0.5.0-alpha...v0.5.1-alpha
[0.5.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.4.0-alpha...v0.5.0-alpha

2
app/about/page.tsx
View File

@@ -57,7 +57,7 @@ function ComparisonTable({ title, competitors }: { title: string, competitors: {
export default function AboutPage() {
return (
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
<div className="relative min-h-screen flex flex-col overflow-hidden">
{/* * --- ATMOSPHERE (Background) --- */}
<div className="absolute inset-0 -z-10 pointer-events-none">
<div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />

2
app/auth/callback/page.tsx
View File

@@ -5,7 +5,7 @@ import { useRouter, useSearchParams } from 'next/navigation'
import { useAuth } from '@/lib/auth/context'
import { AUTH_URL, default as apiRequest } from '@/lib/api/client'
import { exchangeAuthCode, setSessionAction } from '@/app/actions/auth'
import { authMessageFromErrorType, type AuthErrorType } from '@/lib/utils/authErrors'
import { authMessageFromErrorType, type AuthErrorType } from '@ciphera-net/ui'
import { LoadingOverlay } from '@ciphera-net/ui'
function AuthCallbackContent() {

2
app/features/page.tsx
View File

@@ -106,7 +106,7 @@ const trustSignals = [
export default function FeaturesPage() {
return (
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
<div className="relative min-h-screen flex flex-col overflow-hidden">
{/* * --- ATMOSPHERE (Background) --- */}
<div className="absolute inset-0 -z-10 pointer-events-none">
<div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />

2
app/installation/page.tsx
View File

@@ -4,7 +4,7 @@ import React from 'react'
export default function InstallationPage() {
return (
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
<div className="relative min-h-screen flex flex-col overflow-hidden">
{/* * --- 1. ATMOSPHERE (Background) --- */}
<div className="absolute inset-0 -z-10 pointer-events-none">

2
app/integrations/nextjs/page.tsx
View File

@@ -5,7 +5,7 @@ import { ArrowLeftIcon } from '@ciphera-net/ui'
export default function NextJsIntegrationPage() {
return (
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
<div className="relative min-h-screen flex flex-col overflow-hidden">
{/* * --- ATMOSPHERE (Background) --- */}
<div className="absolute inset-0 -z-10 pointer-events-none">
<div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />

2
app/integrations/page.tsx
View File

@@ -90,7 +90,7 @@ export default function IntegrationsPage() {
}, [])
return (
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
<div className="relative min-h-screen flex flex-col overflow-hidden">
{/* * --- ATMOSPHERE (Background) --- */}
<div className="absolute inset-0 -z-10 pointer-events-none">
<div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />

2
app/integrations/react/page.tsx
View File

@@ -5,7 +5,7 @@ import { ArrowLeftIcon } from '@ciphera-net/ui'
export default function ReactIntegrationPage() {
return (
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
<div className="relative min-h-screen flex flex-col overflow-hidden">
{/* * --- ATMOSPHERE (Background) --- */}
<div className="absolute inset-0 -z-10 pointer-events-none">
<div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />

2
app/integrations/vue/page.tsx
View File

@@ -5,7 +5,7 @@ import { ArrowLeftIcon } from '@ciphera-net/ui'
export default function VueIntegrationPage() {
return (
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
<div className="relative min-h-screen flex flex-col overflow-hidden">
{/* * --- ATMOSPHERE (Background) --- */}
<div className="absolute inset-0 -z-10 pointer-events-none">
<div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />

2
app/integrations/wordpress/page.tsx
View File

@@ -5,7 +5,7 @@ import { ArrowLeftIcon } from '@ciphera-net/ui'
export default function WordPressIntegrationPage() {
return (
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
<div className="relative min-h-screen flex flex-col overflow-hidden">
{/* * --- ATMOSPHERE (Background) --- */}
<div className="absolute inset-0 -z-10 pointer-events-none">
<div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />

2
app/not-found.tsx
View File

@@ -3,7 +3,7 @@ import { Button } from '@ciphera-net/ui'
export default function NotFound() {
return (
<div className="relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden selection:bg-brand-orange/20">
<div className="relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden">
{/* * --- ATMOSPHERE (Background) --- */}
<div className="absolute inset-0 -z-10 pointer-events-none">
{/* * Center Orange Glow */}

6
app/notifications/page.tsx
View File

@@ -13,9 +13,9 @@ import {
markAllNotificationsRead,
type Notification,
} from '@/lib/api/notifications'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { getAuthErrorMessage } from '@ciphera-net/ui'
import { formatTimeAgo, getTypeIcon } from '@/lib/utils/notifications'
import { Button, ArrowLeftIcon } from '@ciphera-net/ui'
import { Button, ArrowLeftIcon, Spinner } from '@ciphera-net/ui'
import { toast } from '@ciphera-net/ui'
const PAGE_SIZE = 50
@@ -129,7 +129,7 @@ export default function NotificationsPage() {
{loading ? (
<div className="flex justify-center py-12">
<div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
<Spinner />
</div>
) : error ? (
<div className="p-8 text-center text-red-500 bg-red-50 dark:bg-red-900/10 rounded-2xl border border-red-200 dark:border-red-800">

2
app/onboarding/page.tsx
View File

@@ -4,7 +4,7 @@ import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { createOrganization } from '@/lib/api/organization'
import { useAuth } from '@/lib/auth/context'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { getAuthErrorMessage } from '@ciphera-net/ui'
import { LoadingOverlay } from '@ciphera-net/ui'
import { Button, Input } from '@ciphera-net/ui'

4
app/page.tsx
View File

@@ -12,7 +12,7 @@ import SiteList from '@/components/sites/SiteList'
import { Button } from '@ciphera-net/ui'
import { BarChartIcon, LockIcon, ZapIcon, CheckCircleIcon, XIcon, GlobeIcon } from '@ciphera-net/ui'
import { toast } from '@ciphera-net/ui'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { getAuthErrorMessage } from '@ciphera-net/ui'
function DashboardPreview() {
return (
@@ -172,7 +172,7 @@ export default function HomePage() {
if (!user) {
return (
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
<div className="relative min-h-screen flex flex-col overflow-hidden">
{/* * --- 1. ATMOSPHERE (Background) --- */}
<div className="absolute inset-0 -z-10 pointer-events-none">

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

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from 'react'
import { useParams, useSearchParams, useRouter } from 'next/navigation'
import { getPublicDashboard, getPublicStats, getPublicDailyStats, getPublicRealtime, getPublicPerformanceByPage, type DashboardData, type Stats, type DailyStat, type PerformanceByPageStat } from '@/lib/api/stats'
import { toast } from '@ciphera-net/ui'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { getAuthErrorMessage } from '@ciphera-net/ui'
import { LoadingOverlay, Button } from '@ciphera-net/ui'
import Chart from '@/components/dashboard/Chart'
import TopPages from '@/components/dashboard/ContentStats'

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

@@ -16,7 +16,7 @@ import {
ResponsiveContainer,
Cell
} from 'recharts'
import { getDateRange } from '@/lib/utils/format'
import { getDateRange } from '@ciphera-net/ui'
const CHART_COLORS_LIGHT = {
border: '#E5E5E5',

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

@@ -6,9 +6,9 @@ import { useParams, useRouter } from 'next/navigation'
import { motion } from 'framer-motion'
import { getSite, type Site } from '@/lib/api/sites'
import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, getCountries, getCities, getRegions, getBrowsers, getOS, getDevices, getScreenResolutions, getEntryPages, getExitPages, getDashboard, getCampaigns, getPerformanceByPage, type Stats, type DailyStat, type PerformanceByPageStat } from '@/lib/api/stats'
import { formatNumber, formatDuration, getDateRange } from '@/lib/utils/format'
import { formatNumber, formatDuration, getDateRange } from '@ciphera-net/ui'
import { toast } from '@ciphera-net/ui'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { getAuthErrorMessage } from '@ciphera-net/ui'
import { LoadingOverlay, Button } from '@ciphera-net/ui'
import { Select, DatePicker, DownloadIcon } from '@ciphera-net/ui'
import ExportModal from '@/components/dashboard/ExportModal'

2
app/sites/[id]/realtime/page.tsx
View File

@@ -5,7 +5,7 @@ import { useParams, useRouter } from 'next/navigation'
import { getSite, type Site } from '@/lib/api/sites'
import { getRealtimeVisitors, getSessionDetails, type Visitor, type SessionEvent } from '@/lib/api/realtime'
import { toast } from '@ciphera-net/ui'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { getAuthErrorMessage } from '@ciphera-net/ui'
import { LoadingOverlay, UserIcon } from '@ciphera-net/ui'
import { motion, AnimatePresence } from 'framer-motion'

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

@@ -5,7 +5,7 @@ import { useParams, useRouter } from 'next/navigation'
import { getSite, updateSite, resetSiteData, deleteSite, type Site, type GeoDataLevel } from '@/lib/api/sites'
import { listGoals, createGoal, updateGoal, deleteGoal, type Goal } from '@/lib/api/goals'
import { toast } from '@ciphera-net/ui'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { getAuthErrorMessage } from '@ciphera-net/ui'
import { LoadingOverlay } from '@ciphera-net/ui'
import VerificationModal from '@/components/sites/VerificationModal'
import ScriptSetupBlock from '@/components/sites/ScriptSetupBlock'

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

@@ -19,7 +19,7 @@ import {
} from '@/lib/api/uptime'
import { toast } from '@ciphera-net/ui'
import { useTheme } from '@ciphera-net/ui'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { getAuthErrorMessage } from '@ciphera-net/ui'
import { LoadingOverlay, Button, Modal } from '@ciphera-net/ui'
import {
AreaChart,
@@ -313,7 +313,7 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
}}
>
<div className="font-medium mb-0.5">{label}</div>
<div style={{ color: '#FD5E0F' }} className="font-semibold">
<div style={{ color: 'var(--color-brand-orange)' }} className="font-semibold">
{payload[0].value}ms
</div>
</div>
@@ -330,8 +330,8 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
<AreaChart data={data} margin={{ top: 5, right: 5, left: -20, bottom: 0 }}>
<defs>
<linearGradient id="responseTimeGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#FD5E0F" stopOpacity={0.3} />
<stop offset="100%" stopColor="#FD5E0F" stopOpacity={0.02} />
<stop offset="0%" stopColor="var(--color-brand-orange)" stopOpacity={0.3} />
<stop offset="100%" stopColor="var(--color-brand-orange)" stopOpacity={0.02} />
</linearGradient>
</defs>
<CartesianGrid
@@ -357,11 +357,11 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
<Area
type="monotone"
dataKey="ms"
stroke="#FD5E0F"
stroke="var(--color-brand-orange)"
strokeWidth={2}
fill="url(#responseTimeGradient)"
dot={false}
activeDot={{ r: 4, fill: '#FD5E0F', strokeWidth: 0 }}
activeDot={{ r: 4, fill: 'var(--color-brand-orange)', strokeWidth: 0 }}
/>
</AreaChart>
</ResponsiveContainer>

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

@@ -7,7 +7,7 @@ import { createSite, listSites, getSite, type Site } from '@/lib/api/sites'
import { getSubscription } from '@/lib/api/billing'
import { trackSiteCreatedFromDashboard, trackSiteCreatedScriptCopied } from '@/lib/welcomeAnalytics'
import { toast } from '@ciphera-net/ui'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { getAuthErrorMessage } from '@ciphera-net/ui'
import { Button, Input } from '@ciphera-net/ui'
import { CheckCircleIcon } from '@ciphera-net/ui'
import ScriptSetupBlock from '@/components/sites/ScriptSetupBlock'

2
app/welcome/page.tsx
View File

@@ -21,7 +21,7 @@ import { createSite, type Site } from '@/lib/api/sites'
import { setSessionAction } from '@/app/actions/auth'
import { useAuth } from '@/lib/auth/context'
import apiRequest from '@/lib/api/client'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { getAuthErrorMessage } from '@ciphera-net/ui'
import {
trackWelcomeStepView,
trackWelcomeWorkspaceSelected,

28
components/CodeBlock.tsx
View File

@@ -1,28 +0,0 @@
/**
* @file Reusable code block component for integration guide pages.
*
* Renders a VS-Code-style code block with a filename tab header.
*/
interface CodeBlockProps {
/** Filename displayed in the tab header */
filename: string
/** The code string to render inside the block */
children: string
}
/**
* Renders a dark-themed code snippet with a filename tab.
*/
export function CodeBlock({ filename, children }: CodeBlockProps) {
return (
<div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
<div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
<span className="text-xs text-neutral-400 font-mono">{filename}</span>
</div>
<div className="p-4 overflow-x-auto">
<pre className="text-sm font-mono text-neutral-300">{children}</pre>
</div>
</div>
)
}

5
components/Footer.tsx
View File

@@ -2,8 +2,7 @@
import Link from 'next/link'
import Image from 'next/image'
import { GithubIcon, TwitterIcon } from '@ciphera-net/ui'
import SwissFlagIcon from './SwissFlagIcon'
import { GithubIcon, TwitterIcon, SwissFlagIcon } from '@ciphera-net/ui'
interface FooterProps {
LinkComponent?: any
@@ -47,7 +46,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
if (isAuthenticated) {
return (
<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-7xl mx-auto px-4 sm:px-6 lg:px-8">
<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">
© 2024-{year} Ciphera. All rights reserved.

2
components/IntegrationGuide.tsx
View File

@@ -36,7 +36,7 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
.slice(0, 4)
return (
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
<div className="relative min-h-screen flex flex-col overflow-hidden">
{/* * --- ATMOSPHERE (Background) --- */}
<div className="absolute inset-0 -z-10 pointer-events-none">
<div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />

42
components/LoadingOverlay.tsx
View File

@@ -1,42 +0,0 @@
'use client'
import React, { useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
interface LoadingOverlayProps {
logoSrc?: string
title?: string
}
export default function LoadingOverlay({
logoSrc = "/ciphera_icon_no_margins.png",
title = "Pulse"
}: LoadingOverlayProps) {
const [mounted, setMounted] = useState(false)
useEffect(() => {
setMounted(true)
return () => setMounted(false)
}, [])
if (!mounted) return null
return createPortal(
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-white dark:bg-neutral-950 animate-in fade-in duration-200">
<div className="flex flex-col items-center gap-6">
<div className="flex items-center gap-3">
<img
src={logoSrc}
alt={typeof title === 'string' ? title : "Pulse"}
className="h-12 w-auto object-contain"
/>
<span className="text-3xl tracking-tight text-neutral-900 dark:text-white">
<span className="font-bold">Ciphera</span><span className="font-light">Pulse</span>
</span>
</div>
<div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-brand-orange dark:border-neutral-800 dark:border-t-brand-orange" />
</div>
</div>,
document.body
)
}

24
components/SwissFlagIcon.tsx
View File

@@ -1,24 +0,0 @@
'use client'
import type { SVGProps } from 'react'
// * Swiss flag icon – official proportions (cross 1/6 height). Uses real Swiss federal red.
const SWISS_RED = '#E41E26' // * Official Swiss flag red (federal identity)
export default function SwissFlagIcon(props: SVGProps<SVGSVGElement>) {
const { className, ...rest } = props
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
aria-hidden
className={`shrink-0 ${className ?? ''}`.trim()}
{...rest}
>
<rect width="24" height="24" rx="3" fill={SWISS_RED} />
<rect x="10" y="0" width="4" height="24" fill="#FFF" />
<rect x="0" y="10" width="24" height="4" fill="#FFF" />
</svg>
)
}

6
components/dashboard/Campaigns.tsx
View File

@@ -2,8 +2,8 @@
import { useState, useEffect, useMemo } from 'react'
import Link from 'next/link'
import { formatNumber } from '@/lib/utils/format'
import { Modal, ArrowRightIcon, Button } from '@ciphera-net/ui'
import { formatNumber } from '@ciphera-net/ui'
import { Modal, ArrowRightIcon, Button, Spinner } from '@ciphera-net/ui'
import { ChevronDownIcon, DownloadIcon } from '@ciphera-net/ui'
import { getCampaigns, CampaignStat } from '@/lib/api/stats'
import { getReferrerFavicon, getReferrerIcon, getReferrerDisplayName } from '@/lib/utils/icons'
@@ -293,7 +293,7 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
{isLoadingFull ? (
<div className="py-8 flex flex-col items-center gap-2">
<div className="animate-spin w-6 h-6 border-2 border-neutral-300 dark:border-neutral-700 border-t-brand-orange rounded-full" />
<Spinner />
<p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
</div>
) : (

2
components/dashboard/Chart.tsx
View File

@@ -13,7 +13,7 @@ import {
ReferenceLine,
} from 'recharts'
import type { TooltipProps } from 'recharts'
import { formatNumber, formatDuration, formatUpdatedAgo } from '@/lib/utils/format'
import { formatNumber, formatDuration, formatUpdatedAgo } from '@ciphera-net/ui'
import { ArrowUpRightIcon, ArrowDownRightIcon, BarChartIcon, Select, Button, DownloadIcon } from '@ciphera-net/ui'
import { Checkbox } from '@ciphera-net/ui'

6
components/dashboard/ContentStats.tsx
View File

@@ -1,9 +1,9 @@
'use client'
import { useState, useEffect } from 'react'
import { formatNumber } from '@/lib/utils/format'
import { formatNumber } from '@ciphera-net/ui'
import { TopPage, getTopPages, getEntryPages, getExitPages } from '@/lib/api/stats'
import { Modal, ArrowUpRightIcon, LayoutDashboardIcon } from '@ciphera-net/ui'
import { Modal, ArrowUpRightIcon, LayoutDashboardIcon, Spinner } from '@ciphera-net/ui'
interface ContentStatsProps {
topPages: TopPage[]
@@ -174,7 +174,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
{isLoadingFull ? (
<div className="py-8 flex flex-col items-center gap-2">
<div className="animate-spin w-6 h-6 border-2 border-neutral-300 dark:border-neutral-700 border-t-brand-orange rounded-full" />
<Spinner />
<p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
</div>
) : (

2
components/dashboard/Countries.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import { useState } from 'react'
import { formatNumber } from '@/lib/utils/format'
import { formatNumber } from '@ciphera-net/ui'
import * as Flags from 'country-flag-icons/react/3x2'
import WorldMap from './WorldMap'
import { GlobeIcon } from '@ciphera-net/ui'

2
components/dashboard/ExportModal.tsx
View File

@@ -6,7 +6,7 @@ import * as XLSX from 'xlsx'
import jsPDF from 'jspdf'
import autoTable from 'jspdf-autotable'
import type { DailyStat } from './Chart'
import { formatNumber, formatDuration } from '@/lib/utils/format'
import { formatNumber, formatDuration } from '@ciphera-net/ui'
import { getReferrerDisplayName, mergeReferrersByDisplayName } from '@/lib/utils/icons'
import type { TopPage, TopReferrer, CampaignStat } from '@/lib/api/stats'

2
components/dashboard/GoalStats.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import Link from 'next/link'
import { formatNumber } from '@/lib/utils/format'
import { formatNumber } from '@ciphera-net/ui'
import { BookOpenIcon, ArrowRightIcon } from '@ciphera-net/ui'
import type { GoalCountStat } from '@/lib/api/stats'

6
components/dashboard/Locations.tsx
View File

@@ -1,12 +1,12 @@
'use client'
import { useState, useEffect } from 'react'
import { formatNumber } from '@/lib/utils/format'
import { formatNumber } from '@ciphera-net/ui'
import * as Flags from 'country-flag-icons/react/3x2'
// @ts-ignore
import iso3166 from 'iso-3166-2'
import WorldMap from './WorldMap'
import { Modal, GlobeIcon } from '@ciphera-net/ui'
import { Modal, GlobeIcon, Spinner } from '@ciphera-net/ui'
import { SiTorproject } from 'react-icons/si'
import { FaUserSecret, FaSatellite } from 'react-icons/fa'
import { getCountries, getCities, getRegions } from '@/lib/api/stats'
@@ -289,7 +289,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
{isLoadingFull ? (
<div className="py-8 flex flex-col items-center gap-2">
<div className="animate-spin w-6 h-6 border-2 border-neutral-300 dark:border-neutral-700 border-t-brand-orange rounded-full" />
<Spinner />
<p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
</div>
) : (

6
components/dashboard/TechSpecs.tsx
View File

@@ -1,10 +1,10 @@
'use client'
import { useState, useEffect } from 'react'
import { formatNumber } from '@/lib/utils/format'
import { formatNumber } from '@ciphera-net/ui'
import { getBrowserIcon, getOSIcon, getDeviceIcon } from '@/lib/utils/icons'
import { MdMonitor } from 'react-icons/md'
import { Modal, GridIcon } from '@ciphera-net/ui'
import { Modal, GridIcon, Spinner } from '@ciphera-net/ui'
import { getBrowsers, getOS, getDevices, getScreenResolutions } from '@/lib/api/stats'
interface TechSpecsProps {
@@ -190,7 +190,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
{isLoadingFull ? (
<div className="py-8 flex flex-col items-center gap-2">
<div className="animate-spin w-6 h-6 border-2 border-neutral-300 dark:border-neutral-700 border-t-brand-orange rounded-full" />
<Spinner />
<p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
</div>
) : (

2
components/dashboard/TopPages.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { formatNumber } from '@/lib/utils/format'
import { formatNumber } from '@ciphera-net/ui'
import { LayoutDashboardIcon } from '@ciphera-net/ui'
interface TopPagesProps {

6
components/dashboard/TopReferrers.tsx
View File

@@ -1,9 +1,9 @@
'use client'
import { useState, useEffect } from 'react'
import { formatNumber } from '@/lib/utils/format'
import { formatNumber } from '@ciphera-net/ui'
import { getReferrerDisplayName, getReferrerFavicon, getReferrerIcon, mergeReferrersByDisplayName } from '@/lib/utils/icons'
import { Modal, GlobeIcon } from '@ciphera-net/ui'
import { Modal, GlobeIcon, Spinner } from '@ciphera-net/ui'
import { getTopReferrers, TopReferrer } from '@/lib/api/stats'
interface TopReferrersProps {
@@ -135,7 +135,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
<div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
{isLoadingFull ? (
<div className="py-8 flex flex-col items-center gap-2">
<div className="animate-spin w-6 h-6 border-2 border-neutral-300 dark:border-neutral-700 border-t-brand-orange rounded-full" />
<Spinner />
<p className="text-sm text-neutral-500 dark:text-neutral-400">Loading...</p>
</div>
) : (

2
components/notifications/NotificationCenter.tsx
View File

@@ -7,7 +7,7 @@
import { useEffect, useState, useRef } from 'react'
import Link from 'next/link'
import { listNotifications, markNotificationRead, markAllNotificationsRead, type Notification } from '@/lib/api/notifications'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { getAuthErrorMessage } from '@ciphera-net/ui'
import { formatTimeAgo, getTypeIcon } from '@/lib/utils/notifications'
import { SettingsIcon } from '@ciphera-net/ui'

13
components/settings/OrganizationSettings.tsx
View File

@@ -21,7 +21,7 @@ import { TRAFFIC_TIERS, PLAN_ID_SOLO, getTierIndexForLimit, getLimitForTierIndex
import { getAuditLog, AuditLogEntry, GetAuditLogParams } from '@/lib/api/audit'
import { getNotificationSettings, updateNotificationSettings } from '@/lib/api/notification-settings'
import { toast } from '@ciphera-net/ui'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { getAuthErrorMessage } from '@ciphera-net/ui'
import { motion, AnimatePresence } from 'framer-motion'
import {
AlertTriangleIcon,
@@ -35,6 +35,7 @@ import {
DownloadIcon,
ExternalLinkIcon,
LayoutDashboardIcon,
Spinner,
} from '@ciphera-net/ui'
// * Bell icon for notifications tab
@@ -699,7 +700,7 @@ export default function OrganizationSettings() {
<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 ? (
<div className="flex items-center justify-center py-8">
<div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
<Spinner />
</div>
) : members.length === 0 ? (
<div className="p-8 text-center text-neutral-500">No members found.</div>
@@ -780,7 +781,7 @@ export default function OrganizationSettings() {
{isLoadingSubscription ? (
<div className="flex items-center justify-center py-12">
<div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
<Spinner />
</div>
) : !subscription ? (
<div className="p-8 text-center bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-200 dark:border-neutral-800">
@@ -926,7 +927,7 @@ export default function OrganizationSettings() {
<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 ? (
<div className="flex items-center justify-center py-8">
<div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
<Spinner />
</div>
) : invoices.length === 0 ? (
<div className="p-8 text-center text-neutral-500">No invoices found.</div>
@@ -990,7 +991,7 @@ export default function OrganizationSettings() {
{isLoadingNotificationSettings ? (
<div className="flex items-center justify-center py-12">
<div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
<Spinner />
</div>
) : (
<div className="space-y-4">
@@ -1117,7 +1118,7 @@ export default function OrganizationSettings() {
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden">
{isLoadingAudit ? (
<div className="flex items-center justify-center py-12">
<div className="w-6 h-6 border-2 border-brand-orange/30 border-t-brand-orange rounded-full animate-spin" />
<Spinner />
</div>
) : (auditEntries ?? []).length === 0 ? (
<div className="p-8 text-center text-neutral-500">No audit events found.</div>

2
docs/DESIGN_SYSTEM.md
View File

@@ -285,7 +285,7 @@ Glass card effect with backdrop blur (premium feel):
Orange gradient for emphasized text:
```css
.gradient-text {
@apply bg-gradient-to-r from-brand-orange to-[#E54E00] bg-clip-text text-transparent;
@apply bg-gradient-to-r from-brand-orange to-brand-orange-hover bg-clip-text text-transparent;
}
```

2
lib/api/client.ts
View File

@@ -2,7 +2,7 @@
* HTTP client wrapper for API calls
*/
import { authMessageFromStatus, AUTH_ERROR_MESSAGES } from '@/lib/utils/authErrors'
import { authMessageFromStatus, AUTH_ERROR_MESSAGES } from '@ciphera-net/ui'
/** Request timeout in ms; network errors surface as user-facing "Network error, please try again." */
const FETCH_TIMEOUT_MS = 30_000

2
lib/integration-guides.tsx
View File

@@ -8,7 +8,7 @@
*/
import { type ReactNode } from 'react'
import { CodeBlock } from '@/components/CodeBlock'
import { CodeBlock } from '@ciphera-net/ui'
// * ─── Guide registry ─────────────────────────────────────────────────────────

63
lib/utils/authErrors.ts
View File

@@ -1,63 +0,0 @@
/**
* Auth error message mapping for user-facing copy.
* Maps status codes and error types to safe, actionable messages (no sensitive details).
*/
export const AUTH_ERROR_MESSAGES = {
/** Shown when session/token is expired; prompts re-login. */
SESSION_EXPIRED: 'Session expired, please sign in again.',
/** Shown when credentials are invalid (e.g. wrong password, invalid token). */
INVALID_CREDENTIALS: 'Invalid credentials',
/** Shown on network failure or timeout; prompts retry. */
NETWORK: 'Network error, please try again.',
/** Generic fallback for server/unknown errors. */
GENERIC: 'Something went wrong, please try again.',
} as const
/**
* Returns the user-facing message for a given HTTP status from an API/auth response.
* Used when building ApiError messages and when mapping server-returned error types.
*/
export function authMessageFromStatus(status: number): string {
if (status === 401) return AUTH_ERROR_MESSAGES.SESSION_EXPIRED
if (status === 403) return AUTH_ERROR_MESSAGES.INVALID_CREDENTIALS
if (status >= 500) return AUTH_ERROR_MESSAGES.GENERIC
return AUTH_ERROR_MESSAGES.GENERIC
}
/** Error type returned by auth server actions for mapping to user-facing copy. */
export type AuthErrorType = 'network' | 'expired' | 'invalid' | 'server'
/**
* Maps server-action error type (e.g. from exchangeAuthCode) to user-facing message.
* Used in auth callback so no sensitive details are shown.
*/
export function authMessageFromErrorType(type: AuthErrorType): string {
switch (type) {
case 'expired':
return AUTH_ERROR_MESSAGES.SESSION_EXPIRED
case 'invalid':
return AUTH_ERROR_MESSAGES.INVALID_CREDENTIALS
case 'network':
return AUTH_ERROR_MESSAGES.NETWORK
case 'server':
default:
return AUTH_ERROR_MESSAGES.GENERIC
}
}
/**
* Maps an error (e.g. ApiError, network/abort) to a safe user-facing message.
* Use this when displaying API/auth errors in the UI so expired, invalid, and network
* cases show the correct copy without exposing sensitive details.
*/
export function getAuthErrorMessage(error: unknown): string {
if (!error) return AUTH_ERROR_MESSAGES.GENERIC
const err = error as { status?: number; name?: string; message?: string }
if (typeof err.status === 'number') return authMessageFromStatus(err.status)
if (err.name === 'AbortError') return AUTH_ERROR_MESSAGES.NETWORK
if (err instanceof Error && (err.name === 'TypeError' || /fetch|network|failed to fetch/i.test(err.message || ''))) {
return AUTH_ERROR_MESSAGES.NETWORK
}
return AUTH_ERROR_MESSAGES.GENERIC
}

70
lib/utils/format.ts
View File

@@ -1,70 +0,0 @@
/**
* Format numbers with commas
*/
export function formatNumber(num: number): string {
return new Intl.NumberFormat('en-US').format(num)
}
/**
* Format date to YYYY-MM-DD
*/
export function formatDate(date: Date): string {
return date.toISOString().split('T')[0]
}
/**
* Get date range for last N days
*/
export function getDateRange(days: number): { start: string; end: string } {
const end = new Date()
const start = new Date()
start.setDate(start.getDate() - days)
return {
start: formatDate(start),
end: formatDate(end),
}
}
/**
* Format "updated X ago" for polling indicators (e.g. "Just now", "12 seconds ago")
*/
export function formatUpdatedAgo(timestamp: number): string {
const diff = Math.floor((Date.now() - timestamp) / 1000)
if (diff < 5) return 'Just now'
if (diff < 60) return `${diff} seconds ago`
if (diff < 120) return '1 minute ago'
const minutes = Math.floor(diff / 60)
return `${minutes} minutes ago`
}
/**
* Format relative time (e.g., "2 hours ago")
*/
export function formatRelativeTime(date: string | Date): string {
const d = typeof date === 'string' ? new Date(date) : date
const now = new Date()
const diff = now.getTime() - d.getTime()
const seconds = Math.floor(diff / 1000)
const minutes = Math.floor(seconds / 60)
const hours = Math.floor(minutes / 60)
const days = Math.floor(hours / 24)
if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`
if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`
if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
return 'Just now'
}
/**
* Format duration in seconds to "1m 30s" or "30s"
*/
export function formatDuration(seconds: number): string {
if (!seconds) return '0s'
const m = Math.floor(seconds / 60)
const s = Math.floor(seconds % 60)
if (m > 0) {
return `${m}m ${s}s`
}
return `${s}s`
}

2155
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "pulse-frontend",
"version": "0.6.0-alpha",
"version": "0.7.0-alpha",
"private": true,
"scripts": {
"dev": "next dev",
@@ -10,7 +10,7 @@
"type-check": "tsc --noEmit"
},
"dependencies": {
"@ciphera-net/ui": "^0.0.50",
"@ciphera-net/ui": "^0.0.57",
"@ducanh2912/next-pwa": "^10.2.9",
"@radix-ui/react-icons": "^1.3.0",
"axios": "^1.13.2",

37
styles/globals.css
View File

@@ -19,43 +19,8 @@
}
}
@layer components {
/* * TODO: Move these shared utilities to @ciphera-net/ui to avoid duplication with website */
/* * Glass Card Effect - Crucial for the "Premium" feel */
.card-glass {
@apply bg-white/80 dark:bg-neutral-900/80;
@apply backdrop-blur-xl;
@apply border border-neutral-200/50 dark:border-neutral-800/50;
@apply rounded-2xl;
@apply transition-all duration-300 ease-out;
}
/* * Gradient Text for Headlines */
.gradient-text {
@apply bg-gradient-to-r from-brand-orange to-[#E54E00] bg-clip-text text-transparent;
}
/* * The "Pulse" Badge */
.badge-primary {
@apply inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wider;
@apply bg-brand-orange/10 text-brand-orange border border-brand-orange/20;
}
}
@layer utilities {
/* * The Background Grid */
.bg-grid-pattern {
background-image: radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0);
background-size: 32px 32px;
}
/* * Glow Effects */
.glow-orange {
box-shadow: 0 0 40px -10px rgba(253, 94, 15, 0.5);
}
/* * 3D Transform Utilities */
/* * 3D Transform Utilities - Pulse-specific */
.perspective-1000 {
perspective: 1000px;
}