whqreza
b45a6cd033
On /inventory/org two container rows could not shrink or wrap and overflowed past the left edge on phones (RTL), forcing horizontal scrolling: - the add-warehouse form was a non-wrapping flex row of fixed-width inputs (w-44 + w-52) plus the button (~500px total); it now stacks vertically below sm (full-width fields and button) and returns to the inline layout at sm+ - each warehouse row's action cluster (dashboard / move-project select / delete) is now flex-wrap with justify-end, and the name block is flex-1 so a long select option can no longer push the buttons out of the card on narrow viewports Desktop layout is unchanged; containerized rows stay within the page.
350 lines
17 KiB
TypeScript
350 lines
17 KiB
TypeScript
import { useCallback, useEffect, useState } from "react";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { toast } from "sonner";
|
||
import { Header, PageLayout } from "../../components/layout/Header";
|
||
import { useAuthStore } from "../../store/auth";
|
||
import { inventorySubheader } from "./panelMenu";
|
||
import { apiV26, type UserRow } from "../../lib/api";
|
||
import { refreshProcurementStore } from "../../hooks";
|
||
import { useInventoryData } from "./useInventoryData";
|
||
import { faNum } from "../../lib/formatters";
|
||
|
||
type Role = "pm" | "procurement_manager" | "admin" | null;
|
||
|
||
const ROLE_LABELS: Record<string, string> = {
|
||
pm: "مدیر پروژه",
|
||
procurement_manager: "مدیر تدارکات",
|
||
admin: "ادمین",
|
||
};
|
||
|
||
// سازمان‌دهی (فقط ادمین / مدیر تدارکات) — کاربران، مدیران پروژه و انبارهای هر پروژه
|
||
export function OrganizationPage() {
|
||
const navigate = useNavigate();
|
||
const user = useAuthStore((s) => s.user);
|
||
const data = useInventoryData();
|
||
|
||
const [users, setUsers] = useState<UserRow[]>([]);
|
||
const [loadingUsers, setLoadingUsers] = useState(true);
|
||
const [syncing, setSyncing] = useState(false);
|
||
const [busyId, setBusyId] = useState<string | null>(null);
|
||
|
||
const [newWh, setNewWh] = useState<Record<string, string>>({});
|
||
const [newWhDesc, setNewWhDesc] = useState<Record<string, string>>({});
|
||
|
||
const canManage = user?.role === "admin" || user?.role === "procurement_manager";
|
||
// فقط ادمین می‌تواند نقش‌ها را تغییر دهد/ارتقا دهد (RBAC) — مدیر تدارکات فقط
|
||
// پروژه‌ی مدیران پروژه را تعیین/جابه‌جا می‌کند.
|
||
const canChangeRoles = user?.role === "admin";
|
||
|
||
const loadUsers = useCallback(async () => {
|
||
try {
|
||
const list = await apiV26.users.list();
|
||
setUsers(list);
|
||
} catch (err) {
|
||
toast.error(err instanceof Error ? err.message : "خطا در دریافت کاربران");
|
||
} finally {
|
||
setLoadingUsers(false);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (canManage) void loadUsers();
|
||
}, [canManage, loadUsers]);
|
||
|
||
const syncUsers = async () => {
|
||
setSyncing(true);
|
||
try {
|
||
const { users: synced, created } = await apiV26.users.sync();
|
||
setUsers(synced);
|
||
toast.success(
|
||
created > 0
|
||
? `همگام‌سازی انجام شد — ${faNum(created)} کاربر جدید از Casdoor اضافه شد ✓`
|
||
: "همگام‌سازی انجام شد — کاربر جدیدی یافت نشد",
|
||
);
|
||
await data.refresh();
|
||
} catch (err) {
|
||
toast.error(err instanceof Error ? err.message : "خطا در همگام‌سازی با Casdoor");
|
||
} finally {
|
||
setSyncing(false);
|
||
}
|
||
};
|
||
|
||
if (!canManage) {
|
||
return (
|
||
<div className="min-h-screen">
|
||
<Header title="سازمان‌دهی" backTo="/inventory" backLabel="بازگشت به داشبورد" />
|
||
<PageLayout>
|
||
<div className="text-[13px] text-muted">این بخش فقط برای ادمین / مدیر تدارکات است.</div>
|
||
</PageLayout>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ---------- actions: users ----------
|
||
|
||
const changeRole = async (u: UserRow, role: Role) => {
|
||
setBusyId(u.id);
|
||
try {
|
||
await apiV26.users.updateRole(u.id, role);
|
||
toast.success(`نقش «${ROLE_LABELS[role ?? ""] ?? "بدون نقش"}» برای ${u.first_name} ${u.last_name} ثبت شد ✓`);
|
||
await loadUsers();
|
||
refreshProcurementStore();
|
||
} catch (err) {
|
||
toast.error(err instanceof Error ? err.message : "خطا در تغییر نقش");
|
||
} finally {
|
||
setBusyId(null);
|
||
}
|
||
};
|
||
|
||
const changeProject = async (u: UserRow, projectId: string) => {
|
||
setBusyId(u.id);
|
||
try {
|
||
const project = data.lookup.projects.find((p) => p.id === projectId);
|
||
await apiV26.users.assignProject(u.id, projectId || null);
|
||
toast.success(project ? `«${u.first_name} ${u.last_name}» به پروژه «${project.name}» متصل شد ✓` : "مدیر پروژه از پروژه جدا شد");
|
||
await loadUsers();
|
||
await data.refresh();
|
||
refreshProcurementStore();
|
||
} catch (err) {
|
||
toast.error(err instanceof Error ? err.message : "خطا در اتصال مدیر به پروژه");
|
||
} finally {
|
||
setBusyId(null);
|
||
}
|
||
};
|
||
|
||
// ---------- actions: warehouses ----------
|
||
|
||
const addWarehouse = async (projectId: string) => {
|
||
const name = (newWh[projectId] || "").trim();
|
||
if (!name) return toast.error("نام انبار الزامی است");
|
||
try {
|
||
await apiV26.warehouses.create({ project_id: projectId, name, description: (newWhDesc[projectId] || "").trim() || null });
|
||
setNewWh((s) => ({ ...s, [projectId]: "" }));
|
||
setNewWhDesc((s) => ({ ...s, [projectId]: "" }));
|
||
toast.success(`انبار «${name}» اضافه شد ✓`);
|
||
await data.refresh();
|
||
} catch (err) {
|
||
toast.error(err instanceof Error ? err.message : "خطا در افزودن انبار");
|
||
}
|
||
};
|
||
|
||
const moveWarehouse = async (id: string, projectId: string) => {
|
||
try {
|
||
await apiV26.warehouses.update(id, { project_id: projectId });
|
||
toast.success("انبار منتقل شد ✓");
|
||
await data.refresh();
|
||
} catch (err) {
|
||
toast.error(err instanceof Error ? err.message : "خطا در انتقال انبار");
|
||
}
|
||
};
|
||
|
||
const removeWarehouse = async (id: string) => {
|
||
if (!confirm("انبار حذف شود؟ (انبارهای دارای سابقه تراکنش قابل حذف نیستند)")) return;
|
||
try {
|
||
await apiV26.warehouses.delete(id);
|
||
toast.success("انبار حذف شد");
|
||
await data.refresh();
|
||
} catch (err) {
|
||
toast.error(err instanceof Error ? err.message : "خطا در حذف انبار");
|
||
}
|
||
};
|
||
|
||
const pmOf = (projectId: string) => users.find((u) => u.role === "pm" && u.project_id === projectId) || null;
|
||
|
||
return (
|
||
<div className="min-h-screen">
|
||
<Header
|
||
title="سازمان‌دهی"
|
||
sub={inventorySubheader(user)}
|
||
backTo="/inventory"
|
||
backLabel="بازگشت به داشبورد"
|
||
/>
|
||
<PageLayout className="flex flex-col gap-3">
|
||
<div className="rounded-lg border border-blue/20 bg-blue/5 px-3 py-2 text-[12px] leading-6 text-muted">
|
||
ℹ️ کاربران از Casdoor همگام می‌شوند و نقش‌ها اینجا (فقط توسط ادمین) تعیین می‌شوند؛
|
||
مدیر تدارکات فقط پروژه‌ی مدیران پروژه را تعیین/جابه‌جا می‌کند. پروژه‌ها از سیستم تدارکات می‌آیند و
|
||
هر مدیر پروژه به همه انبارهای پروژه خودش دسترسی دارد. همه تغییرات فوراً در داشبورد و فرم‌ها اعمال می‌شود.
|
||
</div>
|
||
|
||
{/* ---------- کاربران و مدیران پروژه ---------- */}
|
||
<div className="rounded-xl border border-line bg-panel p-4">
|
||
<div className="mb-2 flex flex-wrap items-center justify-between gap-2">
|
||
<h3 className="text-[14px] font-bold">👥 کاربران و مدیران پروژه</h3>
|
||
<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"
|
||
>
|
||
{syncing ? "در حال همگام‌سازی…" : "🔄 همگام‌سازی از Casdoor"}
|
||
</button>
|
||
</div>
|
||
|
||
{loadingUsers ? (
|
||
<div className="py-3 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">
|
||
کاربری ثبت نشده است — کاربران پس از اولین ورود (Casdoor) به‌صورت خودکار ساخته می‌شوند؛
|
||
یا دکمه‌ی «همگام‌سازی از Casdoor» را بزنید.
|
||
</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) => (
|
||
<tr key={u.id} className="border-b border-line/50">
|
||
<td className="py-1.5 pe-3">
|
||
<b>{u.first_name} {u.last_name}</b>
|
||
<small className="block text-[10.5px] text-muted ltr">{u.casdoor_id}</small>
|
||
</td>
|
||
<td className="py-1.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="pm">مدیر پروژه</option>
|
||
<option value="procurement_manager">مدیر تدارکات</option>
|
||
<option value="admin">ادمین</option>
|
||
</select>
|
||
) : (
|
||
<span className={`rounded-lg px-2 py-1 text-[11px] font-bold ${u.role ? "bg-accent-bg text-accent" : "bg-slate-bg text-muted"}`}>
|
||
{u.role ? ROLE_LABELS[u.role] : "بدون نقش"}
|
||
</span>
|
||
)}
|
||
{!canChangeRoles && u.role && (
|
||
<small className="block text-[10px] text-muted">(تغییر نقش فقط توسط ادمین)</small>
|
||
)}
|
||
</td>
|
||
<td className="py-1.5 pe-3">
|
||
{u.role === "pm" ? (
|
||
<select
|
||
className="h-7 rounded-lg border border-line bg-panel px-2 text-[12px]"
|
||
value={u.project_id || ""}
|
||
disabled={busyId === u.id}
|
||
onChange={(e) => void changeProject(u, e.target.value)}
|
||
>
|
||
<option value="">— بدون پروژه —</option>
|
||
{data.lookup.projects.map((p) => (
|
||
<option key={p.id} value={p.id}>{p.name}</option>
|
||
))}
|
||
</select>
|
||
) : (
|
||
<span className="text-[11.5px] text-muted">—</span>
|
||
)}
|
||
</td>
|
||
<td className="py-1.5">
|
||
{u.role === "pm" && u.project_id && (
|
||
<span className="rounded-lg bg-green/10 px-2 py-1 text-[10.5px] font-bold text-green">فعال</span>
|
||
)}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
<div className="mt-1 text-[11px] text-muted">
|
||
«بدون نقش» = حذف مدیر پروژه (از پروژه هم جدا می‌شود). اتصال به یک پروژه، مدیر قبلی آن پروژه را جابه‌جا می‌کند.
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* ---------- پروژه‌ها و انبارها ---------- */}
|
||
<div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
|
||
{data.lookup.projects.map((p) => {
|
||
const whs = data.warehouses.filter((w) => w.project_id === p.id);
|
||
const pm = pmOf(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">
|
||
<h3 className="text-[14px] font-bold">🏢 {p.name}</h3>
|
||
<span className="rounded-lg bg-panel px-2 py-1 text-[11px] text-muted">
|
||
{faNum(whs.length)} انبار
|
||
</span>
|
||
</div>
|
||
|
||
<div className="mb-3">
|
||
<h4 className="mb-1 text-[12px] font-bold text-muted">👤 مدیر پروژه</h4>
|
||
{pm ? (
|
||
<div className="flex items-center gap-2 rounded-lg border border-line px-3 py-2 text-[12.5px]">
|
||
<span className="font-semibold">{pm.first_name} {pm.last_name}</span>
|
||
<span className="text-[10.5px] text-muted">(مدیر مسئول پروژه)</span>
|
||
</div>
|
||
) : (
|
||
<div className="rounded-lg border border-dashed border-line px-3 py-2 text-[11.5px] text-muted">
|
||
مدیری تعیین نشده است — از جدول «کاربران و مدیران پروژه» بالا، نقش مدیر پروژه را بدهید و به این پروژه متصل کنید.
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<h4 className="mb-1 text-[12px] font-bold text-muted">🏬 انبارهای پروژه</h4>
|
||
{!whs.length ? (
|
||
<div className="rounded-lg border border-dashed border-line px-3 py-2 text-[11.5px] text-muted">انباری ندارد — از فرم زیر اضافه کنید.</div>
|
||
) : (
|
||
<div className="mb-2 flex flex-col gap-1.5">
|
||
{whs.map((w) => (
|
||
<div key={w.id} className="flex items-center justify-between gap-2 rounded-lg border border-line px-3 py-2 text-[12.5px]">
|
||
<div className="min-w-0 flex-1">
|
||
<b>{w.name}</b>
|
||
<small className="block truncate text-muted">{w.description || ""}</small>
|
||
</div>
|
||
<div className="flex flex-wrap items-center justify-end gap-1.5">
|
||
<button
|
||
className="rounded-lg border border-accent/40 bg-accent/5 px-2 py-1 text-[10.5px] font-bold text-accent"
|
||
onClick={() => navigate(`/inventory?warehouse=${w.id}`)}
|
||
title="داشبورد این انبار"
|
||
>
|
||
📊 داشبورد
|
||
</button>
|
||
<select
|
||
className="h-7 rounded-lg border border-line bg-panel px-2 text-[11px]"
|
||
value={w.project_id}
|
||
onChange={(e) => void moveWarehouse(w.id, e.target.value)}
|
||
title="انتقال به پروژه دیگر"
|
||
>
|
||
{data.lookup.projects.map((p2) => (
|
||
<option key={p2.id} value={p2.id}>{p2.name}</option>
|
||
))}
|
||
</select>
|
||
<button className="text-muted hover:text-red" onClick={() => void removeWarehouse(w.id)} title="حذف انبار">✕</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
|
||
<input
|
||
className="h-8 w-full rounded-lg border border-line bg-panel px-2 text-sm sm:w-44"
|
||
placeholder="نام انبار جدید"
|
||
value={newWh[p.id] || ""}
|
||
onChange={(e) => setNewWh((s) => ({ ...s, [p.id]: e.target.value }))}
|
||
/>
|
||
<input
|
||
className="h-8 w-full rounded-lg border border-line bg-panel px-2 text-sm sm:w-52"
|
||
placeholder="توضیحات (اختیاری)"
|
||
value={newWhDesc[p.id] || ""}
|
||
onChange={(e) => setNewWhDesc((s) => ({ ...s, [p.id]: e.target.value }))}
|
||
/>
|
||
<button className="w-full rounded-lg bg-accent px-3 py-2 text-[12px] font-bold text-white sm:w-auto sm:py-1.5" onClick={() => void addWarehouse(p.id)}>
|
||
+ افزودن انبار
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</PageLayout>
|
||
</div>
|
||
);
|
||
}
|