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

fix(settings): normalize all Workspace tabs to design standards

Browse Source
This commit is contained in:
Usman Baig
2026-03-25 22:24:11 +01:00
parent 9893b283cf
commit e7b8943097
5 changed files with 67 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/settings/unified/tabs/WorkspaceAuditTab.tsx
View File

@@ -1,7 +1,7 @@
'use client' 'use client'
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { Spinner } from '@ciphera-net/ui' import { Spinner, Input, Button } from '@ciphera-net/ui'
import { useAuth } from '@/lib/auth/context' import { useAuth } from '@/lib/auth/context'
import { getAuditLog, type AuditLogEntry } from '@/lib/api/audit' import { getAuditLog, type AuditLogEntry } from '@/lib/api/audit'
import { formatDateTimeShort } from '@/lib/utils/formatDate' import { formatDateTimeShort } from '@/lib/utils/formatDate'
@@ -72,48 +72,46 @@ export default function WorkspaceAuditTab() {
<div className="flex flex-wrap gap-2 items-end"> <div className="flex flex-wrap gap-2 items-end">
<div> <div>
<label className="block text-xs text-neutral-500 mb-1">Action</label> <label className="block text-xs text-neutral-500 mb-1">Action</label>
<input <Input
type="text"
value={actionFilter} value={actionFilter}
onChange={e => { setActionFilter(e.target.value); setPage(1) }} onChange={e => { setActionFilter(e.target.value); setPage(1) }}
placeholder="e.g. site_created" placeholder="e.g. site_created"
className="px-3 py-1.5 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm w-40" className="w-40"
/> />
</div> </div>
<div> <div>
<label className="block text-xs text-neutral-500 mb-1">From</label> <label className="block text-xs text-neutral-500 mb-1">From</label>
<input <Input
type="date" type="date"
value={startDate} value={startDate}
onChange={e => { setStartDate(e.target.value); setPage(1) }} onChange={e => { setStartDate(e.target.value); setPage(1) }}
className="px-3 py-1.5 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
/> />
</div> </div>
<div> <div>
<label className="block text-xs text-neutral-500 mb-1">To</label> <label className="block text-xs text-neutral-500 mb-1">To</label>
<input <Input
type="date" type="date"
value={endDate} value={endDate}
onChange={e => { setEndDate(e.target.value); setPage(1) }} onChange={e => { setEndDate(e.target.value); setPage(1) }}
className="px-3 py-1.5 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
/> />
</div> </div>
{(actionFilter || startDate || endDate) && ( {(actionFilter || startDate || endDate) && (
<button <Button
variant="secondary"
className="text-sm"
onClick={() => { setActionFilter(''); setStartDate(''); setEndDate(''); setPage(1) }} onClick={() => { setActionFilter(''); setStartDate(''); setEndDate(''); setPage(1) }}
className="text-xs text-neutral-400 hover:text-white px-3 py-1.5"
> >
Clear Clear
</button> </Button>
)} )}
</div> </div>
{entries.length === 0 ? ( {entries.length === 0 ? (
<p className="text-sm text-neutral-500 text-center py-8">No activity recorded yet.</p> <p className="text-sm text-neutral-500 text-center py-8">No activity recorded yet.</p>
) : ( ) : (
<div className="space-y-0.5"> <div className="space-y-1">
{entries.map(entry => ( {entries.map(entry => (
<div key={entry.id} className="flex items-center justify-between px-4 py-3 rounded-xl hover:bg-neutral-800/20 transition-colors"> <div key={entry.id} className="flex items-center justify-between px-4 py-3 rounded-xl hover:bg-neutral-800/40 transition-colors">
<div> <div>
<p className="text-sm text-white"> <p className="text-sm text-white">
<span className="font-medium">{entry.actor_email || 'System'}</span> <span className="font-medium">{entry.actor_email || 'System'}</span>
@@ -132,25 +130,27 @@ export default function WorkspaceAuditTab() {
</div> </div>
)} )}
<div className="flex items-center justify-between pt-3 border-t border-neutral-800"> <div className="flex items-center justify-between pt-6 border-t border-neutral-800">
<span className="text-xs text-neutral-500"> <span className="text-xs text-neutral-500">
{total > 0 ? `${(page - 1) * PAGE_SIZE + 1}–${Math.min(page * PAGE_SIZE, total)} of ${total}` : 'No entries'} {total > 0 ? `${(page - 1) * PAGE_SIZE + 1}–${Math.min(page * PAGE_SIZE, total)} of ${total}` : 'No entries'}
</span> </span>
<div className="flex gap-2"> <div className="flex gap-2">
<button <Button
variant="secondary"
className="text-sm"
onClick={() => setPage(p => Math.max(1, p - 1))} onClick={() => setPage(p => Math.max(1, p - 1))}
disabled={page <= 1} disabled={page <= 1}
className="px-3 py-1 text-xs text-neutral-400 hover:text-white disabled:opacity-30"
> >
Previous Previous
</button> </Button>
<button <Button
variant="secondary"
className="text-sm"
onClick={() => setPage(p => p + 1)} onClick={() => setPage(p => p + 1)}
disabled={page * PAGE_SIZE >= total} disabled={page * PAGE_SIZE >= total}
className="px-3 py-1 text-xs text-neutral-400 hover:text-white disabled:opacity-30"
> >
Next Next
</button> </Button>
</div> </div>
</div> </div>
</div> </div>

4
components/settings/unified/tabs/WorkspaceBillingTab.tsx
View File

@@ -93,7 +93,7 @@ export default function WorkspaceBillingTab() {
</div> </div>
{/* Plan card */} {/* Plan card */}
<div className="rounded-xl border border-neutral-800 bg-neutral-800/30 p-5"> <div className="rounded-xl border border-neutral-800 bg-neutral-800/30 p-4">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<h4 className="text-lg font-bold text-white">{planLabel} Plan</h4> <h4 className="text-lg font-bold text-white">{planLabel} Plan</h4>
@@ -173,7 +173,7 @@ export default function WorkspaceBillingTab() {
{/* Recent Invoices */} {/* Recent Invoices */}
{orders.length > 0 && ( {orders.length > 0 && (
<div className="space-y-2 pt-4 border-t border-neutral-800"> <div className="space-y-2 pt-6 border-t border-neutral-800">
<h4 className="text-sm font-medium text-neutral-300">Recent Invoices</h4> <h4 className="text-sm font-medium text-neutral-300">Recent Invoices</h4>
<div className="space-y-1"> <div className="space-y-1">
{orders.map(order => ( {orders.map(order => (

89
components/settings/unified/tabs/WorkspaceGeneralTab.tsx
View File

@@ -8,6 +8,7 @@ import { useAuth } from '@/lib/auth/context'
import { getOrganization, updateOrganization, deleteOrganization } from '@/lib/api/organization' import { getOrganization, updateOrganization, deleteOrganization } from '@/lib/api/organization'
import { getAuthErrorMessage } from '@ciphera-net/ui' import { getAuthErrorMessage } from '@ciphera-net/ui'
import { useUnifiedSettings } from '@/lib/unified-settings-context' import { useUnifiedSettings } from '@/lib/unified-settings-context'
import { DangerZone } from '@/components/settings/unified/DangerZone'
export default function WorkspaceGeneralTab({ onDirtyChange, onRegisterSave }: { onDirtyChange?: (dirty: boolean) => void; onRegisterSave?: (fn: () => Promise<void>) => void }) { export default function WorkspaceGeneralTab({ onDirtyChange, onRegisterSave }: { onDirtyChange?: (dirty: boolean) => void; onRegisterSave?: (fn: () => Promise<void>) => void }) {
const { user } = useAuth() const { user } = useAuth()
@@ -83,7 +84,7 @@ export default function WorkspaceGeneralTab({ onDirtyChange, onRegisterSave }: {
} }
return ( return (
<div className="space-y-8"> <div className="space-y-6">
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h3 className="text-base font-semibold text-white mb-1">General Information</h3> <h3 className="text-base font-semibold text-white mb-1">General Information</h3>
@@ -106,57 +107,47 @@ export default function WorkspaceGeneralTab({ onDirtyChange, onRegisterSave }: {
</div> </div>
{/* Danger Zone */} {/* Danger Zone */}
<div className="space-y-3 pt-4 border-t border-neutral-800"> <DangerZone
<h3 className="text-base font-semibold text-red-500">Danger Zone</h3> items={[{
<div className="rounded-xl border border-red-900/30 bg-red-900/10 p-4"> title: 'Delete Organization',
<div className="flex items-center justify-between"> description: 'Permanently delete this organization and all its data.',
buttonLabel: 'Delete',
variant: 'solid',
onClick: () => setShowDeleteConfirm(prev => !prev),
}]}
>
{showDeleteConfirm && (
<div className="p-4 border border-red-900/50 bg-red-900/10 rounded-xl space-y-3">
<p className="text-sm text-red-300">This will permanently delete:</p>
<ul className="text-xs text-neutral-400 list-disc list-inside space-y-1">
<li>All sites and their analytics data</li>
<li>All team members and pending invitations</li>
<li>Active subscription will be cancelled</li>
<li>All notifications and settings</li>
</ul>
<div> <div>
<p className="text-sm font-medium text-white">Delete Organization</p> <label className="block text-xs text-neutral-400 mb-1">Type DELETE to confirm</label>
<p className="text-xs text-neutral-400">Permanently delete this organization and all its data.</p> <Input
value={deleteText}
onChange={e => setDeleteText(e.target.value)}
placeholder="DELETE"
/>
</div>
<div className="flex gap-2">
<button
onClick={handleDelete}
disabled={deleteText !== 'DELETE' || deleting}
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium disabled:opacity-50"
>
{deleting ? 'Deleting...' : 'Delete Organization'}
</button>
<button onClick={() => { setShowDeleteConfirm(false); setDeleteText('') }} className="px-4 py-2 text-neutral-400 hover:text-white text-sm">
Cancel
</button>
</div> </div>
<Button
variant="secondary"
className="text-red-400 border-red-900 hover:bg-red-900/20 text-sm"
onClick={() => setShowDeleteConfirm(prev => !prev)}
>
Delete
</Button>
</div> </div>
{showDeleteConfirm && ( )}
<div className="mt-4 p-4 border border-red-900/50 bg-red-900/10 rounded-xl space-y-3"> </DangerZone>
<p className="text-sm text-red-300">This will permanently delete:</p>
<ul className="text-xs text-neutral-400 list-disc list-inside space-y-1">
<li>All sites and their analytics data</li>
<li>All team members and pending invitations</li>
<li>Active subscription will be cancelled</li>
<li>All notifications and settings</li>
</ul>
<div>
<label className="block text-xs text-neutral-400 mb-1">Type DELETE to confirm</label>
<input
type="text"
value={deleteText}
onChange={e => setDeleteText(e.target.value)}
className="w-full px-3 py-2 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
placeholder="DELETE"
/>
</div>
<div className="flex gap-2">
<button
onClick={handleDelete}
disabled={deleteText !== 'DELETE' || deleting}
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium disabled:opacity-50"
>
{deleting ? 'Deleting...' : 'Delete Organization'}
</button>
<button onClick={() => { setShowDeleteConfirm(false); setDeleteText('') }} className="px-4 py-2 text-neutral-400 hover:text-white text-sm">
Cancel
</button>
</div>
</div>
)}
</div>
</div>
</div> </div>
) )
} }

5
components/settings/unified/tabs/WorkspaceMembersTab.tsx
View File

@@ -166,11 +166,14 @@ export default function WorkspaceMembersTab() {
</div> </div>
</div> </div>
))} ))}
{members.length === 0 && (
<p className="text-sm text-neutral-500 text-center py-8">No members found.</p>
)}
</div> </div>
{/* Pending Invitations */} {/* Pending Invitations */}
{invitations.length > 0 && ( {invitations.length > 0 && (
<div className="space-y-2 pt-4 border-t border-neutral-800"> <div className="space-y-2 pt-6 border-t border-neutral-800">
<h4 className="text-sm font-medium text-neutral-300">Pending Invitations</h4> <h4 className="text-sm font-medium text-neutral-300">Pending Invitations</h4>
{invitations.map(inv => ( {invitations.map(inv => (
<div key={inv.id} className="flex items-center justify-between p-3 rounded-xl border border-neutral-800"> <div key={inv.id} className="flex items-center justify-between p-3 rounded-xl border border-neutral-800">

2
components/settings/unified/tabs/WorkspaceNotificationsTab.tsx
View File

@@ -74,7 +74,7 @@ export default function WorkspaceNotificationsTab({ onDirtyChange, onRegisterSav
))} ))}
{(!data?.categories || data.categories.length === 0) && ( {(!data?.categories || data.categories.length === 0) && (
<p className="text-sm text-neutral-500 text-center py-6">No notification preferences available.</p> <p className="text-sm text-neutral-500 text-center py-8">No notification preferences available.</p>
)} )}
</div> </div>
</div> </div>