149 lines
7.1 KiB
TypeScript
149 lines
7.1 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import Layout from '@/components/layout/Layout'
|
|
import { Card, EmptyState, Btn, Tag, showToast } from '@/components/ui'
|
|
import { FormFieldList } from '@/components/forms/FieldRenderer'
|
|
import { useApp } from '@/lib/context'
|
|
|
|
export default function FillPage() {
|
|
const { user } = useApp()
|
|
const [forms, setForms] = useState<any[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [selected, setSelected] = useState<any>(null)
|
|
const [answers, setAnswers] = useState<Record<string, any>>({})
|
|
const [submitting, setSubmitting] = useState(false)
|
|
const [submitted, setSubmitted] = useState(false)
|
|
|
|
useEffect(() => { loadForms() }, [])
|
|
|
|
async function loadForms() {
|
|
setLoading(true)
|
|
const res = await fetch('/api/forms?status=ACTIVE')
|
|
if (res.ok) {
|
|
const { data } = await res.json()
|
|
setForms(data || [])
|
|
}
|
|
setLoading(false)
|
|
}
|
|
|
|
function selectForm(form: any) {
|
|
setSelected(form)
|
|
setAnswers({})
|
|
setSubmitted(false)
|
|
}
|
|
|
|
async function submitForm() {
|
|
const required = selected.fields.filter((f: any) => f.required)
|
|
for (const f of required) {
|
|
if (!answers[f.id]) {
|
|
showToast(`"${f.label}" is required`, 'error'); return
|
|
}
|
|
}
|
|
setSubmitting(true)
|
|
const res = await fetch('/api/submissions', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ formId: selected.id, data: answers }),
|
|
})
|
|
setSubmitting(false)
|
|
if (res.ok) {
|
|
const { submissionCount } = await res.json()
|
|
setSubmitted(true)
|
|
showToast(`Submitted — you are contributor #${submissionCount}`)
|
|
} else {
|
|
showToast('Submission failed', 'error')
|
|
}
|
|
}
|
|
|
|
function setAnswer(fieldId: string, value: any) {
|
|
setAnswers(a => ({ ...a, [fieldId]: value }))
|
|
}
|
|
|
|
return (
|
|
<Layout title="My forms">
|
|
{!selected ? (
|
|
<>
|
|
<div style={{ marginBottom: '16px' }}>
|
|
<h2 style={{ fontSize: '16px', fontWeight: '500', margin: 0 }}>First build forms</h2>
|
|
<p style={{ fontSize: '11px', color: '#aaa', margin: '2px 0 0' }}>Select a form to fill out — your data helps set quality standards</p>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div style={{ textAlign: 'center', padding: '40px', color: '#aaa', fontSize: '12px' }}>Loading…</div>
|
|
) : forms.length === 0 ? (
|
|
<EmptyState
|
|
title="No active forms"
|
|
message="Your admin hasn't published any data collection forms yet. Check back soon."
|
|
/>
|
|
) : (
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '12px' }}>
|
|
{forms.map((form: any) => (
|
|
<div key={form.id} onClick={() => selectForm(form)} style={{
|
|
background: 'white', border: '0.5px solid #eee', borderRadius: '12px',
|
|
padding: '16px', cursor: 'pointer', transition: 'border-color 0.1s'
|
|
}}>
|
|
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: '8px' }}>
|
|
<div style={{ width: '32px', height: '32px', borderRadius: '8px', background: '#EEEDFE', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#534AB7" strokeWidth="2">
|
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
|
</svg>
|
|
</div>
|
|
<Tag color="green">Active</Tag>
|
|
</div>
|
|
<div style={{ fontSize: '13px', fontWeight: '500', marginBottom: '4px' }}>{form.name}</div>
|
|
{form.product && <div style={{ fontSize: '11px', color: '#aaa', marginBottom: '8px' }}>{form.product}</div>}
|
|
<div style={{ fontSize: '11px', color: '#888' }}>{form.fields?.length || 0} fields · {form._count?.submissions || 0} submissions so far</div>
|
|
<div style={{ marginTop: '12px' }}>
|
|
<Btn size="sm" style={{ width: '100%', justifyContent: 'center' }}>Fill out →</Btn>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : submitted ? (
|
|
<Card style={{ maxWidth: '480px', margin: '40px auto', textAlign: 'center', padding: '32px' }}>
|
|
<div style={{ width: '48px', height: '48px', borderRadius: '50%', background: '#EAF3DE', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1D9E75" strokeWidth="2.5"><path d="M5 13l4 4L19 7"/></svg>
|
|
</div>
|
|
<div style={{ fontSize: '16px', fontWeight: '500', marginBottom: '6px' }}>Submitted</div>
|
|
<div style={{ fontSize: '12px', color: '#888', marginBottom: '20px' }}>Your data has been recorded and will contribute to setting quality standards for {selected.product || selected.name}.</div>
|
|
<div style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}>
|
|
<Btn variant="ghost" onClick={() => { setSubmitted(false); setAnswers({}) }}>Fill again</Btn>
|
|
<Btn onClick={() => setSelected(null)}>Back to forms</Btn>
|
|
</div>
|
|
</Card>
|
|
) : (
|
|
<div style={{ maxWidth: '560px' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '20px' }}>
|
|
<button onClick={() => setSelected(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#aaa', padding: '4px', display: 'flex' }}>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 12H5m7-7l-7 7 7 7"/></svg>
|
|
</button>
|
|
<div>
|
|
<h2 style={{ fontSize: '15px', fontWeight: '500', margin: 0 }}>{selected.name}</h2>
|
|
{selected.product && <div style={{ fontSize: '11px', color: '#aaa' }}>{selected.product}</div>}
|
|
</div>
|
|
</div>
|
|
|
|
<Card>
|
|
<div style={{ background: '#EEEDFE', borderRadius: '8px', padding: '9px 12px', fontSize: '11px', color: '#3C3489', marginBottom: '16px' }}>
|
|
Fill in each field from your direct observation. Your submission is anonymous to QC — it's just your data point.
|
|
</div>
|
|
|
|
<FormFieldList
|
|
fields={(selected.fields || []).slice().sort((a: any, b: any) => a.order - b.order)}
|
|
values={answers}
|
|
onChange={setAnswer}
|
|
/>
|
|
|
|
<div style={{ display: 'flex', gap: '8px', marginTop: '20px', paddingTop: '16px', borderTop: '0.5px solid #eee' }}>
|
|
<Btn variant="ghost" onClick={() => { setAnswers({}); }}>Clear</Btn>
|
|
<Btn onClick={submitForm} disabled={submitting} style={{ flex: 1, justifyContent: 'center' }}>
|
|
{submitting ? 'Submitting…' : 'Submit build data'}
|
|
</Btn>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</Layout>
|
|
)
|
|
}
|