improvement: rtl direction, solar calendar and persian formatting added for persian users.

frontend/src/components/ui/treatment/AppointmentsStrip.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 import { CalendarDays } from 'lucide-react';
 import { Card } from '@/components/ui/shared/Card';
 import { ScheduleDayPicker } from '@/components/ui/shared/ScheduleDayPicker';
@@ -11,6 +11,7 @@ import {
 } from '@/components/shared/treatmentTypeDisplay';
 import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
 import type { TreatmentAppointment } from '@/types/treatment';
+import { APP_DATE, formatAppTimeRange } from '@/lib/i18n/format';
 
 interface AppointmentsStripProps {
   stripHidden: boolean;
@@ -35,6 +36,7 @@ export function AppointmentsStrip({
   treatmentCatalog,
   loading = false,
 }: AppointmentsStripProps) {
+  const locale = useLocale();
   const t = useTranslations('treatment');
 
   if (stripHidden) {
@@ -84,15 +86,7 @@ export function AppointmentsStrip({
         )}
         {appointments.map((a) => {
           const sel = a.id === selectedAppointmentId;
-          const start = new Date(a.startAt);
-          const end = new Date(a.endAt);
-          const timeLabel = `${start.toLocaleTimeString(undefined, {
-            hour: 'numeric',
-            minute: '2-digit',
-          })} – ${end.toLocaleTimeString(undefined, {
-            hour: 'numeric',
-            minute: '2-digit',
-          })}`;
+          const timeLabel = formatAppTimeRange(a.startAt, a.endAt, locale);
           const purposeLabel = treatmentTypeLabelFromCatalog(a.purpose, treatmentCatalog);
           const purposeIndex = treatmentCatalog.findIndex((e) => e.code === a.purpose);
           return (
@@ -104,7 +98,7 @@ export function AppointmentsStrip({
               padding="none"
               style={treatmentTypeBannerStyle(a.purpose, purposeIndex < 0 ? 0 : purposeIndex)}
               className={`
-                text-left rounded-[var(--radius-sm)] px-3 py-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[280px] transition-shadow min-h-[52px]
+                text-start rounded-[var(--radius-sm)] px-3 py-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[280px] transition-shadow min-h-[52px]
                 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
                 ${sel ? 'ring-2 ring-primary ring-offset-2 ring-offset-background-secondary shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]' : 'hover:brightness-110'}
               `}