// hydor-page-misc.jsx — Reports (P&L), Activity (audit), Settings. /* ============================ REPORTS ============================ */ function ReportsPage() { const s = useHydor(); const d = useDerive(); const push = useToast(); const role = useRole(); const canMoney = Hydor.can(role, "seeCostProfit"); const canFin = Hydor.can(role, "seeFinance"); const years = d.yearList.length ? d.yearList : [new Date().getFullYear()]; const [year, setYear] = React.useState(years[years.length - 1]); React.useEffect(() => { if (!years.includes(year)) setYear(years[years.length - 1]); }, [years.join()]); const qkeys = [1, 2, 3, 4].map((n) => year + "-Q" + n); const qd = qkeys.map((k) => d.quarters[k] || { sales: 0, cogs: 0, gp: 0, fixed: 0, op: 0, costs: 0, net: 0, taxCollected: 0, taxPaid: 0 }); const tot = qd.reduce((a, x) => { Object.keys(x).forEach((k) => { if (typeof x[k] === "number") a[k] = (a[k] || 0) + x[k]; }); return a; }, {}); tot.taxDue = (tot.taxCollected || 0) - (tot.taxPaid || 0); const alloc = tot.net > 10000 ? 7 : tot.net > 5000 ? 5 : 0; const allocAmt = tot.net * (alloc / 100); const catEntries = Object.entries(d.costByCategory || {}).sort((a, b) => b[1] - a[1]); const catMax = catEntries.length ? catEntries[0][1] : 1; const lines = [ ["Sales revenue", "sales", false], ["Cost of goods sold (FIFO)", "cogs", true], ["Gross profit", "gp", false, true], ["Fixed costs", "fixed", true], ["Operational costs", "op", true], ["Net profit", "net", false, true], ]; const exportPL = () => { const rows = [["HYDOR Profit & Loss", year], [], ["Line", "Q1", "Q2", "Q3", "Q4", "Year"]]; lines.forEach(([label, key]) => rows.push([label, ...qd.map((q) => (q[key] || 0).toFixed(3)), (tot[key] || 0).toFixed(3)])); rows.push([], ["GST collected", ...qd.map((q) => (q.taxCollected || 0).toFixed(3)), (tot.taxCollected || 0).toFixed(3)]); rows.push(["GST paid (input)", ...qd.map((q) => (q.taxPaid || 0).toFixed(3)), (tot.taxPaid || 0).toFixed(3)]); rows.push(["GST due", "", "", "", "", tot.taxDue.toFixed(3)]); Hydor.exportCSV(`hydor-pnl-${year}.csv`, rows); push("P&L exported to CSV."); }; return (
Export CSV window.print()}>Print / PDF
HYDOR
{s.meta.company} · {canMoney ? "Profit & Loss Statement" : "Department Performance Report"}
Fiscal Year
{year}
{canMoney ? ( {lines.map(([label, key, neg, strong]) => ( {qd.map((q, i) => )} ))}
Line itemQ1Q2Q3Q4Full Year
{label}{neg && q[key] ? "(" + Hydor.fmtMoney0(q[key]) + ")" : Hydor.fmtMoney0(q[key] || 0)}= 0 ? "var(--pos)" : "var(--neg)") : neg ? "var(--text-2)" : "var(--text)" }}>{neg && tot[key] ? "(" + Hydor.fmtMoney0(tot[key]) + ")" : Hydor.fmtMoney0(tot[key] || 0)}
) : (
Revenue, profit and tax figures are restricted to the founder and co-founder. Your report below shows team and department performance by volume and target attainment.
)}
{/* department performance — visible to all report viewers */}

Department performance (this month)

{canMoney && }{canMoney && } {d.departments.sort((a, b) => b.monthSales - a.monthSales).map((dep) => ( {canMoney && } {canMoney && } ))}
DepartmentHeadcountTargetAttainmentSales (this month)GP (all-time)
{dep.department} {dep.headcount} {dep.target > 0 ? (dep.metric === "visits" ? dep.target + " visits" : Hydor.fmtMoney0(dep.target)) : "—"} {dep.target > 0 ? (
= 1 ? "over" : "under")} style={{ width: Math.min(100, (dep.attainment || 0) * 100) + "%" }} />
= 1 ? "over" : "under")}>{dep.attainment != null ? (dep.attainment * 100).toFixed(0) + "%" : "—"}
) : —}
{dep.metric === "visits" ? (dep.monthVisits + " visits") : Hydor.fmtMoney0(dep.monthSales)}{Hydor.fmtMoney0(dep.gp)}
{/* cost by category — finance roles */} {canFin && catEntries.length > 0 && (

Cost by category{s.meta.csIncentive ? "" : ""} · {Hydor.fmtMoney0(catEntries.reduce((a, x) => a + x[1], 0))} JOD total

{catEntries.map(([cat, amt]) => (
{cat}{Hydor.fmtMoney0(amt)} JOD
))}

Recurring costs (rent, salaries, utilities) post automatically — manage them in Settings → Recurring cost registry.

)} {canMoney && (

GST / Sales Tax ({(d.taxRate * 100).toFixed(0)}%)

= 0 ? "var(--warn)" : "var(--pos)"} />

Profit Allocation

Allocation tier: 7% above 10k net · 5% above 5k · else 0%.

)}
); } function RowKV({ label, value, strong, color }) { return (
{label} {value}
); } /* ============================ ACTIVITY (audit) ============================ */ function ActivityPage() { const s = useHydor(); const grouped = {}; s.audit.forEach((a) => { const day = a.ts.slice(0, 10); (grouped[day] = grouped[day] || []).push(a); }); const days = Object.keys(grouped).sort().reverse(); return (
{s.audit.length === 0 ? (
Every change you make — products, transactions, costs, settings — is logged here for a full audit trail.
) : (
{days.map((day) => (
{Hydor.fmtDate(day)}
{grouped[day].map((a) => (
{a.action} {a.detail} {new Date(a.ts).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" })}
))}
))}
)}
); } /* ============================ SETTINGS ============================ */ function SettingsPage() { const s = useHydor(); const d = useDerive(); const push = useToast(); const [confirm, setConfirm] = React.useState(null); const fileRef = React.useRef(); const onImport = (e) => { const file = e.target.files[0]; if (!file) return; const r = new FileReader(); r.onload = () => { try { Hydor.importData(JSON.parse(r.result)); push("Backup restored."); } catch (err) { push(err.message, "err"); } }; r.readAsText(file); e.target.value = ""; }; return (
{/* business */}
Hydor.setMeta({ company: e.target.value })} /> Hydor.setMeta({ taxRate: Hydor.num(e.target.value) / 100 })} style={{ paddingRight: 30 }} /> Hydor.setMeta({ deadStockDays: Hydor.num(e.target.value, 90) })} style={{ paddingRight: 48 }} /> Hydor.setMeta({ defaultReorder: Hydor.num(e.target.value) })} />
{/* security / access */} {/* access levels overview */} {/* recurring cost registry */} {/* attendance rules */} {/* cloud sync */} {/* devices & sync */} {/* period locking */} {d.quarterKeys.filter((k) => { const q = d.quarters[k]; return q.sales || q.costs; }).length === 0 ?

No quarters with activity yet.

: (
{d.quarterKeys.filter((k) => { const q = d.quarters[k]; return q.sales || q.costs; }).map((k) => { const locked = s.meta.lockedQuarters.includes(k); return ; })}
)} {/* data */}
{ Hydor.exportBackup(); push("Backup downloaded."); }}>Export backup fileRef.current.click()}>Restore from file
{s.transactions.length === 0 && s.products.length === 0 ? setConfirm("demo")}>Load demo data : setConfirm("reset")}>Reset all data}

{s.products.length} products · {s.transactions.filter((t) => !t.deleted).length} transactions · {s.costs.filter((c) => !c.deleted).length} costs · {s.parties.length} contacts

{confirm === "reset" && { Hydor.resetData(); push("All data cleared."); }} onClose={() => setConfirm(null)} />} {confirm === "demo" && { Hydor.loadDemo(); push("Demo data loaded."); }} onClose={() => setConfirm(null)} />}
); } const ROLE_OPTS = Hydor.ROLE_KEYS.map((k) => [k, Hydor.ROLE_INFO[k].label]); const roleColor = { owner: "purple", cofounder: "blue", manager: "blue", teamlead: "blue", staff: "green", accountant: "amber" }; const DEPTS = ["Management", "Sales", "Customer Success", "Call Center", "Installation & Technical", "Finance", "Operations"]; function SecuritySettings({ s, push }) { const auth = s.meta.auth || { enabled: false }; const me = Hydor.currentUser(); const [form, setForm] = React.useState(null); // {editing} | {} (new) const [del, setDel] = React.useState(null); const [showPw, setShowPw] = React.useState({}); const users = s.users.slice().sort((a, b) => { const order = { owner: 0, cofounder: 1, manager: 2, teamlead: 3, staff: 4, accountant: 5 }; return ((order[a.role] ?? 6) - (order[b.role] ?? 6)) || a.name.localeCompare(b.name); }); return (
{users.map((u) => ( ))}
AccountRoleCodePasswordStatus
{u.name.slice(0, 1).toUpperCase()}{u.name}{me && me.id === u.id && (you)} {ROLE_OPTS.find((r) => r[0] === u.role)[1]} {u.code ? {u.code} : —} {showPw[u.id] ? u.password : "••••••"} setShowPw((x) => ({ ...x, [u.id]: !x[u.id] }))}>{showPw[u.id] ? "hide" : "show"} {u.active ? active : disabled}
setForm({ editing: u })} /> setDel(u)} />
setForm({})}>New account

Access gate stored in this browser — good for keeping staff to their own view, not bank-grade encryption.

{form && setForm(null)} push={push} />} {del && { try { Hydor.deleteUser(del.id); push("Account deleted."); } catch (e) { push(e.message, "err"); } }} onClose={() => setDel(null)} />} ); } function UserForm({ editing, onClose, push }) { const [f, setF] = React.useState(editing ? { name: editing.name, role: editing.role, code: editing.code, department: editing.department || "Sales", password: editing.password, active: editing.active, salary: editing.salary || 0, monthlyTarget: editing.monthlyTarget || 0, teamTarget: editing.teamTarget || 0, reportsTo: editing.reportsTo || "", hireDate: editing.hireDate || "" } : { name: "", role: "staff", code: "", department: "Sales", password: "", active: true, salary: 0, monthlyTarget: 0, teamTarget: 0, reportsTo: "", hireDate: "" }); const [show, setShow] = React.useState(false); const set = (k, v) => setF((p) => ({ ...p, [k]: v })); const teamLeads = Hydor.getState().users.filter((u) => u.active && u.role === "teamlead" && (!editing || u.id !== editing.id)); const save = async () => { try { let rec; if (editing) { Hydor.updateUser(editing.id, f); rec = Hydor.getState().users.find((u) => u.id === editing.id); // sync to Railway accounts API so login works from all devices if (window.HYDOR_API_BASE && window.HydorAPI && window.HydorAPI.isAuthed()) { try { await window.HydorAPI.updateAccount(editing.id, { ...f }); } catch (e) { console.warn("Railway account sync failed:", e.message); } } push("Account updated."); } else { rec = Hydor.addUser(f); // sync to Railway accounts API so login works from all devices if (window.HYDOR_API_BASE && window.HydorAPI && window.HydorAPI.isAuthed()) { try { await window.HydorAPI.post("/accounts", { ...f, id: rec.id }); } catch (e) { console.warn("Railway account sync failed:", e.message); } } push(`Account for ${f.name.trim()} created.`); } onClose(); } catch (e) { push(e.message, "err"); } }; const gen = () => set("password", Math.random().toString(36).slice(2, 8)); return ( Cancel {editing ? "Save changes" : "Create account"} }>
set("name", e.target.value)} placeholder="e.g. Omar Haddad" autoFocus /> set("code", e.target.value.toUpperCase())} placeholder="e.g. OM" maxLength={6} /> {f.department === "Call Center" ? set("monthlyTarget", e.target.value)} style={{ paddingRight: 52 }} /> : set("monthlyTarget", e.target.value)} style={{ paddingRight: 44 }} />} {f.role === "teamlead" && ( set("teamTarget", e.target.value)} style={{ paddingRight: 44 }} /> )} {(f.role === "staff" || f.role === "teamlead") && teamLeads.length > 0 && ( )} set("salary", e.target.value)} style={{ paddingRight: 44 }} /> set("hireDate", e.target.value)} />
set("password", e.target.value)} placeholder="Set a password" />
Generate
{editing && ( )}
); } function DevicesCard({ s, push, fileRef, onImport }) { const fs = useFS(); return ( {/* primary: auto-save to file */}
Automatic saving to a file {fs.connected && on}
{!fs.supported ? (

This browser can’t save directly to a file. Your data is stored inside this browser — use Export backup below regularly, or open HYDOR in Chrome or Edge to enable one-click automatic file saving.

) : fs.connected ? ( <>

Every change is saved automatically to {fs.fileName}. You can close HYDOR anytime — your data is safe on disk. Open this same file on another computer to continue there.

{ window.HydorFS.writeNow(); push("Saved."); }}>Save now { window.HydorFS.disconnect(); push("Auto-save turned off."); }}>Turn off
) : ( <>

Bind HYDOR to a file on this computer. After a one-time setup, everything saves automatically and is never lost when you close the app — exactly like a normal accounting program.

window.HydorFS.connect().then(() => push("Auto-save on.")).catch((e) => e && e.name !== "AbortError" && push(e.message, "err"))}>Create data file window.HydorFS.openExisting().then(() => push("Data file loaded.")).catch((e) => e && e.name !== "AbortError" && push(e.message, "err"))}>Open existing file
)}
{/* secondary: manual backup + multi-user note */}
Manual backup / restore

Export a snapshot file anytime as a safety copy, or to move data to another computer, then restore it there.

Live shared sync (multi-user)

For several people editing the same books at once across devices, HYDOR needs a hosted cloud database. That’s a follow-on step — ask and I’ll wire it up.

{ Hydor.exportBackup(); push("Backup downloaded."); }}>Export backup fileRef.current.click()}>Restore from file
); } function SettingCard({ title, desc, children }) { return (

{title}

{desc}

{children}
); } /* ---- access levels overview ---- */ const CAP_ROWS = [ ["Dashboard & analytics", "seeDashboard"], ["Cost, profit & margin figures", "seeCostProfit"], ["Salaries & incentive amounts", "seeMoney"], ["Company costs & receivables/payables", "seeFinance"], ["Add purchases & stock adjustments", "postPurchases"], ["Suppliers & all clients", "seeAllContacts"], ["Print / export PDF", "canPrint"], ["Notification centre", "seeNotifications"], ["Settings & accounts", "seeSettings"], ["Approve leave", "approveLeave"], ["Set targets & incentive rules", "setTargets"], ["Sell below the markup floor", "sellBelowFloor"], ["Manage products & inventory", "manageProducts"], ["Customer finder / prospecting", "findCustomers"], ]; function AccessCard() { return (
{Hydor.ROLE_KEYS.map((r) => )} {CAP_ROWS.map(([label, cap]) => ( {Hydor.ROLE_KEYS.map((r) => ( ))} ))}
Capability{Hydor.ROLE_INFO[r].short}
{label} {Hydor.can(r, cap) ? : ·}
); } /* ---- attendance rules ---- */ function AttendanceRules({ s, push }) { const a = s.meta.attendance || { workStart: "09:00", graceMin: 10, tier2Min: 30, tier3Min: 60 }; const [f, setF] = React.useState({ workStart: a.workStart, graceMin: a.graceMin, tier2Min: a.tier2Min, tier3Min: a.tier3Min }); const set = (k, v) => setF((p) => ({ ...p, [k]: v })); const save = () => { Hydor.setMeta({ attendance: { workStart: f.workStart || "09:00", graceMin: Hydor.num(f.graceMin, 10), tier2Min: Hydor.num(f.tier2Min, 30), tier3Min: Hydor.num(f.tier3Min, 60) } }); push("Attendance rules saved."); }; return (
set("workStart", e.target.value)} /> set("graceMin", e.target.value)} />
" + f.graceMin + " min"} body="Notify founder & manager — choose verbal warning, written reprimand or salary deduction." /> " + f.tier2Min + " min"} body="Salary deduction applies — amount set by the founder or manager." /> " + f.tier3Min + " min, no prior notice"} body="Referred to the investigation committee." />
set("tier2Min", e.target.value)} /> set("tier3Min", e.target.value)} />
Save rules
 ); } function RuleRow({ color, head, body }) { return (
{head}
{body}
); } /* ---- cloud sync (Firebase) ---- */ function useCloud() { const safeGet = () => { try { return window.HydorCloud && window.HydorCloud.getStatus ? window.HydorCloud.getStatus() : { available: false }; } catch(e) { return { available: false }; } }; const [st, setSt] = React.useState(safeGet); React.useEffect(() => { try { return window.HydorCloud && window.HydorCloud.onStatus ? window.HydorCloud.onStatus((s) => setSt({ ...s })) : undefined; } catch(e) { return undefined; } }, []); return st; } function CloudSettings({ push }) { const cloud = useCloud(); const [open, setOpen] = React.useState(false); // setup form const [guide, setGuide] = React.useState(false); const [cfgText, setCfgText] = React.useState(""); const [ws, setWs] = React.useState("main"); const [busy, setBusy] = React.useState(false); const has = window.HydorCloud; const dot = cloud.connected ? "var(--pos)" : cloud.connecting ? "var(--warn)" : cloud.error ? "var(--neg)" : "var(--text-3)"; const stateLabel = cloud.connected ? "Live — syncing in real time" : cloud.connecting ? "Connecting…" : cloud.configured ? "Configured (not connected)" : "Not set up"; const doConnect = async () => { if (!cfgText.trim()) return push("Paste your Firebase configuration first.", "err"); setBusy(true); try { await window.HydorCloud.configure(cfgText, ws); push("Connected — your data now syncs live."); setOpen(false); setCfgText(""); } catch (e) { push(e.message, "err"); } finally { setBusy(false); } }; const reconnect = async () => { setBusy(true); try { await window.HydorCloud.connect(); push("Reconnected."); } catch (e) { push(e.message, "err"); } finally { setBusy(false); } }; const copyCode = () => { const c = window.HydorCloud.connectionCode(); if (!c) return; navigator.clipboard && navigator.clipboard.writeText(c); push("Connection code copied — share it with your team to link their device."); }; return (
{stateLabel}
{cloud.workspaceId ? "Workspace: " + cloud.workspaceId + " · " : ""} {cloud.lastSync ? "last sync " + new Date(cloud.lastSync).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", second: "2-digit" }) : (has && has.sdkReady ? "Firebase ready" : "Firebase SDK loading / offline")}
{cloud.syncing && }
{cloud.error &&
{cloud.error}
} {!cloud.connected ? (
setOpen((x) => !x)}>{cloud.configured ? "Re-enter configuration" : "Set up cloud sync"} {cloud.configured && Reconnect} setGuide((x) => !x)}>{guide ? "Hide" : "How do I get this?"}
) : (
{ window.HydorCloud.pushNow(); push("Synced."); }}>Sync now Copy team connection code
{ window.HydorCloud.disconnect(); push("Disconnected — back to local-only on this device."); }}>Disconnect
)} {open && !cloud.connected && (