Polish business FA layout and wire special-group keys plus SSL sync.

RTL carousels/FABs, special key+title fields, slider gallery fixes, and dashboard SSL sync agent for super-admin.

Co-authored-by: Cursor <cursoragent@cursor.com>

packages/dashboard-ui/src/components/Pagination.module.css

@@ -16,9 +16,12 @@
 .navBtn {
   width: 38px;
   height: 38px;
-  display: flex;
+  box-sizing: border-box;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
+  padding: 0;
+  line-height: 0;
   border-radius: var(--radius-sm);
   color: var(--text-secondary);
   background: var(--glass-bg);
@@ -26,6 +29,11 @@
   transition: background 0.2s, color 0.2s, opacity 0.2s;
 }
 
+.navBtn svg {
+  display: block;
+  flex-shrink: 0;
+}
+
 .navBtn:hover:not(:disabled) {
   background: rgba(var(--primary-rgb) / 0.1);
   color: var(--primary);
@@ -45,9 +53,15 @@
 .pageBtn {
   min-width: 38px;
   height: 38px;
-  padding: 0 10px;
+  box-sizing: border-box;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
   font-size: 14px;
   font-weight: 500;
+  font-family: var(--font-ui, inherit);
   color: var(--text-secondary);
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);

packages/dashboard-ui/src/components/Pagination.tsx

@@ -1,4 +1,6 @@
+import { useContext } from 'react'
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react'
+import { LocaleContext } from '../context/LocaleContext'
 import styles from './Pagination.module.css'
 
 export interface PaginationProps {
@@ -38,6 +40,12 @@ export function Pagination({
   variant = 'default',
   className,
 }: PaginationProps) {
+  const locale = useContext(LocaleContext)
+  const dir =
+    locale?.dir ??
+    (typeof document !== 'undefined' && document.documentElement.dir === 'rtl' ? 'rtl' : 'ltr')
+  const isRtl = dir === 'rtl'
+
   if (totalPages <= 1) return null
 
   const pages = buildPageWindow(currentPage, totalPages, siblingCount)
@@ -49,8 +57,13 @@ export function Pagination({
     .filter(Boolean)
     .join(' ')
 
+  const FirstIcon = isRtl ? ChevronsRight : ChevronsLeft
+  const PrevIcon = isRtl ? ChevronRight : ChevronLeft
+  const NextIcon = isRtl ? ChevronLeft : ChevronRight
+  const LastIcon = isRtl ? ChevronsLeft : ChevronsRight
+
   return (
-    <nav className={rootClass} aria-label={ariaLabel}>
+    <nav className={rootClass} aria-label={ariaLabel} dir={dir}>
       <button
         type="button"
         className={styles.navBtn}
@@ -58,7 +71,7 @@ export function Pagination({
         disabled={disabled || currentPage === 1}
         aria-label="First page"
       >
-        <ChevronsLeft size={18} />
+        <FirstIcon size={18} />
       </button>
 
       <button
@@ -68,7 +81,7 @@ export function Pagination({
         disabled={disabled || currentPage === 1}
         aria-label="Previous page"
       >
-        <ChevronLeft size={18} />
+        <PrevIcon size={18} />
       </button>
 
       <div className={styles.pages}>
@@ -94,7 +107,7 @@ export function Pagination({
         disabled={disabled || currentPage === totalPages}
         aria-label="Next page"
       >
-        <ChevronRight size={18} />
+        <NextIcon size={18} />
       </button>
 
       <button
@@ -104,7 +117,7 @@ export function Pagination({
         disabled={disabled || currentPage === totalPages}
         aria-label="Last page"
       >
-        <ChevronsRight size={18} />
+        <LastIcon size={18} />
       </button>
     </nav>
   )

packages/dashboard-ui/src/context/LocaleContext.tsx

@@ -24,6 +24,8 @@ interface LocaleContextValue {
 
 const LocaleContext = createContext<LocaleContextValue | null>(null)
 
+export { LocaleContext }
+
 export function LocaleProvider({
   children,
   defaultLocale = 'fa',