feat(frontend): add React UI — procurement office, wizard, suppliers, inventory panel (dash port), role-based login

2026-08-25 19:08:15 +03:30
parent 170aed66ea
commit 4e105c5cd5
103 changed files with 16352 additions and 0 deletions
@@ -0,0 +1,155 @@
+import { useState } from "react";
+import { useLocation } from "react-router-dom";
+import { toast } from "sonner";
+import { Header, PageLayout } from "../../components/layout/Header";
+import { useAuthStore } from "../../store/auth";
+import { PanelMenu } from "../../components/PanelMenu";
+import { panelMenuItems, useLogout } from "./panelMenu";
+import { apiV26 } from "../../lib/api";
+import { useInventoryData } from "./useInventoryData";
+import { faNum } from "../../lib/formatters";
+
+// سازمان‌دهی (فقط ادمین) — پروژه‌ها، مدیران و انبارهای هر پروژه
+export function OrganizationPage() {
+  const location = useLocation();
+  const logout = useLogout();
+  const user = useAuthStore((s) => s.user);
+  const data = useInventoryData();
+
+  const [newWh, setNewWh] = useState<Record<string, string>>({});
+  const [newWhDesc, setNewWhDesc] = useState<Record<string, string>>({});
+
+  if (user?.role !== "admin" && user?.role !== "procurement_manager") {
+    return (
+      <div className="min-h-screen">
+        <Header title="سازمان‌دهی" menu={<PanelMenu title="پنل مدیریت انبار" items={panelMenuItems(location.pathname, user?.role, logout)} />} />
+        <PageLayout>
+          <div className="text-[13px] text-muted">این بخش فقط برای ادمین است.</div>
+        </PageLayout>
+      </div>
+    );
+  }
+
+  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 : "خطا در حذف انبار");
+    }
+  };
+
+  return (
+    <div className="min-h-screen">
+      <Header title="سازمان‌دهی" sub="ادمین" menu={<PanelMenu title="پنل مدیریت انبار" items={panelMenuItems(location.pathname, user?.role, logout)} />} />
+      <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">
+          ℹ️ پروژه‌ها از سیستم تدارکات می‌آیند. اینجا مشخص می‌کنید هر پروژه با کدام مدیر و انبار(ها) کار می‌کند؛
+          هر مدیر پروژه به همه انبارهای پروژه خودش دسترسی دارد. همه تغییرات فوراً در داشبورد و فرم‌ها اعمال می‌شود.
+        </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);
+            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>
+                  {p.pm_user_id ? (
+                    <div className="flex items-center gap-2 rounded-lg border border-line px-3 py-2 text-[12.5px]">
+                      <span className="font-semibold">{p.pm_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">
+                      مدیری تعیین نشده است — از بخش کاربران (Casdoor) نقش مدیر پروژه را به کاربر بدهید و در تنظیمات پروژه وصل کنید.
+                    </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">
+                          <b>{w.name}</b>
+                          <small className="block truncate text-muted">{w.description || ""}</small>
+                        </div>
+                        <div className="flex items-center gap-1.5">
+                          <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 gap-2">
+                  <input
+                    className="h-8 w-44 rounded-lg border border-line bg-panel px-2 text-sm"
+                    placeholder="نام انبار جدید"
+                    value={newWh[p.id] || ""}
+                    onChange={(e) => setNewWh((s) => ({ ...s, [p.id]: e.target.value }))}
+                  />
+                  <input
+                    className="h-8 w-52 rounded-lg border border-line bg-panel px-2 text-sm"
+                    placeholder="توضیحات (اختیاری)"
+                    value={newWhDesc[p.id] || ""}
+                    onChange={(e) => setNewWhDesc((s) => ({ ...s, [p.id]: e.target.value }))}
+                  />
+                  <button className="rounded-lg bg-accent px-3 py-1.5 text-[12px] font-bold text-white" onClick={() => void addWarehouse(p.id)}>
+                    + افزودن انبار
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </PageLayout>
+    </div>
+  );
+}