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

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 import { useRouter } from '@/i18n/navigation';
 import { Button } from '@/components/ui/shared/Button';
 import { Checkbox } from '@/components/ui/shared/Checkbox';
@@ -46,6 +46,7 @@ import { scrollWithinMainScrollContainer } from '@/components/shared/scrollWithi
 import { useMarkTabReadOnVisit, useTabBadgeCounts } from '@/lib/hooks/useTabBadgeCounts';
 import { tabBadgesChangedEventName } from '@/lib/tabBadgeUtils';
 import { notifyTabBadgesChanged } from '@/lib/tabBadgeUtils';
+import { APP_DATE, formatAppDate } from '@/lib/i18n/format';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { getUserFacingError } from '@/components/shared/formatApiError';
 import { useToast } from '@/lib/hooks/useToast';
@@ -284,13 +285,13 @@ export function TreatmentWorkspace({
   currentOrganization,
   initialAppointmentId = null,
 }: TreatmentWorkspaceProps) {
+  const locale = useLocale();
   const t = useTranslations('treatment');
   const tErrors = useTranslations('errors');
   const tPatients = useTranslations('patients');
   const router = useRouter();
   const { user } = useAuth();
   const { showError, showSuccess, messages: toastMessages } = useToast();
-  const locale = user?.language ?? 'en';
   const canView = canViewTreatment(currentOrganization);
   const canEdit = canEditTreatment(currentOrganization);
   useMarkTabReadOnVisit();
@@ -1571,7 +1572,7 @@ export function TreatmentWorkspace({
         </p>
       )}
 
-      <div className="grid grid-cols-1 xl:grid-cols-[minmax(300px,380px)_minmax(0,1fr)] gap-4 items-start">
+      <div className="treatment-layout-grid grid grid-cols-1 xl:grid-cols-[minmax(300px,380px)_minmax(0,1fr)] gap-4 items-start">
         <div className="space-y-3 min-w-0 xl:max-w-[380px]">
           <div className="surface-card p-3 space-y-3">
             <PatientSearchCombobox
@@ -1619,12 +1620,7 @@ export function TreatmentWorkspace({
               <div className="rounded-[var(--radius-md)] border border-primary/40 bg-primary/5 px-3 py-2 space-y-2">
                 <p className="text-xs text-text-primary">
                   {t('browseBanner', {
-                    date: new Date(previewTreatment.treatmentAt).toLocaleDateString(undefined, {
-                      weekday: 'short',
-                      year: 'numeric',
-                      month: 'short',
-                      day: 'numeric',
-                    }),
+                    date: formatAppDate(previewTreatment.treatmentAt, locale, APP_DATE.withWeekday),
                   })}
                 </p>
                 <div className="flex flex-wrap gap-2">