// CalibrationRFQTab.jsx — AegisComply FR-03C // Client-side "blast a Request-for-Quote to up to 3 labs" tab. Lives // inside CalibrationScreen. Reads/writes public.rfq_requests + // public.rfq_quotes (migration 15). // // Flow shipped here: // 1. Client fills the create form, picks up to 3 registered labs // filtered by category, hits Send. // 2. One rfq_requests row + one rfq_quotes row per picked lab are // inserted. Each lab that has a contact_email gets a heads-up // email via the existing send-email edge function. // 3. RFQ list shows client's RFQs (open / awarded / expired / // cancelled) with status pills + counts of pending / submitted / // declined quotes. // 4. Detail modal shows lab-by-lab quote status. Award action is // deferred to FR-03E — this tab only ships blast + track. // 5. On tab load, any open RFQ whose deadline has passed is flipped // to 'expired' (client-side sweep — cheap, idempotent). const RFQ_STATUS_META = { open: { label: 'Open', bg: '#F0FDFA', color: '#0D9488', dot: '#14B8A6' }, awarded: { label: 'Awarded', bg: '#EFF6FF', color: '#1D4ED8', dot: '#2563EB' }, expired: { label: 'Expired', bg: '#FEF3C7', color: '#92400E', dot: '#D97706' }, cancelled: { label: 'Cancelled', bg: '#F1F5F9', color: '#475569', dot: '#94A3B8' }, closed: { label: 'Closed', bg: '#F1F5F9', color: '#475569', dot: '#94A3B8' }, }; const QUOTE_STATUS_META = { pending: { label: 'Awaiting response', bg: '#FEF3C7', color: '#92400E' }, submitted: { label: 'Quote received', bg: '#F0FDF4', color: '#166534' }, declined: { label: 'Declined', bg: '#FEE2E2', color: '#B91C1C' }, selected: { label: 'Selected', bg: '#EFF6FF', color: '#1D4ED8' }, not_selected: { label: 'Not selected', bg: '#F1F5F9', color: '#475569' }, }; const RFQ_CATEGORY_FALLBACK = [ 'Pressure', 'Temperature', 'Electrical', 'Dimensional', 'Mass', 'Flow', 'Torque', 'Vibration', 'Humidity', 'Time & Frequency', ]; const rfqFmtDate = (d) => { if (!d) return '—'; try { return new Date(d).toLocaleString('en-MY', { dateStyle: 'medium', timeStyle: 'short' }); } catch (_) { return String(d); } }; const rfqFmtMoney = (v, ccy = 'MYR') => { if (v === null || v === undefined || v === '') return '—'; try { return new Intl.NumberFormat('en-MY', { style: 'currency', currency: ccy, maximumFractionDigits: 2 }).format(Number(v)); } catch (_) { return `${ccy} ${Number(v).toFixed(2)}`; } }; // ============================================================ // Main tab // ============================================================ function CalibrationRFQTab({ user, isFrozen }) { const [rfqs, setRfqs] = React.useState([]); const [quotesByRfq, setQuotesByRfq] = React.useState({}); // rfq_id -> quote rows const [labs, setLabs] = React.useState([]); const [loading, setLoading] = React.useState(true); const [unavailable, setUnavailable] = React.useState(false); const [error, setError] = React.useState(''); const [msg, setMsg] = React.useState(''); const [createOpen, setCreateOpen] = React.useState(false); const [detailFor, setDetailFor] = React.useState(null); const [statusFilter, setStatusFilter] = React.useState('all'); // Load all client RFQs + their quote rows in one pass const load = React.useCallback(async () => { if (!user) return; setLoading(true); setError(''); try { const sb = window.supabaseClient; // 1. Fetch open + closed RFQs (RLS ensures only own) const { data: rows, error: rErr } = await sb .from('rfq_requests') .select('*') .order('created_at', { ascending: false }) .limit(200); if (rErr) { if (/relation .* does not exist|rfq_requests/i.test(rErr.message || '')) { setUnavailable(true); return; } throw rErr; } setRfqs(rows || []); // 2. Auto-expire — any open RFQ with a past deadline gets flipped const now = new Date(); const toExpire = (rows || []).filter(r => r.status === 'open' && r.deadline && new Date(r.deadline) < now ); if (toExpire.length > 0) { const ids = toExpire.map(r => r.id); const { error: eErr } = await sb.from('rfq_requests').update({ status: 'expired' }).in('id', ids); if (!eErr) { setRfqs(rs => rs.map(r => ids.includes(r.id) ? { ...r, status: 'expired' } : r)); } } // 3. Fetch quote stubs for all these RFQs const rfqIds = (rows || []).map(r => r.id); if (rfqIds.length > 0) { const { data: qs, error: qErr } = await sb .from('rfq_quotes') .select('*, lab:lab_id(id, name, accreditation_number)') .in('rfq_id', rfqIds); if (qErr) throw qErr; const byRfq = {}; (qs || []).forEach(q => { (byRfq[q.rfq_id] = byRfq[q.rfq_id] || []).push(q); }); setQuotesByRfq(byRfq); } else { setQuotesByRfq({}); } // 4. Active labs for the create modal picker const { data: labRows } = await sb .from('labs') .select('id, name, accreditation_number, calibration_categories, default_lead_time_days, contact_email') .eq('active', true) .order('name'); setLabs(labRows || []); } catch (err) { console.error('[RFQ] load error:', err); setError(err.message || 'Failed to load RFQs.'); } finally { setLoading(false); } }, [user]); React.useEffect(() => { load(); }, [load]); // Realtime — refresh when quote status changes React.useEffect(() => { if (!user) return; const sb = window.supabaseClient; if (!sb || !sb.channel) return; let ch; try { ch = sb.channel('rfq-watch-' + user.id) .on('postgres_changes', { event: '*', schema: 'public', table: 'rfq_requests', filter: `client_id=eq.${user.id}` }, () => load()) .on('postgres_changes', { event: '*', schema: 'public', table: 'rfq_quotes' }, () => load()) .subscribe(); } catch (_) {} return () => { try { if (ch) sb.removeChannel(ch); } catch (_) {} }; }, [user, load]); const handleCancel = async (rfq) => { if (!confirm(`Cancel RFQ for "${rfq.instrument_name}"?\n\nLabs already awarded will not be notified from this action.`)) return; try { const sb = window.supabaseClient; const { error: uErr } = await sb.from('rfq_requests').update({ status: 'cancelled' }).eq('id', rfq.id); if (uErr) throw uErr; setMsg('RFQ cancelled.'); await load(); } catch (err) { setError(err.message || 'Cancel failed.'); } }; const handleReopen = async (rfq) => { if (!confirm(`Reopen RFQ for "${rfq.instrument_name}"?\n\nExisting labs stay invited. To swap labs, cancel and create a fresh RFQ.`)) return; try { const sb = window.supabaseClient; // Extend deadline by 7 days from now (or clear it) const newDeadline = rfq.deadline ? new Date(Date.now() + 7 * 24 * 3600 * 1000).toISOString() : null; const { error: uErr } = await sb.from('rfq_requests').update({ status: 'open', deadline: newDeadline, }).eq('id', rfq.id); if (uErr) throw uErr; setMsg('RFQ reopened. Pending quote rows are still active.'); await load(); } catch (err) { setError(err.message || 'Reopen failed.'); } }; const filteredRfqs = React.useMemo(() => { if (statusFilter === 'all') return rfqs; return rfqs.filter(r => r.status === statusFilter); }, [rfqs, statusFilter]); if (unavailable) { return (
RFQ feature is offline
Table rfq_requests not found. Run supabase/15_fr03a_dual_portal_foundation.sql in the Supabase SQL Editor, then reload.
); } const counts = { all: rfqs.length, open: rfqs.filter(r => r.status === 'open').length, awarded: rfqs.filter(r => r.status === 'awarded').length, expired: rfqs.filter(r => r.status === 'expired').length, cancelled: rfqs.filter(r => r.status === 'cancelled' || r.status === 'closed').length, }; return ( <> {/* Header */}
Request for Quote (RFQ)
Blast a calibration request to up to 3 registered labs, compare their quotes, then award the job.
{msg &&
{msg}
} {error &&
{error}
} {labs.length === 0 && !loading && (
No registered labs available yet. Once your admin registers at least one lab, you'll be able to blast RFQs to it.
)} {/* Filter pills */}
{[ ['all', 'All'], ['open', 'Open'], ['awarded', 'Awarded'], ['expired', 'Expired'], ['cancelled', 'Cancelled'], ].map(([id, label]) => ( ))}
{/* List */} {loading ? (
Loading RFQs…
) : filteredRfqs.length === 0 ? (
{rfqs.length === 0 ? 'No RFQs yet. Click Blast RFQ to send your first request.' : 'No RFQs match this filter.'}
) : (
{filteredRfqs.map(r => ( setDetailFor(r)} onCancel={() => handleCancel(r)} onReopen={() => handleReopen(r)} /> ))}
)} {createOpen && ( setCreateOpen(false)} onCreated={(created) => { setCreateOpen(false); setMsg(`RFQ blasted to ${created} lab${created === 1 ? '' : 's'}.`); load(); }} /> )} {detailFor && ( setDetailFor(null)} onCancel={() => { handleCancel(detailFor); setDetailFor(null); }} onReopen={() => { handleReopen(detailFor); setDetailFor(null); }} /> )} ); } // ─── Single RFQ row card ───────────────────────────────────── function RFQRow({ rfq, quotes, onOpen, onCancel, onReopen }) { const meta = RFQ_STATUS_META[rfq.status] || RFQ_STATUS_META.open; const pending = quotes.filter(q => q.status === 'pending').length; const submitted = quotes.filter(q => q.status === 'submitted').length; const declined = quotes.filter(q => q.status === 'declined').length; const deadlineOverdue = rfq.deadline && new Date(rfq.deadline) < new Date(); return (
{rfq.instrument_name}
{meta.label} {rfq.tag_number && #{rfq.tag_number}}
{rfq.category} · Qty {rfq.quantity || 1} {rfq.preferred_schedule ? ` · target: ${rfq.preferred_schedule}` : ''} {rfq.deadline ? ` · deadline: ${rfqFmtDate(rfq.deadline)}${deadlineOverdue ? ' (past)' : ''}` : ' · no deadline'}
{quotes.length > 0 && ({quotes.length} lab{quotes.length === 1 ? '' : 's'} invited)}
{rfq.status === 'open' && ( )} {(rfq.status === 'expired' || rfq.status === 'cancelled') && ( )}
); } function RfqCountChip({ count, label, color, bg }) { if (!count) return null; return ( {count} {label} ); } // ============================================================ // Create RFQ modal — the "blast" form // ============================================================ function RFQCreateModal({ user, labs, onClose, onCreated }) { const [equipmentOptions, setEquipmentOptions] = React.useState([]); const [equipmentId, setEquipmentId] = React.useState(''); const [instrumentName, setInstrumentName] = React.useState(''); const [tagNumber, setTagNumber] = React.useState(''); const [category, setCategory] = React.useState(''); const [quantity, setQuantity] = React.useState(1); const [preferredSchedule, setPreferredSchedule] = React.useState(''); const [remarks, setRemarks] = React.useState(''); const [deadline, setDeadline] = React.useState(''); // datetime-local string const [pickedLabIds, setPickedLabIds] = React.useState([]); const [sending, setSending] = React.useState(false); const [error, setError] = React.useState(''); // Load client profile (for company name) + equipment list once const [companyName, setCompanyName] = React.useState(''); React.useEffect(() => { (async () => { const sb = window.supabaseClient; try { const { data: prof } = await sb.from('profiles').select('company_name, display_name').eq('id', user.id).maybeSingle(); setCompanyName(prof?.company_name || prof?.display_name || user?.email || ''); } catch (_) {} try { const { data: eq } = await sb.from('equipment').select('id, name, tag_number, category, brand_model').order('name').limit(500); setEquipmentOptions(eq || []); } catch (_) { setEquipmentOptions([]); } })(); }, [user]); // When equipment is picked, autofill instrument / category / tag React.useEffect(() => { if (!equipmentId) return; const eq = equipmentOptions.find(e => e.id === equipmentId); if (!eq) return; if (!instrumentName) setInstrumentName(eq.name || ''); if (!tagNumber && eq.tag_number) setTagNumber(eq.tag_number); if (!category && eq.category) setCategory(eq.category); // eslint-disable-next-line react-hooks/exhaustive-deps }, [equipmentId]); // Categories = union of all lab-registered categories, plus fallbacks const availableCategories = React.useMemo(() => { const set = new Set(RFQ_CATEGORY_FALLBACK); labs.forEach(l => (l.calibration_categories || []).forEach(c => set.add(c))); return Array.from(set).sort(); }, [labs]); // Filter labs by picked category const eligibleLabs = React.useMemo(() => { if (!category) return []; return labs.filter(l => (l.calibration_categories || []).includes(category)); }, [labs, category]); React.useEffect(() => { // Remove picked labs that no longer match the category setPickedLabIds(ids => ids.filter(id => eligibleLabs.some(l => l.id === id))); }, [eligibleLabs]); const toggleLab = (id) => { setPickedLabIds(ids => { if (ids.includes(id)) return ids.filter(x => x !== id); if (ids.length >= 3) return ids; return [...ids, id]; }); }; const canSend = instrumentName.trim() && category && pickedLabIds.length > 0; const handleSend = async () => { if (!canSend) return; setSending(true); setError(''); try { const sb = window.supabaseClient; const payload = { client_id: user.id, equipment_id: equipmentId || null, category, instrument_name: instrumentName.trim(), tag_number: tagNumber.trim() || null, client_company_name: companyName || null, quantity: Number(quantity) || 1, preferred_schedule: preferredSchedule.trim() || null, remarks: remarks.trim() || null, deadline: deadline ? new Date(deadline).toISOString() : null, status: 'open', }; const { data: created, error: iErr } = await sb.from('rfq_requests').insert(payload).select().single(); if (iErr) throw iErr; // Insert one pending quote row per picked lab const stubs = pickedLabIds.map(lab_id => ({ rfq_id: created.id, lab_id, status: 'pending' })); const { error: qErr } = await sb.from('rfq_quotes').insert(stubs); if (qErr) throw qErr; // Best-effort: email each lab that has a contact_email const pickedLabs = labs.filter(l => pickedLabIds.includes(l.id)); const emailPromises = pickedLabs .filter(l => l.contact_email) .map(l => { const subject = `New RFQ — ${instrumentName} (${category})`; const deadlineTxt = deadline ? new Date(deadline).toLocaleString('en-MY', { dateStyle: 'medium', timeStyle: 'short' }) : 'No deadline set'; const html = `
New RFQ from ${companyName || 'a client'}
Please log in to AegisComply to submit your quote or decline.
${tagNumber ? `` : ''} ${preferredSchedule ? `` : ''} ${remarks ? `` : ''}
Instrument${instrumentName}
Tag #${tagNumber}
Category${category}
Quantity${payload.quantity}
Preferred schedule${preferredSchedule}
Deadline${deadlineTxt}
Remarks${remarks.replace(/\n/g, '
')}
Log in at AegisComply to respond. Your quote must be submitted before the deadline.
RFQ ID: ${created.id}
`; return window.aegisInvokeFunction('send-email', { to: l.contact_email, subject, html, replyTo: user?.email, }).catch(err => console.warn('[RFQ] email to ' + l.contact_email + ' failed:', err)); }); // Fire and (mostly) forget — don't block success on email delivery Promise.all(emailPromises).catch(() => {}); onCreated(pickedLabIds.length); } catch (err) { console.error('[RFQ] create error:', err); setError(err.message || 'Failed to blast RFQ.'); } finally { setSending(false); } }; // Minimum datetime-local value = now const nowLocal = React.useMemo(() => { const d = new Date(Date.now() + 5 * 60 * 1000); // +5 min buffer const pad = n => String(n).padStart(2, '0'); return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`; }, []); return (
e.stopPropagation()}>
Blast RFQ
Send a calibration request to up to 3 registered labs at once
{error &&
{error}
} {/* Section 1: Instrument */}
1. Instrument
{equipmentOptions.length > 0 && (
)}
setInstrumentName(e.target.value)} placeholder="e.g. Fluke 754 Documenting Process Calibrator" style={{ width: '100%', height: 36, border: '1px solid #CBD5E1', borderRadius: 6, padding: '0 12px', fontSize: 13, background: 'white', color: '#0F172A', outline: 'none' }} />
setTagNumber(e.target.value)} placeholder="e.g. FLK-001" style={{ width: '100%', height: 36, border: '1px solid #CBD5E1', borderRadius: 6, padding: '0 12px', fontSize: 13, background: 'white', color: '#0F172A', outline: 'none' }} />
setQuantity(e.target.value)} style={{ width: '100%', height: 36, border: '1px solid #CBD5E1', borderRadius: 6, padding: '0 12px', fontSize: 13, background: 'white', color: '#0F172A', outline: 'none' }} />
{/* Section 2: Schedule */}
2. Timeframe
setPreferredSchedule(e.target.value)} placeholder="e.g. Q3 2026 / mid-August" style={{ width: '100%', height: 36, border: '1px solid #CBD5E1', borderRadius: 6, padding: '0 12px', fontSize: 13, background: 'white', color: '#0F172A', outline: 'none' }} />
Flexible timeframe. Fixed date is negotiated after award.
setDeadline(e.target.value)} style={{ width: '100%', height: 36, border: '1px solid #CBD5E1', borderRadius: 6, padding: '0 12px', fontSize: 13, background: 'white', color: '#0F172A', outline: 'none' }} />
Optional. After this, labs can no longer submit.