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

Merge branch 'main' into staging

Browse Source
This commit is contained in:
Usman
2026-02-09 09:58:56 +01:00
committed by GitHub
parent d35ef6e55a 34c854ed7c
commit 48a27acebc
4 changed files with 70 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/layout-content.tsx
View File

@@ -17,7 +17,7 @@ export default function LayoutContent({ children }: { children: React.ReactNode
const isOnline = useOnlineStatus()
const [orgs, setOrgs] = useState<any[]>([])
// * Fetch organizations for the header workspace switcher
// * Fetch organizations for the header organization switcher
useEffect(() => {
if (auth.user) {
getUserOrganizations()
@@ -27,7 +27,7 @@ export default function LayoutContent({ children }: { children: React.ReactNode
}, [auth.user])
const handleSwitchOrganization = async (orgId: string | null) => {
if (!orgId) return // Pulse doesn't support personal workspace
if (!orgId) return // Pulse doesn't support personal organization context
try {
const { access_token } = await switchContext(orgId)
await setSessionAction(access_token)

90
app/welcome/page.tsx
View File

@@ -2,7 +2,7 @@
/**
* Guided onboarding wizard for new Pulse users.
* Steps: Welcome → Workspace (create org) → Plan / trial → First site (optional) → Done.
* Steps: Welcome → Organization (create org) → Plan / trial → First site (optional) → Done.
* Supports ?step= in URL for back/refresh. Handles pulse_pending_checkout from pricing.
*/
@@ -45,6 +45,7 @@ import {
} from '@ciphera-net/ui'
import Link from 'next/link'
import ScriptSetupBlock from '@/components/sites/ScriptSetupBlock'
import VerificationModal from '@/components/sites/VerificationModal'
const TOTAL_STEPS = 5
const DEFAULT_ORG_NAME = 'My organization'
@@ -97,6 +98,7 @@ function WelcomeContent() {
const [siteLoading, setSiteLoading] = useState(false)
const [siteError, setSiteError] = useState('')
const [createdSite, setCreatedSite] = useState<Site | null>(null)
const [showVerificationModal, setShowVerificationModal] = useState(false)
const [redirectingCheckout, setRedirectingCheckout] = useState(false)
const [hadPendingCheckout, setHadPendingCheckout] = useState<boolean | null>(null)
@@ -176,7 +178,7 @@ function WelcomeContent() {
)
}
const handleWorkspaceSubmit = async (e: React.FormEvent) => {
const handleOrganizationSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setOrgLoading(true)
setOrgError('')
@@ -333,7 +335,7 @@ function WelcomeContent() {
'bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl shadow-sm p-8 max-w-lg mx-auto'
return (
<div className="min-h-[80vh] flex flex-col items-center justify-center bg-neutral-50 dark:bg-neutral-950 px-4 py-12">
<div className="flex-1 flex flex-col items-center justify-center bg-neutral-50 dark:bg-neutral-950 px-4 py-12">
<div className="w-full max-w-lg">
<div
className="flex justify-center gap-1.5 mb-8"
@@ -473,7 +475,7 @@ function WelcomeContent() {
<button
type="button"
onClick={() => setStep(1)}
className="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6"
className="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded"
aria-label="Back to welcome"
>
<ArrowLeftIcon className="h-4 w-4" />
@@ -483,14 +485,14 @@ function WelcomeContent() {
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange/10 text-brand-orange mb-4">
<BarChartIcon className="h-7 w-7" />
</div>
<h2 className="text-xl font-bold text-neutral-900 dark:text-white">
<h1 className="text-xl font-bold text-neutral-900 dark:text-white">
Name your organization
</h2>
</h1>
<p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
You can change this later in settings.
</p>
</div>
<form onSubmit={handleWorkspaceSubmit} className="space-y-4">
<form onSubmit={handleOrganizationSubmit} className="space-y-4">
<div>
<label htmlFor="welcome-org-name" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
Organization name
@@ -544,7 +546,7 @@ function WelcomeContent() {
<button
type="button"
onClick={() => setStep(2)}
className="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6"
className="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded"
aria-label="Back to organization"
>
<ArrowLeftIcon className="h-4 w-4" />
@@ -554,9 +556,9 @@ function WelcomeContent() {
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10 text-green-600 dark:text-green-400 mb-4">
<CheckCircleIcon className="h-7 w-7" />
</div>
<h2 className="text-xl font-bold text-neutral-900 dark:text-white">
<h1 className="text-xl font-bold text-neutral-900 dark:text-white">
{showPendingCheckoutInStep3 ? 'Complete your plan' : "You're on the free plan"}
</h2>
</h1>
<p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
{showPendingCheckoutInStep3
? 'You chose a plan on the pricing page. Continue to add a payment method and start your trial.'
@@ -587,33 +589,32 @@ function WelcomeContent() {
</Button>
</>
) : (
<>
<Button
variant="primary"
className="w-full sm:w-auto"
onClick={() => setStep(4)}
>
Continue
<ArrowRightIcon className="ml-2 h-4 w-4" />
</Button>
<p className="mt-4 text-center">
<Link href="/pricing" className="text-sm text-brand-orange hover:underline">
View pricing
</Link>
</p>
</>
<Button
variant="primary"
className="w-full sm:w-auto"
onClick={() => setStep(4)}
>
Continue
<ArrowRightIcon className="ml-2 h-4 w-4" />
</Button>
)}
</div>
{showPendingCheckoutInStep3 && (
{showPendingCheckoutInStep3 ? (
<p className="mt-4 text-center">
<button
type="button"
onClick={() => router.push('/pricing')}
className="text-sm text-brand-orange hover:underline"
className="text-sm text-brand-orange hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange rounded"
>
Choose a different plan
</button>
</p>
) : (
<p className="mt-4 text-center">
<Link href="/pricing" className="text-sm text-brand-orange hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange rounded">
View pricing
</Link>
</p>
)}
</motion.div>
)}
@@ -630,7 +631,7 @@ function WelcomeContent() {
<button
type="button"
onClick={() => setStep(3)}
className="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6"
className="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded"
aria-label="Back to plan"
>
<ArrowLeftIcon className="h-4 w-4" />
@@ -640,9 +641,9 @@ function WelcomeContent() {
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange/10 text-brand-orange mb-4">
<GlobeIcon className="h-7 w-7" />
</div>
<h2 className="text-xl font-bold text-neutral-900 dark:text-white">
<h1 className="text-xl font-bold text-neutral-900 dark:text-white">
Add your first site
</h2>
</h1>
<p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
Optional. You can add sites later from the dashboard.
</p>
@@ -673,7 +674,7 @@ function WelcomeContent() {
onChange={(e) => setSiteDomain(e.target.value.toLowerCase().trim())}
className="w-full"
/>
<p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
<p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
Without http:// or https://
</p>
</div>
@@ -723,9 +724,9 @@ function WelcomeContent() {
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10 text-green-600 dark:text-green-400 mb-6">
<CheckCircleIcon className="h-7 w-7" />
</div>
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white">
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
You're all set
</h2>
</h1>
<p className="mt-2 text-neutral-600 dark:text-neutral-400">
{createdSite
? `"${createdSite.name}" is ready. Add the script to your site to start collecting data.`
@@ -742,6 +743,21 @@ function WelcomeContent() {
</div>
)}
{createdSite && (
<div className="mt-6 flex flex-wrap items-center justify-center gap-2">
<button
type="button"
onClick={() => setShowVerificationModal(true)}
className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-xl hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all text-sm font-medium focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
>
<span className="text-brand-orange">Verify installation</span>
</button>
<p className="text-xs text-neutral-500 dark:text-neutral-400">
Check if your site is sending data correctly.
</p>
</div>
)}
<div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
<Button variant="primary" onClick={goToDashboard} className="min-w-[160px]">
Go to dashboard
@@ -752,6 +768,14 @@ function WelcomeContent() {
</Button>
)}
</div>
{createdSite && (
<VerificationModal
isOpen={showVerificationModal}
onClose={() => setShowVerificationModal(false)}
site={createdSite}
/>
)}
</motion.div>
)}
</AnimatePresence>

18
components/WorkspaceSwitcher.tsx
View File

@@ -7,16 +7,16 @@ import { switchContext, OrganizationMember } from '@/lib/api/organization'
import { setSessionAction } from '@/app/actions/auth'
import Link from 'next/link'
export default function WorkspaceSwitcher({ orgs, activeOrgId }: { orgs: OrganizationMember[], activeOrgId: string | null }) {
export default function OrganizationSwitcher({ orgs, activeOrgId }: { orgs: OrganizationMember[], activeOrgId: string | null }) {
const router = useRouter()
const [switching, setSwitching] = useState<string | null>(null)
const handleSwitch = async (orgId: string | null) => {
console.log('Switching to workspace:', orgId)
console.log('Switching to organization:', orgId)
setSwitching(orgId || 'personal')
try {
// * If orgId is null, we can't switch context via API in the same way if strict mode is on
// * BUT, Pulse doesn't support personal workspace.
// * Pulse doesn't support personal organization context.
// * So we should probably NOT show the "Personal" option in Pulse if strict mode is enforced.
// * However, to match Drop exactly, we might want to show it but have it fail or redirect?
// * Let's assume for now we want to match Drop's UI structure.
@@ -38,7 +38,7 @@ export default function WorkspaceSwitcher({ orgs, activeOrgId }: { orgs: Organiz
window.location.reload()
} catch (err) {
console.error('Failed to switch workspace', err)
console.error('Failed to switch organization', err)
setSwitching(null)
}
}
@@ -46,10 +46,10 @@ export default function WorkspaceSwitcher({ orgs, activeOrgId }: { orgs: Organiz
return (
<div className="border-b border-neutral-100 dark:border-neutral-800 pb-2 mb-2">
<div className="px-3 py-2 text-xs font-medium text-neutral-500 uppercase tracking-wider">
Workspaces
Organizations
</div>
{/* Personal Workspace - HIDDEN IN PULSE (Strict Mode) */}
{/* Personal organization - HIDDEN IN PULSE (Strict Mode) */}
{/*
<button
onClick={() => handleSwitch(null)}
@@ -70,7 +70,7 @@ export default function WorkspaceSwitcher({ orgs, activeOrgId }: { orgs: Organiz
</button>
*/}
{/* Organization Workspaces */}
{/* Organization list */}
{orgs.map((org) => (
<button
key={org.organization_id}

4
components/settings/OrganizationSettings.tsx
View File

@@ -237,11 +237,11 @@ export default function OrganizationSettings() {
}
}, [activeTab, currentOrgId, loadAudit, auditFetchTrigger])
// If no org ID, we are in personal workspace, so don't show org settings
// If no org ID, we are in personal organization context, so don't show org settings
if (!currentOrgId) {
return (
<div className="p-6 text-center text-neutral-500">
<p>You are in your Personal Workspace. Switch to an Organization to manage its settings.</p>
<p>You are in your personal context. Switch to an Organization to manage its settings.</p>
</div>
)
}