frappe · pratikb64 · Nov 28, 2025
diff --git a/crm/www/crm.py b/crm/www/crm.py
@@ -7,6 +7,7 @@
 from frappe import _, safe_decode
 from frappe.integrations.frappe_providers.frappecloud_billing import is_fc_site
 from frappe.utils import cint, get_system_timezone
+from frappe.utils.jinja_globals import is_rtl
 from frappe.utils.telemetry import capture
 
 no_cache = 1
@@ -16,10 +17,7 @@ def get_context():
 	from crm.api import check_app_permission
 
 	if not check_app_permission():
-		frappe.throw(
-			_("You do not have permission to access Frappe CRM"),
-			frappe.PermissionError
-		)
+		frappe.throw(_("You do not have permission to access Frappe CRM"), frappe.PermissionError)
 
 	frappe.db.commit()
 	context = frappe._dict()
@@ -53,6 +51,7 @@ def get_boot():
 				"user": frappe.db.get_value("User", frappe.session.user, "time_zone")
 				or get_system_timezone(),
 			},
+			"dir": "rtl" if is_rtl() else "ltr",
 		}
 	)
 

diff --git a/frontend/index.html b/frontend/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="h-full" lang="en">
+<html class="h-full" lang="en" dir="{{boot.dir}}">
   <head>
     <meta charset="UTF-8" />
     <meta
@@ -194,6 +194,7 @@
       media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
     />
   </head>
+
   <body class="sm:overscroll-y-none no-scrollbar">
     <div id="app" class="h-full"></div>
     <script type="module" src="/src/main.js"></script>

diff --git a/frontend/package.json b/frontend/package.json
@@ -31,6 +31,7 @@
     "postcss": "^8.4.5",
     "tailwindcss": "^3.4.15",
     "vite": "^4.4.9",
-    "vite-plugin-pwa": "^0.15.0"
+    "vite-plugin-pwa": "^0.15.0",
+    "tailwindcss-rtl": "^0.9.0"
   }
-}
+}
diff --git a/frontend/src/components/SidebarLink.vue b/frontend/src/components/SidebarLink.vue
@@ -1,7 +1,9 @@
 <template>
   <button
     class="flex h-7 cursor-pointer items-center rounded text-ink-gray-7 duration-300 ease-in-out focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-outline-gray-3"
-    :class="isActive ? 'bg-surface-selected shadow-sm' : 'hover:bg-surface-gray-2'"
+    :class="
+      isActive ? 'bg-surface-selected shadow-sm' : 'hover:bg-surface-gray-2'
+    "
     @click="handleClick"
   >
     <div
@@ -32,7 +34,7 @@
             :class="
               isCollapsed
                 ? 'ml-0 w-0 overflow-hidden opacity-0'
-                : 'ml-2 w-auto opacity-100'
+                : 'ml-2 rtl:mr-2 w-auto opacity-100'
             "
           >
             {{ label }}

diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
@@ -7,8 +7,8 @@
           isCollapsed
             ? 'w-auto px-0'
             : open
-              ? 'w-full bg-surface-white px-2 shadow-sm'
-              : 'w-full px-2 hover:bg-surface-gray-3'
+            ? 'w-full bg-surface-white px-2 shadow-sm'
+            : 'w-full px-2 hover:bg-surface-gray-3'
         "
       >
         <BrandLogo v-model="brand" class="h-8 max-w-16 flex-shrink-0" />
@@ -34,7 +34,7 @@
           :class="
             isCollapsed
               ? 'ml-0 w-0 overflow-hidden opacity-0'
-              : 'ml-2 w-auto opacity-100'
+              : 'ml-2 w-auto opacity-100 rtl:mr-2 rtl:ml-0'
           "
         >
           <FeatherIcon
@@ -92,7 +92,7 @@ const dropdownItems = computed(() => {
     if (item.hidden) return
     if (item.type !== 'Separator') {
       _dropdownItems[_dropdownItems.length - 1].items.push(
-        dropdownItemObj(item),
+        dropdownItemObj(item)
       )
     } else {
       _dropdownItems.push({

diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
@@ -56,7 +56,10 @@
         />
       </template>
     </Tabs>
-    <Resizer class="flex flex-col justify-between border-l" side="right">
+    <Resizer
+      class="flex flex-col justify-between border-l rtl:border-r"
+      side="right"
+    >
       <div
         class="flex h-10.5 cursor-copy items-center border-b px-5 py-2.5 text-lg font-medium text-ink-gray-9"
         @click="copyToClipboard(leadId)"
@@ -294,10 +297,8 @@ const showDeleteLinkedDocModal = ref(false)
 const showConvertToDealModal = ref(false)
 const showFilesUploader = ref(false)
 
-const { triggerOnChange, assignees, permissions, document, scripts, error } = useDocument(
-  'CRM Lead',
-  props.leadId,
-)
+const { triggerOnChange, assignees, permissions, document, scripts, error } =
+  useDocument('CRM Lead', props.leadId)
 
 const canDelete = computed(() => permissions.data?.permissions?.delete || false)
 
@@ -308,7 +309,7 @@ watch(error, (err) => {
     errorTitle.value = __(
       err.exc_type == 'DoesNotExistError'
         ? 'Document not found'
-        : 'Error occurred',
+        : 'Error occurred'
     )
     errorMessage.value = __(err.messages?.[0] || 'An error occurred')
   } else {
@@ -336,7 +337,7 @@ watch(
       document._statuses = s.statuses || []
     }
   },
-  { once: true },
+  { once: true }
 )
 
 const breadcrumbs = computed(() => {

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -14,5 +14,5 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require('tailwindcss-rtl')],
 }
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
@@ -80,6 +80,9 @@ export default defineConfig(async ({ mode }) => {
         'interactjs',
       ],
     },
+    server: {
+      allowedHosts: true,
+    },
   }
 
   // Add local frappe-ui alias only in development if the local frappe-ui exists
@@ -89,16 +92,18 @@ export default defineConfig(async ({ mode }) => {
       const fs = await import('node:fs')
       const localFrappeUIPath = path.resolve(__dirname, '../frappe-ui')
       const vitePluginPath = path.resolve(localFrappeUIPath, 'vite.js')
-      
+
       if (fs.existsSync(localFrappeUIPath) && fs.existsSync(vitePluginPath)) {
         config.resolve.alias['frappe-ui'] = localFrappeUIPath
       } else {
-        console.warn('Local frappe-ui directory not found or incomplete, using npm package')
+        console.warn(
+          'Local frappe-ui directory not found or incomplete, using npm package'
+        )
       }
     } catch (error) {
       console.warn(
         'Error checking for local frappe-ui, using npm package:',
-        error.message,
+        error.message
       )
     }
   }
@@ -111,8 +116,11 @@ async function importFrappeUIPlugin(isDev) {
     try {
       // Check if local frappe-ui has the vite plugin file
       const fs = await import('node:fs')
-      const localVitePluginPath = path.resolve(__dirname, '../frappe-ui/vite.js')
-
+      const localVitePluginPath = path.resolve(
+        __dirname,
+        '../frappe-ui/vite.js'
+      )
+
       if (fs.existsSync(localVitePluginPath)) {
         const module = await import('../frappe-ui/vite')
         return module.default
@@ -122,7 +130,7 @@ async function importFrappeUIPlugin(isDev) {
     } catch (error) {
       console.warn(
         'Local frappe-ui not found, falling back to npm package:',
-        error.message,
+        error.message
       )
     }
   }

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -4412,6 +4412,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+tailwindcss-rtl@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/tailwindcss-rtl/-/tailwindcss-rtl-0.9.0.tgz#270da04492081620478ebf73819fc285fe724a54"
+  integrity sha512-y7yC8QXjluDBEFMSX33tV6xMYrf0B3sa+tOB5JSQb6/G6laBU313a+Z+qxu55M1Qyn8tDMttjomsA8IsJD+k+w==
+
 tailwindcss@^3.4.15:
   version "3.4.17"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.17.tgz#ae8406c0f96696a631c790768ff319d46d5e5a63"