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

components/settings/unified/tabs/WorkspaceAuditTab.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 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 { getAuditLog, type AuditLogEntry } from '@/lib/api/audit'
 import { formatDateTimeShort } from '@/lib/utils/formatDate'
@@ -72,48 +72,46 @@ export default function WorkspaceAuditTab() {
       <div className="flex flex-wrap gap-2 items-end">
         <div>
           <label className="block text-xs text-neutral-500 mb-1">Action</label>
-          <input
-            type="text"
+          <Input
             value={actionFilter}
             onChange={e => { setActionFilter(e.target.value); setPage(1) }}
             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>
           <label className="block text-xs text-neutral-500 mb-1">From</label>
-          <input
+          <Input
             type="date"
             value={startDate}
             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>
           <label className="block text-xs text-neutral-500 mb-1">To</label>
-          <input
+          <Input
             type="date"
             value={endDate}
             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>
         {(actionFilter || startDate || endDate) && (
-          <button
+          <Button
+            variant="secondary"
+            className="text-sm"
             onClick={() => { setActionFilter(''); setStartDate(''); setEndDate(''); setPage(1) }}
-            className="text-xs text-neutral-400 hover:text-white px-3 py-1.5"
           >
             Clear
-          </button>
+          </Button>
         )}
       </div>
 
       {entries.length === 0 ? (
         <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 => (
-            <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>
                 <p className="text-sm text-white">
                   <span className="font-medium">{entry.actor_email || 'System'}</span>
@@ -132,25 +130,27 @@ export default function WorkspaceAuditTab() {
         </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">
           {total > 0 ? `${(page - 1) * PAGE_SIZE + 1}–${Math.min(page * PAGE_SIZE, total)} of ${total}` : 'No entries'}
         </span>
         <div className="flex gap-2">
-          <button
+          <Button
+            variant="secondary"
+            className="text-sm"
             onClick={() => setPage(p => Math.max(1, p - 1))}
             disabled={page <= 1}
-            className="px-3 py-1 text-xs text-neutral-400 hover:text-white disabled:opacity-30"
           >
             Previous
-          </button>
-          <button
+          </Button>
+          <Button
+            variant="secondary"
+            className="text-sm"
             onClick={() => setPage(p => p + 1)}
             disabled={page * PAGE_SIZE >= total}
-            className="px-3 py-1 text-xs text-neutral-400 hover:text-white disabled:opacity-30"
           >
             Next
-          </button>
+          </Button>
         </div>
       </div>
     </div>

components/settings/unified/tabs/WorkspaceBillingTab.tsx

@@ -93,7 +93,7 @@ export default function WorkspaceBillingTab() {
       </div>
 
       {/* 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 gap-3">
             <h4 className="text-lg font-bold text-white">{planLabel} Plan</h4>
@@ -173,7 +173,7 @@ export default function WorkspaceBillingTab() {
 
       {/* Recent Invoices */}
       {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>
           <div className="space-y-1">
             {orders.map(order => (

components/settings/unified/tabs/WorkspaceGeneralTab.tsx

@@ -8,6 +8,7 @@ import { useAuth } from '@/lib/auth/context'
 import { getOrganization, updateOrganization, deleteOrganization } from '@/lib/api/organization'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 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 }) {
   const { user } = useAuth()
@@ -83,7 +84,7 @@ export default function WorkspaceGeneralTab({ onDirtyChange, onRegisterSave }: {
   }
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-6">
       <div className="space-y-4">
         <div>
           <h3 className="text-base font-semibold text-white mb-1">General Information</h3>
@@ -106,57 +107,47 @@ export default function WorkspaceGeneralTab({ onDirtyChange, onRegisterSave }: {
       </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="rounded-xl border border-red-900/30 bg-red-900/10 p-4">
-          <div className="flex items-center justify-between">
+      <DangerZone
+        items={[{
+          title: 'Delete Organization',
+          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>
-              <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>
+              <label className="block text-xs text-neutral-400 mb-1">Type DELETE to confirm</label>
+              <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>
-            <Button
-              variant="secondary"
-              className="text-red-400 border-red-900 hover:bg-red-900/20 text-sm"
-              onClick={() => setShowDeleteConfirm(prev => !prev)}
-            >
-              Delete
-            </Button>
           </div>
-          {showDeleteConfirm && (
-            <div className="mt-4 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>
-                <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>
+        )}
+      </DangerZone>
     </div>
   )
 }

components/settings/unified/tabs/WorkspaceMembersTab.tsx

@@ -166,11 +166,14 @@ export default function WorkspaceMembersTab() {
             </div>
           </div>
         ))}
+        {members.length === 0 && (
+          <p className="text-sm text-neutral-500 text-center py-8">No members found.</p>
+        )}
       </div>
 
       {/* Pending Invitations */}
       {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>
           {invitations.map(inv => (
             <div key={inv.id} className="flex items-center justify-between p-3 rounded-xl border border-neutral-800">

components/settings/unified/tabs/WorkspaceNotificationsTab.tsx

@@ -74,7 +74,7 @@ export default function WorkspaceNotificationsTab({ onDirtyChange, onRegisterSav
         ))}
 
         {(!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>