meshkee-app/dashboards
1
0
Fork 0
mirror of https://git.meshkee.com/Meshkee/dashboards.git synced 2026-08-11 22:30:58 +04:30
Code Issues Packages Projects Releases Wiki Activity

Add FA/EN locale, home activity charts, and theme-aware polish.

Browse Source 
Ship shared LocaleProvider, business/customer i18n, branding defaultLocale, curated home tiles with dual 30-day charts, and chart/page aura tokens; refresh PROJECT_CONTEXT.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-01 09:35:27 +03:30
co-authored by Cursor
parent f5b2193ba1
commit 66004a0fba
112 changed files with 4338 additions and 1061 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/business/index.html
+13 -1
View File
@@ -7,7 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
@@ -15,6 +15,18 @@
rel="stylesheet"
/>
<title>Business Dashboard</title>
<script>
try {
var l = localStorage.getItem('meshkee.dashboard.locale')
if (l === 'en') {
document.documentElement.lang = 'en'
document.documentElement.dir = 'ltr'
} else {
document.documentElement.lang = 'fa'
document.documentElement.dir = 'rtl'
}
} catch (e) {}
</script>
</head>
<body>
<div id="root"></div>
apps/business/src/App.tsx
+3
View File
@@ -4,6 +4,7 @@ import { DashboardDocumentTitle } from './components/DashboardDocumentTitle'
import { AuthProvider } from './context/AuthContext'
import { BusinessThemeProvider } from './context/BusinessThemeContext'
import { TenantBrandingProvider } from './context/TenantBrandingContext'
import { LocaleProvider } from '@meshkee/dashboard-ui'
import { ToastProvider } from './context/ToastContext'
import { ProtectedRoute } from './components/ProtectedRoute'
import { GuestRoute } from './components/GuestRoute'
@@ -50,6 +51,7 @@ import { WebsiteSpecialBrandsPage } from './pages/WebsiteSpecialBrandsPage'
function App() {
return (
<BusinessDomainGuard>
<LocaleProvider>
<BrowserRouter>
<TenantBrandingProvider>
<DashboardDocumentTitle />
@@ -111,6 +113,7 @@ function App() {
</AuthProvider>
</TenantBrandingProvider>
</BrowserRouter>
</LocaleProvider>
</BusinessDomainGuard>
)
}
apps/business/src/components/Breadcrumbs.module.css
+4
View File
@@ -21,6 +21,10 @@
color: var(--text-muted);
}
:global([dir='rtl']) .separator {
transform: scaleX(-1);
}
.link {
font-size: 14px;
font-weight: 500;
apps/business/src/components/Breadcrumbs.tsx
+10 -3
View File
@@ -1,5 +1,8 @@
import { Link } from 'react-router-dom'
import { ChevronRight } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { translateBreadcrumbLabel } from '../i18n/messages'
import { useT } from '../i18n/useT'
import styles from './Breadcrumbs.module.css'
export interface BreadcrumbItem {
@@ -12,11 +15,15 @@ interface BreadcrumbsProps {
}
export function Breadcrumbs({ items }: BreadcrumbsProps) {
const { locale } = useLocale()
const t = useT()
return (
<nav className={styles.breadcrumbs} aria-label="Breadcrumb">
<nav className={styles.breadcrumbs} aria-label={t('common.breadcrumb')}>
<ol className={styles.list}>
{items.map((item, index) => {
const isLast = index === items.length - 1
const label = translateBreadcrumbLabel(locale, item.label)
return (
<li key={`${item.label}-${index}`} className={styles.item}>
{index > 0 && (
@@ -24,10 +31,10 @@ export function Breadcrumbs({ items }: BreadcrumbsProps) {
)}
{item.href && !isLast ? (
<Link to={item.href} className={styles.link}>
{item.label}
{label}
</Link>
) : (
<span className={isLast ? styles.current : styles.text}>{item.label}</span>
<span className={isLast ? styles.current : styles.text}>{label}</span>
)}
</li>
)
apps/business/src/components/CategoryRow.module.css
+10 -2
View File
@@ -46,16 +46,24 @@
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: 4px;
margin-inline-start: 4px;
color: var(--text-muted);
transition: transform 0.2s ease;
vertical-align: middle;
}
:global([dir='rtl']) .chevron {
transform: scaleX(-1);
}
.chevronOpen {
transform: rotate(90deg);
}
:global([dir='rtl']) .chevronOpen {
transform: scaleX(-1) rotate(90deg);
}
.names {
display: flex;
align-items: center;
@@ -75,7 +83,7 @@
}
.nameFa {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
font-size: 15px;
font-weight: 500;
color: var(--text-primary);
apps/business/src/components/DailyActivityChart.module.css
+138
View File
@@ -0,0 +1,138 @@
.card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: var(--glass-shadow);
padding: 24px;
height: 100%;
box-sizing: border-box;
}
.header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.subtitle {
font-size: 13px;
color: var(--text-secondary);
}
.legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 12px;
color: var(--text-secondary);
}
.legendItem {
display: inline-flex;
align-items: center;
gap: 6px;
}
.legendDot {
width: 10px;
height: 10px;
border-radius: 3px;
}
.tonePrimary {
background: var(--primary);
}
.toneAccent {
background: var(--chart-accent, #a855f7);
}
.status,
.error {
font-size: 14px;
text-align: center;
padding: 40px 12px;
}
.status {
color: var(--text-muted);
}
.error {
color: #dc2626;
}
.chartWrap {
overflow-x: auto;
}
.chart {
display: flex;
align-items: flex-end;
gap: 4px;
min-width: 100%;
padding-bottom: 4px;
}
.group {
flex: 1;
min-width: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.bars {
display: flex;
align-items: flex-end;
height: 180px;
gap: 2px;
}
.bar {
width: 7px;
border-radius: 4px 4px 2px 2px;
transition: height 0.3s ease;
}
.barPrimary {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--primary) 55%, #ffffff) 0%,
var(--primary) 100%
);
}
.barAccent {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--chart-accent, #a855f7) 55%, #ffffff) 0%,
var(--chart-accent, #a855f7) 100%
);
}
.label {
font-size: 10px;
color: var(--text-muted);
font-weight: 500;
font-family: var(--font-en), var(--font-ui), sans-serif;
line-height: 1;
}
@media (max-width: 768px) {
.header {
flex-direction: column;
}
}
apps/business/src/components/DailyActivityChart.tsx
+164
View File
@@ -0,0 +1,164 @@
import { useEffect, useMemo, useState } from 'react'
import { useLocale } from '@meshkee/dashboard-ui'
import { ApiError } from '../lib/api'
import type {
DailyActivityPoint,
DualDailyActivityResponse,
} from '../services/dailyActivityService'
import { useT } from '../i18n/useT'
import type { BusinessMessageKey } from '../i18n/messages'
import styles from './DailyActivityChart.module.css'
const CHART_HEIGHT = 180
const BAR_GAP = 2
interface DailyActivityChartProps {
titleKey: BusinessMessageKey
subtitleKey: BusinessMessageKey
primaryLegendKey: BusinessMessageKey
secondaryLegendKey: BusinessMessageKey
loadingKey: BusinessMessageKey
errorKey: BusinessMessageKey
primaryBarTitleKey: BusinessMessageKey
secondaryBarTitleKey: BusinessMessageKey
load: (signal: AbortSignal) => Promise<DualDailyActivityResponse>
}
function formatDayLabel(dateKey: string, locale: string): string {
const [year, month, day] = dateKey.split('-').map(Number)
const date = new Date(year, month - 1, day)
return date.toLocaleString(locale === 'fa' ? 'fa-IR' : 'en-US', {
day: 'numeric',
numberingSystem: 'latn',
})
}
export function DailyActivityChart({
titleKey,
subtitleKey,
primaryLegendKey,
secondaryLegendKey,
loadingKey,
errorKey,
primaryBarTitleKey,
secondaryBarTitleKey,
load,
}: DailyActivityChartProps) {
const t = useT()
const { locale } = useLocale()
const [primaryItems, setPrimaryItems] = useState<DailyActivityPoint[]>([])
const [secondaryItems, setSecondaryItems] = useState<DailyActivityPoint[]>([])
const [primaryTotal, setPrimaryTotal] = useState(0)
const [secondaryTotal, setSecondaryTotal] = useState(0)
const [isLoading, setIsLoading] = useState(true)
const [error, setError] = useState('')
useEffect(() => {
const controller = new AbortController()
async function run() {
setIsLoading(true)
setError('')
try {
const data = await load(controller.signal)
if (controller.signal.aborted) return
setPrimaryItems(data.primary.items)
setSecondaryItems(data.secondary.items)
setPrimaryTotal(data.primary.total)
setSecondaryTotal(data.secondary.total)
} catch (err) {
if (err instanceof DOMException && err.name === 'AbortError') return
if (err instanceof ApiError) {
setError(err.message)
} else {
setError(t(errorKey))
}
} finally {
if (!controller.signal.aborted) setIsLoading(false)
}
}
void run()
return () => controller.abort()
}, [load, t, errorKey])
const maxValue = useMemo(() => {
const peak = Math.max(
...primaryItems.map((item) => item.count),
...secondaryItems.map((item) => item.count),
0,
)
return peak > 0 ? peak : 1
}, [primaryItems, secondaryItems])
return (
<section className={styles.card} aria-label={t(titleKey)}>
<div className={styles.header}>
<div>
<h3 className={styles.title}>{t(titleKey)}</h3>
<p className={styles.subtitle}>{t(subtitleKey)}</p>
</div>
<div className={styles.legend}>
<span className={styles.legendItem}>
<span className={`${styles.legendDot} ${styles.tonePrimary}`} />
{t(primaryLegendKey, { count: primaryTotal })}
</span>
<span className={styles.legendItem}>
<span className={`${styles.legendDot} ${styles.toneAccent}`} />
{t(secondaryLegendKey, { count: secondaryTotal })}
</span>
</div>
</div>
{isLoading ? (
<p className={styles.status}>{t(loadingKey)}</p>
) : error ? (
<p className={styles.error} role="alert">
{error}
</p>
) : (
<div className={styles.chartWrap}>
<div
className={styles.chart}
style={{ height: CHART_HEIGHT + 28 }}
role="img"
aria-label={t(titleKey)}
>
{primaryItems.map((item, index) => {
const secondary = secondaryItems[index]
const secondaryCount = secondary?.count ?? 0
const primaryHeight = (item.count / maxValue) * CHART_HEIGHT
const secondaryHeight = (secondaryCount / maxValue) * CHART_HEIGHT
const label = formatDayLabel(item.date, locale)
return (
<div key={item.date} className={styles.group}>
<div className={styles.bars} style={{ gap: BAR_GAP }}>
<div
className={`${styles.bar} ${styles.barPrimary}`}
style={{ height: Math.max(primaryHeight, item.count > 0 ? 4 : 0) }}
title={t(primaryBarTitleKey, { day: label, count: item.count })}
/>
<div
className={`${styles.bar} ${styles.barAccent}`}
style={{
height: Math.max(secondaryHeight, secondaryCount > 0 ? 4 : 0),
}}
title={t(secondaryBarTitleKey, {
day: label,
count: secondaryCount,
})}
/>
</div>
<span className={styles.label} lang="en" dir="ltr">
{label}
</span>
</div>
)
})}
</div>
</div>
)}
</section>
)
}
apps/business/src/components/DashboardDocumentTitle.tsx
+5 -4
View File
@@ -1,17 +1,18 @@
import { useLocation } from 'react-router-dom'
import { useDashboardDocumentTitle } from '@meshkee/dashboard-ui'
import { useDashboardDocumentTitle, useLocale } from '@meshkee/dashboard-ui'
import { useTenantBranding } from '../context/TenantBrandingContext'
import { BUSINESS_DASHBOARD_NAME, businessRouteTitleRules } from '../lib/routeTitles'
import { getBusinessRouteTitleRules, translate } from '../i18n/messages'
export function DashboardDocumentTitle() {
const { pathname } = useLocation()
const { businessName } = useTenantBranding()
const { locale } = useLocale()
useDashboardDocumentTitle({
businessName,
dashboardName: BUSINESS_DASHBOARD_NAME,
dashboardName: translate(locale, 'app.dashboardName'),
pathname,
routeRules: businessRouteTitleRules,
routeRules: getBusinessRouteTitleRules(locale),
})
return null
apps/business/src/components/Header.module.css
+8 -12
View File
@@ -60,9 +60,10 @@
.badge {
position: absolute;
top: 4px;
right: 4px;
width: 18px;
inset-inline-end: 4px;
min-width: 18px;
height: 18px;
padding: 0 4px;
display: flex;
align-items: center;
justify-content: center;
@@ -70,7 +71,8 @@
color: white;
font-size: 10px;
font-weight: 600;
border-radius: 50%;
line-height: 1;
border-radius: 999px;
border: 2px solid white;
}
@@ -82,7 +84,8 @@
display: flex;
align-items: center;
gap: 12px;
padding: 6px 12px 6px 6px;
padding-block: 6px;
padding-inline: 6px 12px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--glass-border);
@@ -96,13 +99,6 @@
border-color: rgba(var(--primary-rgb) / 0.25);
}
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
.profileInfo {
display: flex;
flex-direction: column;
@@ -132,7 +128,7 @@
.dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
inset-inline-end: 0;
min-width: 180px;
padding: 6px;
background: rgba(255, 255, 255, 0.95);
apps/business/src/components/Header.tsx
+59 -35
View File
@@ -1,32 +1,52 @@
import { useEffect, useRef, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { Menu, Bell, MessageSquare, ChevronDown, User, Settings, KeyRound, LogOut } from 'lucide-react'
import { PasswordResetModal } from '@meshkee/dashboard-ui'
import { LanguageSelect, PasswordResetModal, useLocale } from '@meshkee/dashboard-ui'
import { useAuth } from '../context/AuthContext'
import { useT } from '../i18n/useT'
import { changePassword } from '../services/authService'
import styles from './Header.module.css'
const profileMenuItems = [
{ icon: User, label: 'Profile', to: '/profile' },
{ icon: Settings, label: 'Setting', to: '/settings' },
]
function displayUserName(
user: {
firstName: string | null
lastName: string | null
firstNameEn?: string | null
lastNameEn?: string | null
cellNumber: string
} | null,
locale: 'en' | 'fa',
fallback: string,
) {
if (!user) return fallback
const localized =
locale === 'en'
? [user.firstNameEn, user.lastNameEn].filter(Boolean).join(' ')
: [user.firstName, user.lastName].filter(Boolean).join(' ')
const other =
locale === 'en'
? [user.firstName, user.lastName].filter(Boolean).join(' ')
: [user.firstNameEn, user.lastNameEn].filter(Boolean).join(' ')
return localized || other || user.cellNumber || fallback
}
export function Header() {
const navigate = useNavigate()
const { user, logout } = useAuth()
const { locale } = useLocale()
const t = useT()
const [menuOpen, setMenuOpen] = useState(false)
const [passwordModalOpen, setPasswordModalOpen] = useState(false)
const menuRef = useRef<HTMLDivElement>(null)
const displayName =
[user?.firstName, user?.lastName].filter(Boolean).join(' ') || user?.cellNumber || 'User'
const displayName = displayUserName(user, locale, t('app.userFallback'))
const roleLabel =
user?.roleLabel ??
(user?.isSuperAdmin || user?.roles.includes('super_admin')
? 'Super Admin'
? t('role.superAdmin')
: user?.businesses[0]?.isOwner
? 'Business Owner'
: user?.businesses[0]?.teamRole ?? 'Staff')
? t('role.owner')
: user?.businesses[0]?.teamRole ?? t('role.staff'))
useEffect(() => {
if (!menuOpen) return
@@ -64,21 +84,23 @@ export function Header() {
<>
<header className={styles.header}>
<div className={styles.left}>
<button className={styles.menuBtn} aria-label="Toggle menu">
<button className={styles.menuBtn} aria-label={t('header.toggleMenu')}>
<Menu size={22} />
</button>
<h1 className={styles.title}>Admin Dashboard</h1>
<h1 className={styles.title}>{t('header.title')}</h1>
</div>
<div className={styles.right}>
<button className={styles.iconBtn} aria-label="Messages">
<LanguageSelect />
<button className={styles.iconBtn} aria-label={t('header.messages')}>
<MessageSquare size={20} />
<span className={styles.badge}>5</span>
<span className={styles.badge}>0</span>
</button>
<button className={styles.iconBtn} aria-label="Notifications">
<button className={styles.iconBtn} aria-label={t('header.notifications')}>
<Bell size={20} />
<span className={styles.badge}>3</span>
<span className={styles.badge}>0</span>
</button>
<div className={styles.profileWrap} ref={menuRef}>
@@ -89,11 +111,6 @@ export function Header() {
aria-expanded={menuOpen}
aria-haspopup="menu"
>
<img
src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(displayName)}`}
alt={displayName}
className={styles.avatar}
/>
<div className={styles.profileInfo}>
<span className={styles.name}>{displayName}</span>
<span className={styles.role}>{roleLabel}</span>
@@ -106,18 +123,24 @@ export function Header() {
{menuOpen && (
<div className={styles.dropdown} role="menu">
{profileMenuItems.map(({ icon: Icon, label, to }) => (
<Link
key={label}
to={to}
className={styles.dropdownItem}
role="menuitem"
onClick={() => setMenuOpen(false)}
>
<Icon size={16} />
<span>{label}</span>
</Link>
))}
<Link
to="/profile"
className={styles.dropdownItem}
role="menuitem"
onClick={() => setMenuOpen(false)}
>
<User size={16} />
<span>{t('header.profile')}</span>
</Link>
<Link
to="/settings"
className={styles.dropdownItem}
role="menuitem"
onClick={() => setMenuOpen(false)}
>
<Settings size={16} />
<span>{t('header.setting')}</span>
</Link>
<button
type="button"
className={styles.dropdownItem}
@@ -125,7 +148,7 @@ export function Header() {
onClick={openPasswordModal}
>
<KeyRound size={16} />
<span>Change password</span>
<span>{t('header.changePassword')}</span>
</button>
<button
type="button"
@@ -134,7 +157,7 @@ export function Header() {
onClick={handleLogout}
>
<LogOut size={16} />
<span>Logout</span>
<span>{t('nav.logout')}</span>
</button>
</div>
)}
@@ -146,6 +169,7 @@ export function Header() {
open={passwordModalOpen}
onClose={() => setPasswordModalOpen(false)}
onChangePassword={changePassword}
title={t('header.changePassword')}
/>
</>
)
apps/business/src/components/PageLayout.module.css
+2 -2
View File
@@ -4,7 +4,7 @@
}
.main {
margin-left: var(--sidebar-width);
margin-inline-start: var(--sidebar-width);
min-height: 100vh;
position: relative;
z-index: 1;
@@ -12,6 +12,6 @@
@media (max-width: 768px) {
.main {
margin-left: 0;
margin-inline-start: 0;
}
}
apps/business/src/components/PortfolioCard.module.css
+1 -1
View File
@@ -64,7 +64,7 @@
.titleFa {
margin: 0;
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
font-size: 15px;
font-weight: 500;
line-height: 1.4;
apps/business/src/components/PortfolioCard.tsx
+17 -1
View File
@@ -1,5 +1,5 @@
import { Link } from 'react-router-dom'
import { Pencil, MessageSquare, Trash2 } from 'lucide-react'
import { ChevronUp, Pencil, MessageSquare, Trash2 } from 'lucide-react'
import type { Portfolio } from '../types/portfolio'
import { formatPortfolioCardDate } from '../services/portfolioService'
import { textLocaleAttrs } from '../utils/textLocale'
@@ -10,6 +10,9 @@ import controlStyles from './ProductCard.module.css'
interface PortfolioCardProps {
portfolio: Portfolio
commentCount: number
canMoveUp: boolean
isMovingUp?: boolean
onMoveUp: (id: string) => void
onEdit: (id: string) => void
onComments: (id: string) => void
onRemove: (id: string) => void
@@ -18,6 +21,9 @@ interface PortfolioCardProps {
export function PortfolioCard({
portfolio,
commentCount,
canMoveUp,
isMovingUp = false,
onMoveUp,
onEdit,
onComments,
onRemove,
@@ -87,6 +93,16 @@ export function PortfolioCard({
</Link>
<div className={controlStyles.controls}>
<Tooltip label="Move up">
<button
type="button"
onClick={() => onMoveUp(portfolio.id)}
disabled={!canMoveUp || isMovingUp}
aria-label="Move up"
>
<ChevronUp size={16} />
</button>
</Tooltip>
<Tooltip label="Edit portfolio">
<button type="button" onClick={() => onEdit(portfolio.id)} aria-label="Edit">
<Pencil size={16} />
apps/business/src/components/ProductActivityChart.module.css
+3 -3
View File
@@ -53,7 +53,7 @@
}
.legendUpdated {
background: var(--primary-dark);
background: var(--chart-accent, #a855f7);
}
.status,
@@ -115,8 +115,8 @@
.barUpdated {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--primary-dark) 55%, #ffffff) 0%,
var(--primary-dark) 100%
color-mix(in srgb, var(--chart-accent, #a855f7) 55%, #ffffff) 0%,
var(--chart-accent, #a855f7) 100%
);
}
apps/business/src/components/ProductActivityChart.tsx
+22 -12
View File
@@ -1,13 +1,17 @@
import { useEffect, useMemo, useState } from 'react'
import { useLocale } from '@meshkee/dashboard-ui'
import { ApiError } from '../lib/api'
import { listAllProducts } from '../services/productService'
import { aggregateProductActivity, type ProductMonthActivity } from '../utils/productActivity'
import { useT } from '../i18n/useT'
import styles from './ProductActivityChart.module.css'
const CHART_HEIGHT = 200
const BAR_GAP = 6
export function ProductActivityChart() {
const t = useT()
const { locale } = useLocale()
const [data, setData] = useState<ProductMonthActivity[]>([])
const [isLoading, setIsLoading] = useState(true)
const [error, setError] = useState('')
@@ -16,7 +20,7 @@ export function ProductActivityChart() {
const controller = new AbortController()
void loadActivity(controller.signal)
return () => controller.abort()
}, [])
}, [locale])
async function loadActivity(signal?: AbortSignal) {
setIsLoading(true)
@@ -24,13 +28,13 @@ export function ProductActivityChart() {
try {
const products = await listAllProducts(signal)
setData(aggregateProductActivity(products))
setData(aggregateProductActivity(products, locale))
} catch (err) {
if (err instanceof DOMException && err.name === 'AbortError') return
if (err instanceof ApiError) {
setError(err.message)
} else {
setError('Unable to load product activity.')
setError(t('products.activity.error'))
}
} finally {
setIsLoading(false)
@@ -51,26 +55,26 @@ export function ProductActivityChart() {
)
return (
<section className={styles.card} aria-label="Product activity chart">
<section className={styles.card} aria-label={t('products.activity.title')}>
<div className={styles.header}>
<div>
<h3 className={styles.title}>Product activity</h3>
<p className={styles.subtitle}>Products added or updated in the last 12 months</p>
<h3 className={styles.title}>{t('products.activity.title')}</h3>
<p className={styles.subtitle}>{t('products.activity.subtitle')}</p>
</div>
<div className={styles.legend}>
<span className={styles.legendItem}>
<span className={`${styles.legendDot} ${styles.legendAdded}`} />
Added ({totals.added})
{t('products.activity.added', { count: totals.added })}
</span>
<span className={styles.legendItem}>
<span className={`${styles.legendDot} ${styles.legendUpdated}`} />
Updated ({totals.updated})
{t('products.activity.updated', { count: totals.updated })}
</span>
</div>
</div>
{isLoading ? (
<p className={styles.status}>Loading chart...</p>
<p className={styles.status}>{t('products.activity.loading')}</p>
) : error ? (
<p className={styles.error} role="alert">
{error}
@@ -81,7 +85,7 @@ export function ProductActivityChart() {
className={styles.chart}
style={{ height: CHART_HEIGHT + 32 }}
role="img"
aria-label="Bar chart of products added and updated per month"
aria-label={t('products.activity.chartAria')}
>
{data.map((item) => {
const addedHeight = (item.added / maxValue) * CHART_HEIGHT
@@ -93,12 +97,18 @@ export function ProductActivityChart() {
<div
className={`${styles.bar} ${styles.barAdded}`}
style={{ height: Math.max(addedHeight, item.added > 0 ? 4 : 0) }}
title={`${item.label}: ${item.added} added`}
title={t('products.activity.barAdded', {
month: item.label,
count: item.added,
})}
/>
<div
className={`${styles.bar} ${styles.barUpdated}`}
style={{ height: Math.max(updatedHeight, item.updated > 0 ? 4 : 0) }}
title={`${item.label}: ${item.updated} updated`}
title={t('products.activity.barUpdated', {
month: item.label,
count: item.updated,
})}
/>
</div>
<span className={styles.label}>{item.label}</span>
apps/business/src/components/ProductCard.module.css
+7 -1
View File
@@ -79,7 +79,7 @@
}
.nameFa {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
@@ -160,6 +160,12 @@
color: var(--primary);
}
.controls button:disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
.controls button.danger:hover {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
apps/business/src/components/SearchableSelect.module.css
+1 -1
View File
@@ -130,7 +130,7 @@
}
.optionFa {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
font-weight: 500;
direction: rtl;
}
apps/business/src/components/SectionCard.module.css
+55 -5
View File
@@ -56,28 +56,78 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 36px;
}
.link {
font-size: 14px;
font-weight: 500;
.countMeta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 8px;
height: 36px;
max-width: calc(100% - 48px);
padding: 0 14px;
box-sizing: border-box;
border-radius: 999px;
background: rgba(var(--primary-rgb) / 0.1);
color: var(--primary);
transition:
background 0.35s ease,
color 0.35s ease;
}
.countValue {
font-family: var(--font-en), var(--font-ui), sans-serif;
font-size: 16px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1;
color: inherit;
}
.countLabel {
font-size: 12px;
font-weight: 500;
line-height: 1;
color: inherit;
opacity: 0.85;
}
.card:hover .countMeta {
background: var(--primary);
color: white;
}
.card:hover .countLabel {
opacity: 0.95;
}
.arrowBtn {
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(var(--primary-rgb) / 0.1);
color: var(--primary);
transition: background 0.2s, transform 0.2s;
transition:
background 0.35s ease,
color 0.35s ease;
}
.arrowIcon {
display: block;
}
.card:hover .arrowBtn {
background: var(--primary);
color: white;
transform: translateX(2px);
}
:global([dir='rtl']) .arrowBtn {
transform: scaleX(-1);
}
apps/business/src/components/SectionCard.tsx
+22 -4
View File
@@ -6,17 +6,26 @@ interface SectionCardProps {
icon: LucideIcon
title: string
description: string
linkText: string
linkText?: string
href: string
/** Entity total shown beside the arrow; omit for sections without a count (e.g. settings). */
count?: number | null
countLabel?: string
}
export function SectionCard({
icon: Icon,
title,
description,
linkText,
href,
count,
countLabel,
}: SectionCardProps) {
const showCount = typeof count === 'number' && Number.isFinite(count)
const formattedCount = showCount
? new Intl.NumberFormat('en-US').format(count)
: null
return (
<Link to={href} className={styles.card}>
<div className={styles.iconWrap}>
@@ -27,9 +36,18 @@ export function SectionCard({
<p className={styles.description}>{description}</p>
<div className={styles.footer}>
<span className={styles.link}>{linkText}</span>
{formattedCount !== null && countLabel ? (
<div className={styles.countMeta}>
<span className={styles.countValue} lang="en" dir="ltr">
{formattedCount}
</span>
<span className={styles.countLabel}>{countLabel}</span>
</div>
) : (
<span />
)}
<span className={styles.arrowBtn} aria-hidden="true">
<ArrowRight size={18} />
<ArrowRight size={18} className={styles.arrowIcon} />
</span>
</div>
</Link>
apps/business/src/components/Sidebar.module.css
+15 -14
View File
@@ -1,7 +1,7 @@
.sidebar {
position: fixed;
top: 0;
left: 0;
inset-inline-start: 0;
width: var(--sidebar-width);
height: 100vh;
display: flex;
@@ -10,7 +10,7 @@
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-right: 1px solid var(--glass-border);
border-inline-end: 1px solid var(--glass-border);
z-index: 100;
}
@@ -45,26 +45,26 @@
}
.brandDomain {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.2;
}
.brandName {
font-size: 11px;
font-weight: 500;
color: var(--text-muted);
margin-top: 2px;
}
.brandName {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.2;
}
.nav {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
overflow-y: auto;
padding-right: 2px;
padding-inline-end: 2px;
}
.navGroup {
@@ -83,7 +83,7 @@
color: var(--text-secondary);
transition: all 0.2s ease;
width: 100%;
text-align: left;
text-align: start;
}
.navItem:hover {
@@ -118,9 +118,10 @@
display: flex;
flex-direction: column;
gap: 2px;
margin: 2px 0 4px 12px;
padding-left: 12px;
border-left: 2px solid rgba(148, 163, 184, 0.2);
margin-block: 2px 4px;
margin-inline-start: 12px;
padding-inline-start: 12px;
border-inline-start: 2px solid rgba(148, 163, 184, 0.2);
}
.subNavItem {
apps/business/src/components/Sidebar.tsx
+147 -122
View File
@@ -1,4 +1,4 @@
import { useEffect, useState } from 'react'
import { useEffect, useMemo, useState } from 'react'
import { NavLink, useLocation, useNavigate } from 'react-router-dom'
import {
Home,
@@ -15,7 +15,10 @@ import {
Building2,
} from 'lucide-react'
import type { LucideIcon } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useAuth } from '../context/AuthContext'
import { useT } from '../i18n/useT'
import type { BusinessMessageKey } from '../i18n/messages'
import {
BUSINESS_PROFILE_UPDATED_EVENT,
getActiveBusinessDomain,
@@ -26,111 +29,29 @@ import meshkeeLogo from '../assets/meshkee-logo.png'
import styles from './Sidebar.module.css'
interface NavChild {
label: string
labelKey: BusinessMessageKey
to: string
}
interface NavGroup {
type: 'group'
id: string
icon: LucideIcon
label: string
labelKey: BusinessMessageKey
basePath: string
children: NavChild[]
}
interface NavLinkItem {
type: 'link'
id: string
icon: LucideIcon
label: string
labelKey: BusinessMessageKey
to: string
}
type NavItem = NavLinkItem | NavGroup
const navItems: NavItem[] = [
{ type: 'link', icon: Home, label: 'Home', to: '/' },
{ type: 'link', icon: Building2, label: 'Business Profile', to: '/business-profile' },
{
type: 'group',
icon: ShoppingBag,
label: 'Products',
basePath: '/products',
children: [
{ label: 'Overview', to: '/products' },
{ label: 'My Products', to: '/products/list' },
{ label: 'Add New Product', to: '/products/new' },
{ label: 'Categories', to: '/products/categories' },
{ label: 'Brands', to: '/products/brands' },
{ label: 'Settings', to: '/products/settings' },
],
},
{
type: 'group',
icon: Store,
label: 'Store',
basePath: '/store',
children: [
{ label: 'Overview', to: '/store' },
{ label: 'My Store Items', to: '/store/items' },
{ label: 'My Orders', to: '/store/orders' },
{ label: 'Shipping Fees', to: '/store/shipping' },
{ label: 'Shopping Cards', to: '/store/cards' },
{ label: 'Settings', to: '/store/settings' },
],
},
{ type: 'link', icon: Users, label: 'Customers', to: '/customers' },
{ type: 'link', icon: Settings, label: 'Settings', to: '/settings' },
{
type: 'group',
icon: FileText,
label: 'Blog',
basePath: '/blog',
children: [
{ label: 'Overview', to: '/blog' },
{ label: 'My Blogs', to: '/blog/list' },
{ label: 'Add New Blog', to: '/blog/new' },
{ label: 'Categories', to: '/blog/categories' },
{ label: 'Settings', to: '/blog/settings' },
],
},
{
type: 'group',
icon: Briefcase,
label: 'Portfolios',
basePath: '/portfolios',
children: [
{ label: 'Overview', to: '/portfolios' },
{ label: 'My Portfolios', to: '/portfolios/list' },
{ label: 'Add New Portfolio', to: '/portfolios/new' },
{ label: 'Categories', to: '/portfolios/categories' },
{ label: 'Settings', to: '/portfolios/settings' },
],
},
{
type: 'group',
icon: Globe,
label: 'Website',
basePath: '/website',
children: [
{ label: 'Overview', to: '/website' },
{ label: 'Sliders', to: '/website/sliders' },
{ label: 'Special Categories', to: '/website/special-categories' },
{ label: 'Special Brands', to: '/website/special-brands' },
{ label: 'Special Items', to: '/website/special-items' },
{ label: 'Contact Us Form', to: '/website/contact' },
{ label: 'Subscriptions', to: '/website/subscriptions' },
{ label: 'FAQ', to: '/website/faq' },
{ label: 'Badges', to: '/website/badges' },
{ label: 'E-Payment', to: '/website/e-payment' },
],
},
]
const footerItems = [
{ icon: HelpCircle, label: 'Help Center' },
{ icon: LogOut, label: 'Logout' },
]
function isGroupActive(basePath: string, pathname: string) {
return pathname === basePath || pathname.startsWith(`${basePath}/`)
}
@@ -139,12 +60,115 @@ export function Sidebar() {
const { pathname } = useLocation()
const navigate = useNavigate()
const { user, logout } = useAuth()
const { locale } = useLocale()
const t = useT()
const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({})
const [brandLogoUrl, setBrandLogoUrl] = useState<string | null>(null)
const [brandName, setBrandName] = useState('')
const [nameEn, setNameEn] = useState('')
const [nameFa, setNameFa] = useState('')
const businessDomain = getActiveBusinessDomain()
const fallbackBusinessName = user?.businesses[0]?.name ?? 'Business'
const fallbackBusinessName = user?.businesses[0]?.name ?? t('app.storeFallback')
const brandName = useMemo(() => {
if (locale === 'fa') {
return nameFa.trim() || nameEn.trim() || fallbackBusinessName
}
return nameEn.trim() || nameFa.trim() || fallbackBusinessName
}, [locale, nameEn, nameFa, fallbackBusinessName])
const navItems = useMemo<NavItem[]>(
() => [
{ type: 'link', id: 'home', icon: Home, labelKey: 'nav.home', to: '/' },
{
type: 'link',
id: 'business-profile',
icon: Building2,
labelKey: 'nav.businessProfile',
to: '/business-profile',
},
{
type: 'group',
id: 'products',
icon: ShoppingBag,
labelKey: 'nav.products',
basePath: '/products',
children: [
{ labelKey: 'nav.products.overview', to: '/products' },
{ labelKey: 'nav.products.list', to: '/products/list' },
{ labelKey: 'nav.products.new', to: '/products/new' },
{ labelKey: 'nav.products.categories', to: '/products/categories' },
{ labelKey: 'nav.products.brands', to: '/products/brands' },
{ labelKey: 'nav.products.settings', to: '/products/settings' },
],
},
{
type: 'group',
id: 'store',
icon: Store,
labelKey: 'nav.store',
basePath: '/store',
children: [
{ labelKey: 'nav.store.overview', to: '/store' },
{ labelKey: 'nav.store.items', to: '/store/items' },
{ labelKey: 'nav.store.orders', to: '/store/orders' },
{ labelKey: 'nav.store.shipping', to: '/store/shipping' },
{ labelKey: 'nav.store.cards', to: '/store/cards' },
{ labelKey: 'nav.store.settings', to: '/store/settings' },
],
},
{ 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',
icon: FileText,
labelKey: 'nav.blog',
basePath: '/blog',
children: [
{ labelKey: 'nav.blog.overview', to: '/blog' },
{ labelKey: 'nav.blog.list', to: '/blog/list' },
{ labelKey: 'nav.blog.new', to: '/blog/new' },
{ labelKey: 'nav.blog.categories', to: '/blog/categories' },
{ labelKey: 'nav.blog.settings', to: '/blog/settings' },
],
},
{
type: 'group',
id: 'portfolios',
icon: Briefcase,
labelKey: 'nav.portfolios',
basePath: '/portfolios',
children: [
{ labelKey: 'nav.portfolios.overview', to: '/portfolios' },
{ labelKey: 'nav.portfolios.list', to: '/portfolios/list' },
{ labelKey: 'nav.portfolios.new', to: '/portfolios/new' },
{ labelKey: 'nav.portfolios.categories', to: '/portfolios/categories' },
{ labelKey: 'nav.portfolios.settings', to: '/portfolios/settings' },
],
},
{
type: 'group',
id: 'website',
icon: Globe,
labelKey: 'nav.website',
basePath: '/website',
children: [
{ labelKey: 'nav.website.overview', to: '/website' },
{ labelKey: 'nav.website.sliders', to: '/website/sliders' },
{ labelKey: 'nav.website.specialCategories', to: '/website/special-categories' },
{ labelKey: 'nav.website.specialBrands', to: '/website/special-brands' },
{ labelKey: 'nav.website.specialItems', to: '/website/special-items' },
{ labelKey: 'nav.website.contact', to: '/website/contact' },
{ labelKey: 'nav.website.subscriptions', to: '/website/subscriptions' },
{ labelKey: 'nav.website.faq', to: '/website/faq' },
{ labelKey: 'nav.website.badges', to: '/website/badges' },
{ labelKey: 'nav.website.ePayment', to: '/website/e-payment' },
],
},
],
[],
)
useEffect(() => {
const controller = new AbortController()
@@ -153,11 +177,13 @@ export function Sidebar() {
try {
const data = await getBusinessProfile(controller.signal)
setBrandLogoUrl(data.profile.logoUrl)
setBrandName(data.profile.nameEn.trim() || data.profile.nameFa.trim() || fallbackBusinessName)
setNameEn(data.profile.nameEn.trim())
setNameFa(data.profile.nameFa.trim())
} catch (err) {
if (isAbortError(err)) return
setBrandLogoUrl(null)
setBrandName(fallbackBusinessName)
setNameEn('')
setNameFa('')
}
}
@@ -172,18 +198,18 @@ export function Sidebar() {
controller.abort()
window.removeEventListener(BUSINESS_PROFILE_UPDATED_EVENT, handleProfileUpdated)
}
}, [fallbackBusinessName])
}, [])
useEffect(() => {
navItems.forEach((item) => {
if (item.type === 'group' && isGroupActive(item.basePath, pathname)) {
setOpenGroups((prev) => ({ ...prev, [item.label]: true }))
setOpenGroups((prev) => ({ ...prev, [item.id]: true }))
}
})
}, [pathname])
}, [pathname, navItems])
function toggleGroup(label: string) {
setOpenGroups((prev) => ({ ...prev, [label]: !prev[label] }))
function toggleGroup(id: string) {
setOpenGroups((prev) => ({ ...prev, [id]: !prev[id] }))
}
return (
@@ -191,12 +217,12 @@ export function Sidebar() {
<div className={styles.brand}>
<img
src={brandLogoUrl ?? meshkeeLogo}
alt={brandName || 'Business logo'}
alt={brandName || t('app.storeFallback')}
className={`${styles.brandLogo} ${brandLogoUrl ? styles.brandLogoUploaded : ''}`}
/>
<div className={styles.brandText}>
<span className={styles.brandDomain}>{businessDomain}</span>
<span className={styles.brandName}>{brandName || fallbackBusinessName}</span>
<span className={styles.brandDomain}>{businessDomain}</span>
</div>
</div>
@@ -205,7 +231,7 @@ export function Sidebar() {
if (item.type === 'link') {
return (
<NavLink
key={item.label}
key={item.id}
to={item.to}
end={item.to === '/'}
className={({ isActive }) =>
@@ -213,24 +239,24 @@ export function Sidebar() {
}
>
<item.icon size={20} />
<span>{item.label}</span>
<span>{t(item.labelKey)}</span>
</NavLink>
)
}
const isOpen = openGroups[item.label] ?? false
const isOpen = openGroups[item.id] ?? false
const groupActive = isGroupActive(item.basePath, pathname)
return (
<div key={item.label} className={styles.navGroup}>
<div key={item.id} className={styles.navGroup}>
<button
type="button"
className={`${styles.navItem} ${styles.navGroupBtn} ${groupActive ? styles.active : ''}`}
onClick={() => toggleGroup(item.label)}
onClick={() => toggleGroup(item.id)}
aria-expanded={isOpen}
>
<item.icon size={20} />
<span className={styles.navGroupLabel}>{item.label}</span>
<span className={styles.navGroupLabel}>{t(item.labelKey)}</span>
<ChevronDown
size={16}
className={`${styles.chevron} ${isOpen ? styles.chevronOpen : ''}`}
@@ -248,7 +274,7 @@ export function Sidebar() {
`${styles.subNavItem} ${isActive ? styles.subNavActive : ''}`
}
>
{child.label}
{t(child.labelKey)}
</NavLink>
))}
</div>
@@ -259,22 +285,21 @@ export function Sidebar() {
</nav>
<div className={styles.footer}>
{footerItems.map(({ icon: Icon, label }) => (
<button
key={label}
type="button"
className={styles.navItem}
onClick={() => {
if (label === 'Logout') {
logout()
navigate('/login')
}
}}
>
<Icon size={20} />
<span>{label}</span>
</button>
))}
<button type="button" className={styles.navItem}>
<HelpCircle size={20} />
<span>{t('nav.help')}</span>
</button>
<button
type="button"
className={styles.navItem}
onClick={() => {
logout()
navigate('/login')
}}
>
<LogOut size={20} />
<span>{t('nav.logout')}</span>
</button>
</div>
</aside>
)
apps/business/src/components/StoreItemCard.module.css
+1 -1
View File
@@ -101,7 +101,7 @@
}
.nameFa {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
apps/business/src/components/WebsiteGroupItemCard.module.css
+1 -1
View File
@@ -31,7 +31,7 @@
.nameFa {
margin-top: 4px;
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
apps/business/src/context/TenantBrandingContext.tsx
+36 -7
View File
@@ -4,10 +4,12 @@ import {
useContext,
useEffect,
useMemo,
useRef,
useState,
type ReactNode,
} from 'react'
import { applyDocumentFavicon } from '@meshkee/dashboard-core'
import { useLocale } from '@meshkee/dashboard-ui'
import { isAbortError } from '../lib/api'
import { getBusinessDomain } from '../lib/config'
import { BUSINESS_PROFILE_UPDATED_EVENT } from '../lib/businessContext'
@@ -34,10 +36,13 @@ function pickBusinessName(
}
export function TenantBrandingProvider({ children }: { children: ReactNode }) {
const [businessName, setBusinessName] = useState('')
const { locale, setLocale } = useLocale()
const [nameEn, setNameEn] = useState('')
const [nameFa, setNameFa] = useState('')
const [logoUrl, setLogoUrl] = useState<string | null>(null)
const [faviconUrl, setFaviconUrl] = useState<string | null>(null)
const [refreshToken, setRefreshToken] = useState(0)
const defaultLocaleAppliedRef = useRef(false)
const refreshBranding = useCallback(() => {
setRefreshToken((value) => value + 1)
@@ -52,7 +57,8 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
const tenant = await resolveTenantByDomain(domain)
if (controller.signal.aborted) return
let name = pickBusinessName(tenant.name, tenant.nameFa, domain)
let nextNameEn = pickBusinessName(tenant.name, domain)
let nextNameFa = pickBusinessName(tenant.nameFa, tenant.name, domain)
let nextLogo = tenant.logoUrl?.trim() || null
let nextFavicon =
tenant.faviconUrl?.trim() || tenant.logoUrl?.trim() || null
@@ -60,10 +66,15 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
try {
const profile = await getBusinessProfile(controller.signal)
if (!controller.signal.aborted) {
name = pickBusinessName(
nextNameEn = pickBusinessName(
profile.profile.nameEn,
nextNameEn,
domain,
)
nextNameFa = pickBusinessName(
profile.profile.nameFa,
name,
profile.profile.nameEn,
nextNameFa,
domain,
)
nextLogo = profile.profile.logoUrl?.trim() || nextLogo
@@ -79,14 +90,25 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
}
if (!controller.signal.aborted) {
setBusinessName(name || domain)
setNameEn(nextNameEn || domain)
setNameFa(nextNameFa || nextNameEn || domain)
setLogoUrl(nextLogo)
setFaviconUrl(nextFavicon)
applyDocumentFavicon(nextFavicon)
if (!defaultLocaleAppliedRef.current) {
defaultLocaleAppliedRef.current = true
if (tenant.defaultLocale === 'en' || tenant.defaultLocale === 'fa') {
setLocale(tenant.defaultLocale)
} else {
setLocale('fa')
}
}
}
} catch (err) {
if (isAbortError(err) || controller.signal.aborted) return
setBusinessName(domain)
const domain = getBusinessDomain()
setNameEn(domain)
setNameFa(domain)
setLogoUrl(null)
setFaviconUrl(null)
applyDocumentFavicon(null)
@@ -104,7 +126,14 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
controller.abort()
window.removeEventListener(BUSINESS_PROFILE_UPDATED_EVENT, handleProfileUpdated)
}
}, [refreshToken, refreshBranding])
}, [refreshToken, refreshBranding, setLocale])
const businessName = useMemo(() => {
if (locale === 'fa') {
return nameFa.trim() || nameEn.trim() || getBusinessDomain()
}
return nameEn.trim() || nameFa.trim() || getBusinessDomain()
}, [locale, nameEn, nameFa])
const value = useMemo(
() => ({ businessName, logoUrl, faviconUrl, refreshBranding }),
apps/business/src/i18n/messages.ts
+621
View File
@@ -0,0 +1,621 @@
import type { DashboardLocale, RouteTitleRule } from '@meshkee/dashboard-core'
const en = {
'app.dashboardName': 'Business Dashboard',
'app.storeFallback': 'Business',
'app.poweredBy': 'powered by Meshkee.app',
'app.userFallback': 'User',
'role.superAdmin': 'Super Admin',
'role.owner': 'Business Owner',
'role.staff': 'Staff',
'nav.home': 'Home',
'nav.businessProfile': 'Business Profile',
'nav.products': 'Products',
'nav.products.overview': 'Overview',
'nav.products.list': 'My Products',
'nav.products.new': 'Add New Product',
'nav.products.categories': 'Categories',
'nav.products.brands': 'Brands',
'nav.products.settings': 'Settings',
'nav.store': 'Store',
'nav.store.overview': 'Overview',
'nav.store.items': 'My Store Items',
'nav.store.orders': 'My Orders',
'nav.store.shipping': 'Shipping Fees',
'nav.store.cards': 'Shopping Cards',
'nav.store.settings': 'Settings',
'nav.customers': 'Customers',
'nav.settings': 'Settings',
'nav.blog': 'Blog',
'nav.blog.overview': 'Overview',
'nav.blog.list': 'My Blogs',
'nav.blog.new': 'Add New Blog',
'nav.blog.categories': 'Categories',
'nav.blog.settings': 'Settings',
'nav.portfolios': 'Portfolios',
'nav.portfolios.overview': 'Overview',
'nav.portfolios.list': 'My Portfolios',
'nav.portfolios.new': 'Add New Portfolio',
'nav.portfolios.categories': 'Categories',
'nav.portfolios.settings': 'Settings',
'nav.website': 'Website',
'nav.website.overview': 'Overview',
'nav.website.sliders': 'Sliders',
'nav.website.specialCategories': 'Special Categories',
'nav.website.specialBrands': 'Special Brands',
'nav.website.specialItems': 'Special Items',
'nav.website.contact': 'Contact Us Form',
'nav.website.subscriptions': 'Subscriptions',
'nav.website.faq': 'FAQ',
'nav.website.badges': 'Badges',
'nav.website.ePayment': 'E-Payment',
'nav.help': 'Help Center',
'nav.logout': 'Logout',
'header.toggleMenu': 'Toggle menu',
'header.title': 'Admin Dashboard',
'header.messages': 'Messages',
'header.notifications': 'Notifications',
'header.profile': 'Profile',
'header.setting': 'Setting',
'header.changePassword': 'Change password',
'bc.dashboard': 'Dashboard',
'bc.editProduct': 'Edit Product',
'bc.productDetails': 'Product Details',
'bc.editBlog': 'Edit Blog',
'bc.blogDetails': 'Blog Details',
'bc.editPortfolio': 'Edit Portfolio',
'bc.portfolioDetails': 'Portfolio Details',
'home.welcome': 'Welcome back, {name}!',
'home.welcomeFallback': 'there',
'home.subtitle': "Here's what's happening with your store today.",
'home.card.products.title': 'Products',
'home.card.products.desc': 'Manage your products, inventory and categories.',
'home.card.products.link': 'View products',
'home.card.products.count': 'products',
'home.card.store.title': 'Store',
'home.card.store.desc': 'Manage your store settings, pages and themes.',
'home.card.store.link': 'View store',
'home.card.store.count': 'on sale',
'home.card.customers.title': 'Customers',
'home.card.customers.desc': 'View and manage your customers and their activity.',
'home.card.customers.link': 'View customers',
'home.card.customers.count': 'people',
'home.card.settings.title': 'Settings',
'home.card.settings.desc': 'Configure your store preferences and system settings.',
'home.card.settings.link': 'View settings',
'home.card.blog.title': 'Blog',
'home.card.blog.desc': 'Create and manage blog posts and categories.',
'home.card.blog.link': 'View blog',
'home.card.blog.count': 'posts',
'home.card.portfolios.title': 'Portfolios',
'home.card.portfolios.desc': 'Manage your portfolio items and showcase projects.',
'home.card.portfolios.link': 'View portfolios',
'home.card.portfolios.count': 'portfolios',
'home.card.website.title': 'Website',
'home.card.website.desc': 'Manage contact forms, FAQ, badges, subscriptions, and e-payment.',
'home.card.website.link': 'View website',
'home.chart.orders.title': 'Orders',
'home.chart.orders.subtitle': 'Orders and cart adds in the last 30 days',
'home.chart.orders.legend': 'Orders ({count})',
'home.chart.orders.cartLegend': 'Added to basket ({count})',
'home.chart.orders.loading': 'Loading chart...',
'home.chart.orders.error': 'Unable to load order activity.',
'home.chart.orders.bar': '{day}: {count} orders',
'home.chart.orders.cartBar': '{day}: {count} added to basket',
'home.chart.customers.title': 'Customers',
'home.chart.customers.subtitle': 'Registrations and active users in the last 30 days',
'home.chart.customers.legend': 'Registered ({count})',
'home.chart.customers.activeLegend': 'Active ({count})',
'home.chart.customers.loading': 'Loading chart...',
'home.chart.customers.error': 'Unable to load customer activity.',
'home.chart.customers.bar': '{day}: {count} registered',
'home.chart.customers.activeBar': '{day}: {count} active',
'products.overview.subtitle': 'Manage your products, inventory and categories.',
'products.card.list.desc': 'View, edit and manage all your existing products.',
'products.card.new.title': 'Add a New Product',
'products.card.new.desc': 'Create and publish a new product to your store.',
'products.form.edit.subtitle': 'Update product details and save changes.',
'products.card.categories.desc': 'Organize your products into categories and subcategories.',
'products.card.brands.desc': 'Manage product brands and assign them when creating products.',
'products.card.settings.desc': 'Configure product defaults, variants and display options.',
'products.activity.title': 'Product activity',
'products.activity.subtitle': 'Products added or updated in the last 12 months',
'products.activity.added': 'Added ({count})',
'products.activity.updated': 'Updated ({count})',
'products.activity.loading': 'Loading chart...',
'products.activity.error': 'Unable to load product activity.',
'products.activity.chartAria': 'Bar chart of products added and updated per month',
'products.activity.barAdded': '{month}: {count} added',
'products.activity.barUpdated': '{month}: {count} updated',
'title.signIn': 'Sign in',
'title.home': 'Home',
'title.businessProfile': 'Business Profile',
'title.products': 'Products',
'title.myProducts': 'My Products',
'title.addProduct': 'Add New Product',
'title.editProduct': 'Edit Product',
'title.productDetails': 'Product Details',
'title.categories': 'Categories',
'title.brands': 'Brands',
'title.settings': 'Settings',
'title.store': 'Store',
'title.storeItems': 'My Store Items',
'title.orders': 'My Orders',
'title.shoppingCards': 'Shopping Cards',
'title.customers': 'Customers',
'title.blog': 'Blog',
'title.myBlogs': 'My Blogs',
'title.addBlog': 'Add New Blog',
'title.editBlog': 'Edit Blog',
'title.blogDetails': 'Blog Details',
'title.portfolios': 'Portfolios',
'title.myPortfolios': 'My Portfolios',
'title.addPortfolio': 'Add New Portfolio',
'title.editPortfolio': 'Edit Portfolio',
'title.portfolioDetails': 'Portfolio Details',
'title.website': 'Website',
'title.sliders': 'Sliders',
'title.specialCategories': 'Special Categories',
'title.specialBrands': 'Special Brands',
'title.specialItems': 'Special Items',
'title.contactForm': 'Contact Us Form',
'title.subscriptions': 'Subscriptions',
'title.faq': 'FAQ',
'title.badges': 'Badges',
'title.ePayment': 'E-Payment',
'login.welcome': 'Welcome back',
'login.subtitle': 'Sign in with your mobile number',
'login.mobile': 'Mobile number',
'login.password': 'Password',
'login.passwordPlaceholder': 'Enter your password',
'login.hidePassword': 'Hide password',
'login.showPassword': 'Show password',
'login.forgot': 'Forgot password?',
'login.signIn': 'Sign in',
'login.signingIn': 'Signing in...',
'login.or': 'or',
'login.otp': 'One-time login with SMS',
'login.noAccount': "Don't have an account?",
'login.signUp': 'Sign up',
'login.error.signIn': 'Unable to sign in. Check your connection and try again.',
'login.error.sendCode': 'Unable to send verification code.',
'login.error.access': 'You do not have access to this business dashboard.',
'signup.title': 'Create account',
'signup.subtitle': 'Register for {domain}',
'signup.firstName': 'First name',
'signup.lastName': 'Last name',
'signup.passwordPlaceholder': 'Choose a password',
'signup.confirm': 'Confirm password',
'signup.confirmPlaceholder': 'Repeat your password',
'signup.create': 'Create account',
'signup.creating': 'Creating account...',
'signup.hasAccount': 'Already have an account?',
'signup.signIn': 'Sign in',
'signup.error.match': 'Passwords do not match.',
'signup.error.length': 'Password must be at least 8 characters.',
'signup.error.create': 'Unable to create account.',
'forgot.back': 'Back to sign in',
'forgot.title': 'Forgot password',
'forgot.subtitlePhone': 'We will send a verification code via SMS',
'forgot.subtitleCode': 'Enter the code and your new password',
'forgot.sendCode': 'Send SMS code',
'forgot.sending': 'Sending...',
'forgot.code': 'SMS verification code',
'forgot.newPassword': 'New password',
'forgot.newPasswordPlaceholder': 'Enter new password',
'forgot.reset': 'Reset password',
'forgot.verifying': 'Verifying...',
'forgot.error.length': 'Password must be at least 8 characters.',
'forgot.error.verify': 'Unable to verify code.',
'forgot.info.partial':
'Phone number verified. Full password reset via SMS is not available yet — please contact support or sign in if you remember your password.',
'otp.back': 'Back to sign in',
'otp.title': 'One-time login',
'otp.subtitlePhone': 'Verify your mobile number with a one-time SMS code',
'otp.subtitleCode': 'Enter the SMS code and your password',
'otp.sendCode': 'Send SMS code',
'otp.sending': 'Sending...',
'otp.code': 'SMS verification code',
'otp.password': 'Password',
'otp.passwordPlaceholder': 'Your account password',
'otp.signIn': 'Sign in',
'otp.signingIn': 'Signing in...',
'otp.error.password': 'Enter your account password to complete sign-in after SMS verification.',
'otp.error.signIn': 'Unable to sign in with SMS verification.',
'common.close': 'Close',
'common.resendIn': 'Resend code in {seconds}s',
'common.resend': 'Resend SMS code',
'common.codeSent': 'Verification code sent to {phone}',
'common.breadcrumb': 'Breadcrumb',
'common.overview': 'Overview',
} as const
type MessageKey = keyof typeof en
const fa: Record<MessageKey, string> = {
'app.dashboardName': 'پنل کسب‌وکار',
'app.storeFallback': 'کسب‌وکار',
'app.poweredBy': 'قدرت‌گرفته از Meshkee.app',
'app.userFallback': 'کاربر',
'role.superAdmin': 'سوپرادمین',
'role.owner': 'صاحب کسب‌وکار',
'role.staff': 'کارمند',
'nav.home': 'خانه',
'nav.businessProfile': 'پروفایل کسب‌وکار',
'nav.products': 'محصولات',
'nav.products.overview': 'نمای کلی',
'nav.products.list': 'محصولات من',
'nav.products.new': 'افزودن محصول',
'nav.products.categories': 'دسته‌بندی‌ها',
'nav.products.brands': 'برندها',
'nav.products.settings': 'تنظیمات',
'nav.store': 'فروشگاه',
'nav.store.overview': 'نمای کلی',
'nav.store.items': 'اقلام فروشگاه',
'nav.store.orders': 'سفارش‌های من',
'nav.store.shipping': 'هزینه ارسال',
'nav.store.cards': 'کارت‌های خرید',
'nav.store.settings': 'تنظیمات',
'nav.customers': 'مشتریان',
'nav.settings': 'تنظیمات',
'nav.blog': 'بلاگ',
'nav.blog.overview': 'نمای کلی',
'nav.blog.list': 'بلاگ‌های من',
'nav.blog.new': 'افزودن بلاگ',
'nav.blog.categories': 'دسته‌بندی‌ها',
'nav.blog.settings': 'تنظیمات',
'nav.portfolios': 'نمونه کارها',
'nav.portfolios.overview': 'نمای کلی',
'nav.portfolios.list': 'نمونه کارهای من',
'nav.portfolios.new': 'افزودن نمونه کار',
'nav.portfolios.categories': 'دسته‌بندی‌ها',
'nav.portfolios.settings': 'تنظیمات',
'nav.website': 'وب‌سایت',
'nav.website.overview': 'نمای کلی',
'nav.website.sliders': 'اسلایدرها',
'nav.website.specialCategories': 'دسته‌های ویژه',
'nav.website.specialBrands': 'برندهای ویژه',
'nav.website.specialItems': 'اقلام ویژه',
'nav.website.contact': 'فرم تماس با ما',
'nav.website.subscriptions': 'عضویت‌ها',
'nav.website.faq': 'سوالات متداول',
'nav.website.badges': 'نشان‌ها',
'nav.website.ePayment': 'پرداخت الکترونیک',
'nav.help': 'مرکز راهنما',
'nav.logout': 'خروج',
'header.toggleMenu': 'باز و بسته کردن منو',
'header.title': 'پنل مدیریت',
'header.messages': 'پیام‌ها',
'header.notifications': 'اعلان‌ها',
'header.profile': 'پروفایل',
'header.setting': 'تنظیمات',
'header.changePassword': 'تغییر رمز عبور',
'bc.dashboard': 'داشبورد',
'bc.editProduct': 'ویرایش محصول',
'bc.productDetails': 'جزئیات محصول',
'bc.editBlog': 'ویرایش بلاگ',
'bc.blogDetails': 'جزئیات بلاگ',
'bc.editPortfolio': 'ویرایش نمونه کار',
'bc.portfolioDetails': 'جزئیات نمونه کار',
'home.welcome': '{name} عزیز، خوش آمدی.',
'home.welcomeFallback': 'کاربر',
'home.subtitle': 'وضعیت فروشگاهتان را از اینجا دنبال کنید.',
'home.card.products.title': 'محصولات',
'home.card.products.desc': 'محصولات، موجودی و دسته‌بندی‌ها را مدیریت کنید.',
'home.card.products.link': 'مشاهده محصولات',
'home.card.products.count': 'محصول',
'home.card.store.title': 'فروشگاه',
'home.card.store.desc': 'تنظیمات، صفحات و ظاهر فروشگاه را مدیریت کنید.',
'home.card.store.link': 'مشاهده فروشگاه',
'home.card.store.count': 'محصول فروش',
'home.card.customers.title': 'مشتریان',
'home.card.customers.desc': 'مشتریان و فعالیت آن‌ها را ببینید و مدیریت کنید.',
'home.card.customers.link': 'مشاهده مشتریان',
'home.card.customers.count': 'نفر',
'home.card.settings.title': 'تنظیمات',
'home.card.settings.desc': 'ترجیحات فروشگاه و تنظیمات سیستم را پیکربندی کنید.',
'home.card.settings.link': 'مشاهده تنظیمات',
'home.card.blog.title': 'بلاگ',
'home.card.blog.desc': 'مطالب و دسته‌بندی‌های بلاگ را ایجاد و مدیریت کنید.',
'home.card.blog.link': 'مشاهده بلاگ',
'home.card.blog.count': 'مطلب',
'home.card.portfolios.title': 'نمونه کارها',
'home.card.portfolios.desc': 'نمونه کارها و پروژه‌های نمایشی را مدیریت کنید.',
'home.card.portfolios.link': 'مشاهده نمونه کارها',
'home.card.portfolios.count': 'نمونه کار',
'home.card.website.title': 'وب‌سایت',
'home.card.website.desc': 'فرم تماس، سوالات متداول، نشان‌ها، عضویت‌ها و پرداخت الکترونیک.',
'home.card.website.link': 'مشاهده وب‌سایت',
'home.chart.orders.title': 'سفارش‌ها',
'home.chart.orders.subtitle': 'سفارش‌ها و افزودن به سبد در ۳۰ روز گذشته',
'home.chart.orders.legend': 'سفارش ({count})',
'home.chart.orders.cartLegend': 'افزودن به سبد ({count})',
'home.chart.orders.loading': 'در حال بارگذاری نمودار...',
'home.chart.orders.error': 'بارگذاری فعالیت سفارش‌ها ممکن نشد.',
'home.chart.orders.bar': '{day}: {count} سفارش',
'home.chart.orders.cartBar': '{day}: {count} افزودن به سبد',
'home.chart.customers.title': 'مشتریان',
'home.chart.customers.subtitle': 'ثبت‌نام و کاربران فعال در ۳۰ روز گذشته',
'home.chart.customers.legend': 'ثبت‌نام ({count})',
'home.chart.customers.activeLegend': 'فعال ({count})',
'home.chart.customers.loading': 'در حال بارگذاری نمودار...',
'home.chart.customers.error': 'بارگذاری فعالیت مشتریان ممکن نشد.',
'home.chart.customers.bar': '{day}: {count} ثبت‌نام',
'home.chart.customers.activeBar': '{day}: {count} فعال',
'products.overview.subtitle': 'محصولات، موجودی و دسته‌بندی‌ها را مدیریت کنید.',
'products.card.list.desc': 'همه محصولات موجود را ببینید، ویرایش و مدیریت کنید.',
'products.card.new.title': 'افزودن محصول جدید',
'products.card.new.desc': 'یک محصول جدید بسازید و در فروشگاه منتشر کنید.',
'products.form.edit.subtitle': 'جزئیات محصول را به‌روز کنید و ذخیره کنید.',
'products.card.categories.desc': 'محصولات را در دسته‌بندی‌ها و زیردسته‌ها سازماندهی کنید.',
'products.card.brands.desc': 'برندهای محصول را مدیریت کنید و هنگام ساخت محصول به آن‌ها اختصاص دهید.',
'products.card.settings.desc': 'پیش‌فرض‌ها، تنوع‌ها و گزینه‌های نمایش محصول را پیکربندی کنید.',
'products.activity.title': 'فعالیت محصولات',
'products.activity.subtitle': 'محصولات افزوده‌شده یا به‌روزرسانی‌شده در ۱۲ ماه گذشته',
'products.activity.added': 'افزوده‌شده ({count})',
'products.activity.updated': 'به‌روزرسانی‌شده ({count})',
'products.activity.loading': 'در حال بارگذاری نمودار...',
'products.activity.error': 'بارگذاری فعالیت محصولات ممکن نشد.',
'products.activity.chartAria': 'نمودار میله‌ای محصولات افزوده‌شده و به‌روزرسانی‌شده در هر ماه',
'products.activity.barAdded': '{month}: {count} افزوده‌شده',
'products.activity.barUpdated': '{month}: {count} به‌روزرسانی‌شده',
'title.signIn': 'ورود',
'title.home': 'خانه',
'title.businessProfile': 'پروفایل کسب‌وکار',
'title.products': 'محصولات',
'title.myProducts': 'محصولات من',
'title.addProduct': 'افزودن محصول',
'title.editProduct': 'ویرایش محصول',
'title.productDetails': 'جزئیات محصول',
'title.categories': 'دسته‌بندی‌ها',
'title.brands': 'برندها',
'title.settings': 'تنظیمات',
'title.store': 'فروشگاه',
'title.storeItems': 'اقلام فروشگاه',
'title.orders': 'سفارش‌های من',
'title.shoppingCards': 'کارت‌های خرید',
'title.customers': 'مشتریان',
'title.blog': 'بلاگ',
'title.myBlogs': 'بلاگ‌های من',
'title.addBlog': 'افزودن بلاگ',
'title.editBlog': 'ویرایش بلاگ',
'title.blogDetails': 'جزئیات بلاگ',
'title.portfolios': 'نمونه کارها',
'title.myPortfolios': 'نمونه کارهای من',
'title.addPortfolio': 'افزودن نمونه کار',
'title.editPortfolio': 'ویرایش نمونه کار',
'title.portfolioDetails': 'جزئیات نمونه کار',
'title.website': 'وب‌سایت',
'title.sliders': 'اسلایدرها',
'title.specialCategories': 'دسته‌های ویژه',
'title.specialBrands': 'برندهای ویژه',
'title.specialItems': 'اقلام ویژه',
'title.contactForm': 'فرم تماس با ما',
'title.subscriptions': 'عضویت‌ها',
'title.faq': 'سوالات متداول',
'title.badges': 'نشان‌ها',
'title.ePayment': 'پرداخت الکترونیک',
'login.welcome': 'خوش آمدید',
'login.subtitle': 'با شماره موبایل وارد شوید',
'login.mobile': 'شماره موبایل',
'login.password': 'رمز عبور',
'login.passwordPlaceholder': 'رمز عبور را وارد کنید',
'login.hidePassword': 'مخفی کردن رمز',
'login.showPassword': 'نمایش رمز',
'login.forgot': 'رمز عبور را فراموش کرده‌اید؟',
'login.signIn': 'ورود',
'login.signingIn': 'در حال ورود...',
'login.or': 'یا',
'login.otp': 'ورود یک‌بارمصرف با پیامک',
'login.noAccount': 'حساب ندارید؟',
'login.signUp': 'ثبت‌نام',
'login.error.signIn': 'ورود ممکن نشد. اتصال را بررسی کنید و دوباره تلاش کنید.',
'login.error.sendCode': 'ارسال کد تأیید ممکن نشد.',
'login.error.access': 'به این پنل کسب‌وکار دسترسی ندارید.',
'signup.title': 'ایجاد حساب',
'signup.subtitle': 'ثبت‌نام برای {domain}',
'signup.firstName': 'نام',
'signup.lastName': 'نام خانوادگی',
'signup.passwordPlaceholder': 'یک رمز عبور انتخاب کنید',
'signup.confirm': 'تأیید رمز عبور',
'signup.confirmPlaceholder': 'رمز عبور را تکرار کنید',
'signup.create': 'ایجاد حساب',
'signup.creating': 'در حال ایجاد حساب...',
'signup.hasAccount': 'قبلاً حساب دارید؟',
'signup.signIn': 'ورود',
'signup.error.match': 'رمزهای عبور یکسان نیستند.',
'signup.error.length': 'رمز عبور باید حداقل ۸ کاراکتر باشد.',
'signup.error.create': 'ایجاد حساب ممکن نشد.',
'forgot.back': 'بازگشت به ورود',
'forgot.title': 'فراموشی رمز عبور',
'forgot.subtitlePhone': 'کد تأیید را با پیامک ارسال می‌کنیم',
'forgot.subtitleCode': 'کد و رمز عبور جدید را وارد کنید',
'forgot.sendCode': 'ارسال کد پیامکی',
'forgot.sending': 'در حال ارسال...',
'forgot.code': 'کد تأیید پیامکی',
'forgot.newPassword': 'رمز عبور جدید',
'forgot.newPasswordPlaceholder': 'رمز عبور جدید را وارد کنید',
'forgot.reset': 'بازنشانی رمز عبور',
'forgot.verifying': 'در حال تأیید...',
'forgot.error.length': 'رمز عبور باید حداقل ۸ کاراکتر باشد.',
'forgot.error.verify': 'تأیید کد ممکن نشد.',
'forgot.info.partial':
'شماره تأیید شد. بازنشانی کامل رمز با پیامک هنوز فعال نیست — با پشتیبانی تماس بگیرید یا اگر رمز را به یاد دارید وارد شوید.',
'otp.back': 'بازگشت به ورود',
'otp.title': 'ورود یک‌بارمصرف',
'otp.subtitlePhone': 'شماره موبایل را با کد پیامکی یک‌بارمصرف تأیید کنید',
'otp.subtitleCode': 'کد پیامکی و رمز عبور را وارد کنید',
'otp.sendCode': 'ارسال کد پیامکی',
'otp.sending': 'در حال ارسال...',
'otp.code': 'کد تأیید پیامکی',
'otp.password': 'رمز عبور',
'otp.passwordPlaceholder': 'رمز عبور حساب',
'otp.signIn': 'ورود',
'otp.signingIn': 'در حال ورود...',
'otp.error.password': 'برای تکمیل ورود پس از تأیید پیامک، رمز عبور حساب را وارد کنید.',
'otp.error.signIn': 'ورود با تأیید پیامکی ممکن نشد.',
'common.close': 'بستن',
'common.resendIn': 'ارسال مجدد کد تا {seconds} ثانیه',
'common.resend': 'ارسال مجدد کد پیامکی',
'common.codeSent': 'کد تأیید به {phone} ارسال شد',
'common.breadcrumb': 'مسیر صفحه',
'common.overview': 'نمای کلی',
}
const dictionaries: Record<DashboardLocale, Record<MessageKey, string>> = {
en: en as Record<MessageKey, string>,
fa,
}
export type BusinessMessageKey = MessageKey
/** Maps hardcoded English breadcrumb labels used across pages → message keys. */
const BREADCRUMB_LABEL_KEYS: Record<string, MessageKey> = {
Home: 'nav.home',
Dashboard: 'bc.dashboard',
'Business Profile': 'nav.businessProfile',
Products: 'nav.products',
Overview: 'common.overview',
'My Products': 'nav.products.list',
'Add New Product': 'nav.products.new',
'Add a New Product': 'nav.products.new',
'Edit Product': 'bc.editProduct',
'Product Details': 'bc.productDetails',
Categories: 'title.categories',
Brands: 'title.brands',
Settings: 'title.settings',
Store: 'nav.store',
'My Store Items': 'nav.store.items',
'My Orders': 'nav.store.orders',
'Shipping Fees': 'nav.store.shipping',
'Shopping Cards': 'nav.store.cards',
Customers: 'nav.customers',
Blog: 'nav.blog',
'My Blogs': 'nav.blog.list',
'Add New Blog': 'nav.blog.new',
'Edit Blog': 'bc.editBlog',
'Blog Details': 'bc.blogDetails',
Portfolios: 'nav.portfolios',
'My Portfolios': 'nav.portfolios.list',
'Add New Portfolio': 'nav.portfolios.new',
'Edit Portfolio': 'bc.editPortfolio',
'Portfolio Details': 'bc.portfolioDetails',
Website: 'nav.website',
Sliders: 'nav.website.sliders',
'Special Categories': 'nav.website.specialCategories',
'Special Brands': 'nav.website.specialBrands',
'Special Items': 'nav.website.specialItems',
'Contact Us Form': 'nav.website.contact',
Subscriptions: 'nav.website.subscriptions',
FAQ: 'nav.website.faq',
Badges: 'nav.website.badges',
'E-Payment': 'nav.website.ePayment',
Orders: 'nav.store.orders',
Profile: 'header.profile',
'Sign in': 'title.signIn',
}
export function translate(
locale: DashboardLocale,
key: MessageKey,
vars?: Record<string, string | number>,
): string {
const dict = dictionaries[locale] ?? dictionaries.en
let text = dict[key] ?? dictionaries.en[key] ?? key
if (vars) {
for (const [name, value] of Object.entries(vars)) {
text = text.replaceAll(`{${name}}`, String(value))
}
}
return text
}
export function translateBreadcrumbLabel(locale: DashboardLocale, label: string): string {
const key = BREADCRUMB_LABEL_KEYS[label]
return key ? translate(locale, key) : label
}
export function getBusinessRouteTitleRules(locale: DashboardLocale): RouteTitleRule[] {
const t = (key: MessageKey) => translate(locale, key)
return [
{ match: '/login', labels: [t('title.signIn')] },
{ match: '/business-profile', labels: [t('title.businessProfile')] },
{ match: '/products/categories', labels: [t('title.products'), t('title.categories')] },
{ match: '/products/brands', labels: [t('title.products'), t('title.brands')] },
{ match: '/products/new', labels: [t('title.products'), t('title.addProduct')] },
{ match: /^\/products\/edit\/[^/]+$/, labels: [t('title.products'), t('title.editProduct')] },
{ match: '/products/list', labels: [t('title.products'), t('title.myProducts')] },
{
match: /^\/products\/detail\/[^/]+$/,
labels: [t('title.products'), t('title.productDetails')],
},
{ match: '/products/settings', labels: [t('title.products'), t('title.settings')] },
{ match: '/products', labels: [t('title.products')] },
{ match: '/store/items', labels: [t('title.store'), t('title.storeItems')] },
{ match: '/store/orders', labels: [t('title.store'), t('title.orders')] },
{ match: '/store/cards', labels: [t('title.store'), t('title.shoppingCards')] },
{ match: '/store/settings', labels: [t('title.store'), t('title.settings')] },
{ match: '/store', labels: [t('title.store')] },
{ match: '/customers', labels: [t('title.customers')] },
{ match: '/blog/list', labels: [t('title.blog'), t('title.myBlogs')] },
{ match: /^\/blog\/detail\/[^/]+$/, labels: [t('title.blog'), t('title.blogDetails')] },
{ match: '/blog/new', labels: [t('title.blog'), t('title.addBlog')] },
{ match: /^\/blog\/edit\/[^/]+$/, labels: [t('title.blog'), t('title.editBlog')] },
{ match: '/blog/categories', labels: [t('title.blog'), t('title.categories')] },
{ match: '/blog/settings', labels: [t('title.blog'), t('title.settings')] },
{ match: '/blog', labels: [t('title.blog')] },
{ match: '/portfolios/list', labels: [t('title.portfolios'), t('title.myPortfolios')] },
{
match: /^\/portfolios\/detail\/[^/]+$/,
labels: [t('title.portfolios'), t('title.portfolioDetails')],
},
{ match: '/portfolios/new', labels: [t('title.portfolios'), t('title.addPortfolio')] },
{
match: /^\/portfolios\/edit\/[^/]+$/,
labels: [t('title.portfolios'), t('title.editPortfolio')],
},
{ match: '/portfolios/categories', labels: [t('title.portfolios'), t('title.categories')] },
{ match: '/portfolios/settings', labels: [t('title.portfolios'), t('title.settings')] },
{ match: '/portfolios', labels: [t('title.portfolios')] },
{ match: '/website/sliders', labels: [t('title.website'), t('title.sliders')] },
{
match: '/website/special-categories',
labels: [t('title.website'), t('title.specialCategories')],
},
{ match: '/website/special-brands', labels: [t('title.website'), t('title.specialBrands')] },
{ match: '/website/special-items', labels: [t('title.website'), t('title.specialItems')] },
{ match: '/website/contact', labels: [t('title.website'), t('title.contactForm')] },
{ match: '/website/subscriptions', labels: [t('title.website'), t('title.subscriptions')] },
{ match: '/website/faq', labels: [t('title.website'), t('title.faq')] },
{ match: '/website/badges', labels: [t('title.website'), t('title.badges')] },
{ match: '/website/e-payment', labels: [t('title.website'), t('title.ePayment')] },
{ match: '/website', labels: [t('title.website')] },
{ match: '/', labels: [t('title.home')] },
]
}
apps/business/src/i18n/useT.ts
+13
View File
@@ -0,0 +1,13 @@
import { useCallback } from 'react'
import { useLocale } from '@meshkee/dashboard-ui'
import { translate, type BusinessMessageKey } from './messages'
export function useT() {
const { locale } = useLocale()
return useCallback(
(key: BusinessMessageKey, vars?: Record<string, string | number>) =>
translate(locale, key, vars),
[locale],
)
}
apps/business/src/index.css
+64 -13
View File
@@ -13,6 +13,10 @@
--primary-dark: #2563eb;
--primary-rgb: 59 130 246;
--primary-dark-rgb: 37 99 235;
--chart-accent: #06b6d4;
--chart-accent-dark: #0891b2;
--chart-accent-rgb: 6 182 212;
--chart-accent-dark-rgb: 8 145 178;
--bg-gradient-start: color-mix(in srgb, var(--primary-light) 72%, #ffffff);
--bg-gradient-mid: color-mix(in srgb, var(--primary-light) 42%, #ffffff);
--bg-gradient-end: color-mix(in srgb, var(--primary-light) 18%, #ffffff);
@@ -33,8 +37,9 @@
--field-padding-y: 9px;
--field-padding-x: 12px;
--field-height: 38px;
--font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-en: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-fa: 'IRANYekan', 'IranYekan', 'Yekan', Tahoma, sans-serif;
--font-ui: var(--font-en), var(--font-fa);
}
html {
@@ -47,18 +52,64 @@ body,
}
body {
font-family: var(--font-en);
font-family: var(--font-ui);
color: var(--text-primary);
background-color: var(--bg-gradient-mid);
background-image:
radial-gradient(ellipse 520px 520px at calc(100% - 40px) -60px, rgba(var(--primary-rgb) / 0.28), transparent 72%),
radial-gradient(ellipse 420px 420px at 18% calc(100% + 20px), rgba(var(--primary-rgb) / 0.18), transparent 72%),
radial-gradient(ellipse 320px 320px at -40px 42%, rgba(var(--primary-rgb) / 0.12), transparent 72%),
linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
background-image: linear-gradient(
135deg,
var(--bg-gradient-start) 0%,
var(--bg-gradient-mid) 50%,
var(--bg-gradient-end) 100%
);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
inset: -30%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(
ellipse 520px 520px at 72% 18%,
rgba(var(--primary-rgb) / 0.3),
transparent 72%
),
radial-gradient(
ellipse 420px 420px at 22% 82%,
rgba(var(--primary-rgb) / 0.2),
transparent 72%
),
radial-gradient(
ellipse 360px 360px at 8% 42%,
rgba(var(--chart-accent-rgb, var(--primary-rgb)) / 0.14),
transparent 72%
);
animation: pageAuraDrift 22s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes pageAuraDrift {
0% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(3.5%, -2.5%, 0) scale(1.06);
}
100% {
transform: translate3d(-3%, 3.5%, 0) scale(1.04);
}
}
@media (prefers-reduced-motion: reduce) {
body::before {
animation: none;
}
}
button {
@@ -103,7 +154,7 @@ select:focus {
input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden']),
textarea {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
font-size: var(--field-font-size);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
@@ -124,16 +175,16 @@ textarea:focus {
input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden'])::placeholder,
textarea::placeholder {
font-family: var(--font-en);
font-family: var(--font-ui);
opacity: 1;
}
[dir='rtl'],
:lang(fa),
.faText {
font-family: var(--font-fa), var(--font-en);
font-weight: 400; /* IRANYekan Regular */
text-align: right;
font-family: var(--font-ui);
font-weight: 400; /* IRANYekan Regular for FA glyphs */
text-align: start;
}
[dir='rtl']::placeholder,
@@ -142,7 +193,7 @@ textarea::placeholder {
input.faText::placeholder,
input[dir='rtl']::placeholder,
input[lang='fa']::placeholder {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
font-weight: 400;
opacity: 1;
}
apps/business/src/lib/routeTitles.ts
+2 -46
View File
@@ -1,47 +1,3 @@
import type { RouteTitleRule } from '@meshkee/dashboard-core'
/** Legacy helpers — prefer `../i18n/messages`. */
export { getBusinessRouteTitleRules } from '../i18n/messages'
export const BUSINESS_DASHBOARD_NAME = 'Business Dashboard'
export const businessRouteTitleRules: RouteTitleRule[] = [
{ match: '/login', labels: ['Sign in'] },
{ match: '/business-profile', labels: ['Business Profile'] },
{ match: '/products/categories', labels: ['Products', 'Categories'] },
{ match: '/products/brands', labels: ['Products', 'Brands'] },
{ match: '/products/new', labels: ['Products', 'Add New Product'] },
{ match: /^\/products\/edit\/[^/]+$/, labels: ['Products', 'Edit Product'] },
{ match: '/products/list', labels: ['Products', 'My Products'] },
{ match: /^\/products\/detail\/[^/]+$/, labels: ['Products', 'Product Details'] },
{ match: '/products/settings', labels: ['Products', 'Settings'] },
{ match: '/products', labels: ['Products'] },
{ match: '/store/items', labels: ['Store', 'My Store Items'] },
{ match: '/store/orders', labels: ['Store', 'My Orders'] },
{ match: '/store/cards', labels: ['Store', 'Shopping Cards'] },
{ match: '/store/settings', labels: ['Store', 'Settings'] },
{ match: '/store', labels: ['Store'] },
{ match: '/customers', labels: ['Customers'] },
{ match: '/blog/list', labels: ['Blog', 'My Blogs'] },
{ match: /^\/blog\/detail\/[^/]+$/, labels: ['Blog', 'Blog Details'] },
{ match: '/blog/new', labels: ['Blog', 'Add New Blog'] },
{ match: /^\/blog\/edit\/[^/]+$/, labels: ['Blog', 'Edit Blog'] },
{ match: '/blog/categories', labels: ['Blog', 'Categories'] },
{ match: '/blog/settings', labels: ['Blog', 'Settings'] },
{ match: '/blog', labels: ['Blog'] },
{ match: '/portfolios/list', labels: ['Portfolios', 'My Portfolios'] },
{ match: /^\/portfolios\/detail\/[^/]+$/, labels: ['Portfolios', 'Portfolio Details'] },
{ match: '/portfolios/new', labels: ['Portfolios', 'Add New Portfolio'] },
{ match: /^\/portfolios\/edit\/[^/]+$/, labels: ['Portfolios', 'Edit Portfolio'] },
{ match: '/portfolios/categories', labels: ['Portfolios', 'Categories'] },
{ match: '/portfolios/settings', labels: ['Portfolios', 'Settings'] },
{ match: '/portfolios', labels: ['Portfolios'] },
{ match: '/website/sliders', labels: ['Website', 'Sliders'] },
{ match: '/website/special-categories', labels: ['Website', 'Special Categories'] },
{ match: '/website/special-brands', labels: ['Website', 'Special Brands'] },
{ match: '/website/special-items', labels: ['Website', 'Special Items'] },
{ match: '/website/contact', labels: ['Website', 'Contact Us Form'] },
{ match: '/website/subscriptions', labels: ['Website', 'Subscriptions'] },
{ match: '/website/faq', labels: ['Website', 'FAQ'] },
{ match: '/website/badges', labels: ['Website', 'Badges'] },
{ match: '/website/e-payment', labels: ['Website', 'E-Payment'] },
{ match: '/website', labels: ['Website'] },
{ match: '/', labels: ['Home'] },
]
apps/business/src/pages/AddNewProductPage.tsx
+4 -4
View File
@@ -23,10 +23,12 @@ import type { Category, FlatCategory } from '../types/category'
import { flattenCategories } from '../utils/categories'
import pageStyles from '../components/PageContent.module.css'
import styles from './AddNewProductPage.module.css'
import { useT } from '../i18n/useT'
export function AddNewProductPage() {
const { id } = useParams()
const navigate = useNavigate()
const t = useT()
const isEdit = Boolean(id)
const [categories, setCategories] = useState<Category[]>([])
@@ -183,12 +185,10 @@ export function AddNewProductPage() {
<div className={pageStyles.pageHeader}>
<div>
<h2 className={pageStyles.pageTitle}>
{isEdit ? 'Edit Product' : 'Add a New Product'}
{isEdit ? t('title.editProduct') : t('products.card.new.title')}
</h2>
<p className={pageStyles.pageSubtitle}>
{isEdit
? 'Update product details and save changes.'
: 'Create and publish a new product to your store.'}
{isEdit ? t('products.form.edit.subtitle') : t('products.card.new.desc')}
</p>
</div>
</div>
apps/business/src/pages/BusinessProfilePage.module.css
+1 -1
View File
@@ -130,7 +130,7 @@
}
.selectFieldFa {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
direction: rtl;
text-align: right;
}
apps/business/src/pages/HomePage.tsx
+144 -42
View File
@@ -1,105 +1,207 @@
import { useCallback, useEffect, useState } from 'react'
import { CalendarDays } from 'lucide-react'
import {
ShoppingBag,
Store,
Users,
Settings,
FileText,
Briefcase,
Globe,
} from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useAuth } from '../context/AuthContext'
import { SectionCard } from '../components/SectionCard'
import { DailyActivityChart } from '../components/DailyActivityChart'
import { useT } from '../i18n/useT'
import type { BusinessMessageKey } from '../i18n/messages'
import { listProducts } from '../services/productService'
import { listStoreItems } from '../services/storeItemService'
import { listCustomers } from '../services/customerService'
import { listBlogs } from '../services/blogService'
import { listPortfolios } from '../services/portfolioService'
import {
getCustomersDailyActivity,
getOrdersDailyActivity,
} from '../services/dailyActivityService'
import styles from '../components/PageContent.module.css'
const sections = [
type CountKey = 'products' | 'store' | 'customers' | 'blog' | 'portfolios'
const sections: {
icon: typeof ShoppingBag
titleKey: BusinessMessageKey
descKey: BusinessMessageKey
linkKey: BusinessMessageKey
countLabelKey?: BusinessMessageKey
href: string
countKey?: CountKey
}[] = [
{
icon: ShoppingBag,
title: 'Products',
description: 'Manage your products, inventory and categories.',
linkText: 'View products',
titleKey: 'home.card.products.title',
descKey: 'home.card.products.desc',
linkKey: 'home.card.products.link',
countLabelKey: 'home.card.products.count',
href: '/products',
countKey: 'products',
},
{
icon: Store,
title: 'Store',
description: 'Manage your store settings, pages and themes.',
linkText: 'View store',
titleKey: 'home.card.store.title',
descKey: 'home.card.store.desc',
linkKey: 'home.card.store.link',
countLabelKey: 'home.card.store.count',
href: '/store',
countKey: 'store',
},
{
icon: Users,
title: 'Customers',
description: 'View and manage your customers and their activity.',
linkText: 'View customers',
titleKey: 'home.card.customers.title',
descKey: 'home.card.customers.desc',
linkKey: 'home.card.customers.link',
countLabelKey: 'home.card.customers.count',
href: '/customers',
},
{
icon: Settings,
title: 'Settings',
description: 'Configure your store preferences and system settings.',
linkText: 'View settings',
href: '/settings',
countKey: 'customers',
},
{
icon: FileText,
title: 'Blog',
description: 'Create and manage blog posts and categories.',
linkText: 'View blog',
titleKey: 'home.card.blog.title',
descKey: 'home.card.blog.desc',
linkKey: 'home.card.blog.link',
countLabelKey: 'home.card.blog.count',
href: '/blog',
countKey: 'blog',
},
{
icon: Briefcase,
title: 'Portfolios',
description: 'Manage your portfolio items and showcase projects.',
linkText: 'View portfolios',
titleKey: 'home.card.portfolios.title',
descKey: 'home.card.portfolios.desc',
linkKey: 'home.card.portfolios.link',
countLabelKey: 'home.card.portfolios.count',
href: '/portfolios',
countKey: 'portfolios',
},
{
icon: Globe,
title: 'Website',
description: 'Manage contact forms, FAQ, badges, subscriptions, and e-payment.',
linkText: 'View website',
titleKey: 'home.card.website.title',
descKey: 'home.card.website.desc',
linkKey: 'home.card.website.link',
href: '/website',
},
]
function getFormattedDate() {
return new Intl.DateTimeFormat('en-US', {
type SectionCounts = Partial<Record<CountKey, number>>
async function loadSectionCounts(signal: AbortSignal): Promise<SectionCounts> {
const [products, store, customers, blog, portfolios] = await Promise.all([
listProducts(1, 1, signal).then((r) => r.total).catch(() => null),
listStoreItems(1, 1, signal).then((r) => r.total).catch(() => null),
listCustomers({ page: 1, pageSize: 1 }, signal).then((r) => r.total).catch(() => null),
listBlogs(1, 1, signal).then((r) => r.total).catch(() => null),
listPortfolios(1, 1, signal).then((r) => r.total).catch(() => null),
])
const counts: SectionCounts = {}
if (products !== null) counts.products = products
if (store !== null) counts.store = store
if (customers !== null) counts.customers = customers
if (blog !== null) counts.blog = blog
if (portfolios !== null) counts.portfolios = portfolios
return counts
}
export function HomePage() {
const { user } = useAuth()
const { locale } = useLocale()
const t = useT()
const [counts, setCounts] = useState<SectionCounts>({})
useEffect(() => {
const controller = new AbortController()
void loadSectionCounts(controller.signal).then((next) => {
if (!controller.signal.aborted) setCounts(next)
})
return () => controller.abort()
}, [])
const loadOrdersActivity = useCallback(
(signal: AbortSignal) => getOrdersDailyActivity(30, signal),
[],
)
const loadCustomersActivity = useCallback(
(signal: AbortSignal) => getCustomersDailyActivity(30, signal),
[],
)
const firstName =
(locale === 'en'
? user?.firstNameEn?.trim() || user?.firstName
: user?.firstName?.trim() || user?.firstNameEn) || t('home.welcomeFallback')
const formattedDate = new Intl.DateTimeFormat(locale === 'fa' ? 'fa-IR' : 'en-US', {
month: 'long',
day: 'numeric',
year: 'numeric',
weekday: 'long',
}).format(new Date())
}
export function HomePage() {
const { user } = useAuth()
const firstName = user?.firstName || 'there'
return (
<main className={styles.content}>
<div className={styles.pageHeader}>
<div>
<h2 className={styles.pageTitle}>
Welcome back, {firstName}! <span aria-hidden="true">👋</span>
</h2>
<p className={styles.pageSubtitle}>
Here&apos;s what&apos;s happening with your store today.
</p>
<h2 className={styles.pageTitle}>{t('home.welcome', { name: firstName })}</h2>
<p className={styles.pageSubtitle}>{t('home.subtitle')}</p>
</div>
<div className={styles.dateBadge}>
<CalendarDays size={16} />
<span>{getFormattedDate()}</span>
<span>{formattedDate}</span>
</div>
</div>
<div className={styles.gridHome}>
{sections.map((section) => (
<SectionCard key={section.title} {...section} />
<SectionCard
key={section.href}
icon={section.icon}
title={t(section.titleKey)}
description={t(section.descKey)}
linkText={t(section.linkKey)}
href={section.href}
count={section.countKey ? counts[section.countKey] : undefined}
countLabel={section.countLabelKey ? t(section.countLabelKey) : undefined}
/>
))}
</div>
<div className={styles.grid12}>
<div className={styles.col6}>
<DailyActivityChart
titleKey="home.chart.orders.title"
subtitleKey="home.chart.orders.subtitle"
primaryLegendKey="home.chart.orders.legend"
secondaryLegendKey="home.chart.orders.cartLegend"
loadingKey="home.chart.orders.loading"
errorKey="home.chart.orders.error"
primaryBarTitleKey="home.chart.orders.bar"
secondaryBarTitleKey="home.chart.orders.cartBar"
load={loadOrdersActivity}
/>
</div>
<div className={styles.col6}>
<DailyActivityChart
titleKey="home.chart.customers.title"
subtitleKey="home.chart.customers.subtitle"
primaryLegendKey="home.chart.customers.legend"
secondaryLegendKey="home.chart.customers.activeLegend"
loadingKey="home.chart.customers.loading"
errorKey="home.chart.customers.error"
primaryBarTitleKey="home.chart.customers.bar"
secondaryBarTitleKey="home.chart.customers.activeBar"
load={loadCustomersActivity}
/>
</div>
</div>
</main>
)
}
apps/business/src/pages/LoginPage.module.css
+9 -4
View File
@@ -24,11 +24,15 @@
.brand {
display: flex;
align-items: center;
justify-content: center;
justify-content: flex-start;
gap: 12px;
margin-bottom: 28px;
}
.langSelect {
margin-inline-start: auto;
}
.logo {
display: block;
width: 48px;
@@ -112,7 +116,7 @@
.inputIcon {
position: absolute;
left: 12px;
inset-inline-start: 12px;
color: var(--text-muted);
pointer-events: none;
}
@@ -120,7 +124,8 @@
.inputWrap input {
width: 100%;
min-height: var(--field-height);
padding: var(--field-padding-y) 40px var(--field-padding-y) 38px;
padding-block: var(--field-padding-y);
padding-inline: 38px 40px;
font-size: var(--field-font-size);
line-height: 1.4;
font-family: inherit;
@@ -140,7 +145,7 @@
.togglePassword {
position: absolute;
right: 12px;
inset-inline-end: 12px;
display: flex;
align-items: center;
justify-content: center;
apps/business/src/pages/LoginPage.tsx
+78 -76
View File
@@ -1,6 +1,7 @@
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Eye, EyeOff, Smartphone, Lock, KeyRound, ArrowLeft, User } from 'lucide-react'
import { LanguageSelect } from '@meshkee/dashboard-ui'
import { useAuth, BUSINESS_ACCESS_MESSAGE } from '../context/AuthContext'
import { useTenantBranding } from '../context/TenantBrandingContext'
import { ApiError } from '../lib/api'
@@ -13,6 +14,7 @@ import {
sendOtp,
verifyOtp,
} from '../services/authService'
import { useT } from '../i18n/useT'
import meshkeeLogo from '../assets/meshkee-logo.png'
import styles from './LoginPage.module.css'
@@ -24,6 +26,7 @@ export function LoginPage() {
const { login } = useAuth()
const { businessName, logoUrl } = useTenantBranding()
const businessDomain = getBusinessDomain()
const t = useT()
const [view, setView] = useState<AuthView>('login')
const [smsStep, setSmsStep] = useState<SmsStep>('phone')
@@ -80,7 +83,11 @@ export function LoginPage() {
function handleApiError(err: unknown, fallback: string) {
if (err instanceof ApiError) {
setError(err.message)
if (err.message === BUSINESS_ACCESS_MESSAGE) {
setError(t('login.error.access'))
} else {
setError(err.message)
}
} else {
setError(fallback)
}
@@ -102,7 +109,7 @@ export function LoginPage() {
setSmsStep('code')
startCountdown()
} catch (err) {
handleApiError(err, 'Unable to send verification code.')
handleApiError(err, t('login.error.sendCode'))
} finally {
setIsSubmitting(false)
}
@@ -118,7 +125,7 @@ export function LoginPage() {
await login(cellNumber, password)
navigate('/')
} catch (err) {
handleApiError(err, 'Unable to sign in. Check your connection and try again.')
handleApiError(err, t('login.error.signIn'))
} finally {
setIsSubmitting(false)
}
@@ -129,12 +136,12 @@ export function LoginPage() {
clearMessages()
if (password !== confirmPassword) {
setError('Passwords do not match.')
setError(t('signup.error.match'))
return
}
if (password.length < 8) {
setError('Password must be at least 8 characters.')
setError(t('signup.error.length'))
return
}
@@ -152,16 +159,14 @@ export function LoginPage() {
if (data.user.dashboard !== 'business' || data.user.businesses.length === 0) {
logoutRequest()
setError(
`${BUSINESS_ACCESS_MESSAGE} Customer registration on ${businessDomain} does not grant dashboard access.`,
)
setError(t('login.error.access'))
return
}
setActiveBusiness(data.user)
navigate('/')
} catch (err) {
handleApiError(err, 'Unable to create account.')
handleApiError(err, t('signup.error.create'))
} finally {
setIsSubmitting(false)
}
@@ -172,7 +177,7 @@ export function LoginPage() {
clearMessages()
if (newPassword.length < 8) {
setError('Password must be at least 8 characters.')
setError(t('forgot.error.length'))
return
}
@@ -181,12 +186,10 @@ export function LoginPage() {
try {
const cellNumber = toE164CellNumber(phone)
await verifyOtp(cellNumber, smsCode)
setInfo(
'Phone number verified. Full password reset via SMS is not available yet — please contact your administrator or sign in if you remember your password.',
)
setInfo(t('forgot.info.partial'))
setTimeout(() => switchView('login'), 2500)
} catch (err) {
handleApiError(err, 'Unable to verify code.')
handleApiError(err, t('forgot.error.verify'))
} finally {
setIsSubmitting(false)
}
@@ -202,14 +205,14 @@ export function LoginPage() {
await verifyOtp(cellNumber, smsCode)
if (!password) {
setError('Enter your account password to complete sign-in after SMS verification.')
setError(t('otp.error.password'))
return
}
await login(cellNumber, password)
navigate('/')
} catch (err) {
handleApiError(err, 'Unable to sign in with SMS verification.')
handleApiError(err, t('otp.error.signIn'))
} finally {
setIsSubmitting(false)
}
@@ -222,14 +225,17 @@ export function LoginPage() {
<img src={logoUrl || meshkeeLogo} alt="" className={styles.logo} />
<div className={styles.brandText}>
<span className={styles.businessName}>{businessName || businessDomain}</span>
<span className={styles.appName}>powered by Meshkee.app</span>
<span className={styles.appName}>{t('app.poweredBy')}</span>
</div>
<div className={styles.langSelect}>
<LanguageSelect />
</div>
</div>
{view === 'login' && (
<>
<h1 className={styles.title}>Welcome back</h1>
<p className={styles.subtitle}>Sign in with your mobile number</p>
<h1 className={styles.title}>{t('login.welcome')}</h1>
<p className={styles.subtitle}>{t('login.subtitle')}</p>
<form className={styles.form} onSubmit={handleLogin}>
{error && (
@@ -240,7 +246,7 @@ export function LoginPage() {
{info && <div className={styles.info}>{info}</div>}
<div className={styles.field}>
<label htmlFor="login-phone">Mobile number</label>
<label htmlFor="login-phone">{t('login.mobile')}</label>
<div className={styles.inputWrap}>
<Smartphone size={18} className={styles.inputIcon} />
<input
@@ -257,13 +263,13 @@ export function LoginPage() {
</div>
<div className={styles.field}>
<label htmlFor="login-password">Password</label>
<label htmlFor="login-password">{t('login.password')}</label>
<div className={styles.inputWrap}>
<Lock size={18} className={styles.inputIcon} />
<input
id="login-password"
type={showPassword ? 'text' : 'password'}
placeholder="Enter your password"
placeholder={t('login.passwordPlaceholder')}
value={password}
onChange={(e) => setPassword(e.target.value)}
required
@@ -274,7 +280,7 @@ export function LoginPage() {
type="button"
className={styles.togglePassword}
onClick={() => setShowPassword((v) => !v)}
aria-label={showPassword ? 'Hide password' : 'Show password'}
aria-label={showPassword ? t('login.hidePassword') : t('login.showPassword')}
disabled={isSubmitting}
>
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -289,17 +295,17 @@ export function LoginPage() {
onClick={() => switchView('forgot')}
disabled={isSubmitting}
>
Forgot password?
{t('login.forgot')}
</button>
</div>
<button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
{isSubmitting ? 'Signing in...' : 'Sign in'}
{isSubmitting ? t('login.signingIn') : t('login.signIn')}
</button>
</form>
<div className={styles.divider}>
<span>or</span>
<span>{t('login.or')}</span>
</div>
<button
@@ -309,18 +315,18 @@ export function LoginPage() {
disabled={isSubmitting}
>
<KeyRound size={18} />
One-time login with SMS
{t('login.otp')}
</button>
<p className={styles.footerText}>
Don&apos;t have an account?{' '}
{t('login.noAccount')}{' '}
<button
type="button"
className={styles.linkBtn}
onClick={() => switchView('signup')}
disabled={isSubmitting}
>
Sign up
{t('login.signUp')}
</button>
</p>
</>
@@ -328,8 +334,8 @@ export function LoginPage() {
{view === 'signup' && (
<>
<h1 className={styles.title}>Create account</h1>
<p className={styles.subtitle}>Staff accounts are invited by the business owner</p>
<h1 className={styles.title}>{t('signup.title')}</h1>
<p className={styles.subtitle}>{t('signup.subtitle', { domain: businessDomain })}</p>
<form className={styles.form} onSubmit={handleSignup}>
{error && (
@@ -340,13 +346,13 @@ export function LoginPage() {
<div className={styles.fieldRow}>
<div className={styles.field}>
<label htmlFor="signup-first">First name</label>
<label htmlFor="signup-first">{t('signup.firstName')}</label>
<div className={styles.inputWrap}>
<User size={18} className={styles.inputIcon} />
<input
id="signup-first"
type="text"
placeholder="First name"
placeholder={t('signup.firstName')}
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
required
@@ -356,13 +362,13 @@ export function LoginPage() {
</div>
</div>
<div className={styles.field}>
<label htmlFor="signup-last">Last name</label>
<label htmlFor="signup-last">{t('signup.lastName')}</label>
<div className={styles.inputWrap}>
<User size={18} className={styles.inputIcon} />
<input
id="signup-last"
type="text"
placeholder="Last name"
placeholder={t('signup.lastName')}
value={lastName}
onChange={(e) => setLastName(e.target.value)}
required
@@ -374,7 +380,7 @@ export function LoginPage() {
</div>
<div className={styles.field}>
<label htmlFor="signup-phone">Mobile number</label>
<label htmlFor="signup-phone">{t('login.mobile')}</label>
<div className={styles.inputWrap}>
<Smartphone size={18} className={styles.inputIcon} />
<input
@@ -391,13 +397,13 @@ export function LoginPage() {
</div>
<div className={styles.field}>
<label htmlFor="signup-password">Password</label>
<label htmlFor="signup-password">{t('login.password')}</label>
<div className={styles.inputWrap}>
<Lock size={18} className={styles.inputIcon} />
<input
id="signup-password"
type={showPassword ? 'text' : 'password'}
placeholder="Choose a password"
placeholder={t('signup.passwordPlaceholder')}
value={password}
onChange={(e) => setPassword(e.target.value)}
required
@@ -408,7 +414,7 @@ export function LoginPage() {
type="button"
className={styles.togglePassword}
onClick={() => setShowPassword((v) => !v)}
aria-label={showPassword ? 'Hide password' : 'Show password'}
aria-label={showPassword ? t('login.hidePassword') : t('login.showPassword')}
disabled={isSubmitting}
>
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -417,13 +423,13 @@ export function LoginPage() {
</div>
<div className={styles.field}>
<label htmlFor="signup-confirm">Confirm password</label>
<label htmlFor="signup-confirm">{t('signup.confirm')}</label>
<div className={styles.inputWrap}>
<Lock size={18} className={styles.inputIcon} />
<input
id="signup-confirm"
type={showPassword ? 'text' : 'password'}
placeholder="Repeat your password"
placeholder={t('signup.confirmPlaceholder')}
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
required
@@ -434,19 +440,19 @@ export function LoginPage() {
</div>
<button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
{isSubmitting ? 'Creating account...' : 'Create account'}
{isSubmitting ? t('signup.creating') : t('signup.create')}
</button>
</form>
<p className={styles.footerText}>
Already have an account?{' '}
{t('signup.hasAccount')}{' '}
<button
type="button"
className={styles.linkBtn}
onClick={() => switchView('login')}
disabled={isSubmitting}
>
Sign in
{t('signup.signIn')}
</button>
</p>
</>
@@ -461,14 +467,12 @@ export function LoginPage() {
disabled={isSubmitting}
>
<ArrowLeft size={18} />
Back to sign in
{t('forgot.back')}
</button>
<h1 className={styles.title}>Forgot password</h1>
<h1 className={styles.title}>{t('forgot.title')}</h1>
<p className={styles.subtitle}>
{smsStep === 'phone'
? 'We will send a verification code via SMS'
: 'Enter the code and your new password'}
{smsStep === 'phone' ? t('forgot.subtitlePhone') : t('forgot.subtitleCode')}
</p>
<form className={styles.form} onSubmit={handleResetPassword}>
@@ -482,7 +486,7 @@ export function LoginPage() {
{smsStep === 'phone' ? (
<>
<div className={styles.field}>
<label htmlFor="forgot-phone">Mobile number</label>
<label htmlFor="forgot-phone">{t('login.mobile')}</label>
<div className={styles.inputWrap}>
<Smartphone size={18} className={styles.inputIcon} />
<input
@@ -504,19 +508,17 @@ export function LoginPage() {
onClick={() => void handleSendCode()}
disabled={isSubmitting}
>
{isSubmitting ? 'Sending...' : 'Send SMS code'}
{isSubmitting ? t('forgot.sending') : t('forgot.sendCode')}
</button>
</>
) : (
<>
{codeSent && (
<p className={styles.codeHint}>
Verification code sent to <strong>{phone}</strong>
</p>
<p className={styles.codeHint}>{t('common.codeSent', { phone })}</p>
)}
<div className={styles.field}>
<label htmlFor="forgot-code">SMS verification code</label>
<label htmlFor="forgot-code">{t('forgot.code')}</label>
<div className={styles.inputWrap}>
<KeyRound size={18} className={styles.inputIcon} />
<input
@@ -534,13 +536,13 @@ export function LoginPage() {
</div>
<div className={styles.field}>
<label htmlFor="forgot-new-password">New password</label>
<label htmlFor="forgot-new-password">{t('forgot.newPassword')}</label>
<div className={styles.inputWrap}>
<Lock size={18} className={styles.inputIcon} />
<input
id="forgot-new-password"
type={showPassword ? 'text' : 'password'}
placeholder="Enter new password"
placeholder={t('forgot.newPasswordPlaceholder')}
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
required
@@ -552,7 +554,9 @@ export function LoginPage() {
<div className={styles.resendRow}>
{countdown > 0 ? (
<span className={styles.countdown}>Resend code in {countdown}s</span>
<span className={styles.countdown}>
{t('common.resendIn', { seconds: countdown })}
</span>
) : (
<button
type="button"
@@ -560,13 +564,13 @@ export function LoginPage() {
onClick={() => void handleSendCode()}
disabled={isSubmitting}
>
Resend SMS code
{t('common.resend')}
</button>
)}
</div>
<button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
{isSubmitting ? 'Verifying...' : 'Reset password'}
{isSubmitting ? t('forgot.verifying') : t('forgot.reset')}
</button>
</>
)}
@@ -583,14 +587,12 @@ export function LoginPage() {
disabled={isSubmitting}
>
<ArrowLeft size={18} />
Back to sign in
{t('otp.back')}
</button>
<h1 className={styles.title}>One-time login</h1>
<h1 className={styles.title}>{t('otp.title')}</h1>
<p className={styles.subtitle}>
{smsStep === 'phone'
? 'Sign in with a one-time SMS code'
: 'Enter the SMS code and your password'}
{smsStep === 'phone' ? t('otp.subtitlePhone') : t('otp.subtitleCode')}
</p>
<form className={styles.form} onSubmit={handleOtpLogin}>
@@ -603,7 +605,7 @@ export function LoginPage() {
{smsStep === 'phone' ? (
<>
<div className={styles.field}>
<label htmlFor="otp-phone">Mobile number</label>
<label htmlFor="otp-phone">{t('login.mobile')}</label>
<div className={styles.inputWrap}>
<Smartphone size={18} className={styles.inputIcon} />
<input
@@ -625,19 +627,17 @@ export function LoginPage() {
onClick={() => void handleSendCode()}
disabled={isSubmitting}
>
{isSubmitting ? 'Sending...' : 'Send SMS code'}
{isSubmitting ? t('otp.sending') : t('otp.sendCode')}
</button>
</>
) : (
<>
{codeSent && (
<p className={styles.codeHint}>
Verification code sent to <strong>{phone}</strong>
</p>
<p className={styles.codeHint}>{t('common.codeSent', { phone })}</p>
)}
<div className={styles.field}>
<label htmlFor="otp-code">SMS verification code</label>
<label htmlFor="otp-code">{t('otp.code')}</label>
<div className={styles.inputWrap}>
<KeyRound size={18} className={styles.inputIcon} />
<input
@@ -655,13 +655,13 @@ export function LoginPage() {
</div>
<div className={styles.field}>
<label htmlFor="otp-password">Password</label>
<label htmlFor="otp-password">{t('otp.password')}</label>
<div className={styles.inputWrap}>
<Lock size={18} className={styles.inputIcon} />
<input
id="otp-password"
type={showPassword ? 'text' : 'password'}
placeholder="Your account password"
placeholder={t('otp.passwordPlaceholder')}
value={password}
onChange={(e) => setPassword(e.target.value)}
required
@@ -673,7 +673,9 @@ export function LoginPage() {
<div className={styles.resendRow}>
{countdown > 0 ? (
<span className={styles.countdown}>Resend code in {countdown}s</span>
<span className={styles.countdown}>
{t('common.resendIn', { seconds: countdown })}
</span>
) : (
<button
type="button"
@@ -681,13 +683,13 @@ export function LoginPage() {
onClick={() => void handleSendCode()}
disabled={isSubmitting}
>
Resend SMS code
{t('common.resend')}
</button>
)}
</div>
<button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
{isSubmitting ? 'Signing in...' : 'Sign in'}
{isSubmitting ? t('otp.signingIn') : t('otp.signIn')}
</button>
</>
)}
apps/business/src/pages/PortfolioListPage.tsx
+43 -1
View File
@@ -12,6 +12,7 @@ import {
PORTFOLIOS_PER_PAGE,
deletePortfolio,
listPortfolios,
updatePortfolio,
} from '../services/portfolioService'
import type { Portfolio } from '../types/portfolio'
import pageStyles from '../components/PageContent.module.css'
@@ -25,6 +26,7 @@ export function PortfolioListPage() {
const [currentPage, setCurrentPage] = useState(1)
const [isLoading, setIsLoading] = useState(true)
const [isDeleting, setIsDeleting] = useState(false)
const [movingUpId, setMovingUpId] = useState<string | null>(null)
const [error, setError] = useState('')
const [commentCounts, setCommentCounts] = useState<Record<string, number>>({})
const [deleteTarget, setDeleteTarget] = useState<{ id: string; title: string } | null>(null)
@@ -81,6 +83,43 @@ export function PortfolioListPage() {
}
}
async function handleMoveUp(id: string) {
const index = portfolios.findIndex((item) => item.id === id)
if (index < 0) return
if (index === 0 && currentPage === 1) return
const current = portfolios[index]
setMovingUpId(id)
setError('')
try {
if (index === 0) {
// First on this page, but not global first — bump above the current band.
await updatePortfolio(current.id, { sortOrder: current.sortOrder - 1 })
} else {
const previous = portfolios[index - 1]
if (current.sortOrder === previous.sortOrder) {
await updatePortfolio(current.id, { sortOrder: previous.sortOrder - 1 })
} else {
await Promise.all([
updatePortfolio(current.id, { sortOrder: previous.sortOrder }),
updatePortfolio(previous.id, { sortOrder: current.sortOrder }),
])
}
}
showToast('Portfolio moved up.', 'success')
await loadPortfolios(currentPage)
} catch (err) {
if (err instanceof ApiError) {
setError(err.message)
} else {
setError('Unable to move portfolio.')
}
} finally {
setMovingUpId(null)
}
}
async function confirmDelete() {
if (!deleteTarget) return
@@ -152,11 +191,14 @@ export function PortfolioListPage() {
) : (
<>
<div className={pageStyles.gridCols4}>
{portfolios.map((portfolio) => (
{portfolios.map((portfolio, index) => (
<PortfolioCard
key={portfolio.id}
portfolio={portfolio}
commentCount={commentCounts[portfolio.id] ?? portfolio.commentCount}
canMoveUp={!(index === 0 && currentPage === 1)}
isMovingUp={movingUpId === portfolio.id}
onMoveUp={handleMoveUp}
onEdit={handleEdit}
onComments={handleComments}
onRemove={handleRemoveRequest}
apps/business/src/pages/ProductDetailsPage.module.css
+2 -2
View File
@@ -139,7 +139,7 @@
}
.description {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 300; /* IRANYekan Light */
line-height: 1.7;
@@ -149,7 +149,7 @@
.description:global(.faText),
.description:global(.faText) :where(*) {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
font-weight: 300;
text-align: justify;
}
apps/business/src/pages/ProductsPage.tsx
+29 -21
View File
@@ -2,47 +2,51 @@ import { FolderTree, PlusCircle, Package, Settings, Tag } from 'lucide-react'
import { SectionCard } from '../components/SectionCard'
import { ProductActivityChart } from '../components/ProductActivityChart'
import { Breadcrumbs } from '../components/Breadcrumbs'
import { useT } from '../i18n/useT'
import type { BusinessMessageKey } from '../i18n/messages'
import styles from '../components/PageContent.module.css'
const productSections = [
const productSections: {
icon: typeof Package
titleKey: BusinessMessageKey
descKey: BusinessMessageKey
href: string
}[] = [
{
icon: Package,
title: 'My Products',
description: 'View, edit and manage all your existing products.',
linkText: 'View products',
titleKey: 'nav.products.list',
descKey: 'products.card.list.desc',
href: '/products/list',
},
{
icon: PlusCircle,
title: 'Add a New Product',
description: 'Create and publish a new product to your store.',
linkText: 'Add product',
titleKey: 'products.card.new.title',
descKey: 'products.card.new.desc',
href: '/products/new',
},
{
icon: FolderTree,
title: 'Categories',
description: 'Organize your products into categories and subcategories.',
linkText: 'View categories',
titleKey: 'nav.products.categories',
descKey: 'products.card.categories.desc',
href: '/products/categories',
},
{
icon: Tag,
title: 'Brands',
description: 'Manage product brands and assign them when creating products.',
linkText: 'View brands',
titleKey: 'nav.products.brands',
descKey: 'products.card.brands.desc',
href: '/products/brands',
},
{
icon: Settings,
title: 'Settings',
description: 'Configure product defaults, variants and display options.',
linkText: 'View settings',
titleKey: 'nav.products.settings',
descKey: 'products.card.settings.desc',
href: '/products/settings',
},
]
export function ProductsPage() {
const t = useT()
return (
<main className={styles.content}>
<Breadcrumbs
@@ -53,16 +57,20 @@ export function ProductsPage() {
/>
<div className={styles.pageHeader}>
<div>
<h2 className={styles.pageTitle}>Products</h2>
<p className={styles.pageSubtitle}>
Manage your products, inventory and categories.
</p>
<h2 className={styles.pageTitle}>{t('title.products')}</h2>
<p className={styles.pageSubtitle}>{t('products.overview.subtitle')}</p>
</div>
</div>
<div className={styles.gridHome}>
{productSections.map((section) => (
<SectionCard key={section.title} {...section} />
<SectionCard
key={section.href}
icon={section.icon}
title={t(section.titleKey)}
description={t(section.descKey)}
href={section.href}
/>
))}
</div>
apps/business/src/pages/StoreSettingsPage.module.css
+4
View File
@@ -55,6 +55,10 @@
transition: border-color 0.2s, box-shadow 0.2s;
}
.stepInputFa {
font-family: var(--font-fa);
}
.stepInput:focus {
outline: none;
border-color: rgba(var(--primary-rgb) / 0.5);
apps/business/src/pages/StoreSettingsPage.tsx
+31 -6
View File
@@ -34,6 +34,7 @@ function normalizeSteps(steps: OrderProcessStep[]) {
return steps.map((step, index) => ({
id: step.id,
label: step.label.trim(),
labelFa: (step.labelFa ?? '').trim(),
color: normalizeStepColor(step.color, defaultStepColorForId(step.id, index)),
}))
}
@@ -43,7 +44,10 @@ function stepsAreEqual(a: OrderProcessStep[], b: OrderProcessStep[]) {
return a.every((step, index) => {
const other = b[index]
return (
step.id === other.id && step.label === other.label && step.color === other.color
step.id === other.id &&
step.label === other.label &&
step.labelFa === other.labelFa &&
step.color === other.color
)
})
}
@@ -109,6 +113,12 @@ export function StoreSettingsPage() {
)
}
function updateStepLabelFa(id: string, labelFa: string) {
setDraftSteps((current) =>
current.map((step) => (step.id === id ? { ...step, labelFa } : step)),
)
}
function updateStepColor(id: string, color: StepColorPreset) {
setDraftSteps((current) =>
current.map((step) => (step.id === id ? { ...step, color } : step)),
@@ -123,6 +133,7 @@ export function StoreSettingsPage() {
{
id,
label: '',
labelFa: '',
color: defaultStepColorForId(id, current.length),
},
]
@@ -150,13 +161,13 @@ export function StoreSettingsPage() {
async function handleSaveSteps() {
const normalized = normalizeSteps(draftSteps)
const hasEmptyLabel = normalized.some((step) => !step.label)
const hasEmptyLabel = normalized.some((step) => !step.label || !step.labelFa)
if (!normalized.length) {
setError('Add at least one order process step.')
return
}
if (hasEmptyLabel) {
setError('Every order step needs a label.')
setError('Every order step needs an English and Farsi label.')
return
}
@@ -186,7 +197,9 @@ export function StoreSettingsPage() {
const canSaveSteps =
stepsDirty &&
draftSteps.length > 0 &&
draftSteps.every((step) => step.label.trim().length > 0)
draftSteps.every(
(step) => step.label.trim().length > 0 && step.labelFa.trim().length > 0,
)
return (
<main className={pageStyles.content}>
@@ -270,10 +283,22 @@ export function StoreSettingsPage() {
type="text"
className={styles.stepInput}
value={step.label}
placeholder="Step label"
aria-label={`Order step ${index + 1}`}
placeholder="Label (EN)"
aria-label={`Order step ${index + 1} English label`}
dir="ltr"
lang="en"
onChange={(e) => updateStepLabel(step.id, e.target.value)}
/>
<input
type="text"
className={`${styles.stepInput} ${styles.stepInputFa}`}
value={step.labelFa ?? ''}
placeholder="عنوان (فارسی)"
aria-label={`Order step ${index + 1} Farsi label`}
dir="rtl"
lang="fa"
onChange={(e) => updateStepLabelFa(step.id, e.target.value)}
/>
<div className={styles.stepControls}>
<Tooltip label="Move step up">
<button
apps/business/src/services/dailyActivityService.ts
+41
View File
@@ -0,0 +1,41 @@
import { apiRequest } from '../lib/api'
import { getActiveBusinessId } from '../lib/businessContext'
export interface DailyActivityPoint {
date: string
count: number
}
export interface DailyActivitySeries {
days: number
total: number
items: DailyActivityPoint[]
}
export interface DualDailyActivityResponse {
days: number
primary: DailyActivitySeries
secondary: DailyActivitySeries
}
function businessPath(resource: 'orders' | 'customers', suffix = '') {
const businessId = getActiveBusinessId()
if (!businessId) {
throw new Error('No active business selected. Please sign in again.')
}
return `/businesses/${businessId}/${resource}${suffix}`
}
export async function getOrdersDailyActivity(days = 30, signal?: AbortSignal) {
return apiRequest<DualDailyActivityResponse>(
`${businessPath('orders', '/activity')}?days=${days}`,
{ auth: true, signal },
)
}
export async function getCustomersDailyActivity(days = 30, signal?: AbortSignal) {
return apiRequest<DualDailyActivityResponse>(
`${businessPath('customers', '/activity')}?days=${days}`,
{ auth: true, signal },
)
}
apps/business/src/services/orderService.ts
+1
View File
@@ -64,6 +64,7 @@ export interface Order {
status: OrderStatus
processStepId: string
processStepLabel?: string | null
processStepLabelFa?: string | null
processStepColor?: string | null
source: OrderSource
subtotal: number
apps/business/src/services/portfolioService.ts
+1
View File
@@ -105,6 +105,7 @@ export function mapPortfolioApiToUi(portfolio: PortfolioApi): Portfolio {
categoryName: portfolio.categoryName,
tags: portfolio.tags,
titleImageUrl: resolvePortfolioTitleImageUrl(portfolio),
sortOrder: portfolio.sortOrder ?? 0,
commentCount: portfolio.commentCount,
publishedAt: portfolio.publishedAt,
createdAt: portfolio.createdAt,
apps/business/src/services/settingsService.ts
+26 -4
View File
@@ -5,6 +5,7 @@ import type { BusinessPrimaryColorId } from '../utils/businessPrimaryColors'
export interface BrandingSettings {
primaryColor: BusinessPrimaryColorId
defaultLocale?: 'en' | 'fa'
}
export interface DashboardSettings {
@@ -15,6 +16,7 @@ export interface DashboardSettings {
export interface OrderProcessStep {
id: string
label: string
labelFa: string
color: string
}
@@ -35,10 +37,30 @@ export interface SettingsResponse {
}
export const DEFAULT_ORDER_PROCESS_STEPS: OrderProcessStep[] = [
{ id: 'processing', label: 'Under processing', color: '#3B82F6' },
{ id: 'ready-for-shipping', label: 'Ready for shipping', color: '#F59E0B' },
{ id: 'shipped', label: 'Shipped', color: '#8B5CF6' },
{ id: 'delivered', label: 'Delivered', color: '#22C55E' },
{
id: 'processing',
label: 'Under processing',
labelFa: 'در حال پردازش',
color: '#3B82F6',
},
{
id: 'ready-for-shipping',
label: 'Ready for shipping',
labelFa: 'آماده ارسال',
color: '#F59E0B',
},
{
id: 'shipped',
label: 'Shipped',
labelFa: 'ارسال‌شده',
color: '#8B5CF6',
},
{
id: 'delivered',
label: 'Delivered',
labelFa: 'تحویل‌شده',
color: '#22C55E',
},
]
function settingsPath() {
apps/business/src/services/tenantService.ts
+2
View File
@@ -1,4 +1,5 @@
import { apiRequest } from '../lib/api'
import type { DashboardLocale } from '@meshkee/dashboard-core'
export interface ResolvedTenant {
id: string
@@ -6,6 +7,7 @@ export interface ResolvedTenant {
nameFa: string | null
slug: string
domain: string
defaultLocale?: DashboardLocale
logoUrl?: string | null
faviconUrl?: string | null
}
apps/business/src/types/auth.ts
+2
View File
@@ -17,6 +17,8 @@ export interface AuthUser {
email: string | null
firstName: string | null
lastName: string | null
firstNameEn: string | null
lastNameEn: string | null
cellVerifiedAt: string | null
roles: string[]
dashboard: DashboardType
apps/business/src/types/portfolio.ts
+1
View File
@@ -17,6 +17,7 @@ export interface Portfolio {
categoryName: string
tags: string[]
titleImageUrl: string | null
sortOrder: number
commentCount: number
publishedAt: string | null
createdAt: string
apps/business/src/utils/applyBusinessTheme.ts
+8
View File
@@ -11,6 +11,10 @@ const CSS_VAR_DEFAULTS: Record<string, string> = {
'--primary-dark': '#2563eb',
'--primary-rgb': '59 130 246',
'--primary-dark-rgb': '37 99 235',
'--chart-accent': '#06b6d4',
'--chart-accent-dark': '#0891b2',
'--chart-accent-rgb': '6 182 212',
'--chart-accent-dark-rgb': '8 145 178',
}
export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | null) {
@@ -23,6 +27,10 @@ export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | nul
root.style.setProperty('--primary-dark', tokens.primaryDark)
root.style.setProperty('--primary-rgb', tokens.primaryRgb)
root.style.setProperty('--primary-dark-rgb', tokens.primaryDarkRgb)
root.style.setProperty('--chart-accent', tokens.chartAccent)
root.style.setProperty('--chart-accent-dark', tokens.chartAccentDark)
root.style.setProperty('--chart-accent-rgb', tokens.chartAccentRgb)
root.style.setProperty('--chart-accent-dark-rgb', tokens.chartAccentDarkRgb)
}
export function resetBusinessPrimaryColor() {
apps/business/src/utils/businessPrimaryColors.ts
+26
View File
@@ -20,8 +20,27 @@ export type BusinessPrimaryColorTokens = {
primaryGlow: string
primaryRgb: string
primaryDarkRgb: string
/** Second chart series color (red→purple, blue→cyan, …). */
chartAccent: string
chartAccentDark: string
chartAccentRgb: string
chartAccentDarkRgb: string
}
const PURPLE_ACCENT = {
chartAccent: '#a855f7',
chartAccentDark: '#9333ea',
chartAccentRgb: '168 85 247',
chartAccentDarkRgb: '147 51 234',
} as const
const CYAN_ACCENT = {
chartAccent: '#06b6d4',
chartAccentDark: '#0891b2',
chartAccentRgb: '6 182 212',
chartAccentDarkRgb: '8 145 178',
} as const
export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
BusinessPrimaryColorId,
BusinessPrimaryColorTokens
@@ -34,6 +53,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryGlow: '#ef4444',
primaryRgb: '239 68 68',
primaryDarkRgb: '220 38 38',
...PURPLE_ACCENT,
},
yellow: {
label: 'Yellow',
@@ -43,6 +63,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryGlow: '#eab308',
primaryRgb: '234 179 8',
primaryDarkRgb: '202 138 4',
...PURPLE_ACCENT,
},
black: {
label: 'Black',
@@ -52,6 +73,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryGlow: '#334155',
primaryRgb: '30 41 59',
primaryDarkRgb: '15 23 42',
...CYAN_ACCENT,
},
cyan: {
label: 'Cyan',
@@ -61,6 +83,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryGlow: '#06b6d4',
primaryRgb: '6 182 212',
primaryDarkRgb: '8 145 178',
...PURPLE_ACCENT,
},
purple: {
label: 'Purple',
@@ -70,6 +93,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryGlow: '#a855f7',
primaryRgb: '168 85 247',
primaryDarkRgb: '147 51 234',
...CYAN_ACCENT,
},
'light-blue': {
label: 'Light Blue',
@@ -79,6 +103,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryGlow: '#38bdf8',
primaryRgb: '56 189 248',
primaryDarkRgb: '14 165 233',
...CYAN_ACCENT,
},
'dark-blue': {
label: 'Dark Blue',
@@ -88,6 +113,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryGlow: '#3b82f6',
primaryRgb: '59 130 246',
primaryDarkRgb: '37 99 235',
...CYAN_ACCENT,
},
}
apps/business/src/utils/productActivity.ts
+11 -4
View File
@@ -14,9 +14,13 @@ function toMonthKey(iso: string): string {
return `${year}-${month}`
}
function formatMonthLabel(monthKey: string): string {
function formatMonthLabel(monthKey: string, locale: string): string {
const [year, month] = monthKey.split('-').map(Number)
return new Date(year, month - 1, 1).toLocaleString('en-US', { month: 'short' })
return new Date(year, month - 1, 1).toLocaleString(locale === 'fa' ? 'fa-IR' : 'en-US', {
month: 'short',
calendar: 'gregory',
numberingSystem: 'latn',
})
}
export function buildLast12MonthKeys(): string[] {
@@ -33,7 +37,10 @@ export function buildLast12MonthKeys(): string[] {
return keys
}
export function aggregateProductActivity(products: ProductApi[]): ProductMonthActivity[] {
export function aggregateProductActivity(
products: ProductApi[],
locale: string = 'en',
): ProductMonthActivity[] {
const monthKeys = buildLast12MonthKeys()
const added = new Map(monthKeys.map((key) => [key, 0]))
const updated = new Map(monthKeys.map((key) => [key, 0]))
@@ -56,7 +63,7 @@ export function aggregateProductActivity(products: ProductApi[]): ProductMonthAc
return monthKeys.map((monthKey) => ({
monthKey,
label: formatMonthLabel(monthKey),
label: formatMonthLabel(monthKey, locale),
added: added.get(monthKey) ?? 0,
updated: updated.get(monthKey) ?? 0,
}))
apps/customer/index.html
+13 -1
View File
@@ -7,7 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600&display=swap"
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
@@ -15,6 +15,18 @@
rel="stylesheet"
/>
<title>Customer Dashboard</title>
<script>
try {
var l = localStorage.getItem('meshkee.dashboard.locale')
if (l === 'en') {
document.documentElement.lang = 'en'
document.documentElement.dir = 'ltr'
} else {
document.documentElement.lang = 'fa'
document.documentElement.dir = 'rtl'
}
} catch (e) {}
</script>
</head>
<body>
<div id="root"></div>
apps/customer/src/App.tsx
+3 -1
View File
@@ -2,7 +2,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { AuthProvider } from './context/AuthContext'
import { CustomerThemeProvider } from './context/CustomerThemeContext'
import { TenantBrandingProvider } from './context/TenantBrandingContext'
import { ToastProvider } from '@meshkee/dashboard-ui'
import { LocaleProvider, ToastProvider } from '@meshkee/dashboard-ui'
import { CustomerDomainGuard } from './components/CustomerDomainGuard'
import { DashboardDocumentTitle } from './components/DashboardDocumentTitle'
import { ProtectedRoute } from './components/ProtectedRoute'
@@ -26,6 +26,7 @@ import { CheckoutFailedStep } from './pages/checkout/CheckoutFailedStep'
function App() {
return (
<CustomerDomainGuard>
<LocaleProvider>
<CustomerThemeProvider>
<BrowserRouter>
<TenantBrandingProvider>
@@ -64,6 +65,7 @@ function App() {
</TenantBrandingProvider>
</BrowserRouter>
</CustomerThemeProvider>
</LocaleProvider>
</CustomerDomainGuard>
)
}
apps/customer/src/components/AddressFormModal.module.css
+15
View File
@@ -0,0 +1,15 @@
.modal {
max-width: 720px;
}
.overlay {
z-index: 1000;
}
.modal :global(select) {
background-position: right var(--select-arrow-offset) center;
}
:global([dir='rtl']) .modal :global(select) {
background-position: left var(--select-arrow-offset) center;
}
apps/customer/src/components/AddressFormModal.tsx
+357
View File
@@ -0,0 +1,357 @@
import { useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
import { X } from 'lucide-react'
import {
getLocationOptionLabel,
matchCityByName,
matchProvinceByName,
useLocale,
useToast,
} from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import { ApiError } from '../lib/api'
import {
createAddress,
updateAddress,
type UserAddress,
} from '../services/addressService'
import {
listCitiesByProvinceSlug,
listIranProvinces,
type CityOption,
} from '../services/citiesService'
import modalStyles from './VariationsModal.module.css'
import panelStyles from './checkout/CheckoutAddAddressPanel.module.css'
import styles from './AddressFormModal.module.css'
interface AddressFormModalProps {
open: boolean
address: UserAddress | null
onClose: () => void
onSaved: (address: UserAddress) => void
}
const ANIMATION_MS = 220
export function AddressFormModal({ open, address, onClose, onSaved }: AddressFormModalProps) {
const t = useT()
const { locale, dir } = useLocale()
const { showToast } = useToast()
const [mounted, setMounted] = useState(open)
const [closing, setClosing] = useState(false)
const [formKey, setFormKey] = useState(0)
useEffect(() => {
if (open) {
setMounted(true)
setClosing(false)
setFormKey((key) => key + 1)
} else if (mounted) {
setClosing(true)
const timer = setTimeout(() => {
setMounted(false)
setClosing(false)
}, ANIMATION_MS)
return () => clearTimeout(timer)
}
}, [open, mounted])
useEffect(() => {
if (!mounted || closing) return
const prevOverflow = document.body.style.overflow
document.body.style.overflow = 'hidden'
const onKey = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose()
}
document.addEventListener('keydown', onKey)
return () => {
document.body.style.overflow = prevOverflow
document.removeEventListener('keydown', onKey)
}
}, [mounted, closing, onClose])
if (!mounted) return null
const isEdit = Boolean(address?.id)
return createPortal(
<div
className={`${modalStyles.overlay} ${styles.overlay} ${closing ? modalStyles.overlayOut : modalStyles.overlayIn}`}
onClick={onClose}
>
<div
className={`${modalStyles.modal} ${styles.modal} ${closing ? modalStyles.modalOut : modalStyles.modalIn}`}
onClick={(e) => e.stopPropagation()}
role="dialog"
aria-modal="true"
aria-labelledby="address-form-title"
lang={locale}
dir={dir}
>
<div className={modalStyles.header}>
<div>
<h2 id="address-form-title" className={modalStyles.title}>
{isEdit ? t('addresses.modal.editTitle') : t('addresses.modal.addTitle')}
</h2>
<p className={modalStyles.subtitle}>{t('addresses.modal.subtitle')}</p>
</div>
<button
type="button"
className={modalStyles.closeBtn}
onClick={onClose}
aria-label={t('common.close')}
>
<X size={20} />
</button>
</div>
<div className={modalStyles.body}>
<AddressFormFields
key={formKey}
address={address}
onCancel={onClose}
onSaved={(saved) => {
showToast(
isEdit ? t('addresses.toast.updated') : t('addresses.toast.created'),
'success',
)
onSaved(saved)
onClose()
}}
/>
</div>
</div>
</div>,
document.body,
)
}
function AddressFormFields({
address,
onCancel,
onSaved,
}: {
address: UserAddress | null
onCancel: () => void
onSaved: (address: UserAddress) => void
}) {
const t = useT()
const { locale } = useLocale()
const [provinces, setProvinces] = useState<CityOption[]>([])
const [cities, setCities] = useState<CityOption[]>([])
const [loadingLocations, setLoadingLocations] = useState(true)
const [saving, setSaving] = useState(false)
const [error, setError] = useState('')
const [label, setLabel] = useState(address?.label ?? '')
const [provinceSlug, setProvinceSlug] = useState('')
const [city, setCity] = useState('')
const [street, setStreet] = useState(address?.address ?? '')
const [postalCode, setPostalCode] = useState(address?.postalCode ?? '')
const [landline, setLandline] = useState(address?.landline ?? '')
useEffect(() => {
const controller = new AbortController()
async function load() {
setLoadingLocations(true)
try {
const items = await listIranProvinces(controller.signal)
if (controller.signal.aborted) return
setProvinces(items)
if (!address) return
const province = matchProvinceByName(address.province, items)
if (!province) return
setProvinceSlug(province.slug)
const cityItems = await listCitiesByProvinceSlug(province.slug, controller.signal)
if (controller.signal.aborted) return
setCities(cityItems)
const matchedCity = matchCityByName(address.city, cityItems)
setCity(
matchedCity ? getLocationOptionLabel(matchedCity, locale) : address.city,
)
} catch {
if (!controller.signal.aborted) setError(t('addresses.error.loadLocations'))
} finally {
if (!controller.signal.aborted) setLoadingLocations(false)
}
}
void load()
return () => controller.abort()
}, [address, locale, t])
async function handleProvinceChange(slug: string) {
setProvinceSlug(slug)
setCity('')
setCities([])
if (!slug) return
try {
const items = await listCitiesByProvinceSlug(slug)
setCities(items)
} catch {
setError(t('addresses.error.loadCities'))
}
}
async function handleSubmit(e: React.FormEvent) {
e.preventDefault()
setError('')
const province = provinces.find((item) => item.slug === provinceSlug)
if (!label.trim() || !province || !city.trim() || !street.trim()) {
setError(t('addresses.error.incompleteForm'))
return
}
const payload = {
label: label.trim(),
province: getLocationOptionLabel(province, locale),
city: city.trim(),
address: street.trim(),
postalCode: postalCode.trim() || undefined,
landline: landline.trim() || undefined,
}
setSaving(true)
try {
const result = address?.id
? await updateAddress(address.id, payload)
: await createAddress(payload)
onSaved(result.address)
} catch (err) {
setError(err instanceof ApiError ? err.message : t('addresses.error.save'))
} finally {
setSaving(false)
}
}
return (
<form
className={[panelStyles.form, panelStyles.formInModal].join(' ')}
onSubmit={(e) => void handleSubmit(e)}
>
{error && (
<div className={panelStyles.error} role="alert">
{error}
</div>
)}
<div className={panelStyles.fieldRowTriple}>
<div className={panelStyles.field}>
<label htmlFor="address-label">{t('addresses.label')}</label>
<input
id="address-label"
type="text"
value={label}
disabled={saving}
onChange={(e) => setLabel(e.target.value)}
placeholder={t('addresses.labelPlaceholder')}
/>
</div>
<div className={panelStyles.field}>
<label htmlFor="address-province">{t('addresses.province')}</label>
<select
id="address-province"
value={provinceSlug}
disabled={loadingLocations || saving}
onChange={(e) => void handleProvinceChange(e.target.value)}
>
<option value="">{t('addresses.selectProvince')}</option>
{provinces.map((province) => (
<option key={province.id} value={province.slug}>
{getLocationOptionLabel(province, locale)}
</option>
))}
</select>
</div>
<div className={panelStyles.field}>
<label htmlFor="address-city">{t('addresses.city')}</label>
<select
id="address-city"
value={city}
disabled={!provinceSlug || saving}
onChange={(e) => setCity(e.target.value)}
>
<option value="">{t('addresses.selectCity')}</option>
{cities.map((item) => (
<option key={item.id} value={getLocationOptionLabel(item, locale)}>
{getLocationOptionLabel(item, locale)}
</option>
))}
</select>
</div>
</div>
<div className={panelStyles.field}>
<label htmlFor="address-street">{t('addresses.address')}</label>
<input
id="address-street"
type="text"
value={street}
disabled={saving}
onChange={(e) => setStreet(e.target.value)}
placeholder={t('addresses.streetPlaceholder')}
/>
</div>
<div className={panelStyles.fieldRow}>
<div className={panelStyles.field}>
<label htmlFor="address-postal">
{t('addresses.postalCode')}
<span className={panelStyles.optionalMark}> {t('addresses.optional')}</span>
</label>
<input
id="address-postal"
type="text"
inputMode="numeric"
value={postalCode}
disabled={saving}
onChange={(e) => setPostalCode(e.target.value)}
placeholder={t('addresses.postalPlaceholder')}
dir="ltr"
/>
</div>
<div className={panelStyles.field}>
<label htmlFor="address-landline">
{t('addresses.landline')}
<span className={panelStyles.optionalMark}> {t('addresses.optional')}</span>
</label>
<input
id="address-landline"
type="tel"
value={landline}
disabled={saving}
onChange={(e) => setLandline(e.target.value)}
placeholder={t('addresses.landlinePlaceholder')}
dir="ltr"
/>
</div>
</div>
<div className={panelStyles.formActions}>
<button
type="button"
className={panelStyles.cancelBtn}
onClick={onCancel}
disabled={saving}
>
{t('addresses.cancel')}
</button>
<button type="submit" className={panelStyles.saveBtn} disabled={saving}>
{saving ? t('addresses.saving') : t('addresses.saveOne')}
</button>
</div>
</form>
)
}
apps/customer/src/components/DashboardDocumentTitle.tsx
+5 -4
View File
@@ -1,17 +1,18 @@
import { useLocation } from 'react-router-dom'
import { useDashboardDocumentTitle } from '@meshkee/dashboard-ui'
import { useDashboardDocumentTitle, useLocale } from '@meshkee/dashboard-ui'
import { useTenantBranding } from '../context/TenantBrandingContext'
import { CUSTOMER_DASHBOARD_NAME, customerRouteTitleRules } from '../lib/routeTitles'
import { getCustomerRouteTitleRules, translate } from '../i18n/messages'
export function DashboardDocumentTitle() {
const { pathname } = useLocation()
const { businessName } = useTenantBranding()
const { locale } = useLocale()
useDashboardDocumentTitle({
businessName,
dashboardName: CUSTOMER_DASHBOARD_NAME,
dashboardName: translate(locale, 'app.dashboardName'),
pathname,
routeRules: customerRouteTitleRules,
routeRules: getCustomerRouteTitleRules(locale),
})
return null
apps/customer/src/components/FavoriteStoreItemCard.module.css
+5 -5
View File
@@ -62,13 +62,13 @@
}
.festivalBadge {
left: 8px;
inset-inline-start: 8px;
text-transform: uppercase;
color: #7c3aed;
}
.stockBadge {
right: 8px;
inset-inline-end: 8px;
color: var(--primary);
}
@@ -83,7 +83,7 @@
color: var(--text-primary);
line-height: 1.3;
margin-bottom: 3px;
text-align: left;
text-align: start;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@@ -91,7 +91,7 @@
}
.nameFa {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
font-size: 12px;
color: var(--text-secondary);
direction: rtl;
@@ -129,7 +129,7 @@
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 4px;
padding-inline-start: 4px;
}
.controlsLeft button {
apps/customer/src/components/FavoriteStoreItemCard.tsx
+15 -7
View File
@@ -1,6 +1,8 @@
import { useId } from 'react'
import { Trash2 } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import type { FavoriteListing } from '../services/favoritesService'
import { useT } from '../i18n/useT'
import { formatVariantCount } from '../utils/storeProductGroups'
import { StoreItemPrice } from './StoreItemPrice'
import { Tooltip } from './Tooltip'
@@ -55,6 +57,8 @@ export function FavoriteStoreItemCard({
onAddToCart,
removing = false,
}: FavoriteStoreItemCardProps) {
const t = useT()
const { locale } = useLocale()
const plusGradientId = `add-cart-gradient-${useId().replace(/:/g, '')}`
return (
@@ -71,16 +75,20 @@ export function FavoriteStoreItemCard({
) : (
<div className={styles.imagePlaceholder} />
)}
{listing.showFestival && <span className={styles.festivalBadge}>Festival</span>}
{listing.showFestival && (
<span className={styles.festivalBadge}>{t('favorites.festival')}</span>
)}
{listing.productTotalStock > 0 && (
<span className={styles.stockBadge}>{listing.productTotalStock} in stock</span>
<span className={styles.stockBadge}>
{t('favorites.inStock', { count: listing.productTotalStock })}
</span>
)}
</div>
<div className={styles.body}>
<h3 className={styles.nameEn}>{listing.productTitle}</h3>
{listing.productNameFa && <p className={styles.nameFa}>{listing.productNameFa}</p>}
<p className={styles.variantLabel}>{formatVariantCount(listing.variantCount)}</p>
<p className={styles.variantLabel}>{formatVariantCount(listing.variantCount, locale)}</p>
<StoreItemPrice
price={listing.displayPrice}
discountedPrice={listing.displayDiscountedPrice}
@@ -90,25 +98,25 @@ export function FavoriteStoreItemCard({
<div className={styles.controls}>
<div className={styles.controlsLeft}>
<Tooltip label="Remove from favorites">
<Tooltip label={t('favorites.remove')}>
<button
type="button"
className={styles.danger}
onClick={() => onRemove(listing)}
disabled={removing}
aria-label="Remove from favorites"
aria-label={t('favorites.remove')}
>
<Trash2 size={16} />
</button>
</Tooltip>
</div>
<Tooltip label="Add to shopping cart">
<Tooltip label={t('favorites.addToCart')}>
<button
type="button"
className={styles.addToCartBtn}
onClick={() => onAddToCart(listing)}
aria-label="Add to shopping cart"
aria-label={t('favorites.addToCart')}
>
<GradientPlusIcon gradientId={plusGradientId} />
</button>
apps/customer/src/components/Header.module.css
+9 -13
View File
@@ -60,9 +60,10 @@
.badge {
position: absolute;
top: 4px;
right: 4px;
width: 18px;
inset-inline-end: 4px;
min-width: 18px;
height: 18px;
padding: 0 4px;
display: flex;
align-items: center;
justify-content: center;
@@ -70,7 +71,8 @@
color: white;
font-size: 10px;
font-weight: 600;
border-radius: 50%;
line-height: 1;
border-radius: 999px;
border: 2px solid white;
}
@@ -81,8 +83,9 @@
.profile {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 12px 6px 6px;
gap: 10px;
padding-block: 8px;
padding-inline: 14px 12px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--glass-border);
@@ -96,13 +99,6 @@
border-color: rgba(var(--primary-rgb) / 0.25);
}
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
.profileInfo {
display: flex;
flex-direction: column;
@@ -132,7 +128,7 @@
.dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
inset-inline-end: 0;
min-width: 180px;
padding: 6px;
background: rgba(255, 255, 255, 0.95);
apps/customer/src/components/Header.tsx
+40 -16
View File
@@ -1,20 +1,45 @@
import { useEffect, useRef, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { Menu, Bell, MessageSquare, ChevronDown, User, KeyRound, LogOut } from 'lucide-react'
import { PasswordResetModal } from '@meshkee/dashboard-ui'
import { LanguageSelect, PasswordResetModal, useLocale } from '@meshkee/dashboard-ui'
import { useAuth } from '../context/AuthContext'
import { useT } from '../i18n/useT'
import { changePassword } from '../services/authService'
import styles from './Header.module.css'
function displayUserName(
user: {
firstName: string | null
lastName: string | null
firstNameEn: string | null
lastNameEn: string | null
cellNumber: string
} | null,
locale: 'en' | 'fa',
fallback: string,
) {
if (!user) return fallback
const localized =
locale === 'en'
? [user.firstNameEn, user.lastNameEn].filter(Boolean).join(' ')
: [user.firstName, user.lastName].filter(Boolean).join(' ')
const other =
locale === 'en'
? [user.firstName, user.lastName].filter(Boolean).join(' ')
: [user.firstNameEn, user.lastNameEn].filter(Boolean).join(' ')
return localized || other || user.cellNumber || fallback
}
export function Header() {
const navigate = useNavigate()
const { user, logout } = useAuth()
const { locale } = useLocale()
const t = useT()
const [menuOpen, setMenuOpen] = useState(false)
const [passwordModalOpen, setPasswordModalOpen] = useState(false)
const menuRef = useRef<HTMLDivElement>(null)
const displayName =
[user?.firstName, user?.lastName].filter(Boolean).join(' ') || user?.cellNumber || 'Customer'
const displayName = displayUserName(user, locale, t('app.role.customer'))
useEffect(() => {
if (!menuOpen) return
@@ -52,19 +77,22 @@ export function Header() {
<>
<header className={styles.header}>
<div className={styles.left}>
<button className={styles.menuBtn} aria-label="Toggle menu">
<button className={styles.menuBtn} aria-label={t('header.toggleMenu')}>
<Menu size={22} />
</button>
<h1 className={styles.title}>Customer Dashboard</h1>
</div>
<div className={styles.right}>
<button className={styles.iconBtn} aria-label="Messages">
<LanguageSelect />
<button className={styles.iconBtn} aria-label={t('header.messages')}>
<MessageSquare size={20} />
<span className={styles.badge}>0</span>
</button>
<button className={styles.iconBtn} aria-label="Notifications">
<button className={styles.iconBtn} aria-label={t('header.notifications')}>
<Bell size={20} />
<span className={styles.badge}>0</span>
</button>
<div className={styles.profileWrap} ref={menuRef}>
@@ -75,14 +103,9 @@ export function Header() {
aria-expanded={menuOpen}
aria-haspopup="menu"
>
<img
src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(displayName)}`}
alt={displayName}
className={styles.avatar}
/>
<div className={styles.profileInfo}>
<span className={styles.name}>{displayName}</span>
<span className={styles.role}>Customer</span>
<span className={styles.role}>{t('app.role.customer')}</span>
</div>
<ChevronDown
size={16}
@@ -99,7 +122,7 @@ export function Header() {
onClick={() => setMenuOpen(false)}
>
<User size={16} />
<span>My Profile</span>
<span>{t('header.myProfile')}</span>
</Link>
<button
type="button"
@@ -108,7 +131,7 @@ export function Header() {
onClick={openPasswordModal}
>
<KeyRound size={16} />
<span>Change password</span>
<span>{t('header.changePassword')}</span>
</button>
<button
type="button"
@@ -117,7 +140,7 @@ export function Header() {
onClick={handleLogout}
>
<LogOut size={16} />
<span>Logout</span>
<span>{t('nav.logout')}</span>
</button>
</div>
)}
@@ -129,6 +152,7 @@ export function Header() {
open={passwordModalOpen}
onClose={() => setPasswordModalOpen(false)}
onChangePassword={changePassword}
title={t('header.changePassword')}
/>
</>
)
apps/customer/src/components/OrderItemsModal.tsx
+29 -16
View File
@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
import { X } from 'lucide-react'
import { useT } from '../i18n/useT'
import type { Order } from '../services/orderService'
import { formatCellForDisplay } from '../lib/cellNumber'
import { formatIrtPrice } from '../utils/irtPrice'
@@ -30,6 +31,7 @@ function totalQuantity(order: Order) {
}
export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps) {
const t = useT()
const [mounted, setMounted] = useState(open)
const [closing, setClosing] = useState(false)
@@ -75,11 +77,16 @@ export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps)
<div className={modalStyles.header}>
<div>
<h2 id="order-items-title" className={modalStyles.title}>
Order items
{t('orderItems.title')}
</h2>
<p className={modalStyles.subtitle}>{order.orderNumber}</p>
</div>
<button type="button" className={modalStyles.closeBtn} onClick={onClose} aria-label="Close">
<button
type="button"
className={modalStyles.closeBtn}
onClick={onClose}
aria-label={t('common.close')}
>
<X size={18} />
</button>
</div>
@@ -87,26 +94,27 @@ export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps)
<div className={`${modalStyles.body} ${styles.body}`}>
<div className={styles.metaRow}>
<span className={styles.metaItem}>
Customer: <strong>{displayName(order)}</strong>
{t('orderItems.customer')}: <strong>{displayName(order)}</strong>
</span>
<span className={styles.metaItem}>
Phone: <strong>{formatCellForDisplay(order.customer.cellNumber)}</strong>
{t('orderItems.phone')}:{' '}
<strong>{formatCellForDisplay(order.customer.cellNumber)}</strong>
</span>
<span className={styles.metaItem}>
Items: <strong>{itemCount}</strong>
{t('orderItems.items')}: <strong>{itemCount}</strong>
</span>
</div>
{order.items.length === 0 ? (
<p className={styles.empty}>No items in this order.</p>
<p className={styles.empty}>{t('orderItems.empty')}</p>
) : (
<div className={styles.tableBlock}>
<div className={styles.tableHead}>
<span aria-hidden="true" />
<span>Product</span>
<span>Qty</span>
<span>Unit price</span>
<span>Line total</span>
<span>{t('orderItems.product')}</span>
<span>{t('orderItems.qty')}</span>
<span>{t('orderItems.unitPrice')}</span>
<span>{t('orderItems.lineTotal')}</span>
</div>
<ul className={styles.itemList}>
{order.items.map((item) => (
@@ -122,7 +130,9 @@ export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps)
<div className={styles.itemTitle}>{item.productTitle}</div>
<div className={styles.itemVariant}>{formatVariantLabel(item.selections)}</div>
{item.variantSku && (
<div className={styles.itemSku}>SKU: {item.variantSku}</div>
<div className={styles.itemSku}>
{t('orderItems.sku', { sku: item.variantSku })}
</div>
)}
</div>
<div className={styles.qtyCell}>{item.quantity}</div>
@@ -136,20 +146,23 @@ export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps)
<div className={styles.summary}>
<span className={styles.summaryLabel}>
Order total · {itemCount} {itemCount === 1 ? 'item' : 'items'}
{t('orderItems.summary', {
count: itemCount,
itemsLabel:
itemCount === 1 ? t('orderItems.item') : t('orderItems.itemsPlural'),
})}
</span>
<span className={styles.summaryValue}>{formatIrtPrice(order.total)}</span>
</div>
<div className={modalStyles.actions}>
<button type="button" className={modalStyles.cancelBtn} onClick={onClose}>
Close
{t('orderItems.close')}
</button>
</div>
</div>
</div>
</div>
,
document.body,
</div>,
document.body,
)
}
apps/customer/src/components/OrderRow.module.css
+5 -4
View File
@@ -1,6 +1,6 @@
.td {
padding: 10px 12px;
text-align: left;
text-align: start;
border-bottom: 1px solid rgba(148, 163, 184, 0.16);
vertical-align: middle;
font-size: 13px;
@@ -75,16 +75,17 @@
}
.tdActions {
text-align: right;
text-align: end;
white-space: nowrap;
padding-right: 10px;
padding-inline: 10px;
}
.rowActions {
display: inline-flex;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0;
width: 100%;
}
.actionBtn {
apps/customer/src/components/OrderRow.tsx
+42 -31
View File
@@ -1,4 +1,6 @@
import { Eye } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import type { Order, OrderSource } from '../services/orderService'
import type { OrderProcessStep } from '../utils/orderSteps'
import { stepLabel, stepColor } from '../utils/orderSteps'
@@ -12,12 +14,13 @@ interface OrderRowProps {
onViewItems: (order: Order) => void
}
function formatDateTime(value: string) {
function formatDateTime(value: string, locale: 'en' | 'fa') {
const d = new Date(value)
if (Number.isNaN(d.getTime())) return { date: value, time: '' }
const intlLocale = locale === 'fa' ? 'fa-IR' : 'en-US'
return {
date: d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: '2-digit' }),
time: d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
date: d.toLocaleDateString(intlLocale, { year: 'numeric', month: 'short', day: '2-digit' }),
time: d.toLocaleTimeString(intlLocale, { hour: '2-digit', minute: '2-digit' }),
}
}
@@ -25,35 +28,37 @@ function totalItemQuantity(order: Order) {
return order.items.reduce((sum, item) => sum + item.quantity, 0)
}
function sourceLabel(source: OrderSource) {
switch (source) {
case 'admin':
return 'Operator'
case 'app':
return 'Application'
case 'website':
default:
return 'Website'
}
}
function sourceClass(source: OrderSource) {
switch (source) {
case 'admin':
return styles.sourceOperator
case 'app':
return styles.sourceApplication
case 'website':
default:
return styles.sourceWebsite
}
}
export function OrderRow({ order, processSteps, onViewItems }: OrderRowProps) {
const { date, time } = formatDateTime(order.createdAt)
const { locale } = useLocale()
const t = useT()
const { date, time } = formatDateTime(order.createdAt, locale)
const itemQty = totalItemQuantity(order)
const processStepId = order.processStepId ?? processSteps[0]?.id ?? 'processing'
function sourceLabel(source: OrderSource) {
switch (source) {
case 'admin':
return t('orders.source.operator')
case 'app':
return t('orders.source.app')
case 'website':
default:
return t('orders.source.website')
}
}
function sourceClass(source: OrderSource) {
switch (source) {
case 'admin':
return styles.sourceOperator
case 'app':
return styles.sourceApplication
case 'website':
default:
return styles.sourceWebsite
}
}
return (
<tr>
<td className={styles.td}>
@@ -74,7 +79,13 @@ export function OrderRow({ order, processSteps, onViewItems }: OrderRowProps) {
stepColor(processSteps, processStepId, order.processStepColor),
)}
>
{stepLabel(processSteps, processStepId, order.processStepLabel)}
{stepLabel(
processSteps,
processStepId,
order.processStepLabel,
order.processStepLabelFa,
locale,
)}
</span>
</td>
<td className={styles.td}>
@@ -88,8 +99,8 @@ export function OrderRow({ order, processSteps, onViewItems }: OrderRowProps) {
type="button"
className={styles.actionBtn}
onClick={() => onViewItems(order)}
aria-label="View items"
title="View items"
aria-label={t('orders.viewItems')}
title={t('orders.viewItems')}
>
<Eye size={15} />
</button>
apps/customer/src/components/PageLayout.module.css
+2 -2
View File
@@ -4,7 +4,7 @@
}
.main {
margin-left: var(--sidebar-width);
margin-inline-start: var(--sidebar-width);
min-height: 100vh;
position: relative;
z-index: 1;
@@ -12,6 +12,6 @@
@media (max-width: 768px) {
.main {
margin-left: 0;
margin-inline-start: 0;
}
}
apps/customer/src/components/Sidebar.module.css
+16 -14
View File
@@ -1,7 +1,7 @@
.sidebar {
position: fixed;
top: 0;
left: 0;
inset-inline-start: 0;
width: var(--sidebar-width);
height: 100vh;
display: flex;
@@ -10,7 +10,7 @@
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-right: 1px solid var(--glass-border);
border-inline-end: 1px solid var(--glass-border);
z-index: 100;
}
@@ -61,17 +61,18 @@
}
.brandDomain {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.2;
}
.brandName {
font-size: 11px;
font-weight: 500;
color: var(--text-muted);
margin-top: 2px;
line-height: 1.2;
}
.brandName {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
.nav {
@@ -80,7 +81,7 @@
flex-direction: column;
gap: 2px;
overflow-y: auto;
padding-right: 2px;
padding-inline-end: 2px;
}
.navGroup {
@@ -99,7 +100,7 @@
color: var(--text-secondary);
transition: all 0.2s ease;
width: 100%;
text-align: left;
text-align: start;
}
.navItem:hover {
@@ -134,9 +135,10 @@
display: flex;
flex-direction: column;
gap: 2px;
margin: 2px 0 4px 12px;
padding-left: 12px;
border-left: 2px solid rgba(148, 163, 184, 0.2);
margin-block: 2px 4px;
margin-inline: 12px 0;
padding-inline-start: 12px;
border-inline-start: 2px solid rgba(148, 163, 184, 0.2);
}
.subNavItem {
apps/customer/src/components/Sidebar.tsx
+24 -17
View File
@@ -1,32 +1,35 @@
import { useEffect, useState } from 'react'
import { NavLink, useNavigate } from 'react-router-dom'
import { Home, User, MapPin, ShoppingBag, ShoppingCart, Heart, HelpCircle, LogOut } from 'lucide-react'
import { Home, User, MapPin, ShoppingBag, Heart, HelpCircle, LogOut } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useAuth } from '../context/AuthContext'
import { useT } from '../i18n/useT'
import { getActiveBusinessDomain } from '../lib/businessContext'
import { isAbortError } from '../lib/api'
import { getWebsiteBusinessInfo } from '../services/websiteService'
import meshkeeLogo from '../assets/meshkee-logo.png'
import styles from './Sidebar.module.css'
const navItems = [
{ icon: Home, label: 'Home', to: '/' },
{ icon: ShoppingCart, label: 'Shopping Cart', to: '/checkout' },
{ icon: User, label: 'My Profile', to: '/profile' },
{ icon: MapPin, label: 'My Addresses', to: '/addresses' },
{ icon: ShoppingBag, label: 'My Orders', to: '/orders' },
{ icon: Heart, label: 'My Favorites', to: '/favorites' },
]
export function Sidebar() {
const navigate = useNavigate()
const { user, logout } = useAuth()
const { locale } = useLocale()
const t = useT()
const [brandName, setBrandName] = useState('')
const [logoUrl, setLogoUrl] = useState<string | null>(null)
const businessDomain = getActiveBusinessDomain()
const fallbackBusinessName = user?.customerBusinesses[0]?.name ?? 'Store'
const fallbackBusinessName = user?.customerBusinesses[0]?.name ?? t('app.storeFallback')
const displayName = brandName || fallbackBusinessName
const navItems = [
{ icon: Home, label: t('nav.home'), to: '/' },
{ icon: User, label: t('nav.profile'), to: '/profile' },
{ icon: MapPin, label: t('nav.addresses'), to: '/addresses' },
{ icon: ShoppingBag, label: t('nav.orders'), to: '/orders' },
{ icon: Heart, label: t('nav.favorites'), to: '/favorites' },
]
useEffect(() => {
const controller = new AbortController()
@@ -34,7 +37,11 @@ export function Sidebar() {
try {
const info = await getWebsiteBusinessInfo(businessDomain, controller.signal)
if (controller.signal.aborted) return
setBrandName(info.nameFa?.trim() || info.name.trim() || fallbackBusinessName)
const localized =
locale === 'fa'
? info.nameFa?.trim() || info.name.trim()
: info.name.trim() || info.nameFa?.trim()
setBrandName(localized || fallbackBusinessName)
setLogoUrl(info.logoUrl?.trim() || null)
} catch (err) {
if (isAbortError(err)) return
@@ -48,7 +55,7 @@ export function Sidebar() {
return () => {
controller.abort()
}
}, [businessDomain, fallbackBusinessName])
}, [businessDomain, fallbackBusinessName, locale])
return (
<aside className={styles.sidebar}>
@@ -59,15 +66,15 @@ export function Sidebar() {
className={styles.brandLogo}
/>
<div className={styles.brandText}>
<span className={styles.brandDomain}>{businessDomain}</span>
<span className={styles.brandName}>{displayName}</span>
<span className={styles.brandDomain}>{businessDomain}</span>
</div>
</div>
<nav className={styles.nav}>
{navItems.map((item) => (
<NavLink
key={item.label}
key={item.to}
to={item.to}
end={item.to === '/'}
className={({ isActive }) =>
@@ -83,7 +90,7 @@ export function Sidebar() {
<div className={styles.footer}>
<button type="button" className={styles.navItem}>
<HelpCircle size={20} />
<span>Help Center</span>
<span>{t('nav.help')}</span>
</button>
<button
type="button"
@@ -94,7 +101,7 @@ export function Sidebar() {
}}
>
<LogOut size={20} />
<span>Logout</span>
<span>{t('nav.logout')}</span>
</button>
</div>
</aside>
apps/customer/src/components/checkout/CheckoutBackButton.module.css
+4
View File
@@ -17,3 +17,7 @@
.backBtn span {
line-height: 1.4;
}
:global([dir='rtl']) .backBtn svg {
transform: scaleX(-1);
}
apps/customer/src/context/TenantBrandingContext.tsx
+14 -1
View File
@@ -3,10 +3,12 @@ import {
useContext,
useEffect,
useMemo,
useRef,
useState,
type ReactNode,
} from 'react'
import { applyDocumentFavicon } from '@meshkee/dashboard-core'
import { useLocale } from '@meshkee/dashboard-ui'
import { isAbortError } from '../lib/api'
import { getTenantDomain } from '../lib/config'
import { getWebsiteBusinessInfo } from '../services/websiteService'
@@ -31,9 +33,11 @@ function pickBusinessName(
}
export function TenantBrandingProvider({ children }: { children: ReactNode }) {
const { setLocale } = useLocale()
const [businessName, setBusinessName] = useState('')
const [logoUrl, setLogoUrl] = useState<string | null>(null)
const [faviconUrl, setFaviconUrl] = useState<string | null>(null)
const defaultLocaleAppliedRef = useRef(false)
const domain = getTenantDomain()
useEffect(() => {
@@ -68,6 +72,15 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
setLogoUrl(nextLogo)
setFaviconUrl(nextFavicon)
applyDocumentFavicon(nextFavicon)
if (!defaultLocaleAppliedRef.current) {
defaultLocaleAppliedRef.current = true
if (tenant.defaultLocale === 'en' || tenant.defaultLocale === 'fa') {
setLocale(tenant.defaultLocale)
} else {
setLocale('fa')
}
}
} catch (err) {
if (isAbortError(err) || controller.signal.aborted) return
setBusinessName(domain)
@@ -82,7 +95,7 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
return () => {
controller.abort()
}
}, [domain])
}, [domain, setLocale])
const value = useMemo(
() => ({ businessName, logoUrl, faviconUrl }),
apps/customer/src/i18n/messages.ts
+506
View File
@@ -0,0 +1,506 @@
import type { DashboardLocale } from '@meshkee/dashboard-core'
const en = {
'app.dashboardName': 'Customer Dashboard',
'app.role.customer': 'Customer',
'app.storeFallback': 'Store',
'app.poweredBy': 'powered by Meshkee.app',
'nav.home': 'Home',
'nav.cart': 'Shopping Cart',
'nav.profile': 'My Profile',
'nav.addresses': 'My Addresses',
'nav.orders': 'My Orders',
'nav.favorites': 'My Favorites',
'nav.help': 'Help Center',
'nav.logout': 'Logout',
'header.toggleMenu': 'Toggle menu',
'header.messages': 'Messages',
'header.notifications': 'Notifications',
'header.changePassword': 'Change password',
'header.myProfile': 'My Profile',
'home.welcome': 'Welcome, dear {name}.',
'home.welcomeFallback': 'there',
'home.subtitle': 'Manage your profile, addresses, orders, and favorites in one place.',
'home.card.profile.title': 'My Profile',
'home.card.profile.desc': 'View and update your personal information and contact details.',
'home.card.profile.link': 'View profile',
'home.card.addresses.title': 'My Addresses',
'home.card.addresses.desc': 'Manage your shipping addresses for checkout and deliveries.',
'home.card.addresses.link': 'View addresses',
'home.card.orders.title': 'My Orders',
'home.card.orders.desc': 'Track your orders, view order history and order details.',
'home.card.orders.link': 'View orders',
'home.card.favorites.title': 'My Favorites',
'home.card.favorites.desc': 'Browse and manage your saved favorite products.',
'home.card.favorites.link': 'View favorites',
'profile.title': 'My Profile',
'profile.subtitle': 'Update your personal information and contact details.',
'profile.section.account': 'Account',
'profile.section.about': 'About',
'profile.section.social': 'Social',
'profile.mobile': 'Mobile number',
'profile.email': 'Email',
'profile.firstName': 'First name (FA)',
'profile.lastName': 'Last name (FA)',
'profile.firstNameEn': 'First name (EN)',
'profile.lastNameEn': 'Last name (EN)',
'profile.landline': 'Landline',
'profile.backupPhone': 'Backup phone number',
'profile.about': 'About',
'profile.instagram': 'Instagram',
'profile.telegram': 'Telegram',
'profile.linkedin': 'LinkedIn',
'profile.emailPlaceholder': 'you@example.com',
'profile.save': 'Save changes',
'profile.saving': 'Saving...',
'profile.toast.success': 'Profile updated successfully.',
'profile.error.update': 'Unable to update profile. Please try again.',
'addresses.title': 'My Addresses',
'addresses.subtitle': 'Manage your shipping addresses for orders at this store.',
'addresses.save': 'Save addresses',
'addresses.saveOne': 'Save address',
'addresses.saving': 'Saving...',
'addresses.cancel': 'Cancel',
'addresses.editorTitle': 'Saved addresses',
'addresses.add': 'Add address',
'addresses.edit': 'Edit address',
'addresses.empty': 'No addresses yet.',
'addresses.loading': 'Loading addresses...',
'addresses.label': 'Address name',
'addresses.labelPlaceholder': 'e.g. Home, Office',
'addresses.optional': '(optional)',
'addresses.province': 'Province',
'addresses.city': 'City',
'addresses.address': 'Address',
'addresses.postalCode': 'Postal code',
'addresses.landline': 'Landline',
'addresses.selectProvince': 'Select province',
'addresses.selectCity': 'Select city',
'addresses.streetPlaceholder': 'Street, plaque, unit',
'addresses.postalPlaceholder': 'Postal code',
'addresses.landlinePlaceholder': 'Landline',
'addresses.remove': 'Remove address',
'addresses.modal.addTitle': 'Add address',
'addresses.modal.editTitle': 'Edit address',
'addresses.modal.subtitle': 'Enter the shipping address details.',
'addresses.toast.removed': 'Address removed.',
'addresses.toast.saved': 'Addresses saved.',
'addresses.toast.created': 'Address saved.',
'addresses.toast.updated': 'Address updated.',
'addresses.error.load': 'Unable to load addresses.',
'addresses.error.remove': 'Unable to remove address.',
'addresses.error.incomplete': 'Add at least one complete address.',
'addresses.error.incompleteForm': 'Please fill in all required fields.',
'addresses.error.save': 'Unable to save address. Please try again.',
'addresses.error.loadLocations': 'Unable to load provinces.',
'addresses.error.loadCities': 'Unable to load cities.',
'orders.title': 'My Orders',
'orders.subtitle': 'View your order history and details.',
'orders.listTitle': 'Order list',
'orders.showing': 'Showing {from} - {to} of {total}',
'orders.none': 'No orders',
'orders.empty': 'You have no orders yet.',
'orders.loading': 'Loading orders...',
'orders.error.load': 'Unable to load orders.',
'orders.col.orderId': 'Order ID',
'orders.col.items': 'Items',
'orders.col.total': 'Total cost',
'orders.col.date': 'Date & time',
'orders.col.step': 'Step',
'orders.col.source': 'Registered by',
'orders.col.actions': 'Actions',
'orders.pageMeta': 'Page {page} / {totalPages} · {pageSize} per page · {total} total',
'orders.viewItems': 'View items',
'orders.source.operator': 'Operator',
'orders.source.app': 'Application',
'orders.source.website': 'Website',
'orders.step.processing': 'Under processing',
'orders.step.ready': 'Ready for shipping',
'orders.step.shipped': 'Shipped',
'orders.step.delivered': 'Delivered',
'orderItems.title': 'Order items',
'orderItems.customer': 'Customer',
'orderItems.phone': 'Phone',
'orderItems.items': 'Items',
'orderItems.empty': 'No items in this order.',
'orderItems.product': 'Product',
'orderItems.qty': 'Qty',
'orderItems.unitPrice': 'Unit price',
'orderItems.lineTotal': 'Line total',
'orderItems.sku': 'SKU: {sku}',
'orderItems.summary': 'Order total · {count} {itemsLabel}',
'orderItems.item': 'item',
'orderItems.itemsPlural': 'items',
'orderItems.close': 'Close',
'favorites.title': 'My Favorites',
'favorites.subtitle': 'Products you have saved for later.',
'favorites.loading': 'Loading favorites...',
'favorites.empty': 'No favorites yet.',
'favorites.error.load': 'Unable to load favorites.',
'favorites.toast.removed': 'Removed from favorites.',
'favorites.error.remove': 'Unable to remove favorite.',
'favorites.cartSoon': 'Shopping cart is coming soon.',
'favorites.remove': 'Remove from favorites',
'favorites.addToCart': 'Add to shopping cart',
'favorites.festival': 'Festival',
'favorites.inStock': '{count} in stock',
'favorites.variantOne': '1 variant',
'favorites.variantMany': '{count} variants',
'title.signIn': 'Sign in',
'title.checkout': 'Checkout',
'title.cart': 'Shopping Cart',
'title.delivery': 'Delivery',
'title.payment': 'Payment',
'title.success': 'Success',
'title.failed': 'Failed',
'login.welcome': 'Welcome back',
'login.subtitle': 'Sign in with your mobile number',
'login.mobile': 'Mobile number',
'login.password': 'Password',
'login.passwordPlaceholder': 'Enter your password',
'login.hidePassword': 'Hide password',
'login.showPassword': 'Show password',
'login.forgot': 'Forgot password?',
'login.signIn': 'Sign in',
'login.signingIn': 'Signing in...',
'login.or': 'or',
'login.otp': 'One-time login with SMS',
'login.noAccount': "Don't have an account?",
'login.signUp': 'Sign up',
'login.error.signIn': 'Unable to sign in. Check your connection and try again.',
'login.error.sendCode': 'Unable to send verification code.',
'signup.title': 'Create account',
'signup.subtitle': 'Register as a customer of {domain}',
'signup.firstName': 'First name',
'signup.lastName': 'Last name',
'signup.passwordPlaceholder': 'Choose a password',
'signup.confirm': 'Confirm password',
'signup.confirmPlaceholder': 'Repeat your password',
'signup.create': 'Create account',
'signup.creating': 'Creating account...',
'signup.hasAccount': 'Already have an account?',
'signup.signIn': 'Sign in',
'signup.error.match': 'Passwords do not match.',
'signup.error.length': 'Password must be at least 8 characters.',
'signup.error.create': 'Unable to create account.',
'forgot.back': 'Back to sign in',
'forgot.title': 'Forgot password',
'forgot.subtitlePhone': 'We will send a verification code via SMS',
'forgot.subtitleCode': 'Enter the code and your new password',
'forgot.sendCode': 'Send SMS code',
'forgot.sending': 'Sending...',
'forgot.code': 'SMS verification code',
'forgot.newPassword': 'New password',
'forgot.newPasswordPlaceholder': 'Enter new password',
'forgot.reset': 'Reset password',
'forgot.verifying': 'Verifying...',
'forgot.error.length': 'Password must be at least 8 characters.',
'forgot.error.verify': 'Unable to verify code.',
'forgot.info.partial':
'Phone number verified. Full password reset via SMS is not available yet — please contact support or sign in if you remember your password.',
'otp.back': 'Back to sign in',
'otp.title': 'One-time login',
'otp.subtitlePhone': 'Verify your mobile number with a one-time SMS code',
'otp.subtitleCode': 'Enter the SMS code and your password',
'otp.sendCode': 'Send SMS code',
'otp.sending': 'Sending...',
'otp.code': 'SMS verification code',
'otp.password': 'Password',
'otp.passwordPlaceholder': 'Your account password',
'otp.signIn': 'Sign in',
'otp.signingIn': 'Signing in...',
'otp.error.password': 'Enter your account password to complete sign-in after SMS verification.',
'otp.error.signIn': 'Unable to sign in with SMS verification.',
'common.close': 'Close',
'common.resendIn': 'Resend code in {seconds}s',
'common.resend': 'Resend SMS code',
'common.codeSent': 'Verification code sent to {phone}',
} as const
type MessageKey = keyof typeof en
const fa: Record<MessageKey, string> = {
'app.dashboardName': 'پنل مشتری',
'app.role.customer': 'مشتری',
'app.storeFallback': 'فروشگاه',
'app.poweredBy': 'قدرت‌گرفته از Meshkee.app',
'nav.home': 'خانه',
'nav.cart': 'سبد خرید',
'nav.profile': 'پروفایل من',
'nav.addresses': 'آدرس‌های من',
'nav.orders': 'سفارش‌های من',
'nav.favorites': 'علاقه‌مندی‌ها',
'nav.help': 'مرکز راهنما',
'nav.logout': 'خروج',
'header.toggleMenu': 'باز و بسته کردن منو',
'header.messages': 'پیام‌ها',
'header.notifications': 'اعلان‌ها',
'header.changePassword': 'تغییر رمز عبور',
'header.myProfile': 'پروفایل من',
'home.welcome': '{name} عزیز، خوش آمدی.',
'home.welcomeFallback': 'کاربر',
'home.subtitle': 'پروفایل، آدرس‌ها، سفارش‌ها و علاقه‌مندی‌ها را از یکجا مدیریت کنید.',
'home.card.profile.title': 'پروفایل من',
'home.card.profile.desc': 'اطلاعات شخصی و راه‌های ارتباطی خود را مشاهده و به‌روزرسانی کنید.',
'home.card.profile.link': 'مشاهده پروفایل',
'home.card.addresses.title': 'آدرس‌های من',
'home.card.addresses.desc': 'آدرس‌های ارسال برای تسویه‌حساب و تحویل را مدیریت کنید.',
'home.card.addresses.link': 'مشاهده آدرس‌ها',
'home.card.orders.title': 'سفارش‌های من',
'home.card.orders.desc': 'سفارش‌ها را پیگیری کنید و تاریخچه و جزئیات را ببینید.',
'home.card.orders.link': 'مشاهده سفارش‌ها',
'home.card.favorites.title': 'علاقه‌مندی‌ها',
'home.card.favorites.desc': 'محصولات ذخیره‌شده مورد علاقه‌تان را ببینید و مدیریت کنید.',
'home.card.favorites.link': 'مشاهده علاقه‌مندی‌ها',
'profile.title': 'پروفایل من',
'profile.subtitle': 'اطلاعات شخصی و راه‌های ارتباطی خود را به‌روزرسانی کنید.',
'profile.section.account': 'حساب کاربری',
'profile.section.about': 'درباره من',
'profile.section.social': 'شبکه‌های اجتماعی',
'profile.mobile': 'شماره موبایل',
'profile.email': 'ایمیل',
'profile.firstName': 'نام (فارسی)',
'profile.lastName': 'نام خانوادگی (فارسی)',
'profile.firstNameEn': 'نام (انگلیسی)',
'profile.lastNameEn': 'نام خانوادگی (انگلیسی)',
'profile.landline': 'تلفن ثابت',
'profile.backupPhone': 'شماره تماس پشتیبان',
'profile.about': 'درباره من',
'profile.instagram': 'اینستاگرام',
'profile.telegram': 'تلگرام',
'profile.linkedin': 'لینکدین',
'profile.emailPlaceholder': 'you@example.com',
'profile.save': 'ذخیره تغییرات',
'profile.saving': 'در حال ذخیره...',
'profile.toast.success': 'پروفایل با موفقیت به‌روزرسانی شد.',
'profile.error.update': 'به‌روزرسانی پروفایل ممکن نشد. دوباره تلاش کنید.',
'addresses.title': 'آدرس‌های من',
'addresses.subtitle': 'آدرس‌های ارسال سفارش در این فروشگاه را مدیریت کنید.',
'addresses.save': 'ذخیره آدرس‌ها',
'addresses.saveOne': 'ذخیره آدرس',
'addresses.saving': 'در حال ذخیره...',
'addresses.cancel': 'انصراف',
'addresses.editorTitle': 'آدرس‌های ذخیره‌شده',
'addresses.add': 'افزودن آدرس',
'addresses.edit': 'ویرایش آدرس',
'addresses.empty': 'هنوز آدرسی ثبت نشده است.',
'addresses.loading': 'در حال بارگذاری آدرس‌ها...',
'addresses.label': 'عنوان آدرس',
'addresses.labelPlaceholder': 'مثلاً خانه، محل کار',
'addresses.optional': '(اختیاری)',
'addresses.province': 'استان',
'addresses.city': 'شهر',
'addresses.address': 'آدرس',
'addresses.postalCode': 'کد پستی',
'addresses.landline': 'تلفن ثابت',
'addresses.selectProvince': 'انتخاب استان',
'addresses.selectCity': 'انتخاب شهر',
'addresses.streetPlaceholder': 'خیابان، پلاک، واحد',
'addresses.postalPlaceholder': 'کد پستی',
'addresses.landlinePlaceholder': 'تلفن ثابت',
'addresses.remove': 'حذف آدرس',
'addresses.modal.addTitle': 'افزودن آدرس',
'addresses.modal.editTitle': 'ویرایش آدرس',
'addresses.modal.subtitle': 'جزئیات آدرس ارسال را وارد کنید.',
'addresses.toast.removed': 'آدرس حذف شد.',
'addresses.toast.saved': 'آدرس‌ها ذخیره شدند.',
'addresses.toast.created': 'آدرس ذخیره شد.',
'addresses.toast.updated': 'آدرس به‌روزرسانی شد.',
'addresses.error.load': 'بارگذاری آدرس‌ها ممکن نشد.',
'addresses.error.remove': 'حذف آدرس ممکن نشد.',
'addresses.error.incomplete': 'حداقل یک آدرس کامل اضافه کنید.',
'addresses.error.incompleteForm': 'لطفاً همه فیلدهای الزامی را تکمیل کنید.',
'addresses.error.save': 'ذخیره آدرس ممکن نشد. دوباره تلاش کنید.',
'addresses.error.loadLocations': 'بارگذاری استان‌ها ممکن نشد.',
'addresses.error.loadCities': 'بارگذاری شهرها ممکن نشد.',
'orders.title': 'سفارش‌های من',
'orders.subtitle': 'تاریخچه و جزئیات سفارش‌های خود را ببینید.',
'orders.listTitle': 'فهرست سفارش‌ها',
'orders.showing': 'نمایش {from} تا {to} از {total}',
'orders.none': 'بدون سفارش',
'orders.empty': 'هنوز سفارشی ندارید.',
'orders.loading': 'در حال بارگذاری سفارش‌ها...',
'orders.error.load': 'بارگذاری سفارش‌ها ممکن نشد.',
'orders.col.orderId': 'شماره سفارش',
'orders.col.items': 'اقلام',
'orders.col.total': 'مبلغ کل',
'orders.col.date': 'تاریخ و ساعت',
'orders.col.step': 'وضعیت',
'orders.col.source': 'ثبت‌شده توسط',
'orders.col.actions': 'عملیات',
'orders.pageMeta': 'صفحه {page} / {totalPages} · {pageSize} در هر صفحه · {total} کل',
'orders.viewItems': 'مشاهده اقلام',
'orders.source.operator': 'اپراتور',
'orders.source.app': 'اپلیکیشن',
'orders.source.website': 'وب‌سایت',
'orders.step.processing': 'در حال پردازش',
'orders.step.ready': 'آماده ارسال',
'orders.step.shipped': 'ارسال‌شده',
'orders.step.delivered': 'تحویل‌شده',
'orderItems.title': 'اقلام سفارش',
'orderItems.customer': 'مشتری',
'orderItems.phone': 'تلفن',
'orderItems.items': 'اقلام',
'orderItems.empty': 'اقلامی در این سفارش نیست.',
'orderItems.product': 'محصول',
'orderItems.qty': 'تعداد',
'orderItems.unitPrice': 'قیمت واحد',
'orderItems.lineTotal': 'جمع ردیف',
'orderItems.sku': 'کد کالا: {sku}',
'orderItems.summary': 'جمع سفارش · {count} {itemsLabel}',
'orderItems.item': 'قلم',
'orderItems.itemsPlural': 'قلم',
'orderItems.close': 'بستن',
'favorites.title': 'علاقه‌مندی‌ها',
'favorites.subtitle': 'محصولاتی که برای بعد ذخیره کرده‌اید.',
'favorites.loading': 'در حال بارگذاری علاقه‌مندی‌ها...',
'favorites.empty': 'هنوز علاقه‌مندی ندارید.',
'favorites.error.load': 'بارگذاری علاقه‌مندی‌ها ممکن نشد.',
'favorites.toast.removed': 'از علاقه‌مندی‌ها حذف شد.',
'favorites.error.remove': 'حذف از علاقه‌مندی‌ها ممکن نشد.',
'favorites.cartSoon': 'سبد خرید به‌زودی فعال می‌شود.',
'favorites.remove': 'حذف از علاقه‌مندی‌ها',
'favorites.addToCart': 'افزودن به سبد خرید',
'favorites.festival': 'جشنواره',
'favorites.inStock': '{count} موجود',
'favorites.variantOne': '۱ تنوع',
'favorites.variantMany': '{count} تنوع',
'title.signIn': 'ورود',
'title.checkout': 'تسویه‌حساب',
'title.cart': 'سبد خرید',
'title.delivery': 'ارسال',
'title.payment': 'پرداخت',
'title.success': 'موفق',
'title.failed': 'ناموفق',
'login.welcome': 'خوش آمدید',
'login.subtitle': 'با شماره موبایل وارد شوید',
'login.mobile': 'شماره موبایل',
'login.password': 'رمز عبور',
'login.passwordPlaceholder': 'رمز عبور خود را وارد کنید',
'login.hidePassword': 'مخفی کردن رمز',
'login.showPassword': 'نمایش رمز',
'login.forgot': 'رمز عبور را فراموش کرده‌اید؟',
'login.signIn': 'ورود',
'login.signingIn': 'در حال ورود...',
'login.or': 'یا',
'login.otp': 'ورود یک‌بارمصرف با پیامک',
'login.noAccount': 'حساب کاربری ندارید؟',
'login.signUp': 'ثبت‌نام',
'login.error.signIn': 'ورود ممکن نشد. اتصال خود را بررسی کنید و دوباره تلاش کنید.',
'login.error.sendCode': 'ارسال کد تأیید ممکن نشد.',
'signup.title': 'ایجاد حساب',
'signup.subtitle': 'به‌عنوان مشتری {domain} ثبت‌نام کنید',
'signup.firstName': 'نام',
'signup.lastName': 'نام خانوادگی',
'signup.passwordPlaceholder': 'یک رمز عبور انتخاب کنید',
'signup.confirm': 'تأیید رمز عبور',
'signup.confirmPlaceholder': 'رمز عبور را تکرار کنید',
'signup.create': 'ایجاد حساب',
'signup.creating': 'در حال ایجاد حساب...',
'signup.hasAccount': 'قبلاً حساب دارید؟',
'signup.signIn': 'ورود',
'signup.error.match': 'رمزهای عبور یکسان نیستند.',
'signup.error.length': 'رمز عبور باید حداقل ۸ کاراکتر باشد.',
'signup.error.create': 'ایجاد حساب ممکن نشد.',
'forgot.back': 'بازگشت به ورود',
'forgot.title': 'فراموشی رمز عبور',
'forgot.subtitlePhone': 'کد تأیید را از طریق پیامک ارسال می‌کنیم',
'forgot.subtitleCode': 'کد و رمز عبور جدید را وارد کنید',
'forgot.sendCode': 'ارسال کد پیامکی',
'forgot.sending': 'در حال ارسال...',
'forgot.code': 'کد تأیید پیامکی',
'forgot.newPassword': 'رمز عبور جدید',
'forgot.newPasswordPlaceholder': 'رمز عبور جدید را وارد کنید',
'forgot.reset': 'بازیابی رمز عبور',
'forgot.verifying': 'در حال تأیید...',
'forgot.error.length': 'رمز عبور باید حداقل ۸ کاراکتر باشد.',
'forgot.error.verify': 'تأیید کد ممکن نشد.',
'forgot.info.partial':
'شماره موبایل تأیید شد. بازیابی کامل رمز با پیامک هنوز در دسترس نیست — با پشتیبانی تماس بگیرید یا اگر رمز را به‌خاطر دارید وارد شوید.',
'otp.back': 'بازگشت به ورود',
'otp.title': 'ورود یک‌بارمصرف',
'otp.subtitlePhone': 'شماره موبایل خود را با کد یک‌بارمصرف پیامکی تأیید کنید',
'otp.subtitleCode': 'کد پیامکی و رمز عبور خود را وارد کنید',
'otp.sendCode': 'ارسال کد پیامکی',
'otp.sending': 'در حال ارسال...',
'otp.code': 'کد تأیید پیامکی',
'otp.password': 'رمز عبور',
'otp.passwordPlaceholder': 'رمز عبور حساب شما',
'otp.signIn': 'ورود',
'otp.signingIn': 'در حال ورود...',
'otp.error.password': 'برای تکمیل ورود پس از تأیید پیامکی، رمز حساب خود را وارد کنید.',
'otp.error.signIn': 'ورود با تأیید پیامکی ممکن نشد.',
'common.close': 'بستن',
'common.resendIn': 'ارسال مجدد کد تا {seconds} ثانیه',
'common.resend': 'ارسال مجدد کد پیامکی',
'common.codeSent': 'کد تأیید به {phone} ارسال شد',
}
const dictionaries: Record<DashboardLocale, Record<MessageKey, string>> = {
en: en as Record<MessageKey, string>,
fa,
}
export type CustomerMessageKey = MessageKey
export function translate(
locale: DashboardLocale,
key: MessageKey,
vars?: Record<string, string | number>,
): string {
const dict = dictionaries[locale] ?? dictionaries.en
let text = dict[key] ?? dictionaries.en[key] ?? key
if (vars) {
for (const [name, value] of Object.entries(vars)) {
text = text.replaceAll(`{${name}}`, String(value))
}
}
return text
}
export function getCustomerRouteTitleRules(locale: DashboardLocale) {
const t = (key: MessageKey) => translate(locale, key)
return [
{ match: '/login', labels: [t('title.signIn')] },
{ match: '/checkout/login', labels: [t('title.checkout'), t('title.signIn')] },
{ match: '/checkout/cart', labels: [t('title.checkout'), t('title.cart')] },
{ match: '/checkout/delivery', labels: [t('title.checkout'), t('title.delivery')] },
{ match: '/checkout/payment', labels: [t('title.checkout'), t('title.payment')] },
{ match: '/checkout/success', labels: [t('title.checkout'), t('title.success')] },
{ match: '/checkout/failed', labels: [t('title.checkout'), t('title.failed')] },
{ match: '/checkout', labels: [t('title.checkout')] },
{ match: '/profile', labels: [t('nav.profile')] },
{ match: '/addresses', labels: [t('nav.addresses')] },
{ match: '/orders', labels: [t('nav.orders')] },
{ match: '/favorites', labels: [t('nav.favorites')] },
{ match: '/', labels: [t('nav.home')] },
]
}
apps/customer/src/i18n/useT.ts
+13
View File
@@ -0,0 +1,13 @@
import { useCallback } from 'react'
import { useLocale } from '@meshkee/dashboard-ui'
import { translate, type CustomerMessageKey } from './messages'
export function useT() {
const { locale } = useLocale()
return useCallback(
(key: CustomerMessageKey, vars?: Record<string, string | number>) =>
translate(locale, key, vars),
[locale],
)
}
apps/customer/src/index.css
+3 -1
View File
@@ -1,6 +1,8 @@
@import '@meshkee/dashboard-core/styles/tokens.css';
/* Customer app Farsi typography — Yekan Bakh for body, inputs, and placeholders */
/* Customer: Montserrat (EN) + Yekan Bakh (FA) via --font-ui stack */
:root {
--font-en: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-fa: 'YekanBakh', Tahoma, sans-serif;
--font-ui: var(--font-en), var(--font-fa);
}
apps/customer/src/pages/AddressesPage.module.css
+119 -17
View File
@@ -1,9 +1,3 @@
.form {
display: flex;
flex-direction: column;
gap: 24px;
}
.section {
width: 100%;
background: var(--glass-bg);
@@ -15,26 +9,127 @@
padding: 24px;
}
.actions {
display: flex;
justify-content: flex-end;
.sectionTitle {
margin: 0 0 16px;
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
}
.saveBtn {
padding: 10px 20px;
.status {
margin: 0;
font-size: 14px;
color: var(--text-muted);
}
.empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 40px 16px;
color: var(--text-muted);
text-align: center;
}
.empty p {
margin: 0;
font-size: 14px;
}
.list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.row {
display: flex;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 10px 12px;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.55);
}
.rowLine {
min-width: 0;
flex: 1;
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
white-space: nowrap;
}
.rowLabel {
flex-shrink: 0;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--primary);
border-radius: var(--radius-sm);
color: var(--text-primary);
}
.saveBtn:disabled {
opacity: 0.6;
cursor: not-allowed;
.rowText {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
color: var(--text-secondary);
}
.rowActions {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.editBtn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 8px;
color: var(--text-muted);
transition: background 0.2s, color 0.2s;
}
.editBtn:hover {
background: rgba(var(--primary-rgb) / 0.1);
color: var(--primary);
}
.addFab {
position: fixed;
inset-inline-end: 32px;
bottom: 32px;
z-index: 50;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: white;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
box-shadow: 0 8px 24px rgba(var(--primary-rgb) / 0.4);
transition: transform 0.2s, box-shadow 0.2s;
}
.addFab:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(var(--primary-rgb) / 0.45);
}
.error {
margin-bottom: 16px;
padding: 12px 16px;
border-radius: var(--radius-sm);
font-size: 13px;
@@ -42,3 +137,10 @@
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.2);
}
@media (max-width: 768px) {
.addFab {
inset-inline-end: 20px;
bottom: 20px;
}
}
apps/customer/src/pages/AddressesPage.tsx
+154 -212
View File
@@ -1,259 +1,201 @@
import { useEffect, useMemo, useState } from 'react'
import {
AddressListEditor,
Breadcrumbs,
createEmptyAddressItem,
matchCityByName,
matchProvinceByName,
useToast,
type AddressListItem,
type CityOption,
} from '@meshkee/dashboard-ui'
import { useCallback, useEffect, useState } from 'react'
import { MapPin, Pencil, Plus, Trash2 } from 'lucide-react'
import { Breadcrumbs, useToast } from '@meshkee/dashboard-ui'
import { AddressFormModal } from '../components/AddressFormModal'
import { Tooltip } from '../components/Tooltip'
import { useT } from '../i18n/useT'
import { ApiError, isAbortError } from '../lib/api'
import {
createAddress,
listAddresses,
removeAddress,
updateAddress,
type UserAddress,
type UserAddressInput,
} from '../services/addressService'
import {
listCitiesByProvinceSlug,
listIranProvinces,
} from '../services/citiesService'
import pageStyles from '../components/PageContent.module.css'
import rowBtnStyles from '../components/VariationsModal.module.css'
import styles from './AddressesPage.module.css'
type AddressDraft = AddressListItem
function toDraft(
item: UserAddress,
provinces: CityOption[],
citiesByProvince: Record<string, CityOption[]>,
): AddressDraft {
const province = matchProvinceByName(item.province, provinces)
const cities = province ? (citiesByProvince[province.slug] ?? []) : []
const city = matchCityByName(item.city, cities)
return {
id: item.id,
provinceSlug: province?.slug ?? '',
province: province?.nameEn ?? item.province,
city: city?.nameEn ?? item.city,
address: item.address,
postalCode: item.postalCode ?? '',
landline: item.landline ?? '',
}
}
function isCompleteAddress(item: AddressDraft) {
return item.province.trim() && item.city.trim() && item.address.trim()
}
export function AddressesPage() {
const { showToast } = useToast()
const [provinces, setProvinces] = useState<CityOption[]>([])
const [citiesByProvince, setCitiesByProvince] = useState<Record<string, CityOption[]>>({})
const [addresses, setAddresses] = useState<AddressDraft[]>([createEmptyAddressItem()])
const t = useT()
const [addresses, setAddresses] = useState<UserAddress[]>([])
const [loading, setLoading] = useState(true)
const [saving, setSaving] = useState(false)
const [error, setError] = useState('')
const [removingId, setRemovingId] = useState<string | null>(null)
const [modalOpen, setModalOpen] = useState(false)
const [editingAddress, setEditingAddress] = useState<UserAddress | null>(null)
const loadAddresses = useCallback(
async (signal?: AbortSignal) => {
setLoading(true)
setError('')
try {
const data = await listAddresses(signal)
if (signal?.aborted) return
setAddresses(data.items)
} catch (err) {
if (isAbortError(err) || signal?.aborted) return
setError(err instanceof ApiError ? err.message : t('addresses.error.load'))
} finally {
if (!signal?.aborted) setLoading(false)
}
},
[t],
)
useEffect(() => {
const controller = new AbortController()
async function load() {
setLoading(true)
setError('')
try {
const [provinceItems, data] = await Promise.all([
listIranProvinces(controller.signal),
listAddresses(controller.signal),
])
if (controller.signal.aborted) return
setProvinces(provinceItems)
const draftItems =
data.items.length > 0 ? data.items : []
const slugs = [
...new Set(
draftItems
.map((item) => matchProvinceByName(item.province, provinceItems)?.slug)
.filter(Boolean) as string[],
),
]
const cityGroups = await Promise.all(
slugs.map(async (slug) => ({
slug,
cities: await listCitiesByProvinceSlug(slug, controller.signal),
})),
)
if (controller.signal.aborted) return
const citiesMap = Object.fromEntries(cityGroups.map((group) => [group.slug, group.cities]))
setCitiesByProvince(citiesMap)
setAddresses(
draftItems.length > 0
? draftItems.map((item) => toDraft(item, provinceItems, citiesMap))
: [createEmptyAddressItem()],
)
} catch (err) {
if (isAbortError(err) || controller.signal.aborted) return
setError(err instanceof ApiError ? err.message : 'Unable to load addresses.')
} finally {
if (!controller.signal.aborted) setLoading(false)
}
}
void load()
void loadAddresses(controller.signal)
return () => controller.abort()
}, [])
}, [loadAddresses])
function updateAddressDraft(index: number, patch: Partial<AddressDraft>) {
setAddresses((prev) =>
prev.map((item, i) => (i === index ? { ...item, ...patch } : item)),
)
function openCreateModal() {
setEditingAddress(null)
setModalOpen(true)
}
async function handleProvinceChange(index: number, provinceSlug: string) {
const province = provinces.find((item) => item.slug === provinceSlug)
updateAddressDraft(index, {
provinceSlug,
province: province?.nameEn ?? '',
city: '',
})
if (provinceSlug && !citiesByProvince[provinceSlug]) {
const cities = await listCitiesByProvinceSlug(provinceSlug)
setCitiesByProvince((prev) => ({ ...prev, [provinceSlug]: cities }))
}
function openEditModal(item: UserAddress) {
setEditingAddress(item)
setModalOpen(true)
}
function addAddressRow() {
setAddresses((prev) => [...prev, createEmptyAddressItem()])
}
async function handleRemove(index: number) {
const target = addresses[index]
if (!target) return
if (!target.id) {
setAddresses((prev) =>
prev.length === 1 ? [createEmptyAddressItem()] : prev.filter((_, i) => i !== index),
)
return
}
setSaving(true)
setError('')
try {
await removeAddress(target.id)
setAddresses((prev) => {
const next = prev.filter((_, i) => i !== index)
return next.length > 0 ? next : [createEmptyAddressItem()]
})
showToast('Address removed.', 'success')
} catch (err) {
setError(err instanceof ApiError ? err.message : 'Unable to remove address.')
} finally {
setSaving(false)
}
}
async function handleSubmit(e: React.FormEvent) {
e.preventDefault()
setError('')
const payload = addresses.filter(isCompleteAddress)
if (payload.length === 0) {
setError('Add at least one complete address.')
return
}
setSaving(true)
try {
const saved: AddressDraft[] = []
for (const item of payload) {
const input: UserAddressInput = {
province: item.province.trim(),
city: item.city.trim(),
address: item.address.trim(),
postalCode: item.postalCode.trim() || undefined,
landline: item.landline?.trim() || undefined,
}
if (item.id) {
const result = await updateAddress(item.id, input)
saved.push(toDraft(result.address, provinces, citiesByProvince))
} else {
const result = await createAddress(input)
saved.push(toDraft(result.address, provinces, citiesByProvince))
}
function handleSaved(saved: UserAddress) {
setAddresses((prev) => {
const index = prev.findIndex((item) => item.id === saved.id)
if (index >= 0) {
const next = [...prev]
next[index] = saved
return next
}
return [saved, ...prev]
})
}
setAddresses(saved.length > 0 ? saved : [createEmptyAddressItem()])
showToast('Addresses saved.', 'success')
async function handleRemove(item: UserAddress) {
setRemovingId(item.id)
setError('')
try {
await removeAddress(item.id)
setAddresses((prev) => prev.filter((row) => row.id !== item.id))
showToast(t('addresses.toast.removed'), 'success')
} catch (err) {
const message =
err instanceof ApiError ? err.message : 'Unable to save addresses. Please try again.'
const message = err instanceof ApiError ? err.message : t('addresses.error.remove')
setError(message)
showToast(message, 'error')
} finally {
setSaving(false)
setRemovingId(null)
}
}
const hasAddresses = useMemo(
() => addresses.some((item) => isCompleteAddress(item)),
[addresses],
)
function formatRowLine(item: UserAddress) {
return [
item.label || null,
item.province,
item.city,
item.address,
item.postalCode,
item.landline,
]
.filter(Boolean)
.join(' · ')
}
return (
<main className={pageStyles.content}>
<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'My Addresses' }]} />
<Breadcrumbs
items={[{ label: t('nav.home'), href: '/' }, { label: t('addresses.title') }]}
/>
<div className={pageStyles.pageHeader}>
<div>
<h2 className={pageStyles.pageTitle}>My Addresses</h2>
<p className={pageStyles.pageSubtitle}>
Manage your shipping addresses for orders at this store.
</p>
<h2 className={pageStyles.pageTitle}>{t('addresses.title')}</h2>
<p className={pageStyles.pageSubtitle}>{t('addresses.subtitle')}</p>
</div>
</div>
<form className={styles.form} onSubmit={handleSubmit}>
{error && (
<div className={styles.error} role="alert">
{error}
{error && (
<div className={styles.error} role="alert">
{error}
</div>
)}
<section className={styles.section}>
<h3 className={styles.sectionTitle}>{t('addresses.editorTitle')}</h3>
{loading && <p className={styles.status}>{t('addresses.loading')}</p>}
{!loading && addresses.length === 0 && (
<div className={styles.empty}>
<MapPin size={28} />
<p>{t('addresses.empty')}</p>
</div>
)}
<section className={styles.section}>
<AddressListEditor
addresses={addresses}
provinces={provinces}
citiesByProvince={citiesByProvince}
onAddressChange={updateAddressDraft}
onProvinceChange={handleProvinceChange}
onAdd={addAddressRow}
onRemove={(index) => void handleRemove(index)}
disabled={saving}
loading={loading}
/>
</section>
{!loading && addresses.length > 0 && (
<ul className={styles.list}>
{addresses.map((item) => (
<li key={item.id} className={styles.row}>
<div className={styles.rowLine} title={formatRowLine(item)}>
{item.label && <span className={styles.rowLabel}>{item.label}</span>}
<span className={styles.rowText}>
{[
item.province,
item.city,
item.address,
item.postalCode,
item.landline,
]
.filter(Boolean)
.join(' · ')}
</span>
</div>
<div className={styles.actions}>
<button type="submit" className={styles.saveBtn} disabled={saving || loading || !hasAddresses}>
{saving ? 'Saving...' : 'Save addresses'}
</button>
</div>
</form>
<div className={styles.rowActions}>
<Tooltip label={t('addresses.edit')}>
<button
type="button"
className={styles.editBtn}
onClick={() => openEditModal(item)}
aria-label={t('addresses.edit')}
>
<Pencil size={15} />
</button>
</Tooltip>
<Tooltip label={t('addresses.remove')}>
<button
type="button"
className={rowBtnStyles.removeRowBtn}
onClick={() => void handleRemove(item)}
disabled={removingId === item.id}
aria-label={t('addresses.remove')}
>
<Trash2 size={15} />
</button>
</Tooltip>
</div>
</li>
))}
</ul>
)}
</section>
<button
type="button"
className={styles.addFab}
onClick={openCreateModal}
aria-label={t('addresses.add')}
>
<Plus size={26} strokeWidth={2.5} />
</button>
<AddressFormModal
open={modalOpen}
address={editingAddress}
onClose={() => {
setModalOpen(false)
setEditingAddress(null)
}}
onSaved={handleSaved}
/>
</main>
)
}
apps/customer/src/pages/FavoritesPage.tsx
+14 -10
View File
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
import { Heart } from 'lucide-react'
import { Breadcrumbs, Pagination, useToast } from '@meshkee/dashboard-ui'
import { FavoriteStoreItemCard } from '../components/FavoriteStoreItemCard'
import { useT } from '../i18n/useT'
import { ApiError, isAbortError } from '../lib/api'
import {
listFavorites,
@@ -16,6 +17,7 @@ const PAGE_SIZE = 24
export function FavoritesPage() {
const { showToast } = useToast()
const t = useT()
const [data, setData] = useState<FavoritesListResponse | null>(null)
const [loading, setLoading] = useState(false)
const [error, setError] = useState('')
@@ -35,7 +37,7 @@ export function FavoritesPage() {
setData(response)
} catch (err) {
if (isAbortError(err) || controller.signal.aborted) return
setError(err instanceof ApiError ? err.message : 'Unable to load favorites.')
setError(err instanceof ApiError ? err.message : t('favorites.error.load'))
} finally {
if (!controller.signal.aborted) setLoading(false)
}
@@ -43,7 +45,7 @@ export function FavoritesPage() {
void load()
return () => controller.abort()
}, [page])
}, [page, t])
async function handleRemove(listing: FavoriteListing) {
setRemovingId(listing.favoriteId)
@@ -58,10 +60,10 @@ export function FavoritesPage() {
}
: prev,
)
showToast('Removed from favorites.', 'success')
showToast(t('favorites.toast.removed'), 'success')
} catch (err) {
const message =
err instanceof ApiError ? err.message : 'Unable to remove favorite.'
err instanceof ApiError ? err.message : t('favorites.error.remove')
showToast(message, 'error')
} finally {
setRemovingId(null)
@@ -69,17 +71,19 @@ export function FavoritesPage() {
}
function handleAddToCart() {
showToast('Shopping cart is coming soon.', 'success')
showToast(t('favorites.cartSoon'), 'success')
}
return (
<main className={pageStyles.content}>
<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'My Favorites' }]} />
<Breadcrumbs
items={[{ label: t('nav.home'), href: '/' }, { label: t('favorites.title') }]}
/>
<div className={pageStyles.pageHeader}>
<div>
<h2 className={pageStyles.pageTitle}>My Favorites</h2>
<p className={pageStyles.pageSubtitle}>Products you have saved for later.</p>
<h2 className={pageStyles.pageTitle}>{t('favorites.title')}</h2>
<p className={pageStyles.pageSubtitle}>{t('favorites.subtitle')}</p>
</div>
</div>
@@ -89,12 +93,12 @@ export function FavoritesPage() {
</div>
)}
{loading && <p className={styles.status}>Loading favorites...</p>}
{loading && <p className={styles.status}>{t('favorites.loading')}</p>}
{!loading && data?.items.length === 0 && (
<div className={styles.empty}>
<Heart size={32} />
<p>No favorites yet.</p>
<p>{t('favorites.empty')}</p>
</div>
)}
apps/customer/src/pages/HomePage.tsx
+47 -44
View File
@@ -1,73 +1,76 @@
import { CalendarDays, User, MapPin, ShoppingBag, Heart } from 'lucide-react'
import { SectionCard, useLocale } from '@meshkee/dashboard-ui'
import { useAuth } from '../context/AuthContext'
import { SectionCard } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import styles from '../components/PageContent.module.css'
const sections = [
{
icon: User,
title: 'My Profile',
description: 'View and update your personal information and contact details.',
linkText: 'View profile',
href: '/profile',
},
{
icon: MapPin,
title: 'My Addresses',
description: 'Manage your shipping addresses for checkout and deliveries.',
linkText: 'View addresses',
href: '/addresses',
},
{
icon: ShoppingBag,
title: 'My Orders',
description: 'Track your orders, view order history and order details.',
linkText: 'View orders',
href: '/orders',
},
{
icon: Heart,
title: 'My Favorites',
description: 'Browse and manage your saved favorite products.',
linkText: 'View favorites',
href: '/favorites',
},
]
export function HomePage() {
const { user } = useAuth()
const { locale } = useLocale()
const t = useT()
const firstName =
(locale === 'en' ? user?.firstNameEn : user?.firstName) ||
user?.firstName ||
user?.firstNameEn ||
t('home.welcomeFallback')
function getFormattedDate() {
return new Intl.DateTimeFormat('en-US', {
const sections = [
{
icon: User,
title: t('home.card.profile.title'),
description: t('home.card.profile.desc'),
linkText: t('home.card.profile.link'),
href: '/profile',
},
{
icon: MapPin,
title: t('home.card.addresses.title'),
description: t('home.card.addresses.desc'),
linkText: t('home.card.addresses.link'),
href: '/addresses',
},
{
icon: ShoppingBag,
title: t('home.card.orders.title'),
description: t('home.card.orders.desc'),
linkText: t('home.card.orders.link'),
href: '/orders',
},
{
icon: Heart,
title: t('home.card.favorites.title'),
description: t('home.card.favorites.desc'),
linkText: t('home.card.favorites.link'),
href: '/favorites',
},
]
const formattedDate = new Intl.DateTimeFormat(locale === 'fa' ? 'fa-IR' : 'en-US', {
month: 'long',
day: 'numeric',
year: 'numeric',
weekday: 'long',
}).format(new Date())
}
export function HomePage() {
const { user } = useAuth()
const firstName = user?.firstName || 'there'
return (
<main className={styles.content}>
<div className={styles.pageHeader}>
<div>
<h2 className={styles.pageTitle}>
Welcome back, {firstName}! <span aria-hidden="true">👋</span>
{t('home.welcome', { name: firstName })}
</h2>
<p className={styles.pageSubtitle}>
Manage your profile, addresses, orders, and favorites in one place.
</p>
<p className={styles.pageSubtitle}>{t('home.subtitle')}</p>
</div>
<div className={styles.dateBadge}>
<CalendarDays size={16} />
<span>{getFormattedDate()}</span>
<span>{formattedDate}</span>
</div>
</div>
<div className={styles.gridHome}>
{sections.map((section) => (
<SectionCard key={section.title} {...section} />
<SectionCard key={section.href} {...section} />
))}
</div>
</main>
apps/customer/src/pages/LoginPage.module.css
+9 -4
View File
@@ -24,11 +24,15 @@
.brand {
display: flex;
align-items: center;
justify-content: center;
justify-content: flex-start;
gap: 12px;
margin-bottom: 28px;
}
.langSelect {
margin-inline-start: auto;
}
.logo {
display: block;
width: 48px;
@@ -112,7 +116,7 @@
.inputIcon {
position: absolute;
left: 12px;
inset-inline-start: 12px;
color: var(--text-muted);
pointer-events: none;
}
@@ -120,7 +124,8 @@
.inputWrap input {
width: 100%;
min-height: var(--field-height);
padding: var(--field-padding-y) 40px var(--field-padding-y) 38px;
padding-block: var(--field-padding-y);
padding-inline: 38px 40px;
font-size: var(--field-font-size);
line-height: 1.4;
font-family: inherit;
@@ -140,7 +145,7 @@
.togglePassword {
position: absolute;
right: 12px;
inset-inline-end: 12px;
display: flex;
align-items: center;
justify-content: center;
apps/customer/src/pages/LoginPage.tsx
+68 -68
View File
@@ -16,6 +16,8 @@ import {
sendOtp,
verifyOtp,
} from '../services/authService'
import { LanguageSelect } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import meshkeeLogo from '../assets/meshkee-logo.png'
import styles from './LoginPage.module.css'
@@ -36,6 +38,7 @@ export function LoginPage() {
const { login } = useAuth()
const { businessName, logoUrl } = useTenantBranding()
const tenantDomain = getTenantDomain()
const t = useT()
const [view, setView] = useState<AuthView>('login')
const [smsStep, setSmsStep] = useState<SmsStep>('phone')
@@ -114,7 +117,7 @@ export function LoginPage() {
setSmsStep('code')
startCountdown()
} catch (err) {
handleApiError(err, 'Unable to send verification code.')
handleApiError(err, t('login.error.sendCode'))
} finally {
setIsSubmitting(false)
}
@@ -130,7 +133,7 @@ export function LoginPage() {
await login(cellNumber, password)
navigate(redirectTo)
} catch (err) {
handleApiError(err, 'Unable to sign in. Check your connection and try again.')
handleApiError(err, t('login.error.signIn'))
} finally {
setIsSubmitting(false)
}
@@ -141,12 +144,12 @@ export function LoginPage() {
clearMessages()
if (password !== confirmPassword) {
setError('Passwords do not match.')
setError(t('signup.error.match'))
return
}
if (password.length < 8) {
setError('Password must be at least 8 characters.')
setError(t('signup.error.length'))
return
}
@@ -180,7 +183,7 @@ export function LoginPage() {
await login(cellNumber, password)
navigate(redirectTo)
} catch (err) {
handleApiError(err, 'Unable to create account.')
handleApiError(err, t('signup.error.create'))
} finally {
setIsSubmitting(false)
}
@@ -191,7 +194,7 @@ export function LoginPage() {
clearMessages()
if (newPassword.length < 8) {
setError('Password must be at least 8 characters.')
setError(t('forgot.error.length'))
return
}
@@ -200,12 +203,10 @@ export function LoginPage() {
try {
const cellNumber = toE164CellNumber(phone)
await verifyOtp(cellNumber, smsCode)
setInfo(
'Phone number verified. Full password reset via SMS is not available yet — please contact support or sign in if you remember your password.',
)
setInfo(t('forgot.info.partial'))
setTimeout(() => switchView('login'), 2500)
} catch (err) {
handleApiError(err, 'Unable to verify code.')
handleApiError(err, t('forgot.error.verify'))
} finally {
setIsSubmitting(false)
}
@@ -221,14 +222,14 @@ export function LoginPage() {
await verifyOtp(cellNumber, smsCode)
if (!password) {
setError('Enter your account password to complete sign-in after SMS verification.')
setError(t('otp.error.password'))
return
}
await login(cellNumber, password)
navigate(redirectTo)
} catch (err) {
handleApiError(err, 'Unable to sign in with SMS verification.')
handleApiError(err, t('otp.error.signIn'))
} finally {
setIsSubmitting(false)
}
@@ -241,14 +242,17 @@ export function LoginPage() {
<img src={logoUrl || meshkeeLogo} alt="" className={styles.logo} />
<div className={styles.brandText}>
<span className={styles.domain}>{businessName || tenantDomain}</span>
<span className={styles.appName}>powered by Meshkee.app</span>
<span className={styles.appName}>{t('app.poweredBy')}</span>
</div>
<div className={styles.langSelect}>
<LanguageSelect />
</div>
</div>
{view === 'login' && (
<>
<h1 className={styles.title}>Welcome back</h1>
<p className={styles.subtitle}>Sign in with your mobile number</p>
<h1 className={styles.title}>{t('login.welcome')}</h1>
<p className={styles.subtitle}>{t('login.subtitle')}</p>
<form className={styles.form} onSubmit={handleLogin}>
{error && (
@@ -259,7 +263,7 @@ export function LoginPage() {
{info && <div className={styles.info}>{info}</div>}
<div className={styles.field}>
<label htmlFor="login-phone">Mobile number</label>
<label htmlFor="login-phone">{t('login.mobile')}</label>
<div className={styles.inputWrap}>
<Smartphone size={18} className={styles.inputIcon} />
<input
@@ -276,13 +280,13 @@ export function LoginPage() {
</div>
<div className={styles.field}>
<label htmlFor="login-password">Password</label>
<label htmlFor="login-password">{t('login.password')}</label>
<div className={styles.inputWrap}>
<Lock size={18} className={styles.inputIcon} />
<input
id="login-password"
type={showPassword ? 'text' : 'password'}
placeholder="Enter your password"
placeholder={t('login.passwordPlaceholder')}
value={password}
onChange={(e) => setPassword(e.target.value)}
required
@@ -293,7 +297,7 @@ export function LoginPage() {
type="button"
className={styles.togglePassword}
onClick={() => setShowPassword((v) => !v)}
aria-label={showPassword ? 'Hide password' : 'Show password'}
aria-label={showPassword ? t('login.hidePassword') : t('login.showPassword')}
disabled={isSubmitting}
>
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -308,17 +312,17 @@ export function LoginPage() {
onClick={() => switchView('forgot')}
disabled={isSubmitting}
>
Forgot password?
{t('login.forgot')}
</button>
</div>
<button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
{isSubmitting ? 'Signing in...' : 'Sign in'}
{isSubmitting ? t('login.signingIn') : t('login.signIn')}
</button>
</form>
<div className={styles.divider}>
<span>or</span>
<span>{t('login.or')}</span>
</div>
<button
@@ -328,18 +332,18 @@ export function LoginPage() {
disabled={isSubmitting}
>
<KeyRound size={18} />
One-time login with SMS
{t('login.otp')}
</button>
<p className={styles.footerText}>
Don&apos;t have an account?{' '}
{t('login.noAccount')}{' '}
<button
type="button"
className={styles.linkBtn}
onClick={() => switchView('signup')}
disabled={isSubmitting}
>
Sign up
{t('login.signUp')}
</button>
</p>
</>
@@ -347,8 +351,8 @@ export function LoginPage() {
{view === 'signup' && (
<>
<h1 className={styles.title}>Create account</h1>
<p className={styles.subtitle}>Register as a customer of {tenantDomain}</p>
<h1 className={styles.title}>{t('signup.title')}</h1>
<p className={styles.subtitle}>{t('signup.subtitle', { domain: tenantDomain })}</p>
<form className={styles.form} onSubmit={handleSignup}>
{error && (
@@ -360,13 +364,13 @@ export function LoginPage() {
<div className={styles.fieldRow}>
<div className={styles.field}>
<label htmlFor="signup-first">First name</label>
<label htmlFor="signup-first">{t('signup.firstName')}</label>
<div className={styles.inputWrap}>
<User size={18} className={styles.inputIcon} />
<input
id="signup-first"
type="text"
placeholder="First name"
placeholder={t('signup.firstName')}
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
required
@@ -376,13 +380,13 @@ export function LoginPage() {
</div>
</div>
<div className={styles.field}>
<label htmlFor="signup-last">Last name</label>
<label htmlFor="signup-last">{t('signup.lastName')}</label>
<div className={styles.inputWrap}>
<User size={18} className={styles.inputIcon} />
<input
id="signup-last"
type="text"
placeholder="Last name"
placeholder={t('signup.lastName')}
value={lastName}
onChange={(e) => setLastName(e.target.value)}
required
@@ -394,7 +398,7 @@ export function LoginPage() {
</div>
<div className={styles.field}>
<label htmlFor="signup-phone">Mobile number</label>
<label htmlFor="signup-phone">{t('login.mobile')}</label>
<div className={styles.inputWrap}>
<Smartphone size={18} className={styles.inputIcon} />
<input
@@ -411,13 +415,13 @@ export function LoginPage() {
</div>
<div className={styles.field}>
<label htmlFor="signup-password">Password</label>
<label htmlFor="signup-password">{t('login.password')}</label>
<div className={styles.inputWrap}>
<Lock size={18} className={styles.inputIcon} />
<input
id="signup-password"
type={showPassword ? 'text' : 'password'}
placeholder="Choose a password"
placeholder={t('signup.passwordPlaceholder')}
value={password}
onChange={(e) => setPassword(e.target.value)}
required
@@ -428,7 +432,7 @@ export function LoginPage() {
type="button"
className={styles.togglePassword}
onClick={() => setShowPassword((v) => !v)}
aria-label={showPassword ? 'Hide password' : 'Show password'}
aria-label={showPassword ? t('login.hidePassword') : t('login.showPassword')}
disabled={isSubmitting}
>
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -437,13 +441,13 @@ export function LoginPage() {
</div>
<div className={styles.field}>
<label htmlFor="signup-confirm">Confirm password</label>
<label htmlFor="signup-confirm">{t('signup.confirm')}</label>
<div className={styles.inputWrap}>
<Lock size={18} className={styles.inputIcon} />
<input
id="signup-confirm"
type={showPassword ? 'text' : 'password'}
placeholder="Repeat your password"
placeholder={t('signup.confirmPlaceholder')}
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
required
@@ -454,19 +458,19 @@ export function LoginPage() {
</div>
<button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
{isSubmitting ? 'Creating account...' : 'Create account'}
{isSubmitting ? t('signup.creating') : t('signup.create')}
</button>
</form>
<p className={styles.footerText}>
Already have an account?{' '}
{t('signup.hasAccount')}{' '}
<button
type="button"
className={styles.linkBtn}
onClick={() => switchView('login')}
disabled={isSubmitting}
>
Sign in
{t('signup.signIn')}
</button>
</p>
</>
@@ -481,14 +485,12 @@ export function LoginPage() {
disabled={isSubmitting}
>
<ArrowLeft size={18} />
Back to sign in
{t('forgot.back')}
</button>
<h1 className={styles.title}>Forgot password</h1>
<h1 className={styles.title}>{t('forgot.title')}</h1>
<p className={styles.subtitle}>
{smsStep === 'phone'
? 'We will send a verification code via SMS'
: 'Enter the code and your new password'}
{smsStep === 'phone' ? t('forgot.subtitlePhone') : t('forgot.subtitleCode')}
</p>
<form className={styles.form} onSubmit={handleResetPassword}>
@@ -502,7 +504,7 @@ export function LoginPage() {
{smsStep === 'phone' ? (
<>
<div className={styles.field}>
<label htmlFor="forgot-phone">Mobile number</label>
<label htmlFor="forgot-phone">{t('login.mobile')}</label>
<div className={styles.inputWrap}>
<Smartphone size={18} className={styles.inputIcon} />
<input
@@ -524,19 +526,19 @@ export function LoginPage() {
onClick={() => void handleSendCode()}
disabled={isSubmitting}
>
{isSubmitting ? 'Sending...' : 'Send SMS code'}
{isSubmitting ? t('forgot.sending') : t('forgot.sendCode')}
</button>
</>
) : (
<>
{codeSent && (
<p className={styles.codeHint}>
Verification code sent to <strong>{phone}</strong>
{t('common.codeSent', { phone })}
</p>
)}
<div className={styles.field}>
<label htmlFor="forgot-code">SMS verification code</label>
<label htmlFor="forgot-code">{t('forgot.code')}</label>
<div className={styles.inputWrap}>
<KeyRound size={18} className={styles.inputIcon} />
<input
@@ -554,13 +556,13 @@ export function LoginPage() {
</div>
<div className={styles.field}>
<label htmlFor="forgot-new-password">New password</label>
<label htmlFor="forgot-new-password">{t('forgot.newPassword')}</label>
<div className={styles.inputWrap}>
<Lock size={18} className={styles.inputIcon} />
<input
id="forgot-new-password"
type={showPassword ? 'text' : 'password'}
placeholder="Enter new password"
placeholder={t('forgot.newPasswordPlaceholder')}
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
required
@@ -572,7 +574,7 @@ export function LoginPage() {
<div className={styles.resendRow}>
{countdown > 0 ? (
<span className={styles.countdown}>Resend code in {countdown}s</span>
<span className={styles.countdown}>{t('common.resendIn', { seconds: countdown })}</span>
) : (
<button
type="button"
@@ -580,13 +582,13 @@ export function LoginPage() {
onClick={() => void handleSendCode()}
disabled={isSubmitting}
>
Resend SMS code
{t('common.resend')}
</button>
)}
</div>
<button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
{isSubmitting ? 'Verifying...' : 'Reset password'}
{isSubmitting ? t('forgot.verifying') : t('forgot.reset')}
</button>
</>
)}
@@ -603,14 +605,12 @@ export function LoginPage() {
disabled={isSubmitting}
>
<ArrowLeft size={18} />
Back to sign in
{t('otp.back')}
</button>
<h1 className={styles.title}>One-time login</h1>
<h1 className={styles.title}>{t('otp.title')}</h1>
<p className={styles.subtitle}>
{smsStep === 'phone'
? 'Verify your mobile number with a one-time SMS code'
: 'Enter the SMS code and your password'}
{smsStep === 'phone' ? t('otp.subtitlePhone') : t('otp.subtitleCode')}
</p>
<form className={styles.form} onSubmit={handleOtpLogin}>
@@ -623,7 +623,7 @@ export function LoginPage() {
{smsStep === 'phone' ? (
<>
<div className={styles.field}>
<label htmlFor="otp-phone">Mobile number</label>
<label htmlFor="otp-phone">{t('login.mobile')}</label>
<div className={styles.inputWrap}>
<Smartphone size={18} className={styles.inputIcon} />
<input
@@ -645,19 +645,19 @@ export function LoginPage() {
onClick={() => void handleSendCode()}
disabled={isSubmitting}
>
{isSubmitting ? 'Sending...' : 'Send SMS code'}
{isSubmitting ? t('forgot.sending') : t('forgot.sendCode')}
</button>
</>
) : (
<>
{codeSent && (
<p className={styles.codeHint}>
Verification code sent to <strong>{phone}</strong>
{t('common.codeSent', { phone })}
</p>
)}
<div className={styles.field}>
<label htmlFor="otp-code">SMS verification code</label>
<label htmlFor="otp-code">{t('otp.code')}</label>
<div className={styles.inputWrap}>
<KeyRound size={18} className={styles.inputIcon} />
<input
@@ -675,13 +675,13 @@ export function LoginPage() {
</div>
<div className={styles.field}>
<label htmlFor="otp-password">Password</label>
<label htmlFor="otp-password">{t('otp.password')}</label>
<div className={styles.inputWrap}>
<Lock size={18} className={styles.inputIcon} />
<input
id="otp-password"
type={showPassword ? 'text' : 'password'}
placeholder="Your account password"
placeholder={t('otp.passwordPlaceholder')}
value={password}
onChange={(e) => setPassword(e.target.value)}
required
@@ -693,7 +693,7 @@ export function LoginPage() {
<div className={styles.resendRow}>
{countdown > 0 ? (
<span className={styles.countdown}>Resend code in {countdown}s</span>
<span className={styles.countdown}>{t('common.resendIn', { seconds: countdown })}</span>
) : (
<button
type="button"
@@ -701,13 +701,13 @@ export function LoginPage() {
onClick={() => void handleSendCode()}
disabled={isSubmitting}
>
Resend SMS code
{t('common.resend')}
</button>
)}
</div>
<button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
{isSubmitting ? 'Signing in...' : 'Sign in'}
{isSubmitting ? t('login.signingIn') : t('login.signIn')}
</button>
</>
)}
apps/customer/src/pages/OrdersPage.module.css
+6 -5
View File
@@ -71,7 +71,7 @@
.th,
.td {
padding: 10px 12px;
text-align: left;
text-align: start;
border-bottom: 1px solid rgba(148, 163, 184, 0.16);
vertical-align: middle;
}
@@ -217,21 +217,22 @@
}
.thActions {
text-align: center;
text-align: end;
white-space: nowrap;
}
.tdActions {
text-align: right;
text-align: end;
white-space: nowrap;
padding-right: 10px;
padding-inline: 10px;
}
.rowActions {
display: inline-flex;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0;
width: 100%;
}
.actionBtn {
apps/customer/src/pages/OrdersPage.tsx
+35 -23
View File
@@ -1,7 +1,8 @@
import { useEffect, useMemo, useState } from 'react'
import { Breadcrumbs, Pagination } from '@meshkee/dashboard-ui'
import { Breadcrumbs, Pagination, useLocale } from '@meshkee/dashboard-ui'
import { OrderItemsModal } from '../components/OrderItemsModal'
import { OrderRow } from '../components/OrderRow'
import { useT } from '../i18n/useT'
import { ApiError, isAbortError } from '../lib/api'
import {
listOrders,
@@ -16,12 +17,16 @@ const PAGE_SIZE = 20
const COLUMN_COUNT = 7
export function OrdersPage() {
const t = useT()
const { locale } = useLocale()
const [data, setData] = useState<OrdersListResponse | null>(null)
const [loading, setLoading] = useState(false)
const [error, setError] = useState('')
const [page, setPage] = useState(1)
const [viewOrder, setViewOrder] = useState<Order | null>(null)
const processSteps = DEFAULT_ORDER_PROCESS_STEPS
useEffect(() => {
const controller = new AbortController()
@@ -35,7 +40,7 @@ export function OrdersPage() {
setData(response)
} catch (err) {
if (isAbortError(err) || controller.signal.aborted) return
setError(err instanceof ApiError ? err.message : 'Unable to load orders.')
setError(err instanceof ApiError ? err.message : t('orders.error.load'))
} finally {
if (!controller.signal.aborted) setLoading(false)
}
@@ -43,7 +48,7 @@ export function OrdersPage() {
void load()
return () => controller.abort()
}, [page])
}, [page, t])
const totalPages = useMemo(() => {
const total = data?.total ?? 0
@@ -62,27 +67,29 @@ export function OrdersPage() {
return (
<main className={pageStyles.content}>
<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'My Orders' }]} />
<Breadcrumbs items={[{ label: t('nav.home'), href: '/' }, { label: t('orders.title') }]} />
<div className={pageStyles.pageHeader}>
<div>
<h2 className={pageStyles.pageTitle}>My Orders</h2>
<p className={pageStyles.pageSubtitle}>View your order history and details.</p>
<h2 className={pageStyles.pageTitle}>{t('orders.title')}</h2>
<p className={pageStyles.pageSubtitle}>{t('orders.subtitle')}</p>
</div>
</div>
<div className={styles.tablePanel}>
<div className={styles.tableWrap}>
<div className={styles.tableHeader}>
<div className={styles.tableHeaderTitle}>Order list</div>
<div className={styles.tableHeaderTitle}>{t('orders.listTitle')}</div>
<div className={styles.meta}>
{data ? (
data.total > 0 ? (
<>
Showing {showingFrom} - {showingTo} of {data.total}
</>
t('orders.showing', {
from: showingFrom,
to: showingTo,
total: data.total,
})
) : (
'No orders'
t('orders.none')
)
) : (
' '
@@ -92,7 +99,7 @@ export function OrdersPage() {
{error && <div className={styles.errorBanner}>{error}</div>}
<table className={styles.table}>
<table className={styles.table} dir={locale === 'fa' ? 'rtl' : 'ltr'}>
<colgroup>
<col className={styles.colOrderId} />
<col className={styles.colItems} />
@@ -104,20 +111,20 @@ export function OrdersPage() {
</colgroup>
<thead>
<tr>
<th className={styles.th}>Order ID</th>
<th className={styles.th}>Items</th>
<th className={styles.th}>Total cost</th>
<th className={styles.th}>Date &amp; time</th>
<th className={styles.th}>Step</th>
<th className={styles.th}>Registered by</th>
<th className={`${styles.th} ${styles.thActions}`}>Actions</th>
<th className={styles.th}>{t('orders.col.orderId')}</th>
<th className={styles.th}>{t('orders.col.items')}</th>
<th className={styles.th}>{t('orders.col.total')}</th>
<th className={styles.th}>{t('orders.col.date')}</th>
<th className={styles.th}>{t('orders.col.step')}</th>
<th className={styles.th}>{t('orders.col.source')}</th>
<th className={`${styles.th} ${styles.thActions}`}>{t('orders.col.actions')}</th>
</tr>
</thead>
<tbody>
{loading && (
<tr>
<td className={styles.td} colSpan={COLUMN_COUNT}>
Loading orders...
{t('orders.loading')}
</td>
</tr>
)}
@@ -125,7 +132,7 @@ export function OrdersPage() {
{!loading && data?.items.length === 0 && (
<tr>
<td className={styles.td} colSpan={COLUMN_COUNT}>
You have no orders yet.
{t('orders.empty')}
</td>
</tr>
)}
@@ -135,7 +142,7 @@ export function OrdersPage() {
<OrderRow
key={order.id}
order={order}
processSteps={DEFAULT_ORDER_PROCESS_STEPS}
processSteps={processSteps}
onViewItems={setViewOrder}
/>
))}
@@ -145,7 +152,12 @@ export function OrdersPage() {
{data && data.total > PAGE_SIZE && (
<div className={styles.pagination}>
<div>
Page {page} / {totalPages} · {PAGE_SIZE} per page · {data.total} total
{t('orders.pageMeta', {
page,
totalPages,
pageSize: PAGE_SIZE,
total: data.total,
})}
</div>
<Pagination
currentPage={page}
apps/customer/src/pages/ProfilePage.tsx
+57 -24
View File
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react'
import { Breadcrumbs } from '@meshkee/dashboard-ui'
import { Breadcrumbs, useToast } from '@meshkee/dashboard-ui'
import { useAuth } from '../context/AuthContext'
import { useToast } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import { ApiError } from '../lib/api'
import { formatCellForDisplay } from '../lib/cellNumber'
import { updateProfile } from '../services/authService'
@@ -11,9 +11,12 @@ import styles from './ProfilePage.module.css'
export function ProfilePage() {
const { user, setUser } = useAuth()
const { showToast } = useToast()
const t = useT()
const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('')
const [firstNameEn, setFirstNameEn] = useState('')
const [lastNameEn, setLastNameEn] = useState('')
const [email, setEmail] = useState('')
const [landline, setLandline] = useState('')
const [backupPhone, setBackupPhone] = useState('')
@@ -29,6 +32,8 @@ export function ProfilePage() {
setFirstName(user.firstName ?? '')
setLastName(user.lastName ?? '')
setFirstNameEn(user.firstNameEn ?? '')
setLastNameEn(user.lastNameEn ?? '')
setEmail(user.email ?? '')
setLandline(user.profile.landline ?? '')
setBackupPhone(user.profile.backupPhone ?? '')
@@ -47,6 +52,8 @@ export function ProfilePage() {
const result = await updateProfile({
firstName: firstName.trim(),
lastName: lastName.trim(),
firstNameEn: firstNameEn.trim(),
lastNameEn: lastNameEn.trim(),
email: email.trim() || undefined,
landline: landline.trim(),
backupPhone: backupPhone.trim(),
@@ -57,10 +64,10 @@ export function ProfilePage() {
})
setUser(result.user)
showToast('Profile updated successfully.', 'success')
showToast(t('profile.toast.success'), 'success')
} catch (err) {
const message =
err instanceof ApiError ? err.message : 'Unable to update profile. Please try again.'
err instanceof ApiError ? err.message : t('profile.error.update')
setError(message)
showToast(message, 'error')
} finally {
@@ -70,14 +77,12 @@ export function ProfilePage() {
return (
<main className={pageStyles.content}>
<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'My Profile' }]} />
<Breadcrumbs items={[{ label: t('nav.home'), href: '/' }, { label: t('profile.title') }]} />
<div className={pageStyles.pageHeader}>
<div>
<h2 className={pageStyles.pageTitle}>My Profile</h2>
<p className={pageStyles.pageSubtitle}>
Update your personal information and contact details.
</p>
<h2 className={pageStyles.pageTitle}>{t('profile.title')}</h2>
<p className={pageStyles.pageSubtitle}>{t('profile.subtitle')}</p>
</div>
</div>
@@ -89,10 +94,10 @@ export function ProfilePage() {
)}
<section className={styles.section}>
<h3 className={styles.sectionTitle}>Account</h3>
<h3 className={styles.sectionTitle}>{t('profile.section.account')}</h3>
<div className={styles.grid}>
<div className={`${styles.field} ${styles.col3}`}>
<label htmlFor="profile-cell">Mobile number</label>
<label htmlFor="profile-cell">{t('profile.mobile')}</label>
<input
id="profile-cell"
type="text"
@@ -101,37 +106,65 @@ export function ProfilePage() {
/>
</div>
<div className={`${styles.field} ${styles.col3}`}>
<label htmlFor="profile-email">Email</label>
<label htmlFor="profile-email">{t('profile.email')}</label>
<input
id="profile-email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="you@example.com"
placeholder={t('profile.emailPlaceholder')}
/>
</div>
<div className={`${styles.field} ${styles.col3}`}>
<label htmlFor="profile-first">First name</label>
<label htmlFor="profile-first">{t('profile.firstName')}</label>
<input
id="profile-first"
type="text"
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
required
dir="rtl"
lang="fa"
className="faText"
/>
</div>
<div className={`${styles.field} ${styles.col3}`}>
<label htmlFor="profile-last">Last name</label>
<label htmlFor="profile-last">{t('profile.lastName')}</label>
<input
id="profile-last"
type="text"
value={lastName}
onChange={(e) => setLastName(e.target.value)}
required
dir="rtl"
lang="fa"
className="faText"
/>
</div>
<div className={`${styles.field} ${styles.col3}`}>
<label htmlFor="profile-landline">Landline</label>
<label htmlFor="profile-first-en">{t('profile.firstNameEn')}</label>
<input
id="profile-first-en"
type="text"
value={firstNameEn}
onChange={(e) => setFirstNameEn(e.target.value)}
dir="ltr"
lang="en"
/>
</div>
<div className={`${styles.field} ${styles.col3}`}>
<label htmlFor="profile-last-en">{t('profile.lastNameEn')}</label>
<input
id="profile-last-en"
type="text"
value={lastNameEn}
onChange={(e) => setLastNameEn(e.target.value)}
dir="ltr"
lang="en"
/>
</div>
<div className={`${styles.field} ${styles.col3}`}>
<label htmlFor="profile-landline">{t('profile.landline')}</label>
<input
id="profile-landline"
type="text"
@@ -141,7 +174,7 @@ export function ProfilePage() {
/>
</div>
<div className={`${styles.field} ${styles.col3}`}>
<label htmlFor="profile-backup-phone">Backup phone number</label>
<label htmlFor="profile-backup-phone">{t('profile.backupPhone')}</label>
<input
id="profile-backup-phone"
type="tel"
@@ -155,10 +188,10 @@ export function ProfilePage() {
</section>
<section className={styles.section}>
<h3 className={styles.sectionTitle}>About</h3>
<h3 className={styles.sectionTitle}>{t('profile.section.about')}</h3>
<div className={styles.grid}>
<div className={`${styles.field} ${styles.col12}`}>
<label htmlFor="profile-about">About</label>
<label htmlFor="profile-about">{t('profile.about')}</label>
<textarea
id="profile-about"
value={about}
@@ -170,10 +203,10 @@ export function ProfilePage() {
</section>
<section className={styles.section}>
<h3 className={styles.sectionTitle}>Social</h3>
<h3 className={styles.sectionTitle}>{t('profile.section.social')}</h3>
<div className={styles.grid}>
<div className={`${styles.field} ${styles.col4}`}>
<label htmlFor="profile-instagram">Instagram</label>
<label htmlFor="profile-instagram">{t('profile.instagram')}</label>
<input
id="profile-instagram"
type="text"
@@ -182,7 +215,7 @@ export function ProfilePage() {
/>
</div>
<div className={`${styles.field} ${styles.col4}`}>
<label htmlFor="profile-telegram">Telegram</label>
<label htmlFor="profile-telegram">{t('profile.telegram')}</label>
<input
id="profile-telegram"
type="text"
@@ -191,7 +224,7 @@ export function ProfilePage() {
/>
</div>
<div className={`${styles.field} ${styles.col4}`}>
<label htmlFor="profile-linkedin">LinkedIn</label>
<label htmlFor="profile-linkedin">{t('profile.linkedin')}</label>
<input
id="profile-linkedin"
type="text"
@@ -204,7 +237,7 @@ export function ProfilePage() {
<div className={styles.actions}>
<button type="submit" className={styles.saveBtn} disabled={isSaving}>
{isSaving ? 'Saving...' : 'Save changes'}
{isSaving ? t('profile.saving') : t('profile.save')}
</button>
</div>
</form>
apps/customer/src/services/authService.ts
+2
View File
@@ -45,6 +45,8 @@ export async function updateProfile(
payload: Partial<UserProfile> & {
firstName?: string
lastName?: string
firstNameEn?: string
lastNameEn?: string
email?: string
},
) {
apps/customer/src/services/orderService.ts
+1
View File
@@ -45,6 +45,7 @@ export interface Order {
status: OrderStatus
processStepId: string
processStepLabel?: string | null
processStepLabelFa?: string | null
processStepColor?: string | null
source: OrderSource
subtotal: number
apps/customer/src/services/tenantService.ts
+2
View File
@@ -1,4 +1,5 @@
import { apiRequest } from '../lib/api'
import type { DashboardLocale } from '@meshkee/dashboard-core'
import type { BusinessPrimaryColorId } from '../utils/businessPrimaryColors'
export interface ResolvedTenant {
@@ -8,6 +9,7 @@ export interface ResolvedTenant {
slug: string
domain: string
primaryColor: BusinessPrimaryColorId
defaultLocale?: DashboardLocale
logoUrl?: string | null
faviconUrl?: string | null
}
apps/customer/src/utils/applyBusinessTheme.ts
+8
View File
@@ -11,6 +11,10 @@ const CSS_VAR_DEFAULTS: Record<string, string> = {
'--primary-dark': '#2563eb',
'--primary-rgb': '59 130 246',
'--primary-dark-rgb': '37 99 235',
'--chart-accent': '#06b6d4',
'--chart-accent-dark': '#0891b2',
'--chart-accent-rgb': '6 182 212',
'--chart-accent-dark-rgb': '8 145 178',
}
export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | null) {
@@ -23,6 +27,10 @@ export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | nul
root.style.setProperty('--primary-dark', tokens.primaryDark)
root.style.setProperty('--primary-rgb', tokens.primaryRgb)
root.style.setProperty('--primary-dark-rgb', tokens.primaryDarkRgb)
root.style.setProperty('--chart-accent', tokens.chartAccent)
root.style.setProperty('--chart-accent-dark', tokens.chartAccentDark)
root.style.setProperty('--chart-accent-rgb', tokens.chartAccentRgb)
root.style.setProperty('--chart-accent-dark-rgb', tokens.chartAccentDarkRgb)
}
export function resetBusinessPrimaryColor() {
apps/customer/src/utils/businessPrimaryColors.ts
+26
View File
@@ -20,8 +20,27 @@ export type BusinessPrimaryColorTokens = {
primaryGlow: string
primaryRgb: string
primaryDarkRgb: string
/** Second chart series color (red→purple, blue→cyan, …). */
chartAccent: string
chartAccentDark: string
chartAccentRgb: string
chartAccentDarkRgb: string
}
const PURPLE_ACCENT = {
chartAccent: '#a855f7',
chartAccentDark: '#9333ea',
chartAccentRgb: '168 85 247',
chartAccentDarkRgb: '147 51 234',
} as const
const CYAN_ACCENT = {
chartAccent: '#06b6d4',
chartAccentDark: '#0891b2',
chartAccentRgb: '6 182 212',
chartAccentDarkRgb: '8 145 178',
} as const
export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
BusinessPrimaryColorId,
BusinessPrimaryColorTokens
@@ -34,6 +53,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryGlow: '#ef4444',
primaryRgb: '239 68 68',
primaryDarkRgb: '220 38 38',
...PURPLE_ACCENT,
},
yellow: {
label: 'Yellow',
@@ -43,6 +63,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryGlow: '#eab308',
primaryRgb: '234 179 8',
primaryDarkRgb: '202 138 4',
...PURPLE_ACCENT,
},
black: {
label: 'Black',
@@ -52,6 +73,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryGlow: '#334155',
primaryRgb: '30 41 59',
primaryDarkRgb: '15 23 42',
...CYAN_ACCENT,
},
cyan: {
label: 'Cyan',
@@ -61,6 +83,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryGlow: '#06b6d4',
primaryRgb: '6 182 212',
primaryDarkRgb: '8 145 178',
...PURPLE_ACCENT,
},
purple: {
label: 'Purple',
@@ -70,6 +93,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryGlow: '#a855f7',
primaryRgb: '168 85 247',
primaryDarkRgb: '147 51 234',
...CYAN_ACCENT,
},
'light-blue': {
label: 'Light Blue',
@@ -79,6 +103,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryGlow: '#38bdf8',
primaryRgb: '56 189 248',
primaryDarkRgb: '14 165 233',
...CYAN_ACCENT,
},
'dark-blue': {
label: 'Dark Blue',
@@ -88,6 +113,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryGlow: '#3b82f6',
primaryRgb: '59 130 246',
primaryDarkRgb: '37 99 235',
...CYAN_ACCENT,
},
}
apps/customer/src/utils/orderSteps.ts
+60 -6
View File
@@ -1,23 +1,74 @@
export interface OrderProcessStep {
id: string
label: string
labelFa: string
color: string
}
export const DEFAULT_ORDER_PROCESS_STEPS: OrderProcessStep[] = [
{ id: 'processing', label: 'Under processing', color: '#3B82F6' },
{ id: 'ready-for-shipping', label: 'Ready for shipping', color: '#F59E0B' },
{ id: 'shipped', label: 'Shipped', color: '#8B5CF6' },
{ id: 'delivered', label: 'Delivered', color: '#22C55E' },
{
id: 'processing',
label: 'Under processing',
labelFa: 'در حال پردازش',
color: '#3B82F6',
},
{
id: 'ready-for-shipping',
label: 'Ready for shipping',
labelFa: 'آماده ارسال',
color: '#F59E0B',
},
{
id: 'shipped',
label: 'Shipped',
labelFa: 'ارسال‌شده',
color: '#8B5CF6',
},
{
id: 'delivered',
label: 'Delivered',
labelFa: 'تحویل‌شده',
color: '#22C55E',
},
]
function defaultFaForLabel(label: string | null | undefined) {
const trimmed = label?.trim()
if (!trimmed) return undefined
return DEFAULT_ORDER_PROCESS_STEPS.find(
(step) => step.label.toLowerCase() === trimmed.toLowerCase(),
)?.labelFa
}
export function stepLabel(
steps: OrderProcessStep[],
processStepId: string,
processStepLabel?: string | null,
processStepLabelFa?: string | null,
locale: 'en' | 'fa' = 'en',
) {
const step =
steps.find((item) => item.id === processStepId) ??
DEFAULT_ORDER_PROCESS_STEPS.find((item) => item.id === processStepId)
if (locale === 'fa') {
let fa = processStepLabelFa?.trim() || step?.labelFa?.trim()
// Older API payloads sometimes echoed the English label as labelFa.
if (fa && processStepLabel?.trim() && fa === processStepLabel.trim()) {
fa = undefined
}
fa =
fa ||
defaultFaForLabel(processStepLabel) ||
defaultFaForLabel(step?.label)
if (fa) return fa
}
if (processStepLabel?.trim()) return processStepLabel.trim()
return steps.find((step) => step.id === processStepId)?.label ?? processStepId
return step?.label ?? processStepId
}
export function stepColor(
@@ -28,7 +79,10 @@ export function stepColor(
if (processStepColor?.trim()) return processStepColor.trim()
const index = steps.findIndex((step) => step.id === processStepId)
const step = index >= 0 ? steps[index] : steps[0]
const step =
(index >= 0 ? steps[index] : undefined) ??
DEFAULT_ORDER_PROCESS_STEPS.find((item) => item.id === processStepId) ??
steps[0]
if (step?.color) return step.color
apps/customer/src/utils/storeProductGroups.ts
+4 -1
View File
@@ -1,3 +1,6 @@
export function formatVariantCount(count: number): string {
export function formatVariantCount(count: number, locale: 'en' | 'fa' = 'en'): string {
if (locale === 'fa') {
return count === 1 ? '۱ تنوع' : `${count} تنوع`
}
return count === 1 ? '1 variant' : `${count} variants`
}
apps/super-admin/index.html
+1 -1
View File
@@ -7,7 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
apps/super-admin/src/components/Header.module.css
-7
View File
@@ -89,13 +89,6 @@
cursor: pointer;
}
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
.profileInfo {
display: flex;
flex-direction: column;
apps/super-admin/src/components/Header.tsx
-7
View File
@@ -18,8 +18,6 @@ export function Header() {
user?.cellNumber ||
'Super Admin'
const avatarSeed = encodeURIComponent(user?.cellNumber ?? 'admin')
useEffect(() => {
if (!menuOpen) return
@@ -88,11 +86,6 @@ export function Header() {
aria-expanded={menuOpen}
aria-haspopup="menu"
>
<img
src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${avatarSeed}`}
alt={displayName}
className={styles.avatar}
/>
<div className={styles.profileInfo}>
<span className={styles.name}>{displayName}</span>
<span className={styles.role}>Super Administrator</span>
apps/super-admin/src/components/SectionCard.module.css
+9
View File
@@ -71,3 +71,12 @@
transform: translateX(2px);
box-shadow: 0 4px 14px rgba(var(--primary-rgb) / 0.35);
}
:global([dir='rtl']) .arrowBtn {
transform: scaleX(-1);
}
:global([dir='rtl']) .card:hover .arrowBtn {
transform: scaleX(-1) translateX(2px);
box-shadow: 0 4px 14px rgba(var(--primary-rgb) / 0.35);
}
apps/super-admin/src/index.css
+6 -5
View File
@@ -36,8 +36,9 @@
--field-padding-y: 9px;
--field-padding-x: 12px;
--field-height: 38px;
--font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-en: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-fa: 'IRANYekan', 'IranYekan', 'Yekan', Tahoma, sans-serif;
--font-ui: var(--font-en), var(--font-fa);
--card-hover-lift: -4px;
--card-hover-shadow: 0 16px 48px rgba(var(--primary-rgb) / 0.14);
--card-hover-transition: transform 0.25s ease, box-shadow 0.25s ease;
@@ -50,7 +51,7 @@ body,
}
body {
font-family: var(--font-en);
font-family: var(--font-ui);
color: var(--text-primary);
background:
radial-gradient(ellipse 80% 60% at 10% 0%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
@@ -126,7 +127,7 @@ select[multiple] option {
input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden']),
textarea {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
font-size: var(--field-font-size);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
@@ -147,12 +148,12 @@ textarea:focus {
input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden'])::placeholder,
textarea::placeholder {
font-family: var(--font-en);
font-family: var(--font-ui);
}
[dir='rtl'],
:lang(fa),
.faText {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
font-weight: 400;
}
apps/super-admin/src/pages/BusinessesPage.module.css
+41
View File
@@ -402,6 +402,47 @@
padding-right: 8px;
}
.thLocale,
.tdLocale {
width: 1%;
white-space: nowrap;
text-align: center;
}
.tdLocale {
padding-left: 8px;
padding-right: 8px;
}
.localeSelect {
min-height: var(--field-height);
padding: var(--field-padding-y) var(--select-padding-end) var(--field-padding-y)
var(--field-padding-x);
font-size: var(--field-font-size);
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
background-color: rgba(255, 255, 255, 0.7);
color: var(--text-primary);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--select-arrow-offset) center;
background-size: var(--select-arrow-size);
cursor: pointer;
}
.localeSelect:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.localeSelect:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
}
.td {
font-size: 13px;
color: var(--text-primary);
apps/super-admin/src/pages/BusinessesPage.tsx
+110 -4
View File
@@ -55,7 +55,10 @@ import {
} from '../utils/businessPrimaryColors'
import {
getBusinessSettings,
updateBusinessBranding,
updateBusinessDefaultLocale,
updateBusinessPrimaryColor,
type DashboardLocale,
} from '../services/businessSettingsService'
import { flattenBusinessCategories } from '../utils/categories'
import { Pagination } from '@meshkee/dashboard-ui'
@@ -63,6 +66,11 @@ import pageStyles from '../components/PageContent.module.css'
import styles from './BusinessesPage.module.css'
const DEFAULT_PAGE_SIZE = 10
const DEFAULT_LOCALE: DashboardLocale = 'fa'
function normalizeDefaultLocale(value: unknown): DashboardLocale {
return value === 'en' || value === 'fa' ? value : DEFAULT_LOCALE
}
function formatDate(value: string) {
const d = new Date(value)
@@ -190,6 +198,7 @@ export function BusinessesPage() {
const [editPrimaryColor, setEditPrimaryColor] = useState<BusinessPrimaryColorId>(
DEFAULT_BUSINESS_PRIMARY_COLOR_ID,
)
const [editDefaultLocale, setEditDefaultLocale] = useState<DashboardLocale>(DEFAULT_LOCALE)
const [editLoadingSettings, setEditLoadingSettings] = useState(false)
const [editSubmitting, setEditSubmitting] = useState(false)
const [editError, setEditError] = useState('')
@@ -216,6 +225,7 @@ export function BusinessesPage() {
const [removeTarget, setRemoveTarget] = useState<BusinessListItem | null>(null)
const [togglingId, setTogglingId] = useState<string | null>(null)
const [savingColorId, setSavingColorId] = useState<string | null>(null)
const [savingLocaleId, setSavingLocaleId] = useState<string | null>(null)
const [migrateOpen, setMigrateOpen] = useState(false)
const [migrateBusiness, setMigrateBusiness] = useState<BusinessListItem | null>(null)
@@ -327,6 +337,7 @@ export function BusinessesPage() {
setEditBusiness(b)
setEditName(b.name)
setEditPrimaryColor(normalizeBusinessPrimaryColorId(b.primaryColor))
setEditDefaultLocale(normalizeDefaultLocale(b.defaultLocale))
setEditError('')
setEditOpen(true)
setEditLoadingSettings(true)
@@ -335,6 +346,7 @@ export function BusinessesPage() {
void getBusinessSettings(b.id, controller.signal)
.then((data) => {
setEditPrimaryColor(data.settings.branding.primaryColor)
setEditDefaultLocale(normalizeDefaultLocale(data.settings.branding.defaultLocale))
})
.catch((err) => {
if (isAbortError(err)) return
@@ -405,20 +417,76 @@ export function BusinessesPage() {
}
}
async function handleDefaultLocaleChange(b: BusinessListItem, defaultLocale: DashboardLocale) {
const currentLocale = normalizeDefaultLocale(b.defaultLocale)
if (currentLocale === defaultLocale) return
setSavingLocaleId(b.id)
setError('')
setData((prev) => {
if (!prev) return prev
return {
...prev,
items: prev.items.map((item) =>
item.id === b.id ? { ...item, defaultLocale } : item,
),
}
})
if (editBusiness?.id === b.id) {
setEditDefaultLocale(defaultLocale)
}
try {
await updateBusinessDefaultLocale(b.id, defaultLocale)
showToast(`Default language updated for "${b.name}".`, 'success')
} catch (err) {
setData((prev) => {
if (!prev) return prev
return {
...prev,
items: prev.items.map((item) =>
item.id === b.id ? { ...item, defaultLocale: currentLocale } : item,
),
}
})
if (editBusiness?.id === b.id) {
setEditDefaultLocale(currentLocale)
}
showToast(
err instanceof ApiError ? err.message : 'Unable to update default language.',
'error',
)
} finally {
setSavingLocaleId(null)
}
}
async function submitEdit() {
if (!editBusiness) return
setEditSubmitting(true)
setEditError('')
try {
await updateBusiness(editBusiness.id, { name: editName })
await updateBusinessPrimaryColor(editBusiness.id, editPrimaryColor)
await updateBusinessBranding(editBusiness.id, {
primaryColor: editPrimaryColor,
defaultLocale: editDefaultLocale,
})
setData((prev) => {
if (!prev) return prev
return {
...prev,
items: prev.items.map((item) =>
item.id === editBusiness.id
? { ...item, name: editName.trim(), primaryColor: editPrimaryColor }
? {
...item,
name: editName.trim(),
primaryColor: editPrimaryColor,
defaultLocale: editDefaultLocale,
}
: item,
),
}
@@ -828,13 +896,14 @@ export function BusinessesPage() {
<th className={styles.th}>Domain</th>
<th className={styles.th}>Owner</th>
<th className={`${styles.th} ${styles.thTheme}`}>Theme</th>
<th className={`${styles.th} ${styles.thLocale}`}>Lang</th>
<th className={`${styles.th} ${styles.thActions}`}>Actions</th>
</tr>
</thead>
<tbody>
{loading && (
<tr>
<td className={styles.td} colSpan={6}>
<td className={styles.td} colSpan={7}>
Loading...
</td>
</tr>
@@ -842,7 +911,7 @@ export function BusinessesPage() {
{!loading && data?.items?.length === 0 && (
<tr>
<td className={styles.td} colSpan={6}>
<td className={styles.td} colSpan={7}>
No results found.
</td>
</tr>
@@ -900,6 +969,23 @@ export function BusinessesPage() {
}
/>
</td>
<td className={`${styles.td} ${styles.tdLocale}`}>
<select
className={styles.localeSelect}
value={normalizeDefaultLocale(b.defaultLocale)}
disabled={savingLocaleId === b.id}
aria-label={`Default language for ${b.name}`}
onChange={(e) =>
void handleDefaultLocaleChange(
b,
normalizeDefaultLocale(e.target.value),
)
}
>
<option value="fa">FA</option>
<option value="en">EN</option>
</select>
</td>
<td className={`${styles.td} ${styles.tdActions}`}>
<div className={styles.rowActions}>
<span className={styles.toggleInActions}>
@@ -1058,6 +1144,26 @@ export function BusinessesPage() {
/>
)}
</div>
<div className={styles.field}>
<label htmlFor="edit-default-locale">Default dashboard language</label>
{editLoadingSettings ? (
<p className={styles.helperText}>Loading language...</p>
) : (
<select
id="edit-default-locale"
className={styles.localeSelect}
value={editDefaultLocale}
disabled={editSubmitting}
onChange={(e) => setEditDefaultLocale(normalizeDefaultLocale(e.target.value))}
>
<option value="fa">Farsi (FA)</option>
<option value="en">English (EN)</option>
</select>
)}
<p className={styles.helperText}>
Business and customer dashboards open in this language.
</p>
</div>
<div style={{ height: 12 }} />
<div className={styles.actionsRow}>
<button
apps/super-admin/src/pages/ProfilePage.tsx
+32 -2
View File
@@ -13,6 +13,8 @@ function buildFormData(user: ReturnType<typeof useAuth>['user']): ProfileFormDat
return {
firstName: user?.firstName ?? '',
lastName: user?.lastName ?? '',
firstNameEn: user?.firstNameEn ?? '',
lastNameEn: user?.lastNameEn ?? '',
cellNumber: user ? formatCellForDisplay(user.cellNumber) : '',
email: user?.email ?? '',
about: user?.profile?.about ?? emptyProfile.about,
@@ -85,23 +87,51 @@ export function ProfilePage() {
<h3 className={styles.sectionTitle}>General</h3>
<div className={styles.grid}>
<div className={`${styles.field} ${styles.col3}`}>
<label htmlFor="firstName">Name</label>
<label htmlFor="firstName">First name (FA)</label>
<input
id="firstName"
type="text"
value={form.firstName}
onChange={(e) => updateField('firstName', e.target.value)}
placeholder="First name"
dir="rtl"
lang="fa"
/>
</div>
<div className={`${styles.field} ${styles.col3}`}>
<label htmlFor="lastName">Last name</label>
<label htmlFor="lastName">Last name (FA)</label>
<input
id="lastName"
type="text"
value={form.lastName}
onChange={(e) => updateField('lastName', e.target.value)}
placeholder="Last name"
dir="rtl"
lang="fa"
/>
</div>
<div className={`${styles.field} ${styles.col3}`}>
<label htmlFor="firstNameEn">First name (EN)</label>
<input
id="firstNameEn"
type="text"
value={form.firstNameEn}
onChange={(e) => updateField('firstNameEn', e.target.value)}
placeholder="First name"
dir="ltr"
lang="en"
/>
</div>
<div className={`${styles.field} ${styles.col3}`}>
<label htmlFor="lastNameEn">Last name (EN)</label>
<input
id="lastNameEn"
type="text"
value={form.lastNameEn}
onChange={(e) => updateField('lastNameEn', e.target.value)}
placeholder="Last name"
dir="ltr"
lang="en"
/>
</div>
<div className={`${styles.field} ${styles.col3}`}>
apps/super-admin/src/services/businessSettingsService.ts
+27
View File
@@ -1,8 +1,11 @@
import { apiRequest } from '../lib/api'
import type { BusinessPrimaryColorId } from '../utils/businessPrimaryColors'
export type DashboardLocale = 'en' | 'fa'
export interface BrandingSettings {
primaryColor: BusinessPrimaryColorId
defaultLocale: DashboardLocale
}
export interface BusinessSettings {
@@ -41,3 +44,27 @@ export async function updateBusinessPrimaryColor(
},
})
}
export async function updateBusinessDefaultLocale(
businessId: string,
defaultLocale: DashboardLocale,
) {
return apiRequest<BusinessSettingsResponse>(`/businesses/${businessId}/settings`, {
method: 'PATCH',
auth: true,
body: {
branding: { defaultLocale },
},
})
}
export async function updateBusinessBranding(
businessId: string,
branding: Partial<BrandingSettings>,
) {
return apiRequest<BusinessSettingsResponse>(`/businesses/${businessId}/settings`, {
method: 'PATCH',
auth: true,
body: { branding },
})
}
apps/super-admin/src/services/profileService.ts
+2
View File
@@ -9,6 +9,8 @@ export async function updateProfile(data: ProfileFormData) {
body: {
firstName: data.firstName,
lastName: data.lastName,
firstNameEn: data.firstNameEn,
lastNameEn: data.lastNameEn,
email: data.email || null,
about: data.about,
city: data.city,
apps/super-admin/src/types/auth.ts
+2
View File
@@ -17,6 +17,8 @@ export interface AuthUser {
email: string | null
firstName: string | null
lastName: string | null
firstNameEn: string | null
lastNameEn: string | null
cellVerifiedAt: string | null
roles: string[]
dashboard: DashboardType
apps/super-admin/src/types/business.ts
+2
View File
@@ -1,4 +1,5 @@
import type { BusinessPrimaryColorId } from '../utils/businessPrimaryColors'
import type { DashboardLocale } from '../services/businessSettingsService'
export interface BusinessOwnerInfo {
name: string | null
@@ -21,6 +22,7 @@ export interface BusinessListItem {
ownerCellNumber: string | null
isActive: boolean
primaryColor: BusinessPrimaryColorId
defaultLocale: DashboardLocale
oldBusinessId: string | null
}
apps/super-admin/src/types/profile.ts
+2
View File
@@ -12,6 +12,8 @@ export interface UserProfile {
export interface ProfileFormData {
firstName: string
lastName: string
firstNameEn: string
lastNameEn: string
cellNumber: string
email: string
about: string
apps/super-admin/src/utils/applyBusinessTheme.ts
+42
View File
@@ -0,0 +1,42 @@
import {
DEFAULT_BUSINESS_PRIMARY_COLOR_ID,
getBusinessPrimaryColorTokens,
type BusinessPrimaryColorId,
} from './businessPrimaryColors'
const CSS_VAR_DEFAULTS: Record<string, string> = {
'--primary': '#3b82f6',
'--primary-glow': '#3b82f6',
'--primary-light': '#dbeafe',
'--primary-dark': '#2563eb',
'--primary-rgb': '59 130 246',
'--primary-dark-rgb': '37 99 235',
'--chart-accent': '#06b6d4',
'--chart-accent-dark': '#0891b2',
'--chart-accent-rgb': '6 182 212',
'--chart-accent-dark-rgb': '8 145 178',
}
export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | null) {
const root = document.documentElement
const tokens = getBusinessPrimaryColorTokens(colorId ?? DEFAULT_BUSINESS_PRIMARY_COLOR_ID)
root.style.setProperty('--primary', tokens.primary)
root.style.setProperty('--primary-glow', tokens.primaryGlow)
root.style.setProperty('--primary-light', tokens.primaryLight)
root.style.setProperty('--primary-dark', tokens.primaryDark)
root.style.setProperty('--primary-rgb', tokens.primaryRgb)
root.style.setProperty('--primary-dark-rgb', tokens.primaryDarkRgb)
root.style.setProperty('--chart-accent', tokens.chartAccent)
root.style.setProperty('--chart-accent-dark', tokens.chartAccentDark)
root.style.setProperty('--chart-accent-rgb', tokens.chartAccentRgb)
root.style.setProperty('--chart-accent-dark-rgb', tokens.chartAccentDarkRgb)
}
export function resetBusinessPrimaryColor() {
const root = document.documentElement
for (const [name, value] of Object.entries(CSS_VAR_DEFAULTS)) {
root.style.setProperty(name, value)
}
}
apps/super-admin/src/utils/businessPrimaryColors.ts
+42
View File
@@ -19,8 +19,28 @@ export type BusinessPrimaryColorTokens = {
primaryLight: string
primaryGlow: string
primaryRgb: string
primaryDarkRgb: string
/** Second chart series color (red→purple, blue→cyan, …). */
chartAccent: string
chartAccentDark: string
chartAccentRgb: string
chartAccentDarkRgb: string
}
const PURPLE_ACCENT = {
chartAccent: '#a855f7',
chartAccentDark: '#9333ea',
chartAccentRgb: '168 85 247',
chartAccentDarkRgb: '147 51 234',
} as const
const CYAN_ACCENT = {
chartAccent: '#06b6d4',
chartAccentDark: '#0891b2',
chartAccentRgb: '6 182 212',
chartAccentDarkRgb: '8 145 178',
} as const
export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
BusinessPrimaryColorId,
BusinessPrimaryColorTokens
@@ -32,6 +52,8 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryLight: '#fee2e2',
primaryGlow: '#ef4444',
primaryRgb: '239 68 68',
primaryDarkRgb: '220 38 38',
...PURPLE_ACCENT,
},
yellow: {
label: 'Yellow',
@@ -40,6 +62,8 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryLight: '#fef9c3',
primaryGlow: '#eab308',
primaryRgb: '234 179 8',
primaryDarkRgb: '202 138 4',
...PURPLE_ACCENT,
},
black: {
label: 'Black',
@@ -48,6 +72,8 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryLight: '#e2e8f0',
primaryGlow: '#334155',
primaryRgb: '30 41 59',
primaryDarkRgb: '15 23 42',
...CYAN_ACCENT,
},
cyan: {
label: 'Cyan',
@@ -56,6 +82,8 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryLight: '#cffafe',
primaryGlow: '#06b6d4',
primaryRgb: '6 182 212',
primaryDarkRgb: '8 145 178',
...PURPLE_ACCENT,
},
purple: {
label: 'Purple',
@@ -64,6 +92,8 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryLight: '#f3e8ff',
primaryGlow: '#a855f7',
primaryRgb: '168 85 247',
primaryDarkRgb: '147 51 234',
...CYAN_ACCENT,
},
'light-blue': {
label: 'Light Blue',
@@ -72,6 +102,8 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryLight: '#e0f2fe',
primaryGlow: '#38bdf8',
primaryRgb: '56 189 248',
primaryDarkRgb: '14 165 233',
...CYAN_ACCENT,
},
'dark-blue': {
label: 'Dark Blue',
@@ -80,6 +112,8 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryLight: '#dbeafe',
primaryGlow: '#3b82f6',
primaryRgb: '59 130 246',
primaryDarkRgb: '37 99 235',
...CYAN_ACCENT,
},
}
@@ -93,3 +127,11 @@ export function normalizeBusinessPrimaryColorId(value: unknown): BusinessPrimary
return DEFAULT_BUSINESS_PRIMARY_COLOR_ID
}
export function getBusinessPrimaryColorTokens(
colorId: BusinessPrimaryColorId | undefined | null,
): BusinessPrimaryColorTokens {
return BUSINESS_PRIMARY_COLOR_PALETTE[
normalizeBusinessPrimaryColorId(colorId ?? DEFAULT_BUSINESS_PRIMARY_COLOR_ID)
]
}
docs/PROJECT_CONTEXT.md
+39 -2
View File
@@ -3,7 +3,7 @@
> **For AI agents:** Read this file at the start of a new chat before making changes.
> Update this document when a major feature is completed or architecture changes.
Last updated: July 26, 2026
Last updated: August 1, 2026
---
@@ -496,11 +496,48 @@ SSL: Certbot cert `meshkee-dashboards` + cron `ssl-sync.sh` every 2h (option A:
---
## Locale (FA / EN)
Dashboards support **Farsi + English** via shared `LocaleProvider` (`@meshkee/dashboard-ui`) and `LanguageSelect` in headers.
| Piece | Where |
|-------|--------|
| Locale state | `packages/dashboard-ui` → `LocaleContext` |
| Default language per business | `settings.branding.defaultLocale`: `'fa' \| 'en'` (default **`fa`**) |
| Applied on open | Business + customer `TenantBrandingProvider` once from tenant branding |
| Super-admin edit | Businesses list **Lang** column + edit modal |
| Business UI copy | `apps/business/src/i18n/messages.ts` + `useT()` |
| Customer UI copy | `apps/customer/src/i18n/` (parallel pattern) |
| Document titles | Locale-aware via `routeTitles` + `useDashboardDocumentTitle` |
| Fonts | `--font-ui: var(--font-en), var(--font-fa)` — see `.cursor/rules/ui-farsi-fonts.mdc` |
RTL: `dir="rtl"` when locale is `fa`.
---
## Business home dashboard
Home is **not** a 1:1 mirror of the sidebar. Tiles are curated (no Settings tile).
| Feature | Detail |
|---------|--------|
| Section cards | Count pill + arrow (settings/website have arrow only); hover fills primary |
| Counts | Existing list `total` with `pageSize=1` — light, not a new stats join |
| Charts (6/12 each) | Orders (+ add-to-basket) and Customers (+ active logins), last 30 days |
| Chart API | `GET .../orders/activity?days=30`, `GET .../customers/activity?days=30` |
| Chart colors | Primary series = theme primary; accent = purple for red theme, cyan for blue themes (`--chart-accent` from `businessPrimaryColors`) |
| Page aura | Slow-moving radial blobs on `body::before` (tokens + business `index.css`) |
Products overview page uses the same i18n + theme-aware `ProductActivityChart` (added vs updated, 12 months).
---
## Suggested next work
- Point `meshkee.com/invoices/*` at the public invoice viewer (proxy or dedicated host)
- Business-dashboard invoice templates + issue flow (`owner_scope=business`)
- Migrate business and super-admin to `@meshkee/dashboard-core` / `@meshkee/dashboard-ui`
- Migrate business and super-admin fully onto `@meshkee/dashboard-core` / `@meshkee/dashboard-ui` (LocaleProvider already shared)
- Finish FA/EN coverage on remaining business form pages (many labels still English)
- Connect product comments to backend
- Wire order status transitions to store `orderProcessSteps`
- Enforce `onlineSellEnabled` on public website checkout

Some files were not shown because too many files have changed in this diff Show More