78 lines
3.4 KiB
TypeScript
78 lines
3.4 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import Layout from '@/components/layout/Layout'
|
|
import { Card, EmptyState, Btn, Field, Input, showToast } from '@/components/ui'
|
|
import { useApp } from '@/lib/context'
|
|
|
|
export default function ShippingStandardPage() {
|
|
const { user } = useApp()
|
|
const [items, setItems] = useState<any[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [newText, setNewText] = useState('')
|
|
const [adding, setAdding] = useState(false)
|
|
|
|
const canEdit = user && (user.role === 'ADMIN' || user.role === 'QC')
|
|
|
|
useEffect(() => { load() }, [])
|
|
|
|
async function load() {
|
|
setLoading(true)
|
|
const res = await fetch('/api/shipping-standard')
|
|
if (res.ok) { const { data } = await res.json(); setItems(data || []) }
|
|
setLoading(false)
|
|
}
|
|
|
|
async function addItem() {
|
|
if (!newText.trim()) return
|
|
setAdding(true)
|
|
const res = await fetch('/api/shipping-standard', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ text: newText, source: 'Baseline' }),
|
|
})
|
|
setAdding(false)
|
|
if (res.ok) {
|
|
setNewText('')
|
|
showToast('Added to shipping standard')
|
|
load()
|
|
} else {
|
|
showToast('Failed to add', 'error')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Layout title="Shipping standard">
|
|
<div style={{ marginBottom: '16px' }}>
|
|
<h2 style={{ fontSize: '16px', fontWeight: '500', margin: 0 }}>Living shipping standard</h2>
|
|
<p style={{ fontSize: '11px', color: '#aaa', margin: '2px 0 0' }}>What must be true before a product ships. Updates automatically when a client-reported quality escape is resolved.</p>
|
|
</div>
|
|
|
|
<Card>
|
|
{loading ? (
|
|
<div style={{ textAlign: 'center', padding: '32px', color: '#aaa', fontSize: '12px' }}>Loading…</div>
|
|
) : items.length === 0 ? (
|
|
<EmptyState title="No standard items yet" message="Add baseline checks below, or resolve a client issue with 'update shipping standard' to add one automatically."/>
|
|
) : items.map((item: any, i: number) => (
|
|
<div key={item.id} style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', border: '0.5px solid #eee', borderRadius: '8px', padding: '11px 13px', marginBottom: '8px' }}>
|
|
<div style={{ width: '22px', height: '22px', borderRadius: '50%', background: '#f5f5f5', color: '#aaa', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '11px', fontWeight: '500', flexShrink: 0 }}>{i + 1}</div>
|
|
<div style={{ flex: 1 }}>
|
|
<div style={{ fontSize: '13px', lineHeight: '1.5' }}>{item.text}</div>
|
|
<div style={{ fontSize: '10px', color: '#aaa', marginTop: '3px' }}>
|
|
Source: {item.source === 'Baseline' ? 'Baseline' : <span style={{ color: '#534AB7', fontWeight: '500' }}>{item.source}</span>}
|
|
{item.source !== 'Baseline' && <> · {new Date(item.createdAt).toLocaleDateString()}</>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{canEdit && (
|
|
<div style={{ display: 'flex', gap: '8px', marginTop: '12px', borderTop: '0.5px solid #eee', paddingTop: '14px' }}>
|
|
<div style={{ flex: 1 }}>
|
|
<Input value={newText} onChange={e => setNewText(e.target.value)} placeholder="Add a baseline check…"/>
|
|
</div>
|
|
<Btn onClick={addItem} disabled={adding}>{adding ? 'Adding…' : 'Add'}</Btn>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
</Layout>
|
|
)
|
|
}
|