hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(booking): show services and duration on the user panel appointment

Browse Source 
A patient who booked in service mode could not see which services they had
reserved or how long the appointment was. Both now appear on the list card and in
both detail layouts, reading service_items and service_total_minutes from
GET /api/v1/appointments/user.

Every field is behind an explicit guard. Slot-mode appointments carry none of
them, and an unguarded map would crash the card for every slot-mode appointment,
taking the whole panel with it. A reserve entry shows its services but not a
duration, because it has no time.

Covered by Card.test.jsx: slot-mode appointments render unchanged, absent fields
(older backend) do not crash, reserve hides the duration, and a zero duration
produces no row.

Task: clinicpro/docs/new_feture/taskes/task-00b-nobat724-service-mode/

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
hamed
2026-07-30 15:53:18 +03:30
co-authored by Claude Opus 5
parent d58eec1dba
commit ae958eee73
4 changed files with 152 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dashboard/userAccount/sidebars/turns/isTurnsDetails/DetailLg.js
+23
View File
@@ -90,6 +90,29 @@ function DetailLg({ appointmentData, loading }) {
</div>
</TextLoading>
</li>
{/* حالت نوبت‌دهی سرویسی. شرط اجباری: نوبت اسلاتی این فیلدها را ندارد. */}
{appointmentData?.service_items?.length > 0 && (
<li className="flex flex-wrap items-center justify-start gap-y-[12px] gap-[32px]">
<TextLoading loading={loading} width={200} height={20}>
<p className="text-[#616161] text-[14px] lg:text-[16px] font-normal">
سرویس:{" "}
<span className="text-[#2F2F2F] text-[14px] lg:text-[16px] font-medium">
{appointmentData.service_items.map((s) => s.name).join("، ")}
</span>
</p>
</TextLoading>
{!appointmentData.is_reserve && appointmentData.service_total_minutes ? (
<TextLoading loading={loading} width={110} height={20}>
<p className="text-[#616161] text-[14px] lg:text-[16px] font-normal">
مدت نوبت:{" "}
<span className="text-[#2F2F2F] text-[14px] lg:text-[16px] font-medium">
{appointmentData.service_total_minutes} دقیقه
</span>
</p>
</TextLoading>
) : null}
</li>
)}
<li className="flex flex-wrap items-center justify-start gap-y-[12px] gap-[32px]">
<TextLoading loading={loading} width={250} height={20}>
<div className="flex items-start justify-start gap-[4px]">
components/dashboard/userAccount/sidebars/turns/isTurnsDetails/DetailSm.js
+25
View File
@@ -85,6 +85,31 @@ function DetailSm({ appointmentData, loading }) {
</p>
</TextLoading>
</li>
{/* حالت نوبت‌دهی سرویسی. شرط اجباری: نوبت اسلاتی این فیلدها را ندارد. */}
{appointmentData?.service_items?.length > 0 && (
<li className="flex flex-wrap gap-x-[12px] items-start w-full justify-between mt-[12px]">
<TextLoading loading={loading} width={80} height={16}>
<p className="text-[#7E7E7E] text-[16px] font-normal shrink-0">سرویس:</p>
</TextLoading>
<TextLoading loading={loading} width={140} height={16}>
<p className="text-[#525252] text-[16px] font-medium text-left">
{appointmentData.service_items.map((s) => s.name).join("، ")}
</p>
</TextLoading>
</li>
)}
{!appointmentData?.is_reserve && appointmentData?.service_total_minutes ? (
<li className="flex flex-wrap items-center w-full justify-between mt-[12px]">
<TextLoading loading={loading} width={80} height={16}>
<p className="text-[#7E7E7E] text-[16px] font-normal">مدت نوبت:</p>
</TextLoading>
<TextLoading loading={loading} width={60} height={16}>
<p className="text-[#525252] text-[16px] font-medium">
{appointmentData.service_total_minutes} دقیقه
</p>
</TextLoading>
</li>
) : null}
<span className="block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]"></span>
<li className="flex flex-wrap gap-x-[12px] gap-y-[12px] items-center w-full justify-between">
<TextLoading loading={loading} width={200} height={16}>