import { useState } from "react";
const PURPLE = "#4B3B8C";
const LAVENDER = "#EEEAF8";
const BORDER = "#d1d5db";
const initForm = () => ({
contractor: "",
teamMember: "",
date: new Date().toISOString().split("T")[0],
skool_access: "",
skool_notes: "",
app_setup: "",
app_notes: "",
training_offered: "",
training_offered_notes: "",
training_completed: "",
training_completed_notes: "",
portal_access: "",
portal_notes: "",
});
const steps = [
{ id: "skool", label: "SKOOL Access Given", desc: "Confirm contractor was granted access to SKOOL community." },
{ id: "app", label: "App Was Set Up", desc: "Confirm the Improvifi app was set up for the contractor." },
{ id: "training_offered", label: "Portal Training Offered", desc: "Confirm portal training was offered to the contractor." },
{ id: "training_completed", label: "Training Completed by Contractor", desc: "Confirm the contractor completed portal training." },
{ id: "portal", label: "Portal Access Granted", desc: "Confirm the contractor was given full portal access." },
];
const valMap = { skool: "skool_access", app: "app_setup", training_offered: "training_offered", training_completed: "training_completed", portal: "portal_access" };
const SectionHeader = ({ title }) => (
);
}
return (
{title}
);
const inputStyle = { width: "100%", padding: "9px 11px", borderRadius: 6, border: `1px solid ${BORDER}`, fontSize: 14, boxSizing: "border-box", fontFamily: "inherit" };
export default function App() {
const [form, setForm] = useState(initForm());
const [submitted, setSubmitted] = useState(false);
const set = (key, val) => setForm(f => ({ ...f, [key]: val }));
const getVal = (id) => form[valMap[id]];
const setVal = (id, val) => set(valMap[id], val);
const getNotes = (id) => form[`${id}_notes`];
const completedCount = steps.filter(s => getVal(s.id) === "Yes").length;
if (submitted) {
return (
Contractor Onboarding Checklist
Contractor: {form.contractor || "—"}
Team Member: {form.teamMember || "—"}
Date: {form.date}
= 3 ? "#d97706" : "#dc2626" }}>
{completedCount}/{steps.length}
= 3 ? "#d97706" : "#dc2626" }}>
{completedCount === steps.length ? "✅ Fully Onboarded" : completedCount >= 3 ? "⚠️ Partially Complete" : "❌ Onboarding Incomplete"}
| Step | Status | Notes |
|---|---|---|
| {s.label} | {getVal(s.id) || "—"} | {getNotes(s.id) || "—"} |
Contractor Onboarding Checklist
{[["Contractor Name", "contractor", "text", "Company name"], ["Date", "date", "date", ""], ["Team Member", "teamMember", "text", "Your name"]].map(([label, key, type, ph]) => (
))}
{label}
set(key, e.target.value)} placeholder={ph} style={inputStyle} />
{i + 1}
{s.label}
{s.desc}
CONFIRMED?
{["Yes", "No"].map(opt => (
))}
NOTES
set(`${s.id}_notes`, e.target.value)}
placeholder="Optional notes..." style={{ ...inputStyle, fontSize: 13 }} />