// hydor-page-ops.jsx — Call Center (visit queue, appointment dispatch, ranking), // below-price approval request + approver queue. Depends on engine + ui + forms. const fmtT = (ts) => new Date(ts).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" }); /* ===== below-price approval REQUEST (staff / team manager) ===== */ function ApprovalRequestForm({ onClose }) { const push = useToast(); const s = Hydor.getState(); const d = Hydor.derive(); const me = Hydor.currentUser(); const [f, setF] = React.useState({ productId: s.products[0] ? s.products[0].id : "", qty: 1, proposedPrice: "", partyId: "", note: "" }); const set = (k, v) => setF((p) => ({ ...p, [k]: v })); const prod = s.products.find((p) => p.id === f.productId); const rec = prod && d.productStats[f.productId] ? d.productStats[f.productId].recPrice : 0; const myCustomers = s.parties.filter((p) => p.type === "customer" && (Hydor.canU(me, "seeAllContacts") || !p.createdBy || (me && p.createdBy === me.id))); const submit = () => { if (!f.productId) return push("Pick a product.", "err"); if (Hydor.num(f.proposedPrice, 0) <= 0) return push("Enter your proposed price.", "err"); Hydor.submitApproval({ ...f, recPrice: rec }); push("Approval request sent to your manager / the founder."); onClose(); }; return ( Cancel Send request }>
set("qty", e.target.value)} /> set("proposedPrice", e.target.value)} style={{ paddingRight: 44 }} /> set("note", e.target.value)} placeholder="Why the discount is justified" />
); } /* ===== approver queue — shown to owner / manager on the Transactions page ===== */ function PendingApprovals() { const s = useHydor(); const push = useToast(); const me = Hydor.currentUser(); const role = useRole(); if (!Hydor.can(role, "approveBelowPrice")) return null; const pending = s.approvals.filter((a) => a.status === "pending"); if (!pending.length) return null; const uname = (id) => { const u = s.users.find((x) => x.id === id); return u ? u.name : "—"; }; const pname = (id) => { const p = s.products.find((x) => x.id === id); return p ? p.code + " · " + p.name : "—"; }; const cname = (id) => { const c = s.parties.find((x) => x.id === id); return c ? c.name : ""; }; return (

Below-price approvals ({pending.length})

{pending.map((a) => (
{uname(a.userId)} · {pname(a.productId)}{a.qty > 1 ? " ×" + a.qty : ""}
Proposed {Hydor.fmtMoney(a.proposedPrice)} vs recommended {Hydor.fmtMoney(a.recPrice)}{a.partyId ? " · " + cname(a.partyId) : ""}{a.note ? " · " + a.note : ""}
{ Hydor.decideApproval(a.id, true, me && me.id); push("Approved — sale posted."); }}>Approve { Hydor.decideApproval(a.id, false, me && me.id); push("Rejected."); }}>Reject
))}
); } /* ===== Call Center: visit queue, ranking, appointment dispatch ===== */ function CallCenterPage() { const s = useHydor(); const push = useToast(); const t = window.__t || ((x) => x); const me = Hydor.currentUser(); const [assignFor, setAssignFor] = React.useState(null); const [confirmFor, setConfirmFor] = React.useState(null); const queue = Hydor.visitQueue(); const uname = (id) => { const u = s.users.find((x) => x.id === id); return u ? u.name : "—"; }; const cname = (id) => { const c = s.parties.find((x) => x.id === id); return c ? c.name : ""; }; // appointments pending confirmation for the current field rep const myRole = me && me.role; const isFieldRep = myRole === "staff" || myRole === "teamlead"; const pendingConfirm = isFieldRep ? s.appointments.filter((a) => a.assignedTo === me.id && a.status === "assigned") : []; const recentAppts = s.appointments.slice(0, 10); const visitEnds = s.attendance.filter((a) => a.type === "visit_end").slice(0, 12); return (
{/* FIELD REP: pending confirmation panel */} {pendingConfirm.length > 0 && (

{t("Pending visit confirmations")} ({pendingConfirm.length})

{pendingConfirm.map((a) => (
{a.bookingCustomerName || cname(a.partyId) || "—"}
{a.bookingPhone && "📞 " + a.bookingPhone}{a.bookingAddress && " · " + a.bookingAddress}
{a.desiredAt || fmtT(a.createdAt)}{a.note ? " · " + a.note : ""}
setConfirmFor({ appt: a, defaultApproved: true })}>Confirm setConfirmFor({ appt: a, defaultApproved: false })}>Reject
))}
)}
{t("Free now (finished visits today)")}
{queue.length}
{t("Appointments assigned")}
{s.appointments.length}
{t("Out-of-priority")}
{s.appointments.filter((a) => !a.priorityOk).length}
{/* priority ranking */}

{t("Visit-completion ranking — assign next appointment by priority")}

setAssignFor(queue[0] ? queue[0].userId : "")}>{t("Assign appointment")}
{queue.length === 0 ? ( When an employee ends a visit, they appear here — ranked by who finished first. ) : ( {queue.map((a, i) => ( ))}
{t("Priority")}{t("Employee")}{t("Finished at")}{t("Last customer")}
{i === 0 ? {t("next up")} : #{i + 1}} {uname(a.userId)} {fmtT(a.ts)} {a.partyId ? cname(a.partyId) : "—"} setAssignFor(a.userId)}>{t("Assign")}
)}
{/* recent appointments */}

{t("Recent appointments")}

{recentAppts.length === 0 ?

No appointments dispatched yet.

: recentAppts.map((a) => (
{uname(a.assignedTo).slice(0, 1)}
{uname(a.assignedTo)}
{a.bookingCustomerName || cname(a.partyId) || "—"}{a.bookingPhone ? " · " + a.bookingPhone : ""}
{a.bookingAddress && a.bookingAddress + " · "}{a.desiredAt || fmtT(a.createdAt)}{a.note ? " · " + a.note : ""}
{a.bookingRef &&
Ref: {a.bookingRef}
}
{a.priorityOk ? {t("in order")} : {t("out of priority")}} {a.status === "confirmed" && ✓ confirmed} {a.status === "rejected" && ✗ {a.rejectReason || "rejected"}}
))}
{/* visit-end feed */}

{t("Recent visit completions")}

{visitEnds.length === 0 ?

No visit completions yet.

: visitEnds.map((a) => (
{a.photo ? : {uname(a.userId).slice(0, 1)}}
{uname(a.userId)}{a.partyId ? " · " + cname(a.partyId) : ""}
Finished {fmtT(a.ts)}{a.note ? " · " + a.note : ""}
setAssignFor(a.userId)} title="Assign next appointment" />
))}
{assignFor !== null && setAssignFor(null)} />} {confirmFor !== null && setConfirmFor(null)} />}
); } /* ===== Confirm or reject a CC-booked visit ===== */ function ConfirmVisitModal({ appt, defaultApproved, onClose }) { const push = useToast(); const [approved, setApproved] = React.useState(!!defaultApproved); const REJECT_REASONS = ["Fake / wrong number", "Child made the appointment", "Customer cancelled", "Address not found", "Other"]; const [reason, setReason] = React.useState(""); const save = () => { if (!approved && !reason) return push("Please select a reason for rejection.", "err"); Hydor.confirmVisit(appt.id, { approved, reason: approved ? "" : reason }); push(approved ? "Visit confirmed — added to CC target." : "Visit rejected — call center employee notified."); onClose(); }; return ( Cancel {approved ? "Confirm visit" : "Reject visit"} }>
{appt.bookingCustomerName || "Client"}
{appt.bookingPhone &&
📞 {appt.bookingPhone}
} {appt.bookingAddress &&
📍 {appt.bookingAddress}
} {appt.note &&
{appt.note}
}
{!approved && (
)} {approved &&
This visit will count toward the call center employee's monthly target.
} ); } /* ===== Assign appointment form ===== */ function AssignAppointmentForm({ prefillUser, onClose }) { const push = useToast(); const t = window.__t || ((x) => x); const s = Hydor.getState(); const queue = Hydor.visitQueue(); const priorityUserId = queue.length ? queue[0].userId : null; const [useExisting, setUseExisting] = React.useState(false); const [f, setF] = React.useState({ assignedTo: prefillUser || priorityUserId || "", partyId: "", desiredAt: "", note: "", bookingCustomerName: "", bookingPhone: "", bookingAddress: "", bookingRef: "", }); const set = (k, v) => setF((p) => ({ ...p, [k]: v })); const reps = s.users.filter((u) => u.active && (u.department === "Sales" || u.department === "Installation & Technical" || u.role === "staff" || u.role === "teamlead")); const customers = s.parties.filter((p) => p.type === "customer"); const willOverride = priorityUserId && f.assignedTo !== priorityUserId; const uname = (id) => { const u = s.users.find((x) => x.id === id); return u ? u.name : "—"; }; const save = () => { if (!f.assignedTo) return push("Pick an employee.", "err"); if (!useExisting && !f.bookingCustomerName) return push("Enter the customer name.", "err"); if (!useExisting && !f.bookingPhone) return push("Enter the customer phone number.", "err"); Hydor.assignAppointment(f); push(willOverride ? "Appointment assigned — founder & manager notified (out of priority)." : "Appointment assigned."); onClose(); }; return ( Cancel {t("Assign")} }>
{!useExisting && <> set("bookingCustomerName", e.target.value)} placeholder="Full name" autoFocus /> set("bookingPhone", e.target.value)} placeholder="+962 7x xxx xxxx" /> set("bookingAddress", e.target.value)} placeholder="Street, neighbourhood" /> set("bookingRef", e.target.value)} placeholder="e.g. Instagram DM, phone ref 1023" /> } {useExisting && } set("desiredAt", e.target.value)} /> set("note", e.target.value)} placeholder="Job details, product interest…" /> {willOverride && (
Not the priority employee — founder & manager will be notified.
)}
); } Object.assign(window, { ApprovalRequestForm, PendingApprovals, CallCenterPage, AssignAppointmentForm, ConfirmVisitModal });