{/* Calibration Auto-Quotation */}
Calibration Auto-Quotation
When an equipment calibration is approaching its due date, AegisComply will automatically generate and send a quotation request to your preferred service provider.
{error &&
{error}
}
Enable auto-quotation for calibration
Automatically email the service provider when due date is approaching
set('cal_auto_quote', !settings.cal_auto_quote)}/>
{settings.cal_auto_quote && (
<>
How it works: {settings.cal_days_before} days before calibration due date, the system sends a quotation request email to your configured service provider. You will receive a CC copy.
CC developer / system admin
Send a copy to your system developer for every auto-quotation
set('cal_dev_cc', !settings.cal_dev_cc)}/>
{settings.cal_dev_cc && (
Developer / Admin email (CC)
)}
)}
{/* PPE Auto-Quotation */}
PPE Stock Auto-Quotation
When PPE stock reaches the configured threshold, AegisComply automatically sends a quotation request to your supplier and notifies your team.
Enable auto-quotation for PPE
Automatically email supplier when stock falls below threshold
set('ppe_auto_quote', !settings.ppe_auto_quote)}/>
{settings.ppe_auto_quote && (
<>
How it works: When any PPE item stock drops to or below the minimum threshold, a quotation request is immediately sent to your configured supplier email.
Trigger at stock level
set('ppe_trigger', e.target.value)}>
At minimum threshold (exact)
At 2Γ minimum threshold (early)
Only at critical (below 50% of minimum)
Suggested order quantity
set('ppe_quote_qty', e.target.value)}>
Fill to minimum (exact gap)
2Γ minimum stock level
3Γ minimum stock level (recommended)
Supplier email (quotation sent to)
CC developer / system admin
Send a copy to your system developer for every auto-quotation
set('ppe_dev_cc', !settings.ppe_dev_cc)}/>
)}
{saving ? 'Savingβ¦' : 'Save Settings'}
{saved &&
}
);
}
function ProfileSettings({ user }) {
const [form, setForm] = React.useState({
name: user?.name || '',
role: user?.role || 'Safety Officer',
email: user?.email || '',
phone: user?.phone || '',
whatsapp: user?.whatsapp || '',
company: user?.company || '',
});
const [saving, setSaving] = React.useState(false);
const [saved, setSaved] = React.useState(false);
const [error, setError] = React.useState('');
const set = (k, v) => { setForm(f => ({ ...f, [k]: v })); setSaved(false); };
const handleSave = async () => {
setSaving(true); setError('');
try {
const sb = window.supabaseClient;
const { error: upErr } = await sb.from('users').update({
name: form.name,
role: form.role,
phone: form.phone || null,
whatsapp: form.whatsapp || null,
company: form.company,
}).eq('id', user.id);
if (upErr) throw upErr;
setSaved(true);
setTimeout(() => setSaved(false), 3000);
} catch (err) {
console.error('[Profile] save error:', err);
setError(err.message || 'Save failed.');
} finally {
setSaving(false);
}
};
return (
Profile & Company
Update your account information and company details.
{error &&
{error}
}
{saving ? 'Savingβ¦' : 'Save Profile'}
{saved &&
}
);
}
// ββ Vendors (Labs & Suppliers) Management βββββββββββββββββββββββββββββββββ
function VendorsManagement({ user }) {
const [type, setType] = React.useState('cal_lab'); // 'cal_lab' | 'ppe_supplier'
const [vendors, setVendors] = React.useState([]);
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState('');
const [editing, setEditing] = React.useState(null); // null | 'new' | vendor
const fetchVendors = React.useCallback(async () => {
setLoading(true); setError('');
try {
const sb = window.supabaseClient;
const { data, error: qErr } = await sb.from('vendors').select('*').order('is_default', { ascending: false }).order('name');
if (qErr) throw qErr;
setVendors(data || []);
} catch (err) {
console.error('[Vendors] fetch error:', err);
setError(err.message);
} finally {
setLoading(false);
}
}, []);
React.useEffect(() => { fetchVendors(); }, [fetchVendors]);
// Realtime
React.useEffect(() => {
if (!user) return;
const sb = window.supabaseClient;
if (!sb) return;
const ch = sb.channel(`vendors-${user.id}`)
.on('postgres_changes', { event: '*', schema: 'public', table: 'vendors', filter: `user_id=eq.${user.id}` }, () => fetchVendors())
.subscribe();
return () => { sb.removeChannel(ch); };
}, [user, fetchVendors]);
const handleDelete = async (vendorId) => {
if (!confirm('Delete this vendor?')) return;
try {
const sb = window.supabaseClient;
const { error: delErr } = await sb.from('vendors').delete().eq('id', vendorId);
if (delErr) throw delErr;
} catch (err) {
alert('Delete failed: ' + err.message);
}
};
const handleSetDefault = async (vendorId, vendorType) => {
try {
const sb = window.supabaseClient;
// Unset all defaults of this type first
await sb.from('vendors').update({ is_default: false }).eq('type', vendorType);
// Set this one as default
const { error: upErr } = await sb.from('vendors').update({ is_default: true }).eq('id', vendorId);
if (upErr) throw upErr;
} catch (err) {
alert('Update failed: ' + err.message);
}
};
const filtered = vendors.filter(v => v.type === type);
return (
Saved Labs & Suppliers
Pre-saved contacts used in Booking + Reorder modals and scheduled reminders.
setEditing('new')}
>
+ Add {type === 'cal_lab' ? 'Lab' : 'Supplier'}
{/* Type tabs */}
{[
{ id: 'cal_lab', label: 'π¬ Calibration Labs' },
{ id: 'ppe_supplier', label: 'π¦Ί PPE Suppliers' },
].map(t => (
setType(t.id)}
style={{
padding: '6px 14px',
borderRadius: 5,
fontSize: 12,
fontWeight: 600,
cursor: 'pointer',
border: 'none',
background: type === t.id ? 'white' : 'transparent',
color: type === t.id ? '#0F172A' : '#64748B',
fontFamily: "'DM Sans',sans-serif",
boxShadow: type === t.id ? '0 1px 3px rgba(0,0,0,0.06)' : 'none',
}}
>
{t.label}
))}
{error &&
{error}
}
{loading && filtered.length === 0 ? (
Loadingβ¦
) : filtered.length === 0 ? (
No {type === 'cal_lab' ? 'calibration labs' : 'PPE suppliers'} saved yet.Click "Add" above to save one for quick reuse.
) : (
{filtered.map((v, i) => (
{v.name}
{v.is_default && DEFAULT }
{v.specialty &&
{v.specialty}
}
{v.email}
{v.phone || v.whatsapp || 'β'}
{!v.is_default && (
handleSetDefault(v.id, v.type)} style={{ height: 26, padding: '0 8px', borderRadius: 4, border: '1px solid #CBD5E1', background: 'white', fontSize: 11, color: '#475569', cursor: 'pointer', fontFamily: "'DM Sans',sans-serif" }} title="Set as default">
Set default
)}
setEditing(v)} style={{ height: 26, padding: '0 8px', borderRadius: 4, border: '1px solid #CBD5E1', background: 'white', fontSize: 11, color: '#475569', cursor: 'pointer', fontFamily: "'DM Sans',sans-serif" }}>
Edit
handleDelete(v.id)} style={{ height: 26, padding: '0 8px', borderRadius: 4, border: '1px solid #FECACA', background: 'white', fontSize: 11, color: '#DC2626', cursor: 'pointer', fontFamily: "'DM Sans',sans-serif" }}>
β
))}
)}
{editing && (
setEditing(null)}
onSaved={() => { setEditing(null); fetchVendors(); }}
/>
)}
);
}
function VendorFormModal({ initial, user, onClose, onSaved }) {
const empty = { type: 'cal_lab', name: '', email: '', phone: '', whatsapp: '', specialty: '', notes: '', is_default: false };
const [form, setForm] = React.useState({ ...empty, ...initial });
const [saving, setSaving] = React.useState(false);
const [error, setError] = React.useState('');
const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
const isEdit = !!initial?.id;
const valid = form.name.trim() && form.email.trim() && /\S+@\S+\.\S+/.test(form.email);
const handleSubmit = async () => {
setError('');
if (!valid) { setError('Name and a valid email are required.'); return; }
setSaving(true);
try {
const sb = window.supabaseClient;
const payload = {
user_id: user.id,
type: form.type,
name: form.name.trim(),
email: form.email.trim().toLowerCase(),
phone: form.phone || null,
whatsapp: form.whatsapp || null,
specialty: form.specialty || null,
notes: form.notes || null,
is_default: form.is_default,
};
if (form.is_default) {
// Unset other defaults of this type first
await sb.from('vendors').update({ is_default: false }).eq('type', form.type);
}
if (isEdit) {
const { error: upErr } = await sb.from('vendors').update(payload).eq('id', initial.id);
if (upErr) throw upErr;
} else {
const { error: insErr } = await sb.from('vendors').insert(payload);
if (insErr) throw insErr;
}
onSaved();
} catch (err) {
console.error('[Vendor] save error:', err);
setError(err.message);
} finally {
setSaving(false);
}
};
return (
e.stopPropagation()}>
{isEdit ? 'Edit' : 'Add'} {form.type === 'cal_lab' ? 'Calibration Lab' : 'PPE Supplier'}
Cancel
{saving ? 'Savingβ¦' : isEdit ? 'Save Changes' : 'Add Vendor'}
);
}
function PlaceholderSection({ title }) {
return (
{title}
This settings section is part of the UI kit prototype β not yet fully built.
);
}
function SettingsScreen({ user }) {
const [active, setActive] = React.useState('quotation');
const renderContent = () => {
switch (active) {
case 'profile': return
;
case 'quotation': return ;
case 'vendors': return ;
default: return s.items).find(i => i.id === active)?.label || 'Settings'}/>;
}
};
return (
{navSections.map((s, i) => (
{s.section}
{s.items.map(item => (
setActive(item.id)}>
{item.icon} {item.label}
))}
))}
{renderContent()}
);
}
Object.assign(window, { SettingsScreen });