From 779113bb193152d86ff9b989d19e7f23e745d4f3 Mon Sep 17 00:00:00 2001
From: hamed <15238-genius.ha@users.noreply.drupalcode.org>
Date: Mon, 15 Jun 2026 16:05:56 +0330
Subject: [PATCH] =?UTF-8?q?fix(appointment):=20order=20calendar=20months?=
 =?UTF-8?q?=20RTL=20(=D8=AE=D8=B1=D8=AF=D8=A7=D8=AF=20right,=20=D8=AA?=
 =?UTF-8?q?=DB=8C=D8=B1=20left)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The two months rendered reversed (current month on the left). Pin the
calendar row to dir=rtl and render the base month first so the current
month sits on the right and the next month on the left, matching the
design. Pin each month header to dir=ltr so the nav arrows stay on the
expected outer edges regardless of the RTL flip.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/component/date/datePicker/index.js | 24 ++++++++++++------------
 components/common/InlineJalaliMonth.js |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/component/date/datePicker/index.js b/app/component/date/datePicker/index.js
index dde70e8..86f5e0d 100644
--- a/app/component/date/datePicker/index.js
+++ b/app/component/date/datePicker/index.js
@@ -42,18 +42,7 @@ function DatePicker({ setDate, disabledDates = [] }) {
   const secondMonth = moment(baseMonth).add(1, "jMonth");
 
   return (
-    <div className="datePickerApt flex items-start justify-evenly gap-[24px] w-full">
-      <div className="hidden md:block lg:hidden xl:block w-1/2">
-        <InlineJalaliMonth
-          displayDate={secondMonth}
-          selectedDate={selectedDate}
-          onSelectDay={selectDay}
-          isDisabled={isDisabled}
-          showPrev={false}
-          onNext={() => setBaseMonth(moment(baseMonth).add(1, "jMonth"))}
-          onPrev={() => setBaseMonth(moment(baseMonth).subtract(1, "jMonth"))}
-        />
-      </div>
+    <div dir="rtl" className="datePickerApt flex items-start justify-evenly gap-[24px] w-full">
       <div className="w-full lg:w-1/2">
         <InlineJalaliMonth
           displayDate={baseMonth}
@@ -65,6 +54,17 @@ function DatePicker({ setDate, disabledDates = [] }) {
           onNext={() => setBaseMonth(moment(baseMonth).add(1, "jMonth"))}
         />
       </div>
+      <div className="hidden md:block lg:hidden xl:block w-1/2">
+        <InlineJalaliMonth
+          displayDate={secondMonth}
+          selectedDate={selectedDate}
+          onSelectDay={selectDay}
+          isDisabled={isDisabled}
+          showPrev={false}
+          onNext={() => setBaseMonth(moment(baseMonth).add(1, "jMonth"))}
+          onPrev={() => setBaseMonth(moment(baseMonth).subtract(1, "jMonth"))}
+        />
+      </div>
     </div>
   );
 }
diff --git a/components/common/InlineJalaliMonth.js b/components/common/InlineJalaliMonth.js
index 439bdb1..da33fe9 100644
--- a/components/common/InlineJalaliMonth.js
+++ b/components/common/InlineJalaliMonth.js
@@ -47,7 +47,7 @@ function InlineJalaliMonth({
 
   return (
     <div className="w-full">
-      <div className="flex items-center justify-between mb-[16px] px-1">
+      <div dir="ltr" className="flex items-center justify-between mb-[16px] px-1">
         <button
           type="button"
           onClick={onNext}