meshkee-app/dashboards
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-09-18 17:17:59 +03:30
co-authored by Cursor
parent e020c74fb1
commit c24f6c06f7
7 changed files with 229 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/business/src/i18n/messages.ts
+2
View File
@@ -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
+26 -8
View File
@@ -40,8 +40,30 @@
margin-bottom: 0;
}
.logoLightCol,
.logoDarkCol,
.logosBlock {
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 {
grid-column: span 2;
}
.logoDarkCol {
grid-column: span 2;
.logosBlock {
grid-column: span 4;
}
.faviconCol {
apps/business/src/pages/BusinessProfilePage.tsx
+79 -25
View File
@@ -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}`}>
<label className={styles.mediaFieldLabel}>{t('bizProfile.logo.lightTheme')}</label>
<ImageCropper
compact
value={logo}
onChange={setLogo}
outputFormat="png"
accept="image/png"
uploadLabel={t('bizProfile.logo.upload')}
hint={t('bizProfile.logo.hint')}
changeLabel={t('bizProfile.logo.change')}
/>
</div>
<div className={styles.logosBlock}>
<div className={styles.logosPair}>
<div className={`${formStyles.field} ${styles.logoField}`}>
<label className={styles.mediaFieldLabel}>{t('bizProfile.logo.lightTheme')}</label>
<ImageCropper
compact
value={logo}
onChange={setLogo}
aspect={selectedLogoAspect}
outputFormat="png"
accept="image/png"
uploadLabel={t('bizProfile.logo.upload')}
hint={t('bizProfile.logo.hint')}
changeLabel={t('bizProfile.logo.change')}
/>
</div>
<div className={`${formStyles.field} ${styles.logoDarkCol}`}>
<label className={styles.mediaFieldLabel}>{t('bizProfile.logo.darkTheme')}</label>
<ImageCropper
compact
value={logoDark}
onChange={setLogoDark}
outputFormat="png"
accept="image/png"
uploadLabel={t('bizProfile.logo.upload')}
hint={t('bizProfile.logo.hint')}
changeLabel={t('bizProfile.logo.change')}
/>
<div className={`${formStyles.field} ${styles.logoField}`}>
<label className={styles.mediaFieldLabel}>{t('bizProfile.logo.darkTheme')}</label>
<ImageCropper
compact
value={logoDark}
onChange={setLogoDark}
aspect={selectedLogoAspect}
outputFormat="png"
accept="image/png"
uploadLabel={t('bizProfile.logo.upload')}
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
+44
View File
@@ -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
+67 -1
View File
@@ -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
+3
View File
@@ -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
+8
View File
@@ -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
}