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

fix(settings): normalize Reports + Integrations tabs to design standards

Browse Source
This commit is contained in:
Usman Baig
2026-03-25 22:22:21 +01:00
parent 4d9c3aeabd
commit a3b746deeb
2 changed files with 27 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/settings/unified/tabs/SiteIntegrationsTab.tsx
View File

@@ -1,8 +1,8 @@
'use client' 'use client'
import { useState } from 'react' import { useState } from 'react'
import { Button, toast, Spinner } from '@ciphera-net/ui' import { Button, Input, Select, toast, Spinner } from '@ciphera-net/ui'
import { Plugs, Trash, ShieldCheck, CaretDown } from '@phosphor-icons/react' import { Plugs, Trash, ShieldCheck } from '@phosphor-icons/react'
import { useGSCStatus, useBunnyStatus } from '@/lib/swr/dashboard' import { useGSCStatus, useBunnyStatus } from '@/lib/swr/dashboard'
import { disconnectGSC, getGSCAuthURL } from '@/lib/api/gsc' import { disconnectGSC, getGSCAuthURL } from '@/lib/api/gsc'
import { disconnectBunny, getBunnyPullZones, connectBunny, type BunnyPullZone } from '@/lib/api/bunny' import { disconnectBunny, getBunnyPullZones, connectBunny, type BunnyPullZone } from '@/lib/api/bunny'
@@ -57,7 +57,7 @@ function IntegrationCard({
children?: React.ReactNode children?: React.ReactNode
}) { }) {
return ( return (
<div className="rounded-xl border border-neutral-800 bg-neutral-800/20"> <div className="rounded-xl border border-neutral-800 bg-neutral-800/30">
<div className="flex items-center justify-between py-4 px-4"> <div className="flex items-center justify-between py-4 px-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-neutral-800">{icon}</div> <div className="p-2 rounded-lg bg-neutral-800">{icon}</div>
@@ -131,7 +131,7 @@ function GSCDetails({ gscStatus }: { gscStatus: { connected: boolean; google_ema
return ( return (
<div className="px-4 pb-4 space-y-3"> <div className="px-4 pb-4 space-y-3">
<div className="grid grid-cols-2 gap-x-6 gap-y-2 px-4 py-3 rounded-lg bg-neutral-800/40 border border-neutral-700/50"> <div className="grid grid-cols-2 gap-x-6 gap-y-3 px-4 py-3 rounded-lg bg-neutral-800/40 border border-neutral-700/50">
{rows.map(row => ( {rows.map(row => (
<div key={row.label} className="flex flex-col gap-0.5"> <div key={row.label} className="flex flex-col gap-0.5">
<span className="text-xs text-neutral-500">{row.label}</span> <span className="text-xs text-neutral-500">{row.label}</span>
@@ -200,12 +200,12 @@ function BunnySetupForm({ siteId, onConnected }: { siteId: string; onConnected:
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-xs font-medium text-neutral-400">API Key</label> <label className="text-xs font-medium text-neutral-400">API Key</label>
<div className="flex gap-2"> <div className="flex gap-2">
<input <Input
type="password" type="password"
value={apiKey} value={apiKey}
onChange={e => setApiKey(e.target.value)} onChange={e => setApiKey(e.target.value)}
placeholder="Enter your BunnyCDN API key" placeholder="Enter your BunnyCDN API key"
className="flex-1 px-3 py-2 text-sm bg-neutral-900 border border-neutral-700 rounded-lg text-white placeholder:text-neutral-500 focus:outline-none focus:border-neutral-500" className="flex-1"
/> />
<Button <Button
onClick={handleLoadZones} onClick={handleLoadZones}
@@ -221,22 +221,19 @@ function BunnySetupForm({ siteId, onConnected }: { siteId: string; onConnected:
{zonesLoaded && pullZones.length > 0 && ( {zonesLoaded && pullZones.length > 0 && (
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-xs font-medium text-neutral-400">Pull Zone</label> <label className="text-xs font-medium text-neutral-400">Pull Zone</label>
<div className="relative"> <Select
<select value={String(selectedZone?.id ?? '')}
value={selectedZone?.id ?? ''} onChange={(v) => {
onChange={e => { const zone = pullZones.find(z => z.id === Number(v))
const zone = pullZones.find(z => z.id === Number(e.target.value)) setSelectedZone(zone || null)
setSelectedZone(zone || null) }}
}} variant="input"
className="w-full px-3 py-2 text-sm bg-neutral-900 border border-neutral-700 rounded-lg text-white appearance-none focus:outline-none focus:border-neutral-500" fullWidth
> options={[
<option value="">Select a pull zone</option> { value: '', label: 'Select a pull zone' },
{pullZones.map(zone => ( ...pullZones.map(zone => ({ value: String(zone.id), label: zone.name })),
<option key={zone.id} value={zone.id}>{zone.name}</option> ]}
))} />
</select>
<CaretDown weight="bold" className="absolute right-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-400 pointer-events-none" />
</div>
</div> </div>
)} )}
@@ -331,7 +328,7 @@ export default function SiteIntegrationsTab({ siteId }: { siteId: string }) {
> >
{bunnyConnected && ( {bunnyConnected && (
<div className="px-4 pb-4 space-y-3"> <div className="px-4 pb-4 space-y-3">
<div className="grid grid-cols-2 gap-x-6 gap-y-2 px-4 py-3 rounded-lg bg-neutral-800/40 border border-neutral-700/50"> <div className="grid grid-cols-2 gap-x-6 gap-y-3 px-4 py-3 rounded-lg bg-neutral-800/40 border border-neutral-700/50">
<div className="flex flex-col gap-0.5"> <div className="flex flex-col gap-0.5">
<span className="text-xs text-neutral-500">Pull Zone</span> <span className="text-xs text-neutral-500">Pull Zone</span>
<span className="text-sm text-white">{bunnyStatus?.pull_zone_name || 'Unknown'}</span> <span className="text-sm text-white">{bunnyStatus?.pull_zone_name || 'Unknown'}</span>

14
components/settings/unified/tabs/SiteReportsTab.tsx
View File

@@ -147,7 +147,7 @@ function ScheduleRow({
)} )}
</div> </div>
</div> </div>
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"> <div className="flex items-center gap-1 flex-shrink-0">
<button onClick={() => onEdit(schedule)} className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors" title="Edit"> <button onClick={() => onEdit(schedule)} className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors" title="Edit">
<Pencil weight="bold" className="w-3.5 h-3.5" /> <Pencil weight="bold" className="w-3.5 h-3.5" />
</button> </button>
@@ -205,7 +205,7 @@ function FormInput({ id, type = 'text', value, onChange, placeholder }: { id?: s
value={value} value={value}
onChange={(e) => onChange(e.target.value)} onChange={(e) => onChange(e.target.value)}
placeholder={placeholder} placeholder={placeholder}
className="w-full h-10 px-4 bg-transparent border border-neutral-800 rounded-lg text-sm text-white placeholder:text-neutral-600 focus:outline-none focus:border-brand-orange focus:ring-2 focus:ring-ring/20 transition-colors" className="w-full h-10 px-4 bg-transparent border border-neutral-800 rounded-lg text-sm text-white placeholder:text-neutral-600 focus:outline-none focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 transition-colors"
/> />
) )
} }
@@ -622,7 +622,7 @@ export default function SiteReportsTab({ siteId }: { siteId: string }) {
if (loading) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div> if (loading) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
return ( return (
<div className="space-y-8"> <div className="space-y-6">
{/* Scheduled Reports */} {/* Scheduled Reports */}
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@@ -636,7 +636,7 @@ export default function SiteReportsTab({ siteId }: { siteId: string }) {
</div> </div>
{reports.length === 0 ? ( {reports.length === 0 ? (
<p className="text-sm text-neutral-500 text-center py-6">No scheduled reports yet.</p> <p className="text-sm text-neutral-500 text-center py-8">No scheduled reports yet.</p>
) : ( ) : (
<div className="space-y-1"> <div className="space-y-1">
{reports.map((r) => ( {reports.map((r) => (
@@ -647,19 +647,19 @@ export default function SiteReportsTab({ siteId }: { siteId: string }) {
</div> </div>
{/* Alert Channels */} {/* Alert Channels */}
<div className="space-y-3"> <div className="pt-6 border-t border-neutral-800 space-y-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h3 className="text-base font-semibold text-white mb-1">Alert Channels</h3> <h3 className="text-base font-semibold text-white mb-1">Alert Channels</h3>
<p className="text-sm text-neutral-400">Get notified when uptime monitors go down.</p> <p className="text-sm text-neutral-400">Get notified when uptime monitors go down.</p>
</div> </div>
<Button variant="secondary" className="text-sm gap-1.5" onClick={openNewAlert}> <Button variant="primary" className="text-sm gap-1.5" onClick={openNewAlert}>
<Plus weight="bold" className="w-3.5 h-3.5" /> Add Channel <Plus weight="bold" className="w-3.5 h-3.5" /> Add Channel
</Button> </Button>
</div> </div>
{alerts.length === 0 ? ( {alerts.length === 0 ? (
<p className="text-sm text-neutral-500 text-center py-6">No alert channels configured.</p> <p className="text-sm text-neutral-500 text-center py-8">No alert channels configured.</p>
) : ( ) : (
<div className="space-y-1"> <div className="space-y-1">
{alerts.map((a) => ( {alerts.map((a) => (