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,51 @@
+import { Check } from "lucide-react";
+import { faNum } from "../../lib/formatters";
+import { cn } from "../../lib/utils";
+
+export interface StepperProps {
+  current: number;
+  highestVisited: number;
+  completedSteps: Set<number>;
+  onGoto: (step: number) => void;
+}
+
+const STEPS = ["تأمین‌کننده", "اقلام", "شرایط پرداخت", "پروژه", "بازبینی و ثبت"];
+
+// نوار ۵ مرحله‌ای ویزارد — کلیک روی مراحل بازدیدشده مجاز است
+// مراحل تکمیل‌شده سبز، مرحله‌ی فعلی آبی
+export function Stepper({ current, completedSteps, onGoto }: StepperProps) {
+  return (
+    <div className="mb-4 flex flex-wrap gap-2 rounded-xl border border-line bg-panel p-2 shadow-sm">
+      {STEPS.map((label, i) => {
+        const step = i + 1;
+        const isCurrent = step === current;
+        const isComplete = completedSteps.has(step);
+        return (
+          <button
+            key={step}
+            type="button"
+            className={cn(
+              "flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-lg px-3 py-2 text-[12.5px] transition-colors",
+              isCurrent
+                ? "bg-[#2563eb] font-bold text-white"
+                : isComplete
+                  ? "bg-green-bg font-medium text-green"
+                  : "hover:bg-slate-bg",
+            )}
+            onClick={() => onGoto(step)}
+          >
+            <span
+              className={cn(
+                "flex h-5 w-5 items-center justify-center rounded-full text-[11px] font-bold",
+                isCurrent ? "bg-white/25" : isComplete ? "bg-green-bg text-green" : "bg-slate-bg text-muted",
+              )}
+            >
+              {isComplete ? <Check className="h-3 w-3" /> : faNum(step)}
+            </span>
+            {label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}