Polish business dashboard profile, FA layout, and pagination.

Add a real user profile page with multi-address CRUD, localize business profile, fix RTL category tree and login/sidebar logo fallbacks, and keep pagination controls centered with aligned page meta.

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

apps/business/src/components/BlogCategoryRow.tsx

@@ -37,7 +37,7 @@ export function BlogCategoryRow({
     : category.nameFa
 
   return (
-    <div className={styles.row} style={{ marginLeft: depth * 8 }}>
+    <div className={styles.row} style={{ marginInlineStart: depth * 8 }}>
       <div
         className={`${styles.info} ${hasChildren ? styles.clickable : ''}`}
         onClick={hasChildren ? onToggle : undefined}

apps/business/src/components/CategoryRow.tsx

@@ -47,7 +47,7 @@ export function CategoryRow({
   return (
     <div
       className={styles.row}
-      style={{ marginLeft: depth * 8 }}
+      style={{ marginInlineStart: depth * 8 }}
     >
       <div
         className={`${styles.info} ${hasChildren ? styles.clickable : ''}`}

apps/business/src/components/CategoryTree.module.css

@@ -10,7 +10,7 @@
 
 .childrenInner {
   overflow: hidden;
-  margin-left: 20px;
-  padding-left: 20px;
-  border-left: 2px solid rgba(148, 163, 184, 0.3);
+  margin-inline-start: 20px;
+  padding-inline-start: 20px;
+  border-inline-start: 2px solid rgba(148, 163, 184, 0.3);
 }

apps/business/src/components/Sidebar.module.css

@@ -38,6 +38,26 @@
   background: rgba(255, 255, 255, 0.75);
 }
 
+.brandEditBtn {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 8px;
+  color: var(--text-secondary);
+  background: rgba(var(--primary-rgb) / 0.08);
+  border: 1px dashed rgba(var(--primary-rgb) / 0.35);
+  transition: background 0.2s, color 0.2s, border-color 0.2s;
+}
+
+.brandEditBtn:hover {
+  background: rgba(var(--primary-rgb) / 0.14);
+  color: var(--primary);
+  border-color: rgba(var(--primary-rgb) / 0.5);
+}
+
 .brandText {
   display: flex;
   flex-direction: column;

apps/business/src/components/Sidebar.tsx

@@ -13,6 +13,7 @@ import {
   LogOut,
   ChevronDown,
   Building2,
+  Pencil,
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import { useLocale } from '@meshkee/dashboard-ui'
@@ -25,7 +26,7 @@ import {
 } from '../lib/businessContext'
 import { isAbortError } from '../lib/api'
 import { getBusinessProfile } from '../services/businessProfileService'
-import meshkeeLogo from '../assets/meshkee-logo.png'
+import { Tooltip } from './Tooltip'
 import styles from './Sidebar.module.css'
 
 interface NavChild {
@@ -118,7 +119,6 @@ export function Sidebar() {
         ],
       },
       { type: 'link', id: 'customers', icon: Users, labelKey: 'nav.customers', to: '/customers' },
-      { type: 'link', id: 'settings', icon: Settings, labelKey: 'nav.settings', to: '/settings' },
       {
         type: 'group',
         id: 'blog',
@@ -166,6 +166,7 @@ export function Sidebar() {
           { labelKey: 'nav.website.ePayment', to: '/website/e-payment' },
         ],
       },
+      { type: 'link', id: 'settings', icon: Settings, labelKey: 'nav.settings', to: '/settings' },
     ],
     [],
   )
@@ -218,11 +219,23 @@ export function Sidebar() {
   return (
     <aside className={styles.sidebar}>
       <div className={styles.brand}>
-        <img
-          src={brandLogoUrl ?? meshkeeLogo}
-          alt={brandName || t('app.storeFallback')}
-          className={`${styles.brandLogo} ${brandLogoUrl ? styles.brandLogoUploaded : ''}`}
-        />
+        {brandLogoUrl ? (
+          <img
+            src={brandLogoUrl}
+            alt={brandName || t('app.storeFallback')}
+            className={`${styles.brandLogo} ${styles.brandLogoUploaded}`}
+          />
+        ) : (
+          <Tooltip label={t('sidebar.addLogo')}>
+            <NavLink
+              to="/business-profile"
+              className={styles.brandEditBtn}
+              aria-label={t('sidebar.addLogo')}
+            >
+              <Pencil size={16} />
+            </NavLink>
+          </Tooltip>
+        )}
         <div className={styles.brandText}>
           <span className={styles.brandName}>{brandName || fallbackBusinessName}</span>
           <span className={styles.brandDomain}>{businessDomain}</span>