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>

apps/business/src/components/StoreSpecialCarousel.tsx

@@ -1,5 +1,7 @@
 import { ChevronLeft, ChevronRight, Pencil, Plus, Trash2 } from 'lucide-react'
 import { useRef } from 'react'
+import { useLocale } from '@meshkee/dashboard-ui'
+import { useT } from '../i18n/useT'
 import type { StoreSpecial } from '../types/storeSpecial'
 import { specialItemsToListings } from '../utils/storeSpecialListings'
 import type { StoreProductListing } from '../utils/storeProductGroups'
@@ -33,6 +35,9 @@ export function StoreSpecialCarousel({
   onRemoveListing,
   onAddToCart,
 }: StoreSpecialCarouselProps) {
+  const t = useT()
+  const { locale } = useLocale()
+  const isFa = locale === 'fa'
   const trackRef = useRef<HTMLDivElement>(null)
   const listings = specialItemsToListings(special.items)
 
@@ -43,85 +48,101 @@ export function StoreSpecialCarousel({
     track.scrollBy({ left: direction * amount, behavior: 'smooth' })
   }
 
+  const addCard = (
+    <div className={styles.cardSlot}>
+      <Tooltip label={t('website.specialItems.addItemsTo', { title: special.title })}>
+        <button
+          type="button"
+          className={styles.addCard}
+          onClick={() => onAddItems(special)}
+          aria-label={t('website.specialItems.addItemsTo', { title: special.title })}
+        >
+          <span className={styles.addIcon}>
+            <Plus size={28} />
+          </span>
+        </button>
+      </Tooltip>
+    </div>
+  )
+
+  const itemCards = listings.map((listing) => (
+    <div key={listing.storeItemId} className={styles.cardSlot}>
+      <StoreItemCard
+        listing={listing}
+        onOpen={onOpenListing}
+        onEdit={onEditListing}
+        onDiscount={onDiscountListing}
+        onFestival={onFestivalListing}
+        onRemove={() => onRemoveListing(special, listing)}
+        onAddToCart={onAddToCart}
+        removeTooltip={t('website.specialItems.removeFromSpecial')}
+      />
+    </div>
+  ))
+
   return (
     <section className={styles.section}>
       <div className={styles.header}>
         <h3 className={styles.title}>{special.title}</h3>
         <div className={styles.headerActions}>
-          <Tooltip label="Edit category">
+          <Tooltip label={t('website.specialItems.editCategory')}>
             <button
               type="button"
               className={controlStyles.controlBtn}
               onClick={() => onEditSpecial(special)}
-              aria-label="Edit category"
+              aria-label={t('website.specialItems.editCategory')}
             >
               <Pencil size={16} />
             </button>
           </Tooltip>
-          <Tooltip label="Delete category">
+          <Tooltip label={t('website.specialItems.deleteCategory')}>
             <button
               type="button"
               className={`${controlStyles.controlBtn} ${controlStyles.danger}`}
               onClick={() => onDeleteSpecial(special)}
-              aria-label="Delete category"
+              aria-label={t('website.specialItems.deleteCategory')}
             >
               <Trash2 size={16} />
             </button>
           </Tooltip>
-          <Tooltip label="Scroll left">
-            <button
-              type="button"
-              className={styles.navBtn}
-              onClick={() => scrollBy(-1)}
-              aria-label="Scroll left"
-            >
-              <ChevronLeft size={18} />
-            </button>
-          </Tooltip>
-          <Tooltip label="Scroll right">
-            <button
-              type="button"
-              className={styles.navBtn}
-              onClick={() => scrollBy(1)}
-              aria-label="Scroll right"
-            >
-              <ChevronRight size={18} />
-            </button>
-          </Tooltip>
+          <div className={styles.navPair} dir="ltr">
+            <Tooltip label={t('website.specialItems.scrollLeft')}>
+              <button
+                type="button"
+                className={styles.navBtn}
+                onClick={() => scrollBy(-1)}
+                aria-label={t('website.specialItems.scrollLeft')}
+              >
+                <ChevronLeft size={18} />
+              </button>
+            </Tooltip>
+            <Tooltip label={t('website.specialItems.scrollRight')}>
+              <button
+                type="button"
+                className={styles.navBtn}
+                onClick={() => scrollBy(1)}
+                aria-label={t('website.specialItems.scrollRight')}
+              >
+                <ChevronRight size={18} />
+              </button>
+            </Tooltip>
+          </div>
         </div>
       </div>
 
       <div className={styles.trackWrap}>
-        <div className={styles.track} ref={trackRef}>
-          <div className={styles.cardSlot}>
-            <Tooltip label={`Add store items to ${special.title}`}>
-              <button
-                type="button"
-                className={styles.addCard}
-                onClick={() => onAddItems(special)}
-                aria-label={`Add store items to ${special.title}`}
-              >
-                <span className={styles.addIcon}>
-                  <Plus size={28} />
-                </span>
-              </button>
-            </Tooltip>
-          </div>
-
-          {listings.map((listing) => (
-            <div key={listing.storeItemId} className={styles.cardSlot}>
-              <StoreItemCard
-                listing={listing}
-                onOpen={onOpenListing}
-                onEdit={onEditListing}
-                onDiscount={onDiscountListing}
-                onFestival={onFestivalListing}
-                onRemove={() => onRemoveListing(special, listing)}
-                onAddToCart={onAddToCart}
-                removeTooltip="Remove from special"
-              />
-            </div>
-          ))}
+        <div className={styles.track} ref={trackRef} dir={isFa ? 'rtl' : 'ltr'}>
+          {isFa ? (
+            <>
+              {addCard}
+              {itemCards}
+            </>
+          ) : (
+            <>
+              {itemCards}
+              {addCard}
+            </>
+          )}
         </div>
       </div>
     </section>