// AdminApp — Manager/Admin panel with three sections:
// 1. Schedule users' work calendars
// 2. Approve/reject leave requests
// 3. Set agreed daily price per store
const { useState: useStateA, useMemo: useMemoA } = React;
const A_WEEKDAYS = ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج'];
const A_DAYS_IN_MONTH = 31;
const A_FIRST_OFFSET = 0;
const LEAVE_TYPE_LABEL = {
personal: 'استحقاقی',
sick: 'استعلاجی',
unpaid: 'بدون حقوق',
mission: 'ماموریت',
};
// Five access levels, by reach. `level` orders the hierarchy; a superior must
// outrank the person reporting to them.
const ROLE_META = {
promoter: { label: 'پروموتور', level: 1 },
supervisor: { label: 'سرپرست', level: 2 },
manager: { label: 'مدیر', level: 3 },
senior_manager: { label: 'مدیر ارشد', level: 4 },
admin: { label: 'ادمین', level: 5 },
};
const ROLE_LABEL_A = (role) => ROLE_META[role]?.label || role;
const FULL_ACCESS_ROLES_A = ['admin', 'senior_manager'];
// ============================================================
// Top-level Admin shell with three tabs
// ============================================================
function AdminApp() {
const [tab, setTab] = useStateA('schedule'); // schedule | performance | leaves | users | pricing | products | inventory | messages
const app = window.useAppStore();
const pendingLeaves = app.leaves.filter(l => l.status === 'pending').length;
const unreadMessages = app.inbox.filter(m => !m.read).length;
// The shared catalogues and user management belong to full-access roles only;
// managers and supervisors get the team-scoped tabs.
const isFullAccess = FULL_ACCESS_ROLES_A.includes(app.session?.role);
// Projects are defined by managers and up (not supervisors).
const canProjects = ['admin', 'senior_manager', 'manager'].includes(app.session?.role);
const tabs = [
{ id: 'schedule', label: 'تقویم' },
{ id: 'performance', label: 'عملکرد' },
{ id: 'leaves', label: 'مرخصیها', badge: pendingLeaves },
...(isFullAccess ? [{ id: 'users', label: 'کاربران' }] : []),
...(canProjects ? [{ id: 'projects', label: 'پروژهها' }] : []),
...(isFullAccess ? [
{ id: 'pricing', label: 'فروشگاهها' },
{ id: 'products', label: 'سمپل' },
{ id: 'inventory', label: 'موجودی' },
] : []),
{ id: 'messages', label: 'پیامها', badge: unreadMessages },
];
return (
{/* tabs */}
{tabs.map(t => {
const active = tab === t.id;
return (
);
})}
{tab === 'schedule' &&
}
{tab === 'performance' &&
}
{tab === 'leaves' &&
}
{tab === 'users' &&
}
{tab === 'projects' &&
}
{tab === 'pricing' &&
}
{tab === 'products' &&
}
{tab === 'inventory' &&
}
{tab === 'messages' &&
}
);
}
function AdminHeader() {
const app = window.useAppStore();
const user = window.getUserById(app.session?.userId);
return (
{user?.initials || 'م'}
پنل مدیریت
{user?.name || 'مدیر'} · {ROLE_LABEL_A(user?.role)}
);
}
// ============================================================
// Tab 1 — Schedule users' work calendars
// ============================================================
function ScheduleTab() {
const app = window.useAppStore();
// Visits are scheduled for field workers (promoters) within this user's reach.
const promoters = app.users.filter(u => u.role === 'promoter' || u.role === 'user');
const [userId, setUserId] = useStateA(promoters[0]?.id || null);
const [day, setDay] = useStateA(null);
const [pickerOpen, setPickerOpen] = useStateA(false);
const assignments = (userId && app.assignments[userId]) || {};
const visits = day ? (assignments[day] || []) : [];
if (promoters.length === 0) {
return (
هنوز پروموتوری در زیرمجموعهی شما نیست
);
}
return (
{/* user picker */}
پروموتور
{promoters.map(u => {
const active = u.id === userId;
return (
);
})}
{/* month label */}
{day && (
setPickerOpen(true)}
/>
)}
{pickerOpen && (
v.storeId)}
onClose={() => setPickerOpen(false)}
/>
)}
{A_WEEKDAYS.map(w => (
{w}
))}
{cells.map(c => {
if (c.blank) return
;
const visits = assignments[c.day] || [];
const count = visits.length;
const isToday = c.day === today;
const isSelected = c.day === selected;
const isPast = c.day < today;
let total = 0;
visits.forEach(v => {
total += (window.getStoreById(v.storeId)?.price || 0);
});
return (
);
})}
);
}
function DayAssignmentEditor({ userId, day, visits, onAddRequest }) {
const total = visits.reduce((acc, v) => acc + (window.getStoreById(v.storeId)?.price || 0), 0);
return (
{window.faNumS(day)} خرداد · {window.faNumS(visits.length)} ویزیت
{window.fmtToman(total)}
{visits.length === 0 ? (
برای این روز فروشگاهی تعیین نشده
) : visits.map((v, i) => {
const store = window.getStoreById(v.storeId);
if (!store) return null;
return (
{v.time}
{store.name}
{store.addr} · {window.fmtToman(store.price)}
);
})}
);
}
function StorePickerSheet({ userId, day, existingIds, onClose }) {
const app = window.useAppStore();
const available = app.stores.filter(s => !existingIds.includes(s.id));
const [time, setTime] = useStateA(window.SLOTS[0]);
const [selectedStore, setSelectedStore] = useStateA(null);
const handleAdd = () => {
if (!selectedStore) return;
window.appActions.addAssignment(userId, day, selectedStore, time);
onClose();
};
return (
<>
افزودن فروشگاه
روز {window.faNumS(day)} خرداد
{/* time picker */}
ساعت
{window.SLOTS.map(s => (
))}
{/* store list */}
فروشگاه
{available.length === 0 && (
همه فروشگاهها قبلاً اضافه شدهاند
)}
{available.map((s, i) => {
const active = selectedStore === s.id;
return (
);
})}
);
}
// ============================================================
// Tab 2 — Leave approvals
// ============================================================
function LeavesTab() {
const app = window.useAppStore();
const [filter, setFilter] = useStateA('pending'); // pending | approved | rejected
const filtered = app.leaves.filter(l => l.status === filter);
return (
{/* filter chips */}
{[
{ id: 'pending', label: 'در انتظار', color: 'var(--accent)' },
{ id: 'approved', label: 'تایید شده', color: 'var(--ink)' },
{ id: 'rejected', label: 'رد شده', color: 'var(--muted)' },
].map(f => {
const active = filter === f.id;
const count = app.leaves.filter(l => l.status === f.id).length;
return (
);
})}
{filtered.length === 0 && (
درخواستی در این دسته نیست
)}
{filtered.map(l =>
)}
{/* user row */}
{user?.initials}
{user?.name}
{user?.region} · ثبت شده {leave.submittedAt}
{LEAVE_TYPE_LABEL[leave.type]}
{/* range */}
{rangeLabel}
{window.faNumS(days)} روز
{leave.reason && (
«{leave.reason}»
)}
{/* actions */}
{leave.status === 'pending' ? (
) : (
{leave.status === 'approved'
? <>تایید شده
: <>رد شده}
)}
{/* summary */}
تعداد فروشگاه
{window.faNumS(count)}
میانگین تعرفه
{window.fmtToman(avg)}
{/* add store button */}
{count === 0 && (
هنوز فروشگاهی تعریف نشده
)}
{app.stores.map((s, i) => (
{s.name}
{s.addr}
{(s.open || s.close) && · {s.open}–{s.close}}
))}
تعرفهها برای محاسبه درآمد روزانه فیلدفورس استفاده میشود
{formOpen && (
setFormOpen(false)}
/>
)}
{isEdit ? 'ویرایش فروشگاه' : 'تعریف فروشگاه جدید'}
);
}
// ============================================================
// Tab 4 — Sample product catalogue
// Defines the product list that field users fill in on the
// "received samples" screen.
// ============================================================
function ProductsTab() {
const app = window.useAppStore();
const [formOpen, setFormOpen] = useStateA(false);
const [editProduct, setEditProduct] = useStateA(null); // product being edited, or null for "add"
const count = app.products.length;
const openAdd = () => { setEditProduct(null); setFormOpen(true); };
const openEdit = (p) => { setEditProduct(p); setFormOpen(true); };
const handleDelete = (p) => {
if (window.confirm(`محصول «${p.name}» از فهرست سمپل حذف شود؟`)) {
window.appActions.deleteProduct(p.id);
}
};
return (
{/* summary */}
تعداد محصول
{window.faNumS(count)}
این فهرست در صفحه «ثبت سمپل دریافتی» به کاربران نمایش داده میشود
{/* add product button */}
{count === 0 && (
هنوز محصولی تعریف نشده
)}
{app.products.map((p, i) => (
{p.code || '—'}
{p.name}
{p.spec || 'بدون مشخصات'}
))}
{formOpen && (
setFormOpen(false)}
/>
)}
{isEdit ? 'ویرایش محصول' : 'تعریف محصول جدید'}
);
}
// ============================================================
// Tab 5 — In-stock product catalogue
// Defines the product list field users fill in on the
// "record in-stock product count" screen. Managed independently
// from the sample catalogue above.
// ============================================================
function InventoryProductsTab() {
const app = window.useAppStore();
const [formOpen, setFormOpen] = useStateA(false);
const [editProduct, setEditProduct] = useStateA(null); // product being edited, or null for "add"
const count = app.inventoryProducts.length;
const openAdd = () => { setEditProduct(null); setFormOpen(true); };
const openEdit = (p) => { setEditProduct(p); setFormOpen(true); };
const handleDelete = (p) => {
if (window.confirm(`محصول «${p.name}» از فهرست موجودی حذف شود؟`)) {
window.appActions.deleteInventoryProduct(p.id);
}
};
return (
{/* summary */}
تعداد محصول
{window.faNumS(count)}
این فهرست در صفحه «ثبت تعداد محصول موجود» به کاربران نمایش داده میشود
{/* add product button */}
{count === 0 && (
هنوز محصولی تعریف نشده
)}
{app.inventoryProducts.map((p, i) => (
{p.code || '—'}
{p.name}
{p.spec || 'بدون مشخصات'}
))}
{formOpen && (
setFormOpen(false)}
/>
)}
{isEdit ? 'ویرایش محصول' : 'تعریف محصول جدید'}
);
}
// ============================================================
// Tab — Field-force performance review
// Per user: visit/earning totals, sample & inventory tallies,
// and the daily work sessions with their start/end selfies.
// ============================================================
function PerformanceTab() {
const app = window.useAppStore();
const fieldUsers = app.users.filter(u => u.role === 'promoter' || u.role === 'user');
const [userId, setUserId] = useStateA(fieldUsers[0]?.id || null);
const [data, setData] = useStateA(null);
const [loading, setLoading] = useStateA(false);
const [lightbox, setLightbox] = useStateA(null); // { src, caption } | null
React.useEffect(() => {
if (!userId) { setData(null); return; }
let alive = true;
setLoading(true);
setData(null);
window.appActions.fetchPerformance(userId).then(d => {
if (alive) { setData(d); setLoading(false); }
});
return () => { alive = false; };
}, [userId]);
const earn = userId ? window.computeEarnings(userId) : null;
const fmtDur = (min) => {
const h = Math.floor(min / 60), m = min % 60;
if (h && m) return `${window.faNumS(h)} ساعت و ${window.faNumS(m)} دقیقه`;
if (h) return `${window.faNumS(h)} ساعت`;
return `${window.faNumS(m)} دقیقه`;
};
const fmtDate = (iso) => {
try {
return new Intl.DateTimeFormat('fa-IR', {
weekday: 'long', day: 'numeric', month: 'long',
}).format(new Date(iso + 'T00:00:00'));
} catch { return window.faNumS(iso); }
};
if (fieldUsers.length === 0) {
return (
هنوز نیروی میدانی ثبت نشده است
);
}
return (
{/* user picker */}
نیرو
{fieldUsers.map(u => {
const active = u.id === userId;
return (
);
})}
{/* summary cards */}
{earn && (
)}
{/* which sample products were received */}
{!loading && data && data.sampleProducts && data.sampleProducts.length > 0 && (
<>
سمپلهای دریافتی به تفکیک محصول
{data.sampleProducts.map((p, i) => (
{p.name}
{window.faNumS(p.count)} عدد
))}
)}
{loading && (
در حال بارگذاری…
)}
{/* daily worked hours */}
{!loading && data && (
<>
ساعت کارکرد روزانه
{data.days.length === 0 ? (
هنوز شروع/پایان کاری برای این نیرو ثبت نشده
) : (
{data.days.map((d, i) => (
{fmtDate(d.date)}
{d.start ? window.faNumS(d.start) : '—'} ← {d.end ? window.faNumS(d.end) : '—'}
0 ? 'var(--accent)' : 'var(--muted)',
background: d.durationMin > 0
? 'color-mix(in oklab, var(--accent) 10%, transparent)' : 'var(--icon-bg)',
padding: '4px 9px', borderRadius: 99,
}}>
{d.durationMin > 0 ? fmtDur(d.durationMin) : 'ناتمام'}
))}
)}
{/* selfie gallery — every uploaded start/end photo */}
{(() => {
const gallery = data.photos.filter(p => p.photo);
return (
<>
عکسهای شروع و پایان کار · {window.faNumS(gallery.length)}
{gallery.length === 0 ? (
هنوز عکسی آپلود نشده است
) : (
{gallery.map((p, i) => (
))}
)}
);
})()}
)}
{lightbox && (
setLightbox(null)}
style={{
position: 'absolute', inset: 0, zIndex: 30,
background: 'rgba(8,10,10,0.88)',
display: 'flex', flexDirection: 'column',
alignItems: 'center', justifyContent: 'center', gap: 14, padding: 20,
}}>
{lightbox.caption}
)}
{label}
{value}
{sub &&
{sub}
}
);
}
// A single selfie thumbnail in the gallery; tap to open the lightbox.
function PerfPhoto({ item, caption, onOpen }) {
const isStart = item.kind === 'start';
return (
);
}
// ============================================================
// Tab — Projects (manager and up)
// Define a project and assign the supervisors responsible for it.
// ============================================================
function ProjectsTab() {
const app = window.useAppStore();
const [formOpen, setFormOpen] = useStateA(false);
const [editProject, setEditProject] = useStateA(null); // project being edited, or null for "add"
const projects = app.projects || [];
// Supervisors the current user can assign (bootstrap already scopes app.users).
const supervisors = app.users.filter(u => u.role === 'supervisor');
const openAdd = () => { setEditProject(null); setFormOpen(true); };
const openEdit = (p) => { setEditProject(p); setFormOpen(true); };
const handleDelete = (p) => {
if (window.confirm(`پروژه «${p.name}» حذف شود؟`)) {
window.appActions.deleteProject(p.id);
}
};
return (
{/* summary */}
تعداد پروژه
{window.faNumS(projects.length)}
برای هر پروژه سرپرستهای مسئول را انتخاب کنید
{/* add project button */}
{projects.length === 0 && (
هنوز پروژهای تعریف نشده
)}
{projects.map((p, i) => {
const names = (p.supervisorIds || [])
.map(id => window.getUserById(id)?.name)
.filter(Boolean);
return (
{p.name}
{names.length
? `${window.faNumS(names.length)} سرپرست: ${names.join('، ')}`
: 'بدون سرپرست'}
);
})}
{formOpen && (
setFormOpen(false)}
/>
)}
{isEdit ? 'ویرایش پروژه' : 'تعریف پروژه جدید'}
نام پروژه
setName(e.target.value)}
placeholder="مثلاً کمپین تابستان"
style={{ ...inputStyle, marginBottom: 12 }} />
توضیحات (اختیاری)
setDescription(e.target.value)}
placeholder="توضیح کوتاه دربارهی پروژه"
style={{ ...inputStyle, marginBottom: 14 }} />
سرپرستهای پروژه
{supervisors.length === 0 ? (
هیچ سرپرستی برای انتخاب موجود نیست. ابتدا کاربری با نقش «سرپرست» بسازید.
) : (
{supervisors.map((s, i) => {
const on = selected.has(s.id);
return (
);
})}
)}
{error && (
{error}
)}
);
}
// ============================================================
// Tab — User management (full-access roles)
// Create users, set their role, and link them to a superior so the
// five-level hierarchy (promoter → supervisor → manager → senior_manager → admin)
// stays connected. Editing is also exposed via manage_users.py on the CLI.
// ============================================================
function UsersTab() {
const app = window.useAppStore();
const [formOpen, setFormOpen] = useStateA(false);
const [editUser, setEditUser] = useStateA(null); // user being edited, or null for "add"
const users = [...app.users].sort((a, b) =>
(ROLE_META[b.role]?.level || 0) - (ROLE_META[a.role]?.level || 0)
|| (a.name || '').localeCompare(b.name || ''));
const openAdd = () => { setEditUser(null); setFormOpen(true); };
const openEdit = (u) => { setEditUser(u); setFormOpen(true); };
const handleDelete = (u) => {
if (window.confirm(`کاربر «${u.name}» حذف شود؟ زیرمجموعهی او به سرپرست بالادست منتقل میشود.`)) {
window.appActions.deleteUser(u.id);
}
};
return (
{users.length === 0 && (
هنوز کاربری ثبت نشده
)}
{users.map((u, i) => {
const parent = u.parentId ? window.getUserById(u.parentId) : null;
return (
{u.initials}
{u.name}
{ROLE_LABEL_A(u.role)}
{parent && · سرپرست: {parent.name}}
);
})}
هر کاربر به سرپرستِ بالادست خود متصل میشود؛ مدیر همهی زیرمجموعه را میبیند.
{formOpen && (
setFormOpen(false)}
/>
)}
);
}
// Add / edit a user. `user` null => add mode (username + password required);
// otherwise edit mode (credentials fixed; an optional new password resets it).
function UserFormSheet({ user, allUsers, onClose }) {
const isEdit = !!user;
const [name, setName] = useStateA(user?.name || '');
const [username, setUsername] = useStateA(user?.username || '');
const [password, setPassword] = useStateA('');
const [role, setRole] = useStateA(user?.role || 'promoter');
const [parentId, setParentId] = useStateA(user?.parentId || '');
const [phone, setPhone] = useStateA(user?.phone || '');
const [region, setRegion] = useStateA(user?.region || '');
const [error, setError] = useStateA('');
const [busy, setBusy] = useStateA(false);
const isFull = FULL_ACCESS_ROLES_A.includes(role);
const myLevel = ROLE_META[role]?.level || 0;
// Eligible superiors: anyone outranking the chosen role, except this user.
const parentOptions = allUsers.filter(u =>
u.id !== user?.id && (ROLE_META[u.role]?.level || 0) > myLevel);
// If the chosen parent no longer outranks the role, drop it.
React.useEffect(() => {
if (isFull) { setParentId(''); return; }
if (parentId && !parentOptions.some(p => p.id === parentId)) setParentId('');
}, [role]); // eslint-disable-line
const usernameOk = isEdit || (username.trim().length >= 3);
const passwordOk = isEdit || (password.length >= 4);
const valid = name.trim() && usernameOk && passwordOk && !busy;
const handleSubmit = async () => {
if (!valid) return;
setBusy(true); setError('');
let res;
if (isEdit) {
res = await window.appActions.updateUser(user.id, {
name: name.trim(), role, parentId: isFull ? null : (parentId || null),
phone: phone.trim(), region: region.trim(),
});
if (res.ok && password) {
const pr = await window.appActions.resetUserPassword(user.id, password);
if (!pr.ok) res = pr;
}
} else {
res = await window.appActions.createUser({
name: name.trim(), username: username.trim(), password, role,
parentId: isFull ? null : (parentId || null),
phone: phone.trim(), region: region.trim(),
});
}
setBusy(false);
if (res.ok) onClose();
else setError(res.error || 'خطا');
};
const labelStyle = {
fontSize: 10.5, color: 'var(--muted)', marginBottom: 6,
fontWeight: 500, padding: '0 2px',
};
const inputStyle = {
width: '100%', boxSizing: 'border-box',
padding: '11px 12px', borderRadius: 10,
background: 'var(--bg)', border: '1px solid var(--border)',
fontSize: 13, color: 'var(--ink)', outline: 'none',
fontFamily: 'Vazirmatn, system-ui, sans-serif',
};
return (
<>
{isEdit ? 'ویرایش کاربر' : 'افزودن کاربر'}
نام و نام خانوادگی
setName(e.target.value)}
placeholder="مثلاً علی رضایی" style={{ ...inputStyle, marginBottom: 12 }} />
نام کاربری
setUsername(e.target.value)}
disabled={isEdit} placeholder="ali"
style={{ ...inputStyle, marginBottom: 12, direction: 'ltr', textAlign: 'left',
opacity: isEdit ? 0.6 : 1,
fontFamily: 'JetBrains Mono, ui-monospace, monospace' }} />
{isEdit ? 'گذرواژه جدید (اختیاری)' : 'گذرواژه'}
setPassword(e.target.value)}
type="password" placeholder={isEdit ? 'برای تغییر وارد کنید' : 'حداقل ۴ نویسه'}
style={{ ...inputStyle, marginBottom: 12, direction: 'ltr', textAlign: 'left',
fontFamily: 'JetBrains Mono, ui-monospace, monospace' }} />
نقش
{Object.keys(ROLE_META).map(r => {
const active = role === r;
return (
);
})}
{!isFull && (
<>
سرپرست بالادست
)}
{error && (
{error}
)}
);
}
window.AdminApp = AdminApp;