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

feat: update subscription display and organization settings UI to include plan usage details and loading states

Browse Source
This commit is contained in:
Usman Baig
2026-02-05 11:29:38 +01:00
parent ffe6f464e6
commit 7929e15b65
4 changed files with 74 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/settings/OrganizationSettings.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import { useState, useEffect, useCallback } from 'react'
import { useRouter } from 'next/navigation'
import { useRouter, useSearchParams } from 'next/navigation'
import { useAuth } from '@/lib/auth/context'
import {
deleteOrganization,
@@ -38,7 +38,11 @@ import { Button, Input } from '@ciphera-net/ui'
export default function OrganizationSettings() {
const { user } = useAuth()
const router = useRouter()
const [activeTab, setActiveTab] = useState<'general' | 'members' | 'billing'>('general')
const searchParams = useSearchParams()
const [activeTab, setActiveTab] = useState<'general' | 'members' | 'billing'>(() => {
const tab = searchParams.get('tab')
return tab === 'billing' || tab === 'members' ? tab : 'general'
})
const [showDeletePrompt, setShowDeletePrompt] = useState(false)
const [deleteConfirm, setDeleteConfirm] = useState('')
@@ -135,6 +139,13 @@ export default function OrganizationSettings() {
}
}, [currentOrgId, loadMembers])
useEffect(() => {
const tab = searchParams.get('tab')
if (tab === 'billing' || tab === 'members') {
setActiveTab(tab)
}
}, [searchParams])
useEffect(() => {
if (activeTab === 'billing' && currentOrgId) {
loadSubscription()
@@ -593,7 +604,25 @@ export default function OrganizationSettings() {
)}
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-6 border-t border-neutral-200 dark:border-neutral-800">
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 pt-6 border-t border-neutral-200 dark:border-neutral-800">
<div>
<div className="text-sm text-neutral-500 mb-1">Sites</div>
<div className="font-medium text-neutral-900 dark:text-white">
{typeof subscription.sites_count === 'number'
? subscription.plan_id === 'solo'
? `${subscription.sites_count} / 1`
: `${subscription.sites_count}`
: '—'}
</div>
</div>
<div>
<div className="text-sm text-neutral-500 mb-1">Pageviews this period</div>
<div className="font-medium text-neutral-900 dark:text-white">
{subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number'
? `${subscription.pageview_usage.toLocaleString()} / ${subscription.pageview_limit.toLocaleString()}`
: '—'}
</div>
</div>
<div>
<div className="text-sm text-neutral-500 mb-1">Billing Interval</div>
<div className="font-medium text-neutral-900 dark:text-white capitalize">