Fix date validations, datepicker overflow, and QC components

frontend/src/components/JalaliDatePicker.tsx

@@ -15,11 +15,11 @@ import { cn } from "../lib/utils";
 import { useClickOutside } from "./useClickOutside";
 
 export interface JalaliDatePickerProps {
-  value: string | null; // ISO date (یا YYYY-MM-DD با time اختیاری)
+  value: string | null;
   onChange: (val: string | null) => void;
   placeholder?: string;
   className?: string;
-  withTime?: boolean; // نمایش ساعت:دقیقه هم (پیشنهاد/پذیرش/رسید)
+  withTime?: boolean;
   disabled?: boolean;
 }
 
@@ -42,20 +42,16 @@ function isoToJalali(iso: string | null): [number, number, number] | null {
   return gregorianToJalali(d.getFullYear(), d.getMonth() + 1, d.getDate());
 }
 
-// ساخت ISO با زمان محلی (تاریخ شمسی + ساعت:دقیقه)
 function buildIso(jy: number, jm: number, jd: number, h: number, m: number): string {
   const [gy, gm, gd] = jalaliToGregorian(jy, jm, jd);
   return new Date(gy, gm - 1, gd, h, m).toISOString();
 }
 
-// ساخت تاریخ استاندارد YYYY-MM-DD بدون مؤلفه زمان
 function buildDateOnly(jy: number, jm: number, jd: number): string {
   const [gy, gm, gd] = jalaliToGregorian(jy, jm, jd);
   return `${gy}-${String(gm).padStart(2, "0")}-${String(gd).padStart(2, "0")}`;
 }
 
-// وقتی هنوز زمان مشخصی ست نشده، ساعت/دقیقه‌ی فعلی سیستم پیش‌فرض است
-// (نه ۰۰:۰۰) — دکمه‌ی «امروز» و انتخاب روز، همین زمان را نگه می‌دارند.
 function nowTime(): { h: number; m: number } {
   const d = new Date();
   return { h: d.getHours(), m: d.getMinutes() };
@@ -68,7 +64,6 @@ function timeOf(iso: string | null): { h: number; m: number } {
   return { h: d.getHours(), m: d.getMinutes() };
 }
 
-// تقویم شمسی — پورت Jalali.buildPicker به React (با پشتیبانی ساعت:دقیقه)
 export function JalaliDatePicker({
   value,
   onChange,
@@ -78,6 +73,7 @@ export function JalaliDatePicker({
   disabled = false,
 }: JalaliDatePickerProps) {
   const [open, setOpen] = useState(false);
+  const [alignment, setAlignment] = useState<"start" | "end">("start"); // تراز هوشمند
   const [curJ, setCurJ] = useState<[number, number, number]>(() => isoToJalali(value) ?? todayJalali());
   const initialTime = timeOf(value);
   const [hourText, setHourText] = useState<string>(() => faNum(String(initialTime.h).padStart(2, "0")));
@@ -111,7 +107,6 @@ export function JalaliDatePicker({
       const mm = String(t.m).padStart(2, "0");
       setText(`${j} ${faNum(hh + ":" + mm)}`);
 
-      // Only update local input texts if numeric values differ, to avoid wiping in-progress typing
       const curH = parseInt(toAsciiDigits(hourText) || "0", 10);
       if (curH !== t.h) {
         setHourText(faNum(hh));
@@ -127,7 +122,18 @@ export function JalaliDatePicker({
 
   const ref = useClickOutside<HTMLDivElement>(() => setOpen(false));
 
-  // تاریخ انتخاب‌شده به صورت محلی (نه UTC) برای مقایسه با سلول‌های تقویم
+  // تابع تشخیص موقعیت فیلد و تنظیم تراز تقویم
+  const handleOpen = () => {
+    if (disabled) return;
+    if (ref.current) {
+      const rect = ref.current.getBoundingClientRect();
+      const isLeftHalf = rect.left + rect.width / 2 < window.innerWidth / 2;
+      // اگر فیلد در نیمه چپ صفحه بود، تراز را از لبه چپ (end) می‌بندیم تا به سمت راست باز شود
+      setAlignment(isLeftHalf ? "end" : "start");
+    }
+    setOpen(true);
+  };
+
   function selectedLocalDate(): string | null {
     if (!value) return null;
     const m = String(value).match(/^(\d{4})-(\d{2})-(\d{2})$/);
@@ -141,7 +147,7 @@ export function JalaliDatePicker({
   const grid = useMemo(() => {
     const [jy, jm] = curJ;
     const firstG = jalaliToGregorian(jy, jm, 1);
-    const firstWd = (new Date(firstG[0], firstG[1] - 1, firstG[2]).getDay() + 1) % 7; // شنبه = 0
+    const firstWd = (new Date(firstG[0], firstG[1] - 1, firstG[2]).getDay() + 1) % 7;
     const dim = daysInMonth(jy, jm);
     const today = new Date();
     const tIso = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
@@ -190,11 +196,8 @@ export function JalaliDatePicker({
 
   const handleHourChange = (raw: string) => {
     let digits = toAsciiDigits(raw).replace(/\D/g, "");
-    if (digits.length === 3) {
+    if (digits.length === 3) digits = digits.slice(-1);
-      digits = digits.slice(-1);
+    else if (digits.length > 3) digits = digits.slice(0, 2);
-    } else if (digits.length > 3) {
-      digits = digits.slice(0, 2);
-    }
     if (!digits) {
       setHourText("");
       return;
@@ -228,11 +231,8 @@ export function JalaliDatePicker({
 
   const handleMinuteChange = (raw: string) => {
     let digits = toAsciiDigits(raw).replace(/\D/g, "");
-    if (digits.length === 3) {
+    if (digits.length === 3) digits = digits.slice(-1);
-      digits = digits.slice(-1);
+    else if (digits.length > 3) digits = digits.slice(0, 2);
-    } else if (digits.length > 3) {
-      digits = digits.slice(0, 2);
-    }
     if (!digits) {
       setMinuteText("");
       return;
@@ -269,11 +269,7 @@ export function JalaliDatePicker({
     const [jy, jm, jd] = todayJalali();
     const nh = now.getHours();
     const nm = now.getMinutes();
-    setHourText(faNum(String(nh).padStart(2, "0")));
+    const val = withTime ? buildIso(jy, jm, jd, nh, nm) : buildDateOnly(jy, jm, jd);
-    setMinuteText(faNum(String(nm).padStart(2, "0")));
-    const val = withTime
-      ? buildIso(jy, jm, jd, nh, nm)
-      : buildDateOnly(jy, jm, jd);
     onChange(val);
     setText(
       withTime
@@ -364,7 +360,7 @@ export function JalaliDatePicker({
   };
 
   return (
-    <div ref={ref} className={cn("relative", className)}>
+    <div ref={ref} className={cn("relative w-full", className)}>
       <input
         type="text"
         disabled={disabled}
@@ -372,43 +368,45 @@ export function JalaliDatePicker({
         value={text}
         placeholder={placeholder ?? "۱۴۰۳/۰۵/۱۲"}
         autoComplete="off"
-        onFocus={() => !disabled && setOpen(true)}
+        onFocus={handleOpen}
-        onClick={() => !disabled && setOpen(true)}
+        onClick={handleOpen}
         onChange={(e) => onInputChange(e.target.value)}
         onBlur={handleInputBlur}
       />
       {open && !disabled && (
         <div
           className={cn(
-            "absolute inset-x-0 top-full z-30 mt-1 rounded-md border border-line bg-panel shadow-md",
+            // پاپ‌آپ مطلق که بر اساس کلاس تراز تنظیم می‌شود
-            // حداکثر عرض = viewport (موبایل باریک سرریز نمی‌شود؛ دسکتاپ بی‌تغییر)
+            "absolute top-full z-[100] mt-1",
-            "max-w-[calc(100vw-2rem)]",
+            alignment === "start" ? "start-0" : "end-0", // اگر فیلد چپ بود -> end-0 (تراز چپ) | اگر راست بود -> start-0 (تراز راست)
-            withTime ? "w-80 p-3" : "w-64 p-2",
+            "rounded-xl border border-line bg-panel shadow-2xl p-3.5",
+            withTime ? "w-80" : "w-[280px]",
+            "max-w-[calc(100vw-2rem)]" // حاشیه امنیت برای صفحه نمایش خیلی کوچک
           )}
         >
           {/* 1. Header: Month / Year Navigation */}
-          <div className="mb-1.5 flex items-center justify-between gap-1">
+          <div className="mb-2 flex items-center justify-between gap-1">
-            <button type="button" className="cursor-pointer rounded px-1.5 text-sm hover:bg-slate-bg" onClick={() => nav("y+1")}>
+            <button type="button" className="cursor-pointer rounded p-1 text-sm hover:bg-slate-bg" onClick={() => nav("y+1")}>
               «
             </button>
-            <button type="button" className="cursor-pointer rounded px-1.5 text-sm hover:bg-slate-bg" onClick={() => nav("m+1")}>
+            <button type="button" className="cursor-pointer rounded p-1 text-sm hover:bg-slate-bg" onClick={() => nav("m+1")}>
               ‹
             </button>
-            <span className="text-[13px] font-bold">
+            <span className="text-sm font-bold">
               {MONTHS[curJ[1] - 1]} {toFa(curJ[0])}
             </span>
-            <button type="button" className="cursor-pointer rounded px-1.5 text-sm hover:bg-slate-bg" onClick={() => nav("m-1")}>
+            <button type="button" className="cursor-pointer rounded p-1 text-sm hover:bg-slate-bg" onClick={() => nav("m-1")}>
               ›
             </button>
-            <button type="button" className="cursor-pointer rounded px-1.5 text-sm hover:bg-slate-bg" onClick={() => nav("y-1")}>
+            <button type="button" className="cursor-pointer rounded p-1 text-sm hover:bg-slate-bg" onClick={() => nav("y-1")}>
               »
             </button>
           </div>
 
           {/* 2. Day of Week Header & Days Grid */}
-          <div className="grid grid-cols-7 gap-0.5 text-center">
+          <div className="grid grid-cols-7 gap-1 text-center">
             {WEEKDAYS.map((w) => (
-              <div key={w} className="py-0.5 text-[10px] font-bold text-muted">
+              <div key={w} className="py-1 text-[11px] font-bold text-muted">
                 {w}
               </div>
             ))}
@@ -420,7 +418,7 @@ export function JalaliDatePicker({
                   key={i}
                   type="button"
                   className={cn(
-                    "cursor-pointer rounded py-0.5 text-[12px] hover:bg-slate-bg max-md:py-1.5",
+                    "cursor-pointer rounded-lg py-2 text-[13px] hover:bg-slate-bg transition-colors",
                     cell.isToday && !selectedIso && "bg-blue-bg font-bold text-[#1d4ed8]",
                     cell.isToday && selectedIso && "font-bold text-[#1d4ed8]",
                     cell.iso === selectedIso && "bg-accent text-white hover:bg-accent-dark",
@@ -433,44 +431,43 @@ export function JalaliDatePicker({
             )}
           </div>
 
-          {/* 3. Time Inputs Row (Positioned BELOW the calendar grid) — Hour on left, Minute on right */}
+          {/* 3. Time Inputs Row */}
           {withTime && (
-            <div className="mt-2 flex items-center justify-center gap-3 rounded-md border border-line/70 bg-slate-bg/40 py-1.5">
+            <div className="mt-3 flex items-center justify-center gap-3 rounded-lg border border-line/70 bg-slate-bg/40 py-2">
               <div className="flex items-center gap-1.5">
                 <input
                   type="text"
-                  className="num-input h-7 w-12 rounded-md border border-line bg-panel px-1 text-center text-[13px] tabular-nums focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 max-md:h-9 max-md:w-14"
+                  className="num-input h-8 w-14 rounded-md border border-line bg-panel px-1 text-center text-sm tabular-nums focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
                   value={minuteText}
                   inputMode="numeric"
                   onFocus={(e) => e.target.select()}
                   onChange={(e) => handleMinuteChange(e.target.value)}
                   onBlur={handleMinuteBlur}
                 />
-                <span className="text-[11.5px] font-semibold text-muted">دقیقه</span>
+                <span className="text-xs font-semibold text-muted">دقیقه</span>
               </div>
               <span className="font-bold text-muted">:</span>
               <div className="flex items-center gap-1.5">
                 <input
                   type="text"
-                  className="num-input h-7 w-12 rounded-md border border-line bg-panel px-1 text-center text-[13px] tabular-nums focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 max-md:h-9 max-md:w-14"
+                  className="num-input h-8 w-14 rounded-md border border-line bg-panel px-1 text-center text-sm tabular-nums focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
                   value={hourText}
                   inputMode="numeric"
                   onFocus={(e) => e.target.select()}
                   onChange={(e) => handleHourChange(e.target.value)}
                   onBlur={handleHourBlur}
                 />
-                <span className="text-[11.5px] font-semibold text-muted">ساعت</span>
+                <span className="text-xs font-semibold text-muted">ساعت</span>
               </div>
             </div>
           )}
 
-
           {/* 4. Action Buttons Footer */}
-          <div className="mt-2 flex justify-between border-t border-line pt-2">
+          <div className="mt-3 flex justify-between border-t border-line pt-2">
-            <button type="button" className="cursor-pointer rounded px-2 py-0.5 text-[11.5px] text-accent hover:bg-slate-bg" onClick={pickToday}>
+            <button type="button" className="cursor-pointer rounded px-3 py-1 text-xs font-medium text-accent hover:bg-slate-bg" onClick={pickToday}>
               امروز
             </button>
-            <button type="button" className="cursor-pointer rounded px-2 py-0.5 text-[11.5px] text-muted hover:bg-slate-bg" onClick={clear}>
+            <button type="button" className="cursor-pointer rounded px-3 py-1 text-xs font-medium text-muted hover:bg-slate-bg" onClick={clear}>
               پاک کردن
             </button>
           </div>

pm/frontend/src/components/TaskEditModal.tsx

@@ -87,6 +87,15 @@ export function TaskEditModal({
   const [errorMsg, setErrorMsg] = useState("");
   const [showConfirmDelete, setShowConfirmDelete] = useState(false);
 
+  // بررسی زنده برای کوچکتر بودن تاریخ پایان از شروع
+  const isDateRangeInvalid = Boolean(
+    plannedStart &&
+      plannedEnd &&
+      isoToApiDate(plannedStart) &&
+      isoToApiDate(plannedEnd) &&
+      isoToApiDate(plannedStart)! > isoToApiDate(plannedEnd)!
+  );
+
   useEffect(() => {
     if (open && task) {
       setTitle(task.title || task.subject || "");
@@ -112,7 +121,7 @@ export function TaskEditModal({
 
   const taskId = task ? String(task.id || task.op_wp_id) : "";
 
-  // لیست والدهای مجاز (حذف خود تسک و تمام زیرتسک‌های آن برای جلوگیری از حلقه)
+  // لیست والدهای مجاز
   const validParents = useMemo(() => {
     if (!taskId) return allTasks;
     const descendantIds = getDescendantIds(allTasks, taskId);
@@ -122,12 +131,11 @@ export function TaskEditModal({
     });
   }, [allTasks, taskId]);
 
-  // لیست وظایف مجاز جهت برقراری رابطه وابستگی (حذف خود تسک)
+  // لیست وظایف مجاز جهت برقراری رابطه وابستگی
   const validRelationTargets = useMemo(() => {
     return allTasks.filter((t) => String(t.id || t.op_wp_id) !== taskId);
   }, [allTasks, taskId]);
 
-  // کوئری روابط پروژه جهت استخراج روابط ورودی و خروجی این وظیفه
   const relationsQuery = useQuery({
     queryKey: ["project-relations", projectId],
     queryFn: () => getProjectRelations(projectId),
@@ -161,7 +169,7 @@ export function TaskEditModal({
       void queryClient.invalidateQueries({ queryKey: ["task", taskId] });
     },
     onError: (err: any) => {
-      toast.error(err?.message || "خطا در ایجاد رابطه وابستگی (احتمال وجود دور یا ورودی تکراری)");
+      toast.error(err?.message || "خطا در ایجاد رابطه وابستگی");
     },
   });
 
@@ -179,12 +187,9 @@ export function TaskEditModal({
     },
   });
 
-  /** Save the whole form. Progress goes to its own endpoint (see below). */
   const updateMutation = useMutation({
     mutationFn: async (payload: UpdateTaskPayload) => {
       await updateTask(task!.id || task!.op_wp_id, payload);
-      // progress is NOT part of the task patch schema — it has its own endpoint,
-      // which also enforces the QC gating rules server-side
       if (typeof progress === "number" && progress !== (task!.progress ?? task!.percentage_done ?? 0)) {
         await updateTaskProgress(task!.id || task!.op_wp_id, progress);
       }
@@ -232,7 +237,6 @@ export function TaskEditModal({
     const startIso = isoToApiDate(plannedStart);
     const endIso = isoToApiDate(plannedEnd);
 
-    // ۱. اجباری بودن تاریخ شروع و پایان
     if (!startIso) {
       setErrorMsg("وارد کردن تاریخ شروع وظیفه الزامی است");
       return;
@@ -242,13 +246,11 @@ export function TaskEditModal({
       return;
     }
 
-    // ۲. تاریخ شروع نباید از تاریخ پایان جلوتر باشد
     if (startIso > endIso) {
-      setErrorMsg("تاریخ شروع وظیفه نمی‌تواند بعد از تاریخ اتمام آن باشد");
+      setErrorMsg("تاریخ پایان نمی‌تواند کمتر از تاریخ شروع باشد");
       return;
     }
 
-    // ۲. محدودیت نسبت به والد انتخابی
     if (parentId) {
       const selectedParent = allTasks.find(
         (t) => String(t.id || t.op_wp_id) === String(parentId)
@@ -281,7 +283,6 @@ export function TaskEditModal({
       }
     }
 
-    // ۳. محدودیت نسبت به فرزندان موجود
     const children = allTasks.filter((t) => {
       const p = t.parent_id
         ? String(t.parent_id)
@@ -443,7 +444,6 @@ export function TaskEditModal({
           </div>
         </div>
 
-
         <div className="grid grid-cols-2 gap-2">
           <div>
             <label className="mb-1 block text-xs font-semibold text-slate-600">
@@ -483,6 +483,14 @@ export function TaskEditModal({
           </div>
         </div>
 
+        {/* کادر اخطار بلادرنگ در صورت نامعتبر بودن بازه زمانی */}
+        {isDateRangeInvalid && (
+          <div className="flex items-center gap-2 rounded-xl border border-rose-200 bg-rose-50 p-2.5 text-xs font-bold text-rose-600">
+            <AlertTriangle size={15} className="shrink-0 text-rose-500" />
+            <span>تاریخ پایان نمی‌تواند کمتر از تاریخ شروع باشد</span>
+          </div>
+        )}
+
         <div className="rounded-xl border border-slate-200 bg-slate-50 p-2.5 text-xs">
           <p className="font-semibold text-slate-700 mb-1">تاریخ‌های واقعی (محاسبه و ثبت خودکار):</p>
           <div className="grid grid-cols-2 gap-2 text-slate-600">
@@ -550,7 +558,6 @@ export function TaskEditModal({
           setMaterials={setMaterials}
         />
 
-        {/* بخش روابط پیش‌نیازی و وابستگی‌ها (FS, SS, FF, SF) */}
         <div className="rounded-xl border border-slate-200 bg-slate-50/60 p-3 space-y-3">
           <div className="flex items-center justify-between border-b border-slate-200 pb-2">
             <span className="text-xs font-bold text-slate-700 flex items-center gap-1.5">
@@ -564,7 +571,6 @@ export function TaskEditModal({
             )}
           </div>
 
-          {/* لیست وابستگی‌های موجود */}
           <div className="space-y-1.5">
             {currentTaskRelations.length === 0 ? (
               <p className="py-2 text-center text-xs text-slate-400">
@@ -619,7 +625,6 @@ export function TaskEditModal({
             )}
           </div>
 
-          {/* فرم افزودن رابطه جدید */}
           <div className="pt-2 border-t border-slate-200/80 space-y-2">
             <span className="text-[11px] font-bold text-slate-700 block">افزودن رابطه وابستگی جدید</span>
             <div className="grid grid-cols-1 sm:grid-cols-12 gap-2">
@@ -723,7 +728,7 @@ export function TaskEditModal({
             </button>
             <button
               type="submit"
-              disabled={updateMutation.isPending}
+              disabled={updateMutation.isPending || isDateRangeInvalid}
               className={btnPrimary}
             >
               {updateMutation.isPending ? "در حال ذخیره..." : "ذخیره تغییرات"}

pm/frontend/src/components/TaskQcSection.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import {
@@ -48,7 +48,7 @@ export function TaskQcSection({ task, canExecuteQc, canDefineQc }: TaskQcSection
   const [defectToResolve, setDefectToResolve] = useState<Defect | null>(null);
   const [resolutionNotes, setResolutionNotes] = useState("");
 
-  // Load Task QC Data
+  // دریافت اطلاعات QC وظیفه
   const qcQuery = useQuery({
     queryKey: ["task-qc", taskId],
     queryFn: () => getTaskQc(taskId),
@@ -66,7 +66,50 @@ export function TaskQcSection({ task, canExecuteQc, canDefineQc }: TaskQcSection
   const questions = definitions.flatMap((d) => d.questions);
   const selectedTemplate = (templatesQuery.data ?? []).find((t) => t.id === selectedTemplateId) ?? null;
 
-  // Mutations
+  // محاسبه زنده و دقیق آمار هر مرحله بر اساس لیست واقعی سوالات
+  const preStats = useMemo(() => {
+    if (questions.length > 0) {
+      const list = questions.filter((q) => q.phase === "pre");
+      return {
+        total: list.length,
+        passed: list.filter((q) => q.result?.answer === "pass" || q.result?.answer === "na").length,
+      };
+    }
+    return {
+      total: readiness?.pre?.total ?? 0,
+      passed: readiness?.pre?.passed ?? 0,
+    };
+  }, [questions, readiness?.pre]);
+
+  const duringStats = useMemo(() => {
+    if (questions.length > 0) {
+      const list = questions.filter((q) => q.phase === "during");
+      return {
+        total: list.length,
+        passed: list.filter((q) => q.result?.answer === "pass" || q.result?.answer === "na").length,
+      };
+    }
+    return {
+      total: readiness?.exec?.total ?? 0,
+      passed: readiness?.exec?.passed ?? 0,
+    };
+  }, [questions, readiness?.exec]);
+
+  const afterStats = useMemo(() => {
+    if (questions.length > 0) {
+      const list = questions.filter((q) => q.phase === "after");
+      return {
+        total: list.length,
+        passed: list.filter((q) => q.result?.answer === "pass" || q.result?.answer === "na").length,
+      };
+    }
+    return {
+      total: (readiness as any)?.after?.total ?? 0,
+      passed: (readiness as any)?.after?.passed ?? 0,
+    };
+  }, [questions, readiness]);
+
+  // جهش‌ها (Mutations)
   const invalidateQc = () => {
     void queryClient.invalidateQueries({ queryKey: ["task-qc", taskId] });
     void queryClient.invalidateQueries({ queryKey: ["task", taskId] });
@@ -93,7 +136,6 @@ export function TaskQcSection({ task, canExecuteQc, canDefineQc }: TaskQcSection
   const handleToggleAnswer = (questionId: string, currentAnswer: string | null | undefined, newAnswer: AnswerValue) => {
     if (!canExecuteQc || answerMutation.isPending) return;
     if (currentAnswer === newAnswer) {
-      // کلیک مجدد: لغو انتخاب قبلی
       answerMutation.mutate({ questionId, answer: null });
     } else {
       answerMutation.mutate({ questionId, answer: newAnswer });
@@ -158,18 +200,15 @@ export function TaskQcSection({ task, canExecuteQc, canDefineQc }: TaskQcSection
     },
   });
 
-  // Calculate Progress
+  // محاسبه پیشرفت کل چک‌لیست
-  const totalQuestions = readiness?.all.total ?? questions.length;
+  const totalQuestions = questions.length > 0 ? questions.length : (readiness?.all.total ?? 0);
-  const pendingCount = readiness?.all.pending ?? 0;
+  const answeredCount = questions.length > 0
-  const answeredCount = totalQuestions - pendingCount;
+    ? questions.filter((q) => q.result?.answer != null).length
+    : (totalQuestions - (readiness?.all.pending ?? 0));
   const qcPercent = totalQuestions > 0 ? Math.round((answeredCount / totalQuestions) * 100) : 0;
 
   const currentPhaseQuestions = questions.filter((q) => q.phase === activePhase);
 
-  // Group stats by phase
-  const preStats = readiness?.pre;
-  const execStats = readiness?.exec;
-
   return (
     <div className="space-y-3.5">
       {/* 1. بنر وضعیت آمادگی شروع و اتمام کار */}
@@ -206,12 +245,13 @@ export function TaskQcSection({ task, canExecuteQc, canDefineQc }: TaskQcSection
             </div>
           )}
 
-          {/* نوار پیشرفت کلی QC */}
           {totalQuestions > 0 && (
             <div className="mt-2.5">
               <div className="flex items-center justify-between text-[11px] text-slate-500 mb-1">
                 <span>پیشرفت بازرسی‌های کیفی</span>
-                <span className="font-bold tabular-nums text-slate-700">{qcPercent}٪ ({answeredCount} از {totalQuestions})</span>
+                <span className="font-bold tabular-nums text-slate-700">
+                  {qcPercent}٪ ({answeredCount} از {totalQuestions})
+                </span>
               </div>
               <ProgressBar value={qcPercent} />
             </div>
@@ -252,52 +292,72 @@ export function TaskQcSection({ task, canExecuteQc, canDefineQc }: TaskQcSection
           </div>
         </div>
 
-        {/* ۳ تب فازها: پیش از اجرا / حین اجرا / پس از اجرا */}
+        {/* ۳ تب فازها با عرض مساوی و شمارنده دقیق */}
-        <div className="flex rounded-lg bg-slate-200/80 p-0.5 text-xs font-semibold text-slate-600">
+        <div className="grid grid-cols-3 gap-1 rounded-lg bg-slate-200/80 p-1 text-xs font-semibold text-slate-600">
           <button
             type="button"
             onClick={() => setActivePhase("pre")}
-            className={`flex-1 rounded-md py-1.5 text-center transition-all ${
+            className={`min-w-0 rounded-md py-1.5 px-1 text-center transition-all flex items-center justify-center gap-1 ${
               activePhase === "pre"
                 ? "bg-white text-amber-800 shadow-sm font-bold"
                 : "text-slate-600 hover:text-slate-800"
             }`}
           >
-            <span>۱. پیش از اجرا</span>
+            <span className="truncate">۱. پیش از اجرا</span>
-            {preStats && preStats.total > 0 && (
+            <span
-              <span className={`ms-1.5 rounded-full px-1.5 py-0.2 text-[10px] ${activePhase === "pre" ? "bg-amber-100 text-amber-800" : "bg-slate-300 text-slate-700"}`}>
+              className={`rounded-full px-1.5 py-0.2 text-[10px] tabular-nums shrink-0 ${
+                activePhase === "pre"
+                  ? "bg-amber-100 text-amber-800 font-bold"
+                  : "bg-slate-300 text-slate-700"
+              }`}
+            >
               {preStats.passed}/{preStats.total}
             </span>
-            )}
           </button>
 
           <button
             type="button"
             onClick={() => setActivePhase("during")}
-            className={`flex-1 rounded-md py-1.5 text-center transition-all ${
+            className={`min-w-0 rounded-md py-1.5 px-1 text-center transition-all flex items-center justify-center gap-1 ${
               activePhase === "during"
                 ? "bg-white text-sky-800 shadow-sm font-bold"
                 : "text-slate-600 hover:text-slate-800"
             }`}
           >
-            <span>۲. حین اجرا</span>
+            <span className="truncate">۲. حین اجرا</span>
-            {execStats && execStats.total > 0 && (
+            <span
-              <span className={`ms-1.5 rounded-full px-1.5 py-0.2 text-[10px] ${activePhase === "during" ? "bg-sky-100 text-sky-800" : "bg-slate-300 text-slate-700"}`}>
+              className={`rounded-full px-1.5 py-0.2 text-[10px] tabular-nums shrink-0 ${
-                {execStats.passed}/{execStats.total}
+                activePhase === "during"
+                  ? "bg-sky-100 text-sky-800 font-bold"
+                  : "bg-slate-300 text-slate-700"
+              }`}
+            >
+              {duringStats.passed}/{duringStats.total}
             </span>
-            )}
           </button>
 
           <button
             type="button"
             onClick={() => setActivePhase("after")}
-            className={`flex-1 rounded-md py-1.5 text-center transition-all ${
+            className={`min-w-0 rounded-md py-1.5 px-1 text-center transition-all flex items-center justify-center gap-1 ${
               activePhase === "after"
                 ? "bg-white text-emerald-800 shadow-sm font-bold"
                 : "text-slate-600 hover:text-slate-800"
             }`}
           >
-            <span>۳. تحویل و پس از اجرا</span>
+            <span className="truncate">
+              <span className="sm:hidden">۳. پس از اجرا</span>
+              <span className="hidden sm:inline">۳. تحویل و پس از اجرا</span>
+            </span>
+            <span
+              className={`rounded-full px-1.5 py-0.2 text-[10px] tabular-nums shrink-0 ${
+                activePhase === "after"
+                  ? "bg-emerald-100 text-emerald-800 font-bold"
+                  : "bg-slate-300 text-slate-700"
+              }`}
+            >
+              {afterStats.passed}/{afterStats.total}
+            </span>
           </button>
         </div>
 
@@ -363,12 +423,11 @@ export function TaskQcSection({ task, canExecuteQc, canDefineQc }: TaskQcSection
                     )}
                   </div>
 
-                  {/* دکمه‌های پاسخ فوری ۳ گانه */}
+                  {/* دکمه‌های ۳ گانه پاسخ */}
                   <div className="mt-2.5 flex items-center justify-between gap-2 pt-2 border-t border-slate-100">
                     <span className="text-[11px] text-slate-500">وضعیت بازرسی:</span>
 
                     <div className="flex items-center gap-1">
-                      {/* دکمه قبول / Pass */}
                       <button
                         type="button"
                         disabled={!canExecuteQc || answerMutation.isPending}
@@ -383,7 +442,6 @@ export function TaskQcSection({ task, canExecuteQc, canDefineQc }: TaskQcSection
                         <span>قبول</span>
                       </button>
 
-                      {/* دکمه رد / Fail */}
                       <button
                         type="button"
                         disabled={!canExecuteQc || answerMutation.isPending}
@@ -398,7 +456,6 @@ export function TaskQcSection({ task, canExecuteQc, canDefineQc }: TaskQcSection
                         <span>مردود</span>
                       </button>
 
-                      {/* دکمه مطرح نیست */}
                       <button
                         type="button"
                         disabled={!canExecuteQc || answerMutation.isPending}
@@ -415,7 +472,7 @@ export function TaskQcSection({ task, canExecuteQc, canDefineQc }: TaskQcSection
                     </div>
                   </div>
 
-                  {/* در صورت قبول بودن: اکشن آپلود عکس تأییدیه */}
+                  {/* در صورت قبول بودن: امکان آپلود تصویر مستند */}
                   {latestAns === "pass" && (
                     <div className="mt-2 rounded-lg bg-emerald-50/70 p-2 text-xs border border-emerald-100 space-y-1.5">
                       <div className="flex items-center justify-between">

pm/frontend/src/pages/ProjectDetailPage.tsx

@@ -3,6 +3,7 @@ import { Link, useNavigate, useParams } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import {
+  AlertTriangle,
   BarChart3,
   Calendar,
   ChevronDown,
@@ -15,21 +16,15 @@ import {
   RefreshCw,
   Search,
   Trash2,
-  UserPlus,
-  Users,
 } from "lucide-react";
 import {
-  addProjectMember,
   createTask,
   createTaskRelation,
   deleteTaskRelation,
   getProject,
   getProjectGantt,
   getTasks,
-  getUsers,
-  removeProjectMember,
   rescheduleProject,
-  updateProject,
   updateTask,
   updateTaskRelation,
 } from "../lib/api";
@@ -38,7 +33,6 @@ import type {
   CreateTaskPayload,
   HumanResourceItem,
   MaterialItem,
-  ProjectMember,
   Task,
   TaskRelation,
   UpdateRelationPayload,
@@ -50,7 +44,6 @@ import {
   Chip,
   EmptyState,
   ErrorState,
-  InitialAvatar,
   Modal,
   PageHeader,
   ProgressBar,
@@ -142,7 +135,6 @@ function TreeRow({
   const displayTitle = t.title || t.subject;
   const targetUrl = `/tasks/${t.id || t.op_wp_id}`;
   const progress = t.progress ?? t.percentage_done ?? 0;
-  // رنگ درصد: ۱۰۰٪ سبز، در حال انجام آبی، صفر خاکستری
   const progressCls =
     progress >= 100 ? "text-emerald-600" : progress > 0 ? "text-sky-600" : "text-slate-400";
 
@@ -171,7 +163,6 @@ function TreeRow({
                 <span className="min-w-0 truncate text-[13px] font-medium leading-5 text-slate-800 group-hover:text-sky-600 transition-colors">
                   {displayTitle}
                 </span>
-                {/* درصد تکمیل — بلافاصله سمت چپ نام و بالای نوار پیشرفت */}
                 <span className={`shrink-0 text-[13px] font-bold tabular-nums ${progressCls}`}>
                   {progress}٪
                 </span>
@@ -260,7 +251,6 @@ function TaskCreateModal({
   const [materials, setMaterials] = useState<MaterialItem[]>([]);
   const [errorMsg, setErrorMsg] = useState("");
 
-  // روابط پیش‌نیازی و وابستگی‌ها (FS, SS, FF, SF)
   interface DraftRelation {
     target_task_id: string;
     target_task_title: string;
@@ -272,7 +262,16 @@ function TaskCreateModal({
   const [relTargetId, setRelTargetId] = useState("");
   const [relDirection, setRelDirection] = useState<"predecessor" | "successor">("predecessor");
   const [relType, setRelType] = useState<"FS" | "SS" | "FF" | "SF">("FS");
-  const [relLag, setRelLag] = useState<number>(0);
+  const [relLag, setRelLag] = useState<number | "">("");
+
+  // بررسی زنده برای کوچکتر بودن تاریخ پایان از شروع
+  const isDateRangeInvalid = Boolean(
+    plannedStart &&
+      plannedEnd &&
+      isoToApiDate(plannedStart) &&
+      isoToApiDate(plannedEnd) &&
+      isoToApiDate(plannedStart)! > isoToApiDate(plannedEnd)!
+  );
 
   useEffect(() => {
     if (open) {
@@ -280,7 +279,7 @@ function TaskCreateModal({
       setSelectedChildIds([]);
       setDraftRelations([]);
       setRelTargetId("");
-      setRelLag(0);
+      setRelLag("");
       setErrorMsg("");
     }
   }, [open, parentTask]);
@@ -290,7 +289,6 @@ function TaskCreateModal({
       const created = await createTask(payload);
       const newTaskId = String(created.id || (created as any).data?.id || (created as any).op_wp_id);
 
-      // ۱. انتساب وظایف انتخاب شده به عنوان فرزندان (زیرتسک‌ها)
       if (selectedChildIds.length > 0 && newTaskId) {
         for (const childId of selectedChildIds) {
           try {
@@ -301,7 +299,6 @@ function TaskCreateModal({
         }
       }
 
-      // ۲. ایجاد روابط وابستگی تعریف شده (FS, SS, FF, SF)
       if (draftRelations.length > 0 && newTaskId) {
         for (const rel of draftRelations) {
           try {
@@ -356,7 +353,6 @@ function TaskCreateModal({
     const startIso = isoToApiDate(plannedStart);
     const endIso = isoToApiDate(plannedEnd);
 
-    // ۱. اجباری بودن تاریخ شروع و پایان
     if (!startIso) {
       setErrorMsg("وارد کردن تاریخ شروع وظیفه الزامی است");
       return;
@@ -366,13 +362,11 @@ function TaskCreateModal({
       return;
     }
 
-    // ۲. تاریخ شروع نباید از تاریخ پایان جلوتر باشد
     if (startIso > endIso) {
-      setErrorMsg("تاریخ شروع وظیفه نمی‌تواند بعد از تاریخ اتمام آن باشد");
+      setErrorMsg("تاریخ پایان نمی‌تواند کمتر از تاریخ شروع باشد");
       return;
     }
 
-    // ۳. انطباق با تاریخ‌های والد انتخابی
     const activeParent = selectedParentId
       ? allTasks.find((t) => String(t.id || t.op_wp_id) === selectedParentId)
       : null;
@@ -419,7 +413,6 @@ function TaskCreateModal({
     });
   };
 
-  // وظایف کاندید برای فرزند بودن (به جز والدی که هم‌اکنون انتخاب شده)
   const candidateChildren = allTasks.filter(
     (t) => String(t.id || t.op_wp_id) !== selectedParentId
   );
@@ -444,7 +437,6 @@ function TaskCreateModal({
           />
         </div>
 
-        {/* ۱. تعیین وظیفه والد (PARENT) */}
         <div>
           <label className="mb-1 block text-xs font-semibold text-slate-600">
             وظیفه والد (سطح بالاتر - Parent)
@@ -472,7 +464,6 @@ function TaskCreateModal({
           </select>
         </div>
 
-        {/* ۲. تعیین زیرتسک‌ها و فرزندان (CHILD) */}
         <div className="rounded-xl border border-slate-200 bg-slate-50/60 p-3 space-y-2">
           <div className="flex items-center justify-between">
             <label className="text-xs font-bold text-slate-700">
@@ -576,6 +567,14 @@ function TaskCreateModal({
           </div>
         </div>
 
+        {/* ارور در صورت کمتر بودن تاریخ پایان از شروع */}
+        {isDateRangeInvalid && (
+          <div className="flex items-center gap-2 rounded-xl border border-rose-200 bg-rose-50 p-2.5 text-xs font-bold text-rose-600">
+            <AlertTriangle size={15} className="shrink-0 text-rose-500" />
+            <span>تاریخ پایان نمی‌تواند کمتر از تاریخ شروع باشد</span>
+          </div>
+        )}
+
         <div>
           <label className="mb-1 block text-xs font-semibold text-slate-600">مدت زمان برآورد شده (روز)</label>
           <input
@@ -595,8 +594,9 @@ function TaskCreateModal({
               setPlannedEnd(next.end);
               setDurationDays(next.days);
             }}
+            onFocus={(e) => e.target.select()}
             placeholder="مثال: ۵"
-            className={inputCls}
+            className={`${inputCls} [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`}
           />
           <p className="mt-1 text-[11px] leading-4 text-slate-400">
             روز، تاریخ پایان را می‌سازد: شروع ۱۶ مرداد و ۴ روز ⇒ پایان ۲۰ مرداد.
@@ -621,7 +621,6 @@ function TaskCreateModal({
           setMaterials={setMaterials}
         />
 
-        {/* ۳. تعریف روابط وابستگی (FS, SS, FF, SF + lag) در تعریف وظیفه */}
         <div className="rounded-xl border border-slate-200 bg-slate-50/60 p-3 space-y-3">
           <div className="flex items-center justify-between border-b border-slate-200 pb-2">
             <span className="text-xs font-bold text-slate-700 flex items-center gap-1.5">
@@ -635,7 +634,6 @@ function TaskCreateModal({
             )}
           </div>
 
-          {/* لیست روابط پیش‌نویس */}
           {draftRelations.length > 0 && (
             <div className="space-y-1.5">
               {draftRelations.map((r, idx) => (
@@ -672,7 +670,6 @@ function TaskCreateModal({
             </div>
           )}
 
-          {/* فرم افزودن رابطه پیش‌نویس */}
           <div className="grid grid-cols-1 sm:grid-cols-12 gap-2 pt-1 border-t border-slate-200/80">
             <div className="sm:col-span-4">
               <label className="text-[10px] font-medium text-slate-500 block mb-0.5">وظیفه مرتبط</label>
@@ -724,8 +721,13 @@ function TaskCreateModal({
               <input
                 type="number"
                 value={relLag}
-                onChange={(e) => setRelLag(parseInt(e.target.value) || 0)}
+                onChange={(e) => {
-                className="h-8 w-full rounded-md border border-slate-300 px-2 text-xs text-slate-800 focus:border-sky-500 focus:outline-none"
+                  const val = e.target.value;
+                  setRelLag(val === "" ? "" : Number(val));
+                }}
+                onFocus={(e) => e.target.select()}
+                placeholder="0"
+                className="h-8 w-full rounded-md border border-slate-300 px-2 text-xs text-slate-800 focus:border-sky-500 focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
               />
             </div>
           </div>
@@ -747,11 +749,11 @@ function TaskCreateModal({
                   target_task_title: targetTask?.title || targetTask?.subject || "وظیفه",
                   direction: relDirection,
                   relation_type: relType,
-                  lag_days: relLag,
+                  lag_days: Number(relLag) || 0,
                 },
               ]);
               setRelTargetId("");
-              setRelLag(0);
+              setRelLag("");
             }}
             className="inline-flex h-7 items-center justify-center gap-1 rounded-lg border border-sky-300 bg-sky-50 px-2.5 text-[11px] font-semibold text-sky-700 hover:bg-sky-100 transition-colors"
           >
@@ -764,7 +766,11 @@ function TaskCreateModal({
           <button type="button" onClick={onClose} className={btnSecondary}>
             انصراف
           </button>
-          <button type="submit" disabled={createMutation.isPending} className={btnPrimary}>
+          <button
+            type="submit"
+            disabled={createMutation.isPending || isDateRangeInvalid}
+            className={btnPrimary}
+          >
             {createMutation.isPending ? "در حال ثبت..." : "افزودن وظیفه"}
           </button>
         </div>
@@ -785,7 +791,6 @@ function CreateRelationModal({
   projectId: string;
   tasks: Task[];
   initialFromTaskId: string | null;
-  /** در حالت ویرایش: وابستگی موجود؛ دو سر وابستگی تغییرناپذیرند */
   editRelation?: TaskRelation | null;
   onClose: () => void;
 }) {
@@ -794,24 +799,32 @@ function CreateRelationModal({
   const [fromTaskId, setFromTaskId] = useState(initialFromTaskId || "");
   const [toTaskId, setToTaskId] = useState("");
   const [relationType, setRelationType] = useState<"FS" | "SS" | "FF" | "SF">("FS");
-  const [lagDays, setLagDays] = useState(0);
+  const [lagDays, setLagDays] = useState<number | "">("");
   const [errorMsg, setErrorMsg] = useState("");
 
   useEffect(() => {
     if (initialFromTaskId) setFromTaskId(initialFromTaskId);
   }, [initialFromTaskId]);
 
-  // در حالت ویرایش، فرم با مقادیر فعلی وابستگی پر می‌شود
   useEffect(() => {
     if (!open) return;
     if (editRelation) {
       setFromTaskId(editRelation.from_task_id);
       setToTaskId(editRelation.to_task_id);
       setRelationType(editRelation.relation_type);
-      setLagDays(editRelation.lag_days || 0);
+      setLagDays(
+        editRelation.lag_days !== undefined && editRelation.lag_days !== null
+          ? editRelation.lag_days
+          : ""
+      );
+    } else {
+      setFromTaskId(initialFromTaskId || "");
+      setToTaskId("");
+      setRelationType("FS");
+      setLagDays("");
     }
     setErrorMsg("");
-  }, [open, editRelation]);
+  }, [open, editRelation, initialFromTaskId]);
 
   const invalidate = () => {
     void queryClient.invalidateQueries({ queryKey: ["project-gantt", projectId] });
@@ -824,7 +837,7 @@ function CreateRelationModal({
       invalidate();
       onClose();
       setToTaskId("");
-      setLagDays(0);
+      setLagDays("");
       setErrorMsg("");
     },
     onError: (err: any) => {
@@ -933,9 +946,13 @@ function CreateRelationModal({
             <input
               type="number"
               value={lagDays}
-              onChange={(e) => setLagDays(Number(e.target.value))}
+              onChange={(e) => {
-              placeholder="مثلاً ۲ (گیرش بتن)"
+                const val = e.target.value;
-              className={inputCls}
+                setLagDays(val === "" ? "" : Number(val));
+              }}
+              onFocus={(e) => e.target.select()}
+              placeholder="0"
+              className={`${inputCls} [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`}
             />
           </div>
         </div>
@@ -967,111 +984,6 @@ function CreateRelationModal({
   );
 }
 
-function AddMemberModal({
-  open,
-  projectId,
-  onClose,
-}: {
-  open: boolean;
-  projectId: string;
-  onClose: () => void;
-}) {
-  const queryClient = useQueryClient();
-  const [selectedUserId, setSelectedUserId] = useState("");
-  const [memberRole, setMemberRole] = useState("supervisor");
-  const [notes, setNotes] = useState("");
-  const [errorMsg, setErrorMsg] = useState("");
-
-  const usersQuery = useQuery({ queryKey: ["users"], queryFn: getUsers });
-
-  const addMutation = useMutation({
-    mutationFn: () =>
-      addProjectMember(projectId, {
-        user_id: selectedUserId,
-        role: memberRole,
-        notes: notes.trim() || undefined,
-      }),
-    onSuccess: () => {
-      void queryClient.invalidateQueries({ queryKey: ["project", projectId] });
-      void queryClient.invalidateQueries({ queryKey: ["projects"] });
-      onClose();
-      setSelectedUserId("");
-      setNotes("");
-      setErrorMsg("");
-    },
-    onError: (err: any) => {
-      setErrorMsg(err?.message || "خطا در افزودن عضو به پروژه");
-    },
-  });
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!selectedUserId) {
-      setErrorMsg("لطفاً یک کاربر را انتخاب کنید");
-      return;
-    }
-    addMutation.mutate();
-  };
-
-  return (
-    <Modal open={open} title="افزودن عضو جدید به تیم پروژه" onClose={onClose}>
-      <form onSubmit={handleSubmit} className="space-y-3">
-        {errorMsg && <div className="rounded-xl bg-red-50 p-2.5 text-xs text-red-600">{errorMsg}</div>}
-
-        <div>
-          <label className="mb-1 block text-xs font-semibold text-slate-600">انتخاب کاربر *</label>
-          <select
-            value={selectedUserId}
-            onChange={(e) => setSelectedUserId(e.target.value)}
-            className={inputCls}
-            required
-          >
-            <option value="">-- انتخاب کاربر --</option>
-            {(usersQuery.data ?? []).map((u) => (
-              <option key={u.id} value={u.id}>
-                {u.display_name} ({u.username}) — {u.role_label}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        <div>
-          <label className="mb-1 block text-xs font-semibold text-slate-600">نقش در پروژه</label>
-          <select
-            value={memberRole}
-            onChange={(e) => setMemberRole(e.target.value)}
-            className={inputCls}
-          >
-            <option value="supervisor">ناظر اجرایی</option>
-            <option value="manager">مدیر پروژه</option>
-            <option value="qc_inspector">بازرس کیفیت (QC)</option>
-            <option value="subcontractor">پیمانکار جزء</option>
-          </select>
-        </div>
-
-        <div>
-          <label className="mb-1 block text-xs font-semibold text-slate-600">یادداشت / حدود اختیارات</label>
-          <input
-            value={notes}
-            onChange={(e) => setNotes(e.target.value)}
-            placeholder="یادداشت اختیاری"
-            className={inputCls}
-          />
-        </div>
-
-        <div className="flex items-center justify-end gap-2 pt-2">
-          <button type="button" onClick={onClose} className={btnSecondary}>
-            انصراف
-          </button>
-          <button type="submit" disabled={addMutation.isPending} className={btnPrimary}>
-            {addMutation.isPending ? "در حال ثبت..." : "افزودن به تیم"}
-          </button>
-        </div>
-      </form>
-    </Modal>
-  );
-}
-
 export default function ProjectDetailPage() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
@@ -1082,17 +994,15 @@ export default function ProjectDetailPage() {
   const canManageProjects = !isSupervisor && hasPermission(user, Perm.projectsUpdate);
 
   const projectId = id ?? "";
-  const [activeTab, setActiveTab] = useState<"tasks" | "gantt" | "members">("tasks");
+  const [activeTab, setActiveTab] = useState<"tasks" | "gantt">("tasks");
   const [search, setSearch] = useState("");
   const [expanded, setExpanded] = useState<Set<string>>(new Set());
   const [showTaskModal, setShowTaskModal] = useState(false);
   const [parentTaskForModal, setParentTaskForModal] = useState<Task | null>(null);
   const [showEditModal, setShowEditModal] = useState(false);
   const [taskToEdit, setTaskToEdit] = useState<Task | null>(null);
-  const [showMemberModal, setShowMemberModal] = useState(false);
   const [showRelationModal, setShowRelationModal] = useState(false);
   const [relationFromTaskId, setRelationFromTaskId] = useState<string | null>(null);
-  /** وابستگی در حال ویرایش (null = حالت تعریف جدید) */
   const [relationToEdit, setRelationToEdit] = useState<TaskRelation | null>(null);
   const initializedFor = useRef<string | null>(null);
 
@@ -1157,21 +1067,12 @@ export default function ProjectDetailPage() {
     setShowRelationModal(true);
   };
 
-  /** ویرایش یک وابستگی موجود از داخل کشوی تسک */
   const handleEditRelation = (relation: TaskRelation) => {
     setRelationFromTaskId(null);
     setRelationToEdit(relation);
     setShowRelationModal(true);
   };
 
-  const removeMemberMutation = useMutation({
-    mutationFn: (memberId: string) => removeProjectMember(projectId, memberId),
-    onSuccess: () => {
-      void queryClient.invalidateQueries({ queryKey: ["project", projectId] });
-      void queryClient.invalidateQueries({ queryKey: ["projects"] });
-    },
-  });
-
   const deleteRelationMutation = useMutation({
     mutationFn: (relId: string) => deleteTaskRelation(projectId, relId),
     onSuccess: () => {
@@ -1189,18 +1090,6 @@ export default function ProjectDetailPage() {
     },
   });
 
-  const updateStatusMutation = useMutation({
-    mutationFn: (newStatus: string) => updateProject(projectId, { status: newStatus }),
-    onSuccess: () => {
-      toast.success("وضعیت پروژه با موفقیت تغییر کرد");
-      void queryClient.invalidateQueries({ queryKey: ["project", projectId] });
-      void queryClient.invalidateQueries({ queryKey: ["projects"] });
-    },
-    onError: (err: any) => {
-      toast.error(err?.message || "خطا در تغییر وضعیت پروژه");
-    },
-  });
-
   const refresh = () => {
     void projectQuery.refetch();
     void tasksQuery.refetch();
@@ -1247,58 +1136,6 @@ export default function ProjectDetailPage() {
                 <p className="text-xs font-mono font-semibold text-sky-600">{project.identifier}</p>
                 <h2 className="text-base font-bold text-slate-800 mt-0.5">{project.name}</h2>
               </div>
-              <div className="flex items-center gap-1.5">
-                <span className="text-xs text-slate-500 font-medium">وضعیت:</span>
-                {canManageProjects ? (
-                  <select
-                    value={project.status?.toUpperCase() || "ACTIVE"}
-                    onChange={(e) => updateStatusMutation.mutate(e.target.value)}
-                    disabled={updateStatusMutation.isPending}
-                    aria-label="تغییر وضعیت پروژه"
-                    className={`rounded-lg px-2.5 py-1 text-xs font-semibold border transition-all cursor-pointer shadow-sm ${
-                      (project.status || "").toUpperCase() === "ACTIVE"
-                        ? "bg-emerald-50 text-emerald-700 border-emerald-300 focus:ring-emerald-200"
-                        : (project.status || "").toUpperCase() === "COMPLETED"
-                        ? "bg-sky-50 text-sky-700 border-sky-300 focus:ring-sky-200"
-                        : (project.status || "").toUpperCase() === "ON_HOLD"
-                        ? "bg-amber-50 text-amber-700 border-amber-300 focus:ring-amber-200"
-                        : (project.status || "").toUpperCase() === "PLANNED" || (project.status || "").toUpperCase() === "PLANNING"
-                        ? "bg-amber-50 text-amber-700 border-amber-300 focus:ring-amber-200"
-                        : "bg-slate-50 text-slate-700 border-slate-300 focus:ring-slate-200"
-                    }`}
-                  >
-                    <option value="ACTIVE">در حال اجرا (ACTIVE)</option>
-                    <option value="PLANNED">برنامه‌ریزی (PLANNED)</option>
-                    <option value="ON_HOLD">متوقف (ON_HOLD)</option>
-                    <option value="COMPLETED">تکمیل‌شده (COMPLETED)</option>
-                    <option value="CANCELLED">لغو شده (CANCELLED)</option>
-                  </select>
-                ) : (
-                  <Chip
-                    tone={
-                      project.status === "ACTIVE"
-                        ? "green"
-                        : project.status === "COMPLETED"
-                        ? "sky"
-                        : project.status === "ON_HOLD" || project.status === "PLANNED"
-                        ? "amber"
-                        : "slate"
-                    }
-                  >
-                    {project.status === "ACTIVE"
-                      ? "در حال اجرا"
-                      : project.status === "PLANNED" || project.status === "PLANNING"
-                      ? "برنامه‌ریزی"
-                      : project.status === "ON_HOLD"
-                      ? "متوقف"
-                      : project.status === "COMPLETED"
-                      ? "تکمیل‌شده"
-                      : project.status === "CANCELLED"
-                      ? "لغو شده"
-                      : project.status}
-                  </Chip>
-                )}
-              </div>
             </div>
 
             {project.location && (
@@ -1348,7 +1185,6 @@ export default function ProjectDetailPage() {
           </Card>
         )}
 
-        {/* ۳ تب: ساختار شکست کار / گانت و زمان‌بندی / اعضای تیم */}
         <div className="mb-3 flex rounded-xl bg-slate-200/80 p-1 text-xs font-semibold text-slate-600">
           <button
             type="button"
@@ -1368,15 +1204,6 @@ export default function ProjectDetailPage() {
           >
             نمودار گانت و زمان‌بندی
           </button>
-          <button
-            type="button"
-            onClick={() => setActiveTab("members")}
-            className={`flex-1 rounded-lg py-1.5 text-center transition-all ${
-              activeTab === "members" ? "bg-white text-sky-700 shadow-sm" : "hover:text-slate-800"
-            }`}
-          >
-            اعضای تیم ({project?.members?.length ?? project?.member_count ?? 0})
-          </button>
         </div>
 
         {activeTab === "tasks" && (
@@ -1489,69 +1316,6 @@ export default function ProjectDetailPage() {
             )}
           </div>
         )}
-
-        {activeTab === "members" && (
-          <div>
-            <div className="mb-3 flex items-center justify-between">
-              <h3 className="text-xs font-bold text-slate-700">اعضای اختصاص‌یافته به این پروژه</h3>
-              {canManageProjects && (
-                <button
-                  type="button"
-                  onClick={() => setShowMemberModal(true)}
-                  className="inline-flex h-8 items-center gap-1 rounded-lg bg-sky-50 px-2.5 text-xs font-semibold text-sky-700 hover:bg-sky-100 transition-colors"
-                >
-                  <UserPlus size={14} />
-                  <span>افزودن عضو</span>
-                </button>
-              )}
-            </div>
-
-            {(!project?.members || project.members.length === 0) ? (
-              <Card>
-                <EmptyState
-                  icon={Users}
-                  title="عضوی ثبت نشده است"
-                  description="برای تخصیص ناظران یا کارشناسان به این پروژه، دکمه «افزودن عضو» را بزنید."
-                />
-              </Card>
-            ) : (
-              <div className="space-y-2">
-                {project.members.map((m: ProjectMember) => (
-                  <Card key={m.id} className="p-3 flex items-center justify-between gap-2">
-                    <div className="flex items-center gap-2.5 min-w-0">
-                      <InitialAvatar name={m.display_name || m.username} className="h-8 w-8" />
-                      <div className="min-w-0">
-                        <p className="text-xs font-bold text-slate-800 truncate">
-                          {m.display_name || m.username}
-                        </p>
-                        <p className="text-[11px] text-slate-400">
-                          {m.role === "manager"
-                            ? "مدیر پروژه"
-                            : m.role === "supervisor"
-                            ? "ناظر اجرایی"
-                            : m.role === "qc_inspector"
-                            ? "بازرس QC"
-                            : m.role}
-                        </p>
-                      </div>
-                    </div>
-                    {canManageProjects && (
-                      <button
-                        type="button"
-                        onClick={() => removeMemberMutation.mutate(m.id)}
-                        disabled={removeMemberMutation.isPending}
-                        title="حذف عضو"
-                        className="flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 hover:bg-red-50 hover:text-red-600 transition-colors"
-                      >
-                        <Trash2 size={15} />
-                      </button>
-                    )}
-                  </Card>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
       </div>
 
       <TaskCreateModal
@@ -1588,13 +1352,6 @@ export default function ProjectDetailPage() {
           setRelationToEdit(null);
         }}
       />
-
-      <AddMemberModal
-        open={showMemberModal}
-        projectId={projectId}
-        onClose={() => setShowMemberModal(false)}
-      />
     </>
   );
 }
-

pm/frontend/src/pages/TaskDetailPage.tsx

@@ -62,6 +62,16 @@ import { isoToApiDate } from "../lib/jalali";
 
 const quickValues = [0, 25, 50, 75, 100];
 
+function parseCleanNumber(raw: string): number {
+  if (!raw) return 0;
+  const clean = raw
+    .replace(/[۰-۹]/g, (d) => "۰۱۲۳۴۵۶۷۸۹".indexOf(d).toString())
+    .replace(/[٠-٩]/g, (d) => "٠١٢٣٤٥٦٧٨٩".indexOf(d).toString())
+    .replace(/[^0-9.]/g, "");
+  const val = parseFloat(clean);
+  return isNaN(val) ? 0 : Math.max(0, val);
+}
+
 function SectionCard({ title, children }: { title: ReactNode; children: ReactNode }) {
   return (
     <Card className="p-4">
@@ -71,10 +81,6 @@ function SectionCard({ title, children }: { title: ReactNode; children: ReactNod
   );
 }
 
-// ----------------------------------------
-// صفحه جزئیات وظیفه
-// ----------------------------------------
-
 export default function TaskDetailPage() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
@@ -99,7 +105,6 @@ export default function TaskDetailPage() {
 
   const [showEditModal, setShowEditModal] = useState(false);
   const [progress, setProgress] = useState(0);
-  /** ISO میلادی — ارسال با isoToApiDate */
   const [startDate, setStartDate] = useState<string | null>(null);
   const [dueDate, setDueDate] = useState<string | null>(null);
 
@@ -109,7 +114,14 @@ export default function TaskDetailPage() {
   const [consumedMaterials, setConsumedMaterials] = useState<MaterialConsumption[]>([]);
   const [progressNote, setProgressNote] = useState("");
 
-  // محاسبه مجموع مصارف ثبت‌شده قبلی از سوابق گزارش‌های وظیفه
+  const isDateRangeInvalid = Boolean(
+    startDate &&
+      dueDate &&
+      isoToApiDate(startDate) &&
+      isoToApiDate(dueDate) &&
+      isoToApiDate(startDate)! > isoToApiDate(dueDate)!
+  );
+
   const pastConsumptionMap = useMemo(() => {
     const map = new Map<string, { total: number; unit: string }>();
     if (!task?.progress_logs) return map;
@@ -148,7 +160,6 @@ export default function TaskDetailPage() {
         setConsumedHr([]);
       }
 
-      // یکپارچه‌سازی مصالح تخصیص‌یافته و مصارف قبلی
       const items: MaterialConsumption[] = [];
       const seen = new Set<string>();
 
@@ -158,6 +169,7 @@ export default function TaskDetailPage() {
           seen.add(key);
           const past = pastConsumptionMap.get(key)?.total || 0;
           const alloc = Number(m.count) || 0;
+          const isOver = alloc > 0 && past > alloc;
           items.push({
             name: m.name,
             unit: m.unit || "",
@@ -166,14 +178,13 @@ export default function TaskDetailPage() {
             previous_consumed: past,
             total_consumed: past,
             remaining_amount: Math.max(0, alloc - past),
-            is_over_allocated: alloc > 0 ? past > alloc : past > 0,
+            is_over_allocated: isOver,
-            over_allocated_amount: Math.max(0, past - alloc),
+            over_allocated_amount: isOver ? past - alloc : 0,
             note: "",
           });
         }
       }
 
-      // مصالحی که در سوابق قبل مصرف شده‌اند ولی در تخصیص اولیه نبوده‌اند
       pastConsumptionMap.forEach((val, key) => {
         if (!seen.has(key)) {
           items.push({
@@ -184,8 +195,8 @@ export default function TaskDetailPage() {
             previous_consumed: val.total,
             total_consumed: val.total,
             remaining_amount: 0,
-            is_over_allocated: val.total > 0,
+            is_over_allocated: false,
-            over_allocated_amount: val.total,
+            over_allocated_amount: 0,
             note: "خارج از سقف مصوب",
           });
         }
@@ -197,14 +208,12 @@ export default function TaskDetailPage() {
 
   const invalidateTask = () => {
     void queryClient.invalidateQueries({ queryKey: ["task", taskIdParam] });
-    // کلید QC با همان شناسهای است که صفحههای QC استفاده میکنند
     void queryClient.invalidateQueries({ queryKey: ["task-qc", currentTaskId] });
     void queryClient.invalidateQueries({ queryKey: ["today"] });
     void queryClient.invalidateQueries({ queryKey: ["tasks"] });
   };
 
   const progressMutation = useMutation({
-    // ثبت پیشرفت کار همراه با مصرف واقعی نیروی انسانی و مصالح
     mutationFn: (payload: TaskProgressPayload) => updateTaskProgress(currentTaskId, payload),
     onSuccess: () => {
       toast.success("پیشرفت کار و گزارش مصرف منابع با موفقیت ثبت شد");
@@ -215,8 +224,7 @@ export default function TaskDetailPage() {
   });
 
   const handleMaterialAmountChange = (idx: number, rawVal: string) => {
-    const val = parseFloat(rawVal);
+    const amt = parseCleanNumber(rawVal);
-    const amt = Math.max(0, isNaN(val) ? 0 : val);
     setConsumedMaterials((prev) => {
       const next = [...prev];
       const item = { ...next[idx] };
@@ -224,8 +232,8 @@ export default function TaskDetailPage() {
       const prevC = item.previous_consumed ?? 0;
       const tot = prevC + amt;
       const rem = Math.max(0, alloc - tot);
-      const isOver = alloc > 0 ? tot > alloc : tot > 0;
+      const isOver = alloc > 0 && tot > alloc;
-      const overAmt = Math.max(0, tot - alloc);
+      const overAmt = isOver ? tot - alloc : 0;
 
       item.amount = amt;
       item.total_consumed = tot;
@@ -250,7 +258,7 @@ export default function TaskDetailPage() {
       ...prev,
       {
         name: "",
-        unit: "",
+        unit: "عدد",
         amount: 0,
         allocated_amount: 0,
         previous_consumed: 0,
@@ -258,7 +266,7 @@ export default function TaskDetailPage() {
         remaining_amount: 0,
         is_over_allocated: false,
         over_allocated_amount: 0,
-        note: "مصالح مازاد / خارج از برنامه",
+        note: "مصالح خارج از برنامه",
       },
     ]);
   };
@@ -273,7 +281,7 @@ export default function TaskDetailPage() {
       const start = isoToApiDate(startDate);
       const due = isoToApiDate(dueDate);
       if (start && due && start > due) {
-        throw new ApiError("تاریخ شروع یک وظیفه نمی‌تواند بعد از تاریخ اتمام آن باشد", 400, "VALIDATION");
+        throw new ApiError("تاریخ پایان نمی‌تواند کمتر از تاریخ شروع باشد", 400, "VALIDATION");
       }
       if (start) payload.start_date = start;
       if (due) payload.due_date = due;
@@ -286,7 +294,6 @@ export default function TaskDetailPage() {
     onError: (err) => toast.error(err instanceof ApiError ? err.message : "ثبت تاریخ‌ها ناموفق بود"),
   });
 
-  // ۱. وضعیت و جهش ویرایش منابع تخصیص‌یافته به وظیفه
   const [showEditResourcesModal, setShowEditResourcesModal] = useState(false);
   const [editMaterials, setEditMaterials] = useState<MaterialItem[]>([]);
 
@@ -310,7 +317,6 @@ export default function TaskDetailPage() {
       toast.error(err instanceof ApiError ? err.message : "خطا در به‌روزرسانی منابع وظیفه"),
   });
 
-  // ۲. وضعیت و جهش‌های مدیریت روابط وابستگی (FS, SS, FF, SF)
   const [showAddRelationModal, setShowAddRelationModal] = useState(false);
   const [relTargetId, setRelTargetId] = useState("");
   const [relDirection, setRelDirection] = useState<"predecessor" | "successor">("predecessor");
@@ -336,7 +342,7 @@ export default function TaskDetailPage() {
       }
     },
     onError: (err: any) => {
-      toast.error(err?.message || "خطا در ایجاد رابطه وابستگی (احتمال وجود دور یا ورودی نامعتبر)");
+      toast.error(err?.message || "خطا در ایجاد رابطه وابستگی");
     },
   });
 
@@ -399,8 +405,6 @@ export default function TaskDetailPage() {
   const projectLabel = project?.name ?? "—";
   const overdue = isOverdue(task.due_date);
 
-  // مجوزهای نقش: ناظر پیشرفت را ثبت و بازرسی را اجرا می‌کند، اما ساختار QC و
-  // تاریخ‌های برنامه و ویرایش تسک را تغییر نمی‌دهد (سرور هم مستقل همین را بررسی می‌کند).
   const isSupervisor = (user?.role as string) === "project_supervisor" || (user?.role as string) === "supervisor";
   const canDefineQc = !isSupervisor && hasPermission(user, Perm.qcDefine);
   const canExecuteQc = hasPermission(user, Perm.qcExecute) || isSupervisor;
@@ -419,7 +423,6 @@ export default function TaskDetailPage() {
   const preStatus = qcSummaryStatusMeta(readiness?.pre?.status || "none");
   const execStatus = qcSummaryStatusMeta(readiness?.exec?.status || "none");
 
-  // پیش‌بینی قواعد سرور: شروع نیازمند تأیید «پیش از اجرا» و ۱۰۰٪ نیازمند تأیید همه بازرسی‌ها
   const blockedByStart = progress > 0 && !readiness.can_start;
   const blockedByComplete = progress >= 100 && !readiness.can_complete;
   const progressBlocked = blockedByStart || blockedByComplete;
@@ -451,7 +454,6 @@ export default function TaskDetailPage() {
       />
 
       <div className="space-y-3 px-4 pb-28 pt-4">
-        {/* کارت اطلاعات اصلی */}
         <Card className="p-4">
           <div className="flex items-start justify-between gap-2">
             <p className="text-base font-bold leading-6 text-slate-800">{task.subject}</p>
@@ -493,7 +495,7 @@ export default function TaskDetailPage() {
           </div>
         </Card>
 
-        {/* کارت یکپارچه پیشرفت، تخصیص و گزارش مصرف مصالح و نیروی انسانی */}
+        {/* کارت پیشرفت و مدیریت یکپارچه مصالح */}
         <SectionCard
           title={
             <div className="flex items-center justify-between w-full">
@@ -538,7 +540,6 @@ export default function TaskDetailPage() {
             className="mt-3 w-full accent-sky-600"
             aria-label="درصد پیشرفت"
           />
-          {/* dir=ltr فقط برای ترتیب چشمی دکمه‌ها: ۰ تا ۱۰۰ از چپ به راست */}
           <div dir="ltr" className="mt-2 grid grid-cols-5 gap-1.5">
             {quickValues.map((v) => (
               <button
@@ -572,7 +573,7 @@ export default function TaskDetailPage() {
             </p>
           )}
 
-          {/* ۱. بخش مصالح و تجهیزات: تخصیص، مصارف قبلی، مصرف جاری و مانده */}
+          {/* بخش مصالح و تجهیزات مصرفی */}
           <div className="mt-4 rounded-xl border border-slate-200 bg-white p-3 space-y-3 shadow-2xs">
             <div className="flex items-center justify-between border-b border-slate-100 pb-2 gap-2">
               <span className="text-xs font-bold text-slate-900 flex items-center gap-1.5 min-w-0">
@@ -582,9 +583,9 @@ export default function TaskDetailPage() {
               <button
                 type="button"
                 onClick={handleAddCustomMaterial}
-                className="shrink-0 text-[10px] font-semibold text-amber-800 hover:text-amber-950 bg-amber-50 border border-amber-200 rounded-lg px-2 py-1 flex items-center gap-1 shadow-2xs hover:bg-amber-100 transition-colors"
+                className="shrink-0 text-[11px] font-semibold text-amber-800 hover:text-amber-950 bg-amber-50 border border-amber-200 rounded-lg px-2.5 py-1 flex items-center gap-1 shadow-2xs hover:bg-amber-100 transition-colors"
               >
-                <Plus size={12} />
+                <Plus size={13} />
                 <span>افزودن مصالح خارج برنامه</span>
               </button>
             </div>
@@ -594,15 +595,15 @@ export default function TaskDetailPage() {
                 مصالح یا تجهیزاتی برای این وظیفه تعیین نشده است. می‌توانید با دکمه بالا مصالح جدید اضافه کنید.
               </div>
             ) : (
-              <div className="space-y-2.5">
+              <div className="space-y-3">
                 {consumedMaterials.map((item, idx) => {
                   const alloc = item.allocated_amount || 0;
                   const prevC = item.previous_consumed || 0;
                   const currentC = item.amount || 0;
                   const totC = prevC + currentC;
                   const rem = Math.max(0, alloc - totC);
-                  const isOver = alloc > 0 ? totC > alloc : totC > 0;
+                  const isOver = alloc > 0 && totC > alloc;
-                  const overAmt = Math.max(0, totC - alloc);
+                  const overAmt = isOver ? totC - alloc : 0;
                   const pctConsumed = alloc > 0 ? Math.min(100, Math.round((totC / alloc) * 100)) : 100;
                   const specs =
                     task?.materials?.find(
@@ -612,40 +613,50 @@ export default function TaskDetailPage() {
                   return (
                     <div
                       key={idx}
-                      className={`rounded-xl border p-2.5 space-y-2.5 bg-white shadow-2xs transition-all ${
+                      className={`rounded-xl border p-3 space-y-3 bg-white shadow-2xs transition-all ${
                         isOver ? "border-rose-300 ring-1 ring-rose-200 bg-rose-50/10" : "border-slate-200"
                       }`}
                     >
-                      {/* ۱. سطر عنوان، واحد و مشخصات کالا */}
                       <div className="flex items-start justify-between gap-2">
                         <div className="min-w-0 flex-1">
                           {alloc === 0 ? (
-                            <div className="flex items-center gap-1.5 flex-wrap">
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 w-full">
+                              <div>
+                                <label className="text-[10px] font-semibold text-slate-500 block mb-0.5">
+                                  نام مصالح یا کالا
+                                </label>
                                 <input
                                   value={item.name}
                                   onChange={(e) => handleMaterialFieldChange(idx, "name", e.target.value)}
-                                placeholder="نام مصالح..."
+                                  placeholder="مثلاً: آجر فشاری، سیمان..."
-                                className="h-7 w-36 rounded border border-amber-300 bg-amber-50/40 px-2 text-xs font-bold text-slate-800 focus:outline-none focus:ring-1 focus:ring-amber-500"
+                                  className="h-8 w-full rounded-lg border border-amber-300 bg-amber-50/30 px-2.5 text-xs font-bold text-slate-800 focus:outline-none focus:ring-1 focus:ring-amber-500"
                                 />
+                              </div>
+                              <div>
+                                <label className="text-[10px] font-semibold text-slate-500 block mb-0.5">
+                                  واحد سنجش
+                                </label>
                                 <input
                                   value={item.unit}
                                   onChange={(e) => handleMaterialFieldChange(idx, "unit", e.target.value)}
-                                placeholder="واحد"
+                                  placeholder="مثلاً: عدد، تن، پاکت..."
-                                className="h-7 w-16 rounded border border-amber-300 bg-amber-50/40 px-2 text-xs text-slate-700 focus:outline-none focus:ring-1 focus:ring-amber-500"
+                                  className="h-8 w-full rounded-lg border border-amber-300 bg-amber-50/30 px-2.5 text-xs text-slate-800 focus:outline-none focus:ring-1 focus:ring-amber-500"
                                 />
                               </div>
+                            </div>
                           ) : (
                             <div className="flex items-baseline gap-1.5">
-                              <span className="font-extrabold text-slate-900 text-[13px]">{item.name}</span>
+                              <span className="font-extrabold text-slate-900 text-sm">{item.name}</span>
-                              {item.unit && <span className="text-[11px] text-slate-400 font-medium">({item.unit})</span>}
+                              {item.unit && <span className="text-xs text-slate-500 font-medium">({item.unit})</span>}
                             </div>
                           )}
+
                           {specs.length > 0 && (
-                            <div className="mt-1 flex flex-wrap gap-1">
+                            <div className="mt-1.5 flex flex-wrap gap-1">
                               {specs.map((s, si) => (
                                 <span
                                   key={si}
-                                  className="rounded bg-slate-100 text-slate-600 px-1.5 py-0.5 text-[9.5px] border border-slate-200"
+                                  className="rounded bg-slate-100 text-slate-600 px-1.5 py-0.5 text-[10px] border border-slate-200"
                                 >
                                   {s}
                                 </span>
@@ -654,17 +665,21 @@ export default function TaskDetailPage() {
                           )}
                         </div>
 
-                        {/* نشانگر وضعیت سقف یا دکمه حذف */}
+                        <div className="shrink-0 pt-0.5">
-                        <div className="shrink-0">
                           {alloc === 0 ? (
+                            <div className="flex items-center gap-1.5">
+                              <span className="rounded-md px-2 py-0.5 text-[10px] font-bold border bg-amber-50 text-amber-700 border-amber-200">
+                                خارج از برنامه
+                              </span>
                               <button
                                 type="button"
                                 onClick={() => handleRemoveMaterialRow(idx)}
                                 className="text-slate-400 hover:text-rose-600 p-1 rounded-md hover:bg-rose-50 transition-colors"
                                 title="حذف ردیف"
                               >
-                              <Trash2 size={14} />
+                                <Trash2 size={15} />
                               </button>
+                            </div>
                           ) : (
                             <span
                               className={`rounded-md px-2 py-0.5 text-[10px] font-bold border ${
@@ -673,74 +688,94 @@ export default function TaskDetailPage() {
                                   : "bg-emerald-50 text-emerald-700 border-emerald-200"
                               }`}
                             >
-                              {isOver ? "⚠️ مازاد" : "مجاز"}
+                              {isOver ? "⚠️ مازاد بر سقف" : "مجاز"}
                             </span>
                           )}
                         </div>
                       </div>
 
-                      {/* ۲. جدول ۳بخشی منظم حسابداری مصالح (مقدار کل مصوب، مصرف تاکنون، مانده قابل مصرف) */}
+                      <div className="grid grid-cols-3 divide-x divide-x-reverse divide-slate-200 rounded-lg bg-slate-50 border border-slate-200 py-2 text-center text-xs">
-                      <div className="grid grid-cols-3 divide-x divide-x-reverse divide-slate-200 rounded-lg bg-slate-50 border border-slate-200 py-1.5 text-center">
                         <div className="px-1">
-                          <span className="text-slate-400 block text-[9.5px]">مقدار کل (سقف)</span>
+                          <span className="text-slate-400 block text-[10px]">سقف مصوب</span>
-                          <span className="font-bold text-slate-800 text-[11.5px] mt-0.5 block">
+                          <span className="font-bold text-slate-800 text-xs mt-0.5 block">
-                            {alloc > 0 ? `${alloc} ${item.unit || ""}` : "نامحدود"}
+                            {alloc > 0 ? (
+                              <>
+                                <span className="tabular-nums">{alloc}</span>{" "}
+                                <span className="text-slate-500 font-normal">{item.unit}</span>
+                              </>
+                            ) : (
+                              <span className="text-slate-500 font-medium">بدون سقف</span>
+                            )}
                           </span>
                         </div>
                         <div className="px-1">
-                          <span className="text-slate-400 block text-[9.5px]">مصرف تاکنون</span>
+                          <span className="text-slate-400 block text-[10px]">مصرف تاکنون</span>
-                          <span className="font-bold text-slate-700 text-[11.5px] mt-0.5 block">
+                          <span className="font-bold text-slate-700 text-xs mt-0.5 block">
-                            {prevC} {item.unit || ""}
+                            <span className="tabular-nums">{prevC}</span>{" "}
+                            <span className="text-slate-500 font-normal">{item.unit}</span>
                           </span>
                         </div>
                         <div className="px-1">
-                          <span className={`block text-[9.5px] ${isOver ? "text-rose-600 font-bold" : "text-emerald-700 font-bold"}`}>
+                          <span
-                            {isOver ? "مازاد سقف" : "مانده قابل مصرف"}
+                            className={`block text-[10px] font-bold ${
+                              isOver ? "text-rose-600" : alloc > 0 ? "text-emerald-700" : "text-sky-700"
+                            }`}
+                          >
+                            {isOver ? "مازاد سقف" : alloc > 0 ? "مانده مجاز" : "کل مصرفی"}
                           </span>
-                          <span className={`font-black text-[11.5px] mt-0.5 block ${isOver ? "text-rose-600" : "text-emerald-700"}`}>
+                          <span
-                            {isOver ? `+${overAmt} ${item.unit || ""}` : `${rem} ${item.unit || ""}`}
+                            className={`font-black text-xs mt-0.5 block ${
+                              isOver ? "text-rose-600" : alloc > 0 ? "text-emerald-700" : "text-sky-700"
+                            }`}
+                          >
+                            {isOver ? (
+                              <span dir="ltr">+{overAmt} {item.unit}</span>
+                            ) : alloc > 0 ? (
+                              <span>{rem} {item.unit}</span>
+                            ) : (
+                              <span>{totC} {item.unit}</span>
+                            )}
                           </span>
                         </div>
                       </div>
 
-                      {/* ۳. ورودی شاخص و مستقل «مصرف این گزارش *» */}
+                      <div className="rounded-lg bg-amber-50/60 border border-amber-200 p-2.5">
-                      <div className="space-y-1 rounded-lg bg-amber-50/70 border border-amber-200 p-2">
+                        <div className="flex items-center justify-between gap-3">
-                        <div className="flex items-center justify-between gap-2">
+                          <label className="text-xs font-bold text-amber-950 flex items-center gap-1.5 shrink-0">
-                          <label className="text-[11.5px] font-black text-amber-950 flex items-center gap-1.5 shrink-0">
                             <span className="h-2 w-2 rounded-full bg-amber-500 animate-pulse" />
                             <span>مصرف این گزارش *:</span>
                           </label>
-                          <div className="flex items-center rounded-lg border-2 border-amber-400 bg-white shadow-xs focus-within:border-amber-600 focus-within:ring-2 focus-within:ring-amber-200">
+                          <div className="relative flex items-center w-36">
                             <input
-                              type="number"
+                              type="text"
-                              step="any"
+                              inputMode="decimal"
-                              min={0}
                               value={item.amount === 0 ? "" : item.amount}
+                              onFocus={(e) => e.target.select()}
                               onChange={(e) => handleMaterialAmountChange(idx, e.target.value)}
                               placeholder="۰"
-                              className="h-8 w-24 bg-transparent px-2 text-center text-sm font-black text-slate-900 focus:outline-none"
+                              className="h-8 w-full rounded-lg border-2 border-amber-400 bg-white px-3 pe-12 text-center text-sm font-black text-slate-900 focus:border-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-200"
                             />
                             {item.unit && (
-                              <span className="shrink-0 bg-amber-100/90 border-s border-amber-300 px-2 py-1 text-[11px] font-bold text-amber-900 select-none">
+                              <span className="absolute left-2 text-[11px] font-bold text-slate-500 pointer-events-none">
                                 {item.unit}
                               </span>
                             )}
                           </div>
                         </div>
+
                         {currentC > 0 && (
-                          <div className="pt-1 border-t border-amber-200/60 flex items-center justify-between text-[10px] text-amber-900">
+                          <div className="mt-2 pt-1.5 border-t border-amber-200/60 flex items-center justify-between text-[11px] text-amber-900">
-                            <span>مانده پس از ثبت این گزارش:</span>
+                            <span>مجموع پس از ثبت:</span>
-                            <b className={`font-black ${isOver ? "text-rose-600" : "text-emerald-700"}`}>
+                            <b className="font-black text-slate-800">
-                              {isOver ? `+${overAmt} ${item.unit} (مازاد سقف)` : `${rem} ${item.unit}`}
+                              {totC} {item.unit}
                             </b>
                           </div>
                         )}
                       </div>
 
-                      {/* ۴. نوار پیشرفت مصرف به سقف */}
                       {alloc > 0 && (
                         <div className="space-y-1 pt-0.5">
-                          <div className="flex items-center justify-between text-[9.5px] text-slate-500">
+                          <div className="flex items-center justify-between text-[10px] text-slate-500">
                             <span>کل مصرف: <b className="text-slate-800">{totC}</b> از {alloc} {item.unit}</span>
                             <span className="font-bold">
                               {totC > alloc ? `اضافه مصرف (${Math.round((totC / alloc) * 100)}٪)` : `${pctConsumed}٪ از سقف`}
@@ -757,14 +792,13 @@ export default function TaskDetailPage() {
                         </div>
                       )}
 
-                      {/* ۵. هشدار اضافه مصرف جهت ثبت در سوابق و استعلام */}
                       {isOver && (
-                        <p className="text-[10px] text-rose-700 font-medium flex items-center gap-1 bg-rose-50 p-1.5 rounded-lg border border-rose-200">
+                        <div className="flex items-start gap-1.5 rounded-lg border border-rose-200 bg-rose-50 p-2 text-[11px] text-rose-700">
-                          <AlertTriangle size={12} className="shrink-0 text-rose-600" />
+                          <AlertTriangle size={14} className="shrink-0 text-rose-600 mt-0.5" />
                           <span>
-                            میزان مصرف ({totC} {item.unit}) از سقف تخصیص ({alloc}) فراتر رفته است. مازاد (+{overAmt} {item.unit}) در استعلام‌های آتی قابل رهگیری است.
+                            میزان مصرف (<strong className="tabular-nums">{totC}</strong> {item.unit}) از سقف مصوب (<strong className="tabular-nums">{alloc}</strong> {item.unit}) بیشتر است. (<span dir="ltr" className="font-bold">+{overAmt}</span> {item.unit} مازاد)
                           </span>
-                        </p>
+                        </div>
                       )}
                     </div>
                   );
@@ -773,7 +807,7 @@ export default function TaskDetailPage() {
             )}
           </div>
 
-          {/* ۲. نیروی انسانی تحویل‌شده و حاضر در کارگاه */}
+          {/* نیروی انسانی */}
           <div className="mt-3 rounded-xl border border-sky-200 bg-sky-50/50 p-3 space-y-2.5">
             <div className="flex items-center justify-between">
               <span className="text-xs font-bold text-sky-950 flex items-center gap-1">
@@ -862,7 +896,6 @@ export default function TaskDetailPage() {
             )}
           </div>
 
-          {/* ۳. توضیحات و شرح گزارش روزانه کارگاه */}
           <div className="mt-3 pt-2 border-t border-slate-200">
             <label className="text-[10px] font-medium text-slate-600 block mb-1">
               توضیحات و گزارش روزانه کارگاه (اختیاری)
@@ -903,7 +936,7 @@ export default function TaskDetailPage() {
           )}
         </SectionCard>
 
-        {/* کارت تاریخچه ثبت پیشرفت و مصرف منابع */}
+        {/* کارت تاریخچه ثبت پیشرفت */}
         {task.progress_logs && task.progress_logs.length > 0 && (
           <SectionCard title={`تاریخچه گزارش‌های پیشرفت و مصرف منابع (${task.progress_logs.length})`}>
             <div className="space-y-2.5">
@@ -921,11 +954,10 @@ export default function TaskDetailPage() {
                     <div className="text-[10px] text-slate-500 flex items-center gap-1">
                       <Clock size={11} className="text-slate-400" />
                       <span>{relativeTime(log.created_at)}</span>
-                      {log.logged_by && <span>• توسط {log.logged_by}</span>}
+                      {log.logged_by && <span>توسط {log.logged_by}</span>}
                     </div>
                   </div>
 
-                  {/* نیروی کار حاضر در این گزارش */}
                   {log.human_resources_used && log.human_resources_used.length > 0 && (
                     <div>
                       <span className="text-[10px] font-bold text-slate-600 block mb-1">نیروی کار حاضر:</span>
@@ -944,7 +976,6 @@ export default function TaskDetailPage() {
                     </div>
                   )}
 
-                  {/* مصالح مصرفی در این گزارش */}
                   {log.materials_used && log.materials_used.length > 0 && (
                     <div>
                       <span className="text-[10px] font-bold text-slate-600 block mb-1">مصالح مصرف‌شده:</span>
@@ -972,7 +1003,6 @@ export default function TaskDetailPage() {
                     </div>
                   )}
 
-                  {/* توضیحات در صورت وجود */}
                   {log.description && (
                     <div className="rounded-lg bg-white p-2 border border-slate-100 text-[11px] text-slate-700 leading-relaxed">
                       {log.description}
@@ -984,7 +1014,7 @@ export default function TaskDetailPage() {
           </SectionCard>
         )}
 
-        {/* کارت تاریخ‌ها — برنامه‌ریزی‌شده و واقعی */}
+        {/* کارت تاریخ‌های وظیفه */}
         <SectionCard title="تاریخ‌های وظیفه">
           <div className="space-y-3">
             <div>
@@ -1001,9 +1031,17 @@ export default function TaskDetailPage() {
                       <JalaliDatePicker value={dueDate} onChange={setDueDate} placeholder="۱۴۰۵/۰۸/۲۶" />
                     </div>
                   </div>
+
+                  {isDateRangeInvalid && (
+                    <div className="mt-2.5 flex items-center gap-2 rounded-xl border border-rose-200 bg-rose-50 p-2.5 text-xs font-bold text-rose-600">
+                      <AlertTriangle size={15} className="shrink-0 text-rose-500" />
+                      <span>تاریخ پایان نمی‌تواند کمتر از تاریخ شروع باشد</span>
+                    </div>
+                  )}
+
                   <button
                     type="button"
-                    disabled={datesMutation.isPending}
+                    disabled={datesMutation.isPending || isDateRangeInvalid}
                     onClick={() => datesMutation.mutate()}
                     className={`${btnSecondary} mt-2.5 w-full`}
                   >
@@ -1063,8 +1101,6 @@ export default function TaskDetailPage() {
           />
         </SectionCard>
 
-
-
         {/* کارت ارتباطات */}
         <SectionCard
           title={
@@ -1215,7 +1251,6 @@ export default function TaskDetailPage() {
         onUpdated={() => invalidateTask()}
       />
 
-      {/* مودال ویرایش منابع تخصیص‌یافته به وظیفه */}
       {showEditResourcesModal && (
         <Modal
           open={showEditResourcesModal}
@@ -1248,7 +1283,6 @@ export default function TaskDetailPage() {
         </Modal>
       )}
 
-      {/* مودال افزودن رابطه وابستگی جدید */}
       {showAddRelationModal && (
         <Modal
           open={showAddRelationModal}