feat(dashboard): support RTL in dashboard (#11252)

* fix: add direction attribute to components and adjust styles for RTL support

* fix(data-grid): comment it out

* Added useDocumentDirection hook

* refactor: Integrate useDocumentDirection hook

* refactor: Standardize direction prop usage across components

* resolve

* fix: resolve build errors

* fix : remove unused useDocument

* Apply RTL styles for some components

* Create smooth-gorillas-hide.md

* refactor: update some styles for RTL support

---------

Co-authored-by: William Bouchard <46496014+willbouch@users.noreply.github.com>

packages/admin/dashboard/src/hooks/use-document-direction.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react"
+
+/**
+ * Hook to get the current document direction (ltr/rtl) and listen for changes
+ * @returns The current document direction as "ltr" | "rtl" | undefined
+ */
+export const useDocumentDirection = (): "ltr" | "rtl" | undefined => {
+  const [direction, setDirection] = useState<"ltr" | "rtl" | undefined>(() => {
+    // Initialize with current value
+    if (typeof document !== "undefined") {
+      return (
+        (document.documentElement.getAttribute("dir") as "ltr" | "rtl") ||
+        undefined
+      )
+    }
+    return undefined
+  })
+
+  useEffect(() => {
+    // Only run on client side
+    if (typeof document === "undefined") {
+      return
+    }
+
+    // Create a MutationObserver to watch for changes to the dir attribute
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "dir" &&
+          mutation.target === document.documentElement
+        ) {
+          const newDirection = document.documentElement.getAttribute("dir") as
+            | "ltr"
+            | "rtl"
+          setDirection(newDirection || undefined)
+        }
+      })
+    })
+
+    // Start observing the document element for attribute changes
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["dir"],
+    })
+
+    // Cleanup observer on unmount
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  return direction
+}