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

Initial commit: Analytics frontend implementation

Browse Source
This commit is contained in:
Usman Baig
2026-01-16 13:14:19 +01:00
commit 8e10a05eb1
28 changed files with 1778 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
.gitignore vendored Normal file
View File

@@ -0,0 +1,36 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
.env
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

76
README.md Normal file
View File

@@ -0,0 +1,76 @@
# Analytics Frontend
[![License: Proprietary](https://img.shields.io/badge/License-Proprietary-red.svg)](#)
[![Built with Next.js](https://img.shields.io/badge/Built%20with-Next.js-blue.svg?logo=next.js&logoColor=white)](https://nextjs.org/)
Analytics Frontend is the dashboard interface for Ciphera Analytics. It provides a simple, intuitive interface for managing sites and viewing analytics data.
## Features
- **Privacy-First Dashboard**: Simple, clean interface for viewing analytics
- **Site Management**: Create, edit, and delete sites
- **Real-time Stats**: Live visitor counts and real-time updates
- **Analytics Views**: Pageviews, visitors, top pages, referrers, countries
- **Dark Mode**: Full dark mode support
- **Responsive Design**: Works on desktop and mobile
## Technology Stack
- **Framework**: Next.js 16+ (App Router)
- **Styling**: Tailwind CSS with Ciphera design tokens
- **Charts**: Recharts for data visualization
- **Authentication**: OAuth flow with ciphera-auth
- **UI Components**: @ciphera-net/ui for shared components
## Getting Started
### Prerequisites
- Node.js 18+
- npm or yarn
### Installation
1. Install dependencies:
```bash
npm install
```
2. Set up environment variables (create `.env.local` file):
```env
NEXT_PUBLIC_API_URL=http://localhost:8082
NEXT_PUBLIC_AUTH_URL=http://localhost:3000
NEXT_PUBLIC_AUTH_API_URL=http://localhost:8081
NEXT_PUBLIC_APP_URL=http://localhost:3003
```
3. Run the development server:
```bash
npm run dev
```
4. Open [http://localhost:3003](http://localhost:3003) in your browser.
### Build for Production
```bash
npm run build
npm start
```
## Design System
The frontend follows the Ciphera design language:
- **Brand Color**: Orange (#FD5E0F) - used as accent only
- **Neutral Colors**: Full scale (50-900) for UI elements
- **Dark Mode**: Full support with class-based switching
- **Font**: Plus Jakarta Sans
- **Design Patterns**:
- Rounded corners (rounded-xl, rounded-3xl)
- Smooth transitions (duration-200, duration-300)
- Shadow effects with brand-orange accents
## License
Proprietary - All rights reserved

139
app/auth/callback/page.tsx Normal file
View File

@@ -0,0 +1,139 @@
'use client'
import { useEffect, useState, Suspense, useRef } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { useAuth } from '@/lib/auth/context'
import { AUTH_URL } from '@/lib/api/client'
function AuthCallbackContent() {
const router = useRouter()
const searchParams = useSearchParams()
const { login } = useAuth()
const [error, setError] = useState<string | null>(null)
const processedRef = useRef(false)
useEffect(() => {
if (processedRef.current) return
const token = searchParams.get('token')
const refreshToken = searchParams.get('refresh_token')
if (token && refreshToken) {
processedRef.current = true
try {
const payload = JSON.parse(atob(token.split('.')[1]))
login(token, refreshToken, {
id: payload.sub,
email: payload.email || 'user@ciphera.net',
totp_enabled: payload.totp_enabled || false
})
const returnTo = searchParams.get('returnTo') || '/'
router.push(returnTo)
} catch (e) {
setError('Invalid token received')
}
return
}
const code = searchParams.get('code')
const state = searchParams.get('state')
if (!code || !state) return
processedRef.current = true
const storedState = localStorage.getItem('oauth_state')
const codeVerifier = localStorage.getItem('oauth_code_verifier')
if (state !== storedState) {
console.error('State mismatch', { received: state, stored: storedState })
setError('Invalid state')
return
}
const exchangeCode = async () => {
try {
const authApiUrl = process.env.NEXT_PUBLIC_AUTH_API_URL || 'http://localhost:8081'
const res = await fetch(`${authApiUrl}/oauth/token`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
grant_type: 'authorization_code',
code,
client_id: 'analytics-app',
redirect_uri: window.location.origin + '/auth/callback',
code_verifier: codeVerifier,
}),
})
if (!res.ok) {
const data = await res.json()
throw new Error(data.error || 'Failed to exchange token')
}
const data = await res.json()
const payload = JSON.parse(atob(data.access_token.split('.')[1]))
login(data.access_token, data.refresh_token, {
id: payload.sub,
email: payload.email || 'user@ciphera.net',
totp_enabled: payload.totp_enabled || false
})
localStorage.removeItem('oauth_state')
localStorage.removeItem('oauth_code_verifier')
router.push('/')
} catch (err: any) {
setError(err.message)
}
}
exchangeCode()
}, [searchParams, login, router])
if (error) {
return (
<div className="flex min-h-screen items-center justify-center p-4">
<div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4 text-red-500">
Error: {error}
<div className="mt-4">
<button
onClick={() => window.location.href = `${AUTH_URL}/login`}
className="text-sm underline"
>
Back to Login
</button>
</div>
</div>
</div>
)
}
return (
<div className="flex min-h-screen items-center justify-center p-4">
<div className="text-center">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-neutral-800 mx-auto mb-4"></div>
<p className="text-neutral-600 dark:text-neutral-400">Completing sign in...</p>
</div>
</div>
)
}
export default function AuthCallback() {
return (
<Suspense fallback={
<div className="flex min-h-screen items-center justify-center p-4">
<div className="text-center">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-neutral-800 mx-auto mb-4"></div>
<p className="text-neutral-600 dark:text-neutral-400">Loading...</p>
</div>
</div>
}>
<AuthCallbackContent />
</Suspense>
)
}

56
app/layout.tsx Normal file
View File

@@ -0,0 +1,56 @@
import Header from '@ciphera-net/ui/Header'
import Footer from '@ciphera-net/ui/Footer'
import { AuthProvider } from '@/lib/auth/context'
import { ThemeProviders } from '@ciphera-net/ui'
import { Toaster } from 'sonner'
import type { Metadata } from 'next'
import { Plus_Jakarta_Sans } from 'next/font/google'
import '../styles/globals.css'
const plusJakartaSans = Plus_Jakarta_Sans({
subsets: ['latin'],
variable: '--font-plus-jakarta-sans',
display: 'swap',
})
export const metadata: Metadata = {
title: 'Ciphera Analytics - Privacy-First Web Analytics',
description: 'Simple, privacy-focused web analytics. No cookies, no tracking. GDPR compliant.',
keywords: ['analytics', 'privacy', 'web analytics', 'ciphera', 'GDPR'],
authors: [{ name: 'Ciphera' }],
creator: 'Ciphera',
publisher: 'Ciphera',
icons: {
icon: '/ciphera_icon_no_margins.png',
shortcut: '/ciphera_icon_no_margins.png',
apple: '/ciphera_icon_no_margins.png',
},
robots: {
index: true,
follow: true,
},
themeColor: '#FD5E0F',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={plusJakartaSans.variable} suppressHydrationWarning>
<body className="antialiased min-h-screen flex flex-col bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-50">
<ThemeProviders>
<AuthProvider>
<Header />
<main className="flex-1 pt-24 pb-8">
{children}
</main>
<Footer />
<Toaster position="top-center" richColors closeButton />
</AuthProvider>
</ThemeProviders>
</body>
</html>
)
}

42
app/page.tsx Normal file
View File

@@ -0,0 +1,42 @@
'use client'
import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { useAuth } from '@/lib/auth/context'
import { listSites } from '@/lib/api/sites'
import type { Site } from '@/lib/api/sites'
import LoadingOverlay from '@/components/LoadingOverlay'
import SiteList from '@/components/sites/SiteList'
export default function HomePage() {
const { user, loading } = useAuth()
const router = useRouter()
useEffect(() => {
if (!loading && !user) {
router.push('/login')
}
}, [user, loading, router])
if (loading) {
return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Ciphera Analytics" />
}
if (!user) {
return null
}
return (
<div className="container mx-auto px-4 py-8">
<div className="mb-8">
<h1 className="text-3xl font-bold text-neutral-900 dark:text-white mb-2">
Your Sites
</h1>
<p className="text-neutral-600 dark:text-neutral-400">
Manage your analytics sites and view insights
</p>
</div>
<SiteList />
</div>
)
}

140
app/sites/[id]/page.tsx Normal file
View File

@@ -0,0 +1,140 @@
'use client'
import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { getSite, type Site } from '@/lib/api/sites'
import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, getCountries } from '@/lib/api/stats'
import { formatNumber, getDateRange } from '@/lib/utils/format'
import { toast } from 'sonner'
import LoadingOverlay from '@/components/LoadingOverlay'
import StatsCard from '@/components/dashboard/StatsCard'
import RealtimeVisitors from '@/components/dashboard/RealtimeVisitors'
import TopPages from '@/components/dashboard/TopPages'
import TopReferrers from '@/components/dashboard/TopReferrers'
import Countries from '@/components/dashboard/Countries'
import Chart from '@/components/dashboard/Chart'
export default function SiteDashboardPage() {
const params = useParams()
const router = useRouter()
const siteId = params.id as string
const [site, setSite] = useState<Site | null>(null)
const [loading, setLoading] = useState(true)
const [stats, setStats] = useState({ pageviews: 0, visitors: 0 })
const [realtime, setRealtime] = useState(0)
const [dailyStats, setDailyStats] = useState<any[]>([])
const [topPages, setTopPages] = useState<any[]>([])
const [topReferrers, setTopReferrers] = useState<any[]>([])
const [countries, setCountries] = useState<any[]>([])
const [dateRange, setDateRange] = useState(getDateRange(30))
useEffect(() => {
loadData()
const interval = setInterval(() => {
loadRealtime()
}, 30000) // Update every 30 seconds
return () => clearInterval(interval)
}, [siteId, dateRange])
const loadData = async () => {
try {
setLoading(true)
const [siteData, statsData, realtimeData, dailyData, pagesData, referrersData, countriesData] = await Promise.all([
getSite(siteId),
getStats(siteId, dateRange.start, dateRange.end),
getRealtime(siteId),
getDailyStats(siteId, dateRange.start, dateRange.end),
getTopPages(siteId, dateRange.start, dateRange.end, 10),
getTopReferrers(siteId, dateRange.start, dateRange.end, 10),
getCountries(siteId, dateRange.start, dateRange.end, 10),
])
setSite(siteData)
setStats(statsData)
setRealtime(realtimeData.visitors)
setDailyStats(dailyData)
setTopPages(pagesData)
setTopReferrers(referrersData)
setCountries(countriesData)
} catch (error: any) {
toast.error('Failed to load data: ' + (error.message || 'Unknown error'))
} finally {
setLoading(false)
}
}
const loadRealtime = async () => {
try {
const data = await getRealtime(siteId)
setRealtime(data.visitors)
} catch (error) {
// Silently fail for realtime updates
}
}
if (loading) {
return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Ciphera Analytics" />
}
if (!site) {
return (
<div className="container mx-auto px-4 py-8">
<p className="text-neutral-600 dark:text-neutral-400">Site not found</p>
</div>
)
}
return (
<div className="container mx-auto px-4 py-8">
<div className="mb-8">
<div className="flex items-center justify-between mb-4">
<div>
<h1 className="text-3xl font-bold text-neutral-900 dark:text-white mb-2">
{site.name}
</h1>
<p className="text-neutral-600 dark:text-neutral-400">
{site.domain}
</p>
</div>
<div className="flex gap-2">
<select
value={dateRange.start === getDateRange(7).start ? '7' : dateRange.start === getDateRange(30).start ? '30' : 'custom'}
onChange={(e) => {
if (e.target.value === '7') setDateRange(getDateRange(7))
else if (e.target.value === '30') setDateRange(getDateRange(30))
}}
className="btn-secondary text-sm"
>
<option value="7">Last 7 days</option>
<option value="30">Last 30 days</option>
<option value="custom">Custom</option>
</select>
<button
onClick={() => router.push(`/sites/${siteId}/settings`)}
className="btn-secondary text-sm"
>
Settings
</button>
</div>
</div>
</div>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-8">
<StatsCard title="Pageviews" value={formatNumber(stats.pageviews)} />
<StatsCard title="Visitors" value={formatNumber(stats.visitors)} />
<RealtimeVisitors count={realtime} />
<StatsCard title="Bounce Rate" value="-" />
</div>
<div className="grid gap-6 lg:grid-cols-2 mb-8">
<Chart data={dailyStats} />
<TopPages pages={topPages} />
</div>
<div className="grid gap-6 lg:grid-cols-2">
<TopReferrers referrers={topReferrers} />
<Countries countries={countries} />
</div>
</div>
)
}

154
app/sites/[id]/settings/page.tsx Normal file
View File

@@ -0,0 +1,154 @@
'use client'
import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { getSite, updateSite, type Site } from '@/lib/api/sites'
import { toast } from 'sonner'
import LoadingOverlay from '@/components/LoadingOverlay'
import { APP_URL } from '@/lib/api/client'
export default function SiteSettingsPage() {
const params = useParams()
const router = useRouter()
const siteId = params.id as string
const [site, setSite] = useState<Site | null>(null)
const [loading, setLoading] = useState(true)
const [saving, setSaving] = useState(false)
const [formData, setFormData] = useState({
name: '',
})
const [scriptCopied, setScriptCopied] = useState(false)
useEffect(() => {
loadSite()
}, [siteId])
const loadSite = async () => {
try {
setLoading(true)
const data = await getSite(siteId)
setSite(data)
setFormData({ name: data.name })
} catch (error: any) {
toast.error('Failed to load site: ' + (error.message || 'Unknown error'))
} finally {
setLoading(false)
}
}
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setSaving(true)
try {
await updateSite(siteId, formData)
toast.success('Site updated successfully')
loadSite()
} catch (error: any) {
toast.error('Failed to update site: ' + (error.message || 'Unknown error'))
} finally {
setSaving(false)
}
}
const copyScript = () => {
const script = `<script defer data-domain="${site?.domain}" src="${APP_URL}/script.js"></script>`
navigator.clipboard.writeText(script)
setScriptCopied(true)
toast.success('Script copied to clipboard')
setTimeout(() => setScriptCopied(false), 2000)
}
if (loading) {
return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Ciphera Analytics" />
}
if (!site) {
return (
<div className="container mx-auto px-4 py-8">
<p className="text-neutral-600 dark:text-neutral-400">Site not found</p>
</div>
)
}
return (
<div className="container mx-auto px-4 py-8 max-w-2xl">
<h1 className="text-3xl font-bold mb-8 text-neutral-900 dark:text-white">
Site Settings
</h1>
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 mb-6">
<h2 className="text-xl font-semibold mb-4 text-neutral-900 dark:text-white">
Tracking Script
</h2>
<p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
Add this script to your website to start tracking visitors.
</p>
<div className="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-4 mb-4">
<code className="text-sm text-neutral-900 dark:text-white break-all">
{`<script defer data-domain="${site.domain}" src="${APP_URL}/script.js"></script>`}
</code>
</div>
<button
onClick={copyScript}
className="btn-primary"
>
{scriptCopied ? 'Copied!' : 'Copy Script'}
</button>
</div>
<form onSubmit={handleSubmit} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
<h2 className="text-xl font-semibold mb-4 text-neutral-900 dark:text-white">
Site Information
</h2>
<div className="mb-4">
<label htmlFor="name" className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
Site Name
</label>
<input
type="text"
id="name"
required
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
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"
/>
</div>
<div className="mb-6">
<label className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
Domain
</label>
<input
type="text"
value={site.domain}
disabled
className="w-full px-4 py-2 border border-neutral-300 dark:border-neutral-700 rounded-lg bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 cursor-not-allowed"
/>
<p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
Domain cannot be changed after creation
</p>
</div>
<div className="flex gap-4">
<button
type="submit"
disabled={saving}
className="btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
>
{saving ? 'Saving...' : 'Save Changes'}
</button>
<button
type="button"
onClick={() => router.back()}
className="btn-secondary"
>
Cancel
</button>
</div>
</form>
</div>
)
}

90
app/sites/new/page.tsx Normal file
View File

@@ -0,0 +1,90 @@
'use client'
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { createSite } from '@/lib/api/sites'
import { toast } from 'sonner'
export default function NewSitePage() {
const router = useRouter()
const [loading, setLoading] = useState(false)
const [formData, setFormData] = useState({
name: '',
domain: '',
})
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setLoading(true)
try {
const site = await createSite(formData)
toast.success('Site created successfully')
router.push(`/sites/${site.id}`)
} catch (error: any) {
toast.error('Failed to create site: ' + (error.message || 'Unknown error'))
} finally {
setLoading(false)
}
}
return (
<div className="container mx-auto px-4 py-8 max-w-2xl">
<h1 className="text-3xl font-bold mb-8 text-neutral-900 dark:text-white">
Create New Site
</h1>
<form onSubmit={handleSubmit} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
<div className="mb-4">
<label htmlFor="name" className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
Site Name
</label>
<input
type="text"
id="name"
required
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
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"
placeholder="My Website"
/>
</div>
<div className="mb-6">
<label htmlFor="domain" className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
Domain
</label>
<input
type="text"
id="domain"
required
value={formData.domain}
onChange={(e) => setFormData({ ...formData, domain: e.target.value.toLowerCase().trim() })}
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"
placeholder="example.com"
/>
<p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
Enter your domain without http:// or https://
</p>
</div>
<div className="flex gap-4">
<button
type="submit"
disabled={loading}
className="btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? 'Creating...' : 'Create Site'}
</button>
<button
type="button"
onClick={() => router.back()}
className="btn-secondary"
>
Cancel
</button>
</div>
</form>
</div>
)
}

28
components/LoadingOverlay.tsx Normal file
View File

@@ -0,0 +1,28 @@
'use client'
import Image from 'next/image'
interface LoadingOverlayProps {
logoSrc: string
title: string
}
export default function LoadingOverlay({ logoSrc, title }: LoadingOverlayProps) {
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-white/80 dark:bg-neutral-950/80 backdrop-blur-sm">
<div className="text-center">
<div className="mb-4 flex justify-center">
<Image
src={logoSrc}
alt={title}
width={64}
height={64}
className="animate-pulse"
/>
</div>
<div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-brand-orange mx-auto mb-4"></div>
<p className="text-neutral-600 dark:text-neutral-400">Loading...</p>
</div>
</div>
)
}

44
components/dashboard/Chart.tsx Normal file
View File

@@ -0,0 +1,44 @@
'use client'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
interface ChartProps {
data: Array<{ date: string; pageviews: number; visitors: number }>
}
export default function Chart({ data }: ChartProps) {
const chartData = data.map(item => ({
date: new Date(item.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
pageviews: item.pageviews,
visitors: item.visitors,
}))
return (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
<h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
Pageviews Over Time
</h3>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={chartData}>
<CartesianGrid strokeDasharray="3 3" stroke="#e5e5e5" />
<XAxis dataKey="date" stroke="#737373" />
<YAxis stroke="#737373" />
<Tooltip
contentStyle={{
backgroundColor: 'white',
border: '1px solid #e5e5e5',
borderRadius: '8px',
}}
/>
<Line
type="monotone"
dataKey="pageviews"
stroke="#FD5E0F"
strokeWidth={2}
dot={{ fill: '#FD5E0F' }}
/>
</LineChart>
</ResponsiveContainer>
</div>
)
}

40
components/dashboard/Countries.tsx Normal file
View File

@@ -0,0 +1,40 @@
'use client'
import { formatNumber } from '@/lib/utils/format'
interface CountriesProps {
countries: Array<{ country: string; pageviews: number }>
}
export default function Countries({ countries }: CountriesProps) {
if (countries.length === 0) {
return (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
<h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
Countries
</h3>
<p className="text-neutral-600 dark:text-neutral-400">No data available</p>
</div>
)
}
return (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
<h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
Countries
</h3>
<div className="space-y-3">
{countries.map((country, index) => (
<div key={index} className="flex items-center justify-between">
<div className="flex-1 truncate text-neutral-900 dark:text-white">
{country.country}
</div>
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
{formatNumber(country.pageviews)}
</div>
</div>
))}
</div>
</div>
)
}

21
components/dashboard/RealtimeVisitors.tsx Normal file
View File

@@ -0,0 +1,21 @@
'use client'
interface RealtimeVisitorsProps {
count: number
}
export default function RealtimeVisitors({ count }: RealtimeVisitorsProps) {
return (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
<div className="flex items-center justify-between mb-2">
<div className="text-sm text-neutral-600 dark:text-neutral-400">
Real-time Visitors
</div>
<div className="h-2 w-2 bg-green-500 rounded-full animate-pulse"></div>
</div>
<div className="text-3xl font-bold text-neutral-900 dark:text-white">
{count}
</div>
</div>
)
}

19
components/dashboard/StatsCard.tsx Normal file
View File

@@ -0,0 +1,19 @@
'use client'
interface StatsCardProps {
title: string
value: string
}
export default function StatsCard({ title, value }: StatsCardProps) {
return (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
<div className="text-sm text-neutral-600 dark:text-neutral-400 mb-2">
{title}
</div>
<div className="text-3xl font-bold text-neutral-900 dark:text-white">
{value}
</div>
</div>
)
}

40
components/dashboard/TopPages.tsx Normal file
View File

@@ -0,0 +1,40 @@
'use client'
import { formatNumber } from '@/lib/utils/format'
interface TopPagesProps {
pages: Array<{ path: string; pageviews: number }>
}
export default function TopPages({ pages }: TopPagesProps) {
if (pages.length === 0) {
return (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
<h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
Top Pages
</h3>
<p className="text-neutral-600 dark:text-neutral-400">No data available</p>
</div>
)
}
return (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
<h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
Top Pages
</h3>
<div className="space-y-3">
{pages.map((page, index) => (
<div key={index} className="flex items-center justify-between">
<div className="flex-1 truncate text-neutral-900 dark:text-white">
{page.path}
</div>
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
{formatNumber(page.pageviews)}
</div>
</div>
))}
</div>
</div>
)
}

40
components/dashboard/TopReferrers.tsx Normal file
View File

@@ -0,0 +1,40 @@
'use client'
import { formatNumber } from '@/lib/utils/format'
interface TopReferrersProps {
referrers: Array<{ referrer: string; pageviews: number }>
}
export default function TopReferrers({ referrers }: TopReferrersProps) {
if (referrers.length === 0) {
return (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
<h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
Top Referrers
</h3>
<p className="text-neutral-600 dark:text-neutral-400">No data available</p>
</div>
)
}
return (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
<h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
Top Referrers
</h3>
<div className="space-y-3">
{referrers.map((ref, index) => (
<div key={index} className="flex items-center justify-between">
<div className="flex-1 truncate text-neutral-900 dark:text-white">
{ref.referrer}
</div>
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
{formatNumber(ref.pageviews)}
</div>
</div>
))}
</div>
</div>
)
}

102
components/sites/SiteList.tsx Normal file
View File

@@ -0,0 +1,102 @@
'use client'
import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { listSites, deleteSite, type Site } from '@/lib/api/sites'
import { toast } from 'sonner'
import LoadingOverlay from '../LoadingOverlay'
export default function SiteList() {
const [sites, setSites] = useState<Site[]>([])
const [loading, setLoading] = useState(true)
const router = useRouter()
useEffect(() => {
loadSites()
}, [])
const loadSites = async () => {
try {
setLoading(true)
const data = await listSites()
setSites(data)
} catch (error: any) {
toast.error('Failed to load sites: ' + (error.message || 'Unknown error'))
} finally {
setLoading(false)
}
}
const handleDelete = async (id: string) => {
if (!confirm('Are you sure you want to delete this site? This action cannot be undone.')) {
return
}
try {
await deleteSite(id)
toast.success('Site deleted successfully')
loadSites()
} catch (error: any) {
toast.error('Failed to delete site: ' + (error.message || 'Unknown error'))
}
}
if (loading) {
return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Ciphera Analytics" />
}
if (sites.length === 0) {
return (
<div className="text-center py-12">
<p className="text-neutral-600 dark:text-neutral-400 mb-4">No sites yet. Create your first site to get started.</p>
<button
onClick={() => router.push('/sites/new')}
className="btn-primary"
>
Create Site
</button>
</div>
)
}
return (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{sites.map((site) => (
<div
key={site.id}
className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 hover:shadow-lg transition-shadow"
>
<h3 className="text-xl font-semibold mb-2 text-neutral-900 dark:text-white">
{site.name}
</h3>
<p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
{site.domain}
</p>
<div className="flex gap-2">
<button
onClick={() => router.push(`/sites/${site.id}`)}
className="btn-primary flex-1 text-sm"
>
View Dashboard
</button>
<button
onClick={() => handleDelete(site.id)}
className="btn-secondary text-sm px-4"
>
Delete
</button>
</div>
</div>
))}
<button
onClick={() => router.push('/sites/new')}
className="bg-white dark:bg-neutral-900 border-2 border-dashed border-neutral-300 dark:border-neutral-700 rounded-xl p-6 hover:border-brand-orange transition-colors text-neutral-600 dark:text-neutral-400"
>
<div className="text-center">
<div className="text-2xl mb-2">+</div>
<div>Add New Site</div>
</div>
</button>
</div>
)
}

164
lib/api/client.ts Normal file
View File

@@ -0,0 +1,164 @@
/**
* HTTP client wrapper for API calls
*/
export const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8082'
export const AUTH_URL = process.env.NEXT_PUBLIC_AUTH_URL || 'http://localhost:3000'
export const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003'
export const AUTH_API_URL = process.env.NEXT_PUBLIC_AUTH_API_URL || 'http://localhost:8081'
export function getLoginUrl(redirectPath = '/auth/callback') {
const redirectUri = encodeURIComponent(`${APP_URL}${redirectPath}`)
return `${AUTH_URL}/login?client_id=analytics-app&redirect_uri=${redirectUri}&response_type=code`
}
export function getSignupUrl(redirectPath = '/auth/callback') {
const redirectUri = encodeURIComponent(`${APP_URL}${redirectPath}`)
return `${AUTH_URL}/signup?client_id=analytics-app&redirect_uri=${redirectUri}&response_type=code`
}
export class ApiError extends Error {
status: number
constructor(message: string, status: number) {
super(message)
this.status = status
}
}
// * Mutex for token refresh
let isRefreshing = false
let refreshSubscribers: ((token: string) => void)[] = []
function subscribeToTokenRefresh(cb: (token: string) => void) {
refreshSubscribers.push(cb)
}
function onRefreshed(token: string) {
refreshSubscribers.map((cb) => cb(token))
refreshSubscribers = []
}
/**
* Base API client with error handling
*/
async function apiRequest<T>(
endpoint: string,
options: RequestInit = {}
): Promise<T> {
// * Determine base URL
const isAuthRequest = endpoint.startsWith('/auth')
const baseUrl = isAuthRequest ? AUTH_API_URL : API_URL
const url = `${baseUrl}/api/v1${endpoint}`
const headers: HeadersInit = {
'Content-Type': 'application/json',
...options.headers,
}
// Inject Auth Token if available (Client-side only)
if (typeof window !== 'undefined') {
const token = localStorage.getItem('token')
if (token) {
(headers as any)['Authorization'] = `Bearer ${token}`
}
}
const response = await fetch(url, {
...options,
headers,
})
if (!response.ok) {
if (response.status === 401) {
// * Attempt Token Refresh if 401
if (typeof window !== 'undefined') {
const refreshToken = localStorage.getItem('refreshToken')
// * Prevent infinite loop: Don't refresh if the failed request WAS a refresh request
if (refreshToken && !endpoint.includes('/auth/refresh')) {
if (isRefreshing) {
// * If refresh is already in progress, wait for it to complete
return new Promise((resolve, reject) => {
subscribeToTokenRefresh(async (newToken) => {
// Retry original request with new token
const newHeaders = {
...headers,
'Authorization': `Bearer ${newToken}`,
}
try {
const retryResponse = await fetch(url, {
...options,
headers: newHeaders,
})
if (retryResponse.ok) {
resolve(retryResponse.json())
} else {
reject(new ApiError('Retry failed', retryResponse.status))
}
} catch (e) {
reject(e)
}
})
})
}
isRefreshing = true
try {
const refreshRes = await fetch(`${AUTH_API_URL}/api/v1/auth/refresh`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
refresh_token: refreshToken,
}),
})
if (refreshRes.ok) {
const data = await refreshRes.json()
localStorage.setItem('token', data.access_token)
localStorage.setItem('refreshToken', data.refresh_token) // Rotation
// Notify waiting requests
onRefreshed(data.access_token)
// * Retry original request with new token
const newHeaders = {
...headers,
'Authorization': `Bearer ${data.access_token}`,
}
const retryResponse = await fetch(url, {
...options,
headers: newHeaders,
})
if (retryResponse.ok) {
return retryResponse.json()
}
} else {
// * Refresh failed, logout
localStorage.removeItem('token')
localStorage.removeItem('refreshToken')
localStorage.removeItem('user')
}
} catch (e) {
// * Network error during refresh
throw e
} finally {
isRefreshing = false
}
}
}
}
const errorBody = await response.json().catch(() => ({
error: 'Unknown error',
message: `HTTP ${response.status}: ${response.statusText}`,
}))
throw new ApiError(errorBody.message || errorBody.error || 'Request failed', response.status)
}
return response.json()
}
export const authFetch = apiRequest
export default apiRequest

48
lib/api/sites.ts Normal file
View File

@@ -0,0 +1,48 @@
import apiRequest from './client'
export interface Site {
id: string
user_id: string
domain: string
name: string
created_at: string
updated_at: string
}
export interface CreateSiteRequest {
domain: string
name: string
}
export interface UpdateSiteRequest {
name: string
}
export async function listSites(): Promise<Site[]> {
const response = await apiRequest<{ sites: Site[] }>('/sites')
return response.sites
}
export async function getSite(id: string): Promise<Site> {
return apiRequest<Site>(`/sites/${id}`)
}
export async function createSite(data: CreateSiteRequest): Promise<Site> {
return apiRequest<Site>('/sites', {
method: 'POST',
body: JSON.stringify(data),
})
}
export async function updateSite(id: string, data: UpdateSiteRequest): Promise<Site> {
return apiRequest<Site>(`/sites/${id}`, {
method: 'PUT',
body: JSON.stringify(data),
})
}
export async function deleteSite(id: string): Promise<void> {
await apiRequest(`/sites/${id}`, {
method: 'DELETE',
})
}

74
lib/api/stats.ts Normal file
View File

@@ -0,0 +1,74 @@
import apiRequest from './client'
export interface Stats {
pageviews: number
visitors: number
}
export interface TopPage {
path: string
pageviews: number
}
export interface TopReferrer {
referrer: string
pageviews: number
}
export interface CountryStat {
country: string
pageviews: number
}
export interface DailyStat {
date: string
pageviews: number
visitors: number
}
export interface RealtimeStats {
visitors: number
}
export async function getStats(siteId: string, startDate?: string, endDate?: string): Promise<Stats> {
const params = new URLSearchParams()
if (startDate) params.append('start_date', startDate)
if (endDate) params.append('end_date', endDate)
const query = params.toString()
return apiRequest<Stats>(`/sites/${siteId}/stats${query ? `?${query}` : ''}`)
}
export async function getRealtime(siteId: string): Promise<RealtimeStats> {
return apiRequest<RealtimeStats>(`/sites/${siteId}/realtime`)
}
export async function getTopPages(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<TopPage[]> {
const params = new URLSearchParams()
if (startDate) params.append('start_date', startDate)
if (endDate) params.append('end_date', endDate)
params.append('limit', limit.toString())
return apiRequest<{ pages: TopPage[] }>(`/sites/${siteId}/pages?${params.toString()}`).then(r => r.pages)
}
export async function getTopReferrers(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<TopReferrer[]> {
const params = new URLSearchParams()
if (startDate) params.append('start_date', startDate)
if (endDate) params.append('end_date', endDate)
params.append('limit', limit.toString())
return apiRequest<{ referrers: TopReferrer[] }>(`/sites/${siteId}/referrers?${params.toString()}`).then(r => r.referrers)
}
export async function getCountries(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<CountryStat[]> {
const params = new URLSearchParams()
if (startDate) params.append('start_date', startDate)
if (endDate) params.append('end_date', endDate)
params.append('limit', limit.toString())
return apiRequest<{ countries: CountryStat[] }>(`/sites/${siteId}/countries?${params.toString()}`).then(r => r.countries)
}
export async function getDailyStats(siteId: string, startDate?: string, endDate?: string): Promise<DailyStat[]> {
const params = new URLSearchParams()
if (startDate) params.append('start_date', startDate)
if (endDate) params.append('end_date', endDate)
return apiRequest<{ stats: DailyStat[] }>(`/sites/${siteId}/daily?${params.toString()}`).then(r => r.stats)
}

114
lib/auth/context.tsx Normal file
View File

@@ -0,0 +1,114 @@
'use client'
import React, { createContext, useContext, useEffect, useState, useCallback } from 'react'
import { useRouter } from 'next/navigation'
import apiRequest from '@/lib/api/client'
import LoadingOverlay from '@/components/LoadingOverlay'
interface User {
id: string
email: string
totp_enabled: boolean
}
interface AuthContextType {
user: User | null
loading: boolean
login: (token: string, refreshToken: string, user: User) => void
logout: () => void
refresh: () => Promise<void>
refreshSession: () => Promise<void>
}
const AuthContext = createContext<AuthContextType>({
user: null,
loading: true,
login: () => {},
logout: () => {},
refresh: async () => {},
refreshSession: async () => {},
})
export function AuthProvider({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState<User | null>(null)
const [loading, setLoading] = useState(true)
const [isLoggingOut, setIsLoggingOut] = useState(false)
const router = useRouter()
const login = (token: string, refreshToken: string, userData: User) => {
localStorage.setItem('token', token)
localStorage.setItem('refreshToken', refreshToken)
localStorage.setItem('user', JSON.stringify(userData))
setUser(userData)
router.refresh()
}
const logout = useCallback(() => {
setIsLoggingOut(true)
localStorage.removeItem('token')
localStorage.removeItem('refreshToken')
localStorage.removeItem('user')
setTimeout(() => {
window.location.href = '/'
}, 500)
}, [])
const refresh = useCallback(async () => {
try {
const userData = await apiRequest<User>('/auth/user/me')
setUser(userData)
localStorage.setItem('user', JSON.stringify(userData))
} catch (e) {
console.error('Failed to refresh user data', e)
const savedUser = localStorage.getItem('user')
if (savedUser && !user) {
try { setUser(JSON.parse(savedUser)) } catch {}
}
}
router.refresh()
}, [router, user])
const refreshSession = useCallback(async () => {
await refresh()
}, [refresh])
// Initial load
useEffect(() => {
const init = async () => {
const token = localStorage.getItem('token')
const savedUser = localStorage.getItem('user')
if (token) {
// Optimistically set from local storage first
if (savedUser) {
try {
setUser(JSON.parse(savedUser))
} catch (e) {
localStorage.removeItem('user')
}
}
// Then fetch fresh data
try {
const userData = await apiRequest<User>('/auth/user/me')
setUser(userData)
localStorage.setItem('user', JSON.stringify(userData))
} catch (e) {
console.error('Failed to fetch initial user data', e)
}
}
setLoading(false)
}
init()
}, [])
return (
<AuthContext.Provider value={{ user, loading, login, logout, refresh, refreshSession }}>
{isLoggingOut && <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Ciphera Analytics" />}
{children}
</AuthContext.Provider>
)
}
export const useAuth = () => useContext(AuthContext)

44
lib/utils/format.ts Normal file
View File

@@ -0,0 +1,44 @@
/**
* 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 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'
}

24
next.config.ts Normal file
View File

@@ -0,0 +1,24 @@
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
reactStrictMode: true,
// * Privacy-first: Disable analytics and telemetry
productionBrowserSourceMaps: false,
async redirects() {
const authUrl = process.env.NEXT_PUBLIC_AUTH_URL || 'https://auth.ciphera.net'
return [
{
source: '/login',
destination: `${authUrl}/login?client_id=analytics-app&redirect_uri=${encodeURIComponent((process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003') + '/auth/callback')}&response_type=code`,
permanent: false,
},
{
source: '/signup',
destination: `${authUrl}/signup?client_id=analytics-app&redirect_uri=${encodeURIComponent((process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003') + '/auth/callback')}&response_type=code`,
permanent: false,
},
]
},
}
export default nextConfig

36
package.json Normal file
View File

@@ -0,0 +1,36 @@
{
"name": "analytics-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"type-check": "tsc --noEmit"
},
"dependencies": {
"@ciphera-net/ui": "^0.0.6",
"@radix-ui/react-icons": "^1.3.2",
"axios": "^1.13.2",
"framer-motion": "^12.23.26",
"next": "^16.1.1",
"next-themes": "^0.4.6",
"react": "^19.2.3",
"react-dom": "^19.2.3",
"recharts": "^2.15.0",
"sonner": "^2.0.7"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.19",
"@types/node": "^20.14.12",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"autoprefixer": "^10.4.19",
"eslint": "^9.39.2",
"eslint-config-next": "^16.1.1",
"postcss": "^8.4.40",
"tailwindcss": "^3.4.7",
"typescript": "^5.5.4"
}
}

9
postcss.config.mjs Normal file
View File

@@ -0,0 +1,9 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
export default config

78
public/script.js Normal file
View File

@@ -0,0 +1,78 @@
/**
* Ciphera Analytics - Privacy-First Tracking Script
* Lightweight, no cookies, GDPR compliant
*/
(function() {
'use strict';
// * Respect Do Not Track
if (navigator.doNotTrack === '1' || navigator.doNotTrack === 'yes' || navigator.msDoNotTrack === '1') {
return;
}
// * Get domain from script tag
const script = document.currentScript || document.querySelector('script[data-domain]');
if (!script || !script.getAttribute('data-domain')) {
return;
}
const domain = script.getAttribute('data-domain');
const apiUrl = script.getAttribute('data-api') || 'https://analytics.ciphera.net';
// * Generate ephemeral session ID (not persistent)
function getSessionId() {
const key = 'plausible_session_' + domain;
let sessionId = sessionStorage.getItem(key);
if (!sessionId) {
sessionId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
sessionStorage.setItem(key, sessionId);
}
return sessionId;
}
// * Track pageview
function trackPageview() {
const path = window.location.pathname + window.location.search;
const referrer = document.referrer || '';
const screen = {
width: window.innerWidth || screen.width,
height: window.innerHeight || screen.height,
};
const payload = {
domain: domain,
path: path,
referrer: referrer,
screen: screen,
};
// * Send event
fetch(apiUrl + '/api/v1/events', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(payload),
keepalive: true,
}).catch(() => {
// * Silently fail - don't interrupt user experience
});
}
// * Track initial pageview
trackPageview();
// * Track SPA navigation (history API)
let lastUrl = location.href;
new MutationObserver(() => {
const url = location.href;
if (url !== lastUrl) {
lastUrl = url;
trackPageview();
}
}).observe(document, { subtree: true, childList: true });
// * Track popstate (browser back/forward)
window.addEventListener('popstate', trackPageview);
})();

51
styles/globals.css Normal file
View File

@@ -0,0 +1,51 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
/* * Brand colors - Orange used as accent only */
--color-brand-orange: #FD5E0F;
/* * Neutral greys for UI */
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-neutral-400: #a3a3a3;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
/* * Dark mode support */
--color-bg: #ffffff;
--color-text: #171717;
}
.dark {
--color-bg: #0a0a0a;
--color-text: #fafafa;
}
* {
@apply border-neutral-200 dark:border-neutral-800 transition-colors duration-300 ease-in-out;
}
body {
@apply bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-50 transition-colors duration-300 ease-in-out;
font-family: var(--font-plus-jakarta-sans), system-ui, sans-serif;
}
}
@layer components {
/* * Reusable component styles */
.btn-primary {
@apply bg-brand-orange text-white px-5 py-2.5 rounded-xl font-semibold shadow-sm shadow-orange-200 dark:shadow-none hover:shadow-orange-300 dark:hover:shadow-brand-orange/20 hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 dark:focus:ring-offset-neutral-900;
}
.btn-secondary {
@apply bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-white px-5 py-2.5 rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-all duration-200 shadow-sm hover:shadow-md dark:shadow-none focus:outline-none focus:ring-2 focus:ring-neutral-200 dark:focus:ring-neutral-700 focus:ring-offset-2 dark:focus:ring-offset-neutral-900;
}
}

28
tailwind.config.ts Normal file
View File

@@ -0,0 +1,28 @@
import type { Config } from 'tailwindcss'
const config: Config = {
darkMode: 'class',
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@ciphera-net/ui/dist/**/*.{js,mjs}',
],
theme: {
extend: {
colors: {
// * Brand color: Orange (#FD5E0F) - used as accent only
brand: {
orange: '#FD5E0F',
},
},
fontFamily: {
sans: ['var(--font-plus-jakarta-sans)', 'system-ui', 'sans-serif'],
},
},
},
plugins: [
require('@tailwindcss/typography'),
],
}
export default config

41
tsconfig.json Normal file
View File

@@ -0,0 +1,41 @@
{
"compilerOptions": {
"target": "ES2020",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": [
"./*"
]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
".next/dev/types/**/*.ts"
],
"exclude": [
"node_modules"
]
}