ea2c47b53f
Site tabs: - Visibility (public toggle, share link, password protection) - Privacy (data collection toggles, geo level, retention info) - Bot & Spam (filtering toggle, stats cards) - Reports (scheduled reports + alert channels list with test/pause/delete) - Integrations (GSC + BunnyCDN connect/disconnect cards) Workspace tabs: - Members (member list, invite form with role selector) - Notifications (dynamic toggles from API categories) - Audit Log (action log with timestamps) Account tabs: - Security (wraps existing ProfileSettings security tab) - Devices (wraps existing TrustedDevicesCard + SecurityActivityCard) No more "Coming soon" placeholders. All tabs are functional.
69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { toast, Spinner } from '@ciphera-net/ui'
|
|
import { useAuth } from '@/lib/auth/context'
|
|
import { getNotificationSettings, updateNotificationSettings, type NotificationSettingsResponse } from '@/lib/api/notification-settings'
|
|
|
|
export default function WorkspaceNotificationsTab() {
|
|
const { user } = useAuth()
|
|
const [data, setData] = useState<NotificationSettingsResponse | null>(null)
|
|
const [settings, setSettings] = useState<Record<string, boolean>>({})
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
if (!user?.org_id) return
|
|
getNotificationSettings()
|
|
.then(resp => {
|
|
setData(resp)
|
|
setSettings(resp.settings || {})
|
|
})
|
|
.catch(() => {})
|
|
.finally(() => setLoading(false))
|
|
}, [user?.org_id])
|
|
|
|
const handleToggle = async (key: string) => {
|
|
const prev = { ...settings }
|
|
const updated = { ...settings, [key]: !settings[key] }
|
|
setSettings(updated)
|
|
try {
|
|
await updateNotificationSettings(updated)
|
|
} catch {
|
|
setSettings(prev)
|
|
toast.error('Failed to update notification preference')
|
|
}
|
|
}
|
|
|
|
if (loading) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-base font-semibold text-white mb-1">Notifications</h3>
|
|
<p className="text-sm text-neutral-400">Choose what notifications you receive.</p>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
{(data?.categories || []).map(cat => (
|
|
<div key={cat.id} className="flex items-center justify-between py-3 px-4 rounded-xl hover:bg-neutral-800/20 transition-colors">
|
|
<div>
|
|
<p className="text-sm font-medium text-white">{cat.label}</p>
|
|
<p className="text-xs text-neutral-400">{cat.description}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => handleToggle(cat.id)}
|
|
className={`relative w-10 h-6 rounded-full transition-colors duration-200 ${settings[cat.id] ? 'bg-brand-orange' : 'bg-neutral-700'}`}
|
|
>
|
|
<span className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform duration-200 ${settings[cat.id] ? 'translate-x-4' : ''}`} />
|
|
</button>
|
|
</div>
|
|
))}
|
|
|
|
{(!data?.categories || data.categories.length === 0) && (
|
|
<p className="text-sm text-neutral-500 text-center py-6">No notification preferences available.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|