Spaces:
Build error
Build error
File size: 4,467 Bytes
57303cc | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | import { useState, useEffect } from 'react'
const ARCHETYPE_DEFAULTS = {
consulting: { min_communication: 4, min_adaptability: 3, min_collaboration: 4, min_problem_solving: 3, min_leadership: 3 },
startup: { min_communication: 3, min_adaptability: 4, min_collaboration: 3, min_problem_solving: 3, min_leadership: 4 },
}
export default function ClientSetup() {
const [clients, setClients] = useState([])
const [loading, setLoading] = useState(true)
const [form, setForm] = useState({
name: '',
archetype: 'consulting',
expectations: '',
...ARCHETYPE_DEFAULTS.consulting,
})
const [submitting, setSubmitting] = useState(false)
const [success, setSuccess] = useState('')
useEffect(() => { fetchClients() }, [])
const fetchClients = async () => {
try {
const res = await fetch('/api/clients')
setClients(await res.json())
} catch (err) {
console.error(err)
} finally {
setLoading(false)
}
}
const handleArchetypeChange = (archetype) => {
setForm(prev => ({ ...prev, archetype, ...ARCHETYPE_DEFAULTS[archetype] }))
}
const handleSubmit = async (e) => {
e.preventDefault()
setSubmitting(true)
setSuccess('')
try {
const res = await fetch('/api/clients', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(form),
})
if (res.ok) {
setSuccess(`Client "${form.name}" created successfully!`)
setForm({ name: '', archetype: 'consulting', expectations: '', ...ARCHETYPE_DEFAULTS.consulting })
fetchClients()
}
} catch (err) {
console.error(err)
} finally {
setSubmitting(false)
}
}
return (
<>
<h1 className="page-title">Client Setup</h1>
<div className="card">
<h2>Add New Client</h2>
{success && <div className="alert-success">{success}</div>}
<form onSubmit={handleSubmit}>
<div className="form-group">
<label>Client Name</label>
<input type="text" required value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} placeholder="e.g. Acme Corp" />
</div>
<div className="form-group">
<label>Archetype</label>
<select value={form.archetype} onChange={e => handleArchetypeChange(e.target.value)}>
<option value="consulting">💼 Consulting / Corporate</option>
<option value="startup">🚀 Startup / Scrappy</option>
</select>
</div>
<div className="form-group">
<label>Client Expectations</label>
<textarea value={form.expectations} onChange={e => setForm(f => ({ ...f, expectations: e.target.value }))} placeholder="e.g. Business casual, structured answers, executive presence..." />
</div>
<p style={{ fontSize: '0.875rem', fontWeight: 600, marginBottom: 8 }}>Minimum BARS Thresholds</p>
<div className="form-row">
{['communication', 'adaptability', 'collaboration', 'problem_solving', 'leadership'].map(field => (
<div className="form-group" key={field}>
<label>{field.replace('_', ' ').replace(/\b\w/g, c => c.toUpperCase())}</label>
<input type="number" min="1" max="5" value={form[`min_${field}`]} onChange={e => setForm(f => ({ ...f, [`min_${field}`]: parseInt(e.target.value) }))} />
</div>
))}
</div>
<button type="submit" className="btn btn-primary" disabled={submitting}>
{submitting ? 'Creating...' : 'Create Client'}
</button>
</form>
</div>
<div className="card">
<h2>Existing Clients</h2>
{loading ? (
<div className="loading">Loading clients...</div>
) : clients.length === 0 ? (
<p style={{ color: 'var(--text-muted)' }}>No clients yet. Create one above.</p>
) : (
clients.map(c => (
<div className="client-list-item" key={c.id}>
<div>
<strong>{c.name}</strong>{' '}
<span className={`badge badge-${c.archetype}`}>{c.archetype}</span>
</div>
<span style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>
{new Date(c.created_at).toLocaleDateString()}
</span>
</div>
))
)}
</div>
</>
)
}
|