feat(settings): unified settings modal with context switcher (Phase 1)
New unified settings modal accessible via `,` keyboard shortcut. Three-context switcher: Site (with site dropdown), Workspace, Account. Horizontal tabs per context with animated transitions. Phase 1 tabs implemented: - Site → General (name, timezone, domain, tracking script with copy) - Site → Goals (CRUD with inline create/edit) - Workspace → General (org name, slug, danger zone) - Workspace → Billing (plan card, usage, cancel/resume, portal) - Account → Profile (wraps existing ProfileSettings) Phase 2 tabs show "Coming soon" placeholder: - Site: Visibility, Privacy, Bot & Spam, Reports, Integrations - Workspace: Members, Notifications, Audit Log - Account: Security, Devices Old settings pages and profile modal remain functional.
This commit is contained in:
Usman Baig
@@ -6,6 +6,7 @@ import { usePathname, useRouter } from 'next/navigation'
|
||||
import { listSites, type Site } from '@/lib/api/sites'
|
||||
import { useAuth } from '@/lib/auth/context'
|
||||
import { useSettingsModal } from '@/lib/settings-modal-context'
|
||||
import { useUnifiedSettings } from '@/lib/unified-settings-context'
|
||||
import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
|
||||
import { setSessionAction } from '@/app/actions/auth'
|
||||
import { logger } from '@/lib/utils/logger'
|
||||
@@ -443,6 +444,7 @@ export default function Sidebar({
|
||||
const pathname = usePathname()
|
||||
const router = useRouter()
|
||||
const { openSettings } = useSettingsModal()
|
||||
const { openUnifiedSettings } = useUnifiedSettings()
|
||||
const [sites, setSites] = useState<Site[]>([])
|
||||
const [orgs, setOrgs] = useState<OrganizationMember[]>([])
|
||||
const [pendingHref, setPendingHref] = useState<string | null>(null)
|
||||
@@ -478,15 +480,19 @@ export default function Sidebar({
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
const tag = (e.target as HTMLElement)?.tagName
|
||||
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
|
||||
if (e.key === '[' && !e.metaKey && !e.ctrlKey && !e.altKey) {
|
||||
const tag = (e.target as HTMLElement)?.tagName
|
||||
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
|
||||
e.preventDefault(); toggle()
|
||||
}
|
||||
// `,` opens unified settings (same as GitHub/Linear)
|
||||
if (e.key === ',' && !e.metaKey && !e.ctrlKey && !e.altKey) {
|
||||
e.preventDefault(); openUnifiedSettings()
|
||||
}
|
||||
}
|
||||
document.addEventListener('keydown', handler)
|
||||
return () => document.removeEventListener('keydown', handler)
|
||||
}, [collapsed])
|
||||
}, [collapsed, openUnifiedSettings])
|
||||
|
||||
const toggle = useCallback(() => {
|
||||
setCollapsed((prev) => { const next = !prev; localStorage.setItem(SIDEBAR_KEY, String(next)); return next })
|
||||
|
||||
386
components/settings/unified/UnifiedSettingsModal.tsx
Normal file
386
components/settings/unified/UnifiedSettingsModal.tsx
Normal file
@@ -0,0 +1,386 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useCallback, useEffect } from 'react'
|
||||
import { AnimatePresence, motion } from 'framer-motion'
|
||||
import { X, GearSix, Buildings, User, CaretDown } from '@phosphor-icons/react'
|
||||
import { useUnifiedSettings } from '@/lib/unified-settings-context'
|
||||
import { useAuth } from '@/lib/auth/context'
|
||||
import { useSite } from '@/lib/swr/dashboard'
|
||||
import { listSites, type Site } from '@/lib/api/sites'
|
||||
|
||||
// Tab content components
|
||||
import SiteGeneralTab from './tabs/SiteGeneralTab'
|
||||
import SiteGoalsTab from './tabs/SiteGoalsTab'
|
||||
import WorkspaceGeneralTab from './tabs/WorkspaceGeneralTab'
|
||||
import WorkspaceBillingTab from './tabs/WorkspaceBillingTab'
|
||||
import AccountProfileTab from './tabs/AccountProfileTab'
|
||||
|
||||
// ─── Types ──────────────────────────────────────────────────────
|
||||
|
||||
type SettingsContext = 'site' | 'workspace' | 'account'
|
||||
|
||||
interface TabDef {
|
||||
id: string
|
||||
label: string
|
||||
}
|
||||
|
||||
const SITE_TABS: TabDef[] = [
|
||||
{ id: 'general', label: 'General' },
|
||||
{ id: 'goals', label: 'Goals' },
|
||||
{ id: 'visibility', label: 'Visibility' },
|
||||
{ id: 'privacy', label: 'Privacy' },
|
||||
{ id: 'bot-spam', label: 'Bot & Spam' },
|
||||
{ id: 'reports', label: 'Reports' },
|
||||
{ id: 'integrations', label: 'Integrations' },
|
||||
]
|
||||
|
||||
const WORKSPACE_TABS: TabDef[] = [
|
||||
{ id: 'general', label: 'General' },
|
||||
{ id: 'members', label: 'Members' },
|
||||
{ id: 'billing', label: 'Billing' },
|
||||
{ id: 'notifications', label: 'Notifications' },
|
||||
{ id: 'audit', label: 'Audit Log' },
|
||||
]
|
||||
|
||||
const ACCOUNT_TABS: TabDef[] = [
|
||||
{ id: 'profile', label: 'Profile' },
|
||||
{ id: 'security', label: 'Security' },
|
||||
{ id: 'devices', label: 'Devices' },
|
||||
]
|
||||
|
||||
// ─── Context Switcher ───────────────────────────────────────────
|
||||
|
||||
function ContextSwitcher({
|
||||
active,
|
||||
onChange,
|
||||
sites,
|
||||
activeSiteId,
|
||||
onSiteChange,
|
||||
}: {
|
||||
active: SettingsContext
|
||||
onChange: (ctx: SettingsContext) => void
|
||||
sites: Site[]
|
||||
activeSiteId: string | null
|
||||
onSiteChange: (id: string) => void
|
||||
}) {
|
||||
const [siteDropdownOpen, setSiteDropdownOpen] = useState(false)
|
||||
const activeSite = sites.find(s => s.id === activeSiteId)
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 p-1 bg-neutral-800/50 rounded-xl">
|
||||
{/* Site button with dropdown */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => {
|
||||
onChange('site')
|
||||
if (active === 'site') setSiteDropdownOpen(!siteDropdownOpen)
|
||||
}}
|
||||
className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
|
||||
active === 'site'
|
||||
? 'bg-neutral-700 text-white shadow-sm'
|
||||
: 'text-neutral-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<GearSix weight="bold" className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">
|
||||
{activeSite ? activeSite.domain : 'Site'}
|
||||
</span>
|
||||
<CaretDown weight="bold" className="w-3 h-3" />
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{siteDropdownOpen && active === 'site' && sites.length > 1 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -4 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -4 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
className="absolute top-full left-0 mt-1 w-56 rounded-xl bg-neutral-800 border border-neutral-700 shadow-xl z-50 py-1 overflow-hidden"
|
||||
>
|
||||
{sites.map(site => (
|
||||
<button
|
||||
key={site.id}
|
||||
onClick={() => {
|
||||
onSiteChange(site.id)
|
||||
setSiteDropdownOpen(false)
|
||||
}}
|
||||
className={`w-full text-left px-3 py-2 text-sm transition-colors ${
|
||||
site.id === activeSiteId
|
||||
? 'bg-brand-orange/10 text-brand-orange'
|
||||
: 'text-neutral-300 hover:bg-neutral-700/50'
|
||||
}`}
|
||||
>
|
||||
<span className="font-medium">{site.name}</span>
|
||||
<span className="ml-2 text-neutral-500 text-xs">{site.domain}</span>
|
||||
</button>
|
||||
))}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => { onChange('workspace'); setSiteDropdownOpen(false) }}
|
||||
className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
|
||||
active === 'workspace'
|
||||
? 'bg-neutral-700 text-white shadow-sm'
|
||||
: 'text-neutral-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<Buildings weight="bold" className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">Workspace</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => { onChange('account'); setSiteDropdownOpen(false) }}
|
||||
className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
|
||||
active === 'account'
|
||||
? 'bg-neutral-700 text-white shadow-sm'
|
||||
: 'text-neutral-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<User weight="bold" className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">Account</span>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Tab Bar ────────────────────────────────────────────────────
|
||||
|
||||
function TabBar({
|
||||
tabs,
|
||||
activeTab,
|
||||
onChange,
|
||||
}: {
|
||||
tabs: TabDef[]
|
||||
activeTab: string
|
||||
onChange: (id: string) => void
|
||||
}) {
|
||||
return (
|
||||
<div className="flex gap-1 overflow-x-auto scrollbar-hide pb-px">
|
||||
{tabs.map(tab => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => onChange(tab.id)}
|
||||
className={`relative px-3 py-2 text-sm font-medium whitespace-nowrap rounded-lg transition-all duration-200 ${
|
||||
activeTab === tab.id
|
||||
? 'text-brand-orange'
|
||||
: 'text-neutral-500 hover:text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
{activeTab === tab.id && (
|
||||
<motion.div
|
||||
layoutId="settings-tab-indicator"
|
||||
className="absolute bottom-0 left-2 right-2 h-0.5 bg-brand-orange rounded-full"
|
||||
transition={{ type: 'spring', bounce: 0.2, duration: 0.4 }}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Tab Content ────────────────────────────────────────────────
|
||||
|
||||
function ComingSoon({ label }: { label: string }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center">
|
||||
<div className="rounded-full bg-neutral-800 p-4 mb-4">
|
||||
<GearSix className="w-8 h-8 text-neutral-500" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-1">{label}</h3>
|
||||
<p className="text-sm text-neutral-400 max-w-sm">
|
||||
This section is being migrated. For now, use the existing settings page.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TabContent({
|
||||
context,
|
||||
activeTab,
|
||||
siteId,
|
||||
}: {
|
||||
context: SettingsContext
|
||||
activeTab: string
|
||||
siteId: string | null
|
||||
}) {
|
||||
// Site tabs
|
||||
if (context === 'site' && siteId) {
|
||||
switch (activeTab) {
|
||||
case 'general': return <SiteGeneralTab siteId={siteId} />
|
||||
case 'goals': return <SiteGoalsTab siteId={siteId} />
|
||||
case 'visibility': return <ComingSoon label="Visibility" />
|
||||
case 'privacy': return <ComingSoon label="Data & Privacy" />
|
||||
case 'bot-spam': return <ComingSoon label="Bot & Spam" />
|
||||
case 'reports': return <ComingSoon label="Reports" />
|
||||
case 'integrations': return <ComingSoon label="Integrations" />
|
||||
}
|
||||
}
|
||||
|
||||
// Workspace tabs
|
||||
if (context === 'workspace') {
|
||||
switch (activeTab) {
|
||||
case 'general': return <WorkspaceGeneralTab />
|
||||
case 'billing': return <WorkspaceBillingTab />
|
||||
case 'members': return <ComingSoon label="Members" />
|
||||
case 'notifications': return <ComingSoon label="Notifications" />
|
||||
case 'audit': return <ComingSoon label="Audit Log" />
|
||||
}
|
||||
}
|
||||
|
||||
// Account tabs
|
||||
if (context === 'account') {
|
||||
switch (activeTab) {
|
||||
case 'profile': return <AccountProfileTab />
|
||||
case 'security': return <ComingSoon label="Security" />
|
||||
case 'devices': return <ComingSoon label="Devices" />
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
// ─── Main Modal ─────────────────────────────────────────────────
|
||||
|
||||
export default function UnifiedSettingsModal() {
|
||||
const { isOpen, closeUnifiedSettings: closeSettings, initialTab: initTab } = useUnifiedSettings()
|
||||
const { user } = useAuth()
|
||||
|
||||
const [context, setContext] = useState<SettingsContext>('site')
|
||||
const [siteTabs, setSiteTabs] = useState('general')
|
||||
const [workspaceTabs, setWorkspaceTabs] = useState('general')
|
||||
const [accountTabs, setAccountTabs] = useState('profile')
|
||||
|
||||
const [sites, setSites] = useState<Site[]>([])
|
||||
const [activeSiteId, setActiveSiteId] = useState<string | null>(null)
|
||||
|
||||
// Apply initial tab when modal opens
|
||||
useEffect(() => {
|
||||
if (isOpen && initTab) {
|
||||
if (initTab.context) setContext(initTab.context)
|
||||
if (initTab.tab) {
|
||||
if (initTab.context === 'site') setSiteTabs(initTab.tab)
|
||||
else if (initTab.context === 'workspace') setWorkspaceTabs(initTab.tab)
|
||||
else if (initTab.context === 'account') setAccountTabs(initTab.tab)
|
||||
}
|
||||
}
|
||||
}, [isOpen, initTab])
|
||||
|
||||
// Load sites when modal opens
|
||||
useEffect(() => {
|
||||
if (isOpen && user?.org_id) {
|
||||
listSites().then(data => {
|
||||
const list = Array.isArray(data) ? data : []
|
||||
setSites(list)
|
||||
if (!activeSiteId && list.length > 0) {
|
||||
setActiveSiteId(list[0].id)
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
}, [isOpen, user?.org_id])
|
||||
|
||||
// Try to pick up site from URL
|
||||
useEffect(() => {
|
||||
if (isOpen && typeof window !== 'undefined') {
|
||||
const match = window.location.pathname.match(/\/sites\/([a-f0-9-]+)/)
|
||||
if (match) setActiveSiteId(match[1])
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
// Escape key closes
|
||||
useEffect(() => {
|
||||
if (!isOpen) return
|
||||
const handleEsc = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') closeSettings()
|
||||
}
|
||||
window.addEventListener('keydown', handleEsc)
|
||||
return () => window.removeEventListener('keydown', handleEsc)
|
||||
}, [isOpen, closeSettings])
|
||||
|
||||
const tabs = context === 'site' ? SITE_TABS : context === 'workspace' ? WORKSPACE_TABS : ACCOUNT_TABS
|
||||
const activeTab = context === 'site' ? siteTabs : context === 'workspace' ? workspaceTabs : accountTabs
|
||||
const setActiveTab = context === 'site' ? setSiteTabs : context === 'workspace' ? setWorkspaceTabs : setAccountTabs
|
||||
|
||||
const handleContextChange = useCallback((ctx: SettingsContext) => {
|
||||
setContext(ctx)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="fixed inset-0 z-[60] bg-black/60 backdrop-blur-sm"
|
||||
onClick={closeSettings}
|
||||
/>
|
||||
|
||||
{/* Modal */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.97, y: 8 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.97, y: 8 }}
|
||||
transition={{ type: 'spring', bounce: 0.15, duration: 0.35 }}
|
||||
className="fixed inset-0 z-[61] flex items-center justify-center p-4 pointer-events-none"
|
||||
>
|
||||
<div
|
||||
className="pointer-events-auto w-full max-w-3xl max-h-[90vh] bg-neutral-900 border border-neutral-800 rounded-2xl shadow-2xl flex flex-col overflow-hidden"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="shrink-0 px-6 pt-5 pb-4 border-b border-neutral-800/60">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-white">Settings</h2>
|
||||
<button
|
||||
onClick={closeSettings}
|
||||
className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors"
|
||||
>
|
||||
<X weight="bold" className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Context Switcher */}
|
||||
<ContextSwitcher
|
||||
active={context}
|
||||
onChange={handleContextChange}
|
||||
sites={sites}
|
||||
activeSiteId={activeSiteId}
|
||||
onSiteChange={setActiveSiteId}
|
||||
/>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="mt-4">
|
||||
<TabBar tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={`${context}-${activeTab}`}
|
||||
initial={{ opacity: 0, x: 8 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -8 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
className="p-6"
|
||||
>
|
||||
<TabContent context={context} activeTab={activeTab} siteId={activeSiteId} />
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
17
components/settings/unified/tabs/AccountProfileTab.tsx
Normal file
17
components/settings/unified/tabs/AccountProfileTab.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
'use client'
|
||||
|
||||
import ProfileSettings from '@/components/settings/ProfileSettings'
|
||||
import TrustedDevicesCard from '@/components/settings/TrustedDevicesCard'
|
||||
|
||||
export default function AccountProfileTab() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-white mb-1">Profile</h3>
|
||||
<p className="text-sm text-neutral-400">Manage your personal account settings.</p>
|
||||
</div>
|
||||
|
||||
<ProfileSettings activeTab="profile" borderless hideDangerZone />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
137
components/settings/unified/tabs/SiteGeneralTab.tsx
Normal file
137
components/settings/unified/tabs/SiteGeneralTab.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Input, Button, Select, toast, Spinner } from '@ciphera-net/ui'
|
||||
import { Copy, CheckCircle } from '@phosphor-icons/react'
|
||||
import { useSite } from '@/lib/swr/dashboard'
|
||||
import { updateSite } from '@/lib/api/sites'
|
||||
|
||||
const TIMEZONES = [
|
||||
{ value: 'UTC', label: 'UTC' },
|
||||
{ value: 'Europe/London', label: 'Europe/London (GMT)' },
|
||||
{ value: 'Europe/Brussels', label: 'Europe/Brussels (CET)' },
|
||||
{ value: 'Europe/Berlin', label: 'Europe/Berlin (CET)' },
|
||||
{ value: 'Europe/Paris', label: 'Europe/Paris (CET)' },
|
||||
{ value: 'Europe/Amsterdam', label: 'Europe/Amsterdam (CET)' },
|
||||
{ value: 'America/New_York', label: 'America/New York (EST)' },
|
||||
{ value: 'America/Chicago', label: 'America/Chicago (CST)' },
|
||||
{ value: 'America/Denver', label: 'America/Denver (MST)' },
|
||||
{ value: 'America/Los_Angeles', label: 'America/Los Angeles (PST)' },
|
||||
{ value: 'Asia/Tokyo', label: 'Asia/Tokyo (JST)' },
|
||||
{ value: 'Asia/Shanghai', label: 'Asia/Shanghai (CST)' },
|
||||
{ value: 'Asia/Kolkata', label: 'Asia/Kolkata (IST)' },
|
||||
{ value: 'Australia/Sydney', label: 'Australia/Sydney (AEST)' },
|
||||
]
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8082'
|
||||
const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003'
|
||||
|
||||
export default function SiteGeneralTab({ siteId }: { siteId: string }) {
|
||||
const { data: site, mutate } = useSite(siteId)
|
||||
const [name, setName] = useState('')
|
||||
const [timezone, setTimezone] = useState('UTC')
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (site) {
|
||||
setName(site.name || '')
|
||||
setTimezone(site.timezone || 'UTC')
|
||||
}
|
||||
}, [site])
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!site) return
|
||||
setSaving(true)
|
||||
try {
|
||||
await updateSite(siteId, { name, timezone })
|
||||
await mutate()
|
||||
toast.success('Site updated')
|
||||
} catch {
|
||||
toast.error('Failed to save')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const trackingScript = `<script defer data-domain="${site?.domain || ''}" data-api="${API_URL}" src="${APP_URL}/script.js"></script>`
|
||||
const frustrationScript = `<script defer src="${APP_URL}/script.frustration.js"></script>`
|
||||
|
||||
const copyScript = () => {
|
||||
navigator.clipboard.writeText(trackingScript + '\n' + frustrationScript)
|
||||
setCopied(true)
|
||||
toast.success('Copied to clipboard')
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
|
||||
if (!site) {
|
||||
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-8">
|
||||
{/* Site details */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-white mb-1">General Configuration</h3>
|
||||
<p className="text-sm text-neutral-400">Update your site details and tracking script.</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-300 mb-1.5">Site Name</label>
|
||||
<Input value={name} onChange={e => setName(e.target.value)} placeholder="My Website" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-300 mb-1.5">Timezone</label>
|
||||
<Select
|
||||
value={timezone}
|
||||
onChange={setTimezone}
|
||||
variant="input"
|
||||
options={TIMEZONES.map(tz => ({ value: tz.value, label: tz.label }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-300 mb-1.5">Domain</label>
|
||||
<Input value={site.domain} disabled className="opacity-60" />
|
||||
<p className="text-xs text-neutral-500 mt-1">Domain cannot be changed after creation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tracking Script */}
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-white mb-1">Tracking Script</h3>
|
||||
<p className="text-sm text-neutral-400">Add this to your website to start tracking visitors.</p>
|
||||
</div>
|
||||
|
||||
<div className="relative rounded-xl bg-neutral-950 border border-neutral-800 p-4 overflow-x-auto">
|
||||
<pre className="text-xs text-neutral-300 font-mono leading-relaxed whitespace-pre-wrap break-all pr-16">
|
||||
{trackingScript}{'\n'}{frustrationScript}
|
||||
</pre>
|
||||
<button
|
||||
onClick={copyScript}
|
||||
className="absolute top-3 right-3 flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-lg bg-brand-orange/10 text-brand-orange hover:bg-brand-orange/20 transition-colors"
|
||||
>
|
||||
{copied ? <CheckCircle weight="bold" className="w-3.5 h-3.5" /> : <Copy weight="bold" className="w-3.5 h-3.5" />}
|
||||
{copied ? 'Copied' : 'Copy'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save */}
|
||||
<div className="flex justify-end pt-2">
|
||||
<Button onClick={handleSave} variant="primary" disabled={saving}>
|
||||
{saving ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
170
components/settings/unified/tabs/SiteGoalsTab.tsx
Normal file
170
components/settings/unified/tabs/SiteGoalsTab.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Input, Button, toast } from '@ciphera-net/ui'
|
||||
import { Plus, Pencil, Trash, X } from '@phosphor-icons/react'
|
||||
import { Spinner } from '@ciphera-net/ui'
|
||||
import { useGoals } from '@/lib/swr/dashboard'
|
||||
import { createGoal, updateGoal, deleteGoal } from '@/lib/api/goals'
|
||||
import { getAuthErrorMessage } from '@ciphera-net/ui'
|
||||
|
||||
export default function SiteGoalsTab({ siteId }: { siteId: string }) {
|
||||
const { data: goals = [], mutate, isLoading } = useGoals(siteId)
|
||||
const [editing, setEditing] = useState<string | null>(null)
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [name, setName] = useState('')
|
||||
const [eventName, setEventName] = useState('')
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const startCreate = () => {
|
||||
setCreating(true)
|
||||
setEditing(null)
|
||||
setName('')
|
||||
setEventName('')
|
||||
}
|
||||
|
||||
const startEdit = (goal: { id: string; name: string; event_name: string }) => {
|
||||
setEditing(goal.id)
|
||||
setCreating(false)
|
||||
setName(goal.name)
|
||||
setEventName(goal.event_name)
|
||||
}
|
||||
|
||||
const cancel = () => {
|
||||
setCreating(false)
|
||||
setEditing(null)
|
||||
setName('')
|
||||
setEventName('')
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!name.trim() || !eventName.trim()) {
|
||||
toast.error('Name and event name are required')
|
||||
return
|
||||
}
|
||||
if (!/^[a-zA-Z0-9_]+$/.test(eventName)) {
|
||||
toast.error('Event name can only contain letters, numbers, and underscores')
|
||||
return
|
||||
}
|
||||
|
||||
setSaving(true)
|
||||
try {
|
||||
if (editing) {
|
||||
await updateGoal(siteId, editing, { name, event_name: eventName })
|
||||
toast.success('Goal updated')
|
||||
} else {
|
||||
await createGoal(siteId, { name, event_name: eventName })
|
||||
toast.success('Goal created')
|
||||
}
|
||||
await mutate()
|
||||
cancel()
|
||||
} catch (err) {
|
||||
toast.error(getAuthErrorMessage(err as Error) || 'Failed to save goal')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (goalId: string) => {
|
||||
try {
|
||||
await deleteGoal(siteId, goalId)
|
||||
toast.success('Goal deleted')
|
||||
await mutate()
|
||||
} catch (err) {
|
||||
toast.error(getAuthErrorMessage(err as Error) || 'Failed to delete goal')
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
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 className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-white mb-1">Goals</h3>
|
||||
<p className="text-sm text-neutral-400">Track custom events as conversion goals.</p>
|
||||
</div>
|
||||
{!creating && !editing && (
|
||||
<Button onClick={startCreate} variant="primary" className="text-sm gap-1.5">
|
||||
<Plus weight="bold" className="w-3.5 h-3.5" /> Add Goal
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Create/Edit form */}
|
||||
{(creating || editing) && (
|
||||
<div className="rounded-xl border border-neutral-800 bg-neutral-800/30 p-4 space-y-3">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-neutral-400 mb-1">Display Name</label>
|
||||
<Input
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
placeholder="e.g. Sign Up"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-neutral-400 mb-1">Event Name</label>
|
||||
<Input
|
||||
value={eventName}
|
||||
onChange={e => setEventName(e.target.value)}
|
||||
placeholder="e.g. signup_click"
|
||||
disabled={!!editing}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 justify-end">
|
||||
<Button onClick={cancel} variant="secondary" className="text-sm">Cancel</Button>
|
||||
<Button onClick={handleSave} variant="primary" className="text-sm" disabled={saving}>
|
||||
{saving ? 'Saving...' : editing ? 'Update' : 'Create'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Goals list */}
|
||||
{goals.length === 0 && !creating ? (
|
||||
<div className="text-center py-10">
|
||||
<p className="text-sm text-neutral-500 mb-3">No goals yet. Add a goal to track custom events.</p>
|
||||
<Button onClick={startCreate} variant="primary" className="text-sm gap-1.5">
|
||||
<Plus weight="bold" className="w-3.5 h-3.5" /> Add your first goal
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{goals.map(goal => (
|
||||
<div
|
||||
key={goal.id}
|
||||
className="flex items-center justify-between px-4 py-3 rounded-xl hover:bg-neutral-800/40 transition-colors group"
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">{goal.name}</p>
|
||||
<p className="text-xs text-neutral-500 font-mono">{goal.event_name}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => startEdit(goal)}
|
||||
className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors"
|
||||
>
|
||||
<Pencil weight="bold" className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(goal.id)}
|
||||
className="p-1.5 rounded-lg text-neutral-500 hover:text-red-400 hover:bg-red-900/20 transition-colors"
|
||||
>
|
||||
<Trash weight="bold" className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
166
components/settings/unified/tabs/WorkspaceBillingTab.tsx
Normal file
166
components/settings/unified/tabs/WorkspaceBillingTab.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { Button, toast, Spinner } from '@ciphera-net/ui'
|
||||
import { CreditCard, ArrowSquareOut } from '@phosphor-icons/react'
|
||||
import { useSubscription } from '@/lib/swr/dashboard'
|
||||
import { createPortalSession, cancelSubscription, resumeSubscription } from '@/lib/api/billing'
|
||||
import { formatDateLong } from '@/lib/utils/formatDate'
|
||||
import { getAuthErrorMessage } from '@ciphera-net/ui'
|
||||
|
||||
export default function WorkspaceBillingTab() {
|
||||
const { data: subscription, isLoading, mutate } = useSubscription()
|
||||
const [cancelling, setCancelling] = useState(false)
|
||||
|
||||
const handleManageBilling = async () => {
|
||||
try {
|
||||
const { url } = await createPortalSession()
|
||||
if (url) window.open(url, '_blank')
|
||||
} catch (err) {
|
||||
toast.error(getAuthErrorMessage(err as Error) || 'Failed to open billing portal')
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancel = async () => {
|
||||
if (!confirm('Are you sure you want to cancel your subscription?')) return
|
||||
setCancelling(true)
|
||||
try {
|
||||
await cancelSubscription()
|
||||
await mutate()
|
||||
toast.success('Subscription cancelled')
|
||||
} catch (err) {
|
||||
toast.error(getAuthErrorMessage(err as Error) || 'Failed to cancel subscription')
|
||||
} finally {
|
||||
setCancelling(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleResume = async () => {
|
||||
try {
|
||||
await resumeSubscription()
|
||||
await mutate()
|
||||
toast.success('Subscription resumed')
|
||||
} catch (err) {
|
||||
toast.error(getAuthErrorMessage(err as Error) || 'Failed to resume subscription')
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Spinner className="w-6 h-6 text-neutral-500" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!subscription) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<CreditCard className="w-10 h-10 text-neutral-500 mx-auto mb-3" />
|
||||
<h3 className="text-base font-semibold text-white mb-1">No subscription</h3>
|
||||
<p className="text-sm text-neutral-400 mb-4">You're on the free plan.</p>
|
||||
<Link href="/pricing">
|
||||
<Button variant="primary" className="text-sm">View Plans</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const planLabel = (() => {
|
||||
const raw = subscription.plan_id?.startsWith('price_') ? 'Pro'
|
||||
: subscription.plan_id === 'free' || !subscription.plan_id ? 'Free'
|
||||
: subscription.plan_id
|
||||
return raw === 'Free' || raw === 'Pro' ? raw : raw.charAt(0).toUpperCase() + raw.slice(1)
|
||||
})()
|
||||
|
||||
const isActive = subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing'
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-white mb-1">Billing & Subscription</h3>
|
||||
<p className="text-sm text-neutral-400">Manage your plan, usage, and payment details.</p>
|
||||
</div>
|
||||
|
||||
{/* Plan card */}
|
||||
<div className="rounded-xl border border-neutral-800 bg-neutral-800/30 p-5">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<h4 className="text-lg font-bold text-white">{planLabel} Plan</h4>
|
||||
{isActive && (
|
||||
<span className="px-2 py-0.5 text-xs font-medium rounded-full bg-green-900/30 text-green-400 border border-green-900/50">
|
||||
{subscription.subscription_status === 'trialing' ? 'Trial' : 'Active'}
|
||||
</span>
|
||||
)}
|
||||
{subscription.cancel_at_period_end && (
|
||||
<span className="px-2 py-0.5 text-xs font-medium rounded-full bg-yellow-900/30 text-yellow-400 border border-yellow-900/50">
|
||||
Cancelling
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Link href="/pricing">
|
||||
<Button variant="primary" className="text-sm">Change Plan</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Usage stats */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
{typeof subscription.sites_count === 'number' && (
|
||||
<div>
|
||||
<p className="text-xs text-neutral-500 uppercase tracking-wider">Sites</p>
|
||||
<p className="text-lg font-semibold text-white">{subscription.sites_count}</p>
|
||||
</div>
|
||||
)}
|
||||
{subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number' && (
|
||||
<div>
|
||||
<p className="text-xs text-neutral-500 uppercase tracking-wider">Pageviews</p>
|
||||
<p className="text-lg font-semibold text-white">{subscription.pageview_usage.toLocaleString()} / {subscription.pageview_limit.toLocaleString()}</p>
|
||||
</div>
|
||||
)}
|
||||
{subscription.current_period_end && (
|
||||
<div>
|
||||
<p className="text-xs text-neutral-500 uppercase tracking-wider">
|
||||
{subscription.cancel_at_period_end ? 'Ends' : 'Renews'}
|
||||
</p>
|
||||
<p className="text-lg font-semibold text-white">{formatDateLong(new Date(subscription.current_period_end))}</p>
|
||||
</div>
|
||||
)}
|
||||
{subscription.pageview_limit > 0 && (
|
||||
<div>
|
||||
<p className="text-xs text-neutral-500 uppercase tracking-wider">Limit</p>
|
||||
<p className="text-lg font-semibold text-white">{subscription.pageview_limit.toLocaleString()} / mo</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{subscription.has_payment_method && (
|
||||
<Button onClick={handleManageBilling} variant="secondary" className="text-sm gap-1.5">
|
||||
<ArrowSquareOut weight="bold" className="w-3.5 h-3.5" />
|
||||
Payment method & invoices
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{isActive && !subscription.cancel_at_period_end && (
|
||||
<Button
|
||||
onClick={handleCancel}
|
||||
variant="secondary"
|
||||
className="text-sm text-neutral-400 hover:text-red-400"
|
||||
disabled={cancelling}
|
||||
>
|
||||
{cancelling ? 'Cancelling...' : 'Cancel subscription'}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{subscription.cancel_at_period_end && (
|
||||
<Button onClick={handleResume} variant="secondary" className="text-sm text-brand-orange">
|
||||
Resume subscription
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
98
components/settings/unified/tabs/WorkspaceGeneralTab.tsx
Normal file
98
components/settings/unified/tabs/WorkspaceGeneralTab.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Input, Button, toast } from '@ciphera-net/ui'
|
||||
import { Spinner } from '@ciphera-net/ui'
|
||||
import { useAuth } from '@/lib/auth/context'
|
||||
import { getOrganization, updateOrganization } from '@/lib/api/organization'
|
||||
import { getAuthErrorMessage } from '@ciphera-net/ui'
|
||||
|
||||
export default function WorkspaceGeneralTab() {
|
||||
const { user } = useAuth()
|
||||
const [name, setName] = useState('')
|
||||
const [slug, setSlug] = useState('')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!user?.org_id) return
|
||||
setLoading(true)
|
||||
getOrganization(user.org_id)
|
||||
.then(org => {
|
||||
setName(org.name || '')
|
||||
setSlug(org.slug || '')
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false))
|
||||
}, [user?.org_id])
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!user?.org_id) return
|
||||
setSaving(true)
|
||||
try {
|
||||
await updateOrganization(user.org_id, name, slug)
|
||||
toast.success('Workspace updated')
|
||||
} catch (err) {
|
||||
toast.error(getAuthErrorMessage(err as Error) || 'Failed to update workspace')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
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-8">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-white mb-1">General Information</h3>
|
||||
<p className="text-sm text-neutral-400">Basic details about your workspace.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-300 mb-1.5">Organization Name</label>
|
||||
<Input value={name} onChange={e => setName(e.target.value)} placeholder="Acme Corp" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-300 mb-1.5">Organization Slug</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-neutral-500">pulse.ciphera.net/</span>
|
||||
<Input value={slug} onChange={e => setSlug(e.target.value)} placeholder="acme-corp" />
|
||||
</div>
|
||||
<p className="text-xs text-neutral-500 mt-1">Changing the slug will change your organization's URL.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={handleSave} variant="primary" disabled={saving}>
|
||||
{saving ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Danger Zone */}
|
||||
<div className="space-y-3 pt-4 border-t border-neutral-800">
|
||||
<h3 className="text-base font-semibold text-red-500">Danger Zone</h3>
|
||||
<div className="flex items-center justify-between rounded-xl border border-red-900/30 bg-red-900/10 p-4">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-white">Delete Organization</p>
|
||||
<p className="text-xs text-neutral-400">Permanently delete this organization and all its data.</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="text-red-400 border-red-900 hover:bg-red-900/20 text-sm"
|
||||
onClick={() => toast.error('Use Organization Settings page for destructive actions')}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user