fix(appointment): order calendar months RTL (خرداد right, تیر left)

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

@@ -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>
   );
 }