Add logo aspect ratios and businesses renewal sort with low-SMS alert.

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

apps/business/src/i18n/messages.ts

@@ -150,6 +150,7 @@ const en = {
   'bizProfile.logo.change': 'Change logo',
   'bizProfile.logo.lightTheme': 'Logo for light theme',
   'bizProfile.logo.darkTheme': 'Logo for dark theme',
+  'bizProfile.logo.aspectAria': 'Logo aspect ratio',
   'bizProfile.favicon': 'Favicon',
   'bizProfile.favicon.upload': 'Upload favicon',
   'bizProfile.favicon.hint': 'Square PNG recommended',
@@ -2695,6 +2696,7 @@ const fa: Record<MessageKey, string> = {
   'bizProfile.logo.change': 'تغییر لوگو',
   'bizProfile.logo.lightTheme': 'لوگو در تم روشن',
   'bizProfile.logo.darkTheme': 'لوگو در تم تیره',
+  'bizProfile.logo.aspectAria': 'نسبت تصویر لوگو',
   'bizProfile.favicon': 'فاوآیکن',
   'bizProfile.favicon.upload': 'آپلود فاوآیکن',
   'bizProfile.favicon.hint': 'PNG مربعی توصیه می‌شود',

apps/business/src/pages/BusinessProfilePage.module.css

@@ -40,8 +40,30 @@
   margin-bottom: 0;
 }
 
-.logoLightCol,
+.logosBlock {
-.logoDarkCol,
+  grid-column: span 12;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.logosPair {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px 16px;
+  width: 100%;
+  min-width: 0;
+}
+
+.logoField {
+  min-width: 0;
+  margin-bottom: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 .faviconCol {
   grid-column: span 12;
   min-width: 0;
@@ -229,12 +251,8 @@
 }
 
 @media (min-width: 1280px) {
-  .logoLightCol {
+  .logosBlock {
-    grid-column: span 2;
+    grid-column: span 4;
-  }
-
-  .logoDarkCol {
-    grid-column: span 2;
   }
 
   .faviconCol {

apps/business/src/pages/BusinessProfilePage.tsx

@@ -39,6 +39,14 @@ import styles from './BusinessProfilePage.module.css'
 
 type AddressDraft = AddressListItem
 
+type LogoAspectId = '1:1' | '3:2' | '16:9'
+
+const LOGO_ASPECTS: { id: LogoAspectId; aspect: number }[] = [
+  { id: '1:1', aspect: 1 },
+  { id: '3:2', aspect: 3 / 2 },
+  { id: '16:9', aspect: 16 / 9 },
+]
+
 const EMPTY_SOCIAL: BusinessSocialMedia = {
   whatsapp: '',
   telegram: '',
@@ -82,6 +90,7 @@ export function BusinessProfilePage() {
   const [logoMediaId, setLogoMediaId] = useState<string | null>(null)
   const [logoDark, setLogoDark] = useState<string | null>(null)
   const [logoDarkMediaId, setLogoDarkMediaId] = useState<string | null>(null)
+  const [logoAspect, setLogoAspect] = useState<LogoAspectId>('1:1')
   const [favicon, setFavicon] = useState<string | null>(null)
   const [faviconMediaId, setFaviconMediaId] = useState<string | null>(null)
   const [addresses, setAddresses] = useState<AddressDraft[]>([createEmptyAddressItem()])
@@ -94,6 +103,22 @@ export function BusinessProfilePage() {
     () => flattenBusinessActivityCategories(activityCategories),
     [activityCategories],
   )
+  const selectedLogoAspect =
+    LOGO_ASPECTS.find((option) => option.id === logoAspect)?.aspect ?? 1
+
+  function handleLogoAspectChange(next: LogoAspectId) {
+    if (next === logoAspect) return
+    setLogoAspect(next)
+    // Applied crops are locked to the old ratio — drop them so the user recrops.
+    if (logo) {
+      setLogo(null)
+      setLogoMediaId(null)
+    }
+    if (logoDark) {
+      setLogoDark(null)
+      setLogoDarkMediaId(null)
+    }
+  }
 
   const addressLabels = useMemo(
     () => ({
@@ -378,32 +403,60 @@ export function BusinessProfilePage() {
         <section className={styles.section}>
           <h3 className={styles.sectionTitle}>{t('bizProfile.section.basic')}</h3>
           <div className={formStyles.formGrid}>
-            <div className={`${formStyles.field} ${styles.logoLightCol}`}>
+            <div className={styles.logosBlock}>
-              <label className={styles.mediaFieldLabel}>{t('bizProfile.logo.lightTheme')}</label>
+              <div className={styles.logosPair}>
-              <ImageCropper
+                <div className={`${formStyles.field} ${styles.logoField}`}>
-                compact
+                  <label className={styles.mediaFieldLabel}>{t('bizProfile.logo.lightTheme')}</label>
-                value={logo}
+                  <ImageCropper
-                onChange={setLogo}
+                    compact
-                outputFormat="png"
+                    value={logo}
-                accept="image/png"
+                    onChange={setLogo}
-                uploadLabel={t('bizProfile.logo.upload')}
+                    aspect={selectedLogoAspect}
-                hint={t('bizProfile.logo.hint')}
+                    outputFormat="png"
-                changeLabel={t('bizProfile.logo.change')}
+                    accept="image/png"
-              />
+                    uploadLabel={t('bizProfile.logo.upload')}
-            </div>
+                    hint={t('bizProfile.logo.hint')}
+                    changeLabel={t('bizProfile.logo.change')}
+                  />
+                </div>
 
-            <div className={`${formStyles.field} ${styles.logoDarkCol}`}>
+                <div className={`${formStyles.field} ${styles.logoField}`}>
-              <label className={styles.mediaFieldLabel}>{t('bizProfile.logo.darkTheme')}</label>
+                  <label className={styles.mediaFieldLabel}>{t('bizProfile.logo.darkTheme')}</label>
-              <ImageCropper
+                  <ImageCropper
-                compact
+                    compact
-                value={logoDark}
+                    value={logoDark}
-                onChange={setLogoDark}
+                    onChange={setLogoDark}
-                outputFormat="png"
+                    aspect={selectedLogoAspect}
-                accept="image/png"
+                    outputFormat="png"
-                uploadLabel={t('bizProfile.logo.upload')}
+                    accept="image/png"
-                hint={t('bizProfile.logo.hint')}
+                    uploadLabel={t('bizProfile.logo.upload')}
-                changeLabel={t('bizProfile.logo.change')}
+                    hint={t('bizProfile.logo.hint')}
-              />
+                    changeLabel={t('bizProfile.logo.change')}
+                  />
+                </div>
+              </div>
+
+              <div
+                className={formStyles.aspectSwitch}
+                role="radiogroup"
+                aria-label={t('bizProfile.logo.aspectAria')}
+              >
+                {LOGO_ASPECTS.map((option) => (
+                  <button
+                    key={option.id}
+                    type="button"
+                    role="radio"
+                    aria-checked={logoAspect === option.id}
+                    className={`${formStyles.aspectSwitchBtn} ${
+                      logoAspect === option.id ? formStyles.aspectSwitchBtnSelected : ''
+                    }`}
+                    onClick={() => handleLogoAspectChange(option.id)}
+                    disabled={isSaving}
+                  >
+                    {option.id}
+                  </button>
+                ))}
+              </div>
             </div>
 
             <div className={`${formStyles.field} ${styles.faviconCol}`}>
@@ -412,6 +465,7 @@ export function BusinessProfilePage() {
                 compact
                 value={favicon}
                 onChange={setFavicon}
+                aspect={1}
                 outputFormat="png"
                 accept="image/png"
                 uploadLabel={t('bizProfile.favicon.upload')}

apps/super-admin/src/pages/BusinessesPage.module.css

@@ -58,6 +58,43 @@
   flex-shrink: 0;
 }
 
+.lowSmsAlert {
+  margin: 12px 0 0;
+  padding: 10px 14px;
+  border-radius: var(--radius);
+  font-size: 13px;
+  line-height: 1.45;
+  background: rgba(239, 68, 68, 0.08);
+  border: 1px solid rgba(239, 68, 68, 0.28);
+  color: #b91c1c;
+}
+
+.lowSmsAlertLabel {
+  font-weight: 600;
+}
+
+.lowSmsAlertLink {
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.lowSmsAlertLink:hover {
+  color: #991b1b;
+}
+
+.lowSmsAlertBalance {
+  font-variant-numeric: tabular-nums;
+  opacity: 0.9;
+}
+
 .field {
   display: flex;
   flex-direction: column;
@@ -440,6 +477,13 @@
   transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
 }
 
+.btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
 .btnPrimary {
   color: white;
   background: linear-gradient(135deg, var(--primary-glow) 0%, var(--primary) 55%, var(--primary-dark) 100%);

apps/super-admin/src/pages/BusinessesPage.tsx

@@ -333,6 +333,7 @@ export function BusinessesPage() {
   const [draftName, setDraftName] = useState('')
   const [draftDomain, setDraftDomain] = useState('')
   const [draftCategory, setDraftCategory] = useState('')
+  const [draftSort, setDraftSort] = useState<'created' | 'renewal'>('created')
 
   const [editOpen, setEditOpen] = useState(false)
   const [editBusiness, setEditBusiness] = useState<BusinessListItem | null>(null)
@@ -484,7 +485,7 @@ export function BusinessesPage() {
     return () => {
       controller.abort()
     }
-  }, [page, pageSize, appliedFilters.name, appliedFilters.domain, appliedFilters.category])
+  }, [page, pageSize, appliedFilters.name, appliedFilters.domain, appliedFilters.category, appliedFilters.sort])
 
   const totalPages = useMemo(() => {
     const total = data?.total ?? 0
@@ -509,6 +510,7 @@ export function BusinessesPage() {
       ...(draftName.trim() ? { name: draftName.trim() } : {}),
       ...(draftDomain.trim() ? { domain: draftDomain.trim() } : {}),
       ...(draftCategory.trim() ? { category: draftCategory.trim() } : {}),
+      ...(draftSort !== 'created' ? { sort: draftSort } : {}),
     })
   }
 
@@ -516,6 +518,7 @@ export function BusinessesPage() {
     setDraftName('')
     setDraftDomain('')
     setDraftCategory('')
+    setDraftSort('created')
     setPage(1)
     setAppliedFilters({})
   }
@@ -1503,6 +1506,32 @@ export function BusinessesPage() {
                 aria-label="Category"
               />
             </div>
+
+            <div className={styles.field}>
+              <select
+                id="filter-sort"
+                value={draftSort}
+                onChange={(e) => {
+                  const sort = e.target.value === 'renewal' ? 'renewal' : 'created'
+                  setDraftSort(sort)
+                  setPage(1)
+                  setAppliedFilters((prev) => {
+                    const next = { ...prev }
+                    if (sort === 'created') {
+                      delete next.sort
+                    } else {
+                      next.sort = sort
+                    }
+                    return next
+                  })
+                }}
+                aria-label="Sort by"
+                title="Sort by"
+              >
+                <option value="created">Date created</option>
+                <option value="renewal">Nearest renewal</option>
+              </select>
+            </div>
           </div>
 
           <div className={styles.filterActions}>
@@ -1529,6 +1558,43 @@ export function BusinessesPage() {
         </form>
       </div>
 
+      {data?.lowSmsBusinesses && data.lowSmsBusinesses.length > 0 && (
+        <div className={styles.lowSmsAlert} role="status">
+          <span className={styles.lowSmsAlertLabel}>
+            Low SMS credits (&lt; {data.lowSmsThreshold ?? 100}):
+          </span>{' '}
+          {data.lowSmsBusinesses.map((b, i) => (
+            <span key={String(b.id)}>
+              {i > 0 ? ', ' : ''}
+              <button
+                type="button"
+                className={styles.lowSmsAlertLink}
+                onClick={() => {
+                  const match = data.items.find((item) => String(item.id) === String(b.id))
+                  if (match) {
+                    openSmsSettings(match)
+                    return
+                  }
+                  setDraftName(b.name)
+                  setPage(1)
+                  setAppliedFilters((prev) => ({
+                    ...prev,
+                    name: b.name,
+                  }))
+                }}
+              >
+                {b.name}
+                {b.domain ? ` (${b.domain})` : ''}
+              </button>
+              <span className={styles.lowSmsAlertBalance}>
+                {' '}
+                · {b.smsBalance.toLocaleString('en-US')}
+              </span>
+            </span>
+          ))}
+        </div>
+      )}
+
       <div className={styles.tablePanel}>
         <div className={styles.tableWrap}>
           <div className={styles.tableHeader}>

apps/super-admin/src/services/businessService.ts

@@ -15,6 +15,8 @@ export interface ListBusinessesParams {
   name?: string
   domain?: string
   category?: string
+  /** Default: created (newest first). renewal = nearest next/overdue renewal. */
+  sort?: 'created' | 'renewal'
 }
 
 export interface UpdateBusinessPayload {
@@ -61,6 +63,7 @@ export async function listBusinesses(params: ListBusinessesParams, signal?: Abor
   if (params.name) q.set('name', params.name)
   if (params.domain) q.set('domain', params.domain)
   if (params.category) q.set('category', params.category)
+  if (params.sort && params.sort !== 'created') q.set('sort', params.sort)
 
   const query = q.toString()
   const path = `/businesses${query ? `?${query}` : ''}`

apps/super-admin/src/types/business.ts

@@ -137,5 +137,13 @@ export interface BusinessesListResponse {
   total: number
   page: number
   pageSize: number
+  /** Businesses with prepaid SMS credits below lowSmsThreshold (all pages). */
+  lowSmsBusinesses?: Array<{
+    id: string
+    name: string
+    domain: string | null
+    smsBalance: number
+  }>
+  lowSmsThreshold?: number
 }