620 lines
33 KiB
JavaScript
620 lines
33 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import { useParams, useNavigate } from "react-router-dom";
|
|
import api from "../api/client";
|
|
import { useAuth } from "../auth/AuthContext";
|
|
|
|
// ─── Default permission sets ───────────────────────────────────────────────
|
|
|
|
const EDITOR_PERMS = {
|
|
melodies: { view: true, add: true, delete: true, safe_edit: true, full_edit: true, archetype_access: true, settings_access: true, compose_access: true },
|
|
devices: { view: true, add: true, delete: true, safe_edit: true, edit_bells: true, edit_clock: true, edit_warranty: true, full_edit: true, control: true },
|
|
app_users: { view: true, add: true, delete: true, safe_edit: true, full_edit: true },
|
|
issues_notes: { view: true, add: true, delete: true, edit: true },
|
|
mail: { view: true, compose: true, reply: true },
|
|
crm: { activity_log: true },
|
|
crm_customers: { full_access: true, overview: true, orders_view: true, orders_edit: true, quotations_view: true, quotations_edit: true, comms_view: true, comms_log: true, comms_edit: true, comms_compose: true, add: true, delete: true, files_view: true, files_edit: true, devices_view: true, devices_edit: true },
|
|
crm_products: { view: true, add: true, edit: true },
|
|
mfg: { view_inventory: true, edit: true, provision: true, firmware_view: true, firmware_edit: true },
|
|
api_reference: { access: true },
|
|
mqtt: { access: true },
|
|
};
|
|
|
|
const USER_PERMS = {
|
|
melodies: { view: true, add: false, delete: false, safe_edit: false, full_edit: false, archetype_access: false, settings_access: false, compose_access: false },
|
|
devices: { view: true, add: false, delete: false, safe_edit: false, edit_bells: false, edit_clock: false, edit_warranty: false, full_edit: false, control: false },
|
|
app_users: { view: true, add: false, delete: false, safe_edit: false, full_edit: false },
|
|
issues_notes: { view: true, add: false, delete: false, edit: false },
|
|
mail: { view: true, compose: false, reply: false },
|
|
crm: { activity_log: false },
|
|
crm_customers: { full_access: false, overview: true, orders_view: true, orders_edit: false, quotations_view: true, quotations_edit: false, comms_view: true, comms_log: false, comms_edit: false, comms_compose: false, add: false, delete: false, files_view: true, files_edit: false, devices_view: true, devices_edit: false },
|
|
crm_products: { view: true, add: false, edit: false },
|
|
mfg: { view_inventory: true, edit: false, provision: false, firmware_view: true, firmware_edit: false },
|
|
api_reference: { access: false },
|
|
mqtt: { access: false },
|
|
};
|
|
|
|
function deepClone(obj) {
|
|
return JSON.parse(JSON.stringify(obj));
|
|
}
|
|
|
|
// ─── Dependency rules ──────────────────────────────────────────────────────
|
|
|
|
function applyDependencies(section, key, value, prev) {
|
|
const s = { ...prev[section] };
|
|
s[key] = value;
|
|
|
|
if (value) {
|
|
const VIEW_FORCING = ["add", "delete", "safe_edit", "full_edit", "edit_bells", "edit_clock", "edit_warranty", "control", "edit"];
|
|
if (VIEW_FORCING.includes(key) && "view" in s) s.view = true;
|
|
|
|
if (section === "melodies" && key === "full_edit") s.safe_edit = true;
|
|
if (section === "devices" && key === "full_edit") { s.safe_edit = true; s.edit_bells = true; s.edit_clock = true; s.edit_warranty = true; s.view = true; }
|
|
if (section === "app_users" && key === "full_edit") s.safe_edit = true;
|
|
|
|
if (section === "crm_customers") {
|
|
if (key === "full_access") Object.keys(s).forEach((k) => { s[k] = true; });
|
|
if (key === "orders_edit") s.orders_view = true;
|
|
if (key === "quotations_edit") s.quotations_view = true;
|
|
if (key === "files_edit") s.files_view = true;
|
|
if (key === "devices_edit") s.devices_view = true;
|
|
if (["comms_log", "comms_edit", "comms_compose"].includes(key)) s.comms_view = true;
|
|
}
|
|
|
|
if (section === "mfg" && key === "firmware_edit") s.firmware_view = true;
|
|
if (section === "mfg" && key === "edit") s.view_inventory = true;
|
|
if (section === "mfg" && key === "provision") s.view_inventory = true;
|
|
}
|
|
|
|
return { ...prev, [section]: s };
|
|
}
|
|
|
|
// ─── Pill button colors ────────────────────────────────────────────────────
|
|
// Disabled / No Access → danger red
|
|
// View (middle) → badge blue
|
|
// Enabled / Edit → accent green
|
|
|
|
const PILL_STYLES = {
|
|
off: {
|
|
active: { bg: "var(--danger-bg)", border: "var(--danger)", color: "var(--danger-text)", fontWeight: 600 },
|
|
inactive: { bg: "var(--bg-input)", border: "var(--border-primary)", color: "var(--text-muted)", fontWeight: 400 },
|
|
},
|
|
view: {
|
|
active: { bg: "var(--badge-blue-bg)", border: "var(--badge-blue-text)", color: "var(--badge-blue-text)", fontWeight: 600 },
|
|
inactive: { bg: "var(--bg-input)", border: "var(--border-primary)", color: "var(--text-muted)", fontWeight: 400 },
|
|
},
|
|
on: {
|
|
active: { bg: "var(--success-bg)", border: "var(--accent)", color: "var(--success-text)", fontWeight: 600 },
|
|
inactive: { bg: "var(--bg-input)", border: "var(--border-primary)", color: "var(--text-muted)", fontWeight: 400 },
|
|
},
|
|
};
|
|
|
|
function pillStyle(tone, isActive) {
|
|
const s = PILL_STYLES[tone][isActive ? "active" : "inactive"];
|
|
return { backgroundColor: s.bg, borderColor: s.border, color: s.color, fontWeight: s.fontWeight };
|
|
}
|
|
|
|
// ─── Sub-components ────────────────────────────────────────────────────────
|
|
|
|
/**
|
|
* A permission row: label/description on the left, dual pill buttons on the right.
|
|
* Disabled / Enabled (red / green)
|
|
*/
|
|
function PermRow({ label, description, value, onChange, disabled }) {
|
|
return (
|
|
<div
|
|
className="flex items-center justify-between gap-4 py-2.5"
|
|
style={{
|
|
borderBottom: "1px solid var(--border-secondary)",
|
|
opacity: disabled ? 0.4 : 1,
|
|
pointerEvents: disabled ? "none" : "auto",
|
|
}}
|
|
>
|
|
<div className="min-w-0">
|
|
<span className="text-sm" style={{ color: "var(--text-primary)" }}>{label}</span>
|
|
{description && (
|
|
<p className="text-xs mt-0.5" style={{ color: "var(--text-muted)" }}>{description}</p>
|
|
)}
|
|
</div>
|
|
<div className="flex rounded-md overflow-hidden border flex-shrink-0" style={{ borderColor: "var(--border-primary)" }}>
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange(false)}
|
|
className="px-3 py-1.5 text-xs cursor-pointer transition-colors"
|
|
style={{ ...pillStyle("off", !value), borderRight: "1px solid var(--border-primary)" }}
|
|
>
|
|
Disabled
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange(true)}
|
|
className="px-3 py-1.5 text-xs cursor-pointer transition-colors"
|
|
style={pillStyle("on", !!value)}
|
|
>
|
|
Enabled
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 3-state row: No Access (red) | View (blue) | Edit (green)
|
|
* value: "none" | "view" | "edit"
|
|
*/
|
|
function SegmentedRow({ label, description, value, onChange, disabled }) {
|
|
return (
|
|
<div
|
|
className="flex items-center justify-between gap-4 py-2.5"
|
|
style={{
|
|
borderBottom: "1px solid var(--border-secondary)",
|
|
opacity: disabled ? 0.4 : 1,
|
|
pointerEvents: disabled ? "none" : "auto",
|
|
}}
|
|
>
|
|
<div className="min-w-0">
|
|
<span className="text-sm" style={{ color: "var(--text-primary)" }}>{label}</span>
|
|
{description && (
|
|
<p className="text-xs mt-0.5" style={{ color: "var(--text-muted)" }}>{description}</p>
|
|
)}
|
|
</div>
|
|
<div className="flex rounded-md overflow-hidden border flex-shrink-0" style={{ borderColor: "var(--border-primary)" }}>
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange("none")}
|
|
className="px-3 py-1.5 text-xs cursor-pointer transition-colors"
|
|
style={{ ...pillStyle("off", value === "none"), borderRight: "1px solid var(--border-primary)" }}
|
|
>
|
|
No Access
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange("view")}
|
|
className="px-3 py-1.5 text-xs cursor-pointer transition-colors"
|
|
style={{ ...pillStyle("view", value === "view"), borderRight: "1px solid var(--border-primary)" }}
|
|
>
|
|
View
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange("edit")}
|
|
className="px-3 py-1.5 text-xs cursor-pointer transition-colors"
|
|
style={pillStyle("on", value === "edit")}
|
|
>
|
|
Edit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Section card wrapper */
|
|
function PermSection({ title, children }) {
|
|
return (
|
|
<section className="ui-section-card">
|
|
<h2 className="ui-section-card__title-row">
|
|
<span className="ui-section-card__title">{title}</span>
|
|
</h2>
|
|
<div className="pt-1">
|
|
{children}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// ─── Main Component ────────────────────────────────────────────────────────
|
|
|
|
export default function StaffForm() {
|
|
const { id } = useParams();
|
|
const navigate = useNavigate();
|
|
const { user } = useAuth();
|
|
const isEdit = !!id;
|
|
|
|
const [form, setForm] = useState({ name: "", email: "", password: "", role: "user", is_active: true });
|
|
const [permissions, setPermissions] = useState(deepClone(USER_PERMS));
|
|
const [loading, setLoading] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
const [error, setError] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (!isEdit) return;
|
|
setLoading(true);
|
|
api.get(`/staff/${id}`)
|
|
.then((data) => {
|
|
setForm({ name: data.name, email: data.email, password: "", role: data.role, is_active: data.is_active });
|
|
if (data.permissions) {
|
|
const base = data.role === "editor" ? deepClone(EDITOR_PERMS) : deepClone(USER_PERMS);
|
|
const merged = {};
|
|
Object.keys(base).forEach((sec) => { merged[sec] = { ...base[sec], ...(data.permissions[sec] || {}) }; });
|
|
setPermissions(merged);
|
|
} else if (data.role === "editor") {
|
|
setPermissions(deepClone(EDITOR_PERMS));
|
|
} else {
|
|
setPermissions(deepClone(USER_PERMS));
|
|
}
|
|
})
|
|
.catch((err) => setError(err.message))
|
|
.finally(() => setLoading(false));
|
|
}, [id]);
|
|
|
|
const handleRoleChange = (newRole) => {
|
|
setForm((f) => ({ ...f, role: newRole }));
|
|
if (newRole === "editor") setPermissions(deepClone(EDITOR_PERMS));
|
|
else if (newRole === "user") setPermissions(deepClone(USER_PERMS));
|
|
};
|
|
|
|
const setPerm = (section, key, value) =>
|
|
setPermissions((prev) => applyDependencies(section, key, value, prev));
|
|
|
|
const setSegmented = (section, viewKey, editKey, val) => {
|
|
setPermissions((prev) => {
|
|
const next = { ...prev, [section]: { ...prev[section] } };
|
|
next[section][viewKey] = val !== "none";
|
|
next[section][editKey] = val === "edit";
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const segVal = (section, viewKey, editKey) => {
|
|
const s = permissions[section] || {};
|
|
if (s[editKey]) return "edit";
|
|
if (s[viewKey]) return "view";
|
|
return "none";
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setError("");
|
|
setSaving(true);
|
|
try {
|
|
const body = { name: form.name, email: form.email, role: form.role };
|
|
if (isEdit) {
|
|
body.is_active = form.is_active;
|
|
body.permissions = (form.role === "editor" || form.role === "user") ? permissions : null;
|
|
await api.put(`/staff/${id}`, body);
|
|
navigate(`/settings/staff/${id}`);
|
|
} else {
|
|
body.password = form.password;
|
|
if (form.role === "editor" || form.role === "user") body.permissions = permissions;
|
|
const result = await api.post("/staff", body);
|
|
navigate(`/settings/staff/${result.id}`);
|
|
}
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
if (loading) return <div className="text-center py-8" style={{ color: "var(--text-muted)" }}>Loading...</div>;
|
|
|
|
const roleOptions = user?.role === "sysadmin"
|
|
? ["sysadmin", "admin", "editor", "user"]
|
|
: ["editor", "user"];
|
|
|
|
const inputClass = "w-full px-3 py-2 rounded-md text-sm border";
|
|
const inputStyle = { backgroundColor: "var(--bg-input)", color: "var(--text-primary)", borderColor: "var(--border-primary)" };
|
|
|
|
const showPerms = form.role === "editor" || form.role === "user";
|
|
|
|
const mel = permissions.melodies || {};
|
|
const dev = permissions.devices || {};
|
|
const usr = permissions.app_users || {};
|
|
const iss = permissions.issues_notes || {};
|
|
const mail = permissions.mail || {};
|
|
const crm = permissions.crm || {};
|
|
const cc = permissions.crm_customers || {};
|
|
const cprod = permissions.crm_products || {};
|
|
const mfg = permissions.mfg || {};
|
|
const apir = permissions.api_reference || {};
|
|
const mqtt = permissions.mqtt || {};
|
|
|
|
const ccLocked = !!cc.full_access;
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-6">
|
|
<button onClick={() => navigate(isEdit ? `/settings/staff/${id}` : "/settings/staff")} className="text-sm hover:underline mb-2 inline-block" style={{ color: "var(--accent)" }}>
|
|
← {isEdit ? "Back to Staff Member" : "Back to Staff"}
|
|
</button>
|
|
<h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>
|
|
{isEdit ? "Edit Staff Member" : "Add Staff Member"}
|
|
</h1>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="text-sm rounded-md p-3 mb-4 border" style={{ backgroundColor: "var(--danger-bg)", borderColor: "var(--danger)", color: "var(--danger-text)" }}>
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
|
|
{/* ── Account Information ── */}
|
|
<section className="ui-section-card">
|
|
<h2 className="ui-section-card__header-title mb-4">Account Information</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1 uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Name</label>
|
|
<input type="text" value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} required className={inputClass} style={inputStyle} />
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1 uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Email</label>
|
|
<input type="email" value={form.email} onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))} required className={inputClass} style={inputStyle} />
|
|
</div>
|
|
{!isEdit && (
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1 uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Password</label>
|
|
<input type="password" value={form.password} onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))} required minLength={6} className={inputClass} style={inputStyle} placeholder="Min 6 characters" />
|
|
</div>
|
|
)}
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1 uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Role</label>
|
|
<select value={form.role} onChange={(e) => handleRoleChange(e.target.value)} className={`${inputClass} cursor-pointer`} style={inputStyle}>
|
|
{roleOptions.map((r) => (
|
|
<option key={r} value={r}>{r.charAt(0).toUpperCase() + r.slice(1)}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
{isEdit && (
|
|
<div>
|
|
<label className="block text-xs font-medium mb-1 uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Status</label>
|
|
<select value={form.is_active ? "active" : "inactive"} onChange={(e) => setForm((f) => ({ ...f, is_active: e.target.value === "active" }))} className={`${inputClass} cursor-pointer`} style={inputStyle}>
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── Admin / SysAdmin notice ── */}
|
|
{(form.role === "sysadmin" || form.role === "admin") && (
|
|
<section className="ui-section-card">
|
|
<h2 className="ui-section-card__header-title mb-3">Permissions</h2>
|
|
<p className="text-sm" style={{ color: "var(--text-muted)" }}>
|
|
{form.role === "sysadmin"
|
|
? "SysAdmin has full god-mode access to all features and settings. No permission customization needed."
|
|
: "Admin has full access to all features, except managing SysAdmin accounts and system-level settings. No permission customization needed."}
|
|
</p>
|
|
</section>
|
|
)}
|
|
|
|
{/* ── Permission Sections ── */}
|
|
{showPerms && (
|
|
<>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
|
|
{/* Melodies */}
|
|
<PermSection title="Melodies">
|
|
<PermRow label="View" value={mel.view} onChange={(v) => setPerm("melodies", "view", v)} />
|
|
<PermRow label="Add" value={mel.add} onChange={(v) => setPerm("melodies", "add", v)} />
|
|
<PermRow label="Delete" value={mel.delete} onChange={(v) => setPerm("melodies", "delete", v)} />
|
|
<PermRow label="Safe Edit" value={mel.safe_edit} onChange={(v) => setPerm("melodies", "safe_edit", v)} description="Name, Description, Tone, Type, Steps, Colour, Tags" disabled={mel.full_edit} />
|
|
<PermRow label="Full Edit" value={mel.full_edit} onChange={(v) => setPerm("melodies", "full_edit", v)} description="Edit everything — enables Safe Edit automatically" />
|
|
<PermRow label="Archetype Access" value={mel.archetype_access} onChange={(v) => setPerm("melodies", "archetype_access", v)} description="Access the Archetype Editor" />
|
|
<PermRow label="Settings Access" value={mel.settings_access} onChange={(v) => setPerm("melodies", "settings_access", v)} description="View & change global melody settings" />
|
|
<PermRow label="Compose Access" value={mel.compose_access} onChange={(v) => setPerm("melodies", "compose_access", v)} description="Use the Composer to create melodies" />
|
|
</PermSection>
|
|
|
|
{/* Devices */}
|
|
<PermSection title="Devices">
|
|
<PermRow label="View" value={dev.view} onChange={(v) => setPerm("devices", "view", v)} />
|
|
<PermRow label="Add" value={dev.add} onChange={(v) => setPerm("devices", "add", v)} />
|
|
<PermRow label="Delete" value={dev.delete} onChange={(v) => setPerm("devices", "delete", v)} />
|
|
<PermRow label="Safe Edit" value={dev.safe_edit} onChange={(v) => setPerm("devices", "safe_edit", v)} description="Edit General Info tab only" disabled={dev.full_edit} />
|
|
<PermRow label="Edit Bells" value={dev.edit_bells} onChange={(v) => setPerm("devices", "edit_bells", v)} description="Bell Mechanisms tab" disabled={dev.full_edit} />
|
|
<PermRow label="Edit Clock & Alerts" value={dev.edit_clock} onChange={(v) => setPerm("devices", "edit_clock", v)} description="Clock & Alerts tab" disabled={dev.full_edit} />
|
|
<PermRow label="Edit Warranty / Sub" value={dev.edit_warranty} onChange={(v) => setPerm("devices", "edit_warranty", v)} description="Warranty and Subscription tab" disabled={dev.full_edit} />
|
|
<PermRow label="Full Edit" value={dev.full_edit} onChange={(v) => setPerm("devices", "full_edit", v)} description="Enables all edit options above" />
|
|
<PermRow label="Control" value={dev.control} onChange={(v) => setPerm("devices", "control", v)} description="Send commands via the Control tab" />
|
|
</PermSection>
|
|
|
|
{/* App Users */}
|
|
<PermSection title="App Users">
|
|
<PermRow label="View" value={usr.view} onChange={(v) => setPerm("app_users", "view", v)} />
|
|
<PermRow label="Add" value={usr.add} onChange={(v) => setPerm("app_users", "add", v)} />
|
|
<PermRow label="Delete" value={usr.delete} onChange={(v) => setPerm("app_users", "delete", v)} />
|
|
<PermRow label="Safe Edit" value={usr.safe_edit} onChange={(v) => setPerm("app_users", "safe_edit", v)} description="Photo, Name, Email, Phone, Title only" disabled={usr.full_edit} />
|
|
<PermRow label="Full Edit" value={usr.full_edit} onChange={(v) => setPerm("app_users", "full_edit", v)} description="Edit everything — enables Safe Edit automatically" />
|
|
</PermSection>
|
|
|
|
{/* Issues & Notes */}
|
|
<PermSection title="Issues & Notes">
|
|
<p className="text-xs pb-2 pt-1" style={{ color: "var(--text-muted)", borderBottom: "1px solid var(--border-secondary)" }}>
|
|
These permissions also apply to Notes linked from Device and User pages.
|
|
</p>
|
|
<PermRow label="View" value={iss.view} onChange={(v) => setPerm("issues_notes", "view", v)} />
|
|
<PermRow label="Add" value={iss.add} onChange={(v) => setPerm("issues_notes", "add", v)} />
|
|
<PermRow label="Delete" value={iss.delete} onChange={(v) => setPerm("issues_notes", "delete", v)} />
|
|
<PermRow label="Edit" value={iss.edit} onChange={(v) => setPerm("issues_notes", "edit", v)} />
|
|
</PermSection>
|
|
|
|
{/* Mail */}
|
|
<PermSection title="Mail">
|
|
<PermRow label="View Inbox" value={mail.view} onChange={(v) => setPerm("mail", "view", v)} />
|
|
<PermRow label="Compose" value={mail.compose} onChange={(v) => setPerm("mail", "compose", v)} description="Send new emails" />
|
|
<PermRow label="Reply" value={mail.reply} onChange={(v) => setPerm("mail", "reply", v)} description="Reply to existing emails" />
|
|
</PermSection>
|
|
|
|
{/* CRM */}
|
|
<PermSection title="CRM">
|
|
<PermRow label="View Activity Log" value={crm.activity_log} onChange={(v) => setPerm("crm", "activity_log", v)} />
|
|
</PermSection>
|
|
|
|
{/* CRM Products */}
|
|
<PermSection title="CRM Products">
|
|
<PermRow label="View" value={cprod.view} onChange={(v) => setPerm("crm_products", "view", v)} />
|
|
<PermRow label="Add" value={cprod.add} onChange={(v) => setPerm("crm_products", "add", v)} />
|
|
<PermRow label="Edit / Delete" value={cprod.edit} onChange={(v) => setPerm("crm_products", "edit", v)} />
|
|
</PermSection>
|
|
|
|
{/* Manufacturing */}
|
|
<PermSection title="Manufacturing">
|
|
<PermRow label="View Inventory" value={mfg.view_inventory} onChange={(v) => setPerm("mfg", "view_inventory", v)} />
|
|
<PermRow label="Edit" value={mfg.edit} onChange={(v) => setPerm("mfg", "edit", v)} description="Change device status, delete, download NVS Binary" />
|
|
<PermRow label="Provision Device" value={mfg.provision} onChange={(v) => setPerm("mfg", "provision", v)} description="Flash devices via the Provisioning page" />
|
|
<SegmentedRow
|
|
label="Firmware"
|
|
value={segVal("mfg", "firmware_view", "firmware_edit")}
|
|
onChange={(val) => setSegmented("mfg", "firmware_view", "firmware_edit", val)}
|
|
/>
|
|
</PermSection>
|
|
|
|
</div>
|
|
|
|
{/* ── CRM Customers — full width ── */}
|
|
<section className="ui-section-card">
|
|
<h2 className="ui-section-card__title-row">
|
|
<span className="ui-section-card__title">CRM Customers</span>
|
|
</h2>
|
|
|
|
{/* Full Access row */}
|
|
<div
|
|
className="flex items-center justify-between gap-4 mt-3 mb-4 p-3 rounded-md"
|
|
style={{
|
|
border: `1px solid ${cc.full_access ? "var(--accent)" : "var(--border-secondary)"}`,
|
|
backgroundColor: cc.full_access ? "rgba(116,184,22,0.07)" : "transparent",
|
|
}}
|
|
>
|
|
<div>
|
|
<span className="text-sm font-semibold" style={{ color: cc.full_access ? "var(--accent)" : "var(--text-primary)" }}>
|
|
Full Access
|
|
</span>
|
|
<p className="text-xs mt-0.5" style={{ color: "var(--text-muted)" }}>
|
|
Enables all CRM Customer permissions. When active, individual settings are locked.
|
|
</p>
|
|
</div>
|
|
<div className="flex rounded-md overflow-hidden border flex-shrink-0" style={{ borderColor: "var(--border-primary)" }}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setPerm("crm_customers", "full_access", false)}
|
|
className="px-3 py-1.5 text-xs cursor-pointer transition-colors"
|
|
style={{ ...pillStyle("off", !cc.full_access), borderRight: "1px solid var(--border-primary)" }}
|
|
>
|
|
Disabled
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setPerm("crm_customers", "full_access", true)}
|
|
className="px-3 py-1.5 text-xs cursor-pointer transition-colors"
|
|
style={pillStyle("on", !!cc.full_access)}
|
|
>
|
|
Enabled
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Two-column grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8">
|
|
|
|
{/* Left column */}
|
|
<div>
|
|
<PermRow
|
|
label="Overview Tab"
|
|
value={cc.overview}
|
|
onChange={(v) => setPerm("crm_customers", "overview", v)}
|
|
disabled={ccLocked}
|
|
/>
|
|
<SegmentedRow
|
|
label="Orders"
|
|
value={segVal("crm_customers", "orders_view", "orders_edit")}
|
|
onChange={(val) => setSegmented("crm_customers", "orders_view", "orders_edit", val)}
|
|
disabled={ccLocked}
|
|
/>
|
|
<SegmentedRow
|
|
label="Quotations"
|
|
value={segVal("crm_customers", "quotations_view", "quotations_edit")}
|
|
onChange={(val) => setSegmented("crm_customers", "quotations_view", "quotations_edit", val)}
|
|
disabled={ccLocked}
|
|
/>
|
|
<SegmentedRow
|
|
label="Files & Media"
|
|
value={segVal("crm_customers", "files_view", "files_edit")}
|
|
onChange={(val) => setSegmented("crm_customers", "files_view", "files_edit", val)}
|
|
disabled={ccLocked}
|
|
/>
|
|
<SegmentedRow
|
|
label="Devices Tab"
|
|
value={segVal("crm_customers", "devices_view", "devices_edit")}
|
|
onChange={(val) => setSegmented("crm_customers", "devices_view", "devices_edit", val)}
|
|
disabled={ccLocked}
|
|
/>
|
|
</div>
|
|
|
|
{/* Right column */}
|
|
<div>
|
|
{/* Add + Delete on one row */}
|
|
<div
|
|
className="flex items-center justify-between gap-4 py-2.5"
|
|
style={{
|
|
borderBottom: "1px solid var(--border-secondary)",
|
|
opacity: ccLocked ? 0.4 : 1,
|
|
pointerEvents: ccLocked ? "none" : "auto",
|
|
}}
|
|
>
|
|
<span className="text-sm" style={{ color: "var(--text-primary)" }}>Customer</span>
|
|
<div className="flex items-center gap-10 flex-shrink-0">
|
|
{/* Add */}
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xs" style={{ color: "var(--text-muted)" }}>Add:</span>
|
|
<div className="flex rounded-md overflow-hidden border" style={{ borderColor: "var(--border-primary)" }}>
|
|
<button type="button" onClick={() => setPerm("crm_customers", "add", false)} className="px-3 py-1.5 text-xs cursor-pointer transition-colors" style={{ ...pillStyle("off", !cc.add), borderRight: "1px solid var(--border-primary)" }}>Disabled</button>
|
|
<button type="button" onClick={() => setPerm("crm_customers", "add", true)} className="px-3 py-1.5 text-xs cursor-pointer transition-colors" style={pillStyle("on", !!cc.add)}>Enabled</button>
|
|
</div>
|
|
</div>
|
|
{/* Delete */}
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xs" style={{ color: "var(--text-muted)" }}>Delete:</span>
|
|
<div className="flex rounded-md overflow-hidden border" style={{ borderColor: "var(--border-primary)" }}>
|
|
<button type="button" onClick={() => setPerm("crm_customers", "delete", false)} className="px-3 py-1.5 text-xs cursor-pointer transition-colors" style={{ ...pillStyle("off", !cc.delete), borderRight: "1px solid var(--border-primary)" }}>Disabled</button>
|
|
<button type="button" onClick={() => setPerm("crm_customers", "delete", true)} className="px-3 py-1.5 text-xs cursor-pointer transition-colors" style={pillStyle("on", !!cc.delete)}>Enabled</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<PermRow label="Comms: View" value={cc.comms_view} onChange={(v) => setPerm("crm_customers", "comms_view", v)} disabled={ccLocked} />
|
|
<PermRow label="Comms: Log Entry" value={cc.comms_log} onChange={(v) => setPerm("crm_customers", "comms_log", v)} disabled={ccLocked} />
|
|
<PermRow label="Comms: Edit Entries" value={cc.comms_edit} onChange={(v) => setPerm("crm_customers", "comms_edit", v)} disabled={ccLocked} />
|
|
<PermRow label="Comms: Compose & Send" value={cc.comms_compose} onChange={(v) => setPerm("crm_customers", "comms_compose", v)} disabled={ccLocked} />
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── API Reference + MQTT ── */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<PermSection title="API Reference">
|
|
<PermRow label="Access API Reference Page" value={apir.access} onChange={(v) => setPerm("api_reference", "access", v)} />
|
|
</PermSection>
|
|
<PermSection title="MQTT">
|
|
<PermRow label="MQTT Access" value={mqtt.access} onChange={(v) => setPerm("mqtt", "access", v)} description="Dashboard, Commands, Logs, WebSocket" />
|
|
</PermSection>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* ── Submit ── */}
|
|
<div className="flex gap-3 pb-8">
|
|
<button
|
|
type="submit"
|
|
disabled={saving}
|
|
className="px-6 py-2 text-sm rounded-md transition-colors cursor-pointer"
|
|
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)", opacity: saving ? 0.6 : 1 }}
|
|
>
|
|
{saving ? "Saving..." : isEdit ? "Save Changes" : "Create Staff Member"}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate(isEdit ? `/settings/staff/${id}` : "/settings/staff")}
|
|
className="px-6 py-2 text-sm rounded-md border transition-colors cursor-pointer"
|
|
style={{ borderColor: "var(--border-primary)", color: "var(--text-secondary)" }}
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|