308 lines
14 KiB
React
308 lines
14 KiB
React
|
import React, { useState, useEffect } from 'react'
|
||
|
|
import api from '../api.js'
|
||
|
|
import {
|
||
|
|
Plus, Trash2, Edit2, X, Check, GripVertical,
|
||
|
|
Type, Hash, Phone, Mail, AlertTriangle, Columns
|
||
|
|
} from 'lucide-react'
|
||
|
|
|
||
|
|
const TYPE_OPTIONS = [
|
||
|
|
{ value: 'text', label: 'Text', icon: Type },
|
||
|
|
{ value: 'number', label: 'Number', icon: Hash },
|
||
|
|
{ value: 'phone', label: 'Phone', icon: Phone },
|
||
|
|
{ value: 'email', label: 'Email', icon: Mail },
|
||
|
|
]
|
||
|
|
|
||
|
|
const TypeIcon = ({ type, size = 14 }) => {
|
||
|
|
const opt = TYPE_OPTIONS.find(t => t.value === type)
|
||
|
|
const Icon = opt?.icon || Type
|
||
|
|
return <Icon size={size} />
|
||
|
|
}
|
||
|
|
|
||
|
|
function FieldModal({ field, onClose, onSave }) {
|
||
|
|
const [form, setForm] = useState({
|
||
|
|
label: field?.label || '',
|
||
|
|
field_type: field?.field_type || 'text',
|
||
|
|
required: field?.required || false,
|
||
|
|
})
|
||
|
|
const [error, setError] = useState('')
|
||
|
|
const [loading, setLoading] = useState(false)
|
||
|
|
|
||
|
|
const handleSubmit = async (e) => {
|
||
|
|
e.preventDefault()
|
||
|
|
setError('')
|
||
|
|
if (!form.label.trim()) return setError('Label is required')
|
||
|
|
setLoading(true)
|
||
|
|
try {
|
||
|
|
if (field) {
|
||
|
|
const { data } = await api.put(`/fields/${field.id}`, form)
|
||
|
|
onSave(data, 'edit')
|
||
|
|
} else {
|
||
|
|
const { data } = await api.post('/fields', form)
|
||
|
|
onSave(data, 'add')
|
||
|
|
}
|
||
|
|
onClose()
|
||
|
|
} catch (err) {
|
||
|
|
setError(err.response?.data?.error || 'Failed to save field')
|
||
|
|
} finally {
|
||
|
|
setLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70">
|
||
|
|
<div className="bg-slate-900 rounded-2xl border border-slate-800 w-full max-w-md shadow-2xl">
|
||
|
|
<div className="flex items-center justify-between p-6 border-b border-slate-800">
|
||
|
|
<h3 className="text-lg font-bold text-white">{field ? 'Edit Field' : 'New Field'}</h3>
|
||
|
|
<button onClick={onClose} className="text-slate-400 hover:text-white"><X size={20} /></button>
|
||
|
|
</div>
|
||
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-5">
|
||
|
|
{error && <div className="bg-red-500/10 border border-red-500/30 text-red-400 text-sm rounded-xl px-4 py-3">{error}</div>}
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-slate-400 mb-1.5">Field Label <span className="text-red-400">*</span></label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={form.label}
|
||
|
|
onChange={e => setForm({ ...form, label: e.target.value })}
|
||
|
|
autoFocus
|
||
|
|
className="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition"
|
||
|
|
placeholder="e.g. First Name, Contract ID..."
|
||
|
|
/>
|
||
|
|
{!field && form.label && (
|
||
|
|
<p className="text-xs text-slate-500 mt-1.5">
|
||
|
|
Key: <code className="text-slate-400">{form.label.trim().toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_|_$/g, '')}</code>
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-slate-400 mb-2">Field Type</label>
|
||
|
|
<div className="grid grid-cols-4 gap-2">
|
||
|
|
{TYPE_OPTIONS.map(({ value, label, icon: Icon }) => (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
key={value}
|
||
|
|
onClick={() => setForm({ ...form, field_type: value })}
|
||
|
|
className={`flex flex-col items-center gap-1.5 py-3 px-2 rounded-xl border text-xs font-medium transition ${
|
||
|
|
form.field_type === value
|
||
|
|
? 'border-indigo-500 bg-indigo-500/10 text-indigo-400'
|
||
|
|
: 'border-slate-700 text-slate-400 hover:border-slate-600 hover:text-white'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<Icon size={16} />
|
||
|
|
{label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="flex items-center gap-3 cursor-pointer group">
|
||
|
|
<div
|
||
|
|
onClick={() => setForm({ ...form, required: !form.required })}
|
||
|
|
className={`w-11 h-6 rounded-full transition-colors relative ${form.required ? 'bg-indigo-600' : 'bg-slate-700'}`}
|
||
|
|
>
|
||
|
|
<div className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${form.required ? 'translate-x-5' : ''}`} />
|
||
|
|
</div>
|
||
|
|
<span className="text-sm font-medium text-slate-300 group-hover:text-white transition">Required field</span>
|
||
|
|
</label>
|
||
|
|
<p className="text-xs text-slate-500 mt-1 ml-14">Users must fill this field when adding a contract</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex gap-3 pt-1">
|
||
|
|
<button type="button" onClick={onClose} className="flex-1 py-2.5 rounded-xl border border-slate-700 text-slate-400 hover:text-white transition text-sm font-medium">Cancel</button>
|
||
|
|
<button type="submit" disabled={loading} className="flex-1 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold disabled:opacity-50 transition">
|
||
|
|
{loading ? 'Saving...' : field ? 'Save Changes' : 'Add Field'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Fields() {
|
||
|
|
const [fields, setFields] = useState([])
|
||
|
|
const [loading, setLoading] = useState(true)
|
||
|
|
const [modal, setModal] = useState(null) // null | 'add' | field object
|
||
|
|
const [deleteConfirm, setDeleteConfirm] = useState(null)
|
||
|
|
const [toast, setToast] = useState('')
|
||
|
|
const [dragIdx, setDragIdx] = useState(null)
|
||
|
|
const [dragOverIdx, setDragOverIdx] = useState(null)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
api.get('/fields').then(({ data }) => { setFields(data); setLoading(false) }).catch(() => setLoading(false))
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const showToast = (msg) => { setToast(msg); setTimeout(() => setToast(''), 3000) }
|
||
|
|
|
||
|
|
const handleSave = (data, type) => {
|
||
|
|
if (type === 'add') setFields(prev => [...prev, data])
|
||
|
|
else setFields(prev => prev.map(f => f.id === data.id ? data : f))
|
||
|
|
showToast(type === 'add' ? 'Field added' : 'Field updated')
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleDelete = async (field) => {
|
||
|
|
try {
|
||
|
|
await api.delete(`/fields/${field.id}`)
|
||
|
|
setFields(prev => prev.filter(f => f.id !== field.id))
|
||
|
|
setDeleteConfirm(null)
|
||
|
|
showToast('Field deleted')
|
||
|
|
} catch (err) {
|
||
|
|
showToast(err.response?.data?.error || 'Failed to delete')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Drag-to-reorder
|
||
|
|
const handleDragStart = (idx) => setDragIdx(idx)
|
||
|
|
const handleDragOver = (e, idx) => { e.preventDefault(); setDragOverIdx(idx) }
|
||
|
|
const handleDrop = async (idx) => {
|
||
|
|
if (dragIdx === null || dragIdx === idx) { setDragIdx(null); setDragOverIdx(null); return }
|
||
|
|
const reordered = [...fields]
|
||
|
|
const [moved] = reordered.splice(dragIdx, 1)
|
||
|
|
reordered.splice(idx, 0, moved)
|
||
|
|
const withOrder = reordered.map((f, i) => ({ ...f, sort_order: i + 1 }))
|
||
|
|
setFields(withOrder)
|
||
|
|
setDragIdx(null)
|
||
|
|
setDragOverIdx(null)
|
||
|
|
try {
|
||
|
|
await api.put('/fields/reorder', { order: withOrder.map(f => ({ id: f.id, sort_order: f.sort_order })) })
|
||
|
|
} catch { showToast('Failed to save order') }
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="max-w-3xl">
|
||
|
|
{toast && (
|
||
|
|
<div className="fixed top-4 right-4 z-50 bg-green-500/20 border border-green-500/40 text-green-300 px-4 py-3 rounded-xl shadow-xl text-sm font-medium flex items-center gap-2">
|
||
|
|
<Check size={16} />{toast}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="flex items-center justify-between mb-6">
|
||
|
|
<div>
|
||
|
|
<h2 className="text-2xl font-bold text-white">Fields</h2>
|
||
|
|
<p className="text-slate-400 text-sm mt-1">Manage the columns shown in the Dashboard</p>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
onClick={() => setModal('add')}
|
||
|
|
className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2.5 rounded-xl text-sm font-semibold transition shadow-lg shadow-indigo-900/40"
|
||
|
|
>
|
||
|
|
<Plus size={16} />Add Field
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Info banner */}
|
||
|
|
<div className="bg-indigo-500/10 border border-indigo-500/20 rounded-xl px-4 py-3 mb-5 flex items-start gap-3">
|
||
|
|
<Columns size={16} className="text-indigo-400 mt-0.5 flex-shrink-0" />
|
||
|
|
<p className="text-sm text-indigo-300">
|
||
|
|
Fields define the columns in the Dashboard. You can drag rows to reorder them. Deleting a field removes its data from all existing contracts.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden">
|
||
|
|
{loading ? (
|
||
|
|
<div className="p-12 text-center text-slate-500">Loading...</div>
|
||
|
|
) : fields.length === 0 ? (
|
||
|
|
<div className="p-12 text-center">
|
||
|
|
<Columns size={48} className="text-slate-700 mx-auto mb-3" />
|
||
|
|
<p className="text-slate-400 mb-1">No fields defined yet</p>
|
||
|
|
<button onClick={() => setModal('add')} className="text-indigo-400 hover:text-indigo-300 text-sm mt-2">
|
||
|
|
Add your first field →
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<table className="w-full">
|
||
|
|
<thead>
|
||
|
|
<tr className="border-b border-slate-800">
|
||
|
|
<th className="w-10 px-4 py-3"></th>
|
||
|
|
<th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Label</th>
|
||
|
|
<th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Key</th>
|
||
|
|
<th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Type</th>
|
||
|
|
<th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Required</th>
|
||
|
|
<th className="text-right px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Actions</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{fields.map((f, idx) => (
|
||
|
|
<tr
|
||
|
|
key={f.id}
|
||
|
|
draggable
|
||
|
|
onDragStart={() => handleDragStart(idx)}
|
||
|
|
onDragOver={(e) => handleDragOver(e, idx)}
|
||
|
|
onDrop={() => handleDrop(idx)}
|
||
|
|
onDragEnd={() => { setDragIdx(null); setDragOverIdx(null) }}
|
||
|
|
className={`border-b border-slate-800/50 transition ${
|
||
|
|
dragOverIdx === idx && dragIdx !== idx ? 'bg-indigo-500/10' : 'hover:bg-slate-800/30'
|
||
|
|
} ${dragIdx === idx ? 'opacity-40' : ''}`}
|
||
|
|
>
|
||
|
|
<td className="px-4 py-3.5">
|
||
|
|
<GripVertical size={16} className="text-slate-600 cursor-grab active:cursor-grabbing" />
|
||
|
|
</td>
|
||
|
|
<td className="px-4 py-3.5">
|
||
|
|
<span className="text-white font-medium">{f.label}</span>
|
||
|
|
</td>
|
||
|
|
<td className="px-4 py-3.5">
|
||
|
|
<code className="text-xs text-slate-400 bg-slate-800 px-2 py-1 rounded-lg">{f.field_key}</code>
|
||
|
|
</td>
|
||
|
|
<td className="px-4 py-3.5">
|
||
|
|
<div className="flex items-center gap-1.5 text-slate-400 text-sm">
|
||
|
|
<TypeIcon type={f.field_type} />
|
||
|
|
<span className="capitalize">{f.field_type}</span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td className="px-4 py-3.5">
|
||
|
|
{f.required
|
||
|
|
? <span className="text-xs px-2.5 py-1 rounded-full bg-amber-500/20 text-amber-400 font-medium">Required</span>
|
||
|
|
: <span className="text-xs text-slate-600">Optional</span>
|
||
|
|
}
|
||
|
|
</td>
|
||
|
|
<td className="px-4 py-3.5 text-right">
|
||
|
|
<div className="flex items-center justify-end gap-2">
|
||
|
|
<button onClick={() => setModal(f)} className="p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-700 transition">
|
||
|
|
<Edit2 size={14} />
|
||
|
|
</button>
|
||
|
|
<button onClick={() => setDeleteConfirm(f)} className="p-2 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-500/10 transition">
|
||
|
|
<Trash2 size={14} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{modal && (
|
||
|
|
<FieldModal
|
||
|
|
field={modal === 'add' ? null : modal}
|
||
|
|
onClose={() => setModal(null)}
|
||
|
|
onSave={handleSave}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{deleteConfirm && (
|
||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70">
|
||
|
|
<div className="bg-slate-900 rounded-2xl border border-slate-800 p-6 w-full max-w-sm shadow-2xl">
|
||
|
|
<div className="flex items-start gap-3 mb-4">
|
||
|
|
<div className="w-10 h-10 bg-red-500/20 rounded-xl flex items-center justify-center flex-shrink-0">
|
||
|
|
<AlertTriangle size={20} className="text-red-400" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="text-lg font-bold text-white">Delete Field</h3>
|
||
|
|
<p className="text-slate-400 text-sm mt-1">
|
||
|
|
Delete <strong className="text-white">"{deleteConfirm.label}"</strong>? This will permanently remove this column and all its data from every contract.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-3">
|
||
|
|
<button onClick={() => setDeleteConfirm(null)} className="flex-1 py-2.5 rounded-xl border border-slate-700 text-slate-400 hover:text-white transition text-sm">Cancel</button>
|
||
|
|
<button onClick={() => handleDelete(deleteConfirm)} className="flex-1 py-2.5 rounded-xl bg-red-500/20 hover:bg-red-500/30 text-red-400 border border-red-500/30 transition text-sm font-semibold">Delete Field</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|