refactor(settings): decompose settings-client into panels (slice 7)
663-line settings-client.tsx → a 79-line orchestrator (activeTab + shared save
status) + settings/panels/{space,integrations,dues,webhooks}-panel.tsx each
owning its own form state + types.ts. Server-action calls and fields preserved
verbatim. tsc 0, build ok.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Moheeb Zara
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
7bc6609ac2
commit
543b1d65eb
@@ -0,0 +1,14 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { StripeBillingPanel } from '@/components/settings/stripe-billing-panel'
|
||||||
|
import { DuesPaymentMethodsPanel } from '@/components/settings/dues-payment-methods-panel'
|
||||||
|
|
||||||
|
// Dues Tab: how members pay dues (Stripe recurring + external links)
|
||||||
|
export function DuesPanel({ spaceId }: { spaceId: string }) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<StripeBillingPanel spaceId={spaceId} />
|
||||||
|
<DuesPaymentMethodsPanel />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,247 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { Check, Eye, EyeOff } from 'lucide-react'
|
||||||
|
import { saveIntegration, disconnectIntegration } from '@/lib/actions'
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||||
|
import type { IntegrationConfig, Integration, SaveStatus } from '../types'
|
||||||
|
|
||||||
|
const INTEGRATIONS_CONFIG: IntegrationConfig[] = [
|
||||||
|
{
|
||||||
|
platform: 'paypal',
|
||||||
|
name: 'PayPal',
|
||||||
|
description: 'Sync transactions for member dues',
|
||||||
|
icon: (
|
||||||
|
<svg className="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M7.5 2h9.3c2.7 0 4.5 1.9 4 4.5l-1.3 8.4c-.4 2.6-2.5 4.1-5.2 4.1H10l-.6 3H5.8L7.5 2zm2 2.2L7.6 17h3.8c1.6 0 2.8-.9 3-2.5l1.3-8.4c.2-1.2-.5-1.9-1.7-1.9H9.5z"/>
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
fields: [
|
||||||
|
{ key: 'client_id', label: 'Client ID', type: 'text', placeholder: 'Sandbox or Live Client ID' },
|
||||||
|
{ key: 'client_secret', label: 'Client Secret', type: 'password', placeholder: 'Client Secret from PayPal Developer' },
|
||||||
|
{ key: 'mode', label: 'Mode', type: 'select', options: ['sandbox', 'live'] },
|
||||||
|
],
|
||||||
|
docs: 'https://developer.paypal.com/api/rest/',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
platform: 'zeffy',
|
||||||
|
name: 'Zeffy',
|
||||||
|
description: 'Nonprofit payment and donation sync',
|
||||||
|
icon: (
|
||||||
|
<svg className="w-6 h-6 text-violet-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.512M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
fields: [
|
||||||
|
{ key: 'api_key', label: 'API Key', type: 'password', placeholder: 'Zeffy API Key' },
|
||||||
|
{ key: 'organization_id', label: 'Organization ID', type: 'text', placeholder: 'Your Zeffy Org ID' },
|
||||||
|
],
|
||||||
|
docs: 'https://docs.zeffy.com/',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
platform: 'venmo',
|
||||||
|
name: 'Venmo',
|
||||||
|
description: 'Pull Venmo business transactions',
|
||||||
|
icon: (
|
||||||
|
<svg className="w-6 h-6 text-green-600" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M19.5 3c.7 1.3 1 2.6 1 4.1 0 4.3-3.7 9.8-6.7 13.9H7.1L4.5 3h5.3l1.4 11.4C12.5 12 14.1 8.7 14.1 6.3c0-1.3-.2-2.2-.6-2.9L19.5 3z"/>
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
fields: [
|
||||||
|
{ key: 'access_token', label: 'Access Token', type: 'password', placeholder: 'Venmo API Access Token' },
|
||||||
|
],
|
||||||
|
docs: 'https://developer.venmo.com/',
|
||||||
|
},
|
||||||
|
// Stripe is intentionally NOT listed here. Stripe recurring dues is
|
||||||
|
// configured in the dedicated Dues tab (saveStripeSettings: mode, tier->price
|
||||||
|
// map, grace days, vaulted keys). The generic saveIntegration path OVERWRITES
|
||||||
|
// integrations.config with a different shape, which would clobber the dues
|
||||||
|
// config (drop prices/mode/grace_days). One Stripe config UI, in Dues.
|
||||||
|
]
|
||||||
|
|
||||||
|
interface Props extends SaveStatus {
|
||||||
|
integrations: Integration[]
|
||||||
|
isAdmin: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function IntegrationsPanel({ integrations, isAdmin, saving, setSaving, setMessage }: Props) {
|
||||||
|
const [editingIntegration, setEditingIntegration] = useState<IntegrationConfig | null>(null)
|
||||||
|
const [integrationForm, setIntegrationForm] = useState<Record<string, string>>({})
|
||||||
|
const [showSecrets, setShowSecrets] = useState<Record<string, boolean>>({})
|
||||||
|
|
||||||
|
async function handleSaveIntegration(e: React.FormEvent) {
|
||||||
|
e.preventDefault()
|
||||||
|
if (!editingIntegration || !isAdmin) return
|
||||||
|
setSaving(true)
|
||||||
|
setMessage(null)
|
||||||
|
const result = await saveIntegration(editingIntegration.platform, integrationForm)
|
||||||
|
if (result.error) {
|
||||||
|
setMessage({ type: 'error', text: result.error })
|
||||||
|
} else {
|
||||||
|
setMessage({ type: 'success', text: `${editingIntegration.name} connected!` })
|
||||||
|
setEditingIntegration(null)
|
||||||
|
}
|
||||||
|
setSaving(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDisconnect(platform: string) {
|
||||||
|
if (!isAdmin) return
|
||||||
|
setSaving(true)
|
||||||
|
await disconnectIntegration(platform)
|
||||||
|
setSaving(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
function openIntegrationModal(config: IntegrationConfig) {
|
||||||
|
const existing = integrations.find(i => i.platform === config.platform)
|
||||||
|
const initialForm: Record<string, string> = {}
|
||||||
|
config.fields.forEach(f => {
|
||||||
|
initialForm[f.key] = (existing?.config as Record<string, string> | undefined)?.[f.key] || ''
|
||||||
|
})
|
||||||
|
setIntegrationForm(initialForm)
|
||||||
|
setEditingIntegration(config)
|
||||||
|
}
|
||||||
|
|
||||||
|
const getIntegrationStatus = (platform: string) => integrations.find(i => i.platform === platform)?.is_connected ?? false
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="bg-card rounded border border-border p-6">
|
||||||
|
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-6">Integrations</p>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{INTEGRATIONS_CONFIG.map(config => {
|
||||||
|
const connected = getIntegrationStatus(config.platform)
|
||||||
|
return (
|
||||||
|
<div key={config.platform} className="flex items-center gap-4 p-4 border border-border rounded hover:border-primary/30 transition">
|
||||||
|
<div className="w-8 h-8 flex items-center justify-center flex-shrink-0">{config.icon}</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="font-sans text-sm font-medium text-foreground">{config.name}</p>
|
||||||
|
<p className="font-sans text-xs text-muted-foreground">{config.description}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{connected ? (
|
||||||
|
<>
|
||||||
|
<span className="flex items-center gap-1 font-mono text-[10px] text-primary">
|
||||||
|
<Check className="w-3 h-3" /> Connected
|
||||||
|
</span>
|
||||||
|
{isAdmin && (
|
||||||
|
<button
|
||||||
|
onClick={() => openIntegrationModal(config)}
|
||||||
|
className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-primary hover:text-primary transition"
|
||||||
|
>
|
||||||
|
Manage
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : isAdmin ? (
|
||||||
|
<button
|
||||||
|
onClick={() => openIntegrationModal(config)}
|
||||||
|
className="font-mono text-[10px] bg-primary text-white px-3 py-1 rounded hover:bg-primary/90 transition"
|
||||||
|
>
|
||||||
|
Connect
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<span className="font-mono text-[10px] text-muted-foreground">Not connected</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Integration Config Modal */}
|
||||||
|
<Dialog open={!!editingIntegration} onOpenChange={(o) => { if (!o) setEditingIntegration(null) }}>
|
||||||
|
<DialogContent className="sm:max-w-md">
|
||||||
|
{editingIntegration && (
|
||||||
|
<>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="flex items-center gap-2">
|
||||||
|
<div className="w-6 h-6 flex items-center justify-center">{editingIntegration.icon}</div>
|
||||||
|
{editingIntegration.name}
|
||||||
|
</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<form onSubmit={handleSaveIntegration} className="space-y-4">
|
||||||
|
{editingIntegration.fields.map(field => (
|
||||||
|
<div key={field.key}>
|
||||||
|
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">{field.label}</label>
|
||||||
|
{field.type === 'select' ? (
|
||||||
|
<select
|
||||||
|
value={integrationForm[field.key] || ''}
|
||||||
|
onChange={e => setIntegrationForm(f => ({ ...f, [field.key]: e.target.value }))}
|
||||||
|
className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground focus:outline-none focus:border-primary"
|
||||||
|
>
|
||||||
|
<option value="">Select...</option>
|
||||||
|
{field.options?.map(opt => <option key={opt} value={opt}>{opt}</option>)}
|
||||||
|
</select>
|
||||||
|
) : (
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type={field.type === 'password' && !showSecrets[field.key] ? 'password' : 'text'}
|
||||||
|
value={integrationForm[field.key] || ''}
|
||||||
|
onChange={e => setIntegrationForm(f => ({ ...f, [field.key]: e.target.value }))}
|
||||||
|
placeholder={field.placeholder}
|
||||||
|
className="w-full bg-background border border-border rounded px-3 py-2 pr-10 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary"
|
||||||
|
/>
|
||||||
|
{field.type === 'password' && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowSecrets(s => ({ ...s, [field.key]: !s[field.key] }))}
|
||||||
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||||
|
>
|
||||||
|
{showSecrets[field.key] ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between pt-2">
|
||||||
|
<a
|
||||||
|
href={editingIntegration.docs}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="font-mono text-[10px] text-primary hover:underline"
|
||||||
|
>
|
||||||
|
View API Docs →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3 pt-2">
|
||||||
|
{getIntegrationStatus(editingIntegration.platform) && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
handleDisconnect(editingIntegration.platform)
|
||||||
|
setEditingIntegration(null)
|
||||||
|
}}
|
||||||
|
className="flex-1 border border-red-200 text-red-600 font-sans text-sm py-2 rounded hover:bg-red-50 transition"
|
||||||
|
>
|
||||||
|
Disconnect
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setEditingIntegration(null)}
|
||||||
|
className="flex-1 border border-border text-foreground font-sans text-sm py-2 rounded hover:border-primary/50 transition"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={saving}
|
||||||
|
className="flex-1 bg-primary text-white font-sans text-sm py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{saving ? 'Saving...' : 'Save'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,244 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { Copy } from 'lucide-react'
|
||||||
|
import { updateSpaceSettings, updateSpaceVisibility } from '@/lib/actions'
|
||||||
|
import { financialVisibilities, directoryVisibilities } from '@/lib/validations'
|
||||||
|
import type { SaveStatus, Space, SpaceExt } from '../types'
|
||||||
|
|
||||||
|
interface Props extends SaveStatus {
|
||||||
|
space: Space
|
||||||
|
isAdmin: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SpacePanel({ space, isAdmin, saving, setSaving, setMessage }: Props) {
|
||||||
|
const spaceExt = space as SpaceExt
|
||||||
|
|
||||||
|
// Space form (basic + mission statement)
|
||||||
|
const [spaceForm, setSpaceForm] = useState({
|
||||||
|
name: space.name || '',
|
||||||
|
slug: space.slug || '',
|
||||||
|
city: space.city || '',
|
||||||
|
require_approval: space.require_approval ?? true,
|
||||||
|
public_member_directory: space.public_member_directory ?? false,
|
||||||
|
mission_statement: spaceExt.mission_statement || '',
|
||||||
|
})
|
||||||
|
|
||||||
|
// Visibility form (governance) — separate server action, separate save.
|
||||||
|
const [visibilityForm, setVisibilityForm] = useState({
|
||||||
|
financial_visibility: (spaceExt.financial_visibility as string | undefined) || 'board_visible',
|
||||||
|
member_directory_visibility: (spaceExt.member_directory_visibility as string | undefined) || 'members_visible',
|
||||||
|
})
|
||||||
|
|
||||||
|
async function handleSaveSpace(e: React.FormEvent) {
|
||||||
|
e.preventDefault()
|
||||||
|
if (!isAdmin) return
|
||||||
|
setSaving(true)
|
||||||
|
setMessage(null)
|
||||||
|
const result = await updateSpaceSettings(spaceForm)
|
||||||
|
if (result.error) {
|
||||||
|
setMessage({ type: 'error', text: result.error })
|
||||||
|
} else {
|
||||||
|
setMessage({ type: 'success', text: 'Settings saved!' })
|
||||||
|
}
|
||||||
|
setSaving(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSaveVisibility(e: React.FormEvent) {
|
||||||
|
e.preventDefault()
|
||||||
|
if (!isAdmin) return
|
||||||
|
setSaving(true)
|
||||||
|
setMessage(null)
|
||||||
|
const result = await updateSpaceVisibility(visibilityForm)
|
||||||
|
if ('error' in result && result.error) {
|
||||||
|
setMessage({ type: 'error', text: result.error })
|
||||||
|
} else {
|
||||||
|
setMessage({ type: 'success', text: 'Visibility updated.' })
|
||||||
|
}
|
||||||
|
setSaving(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Space Settings */}
|
||||||
|
<div className="bg-card rounded border border-border p-6">
|
||||||
|
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-6">Space Settings</p>
|
||||||
|
|
||||||
|
<form onSubmit={handleSaveSpace} className="space-y-6">
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label className="font-sans text-sm text-foreground block mb-1.5">Space Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={spaceForm.name}
|
||||||
|
onChange={e => setSpaceForm(f => ({ ...f, name: e.target.value }))}
|
||||||
|
disabled={!isAdmin}
|
||||||
|
className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="font-sans text-sm text-foreground block mb-1.5">URL Slug</label>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span className="font-mono text-xs text-muted-foreground mr-2">hackerspace.sh/</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={spaceForm.slug}
|
||||||
|
onChange={e => setSpaceForm(f => ({ ...f, slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '') }))}
|
||||||
|
disabled={!isAdmin}
|
||||||
|
className="flex-1 bg-background border border-border rounded px-3 py-2 font-mono text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="font-sans text-sm text-foreground block mb-1.5">City / Location (optional)</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={spaceForm.city}
|
||||||
|
onChange={e => setSpaceForm(f => ({ ...f, city: e.target.value }))}
|
||||||
|
placeholder="Mesa, AZ"
|
||||||
|
disabled={!isAdmin}
|
||||||
|
className="w-full max-w-md bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground placeholder:text-muted-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4 pt-2">
|
||||||
|
<div className="flex items-center justify-between py-3 border-b border-border">
|
||||||
|
<div>
|
||||||
|
<p className="font-sans text-sm text-foreground">Require approval to join</p>
|
||||||
|
<p className="font-sans text-xs text-muted-foreground">New members must be approved by an admin</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => isAdmin && setSpaceForm(f => ({ ...f, require_approval: !f.require_approval }))}
|
||||||
|
disabled={!isAdmin}
|
||||||
|
className={`w-11 h-6 rounded-full transition relative ${spaceForm.require_approval ? 'bg-primary' : 'bg-muted'}`}
|
||||||
|
>
|
||||||
|
<span className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all ${spaceForm.require_approval ? 'left-6' : 'left-1'}`} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between py-3">
|
||||||
|
<div>
|
||||||
|
<p className="font-sans text-sm text-foreground">Public member directory</p>
|
||||||
|
<p className="font-sans text-xs text-muted-foreground">Anyone can see member list (names only)</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => isAdmin && setSpaceForm(f => ({ ...f, public_member_directory: !f.public_member_directory }))}
|
||||||
|
disabled={!isAdmin}
|
||||||
|
className={`w-11 h-6 rounded-full transition relative ${spaceForm.public_member_directory ? 'bg-primary' : 'bg-muted'}`}
|
||||||
|
>
|
||||||
|
<span className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all ${spaceForm.public_member_directory ? 'left-6' : 'left-1'}`} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-4 border-t border-border">
|
||||||
|
<label className="font-sans text-sm text-foreground block mb-1.5">Mission statement</label>
|
||||||
|
<textarea
|
||||||
|
value={spaceForm.mission_statement}
|
||||||
|
onChange={e => setSpaceForm(f => ({ ...f, mission_statement: e.target.value }))}
|
||||||
|
disabled={!isAdmin}
|
||||||
|
maxLength={5000}
|
||||||
|
rows={4}
|
||||||
|
placeholder="One or two sentences. Rendered at the foot of every page as a reminder to members and the platform itself."
|
||||||
|
className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-4 border-t border-border">
|
||||||
|
<p className="font-sans text-sm text-foreground mb-1.5">Invite code</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code className="bg-primary/5 border border-primary/20 text-primary font-mono text-sm px-3 py-2 rounded">
|
||||||
|
{space.invite_code || 'No code set'}
|
||||||
|
</code>
|
||||||
|
{space.invite_code && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => navigator.clipboard.writeText(space.invite_code!)}
|
||||||
|
className="text-muted-foreground hover:text-primary transition p-2"
|
||||||
|
>
|
||||||
|
<Copy className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isAdmin && (
|
||||||
|
<div className="pt-4">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={saving}
|
||||||
|
className="bg-primary text-white font-sans text-sm px-6 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{saving ? 'Saving...' : 'Save Settings'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Governance Visibility (still under Space tab) */}
|
||||||
|
<div className="bg-card rounded border border-border p-6 mt-6">
|
||||||
|
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-1">Visibility</p>
|
||||||
|
<p className="font-mono text-[10px] text-muted-foreground mb-6">
|
||||||
|
Who sees financial data and the member directory. These flags propagate to the
|
||||||
|
/financials page and (in a future pass) to the members directory.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form onSubmit={handleSaveVisibility} className="space-y-6">
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label className="font-sans text-sm text-foreground block mb-1.5">Financial data visibility</label>
|
||||||
|
<select
|
||||||
|
value={visibilityForm.financial_visibility}
|
||||||
|
onChange={e => setVisibilityForm(f => ({ ...f, financial_visibility: e.target.value }))}
|
||||||
|
disabled={!isAdmin}
|
||||||
|
className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
|
||||||
|
>
|
||||||
|
{financialVisibilities.map(v => (
|
||||||
|
<option key={v} value={v}>{v.replace(/_/g, ' ')}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<p className="font-mono text-[10px] text-muted-foreground mt-1">
|
||||||
|
Treasurer-only is the default in cooperatives historically. Board-visible is
|
||||||
|
the recommended default. All-members-visible is full transparency.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="font-sans text-sm text-foreground block mb-1.5">Member directory visibility</label>
|
||||||
|
<select
|
||||||
|
value={visibilityForm.member_directory_visibility}
|
||||||
|
onChange={e => setVisibilityForm(f => ({ ...f, member_directory_visibility: e.target.value }))}
|
||||||
|
disabled={!isAdmin}
|
||||||
|
className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
|
||||||
|
>
|
||||||
|
{directoryVisibilities.map(v => (
|
||||||
|
<option key={v} value={v}>{v.replace(/_/g, ' ')}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<p className="font-mono text-[10px] text-muted-foreground mt-1">
|
||||||
|
Public-members-visible exposes the directory at a public URL. Count-only
|
||||||
|
surfaces the headcount but no individual names.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isAdmin && (
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={saving}
|
||||||
|
className="bg-primary text-white font-sans text-sm px-6 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{saving ? 'Saving...' : 'Save visibility'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,130 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { Copy, Eye, EyeOff, RotateCcw } from 'lucide-react'
|
||||||
|
import { rotateWebhookSecret } from '@/lib/actions'
|
||||||
|
import type { SaveStatus, Space } from '../types'
|
||||||
|
|
||||||
|
interface Props extends SaveStatus {
|
||||||
|
space: Space
|
||||||
|
isAdmin: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WebhooksPanel({ space, isAdmin, saving, setSaving, setMessage }: Props) {
|
||||||
|
const [webhookSecret, setWebhookSecret] = useState(space.webhook_secret || '')
|
||||||
|
const [copiedWebhook, setCopiedWebhook] = useState(false)
|
||||||
|
const [copiedSecret, setCopiedSecret] = useState(false)
|
||||||
|
const [showWebhookSecret, setShowWebhookSecret] = useState(false)
|
||||||
|
|
||||||
|
async function handleRotateWebhook() {
|
||||||
|
if (!isAdmin) return
|
||||||
|
setSaving(true)
|
||||||
|
const result = await rotateWebhookSecret()
|
||||||
|
if (result.secret) {
|
||||||
|
setWebhookSecret(result.secret)
|
||||||
|
setShowWebhookSecret(true)
|
||||||
|
setMessage({ type: 'success', text: 'New signing secret generated. Copy it now and store it securely.' })
|
||||||
|
}
|
||||||
|
setSaving(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyToClipboard(text: string) {
|
||||||
|
navigator.clipboard.writeText(text)
|
||||||
|
setCopiedWebhook(true)
|
||||||
|
setTimeout(() => setCopiedWebhook(false), 2000)
|
||||||
|
}
|
||||||
|
|
||||||
|
function copySecretToClipboard(text: string) {
|
||||||
|
if (!text) return
|
||||||
|
navigator.clipboard.writeText(text)
|
||||||
|
setCopiedSecret(true)
|
||||||
|
setTimeout(() => setCopiedSecret(false), 2000)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-card rounded border border-border p-6 space-y-6">
|
||||||
|
<div>
|
||||||
|
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">Webhook Endpoint</p>
|
||||||
|
<p className="font-sans text-sm text-muted-foreground mb-4">
|
||||||
|
POST members to this endpoint for external integration or automation.
|
||||||
|
</p>
|
||||||
|
<div className="bg-muted/50 border border-border rounded p-4 mb-4">
|
||||||
|
<code className="font-mono text-xs text-primary break-all">
|
||||||
|
https://api.hackerspace.sh/{space.slug}/members
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => copyToClipboard(`https://api.hackerspace.sh/${space.slug}/members`)}
|
||||||
|
className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition flex items-center gap-1"
|
||||||
|
>
|
||||||
|
<Copy className="w-3 h-3" />
|
||||||
|
{copiedWebhook ? 'Copied!' : 'Copy URL'}
|
||||||
|
</button>
|
||||||
|
<a
|
||||||
|
href="https://github.com/virgilvox/hackerspace-management/blob/main/docs/WEBHOOKS.md"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition"
|
||||||
|
>
|
||||||
|
View Docs
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t border-border pt-6">
|
||||||
|
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">Signing Secret</p>
|
||||||
|
<p className="font-sans text-sm text-muted-foreground mb-4">
|
||||||
|
Every delivery is signed with HMAC-SHA256 using this secret. See <a
|
||||||
|
href="https://github.com/virgilvox/hackerspace-management/blob/main/docs/WEBHOOKS.md#signing-and-verification"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-primary hover:underline"
|
||||||
|
>the docs</a> for verification examples in Node and Python.
|
||||||
|
</p>
|
||||||
|
<div className="bg-muted/50 border border-border rounded p-4 mb-4 flex items-center gap-3">
|
||||||
|
<code className="font-mono text-xs text-foreground break-all flex-1">
|
||||||
|
{webhookSecret
|
||||||
|
? (showWebhookSecret ? webhookSecret : '•'.repeat(Math.min(webhookSecret.length, 48)))
|
||||||
|
: <span className="text-muted-foreground italic">No secret set. Rotate to generate one.</span>}
|
||||||
|
</code>
|
||||||
|
{webhookSecret && (
|
||||||
|
<button
|
||||||
|
onClick={() => setShowWebhookSecret(v => !v)}
|
||||||
|
className="font-mono text-[10px] text-muted-foreground hover:text-foreground transition flex items-center gap-1 shrink-0"
|
||||||
|
title={showWebhookSecret ? 'Hide secret' : 'Show secret'}
|
||||||
|
>
|
||||||
|
{showWebhookSecret ? <EyeOff className="w-3.5 h-3.5" /> : <Eye className="w-3.5 h-3.5" />}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
{webhookSecret && (
|
||||||
|
<button
|
||||||
|
onClick={() => copySecretToClipboard(webhookSecret)}
|
||||||
|
className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition flex items-center gap-1"
|
||||||
|
>
|
||||||
|
<Copy className="w-3 h-3" />
|
||||||
|
{copiedSecret ? 'Copied!' : 'Copy secret'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{isAdmin && (
|
||||||
|
<button
|
||||||
|
onClick={handleRotateWebhook}
|
||||||
|
disabled={saving}
|
||||||
|
className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition flex items-center gap-1 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<RotateCcw className="w-3 h-3" />
|
||||||
|
{webhookSecret ? 'Rotate' : 'Generate'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{webhookSecret && (
|
||||||
|
<p className="font-sans text-[11px] text-muted-foreground mt-3">
|
||||||
|
Rotating immediately invalidates the previous secret. Update your receiver before rotating in production.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,19 +1,12 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { Check, Copy, Eye, EyeOff, RotateCcw } from 'lucide-react'
|
|
||||||
import { updateSpaceSettings, saveIntegration, disconnectIntegration, rotateWebhookSecret, updateSpaceVisibility, createArea, updateArea, deleteArea, createTier, updateTier, deleteTier, createInvite, updateInvite, deleteInvite, createOnboardingStep, updateOnboardingStep, deleteOnboardingStep } from '@/lib/actions'
|
|
||||||
import { toast } from 'sonner'
|
|
||||||
import { financialVisibilities, directoryVisibilities } from '@/lib/validations'
|
|
||||||
|
|
||||||
import type { Tables } from '@/types/database'
|
|
||||||
import { PageTitle } from '@/components/ui/page-title'
|
import { PageTitle } from '@/components/ui/page-title'
|
||||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
import { SpacePanel } from './panels/space-panel'
|
||||||
import { StripeBillingPanel } from '@/components/settings/stripe-billing-panel'
|
import { IntegrationsPanel } from './panels/integrations-panel'
|
||||||
import { DuesPaymentMethodsPanel } from '@/components/settings/dues-payment-methods-panel'
|
import { DuesPanel } from './panels/dues-panel'
|
||||||
|
import { WebhooksPanel } from './panels/webhooks-panel'
|
||||||
type Space = Tables<'spaces'>
|
import type { Integration, SaveMessage, Space } from './types'
|
||||||
type Integration = Tables<'integrations'>
|
|
||||||
|
|
||||||
// Roles, tiers, areas, invites, and onboarding moved to the dedicated
|
// Roles, tiers, areas, invites, and onboarding moved to the dedicated
|
||||||
// /customize hub. This page now owns space identity, visibility,
|
// /customize hub. This page now owns space identity, visibility,
|
||||||
@@ -25,182 +18,10 @@ interface Props {
|
|||||||
currentRole: string
|
currentRole: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const INTEGRATIONS_CONFIG = [
|
export default function SettingsClient({ space, isAdmin, integrations }: Props) {
|
||||||
{
|
|
||||||
platform: 'paypal',
|
|
||||||
name: 'PayPal',
|
|
||||||
description: 'Sync transactions for member dues',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
|
|
||||||
<path d="M7.5 2h9.3c2.7 0 4.5 1.9 4 4.5l-1.3 8.4c-.4 2.6-2.5 4.1-5.2 4.1H10l-.6 3H5.8L7.5 2zm2 2.2L7.6 17h3.8c1.6 0 2.8-.9 3-2.5l1.3-8.4c.2-1.2-.5-1.9-1.7-1.9H9.5z"/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
fields: [
|
|
||||||
{ key: 'client_id', label: 'Client ID', type: 'text', placeholder: 'Sandbox or Live Client ID' },
|
|
||||||
{ key: 'client_secret', label: 'Client Secret', type: 'password', placeholder: 'Client Secret from PayPal Developer' },
|
|
||||||
{ key: 'mode', label: 'Mode', type: 'select', options: ['sandbox', 'live'] },
|
|
||||||
],
|
|
||||||
docs: 'https://developer.paypal.com/api/rest/',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
platform: 'zeffy',
|
|
||||||
name: 'Zeffy',
|
|
||||||
description: 'Nonprofit payment and donation sync',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-6 h-6 text-violet-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.512M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
fields: [
|
|
||||||
{ key: 'api_key', label: 'API Key', type: 'password', placeholder: 'Zeffy API Key' },
|
|
||||||
{ key: 'organization_id', label: 'Organization ID', type: 'text', placeholder: 'Your Zeffy Org ID' },
|
|
||||||
],
|
|
||||||
docs: 'https://docs.zeffy.com/',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
platform: 'venmo',
|
|
||||||
name: 'Venmo',
|
|
||||||
description: 'Pull Venmo business transactions',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-6 h-6 text-green-600" viewBox="0 0 24 24" fill="currentColor">
|
|
||||||
<path d="M19.5 3c.7 1.3 1 2.6 1 4.1 0 4.3-3.7 9.8-6.7 13.9H7.1L4.5 3h5.3l1.4 11.4C12.5 12 14.1 8.7 14.1 6.3c0-1.3-.2-2.2-.6-2.9L19.5 3z"/>
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
fields: [
|
|
||||||
{ key: 'access_token', label: 'Access Token', type: 'password', placeholder: 'Venmo API Access Token' },
|
|
||||||
],
|
|
||||||
docs: 'https://developer.venmo.com/',
|
|
||||||
},
|
|
||||||
// Stripe is intentionally NOT listed here. Stripe recurring dues is
|
|
||||||
// configured in the dedicated Dues tab (saveStripeSettings: mode, tier->price
|
|
||||||
// map, grace days, vaulted keys). The generic saveIntegration path OVERWRITES
|
|
||||||
// integrations.config with a different shape, which would clobber the dues
|
|
||||||
// config (drop prices/mode/grace_days). One Stripe config UI, in Dues.
|
|
||||||
]
|
|
||||||
|
|
||||||
export default function SettingsClient({ space, isAdmin, integrations, currentRole }: Props) {
|
|
||||||
const [activeTab, setActiveTab] = useState<'space' | 'integrations' | 'dues' | 'webhooks'>('space')
|
const [activeTab, setActiveTab] = useState<'space' | 'integrations' | 'dues' | 'webhooks'>('space')
|
||||||
const [saving, setSaving] = useState(false)
|
const [saving, setSaving] = useState(false)
|
||||||
const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
|
const [message, setMessage] = useState<SaveMessage>(null)
|
||||||
|
|
||||||
// Space form (basic + mission statement)
|
|
||||||
const spaceExt = space as Space & {
|
|
||||||
mission_statement?: string | null
|
|
||||||
financial_visibility?: string
|
|
||||||
member_directory_visibility?: string
|
|
||||||
}
|
|
||||||
const [spaceForm, setSpaceForm] = useState({
|
|
||||||
name: space.name || '',
|
|
||||||
slug: space.slug || '',
|
|
||||||
city: space.city || '',
|
|
||||||
require_approval: space.require_approval ?? true,
|
|
||||||
public_member_directory: space.public_member_directory ?? false,
|
|
||||||
mission_statement: spaceExt.mission_statement || '',
|
|
||||||
})
|
|
||||||
|
|
||||||
// Visibility form (governance) — separate server action, separate save.
|
|
||||||
const [visibilityForm, setVisibilityForm] = useState({
|
|
||||||
financial_visibility: (spaceExt.financial_visibility as string | undefined) || 'board_visible',
|
|
||||||
member_directory_visibility: (spaceExt.member_directory_visibility as string | undefined) || 'members_visible',
|
|
||||||
})
|
|
||||||
|
|
||||||
// Integration config modal
|
|
||||||
const [editingIntegration, setEditingIntegration] = useState<typeof INTEGRATIONS_CONFIG[0] | null>(null)
|
|
||||||
const [integrationForm, setIntegrationForm] = useState<Record<string, string>>({})
|
|
||||||
const [showSecrets, setShowSecrets] = useState<Record<string, boolean>>({})
|
|
||||||
|
|
||||||
// Webhook
|
|
||||||
const [webhookSecret, setWebhookSecret] = useState(space.webhook_secret || '')
|
|
||||||
const [copiedWebhook, setCopiedWebhook] = useState(false)
|
|
||||||
const [copiedSecret, setCopiedSecret] = useState(false)
|
|
||||||
const [showWebhookSecret, setShowWebhookSecret] = useState(false)
|
|
||||||
|
|
||||||
async function handleSaveSpace(e: React.FormEvent) {
|
|
||||||
e.preventDefault()
|
|
||||||
if (!isAdmin) return
|
|
||||||
setSaving(true)
|
|
||||||
setMessage(null)
|
|
||||||
const result = await updateSpaceSettings(spaceForm)
|
|
||||||
if (result.error) {
|
|
||||||
setMessage({ type: 'error', text: result.error })
|
|
||||||
} else {
|
|
||||||
setMessage({ type: 'success', text: 'Settings saved!' })
|
|
||||||
}
|
|
||||||
setSaving(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleSaveVisibility(e: React.FormEvent) {
|
|
||||||
e.preventDefault()
|
|
||||||
if (!isAdmin) return
|
|
||||||
setSaving(true)
|
|
||||||
setMessage(null)
|
|
||||||
const result = await updateSpaceVisibility(visibilityForm)
|
|
||||||
if ('error' in result && result.error) {
|
|
||||||
setMessage({ type: 'error', text: result.error })
|
|
||||||
} else {
|
|
||||||
setMessage({ type: 'success', text: 'Visibility updated.' })
|
|
||||||
}
|
|
||||||
setSaving(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleSaveIntegration(e: React.FormEvent) {
|
|
||||||
e.preventDefault()
|
|
||||||
if (!editingIntegration || !isAdmin) return
|
|
||||||
setSaving(true)
|
|
||||||
setMessage(null)
|
|
||||||
const result = await saveIntegration(editingIntegration.platform, integrationForm)
|
|
||||||
if (result.error) {
|
|
||||||
setMessage({ type: 'error', text: result.error })
|
|
||||||
} else {
|
|
||||||
setMessage({ type: 'success', text: `${editingIntegration.name} connected!` })
|
|
||||||
setEditingIntegration(null)
|
|
||||||
}
|
|
||||||
setSaving(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleDisconnect(platform: string) {
|
|
||||||
if (!isAdmin) return
|
|
||||||
setSaving(true)
|
|
||||||
await disconnectIntegration(platform)
|
|
||||||
setSaving(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleRotateWebhook() {
|
|
||||||
if (!isAdmin) return
|
|
||||||
setSaving(true)
|
|
||||||
const result = await rotateWebhookSecret()
|
|
||||||
if (result.secret) {
|
|
||||||
setWebhookSecret(result.secret)
|
|
||||||
setShowWebhookSecret(true)
|
|
||||||
setMessage({ type: 'success', text: 'New signing secret generated. Copy it now and store it securely.' })
|
|
||||||
}
|
|
||||||
setSaving(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
function copyToClipboard(text: string) {
|
|
||||||
navigator.clipboard.writeText(text)
|
|
||||||
setCopiedWebhook(true)
|
|
||||||
setTimeout(() => setCopiedWebhook(false), 2000)
|
|
||||||
}
|
|
||||||
|
|
||||||
function copySecretToClipboard(text: string) {
|
|
||||||
if (!text) return
|
|
||||||
navigator.clipboard.writeText(text)
|
|
||||||
setCopiedSecret(true)
|
|
||||||
setTimeout(() => setCopiedSecret(false), 2000)
|
|
||||||
}
|
|
||||||
|
|
||||||
function openIntegrationModal(config: typeof INTEGRATIONS_CONFIG[0]) {
|
|
||||||
const existing = integrations.find(i => i.platform === config.platform)
|
|
||||||
const initialForm: Record<string, string> = {}
|
|
||||||
config.fields.forEach(f => {
|
|
||||||
initialForm[f.key] = (existing?.config as Record<string, string> | undefined)?.[f.key] || ''
|
|
||||||
})
|
|
||||||
setIntegrationForm(initialForm)
|
|
||||||
setEditingIntegration(config)
|
|
||||||
}
|
|
||||||
|
|
||||||
const getIntegrationStatus = (platform: string) => integrations.find(i => i.platform === platform)?.is_connected ?? false
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-background">
|
<div className="min-h-screen bg-background">
|
||||||
@@ -235,429 +56,24 @@ export default function SettingsClient({ space, isAdmin, integrations, currentRo
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Space Settings Tab */}
|
|
||||||
{activeTab === 'space' && (
|
{activeTab === 'space' && (
|
||||||
<div className="bg-card rounded border border-border p-6">
|
<SpacePanel space={space} isAdmin={isAdmin} saving={saving} setSaving={setSaving} setMessage={setMessage} />
|
||||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-6">Space Settings</p>
|
|
||||||
|
|
||||||
<form onSubmit={handleSaveSpace} className="space-y-6">
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
||||||
<div>
|
|
||||||
<label className="font-sans text-sm text-foreground block mb-1.5">Space Name</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={spaceForm.name}
|
|
||||||
onChange={e => setSpaceForm(f => ({ ...f, name: e.target.value }))}
|
|
||||||
disabled={!isAdmin}
|
|
||||||
className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="font-sans text-sm text-foreground block mb-1.5">URL Slug</label>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<span className="font-mono text-xs text-muted-foreground mr-2">hackerspace.sh/</span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={spaceForm.slug}
|
|
||||||
onChange={e => setSpaceForm(f => ({ ...f, slug: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '') }))}
|
|
||||||
disabled={!isAdmin}
|
|
||||||
className="flex-1 bg-background border border-border rounded px-3 py-2 font-mono text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="font-sans text-sm text-foreground block mb-1.5">City / Location (optional)</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={spaceForm.city}
|
|
||||||
onChange={e => setSpaceForm(f => ({ ...f, city: e.target.value }))}
|
|
||||||
placeholder="Mesa, AZ"
|
|
||||||
disabled={!isAdmin}
|
|
||||||
className="w-full max-w-md bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground placeholder:text-muted-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4 pt-2">
|
|
||||||
<div className="flex items-center justify-between py-3 border-b border-border">
|
|
||||||
<div>
|
|
||||||
<p className="font-sans text-sm text-foreground">Require approval to join</p>
|
|
||||||
<p className="font-sans text-xs text-muted-foreground">New members must be approved by an admin</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => isAdmin && setSpaceForm(f => ({ ...f, require_approval: !f.require_approval }))}
|
|
||||||
disabled={!isAdmin}
|
|
||||||
className={`w-11 h-6 rounded-full transition relative ${spaceForm.require_approval ? 'bg-primary' : 'bg-muted'}`}
|
|
||||||
>
|
|
||||||
<span className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all ${spaceForm.require_approval ? 'left-6' : 'left-1'}`} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between py-3">
|
|
||||||
<div>
|
|
||||||
<p className="font-sans text-sm text-foreground">Public member directory</p>
|
|
||||||
<p className="font-sans text-xs text-muted-foreground">Anyone can see member list (names only)</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => isAdmin && setSpaceForm(f => ({ ...f, public_member_directory: !f.public_member_directory }))}
|
|
||||||
disabled={!isAdmin}
|
|
||||||
className={`w-11 h-6 rounded-full transition relative ${spaceForm.public_member_directory ? 'bg-primary' : 'bg-muted'}`}
|
|
||||||
>
|
|
||||||
<span className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all ${spaceForm.public_member_directory ? 'left-6' : 'left-1'}`} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="pt-4 border-t border-border">
|
|
||||||
<label className="font-sans text-sm text-foreground block mb-1.5">Mission statement</label>
|
|
||||||
<textarea
|
|
||||||
value={spaceForm.mission_statement}
|
|
||||||
onChange={e => setSpaceForm(f => ({ ...f, mission_statement: e.target.value }))}
|
|
||||||
disabled={!isAdmin}
|
|
||||||
maxLength={5000}
|
|
||||||
rows={4}
|
|
||||||
placeholder="One or two sentences. Rendered at the foot of every page as a reminder to members and the platform itself."
|
|
||||||
className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="pt-4 border-t border-border">
|
|
||||||
<p className="font-sans text-sm text-foreground mb-1.5">Invite code</p>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<code className="bg-primary/5 border border-primary/20 text-primary font-mono text-sm px-3 py-2 rounded">
|
|
||||||
{space.invite_code || 'No code set'}
|
|
||||||
</code>
|
|
||||||
{space.invite_code && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => copyToClipboard(space.invite_code!)}
|
|
||||||
className="text-muted-foreground hover:text-primary transition p-2"
|
|
||||||
>
|
|
||||||
<Copy className="w-4 h-4" />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isAdmin && (
|
|
||||||
<div className="pt-4">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={saving}
|
|
||||||
className="bg-primary text-white font-sans text-sm px-6 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{saving ? 'Saving...' : 'Save Settings'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Governance Visibility (still under Space tab) */}
|
|
||||||
{activeTab === 'space' && (
|
|
||||||
<div className="bg-card rounded border border-border p-6 mt-6">
|
|
||||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-1">Visibility</p>
|
|
||||||
<p className="font-mono text-[10px] text-muted-foreground mb-6">
|
|
||||||
Who sees financial data and the member directory. These flags propagate to the
|
|
||||||
/financials page and (in a future pass) to the members directory.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<form onSubmit={handleSaveVisibility} className="space-y-6">
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
||||||
<div>
|
|
||||||
<label className="font-sans text-sm text-foreground block mb-1.5">Financial data visibility</label>
|
|
||||||
<select
|
|
||||||
value={visibilityForm.financial_visibility}
|
|
||||||
onChange={e => setVisibilityForm(f => ({ ...f, financial_visibility: e.target.value }))}
|
|
||||||
disabled={!isAdmin}
|
|
||||||
className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
|
|
||||||
>
|
|
||||||
{financialVisibilities.map(v => (
|
|
||||||
<option key={v} value={v}>{v.replace(/_/g, ' ')}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
<p className="font-mono text-[10px] text-muted-foreground mt-1">
|
|
||||||
Treasurer-only is the default in cooperatives historically. Board-visible is
|
|
||||||
the recommended default. All-members-visible is full transparency.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="font-sans text-sm text-foreground block mb-1.5">Member directory visibility</label>
|
|
||||||
<select
|
|
||||||
value={visibilityForm.member_directory_visibility}
|
|
||||||
onChange={e => setVisibilityForm(f => ({ ...f, member_directory_visibility: e.target.value }))}
|
|
||||||
disabled={!isAdmin}
|
|
||||||
className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground disabled:opacity-50 focus:outline-none focus:border-primary"
|
|
||||||
>
|
|
||||||
{directoryVisibilities.map(v => (
|
|
||||||
<option key={v} value={v}>{v.replace(/_/g, ' ')}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
<p className="font-mono text-[10px] text-muted-foreground mt-1">
|
|
||||||
Public-members-visible exposes the directory at a public URL. Count-only
|
|
||||||
surfaces the headcount but no individual names.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isAdmin && (
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={saving}
|
|
||||||
className="bg-primary text-white font-sans text-sm px-6 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{saving ? 'Saving...' : 'Save visibility'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Integrations Tab */}
|
|
||||||
{activeTab === 'integrations' && (
|
{activeTab === 'integrations' && (
|
||||||
<div className="bg-card rounded border border-border p-6">
|
<IntegrationsPanel integrations={integrations} isAdmin={isAdmin} saving={saving} setSaving={setSaving} setMessage={setMessage} />
|
||||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-6">Integrations</p>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
{INTEGRATIONS_CONFIG.map(config => {
|
|
||||||
const connected = getIntegrationStatus(config.platform)
|
|
||||||
return (
|
|
||||||
<div key={config.platform} className="flex items-center gap-4 p-4 border border-border rounded hover:border-primary/30 transition">
|
|
||||||
<div className="w-8 h-8 flex items-center justify-center flex-shrink-0">{config.icon}</div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<p className="font-sans text-sm font-medium text-foreground">{config.name}</p>
|
|
||||||
<p className="font-sans text-xs text-muted-foreground">{config.description}</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{connected ? (
|
|
||||||
<>
|
|
||||||
<span className="flex items-center gap-1 font-mono text-[10px] text-primary">
|
|
||||||
<Check className="w-3 h-3" /> Connected
|
|
||||||
</span>
|
|
||||||
{isAdmin && (
|
|
||||||
<button
|
|
||||||
onClick={() => openIntegrationModal(config)}
|
|
||||||
className="font-mono text-[10px] border border-border px-2 py-1 rounded hover:border-primary hover:text-primary transition"
|
|
||||||
>
|
|
||||||
Manage
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : isAdmin ? (
|
|
||||||
<button
|
|
||||||
onClick={() => openIntegrationModal(config)}
|
|
||||||
className="font-mono text-[10px] bg-primary text-white px-3 py-1 rounded hover:bg-primary/90 transition"
|
|
||||||
>
|
|
||||||
Connect
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<span className="font-mono text-[10px] text-muted-foreground">Not connected</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Dues Tab: how members pay dues (Stripe recurring + external links) */}
|
|
||||||
{activeTab === 'dues' && (
|
{activeTab === 'dues' && (
|
||||||
<div className="space-y-6">
|
<DuesPanel spaceId={space.id} />
|
||||||
<StripeBillingPanel spaceId={space.id} />
|
|
||||||
<DuesPaymentMethodsPanel />
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Webhooks Tab */}
|
|
||||||
{activeTab === 'webhooks' && (
|
{activeTab === 'webhooks' && (
|
||||||
<div className="bg-card rounded border border-border p-6 space-y-6">
|
<WebhooksPanel space={space} isAdmin={isAdmin} saving={saving} setSaving={setSaving} setMessage={setMessage} />
|
||||||
<div>
|
|
||||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">Webhook Endpoint</p>
|
|
||||||
<p className="font-sans text-sm text-muted-foreground mb-4">
|
|
||||||
POST members to this endpoint for external integration or automation.
|
|
||||||
</p>
|
|
||||||
<div className="bg-muted/50 border border-border rounded p-4 mb-4">
|
|
||||||
<code className="font-mono text-xs text-primary break-all">
|
|
||||||
https://api.hackerspace.sh/{space.slug}/members
|
|
||||||
</code>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
|
||||||
<button
|
|
||||||
onClick={() => copyToClipboard(`https://api.hackerspace.sh/${space.slug}/members`)}
|
|
||||||
className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition flex items-center gap-1"
|
|
||||||
>
|
|
||||||
<Copy className="w-3 h-3" />
|
|
||||||
{copiedWebhook ? 'Copied!' : 'Copy URL'}
|
|
||||||
</button>
|
|
||||||
<a
|
|
||||||
href="https://github.com/virgilvox/hackerspace-management/blob/main/docs/WEBHOOKS.md"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition"
|
|
||||||
>
|
|
||||||
View Docs
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-t border-border pt-6">
|
|
||||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">Signing Secret</p>
|
|
||||||
<p className="font-sans text-sm text-muted-foreground mb-4">
|
|
||||||
Every delivery is signed with HMAC-SHA256 using this secret. See <a
|
|
||||||
href="https://github.com/virgilvox/hackerspace-management/blob/main/docs/WEBHOOKS.md#signing-and-verification"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-primary hover:underline"
|
|
||||||
>the docs</a> for verification examples in Node and Python.
|
|
||||||
</p>
|
|
||||||
<div className="bg-muted/50 border border-border rounded p-4 mb-4 flex items-center gap-3">
|
|
||||||
<code className="font-mono text-xs text-foreground break-all flex-1">
|
|
||||||
{webhookSecret
|
|
||||||
? (showWebhookSecret ? webhookSecret : '•'.repeat(Math.min(webhookSecret.length, 48)))
|
|
||||||
: <span className="text-muted-foreground italic">No secret set. Rotate to generate one.</span>}
|
|
||||||
</code>
|
|
||||||
{webhookSecret && (
|
|
||||||
<button
|
|
||||||
onClick={() => setShowWebhookSecret(v => !v)}
|
|
||||||
className="font-mono text-[10px] text-muted-foreground hover:text-foreground transition flex items-center gap-1 shrink-0"
|
|
||||||
title={showWebhookSecret ? 'Hide secret' : 'Show secret'}
|
|
||||||
>
|
|
||||||
{showWebhookSecret ? <EyeOff className="w-3.5 h-3.5" /> : <Eye className="w-3.5 h-3.5" />}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
|
||||||
{webhookSecret && (
|
|
||||||
<button
|
|
||||||
onClick={() => copySecretToClipboard(webhookSecret)}
|
|
||||||
className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition flex items-center gap-1"
|
|
||||||
>
|
|
||||||
<Copy className="w-3 h-3" />
|
|
||||||
{copiedSecret ? 'Copied!' : 'Copy secret'}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{isAdmin && (
|
|
||||||
<button
|
|
||||||
onClick={handleRotateWebhook}
|
|
||||||
disabled={saving}
|
|
||||||
className="font-mono text-[10px] border border-border px-3 py-1.5 rounded hover:border-primary hover:text-primary transition flex items-center gap-1 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<RotateCcw className="w-3 h-3" />
|
|
||||||
{webhookSecret ? 'Rotate' : 'Generate'}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{webhookSecret && (
|
|
||||||
<p className="font-sans text-[11px] text-muted-foreground mt-3">
|
|
||||||
Rotating immediately invalidates the previous secret. Update your receiver before rotating in production.
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Integration Config Modal */}
|
|
||||||
<Dialog open={!!editingIntegration} onOpenChange={(o) => { if (!o) setEditingIntegration(null) }}>
|
|
||||||
<DialogContent className="sm:max-w-md">
|
|
||||||
{editingIntegration && (
|
|
||||||
<>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle className="flex items-center gap-2">
|
|
||||||
<div className="w-6 h-6 flex items-center justify-center">{editingIntegration.icon}</div>
|
|
||||||
{editingIntegration.name}
|
|
||||||
</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<form onSubmit={handleSaveIntegration} className="space-y-4">
|
|
||||||
{editingIntegration.fields.map(field => (
|
|
||||||
<div key={field.key}>
|
|
||||||
<label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">{field.label}</label>
|
|
||||||
{field.type === 'select' ? (
|
|
||||||
<select
|
|
||||||
value={integrationForm[field.key] || ''}
|
|
||||||
onChange={e => setIntegrationForm(f => ({ ...f, [field.key]: e.target.value }))}
|
|
||||||
className="w-full bg-background border border-border rounded px-3 py-2 font-sans text-sm text-foreground focus:outline-none focus:border-primary"
|
|
||||||
>
|
|
||||||
<option value="">Select...</option>
|
|
||||||
{field.options?.map(opt => <option key={opt} value={opt}>{opt}</option>)}
|
|
||||||
</select>
|
|
||||||
) : (
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type={field.type === 'password' && !showSecrets[field.key] ? 'password' : 'text'}
|
|
||||||
value={integrationForm[field.key] || ''}
|
|
||||||
onChange={e => setIntegrationForm(f => ({ ...f, [field.key]: e.target.value }))}
|
|
||||||
placeholder={field.placeholder}
|
|
||||||
className="w-full bg-background border border-border rounded px-3 py-2 pr-10 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary"
|
|
||||||
/>
|
|
||||||
{field.type === 'password' && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowSecrets(s => ({ ...s, [field.key]: !s[field.key] }))}
|
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
|
||||||
>
|
|
||||||
{showSecrets[field.key] ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between pt-2">
|
|
||||||
<a
|
|
||||||
href={editingIntegration.docs}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="font-mono text-[10px] text-primary hover:underline"
|
|
||||||
>
|
|
||||||
View API Docs →
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-3 pt-2">
|
|
||||||
{getIntegrationStatus(editingIntegration.platform) && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
handleDisconnect(editingIntegration.platform)
|
|
||||||
setEditingIntegration(null)
|
|
||||||
}}
|
|
||||||
className="flex-1 border border-red-200 text-red-600 font-sans text-sm py-2 rounded hover:bg-red-50 transition"
|
|
||||||
>
|
|
||||||
Disconnect
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setEditingIntegration(null)}
|
|
||||||
className="flex-1 border border-border text-foreground font-sans text-sm py-2 rounded hover:border-primary/50 transition"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={saving}
|
|
||||||
className="flex-1 bg-primary text-white font-sans text-sm py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{saving ? 'Saving...' : 'Save'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,43 @@
|
|||||||
|
// Shared shapes for the Settings page panels. The orchestrator owns activeTab
|
||||||
|
// and the shared save status (saving flag + message banner); each panel owns
|
||||||
|
// its own form state and calls the server actions directly.
|
||||||
|
|
||||||
|
import type { Dispatch, ReactNode, SetStateAction } from 'react'
|
||||||
|
import type { Tables } from '@/types/database'
|
||||||
|
|
||||||
|
export type Space = Tables<'spaces'>
|
||||||
|
export type Integration = Tables<'integrations'>
|
||||||
|
|
||||||
|
// Some governance columns are not yet in the generated types.
|
||||||
|
export type SpaceExt = Space & {
|
||||||
|
mission_statement?: string | null
|
||||||
|
financial_visibility?: string
|
||||||
|
member_directory_visibility?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SaveMessage = { type: 'success' | 'error'; text: string } | null
|
||||||
|
|
||||||
|
// Shared save status handed down from the orchestrator so panels can drive the
|
||||||
|
// single banner and disable their submit buttons while a write is in flight.
|
||||||
|
export interface SaveStatus {
|
||||||
|
saving: boolean
|
||||||
|
setSaving: Dispatch<SetStateAction<boolean>>
|
||||||
|
setMessage: Dispatch<SetStateAction<SaveMessage>>
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IntegrationField {
|
||||||
|
key: string
|
||||||
|
label: string
|
||||||
|
type: string
|
||||||
|
placeholder?: string
|
||||||
|
options?: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IntegrationConfig {
|
||||||
|
platform: string
|
||||||
|
name: string
|
||||||
|
description: string
|
||||||
|
icon: ReactNode
|
||||||
|
fields: IntegrationField[]
|
||||||
|
docs: string
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user