Use compact unlabeled filter rows across Super Admin lists.

Also ship pending add-customer name flexibility, store-gated e-payment settings, and logo-only customer login branding.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-09-09 12:32:18 +03:30
co-authored by Cursor
parent 29a190f02a
commit 15aad9f9d8
10 changed files with 62 additions and 44 deletions
@@ -70,14 +70,20 @@ export function AddCustomerModal({ open, onClose, onCreated }: AddCustomerModalP
if (!mounted) return null
const canSubmit =
firstName.trim().length >= 2 &&
lastName.trim().length >= 2 &&
(firstName.trim().length >= 1 || lastName.trim().length >= 1) &&
toE164CellNumber(cellNumber.trim()).length > 0
async function handleSubmit() {
const normalizedCell = toE164CellNumber(cellNumber.trim())
if (!canSubmit || !normalizedCell) return
const trimmedFirst = firstName.trim()
const trimmedLast = lastName.trim()
if (!trimmedFirst && !trimmedLast) {
setError(t('customers.addModal.errorNameRequired'))
return
}
const trimmedPassword = password.trim()
if (trimmedPassword || passwordConfirm.trim()) {
if (trimmedPassword.length < 8) {
@@ -105,8 +111,8 @@ export function AddCustomerModal({ open, onClose, onCreated }: AddCustomerModalP
try {
const created = await createCustomer({
cellNumber: normalizedCell,
firstName: firstName.trim(),
lastName: lastName.trim(),
...(trimmedFirst ? { firstName: trimmedFirst } : {}),
...(trimmedLast ? { lastName: trimmedLast } : {}),
...(trimmedFirstEn ? { firstNameEn: trimmedFirstEn } : {}),
...(trimmedLastEn ? { lastNameEn: trimmedLastEn } : {}),
...(trimmedPassword ? { password: trimmedPassword } : {}),
+6 -4
View File
@@ -1162,11 +1162,11 @@ const en = {
'customers.addModal.subtitle':
'Creates a verified customer account or links an existing user to your business.',
'customers.addModal.hint':
'Password is required only for new accounts. Existing users are added as verified customers.',
'Password is optional. New accounts without a password can still sign in with SMS OTP.',
'customers.addModal.pointCreate':
'Creates a verified customer account or links an existing user to your business.',
'customers.addModal.pointPassword':
'Password is required only for new accounts. Existing users are added as verified customers.',
'Password is optional. New accounts without a password can still sign in with SMS OTP.',
'customers.addModal.firstName': 'First name',
'customers.addModal.lastName': 'Last name',
'customers.addModal.firstNameFa': 'First name (FA)',
@@ -1182,6 +1182,7 @@ const en = {
'customers.addModal.cancel': 'Cancel',
'customers.addModal.submit': 'Add customer',
'customers.addModal.error': 'Unable to add customer.',
'customers.addModal.errorNameRequired': 'Enter a first name or last name.',
'customers.addModal.errorPasswordMatch': 'Passwords do not match.',
'customers.addModal.errorPasswordLength': 'Password must be at least 8 characters.',
'customers.addModal.errorNameEnLength': 'English names must be at least 2 characters.',
@@ -3631,11 +3632,11 @@ const fa: Record<MessageKey, string> = {
'customers.addModal.subtitle':
'یک حساب تأییدشده مشتری می‌سازد یا کاربر موجود را به کسب‌وکار شما وصل می‌کند.',
'customers.addModal.hint':
'رمز عبور فقط برای حساب‌های جدید لازم است. کاربران موجود به‌عنوان مشتری تأییدشده اضافه می‌شوند.',
'رمز عبور اختیاری است. حساب‌های جدید بدون رمز می‌توانند با پیامک (OTP) وارد شوند.',
'customers.addModal.pointCreate':
'یک حساب تأییدشده مشتری می‌سازد یا کاربر موجود را به کسب‌وکار شما وصل می‌کند.',
'customers.addModal.pointPassword':
'رمز عبور فقط برای حساب‌های جدید لازم است. کاربران موجود به‌عنوان مشتری تأییدشده اضافه می‌شوند.',
'رمز عبور اختیاری است. حساب‌های جدید بدون رمز می‌توانند با پیامک (OTP) وارد شوند.',
'customers.addModal.firstName': 'نام',
'customers.addModal.lastName': 'نام خانوادگی',
'customers.addModal.firstNameFa': 'نام (فارسی)',
@@ -3651,6 +3652,7 @@ const fa: Record<MessageKey, string> = {
'customers.addModal.cancel': 'انصراف',
'customers.addModal.submit': 'افزودن مشتری',
'customers.addModal.error': 'افزودن مشتری ممکن نشد.',
'customers.addModal.errorNameRequired': 'نام یا نام خانوادگی را وارد کنید.',
'customers.addModal.errorPasswordMatch': 'رمزهای عبور یکسان نیستند.',
'customers.addModal.errorPasswordLength': 'رمز عبور باید حداقل ۸ کاراکتر باشد.',
'customers.addModal.errorNameEnLength': 'نام انگلیسی باید حداقل ۲ کاراکتر باشد.',
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
import { RefreshCw } from 'lucide-react'
import { Breadcrumbs } from '../components/Breadcrumbs'
import { PageTitle } from '../components/PageTitle'
import { useTenantBranding } from '../context/TenantBrandingContext'
import { useToast } from '../context/ToastContext'
import { useT } from '../i18n/useT'
import { ApiError } from '../lib/api'
@@ -42,6 +43,8 @@ function resolveSitemapUrl(config: WebsiteSitemapConfig | null): string {
export function WebsiteSettingsPage() {
const t = useT()
const { showToast } = useToast()
const { enabledModules } = useTenantBranding()
const storeModuleEnabled = hasBusinessModule(enabledModules, 'store')
const [source, setSource] = useState<SpecialProductsSource>('product')
const [sitemapConfig, setSitemapConfig] = useState<WebsiteSitemapConfig | null>(null)
const [isLoading, setIsLoading] = useState(true)
@@ -219,9 +222,11 @@ export function WebsiteSettingsPage() {
)}
</section>
<div className={`${styles.ePaymentBlock} ${settingsStyles.stack}`}>
<EPaymentSettingsSection />
</div>
{storeModuleEnabled ? (
<div className={`${styles.ePaymentBlock} ${settingsStyles.stack}`}>
<EPaymentSettingsSection />
</div>
) : null}
</main>
)
}
@@ -78,8 +78,8 @@ export interface UpdateCustomerPayload {
export interface CreateCustomerPayload {
cellNumber: string
firstName: string
lastName: string
firstName?: string
lastName?: string
firstNameEn?: string
lastNameEn?: string
password?: string
+1 -2
View File
@@ -20,7 +20,6 @@ import { LanguageSelect, PasswordStrengthMeter, isPasswordStrong, useLocale, use
import { useT } from '../i18n/useT'
import { safeRedirectPath } from '../lib/redirect'
import { BackgroundOrbs } from '../components/BackgroundOrbs'
import meshkeeLogo from '../assets/meshkee-logo.png'
import styles from './LoginPage.module.css'
type AuthView = 'login' | 'signup' | 'forgot' | 'otp'
@@ -395,7 +394,7 @@ export function LoginPage() {
<div className={styles.page}>
<BackgroundOrbs />
<div className={styles.brand}>
<img src={logoUrl || meshkeeLogo} alt="" className={styles.logo} />
{logoUrl ? <img src={logoUrl} alt="" className={styles.logo} /> : null}
<div className={styles.brandText}>
<span className={styles.domain} lang={locale === 'fa' ? 'fa' : undefined}>
{businessName || tenantDomain}
@@ -1,5 +1,5 @@
.filtersPanel {
padding: 14px 16px;
padding: 10px 14px;
background: var(--glass-bg);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
@@ -15,8 +15,8 @@
.filtersGrid {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
align-items: end;
gap: 8px 12px;
align-items: center;
margin: 0;
padding: 0;
border: none;
@@ -26,8 +26,9 @@
display: flex;
flex: 1;
flex-wrap: wrap;
gap: 10px 12px;
gap: 8px 12px;
min-width: 0;
align-items: center;
}
/* Equal width fields; same 12px gap as field→action buttons.
@@ -36,6 +37,16 @@
flex: 1 1 160px;
max-width: 280px;
min-width: 0;
gap: 0;
margin-top: 0;
}
.filtersInputs > .field + .field {
margin-top: 0;
}
.filtersPanel .field label {
display: none;
}
.filterActions {
@@ -369,8 +380,8 @@
}
.iconActionBtn {
width: 40px;
height: 40px;
width: var(--field-height);
height: var(--field-height);
flex-shrink: 0;
display: flex;
align-items: center;
@@ -1472,37 +1472,35 @@ export function BusinessesPage() {
</div>
<div className={styles.filtersPanel}>
<div className={styles.filtersTitle}>Filters</div>
<form className={styles.filtersGrid} onSubmit={(e) => { e.preventDefault(); applyFilters() }}>
<div className={styles.filtersInputs}>
<div className={styles.field}>
<label htmlFor="filter-name">Name</label>
<input
id="filter-name"
value={draftName}
onChange={(e) => setDraftName(e.target.value)}
placeholder="Search by business name"
placeholder="Name"
aria-label="Name"
/>
</div>
<div className={styles.field}>
<label htmlFor="filter-domain">Domain</label>
<input
id="filter-domain"
value={draftDomain}
onChange={(e) => setDraftDomain(e.target.value)}
placeholder="shop-a.local"
placeholder="Domain"
aria-label="Domain"
/>
</div>
<div className={styles.field}>
<label htmlFor="filter-category">Category</label>
<input
id="filter-category"
value={draftCategory}
onChange={(e) => setDraftCategory(e.target.value)}
placeholder="e.g. electronics / phones"
placeholder="Category"
aria-label="Category"
/>
</div>
</div>
@@ -202,7 +202,6 @@ export function SmsTemplatesPage() {
{error ? <p className={styles.alertError}>{error}</p> : null}
<div className={tableStyles.filtersPanel}>
<div className={tableStyles.filtersTitle}>Filters</div>
<form
className={tableStyles.filtersGrid}
onSubmit={(e) => {
@@ -212,31 +211,31 @@ export function SmsTemplatesPage() {
>
<div className={tableStyles.filtersInputs}>
<div className={tableStyles.field}>
<label htmlFor="sms-template-name">Name</label>
<input
id="sms-template-name"
value={draftName}
onChange={(e) => setDraftName(e.target.value)}
placeholder="Search by name"
placeholder="Name"
aria-label="Name"
disabled={loading}
/>
</div>
<div className={tableStyles.field}>
<label htmlFor="sms-template-business">Business</label>
<input
id="sms-template-business"
value={draftBusiness}
onChange={(e) => setDraftBusiness(e.target.value)}
placeholder="Search by business"
placeholder="Business"
aria-label="Business"
disabled={loading}
/>
</div>
<div className={tableStyles.field}>
<label htmlFor="sms-template-status">Status</label>
<select
id="sms-template-status"
value={draftStatus}
onChange={(e) => setDraftStatus(e.target.value as StatusFilter)}
aria-label="Status"
disabled={loading}
>
<option value="all">All (pending + verified)</option>
+5 -6
View File
@@ -576,34 +576,33 @@ export function UsersPage() {
)}
<div className={tableStyles.filtersPanel}>
<div className={tableStyles.filtersTitle}>Filters</div>
<form className={tableStyles.filtersGrid} onSubmit={(e) => { e.preventDefault(); applyFilters() }}>
<div className={tableStyles.filtersInputs}>
<div className={tableStyles.field}>
<label htmlFor="filter-user-name">Name</label>
<input
id="filter-user-name"
value={draftName}
onChange={(e) => setDraftName(e.target.value)}
placeholder="Search by name"
placeholder="Name"
aria-label="Name"
/>
</div>
<div className={tableStyles.field}>
<label htmlFor="filter-user-cell">Cell number</label>
<input
id="filter-user-cell"
value={draftCell}
onChange={(e) => setDraftCell(e.target.value)}
placeholder="0912..."
placeholder="Cell number"
aria-label="Cell number"
autoComplete="off"
/>
</div>
<div className={tableStyles.field}>
<label htmlFor="filter-user-role">Role</label>
<select
id="filter-user-role"
value={draftRole}
onChange={(e) => setDraftRole(e.target.value)}
aria-label="Role"
>
<option value="">All roles</option>
{roles.map((role) => (
+2 -3
View File
@@ -515,16 +515,15 @@ export function WebsitesPage() {
</div>
<div className={tableStyles.filtersPanel}>
<div className={tableStyles.filtersTitle}>Filters</div>
<form className={tableStyles.filtersGrid} onSubmit={(e) => { e.preventDefault(); applyFilters() }}>
<div className={tableStyles.filtersInputs}>
<div className={tableStyles.field}>
<label htmlFor="filter-domain-name">Name</label>
<input
id="filter-domain-name"
value={draftName}
onChange={(e) => setDraftName(e.target.value)}
placeholder="shop-a.local"
placeholder="Name / domain"
aria-label="Name / domain"
/>
</div>
</div>