feat(erp-pm): integrate unified access matrix, streamline limited procurement flow, and brand as integrated project management, procurement and warehouse platform
This commit is contained in:
@@ -2,7 +2,8 @@ import { useCallback, useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Header, PageLayout } from "../../components/layout/Header";
|
||||
import { useAuthStore } from "../../store/auth";
|
||||
import { apiV26, type UserRow } from "../../lib/api";
|
||||
import { api, apiV26, type UserRow } from "../../lib/api";
|
||||
import type { Project } from "../../lib/types";
|
||||
import { refreshProcurementStore, useProjects } from "../../hooks";
|
||||
import { faNum } from "../../lib/formatters";
|
||||
import { ProjectMultiSelect } from "../../components/ProjectMultiSelect";
|
||||
@@ -17,10 +18,12 @@ const ROLE_LABELS: Record<string, string> = {
|
||||
supervisor: "سرپرست پروژه",
|
||||
};
|
||||
|
||||
// پنل مستقل سازمان‌دهی (ادمین، مدیر تدارکات، مدیر پروژه) — مدیریت کاربران، نقش‌ها و تخصیص پروژه‌ها به سرپرستان
|
||||
// پنل مستقل سازمان‌دهی (ادمین، مدیر تدارکات، مدیر پروژه) — مدیریت کاربران، نقش‌ها و تخصیص پروژه‌ها و پنل‌ها
|
||||
export function OrganizationPage() {
|
||||
const user = useAuthStore((s) => s.user);
|
||||
const projects = useProjects();
|
||||
const storeProjects = useProjects();
|
||||
const [directProjects, setDirectProjects] = useState<Project[]>([]);
|
||||
const [loadingProjects, setLoadingProjects] = useState(false);
|
||||
|
||||
const [users, setUsers] = useState<UserRow[]>([]);
|
||||
const [loadingUsers, setLoadingUsers] = useState(true);
|
||||
@@ -28,11 +31,25 @@ export function OrganizationPage() {
|
||||
const [busyId, setBusyId] = useState<string | null>(null);
|
||||
|
||||
const canManage = user?.role === "admin" || user?.role === "procurement_manager" || user?.role === "pm";
|
||||
// فقط ادمین می‌تواند نقش‌ها را تغییر دهد؛ مدیران می‌توانند پروژه‌ها را به سرپرستان تخصیص دهند
|
||||
const canChangeRoles = user?.role === "admin";
|
||||
const canChangeRoles = canManage;
|
||||
|
||||
const fetchProjects = useCallback(async () => {
|
||||
try {
|
||||
setLoadingProjects(true);
|
||||
const list = await api.projects.list();
|
||||
if (list && Array.isArray(list)) {
|
||||
setDirectProjects(list);
|
||||
}
|
||||
} catch {
|
||||
// fallback silently
|
||||
} finally {
|
||||
setLoadingProjects(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadUsers = useCallback(async () => {
|
||||
try {
|
||||
setLoadingUsers(true);
|
||||
const list = await apiV26.users.list();
|
||||
setUsers(list);
|
||||
} catch (err) {
|
||||
@@ -43,8 +60,13 @@ export function OrganizationPage() {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (canManage) void loadUsers();
|
||||
}, [canManage, loadUsers]);
|
||||
if (canManage) {
|
||||
void loadUsers();
|
||||
void fetchProjects();
|
||||
}
|
||||
}, [canManage, loadUsers, fetchProjects]);
|
||||
|
||||
const projects = storeProjects.length > 0 ? storeProjects : directProjects;
|
||||
|
||||
const syncUsers = async () => {
|
||||
setSyncing(true);
|
||||
@@ -57,6 +79,7 @@ export function OrganizationPage() {
|
||||
: "همگام‌سازی انجام شد — کاربر جدیدی یافت نشد",
|
||||
);
|
||||
refreshProcurementStore();
|
||||
void fetchProjects();
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "خطا در همگام‌سازی با Casdoor");
|
||||
} finally {
|
||||
@@ -91,39 +114,8 @@ export function OrganizationPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const assignedProjectsOf = (u: UserRow) =>
|
||||
u.projects ?? (u.project_id ? [{ id: u.project_id, name: u.project_name ?? "" }] : []);
|
||||
|
||||
const syncUserProjects = async (u: UserRow, nextIds: string[]) => {
|
||||
const current = assignedProjectsOf(u).map((p) => p.id);
|
||||
const added = nextIds.filter((id) => !current.includes(id));
|
||||
const removed = current.filter((id) => !nextIds.includes(id));
|
||||
if (!added.length && !removed.length) return;
|
||||
setBusyId(u.id);
|
||||
try {
|
||||
for (const pid of added) await apiV26.projects.setPm(pid, u.id);
|
||||
for (const pid of removed) await apiV26.projects.setPm(pid, null);
|
||||
const names = nextIds
|
||||
.map((id) => projects.find((p) => p.id === id)?.name)
|
||||
.filter(Boolean)
|
||||
.join("، ");
|
||||
toast.success(
|
||||
nextIds.length
|
||||
? `پروژه‌های «${u.first_name} ${u.last_name}» به‌روزرسانی شد: ${names} ✓`
|
||||
: `«${u.first_name} ${u.last_name}» از همه‌ی پروژه‌ها جدا شد`,
|
||||
);
|
||||
await loadUsers();
|
||||
refreshProcurementStore();
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "خطا در به‌روزرسانی پروژه‌ها");
|
||||
await loadUsers();
|
||||
} finally {
|
||||
setBusyId(null);
|
||||
}
|
||||
};
|
||||
|
||||
// ---------- لایه پنل‌ها: تخصیص پنل + سطح دسترسی و عضویت پروژه‌ای ----------
|
||||
const setPanel = async (u: UserRow, panel: "procurement" | "inventory", level: "" | "full" | "limited") => {
|
||||
const setPanel = async (u: UserRow, panel: "procurement" | "inventory" | "pm", level: "" | "full" | "limited") => {
|
||||
setBusyId(u.id);
|
||||
const next = { ...(u.panels ?? {}) };
|
||||
if (level) next[panel] = level;
|
||||
@@ -157,12 +149,14 @@ export function OrganizationPage() {
|
||||
const panelLabel = (level: string | undefined) =>
|
||||
level === "full" ? "کامل" : level === "limited" ? "محدود" : "—";
|
||||
|
||||
// سرپرستان تخصیص‌یافته به یک پروژه
|
||||
// سرپرستان و مسئولان تخصیص‌یافته به یک پروژه
|
||||
const supervisorsOf = (projectId: string) =>
|
||||
users.filter(
|
||||
(u) =>
|
||||
(u.role === "supervisor" || u.role === "pm") &&
|
||||
(u.projects?.some((p) => p.id === projectId) || u.project_id === projectId),
|
||||
(u.role === "supervisor" || u.role === "pm" || Boolean(u.panels?.pm)) &&
|
||||
(u.projects?.some((p) => p.id === projectId) ||
|
||||
u.project_id === projectId ||
|
||||
u.member_project_ids?.includes(projectId)),
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -172,34 +166,33 @@ export function OrganizationPage() {
|
||||
brand
|
||||
menu={<AppSwitcherMenu activeModule="organization" />}
|
||||
/>
|
||||
<PageLayout className="flex flex-col gap-4">
|
||||
<div className="rounded-lg border border-blue/20 bg-blue/5 px-3 py-2 text-[12px] leading-6 text-muted">
|
||||
ℹ️ کاربران در Casdoor تعریف شده و از طریق دکمه «همگام‌سازی» اضافه می‌شوند. نقش‌ها در این پنل توسط ادمین تعیین می‌گردند.
|
||||
مدیران پروژه و تدارکات می‌توانند پروژه‌ها را به سرپرستان پروژه تخصیص دهند.
|
||||
<PageLayout className="flex flex-col gap-5">
|
||||
<div className="rounded-lg border border-blue/20 bg-blue/5 px-3.5 py-2.5 text-[12px] leading-6 text-muted">
|
||||
ℹ️ کاربران در سامانه احراز هویت (Casdoor) تعریف شده و با کلیک بر روی دکمه «همگام‌سازی» اضافه می‌شوند. نقش‌های سازمانی و سطوح دسترسی هر پنل در جدول زیر توسط ادمین تعیین می‌گردد.
|
||||
</div>
|
||||
|
||||
{/* ---------- بخش ۱: جدول کاربران و نقش‌ها ---------- */}
|
||||
{/* ---------- بخش ۱: جدول یکپارچه کاربران، نقش‌ها و سطوح دسترسی پنل‌ها ---------- */}
|
||||
<div className="rounded-xl border border-line bg-panel p-4">
|
||||
<div className="mb-3 flex flex-wrap items-center justify-between gap-2">
|
||||
<div>
|
||||
<h3 className="text-[14px] font-bold">👥 کاربران و نقش‌ها</h3>
|
||||
<h3 className="text-[14px] font-bold">👥 کاربران، نقش‌ها و سطوح دسترسی پنل‌ها</h3>
|
||||
<p className="mt-0.5 text-[11.5px] text-muted">
|
||||
تعیین نقش کاربران و تخصیص پروژه‌ها به سرپرستان پروژه
|
||||
تعیین نقش سازمانی، تخصیص پنل‌ها (تدارکات، انبار، PM) و مشخص نمودن پروژه‌های عضویت کاربر
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => void syncUsers()}
|
||||
disabled={syncing}
|
||||
className="rounded-lg border border-accent/40 bg-accent/5 px-3 py-1.5 text-[12px] font-bold text-accent disabled:opacity-50"
|
||||
className="rounded-lg border border-accent/40 bg-accent/5 px-3 py-1.5 text-[12px] font-bold text-accent hover:bg-accent/10 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{syncing ? "در حال همگام‌سازی…" : "🔄 همگام‌سازی از Casdoor"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{loadingUsers ? (
|
||||
<div className="py-3 text-[12.5px] text-muted">در حال بارگذاری کاربران…</div>
|
||||
<div className="py-8 text-center text-[12.5px] text-muted">در حال بارگذاری کاربران…</div>
|
||||
) : !users.length ? (
|
||||
<div className="rounded-lg border border-dashed border-line px-3 py-3 text-[12px] text-muted">
|
||||
<div className="rounded-lg border border-dashed border-line px-3 py-6 text-center text-[12px] text-muted">
|
||||
کاربری ثبت نشده است — دکمه‌ی «همگام‌سازی از Casdoor» را بزنید.
|
||||
</div>
|
||||
) : (
|
||||
@@ -207,210 +200,394 @@ export function OrganizationPage() {
|
||||
<table className="w-full text-[12.5px]">
|
||||
<thead>
|
||||
<tr className="border-b border-line text-right text-muted">
|
||||
<th className="py-2 pe-3">نام</th>
|
||||
<th className="py-2 pe-3">نام کاربری</th>
|
||||
<th className="py-2 pe-3">نقش</th>
|
||||
<th className="py-2 pe-3">پروژه‌های تخصیص‌یافته (سرپرست پروژه)</th>
|
||||
<th className="py-2">وضعیت</th>
|
||||
<th className="py-2.5 pe-3">نام و مشخصات</th>
|
||||
<th className="py-2.5 pe-3">نقش سازمانی</th>
|
||||
<th className="py-2.5 pe-3">پنل تدارکات</th>
|
||||
<th className="py-2.5 pe-3">پنل انبار</th>
|
||||
<th className="py-2.5 pe-3">پنل مدیریت پروژه (PM)</th>
|
||||
<th className="py-2.5">پروژه‌های عضویت (محدوده سطح محدود)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((u) => (
|
||||
<tr key={u.id} className="border-b border-line/50">
|
||||
<td className="py-2.5 pe-3">
|
||||
<b>{u.first_name} {u.last_name}</b>
|
||||
</td>
|
||||
<td className="py-2.5 pe-3 font-mono text-[11px] text-muted">
|
||||
{u.username || "—"}
|
||||
</td>
|
||||
<td className="py-2.5 pe-3">
|
||||
{canChangeRoles ? (
|
||||
<select
|
||||
className="h-7 rounded-lg border border-line bg-panel px-2 text-[12px]"
|
||||
value={u.role ?? ""}
|
||||
disabled={busyId === u.id}
|
||||
onChange={(e) => void changeRole(u, (e.target.value || null) as Role)}
|
||||
>
|
||||
<option value="">— بدون نقش —</option>
|
||||
<option value="admin">ادمین</option>
|
||||
<option value="procurement_manager">مدیر تدارکات</option>
|
||||
<option value="pm">مدیر پروژه</option>
|
||||
<option value="supervisor">سرپرست پروژه</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className="rounded bg-panel px-2 py-0.5 text-[11px] font-semibold">
|
||||
{ROLE_LABELS[u.role ?? ""] ?? "بدون نقش"}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2.5 pe-3">
|
||||
{u.role === "supervisor" || u.role === "pm" ? (
|
||||
<div className="w-72">
|
||||
<ProjectMultiSelect
|
||||
options={projects.map((p) => ({ id: p.id, name: p.name }))}
|
||||
values={assignedProjectsOf(u).map((p) => p.id)}
|
||||
onChange={(nextIds) => void syncUserProjects(u, nextIds)}
|
||||
disabled={busyId === u.id}
|
||||
/>
|
||||
{users.map((u) => {
|
||||
const isAdmin = u.role === "admin";
|
||||
const hasPanel = Boolean(u.panels?.procurement || u.panels?.inventory || u.panels?.pm);
|
||||
|
||||
return (
|
||||
<tr key={u.id} className="border-b border-line/50 transition-colors hover:bg-canvas/30">
|
||||
{/* ۱. نام و نام کاربری */}
|
||||
<td className="py-2.5 pe-3">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="font-bold text-foreground">
|
||||
{u.first_name} {u.last_name}
|
||||
</span>
|
||||
<span className="font-mono text-[10px] text-muted">
|
||||
({u.username || "—"})
|
||||
</span>
|
||||
</div>
|
||||
{busyId === u.id && (
|
||||
<span className="text-[10px] text-accent animate-pulse font-medium">
|
||||
در حال ذخیره تغییرات…
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-[11px] text-muted">
|
||||
{u.role === "admin"
|
||||
? "دسترسی کامل به همه پروژه‌ها"
|
||||
: u.role === "procurement_manager"
|
||||
? "دسترسی کامل مدیریتی"
|
||||
: "—"}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2.5 text-[11px] text-muted">
|
||||
{busyId === u.id ? (
|
||||
<span className="text-accent">در حال ذخیره…</span>
|
||||
) : (
|
||||
<span className="text-emerald-600">✓ ثبت‌شده</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</td>
|
||||
|
||||
{/* ۲. نقش سازمانی */}
|
||||
<td className="py-2.5 pe-3">
|
||||
{canChangeRoles ? (
|
||||
<select
|
||||
className="h-7 rounded-lg border border-line bg-panel px-2 text-[12px] focus:outline-none focus:ring-1 focus:ring-accent"
|
||||
value={u.role ?? ""}
|
||||
disabled={busyId === u.id}
|
||||
onChange={(e) => void changeRole(u, (e.target.value || null) as Role)}
|
||||
>
|
||||
<option value="">— بدون نقش —</option>
|
||||
<option value="admin">ادمین</option>
|
||||
<option value="procurement_manager">مدیر تدارکات</option>
|
||||
<option value="pm">مدیر پروژه</option>
|
||||
<option value="supervisor">سرپرست پروژه</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className="rounded bg-panel px-2 py-0.5 text-[11px] font-semibold text-muted">
|
||||
{ROLE_LABELS[u.role ?? ""] ?? "بدون نقش"}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
|
||||
{/* ۳. پنل تدارکات */}
|
||||
<td className="py-2.5 pe-3">
|
||||
{isAdmin ? (
|
||||
<span className="text-[11px] text-muted">کامل (ادمین)</span>
|
||||
) : canChangeRoles ? (
|
||||
<select
|
||||
className="h-7 rounded-lg border border-line bg-panel px-2 text-[12px] focus:outline-none focus:ring-1 focus:ring-accent"
|
||||
value={u.panels?.procurement ?? ""}
|
||||
disabled={busyId === u.id}
|
||||
onChange={(e) => void setPanel(u, "procurement", e.target.value as "" | "full" | "limited")}
|
||||
>
|
||||
<option value="">— بدون تخصیص —</option>
|
||||
<option value="full">کامل</option>
|
||||
<option value="limited">محدود (فقط استعلام)</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className="text-[11px]">{panelLabel(u.panels?.procurement)}</span>
|
||||
)}
|
||||
</td>
|
||||
|
||||
{/* ۴. پنل انبار */}
|
||||
<td className="py-2.5 pe-3">
|
||||
{isAdmin ? (
|
||||
<span className="text-[11px] text-muted">کامل (ادمین)</span>
|
||||
) : canChangeRoles ? (
|
||||
<select
|
||||
className="h-7 rounded-lg border border-line bg-panel px-2 text-[12px] focus:outline-none focus:ring-1 focus:ring-accent"
|
||||
value={u.panels?.inventory ?? ""}
|
||||
disabled={busyId === u.id}
|
||||
onChange={(e) => void setPanel(u, "inventory", e.target.value as "" | "full" | "limited")}
|
||||
>
|
||||
<option value="">— بدون تخصیص —</option>
|
||||
<option value="full">کامل (بدون تغییر موجودی)</option>
|
||||
<option value="limited">محدود (با تغییر موجودی)</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className="text-[11px]">{panelLabel(u.panels?.inventory)}</span>
|
||||
)}
|
||||
</td>
|
||||
|
||||
{/* ۵. پنل مدیریت پروژه (PM) */}
|
||||
<td className="py-2.5 pe-3">
|
||||
{isAdmin ? (
|
||||
<span className="text-[11px] text-muted">کامل (ادمین)</span>
|
||||
) : canChangeRoles ? (
|
||||
<select
|
||||
className="h-7 rounded-lg border border-line bg-panel px-2 text-[12px] focus:outline-none focus:ring-1 focus:ring-accent"
|
||||
value={u.panels?.pm ?? ""}
|
||||
disabled={busyId === u.id}
|
||||
onChange={(e) => void setPanel(u, "pm", e.target.value as "" | "full" | "limited")}
|
||||
>
|
||||
<option value="">— بدون تخصیص —</option>
|
||||
<option value="full">کامل</option>
|
||||
<option value="limited">محدود</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className="text-[11px]">{panelLabel(u.panels?.pm)}</span>
|
||||
)}
|
||||
</td>
|
||||
|
||||
{/* ۶. پروژه‌های عضویت */}
|
||||
<td className="py-2.5">
|
||||
{isAdmin ? (
|
||||
<span className="text-[11px] text-muted">دسترسی خودکار به تمام پروژه‌ها</span>
|
||||
) : hasPanel ? (
|
||||
<div className="w-72">
|
||||
<ProjectMultiSelect
|
||||
options={projects.map((p) => ({ id: p.id, name: p.name }))}
|
||||
values={u.member_project_ids ?? []}
|
||||
onChange={(nextIds) => void setMemberProjects(u, nextIds)}
|
||||
disabled={busyId === u.id}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-[11px] text-muted">— ابتدا پنل تخصیص دهید —</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="mt-2 text-[11px] text-muted">
|
||||
سرپرستان پروژه‌ای که پروژه‌ای به آن‌ها تخصیص داده نشده باشد، تا زمان تخصیص پروژه اجازه ورود به سامانه را نخواهند داشت.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ---------- بخش ۲: کارت‌های پروژه‌ها و سرپرستان مسئول ---------- */}
|
||||
<div>
|
||||
<h3 className="mb-2 text-[14px] font-bold">🏢 پروژه‌ها و سرپرستان مسئول</h3>
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
|
||||
{projects.map((p) => {
|
||||
const sups = supervisorsOf(p.id);
|
||||
return (
|
||||
<div key={p.id} className="rounded-xl border border-line bg-panel p-4">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<h4 className="text-[14px] font-bold">🏢 {p.name}</h4>
|
||||
<span className="rounded-lg bg-panel px-2 py-0.5 text-[11px] text-muted">
|
||||
{p.status || "پروژه فعال"}
|
||||
</span>
|
||||
</div>
|
||||
{p.description && (
|
||||
<p className="mb-3 text-[12px] text-muted line-clamp-2">{p.description}</p>
|
||||
)}
|
||||
<div>
|
||||
<h5 className="mb-1.5 text-[11.5px] font-bold text-muted">👤 سرپرست(های) پروژه:</h5>
|
||||
{!sups.length ? (
|
||||
<div className="rounded-lg border border-dashed border-line px-3 py-2 text-[11.5px] text-amber-600">
|
||||
⚠️ سرپرستی تعیین نشده است — از جدول بالا پروژه را به سرپرست تخصیص دهید.
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-1">
|
||||
{sups.map((s) => (
|
||||
<div key={s.id} className="flex items-center gap-2 rounded-lg border border-line px-2.5 py-1.5 text-[12px]">
|
||||
<span className="font-semibold">{s.first_name} {s.last_name}</span>
|
||||
<span className="text-[10px] text-muted font-mono">({s.username})</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{/* ---------- بخش ۳: پنل‌ها و سطوح دسترسی (جایگزین نقش‌ها) ---------- */}
|
||||
<div className="rounded-xl border border-line bg-panel p-4">
|
||||
<div className="mb-3">
|
||||
<h3 className="text-[14px] font-bold">🔑 پنل‌ها و سطوح دسترسی</h3>
|
||||
<p className="mt-0.5 text-[11.5px] leading-5 text-muted">
|
||||
به هر شخص پنل «تدارکات» یا «انبار» را تخصیص دهید. تدارکات — کامل: تغییر در کل پنل؛ محدود: فقط افزودن
|
||||
استعلام برای پروژه‌های عضویت. انبار — کامل: همه پروژه‌ها بدون تغییر موجودی؛ محدود: فقط پروژه‌های عضویت با
|
||||
امکان تغییر موجودی. ادمین دست‌نخورده است.
|
||||
</p>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-[14px] font-bold">🏢 پروژه‌ها و سرپرستان مسئول</h3>
|
||||
<p className="text-[11.5px] text-muted">
|
||||
مشاهده وضعیت پروژه‌ها و سرپرستان یا اعضای تخصیص‌یافته به هر پروژه
|
||||
</p>
|
||||
</div>
|
||||
{loadingProjects && (
|
||||
<span className="text-[11px] text-muted animate-pulse">در حال به‌روزرسانی پروژه‌ها…</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-[12.5px]">
|
||||
<thead>
|
||||
<tr className="border-b border-line text-right text-muted">
|
||||
<th className="py-2 pe-3">نام</th>
|
||||
<th className="py-2 pe-3">پنل تدارکات</th>
|
||||
<th className="py-2 pe-3">پنل انبار</th>
|
||||
<th className="py-2">پروژه‌های عضویت (محدوده سطح محدود)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((u) => {
|
||||
if (u.role === "admin") {
|
||||
return (
|
||||
<tr key={u.id} className="border-b border-line/50">
|
||||
<td className="py-2.5 pe-3"><b>{u.first_name} {u.last_name}</b></td>
|
||||
<td colSpan={3} className="py-2.5 text-[11px] text-muted">
|
||||
ادمین — دسترسی کامل به همه پنل‌ها (دست‌نخورده)
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
const hasPanel = Boolean(u.panels?.procurement || u.panels?.inventory);
|
||||
return (
|
||||
<tr key={u.id} className="border-b border-line/50">
|
||||
<td className="py-2.5 pe-3">
|
||||
<b>{u.first_name} {u.last_name}</b>
|
||||
<span className="ms-1 font-mono text-[10px] text-muted">({u.username || "—"})</span>
|
||||
</td>
|
||||
<td className="py-2.5 pe-3">
|
||||
{canChangeRoles ? (
|
||||
<select
|
||||
className="h-7 rounded-lg border border-line bg-panel px-2 text-[12px]"
|
||||
value={u.panels?.procurement ?? ""}
|
||||
disabled={busyId === u.id}
|
||||
onChange={(e) => void setPanel(u, "procurement", e.target.value as "" | "full" | "limited")}
|
||||
>
|
||||
<option value="">— بدون تخصیص —</option>
|
||||
<option value="full">کامل</option>
|
||||
<option value="limited">محدود (فقط استعلام)</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className="text-[11px]">{panelLabel(u.panels?.procurement)}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2.5 pe-3">
|
||||
{canChangeRoles ? (
|
||||
<select
|
||||
className="h-7 rounded-lg border border-line bg-panel px-2 text-[12px]"
|
||||
value={u.panels?.inventory ?? ""}
|
||||
disabled={busyId === u.id}
|
||||
onChange={(e) => void setPanel(u, "inventory", e.target.value as "" | "full" | "limited")}
|
||||
>
|
||||
<option value="">— بدون تخصیص —</option>
|
||||
<option value="full">کامل (بدون تغییر موجودی)</option>
|
||||
<option value="limited">محدود (با تغییر موجودی)</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className="text-[11px]">{panelLabel(u.panels?.inventory)}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2.5">
|
||||
{hasPanel ? (
|
||||
<div className="w-72">
|
||||
<ProjectMultiSelect
|
||||
options={projects.map((p) => ({ id: p.id, name: p.name }))}
|
||||
values={u.member_project_ids ?? []}
|
||||
onChange={(nextIds) => void setMemberProjects(u, nextIds)}
|
||||
disabled={busyId === u.id}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-[11px] text-muted">— ابتدا پنل تخصیص دهید —</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{loadingProjects && !projects.length ? (
|
||||
<div className="rounded-xl border border-line bg-panel p-6 text-center text-xs text-muted">
|
||||
در حال دریافت اطلاعات پروژه‌ها…
|
||||
</div>
|
||||
) : !projects.length ? (
|
||||
<div className="rounded-xl border border-dashed border-line bg-panel p-6 text-center text-xs text-muted flex flex-col items-center gap-2">
|
||||
<span>پروژه‌ای برای نمایش یافت نشد یا در دسترس نیست.</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void fetchProjects()}
|
||||
className="rounded-lg bg-accent/10 px-3 py-1 text-xs font-semibold text-accent hover:bg-accent/20 transition-colors"
|
||||
>
|
||||
🔄 تلاش مجدد برای دریافت پروژه‌ها
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
|
||||
{projects.map((p) => {
|
||||
const sups = supervisorsOf(p.id);
|
||||
return (
|
||||
<div key={p.id} className="rounded-xl border border-line bg-panel p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<h4 className="text-[14px] font-bold text-foreground">🏢 {p.name}</h4>
|
||||
<span className="rounded-lg bg-canvas px-2 py-0.5 text-[11px] text-muted font-medium border border-line">
|
||||
{p.status || "پروژه فعال"}
|
||||
</span>
|
||||
</div>
|
||||
{p.description && (
|
||||
<p className="mb-3 text-[12px] text-muted line-clamp-2">{p.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t border-line/50">
|
||||
<h5 className="mb-1.5 text-[11.5px] font-bold text-muted">👤 سرپرست(های) مسئول:</h5>
|
||||
{!sups.length ? (
|
||||
<div className="rounded-lg border border-dashed border-line px-3 py-2 text-[11.5px] text-amber-600 dark:text-amber-400 bg-amber-500/5">
|
||||
⚠️ سرپرستی تعیین نشده است — از جدول بالا، این پروژه را به عنوان عضویت تخصیص دهید.
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-1">
|
||||
{sups.map((s) => (
|
||||
<div key={s.id} className="flex items-center justify-between rounded-lg border border-line bg-canvas/40 px-2.5 py-1.5 text-[12px]">
|
||||
<span className="font-semibold text-foreground">{s.first_name} {s.last_name}</span>
|
||||
<span className="text-[10px] text-muted font-mono">({s.username || ROLE_LABELS[s.role ?? ""] || "عضو"})</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ---------- بخش ۴: راهنما و توضیحات سطوح دسترسی پنل‌ها ---------- */}
|
||||
<div className="rounded-xl border border-line bg-panel p-5">
|
||||
<div className="mb-4 flex items-center justify-between border-b border-line pb-3">
|
||||
<div>
|
||||
<h3 className="flex items-center gap-2 text-[15px] font-bold">
|
||||
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-accent/10 text-accent">
|
||||
📖
|
||||
</span>
|
||||
توضیحات پنل‌ها و راهنمای سطوح دسترسی
|
||||
</h3>
|
||||
<p className="mt-1 text-[12px] text-muted">
|
||||
مفهوم، اختیارات و محدوده کاری هر سطح دسترسی (کامل / محدود) در هر یک از پنل‌های سامانه
|
||||
</p>
|
||||
</div>
|
||||
<div className="hidden sm:flex items-center gap-2 text-[11px] text-muted bg-panel border border-line px-3 py-1.5 rounded-lg">
|
||||
<span className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
|
||||
مدل دسترسی ماژولار مبتنی بر پنل
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
{/* کارت پنل تدارکات */}
|
||||
<div className="flex flex-col rounded-xl border border-line bg-canvas/40 p-4 transition-all hover:border-sky-500/40">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-sky-500/10 text-[18px]">
|
||||
🛒
|
||||
</span>
|
||||
<div>
|
||||
<h4 className="text-[13.5px] font-bold text-foreground">پنل تدارکات</h4>
|
||||
<span className="text-[10.5px] text-muted font-mono">Procurement</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="rounded-md bg-sky-500/10 px-2 py-0.5 text-[11px] font-medium text-sky-600 dark:text-sky-400">
|
||||
خرید و بازرگانی
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-3">
|
||||
<div className="rounded-lg border border-line/60 bg-panel/70 p-3">
|
||||
<div className="mb-1 flex items-center gap-1.5">
|
||||
<span className="inline-block h-2 w-2 rounded-full bg-emerald-500" />
|
||||
<span className="text-[12px] font-bold text-emerald-600 dark:text-emerald-400">سطح کامل (Full)</span>
|
||||
</div>
|
||||
<ul className="space-y-1 pe-2 text-[11.5px] leading-relaxed text-muted list-disc list-inside">
|
||||
<li>دسترسی کامل مدیریتی به تمامی بخش‌های تدارکات</li>
|
||||
<li>ثبت و ویرایش پیش‌فاکتورها، شرایط پرداخت و فاکتورها</li>
|
||||
<li>مدیریت تأمین‌کنندگان، اقلام و تصمیم‌گیری خرید در همه پروژه‌ها</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-line/60 bg-panel/70 p-3">
|
||||
<div className="mb-1 flex items-center gap-1.5">
|
||||
<span className="inline-block h-2 w-2 rounded-full bg-amber-500" />
|
||||
<span className="text-[12px] font-bold text-amber-600 dark:text-amber-400">سطح محدود (Limited - متقاضی)</span>
|
||||
</div>
|
||||
<ul className="space-y-1 pe-2 text-[11.5px] leading-relaxed text-muted list-disc list-inside">
|
||||
<li>فقط امکان ثبت درخواست استعلام قیمت و پیش‌فاکتور اولیه</li>
|
||||
<li>محدود منحصراً به پروژه‌هایی که کاربر در آن‌ها عضویت دارد</li>
|
||||
<li>عدم دسترسی به تأییدات نهایی، تغییر قیمت‌ها یا پروژه‌های غیرعضو</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* کارت پنل انبار */}
|
||||
<div className="flex flex-col rounded-xl border border-line bg-canvas/40 p-4 transition-all hover:border-amber-500/40">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-500/10 text-[18px]">
|
||||
📦
|
||||
</span>
|
||||
<div>
|
||||
<h4 className="text-[13.5px] font-bold text-foreground">پنل انبار</h4>
|
||||
<span className="text-[10.5px] text-muted font-mono">Inventory</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="rounded-md bg-amber-500/10 px-2 py-0.5 text-[11px] font-medium text-amber-600 dark:text-amber-400">
|
||||
انبارداری و موجودی
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-3">
|
||||
<div className="rounded-lg border border-line/60 bg-panel/70 p-3">
|
||||
<div className="mb-1 flex items-center gap-1.5">
|
||||
<span className="inline-block h-2 w-2 rounded-full bg-emerald-500" />
|
||||
<span className="text-[12px] font-bold text-emerald-600 dark:text-emerald-400">سطح کامل (Full - مدیر/ناظر)</span>
|
||||
</div>
|
||||
<ul className="space-y-1 pe-2 text-[11.5px] leading-relaxed text-muted list-disc list-inside">
|
||||
<li>مشاهده موجودی و کاردکس کالا در تمامی انبارها و پروژه‌ها</li>
|
||||
<li>پایش و نظارت بر گردش کالا در کل سازمان و گزارش‌گیری کلان</li>
|
||||
<li className="font-semibold text-amber-700 dark:text-amber-300">بدون امکان تغییر مستقیم موجودی (جهت حفظ سلامت داده و کنترل نظارتی)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-line/60 bg-panel/70 p-3">
|
||||
<div className="mb-1 flex items-center gap-1.5">
|
||||
<span className="inline-block h-2 w-2 rounded-full bg-amber-500" />
|
||||
<span className="text-[12px] font-bold text-amber-600 dark:text-amber-400">سطح محدود (Limited - انباردار کارگاه)</span>
|
||||
</div>
|
||||
<ul className="space-y-1 pe-2 text-[11.5px] leading-relaxed text-muted list-disc list-inside">
|
||||
<li>دسترسی فقط به انبارهای پروژه‌های عضویت کاربر</li>
|
||||
<li>امکان ثبت و تغییر موجودی، رسید کالا، حواله مصرف و تطبیق فیزیکی</li>
|
||||
<li>تفکیک دقیق موجودی و تراکنش‌های انبار بر اساس پروژه</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* کارت پنل مدیریت پروژه (PM) */}
|
||||
<div className="flex flex-col rounded-xl border border-line bg-canvas/40 p-4 transition-all hover:border-indigo-500/40">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-500/10 text-[18px]">
|
||||
📊
|
||||
</span>
|
||||
<div>
|
||||
<h4 className="text-[13.5px] font-bold text-foreground">پنل مدیریت پروژه (PM)</h4>
|
||||
<span className="text-[10.5px] text-muted font-mono">Project Management</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="rounded-md bg-indigo-500/10 px-2 py-0.5 text-[11px] font-medium text-indigo-600 dark:text-indigo-400">
|
||||
کنترل پروژه و اجرا
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-3">
|
||||
<div className="rounded-lg border border-line/60 bg-panel/70 p-3">
|
||||
<div className="mb-1 flex items-center gap-1.5">
|
||||
<span className="inline-block h-2 w-2 rounded-full bg-emerald-500" />
|
||||
<span className="text-[12px] font-bold text-emerald-600 dark:text-emerald-400">سطح کامل (Full - مدیر پروژه)</span>
|
||||
</div>
|
||||
<ul className="space-y-1 pe-2 text-[11.5px] leading-relaxed text-muted list-disc list-inside">
|
||||
<li>مدیریت جامع ساختار شکست کار (WBS)، زمان‌بندی و گانت چارت تعاملی</li>
|
||||
<li>تعریف و ویرایش فعالیت‌ها، ثبت خط مبنا (Baseline)، کنترل هزینه و منابع</li>
|
||||
<li>پایش شاخص‌های پیشرفت زمانی و مالی (EVM) و گزارش‌های تحلیلی</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-line/60 bg-panel/70 p-3">
|
||||
<div className="mb-1 flex items-center gap-1.5">
|
||||
<span className="inline-block h-2 w-2 rounded-full bg-amber-500" />
|
||||
<span className="text-[12px] font-bold text-amber-600 dark:text-amber-400">سطح محدود (Limited - سرپرست/کارشناس)</span>
|
||||
</div>
|
||||
<ul className="space-y-1 pe-2 text-[11.5px] leading-relaxed text-muted list-disc list-inside">
|
||||
<li>مشاهده فعالیت‌ها و تسک‌های مربوط به پروژه‌های عضویت کاربر</li>
|
||||
<li>به‌روزرسانی درصد پیشرفت فیزیکی و وضعیت انجام تسک‌ها</li>
|
||||
<li>تکمیل چک‌لیست‌های کنترل کیفیت (QC) و ثبت گزارش‌های اجرایی روزانه</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* نوار توضیحات تکمیلی و راهنمای عمومی */}
|
||||
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3 pt-3 border-t border-line text-[11.5px]">
|
||||
<div className="flex items-start gap-2.5 rounded-lg border border-line/60 bg-canvas/30 p-2.5">
|
||||
<span className="text-[16px] leading-none">👑</span>
|
||||
<div>
|
||||
<span className="font-bold text-foreground">دسترسی ادمین (Admin):</span>
|
||||
<p className="mt-0.5 text-muted leading-relaxed">
|
||||
کاربر با نقش ادمین بالاترین سطح دسترسی سیستمی را داشته و به تمامی پنل‌ها و پروژه‌ها دسترسی کامل دارد و نیازی به تخصیص جداگانه پنل‌ها ندارد.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-2.5 rounded-lg border border-line/60 bg-canvas/30 p-2.5">
|
||||
<span className="text-[16px] leading-none">🎯</span>
|
||||
<div>
|
||||
<span className="font-bold text-foreground">کارکرد «پروژه‌های عضویت»:</span>
|
||||
<p className="mt-0.5 text-muted leading-relaxed">
|
||||
هرگاه برای کاربری در هر پنلی سطح «محدود» انتخاب شود، دامنه داده‌ها و اختیارات وی دقیقاً به پروژه‌های انتخابی در ستون «پروژه‌های عضویت» محدود خواهد شد.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
|
||||
Reference in New Issue
Block a user