# تسک ۰۰ب — سازگارسازی nobat724_front با وضعیت فعلی نوبت‌دهی سرویسی

**پروژه:** `nobat724_front` (سایت عمومی) · **فاز:** ۰ · **وابستگی:** ۰۰ · **زمان:** ۱۰-۱۴ ساعت
**پیش‌نیاز همهٔ تسک‌های ۰۱ به بعد**

---

## ⛔ خط سرخ

مسیر اسلاتی سایت دست‌کاری نمی‌شود: `adaptSlots()`، رندر تب‌های شیفت، و همهٔ رفتار
`booking_mode === 'slot'` عیناً می‌ماند.
رجوع: [_shared/red-lines.md](../_shared/red-lines.md)

---

## هدف

سایت حالت سرویسی را **می‌شناسد** ولی سه دسته مشکل دارد: انحراف از دیزاین‌سیستم،
محاسبهٔ موازی مدت در فرانت، و نبود سرویس/مدت در پنل کاربر. این تسک همه را می‌بندد و
سایت را با endpoint های جدید تسک ۰۰ هم‌گام می‌کند.

## وضعیت فعلی

### ✅ کار می‌کند

| مورد | فایل |
|---|---|
| تشخیص حالت per محل | `components/appointment/index.js:125` — `selectedLocation?.booking_mode === "service"` |
| مرحلهٔ انتخاب سرویس | `components/appointment/service/index.js` |
| فراخوانی endpoint ها | `services/response.js:78,83` |
| تبدیل پاسخ به قالب اسلات | `lib/appointmentSlots.js` → `adaptServiceSlots()` |
| ارسال سرویس‌ها در ثبت | `components/appointment/detail/SubmitData.js:152` |
| JSON-LD `availableService` با `estimatedDuration` | `app/doctor/[slug]/page.js:212` |
| باطل‌کردن انتخاب‌ها با تعویض محل | `changeLocation()` در `index.js` |

### ❌ مشکلات این تسک

**۱. انحراف از دیزاین‌سیستم — رنگ‌های hard-code.**

`components/appointment/service/index.js`:

```jsx
<h2 className="text-[16px] font-bold text-[#3B3B3B] mb-4">۱. انتخاب سرویس</h2>
<p className="text-[14px] text-[#7A7A7A]">…</p>
className={active
  ? "border-[#5559CE] bg-[#5559CE]/5"
  : "border-gray-200 bg-white hover:border-[#5559CE]"}
```

چهار رنگ hard-code. سایت `darkMode: "class"` دارد و صفحات عمومی با `data-theme` تم
عوض می‌کنند — این کامپوننت در دارک‌مود می‌شکند. بقیهٔ مراحل رزرو از تم MUI/Tailwind
استفاده می‌کنند و این یکی نمی‌کند.

**۲. محاسبهٔ موازی مدت در فرانت.**

```js
// components/appointment/service/index.js
const totalMinutes = services
  .filter((s) => draft.includes(s.uuid))
  .reduce((sum, s) => sum + (Number(s.duration_minutes) || 0), 0);
```

بک‌اند همان عدد را در `total_duration_minutes` پاسخ `appointment-service-slots`
برمی‌گرداند. دو محاسبه یعنی: وقتی تسک ۰۴ فرمول را به «زمان تنها / زمان اضافه» عوض کند،
سایت عدد قدیمی نشان می‌دهد و بیمار مدتی می‌بیند که با مدت واقعی نوبتش نمی‌خواند.

**۳. `adaptServiceSlots` برچسب گمراه‌کننده می‌سازد.**

```js
return [{
  start_time: starts[0].start_time,
  end_time: starts[starts.length - 1].start_time,   // ← پایانِ آخرین شروع، نه پایان نوبت
  label: "زمان‌های خالی",
  slots: …,
}];
```

همهٔ زمان‌ها در یک تب جمع می‌شوند و مرز شیفت‌ها (صبح/عصر) از بین می‌رود — در حالی که
حالت اسلاتی همان اطلاعات را از بک‌اند دارد و نشان می‌دهد. برای پزشکی با شیفت صبح و عصر،
بیمار یک فهرست بلند بی‌ساختار می‌بیند.

**۴. پنل کاربر سرویس و مدت نوبت را نشان نمی‌دهد.**

`components/dashboard/userAccount/sidebars/turns/Card.js` و `isTurnsDetails/*` هیچ ارجاعی
به `service` یا مدت ندارند. بیمار نوبت سرویسی گرفته و در پنلش نمی‌بیند چه سرویسی رزرو
کرده یا نوبتش چند دقیقه است.

**۵. جابه‌جایی نوبت در پنل کاربر، سرویس‌آگاه نیست.**

پس از تسک ۰۰، endpoint `POST /appointment/{uuid}/service-reschedule` وجود دارد.
`ButtonData.js` هیچ مسیری برای جابه‌جایی ندارد.

## دامنه

**هست:**
- بازنویسی `components/appointment/service/index.js` با توکن‌های تم (بدون تغییر رفتار)
- حذف محاسبهٔ مدت از فرانت — مصرف `total_duration_minutes` بک‌اند
- `adaptServiceSlots` گروه‌بندی per شیفت
- نمایش سرویس‌ها و مدت در کارت و جزئیات نوبت پنل کاربر
- جابه‌جایی سرویس‌آگاه از پنل کاربر
- به‌روزرسانی `services/response.js` برای endpoint های جدید تسک ۰۰

**نیست:** تغییری در مسیر اسلاتی · حالت `resource` (تسک ۰۶ و پس از آن، یک تسک frontend جدا)

## معیار پذیرش

- ✅ موفق: مرحلهٔ انتخاب سرویس در دارک‌مود درست رندر می‌شود (هیچ متن سیاه روی زمینهٔ
  تیره، هیچ کارت سفید).
- ✅ موفق: مدت نمایش‌داده‌شده در مرحلهٔ انتخاب سرویس **از پاسخ بک‌اند** می‌آید؛ اگر
  بک‌اند عدد متفاوتی بدهد، UI همان را نشان می‌دهد.
- ✅ موفق: پزشکی با دو شیفت (صبح ۹-۱۳، عصر ۱۶-۲۰) در حالت سرویسی → دو تب زمانی،
  با برچسب واقعی هر شیفت.
- ✅ موفق: کارت نوبت در پنل کاربر نام سرویس‌ها و مدت را نشان می‌دهد؛ نوبت اسلاتی
  دقیقاً مثل امروز (بدون این دو خط).
- ✅ موفق: بیمار از پنل نوبت سرویسی‌اش را جابه‌جا می‌کند → مدت خودکار حفظ می‌شود،
  بیمار عددی وارد نمی‌کند.
- ❌ خطا: جابه‌جایی به زمان اشغال‌شده → پیام فارسی از بک‌اند نمایش داده می‌شود
  (نه «خطای نامشخص»)، و فهرست زمان‌ها خودکار به‌روز می‌شود.
- ❌ خطا: انتخاب صفر سرویس → دکمهٔ ادامه غیرفعال با راهنمای فارسی.
- ⚠️ مرزی: محلی که `booking_mode = 'service'` است ولی هیچ سرویس `bookable` ندارد →
  پیام روشن («سرویسی برای نوبت‌دهی آنلاین تعریف نشده است») + پیشنهاد محل دیگر اگر باشد.
- ⚠️ مرزی: پزشک در مطب شخصی اسلاتی و در کلینیک سرویسی → تعویض محل، مرحلهٔ سرویس را
  ظاهر/پنهان می‌کند و انتخاب‌های قبلی باطل می‌شوند (رفتار موجود، حفظ شود).
- ⚠️ مرزی: پاسخ `appointment-service-slots` خالی → پیام دلیل‌دار، نه فهرست خالی بی‌توضیح.
- ⚠️ مرزی: نوبت قدیمی سرویسی بدون `service_items` → کارت مدت را نشان می‌دهد و نام
  سرویس را «—»؛ کرش نمی‌کند.
- ⚠️ مرزی: `total_duration_minutes` در پاسخ نبود (بک‌اند قدیمی) → fallback به محاسبهٔ
  فرانت با یک `console.warn`، نه صفحهٔ خالی.

## خروجی

- `components/appointment/service/index.js` بازنویسی‌شده با توکن تم
- `lib/appointmentSlots.js` — `adaptServiceSlots` شیفت‌آگاه
- `components/dashboard/userAccount/sidebars/turns/*` — سرویس و مدت
- `services/response.js` — endpoint های جدید
- [checklist.md](checklist.md) کامل‌شده