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 customer and business user-product flows across dashboards.

Browse Source 
Ship my-products / customer-products UI with gallery uploads, status controls, module gating, and related shared UI polish.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-10 00:23:03 +03:30
co-authored by Cursor
parent c5bdaad16b
commit 1271d96539
96 changed files with 10532 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/business/src/App.tsx
+7
View File
@@ -23,6 +23,9 @@ import { StorePage } from './pages/StorePage'
import { StoreItemsPage } from './pages/StoreItemsPage'
import { StoreSpecialsPage } from './pages/StoreSpecialsPage'
import { CustomersPage } from './pages/CustomersPage'
import { CustomerProductsPage } from './pages/CustomerProductsPage'
import { CustomerProductDetailsPage } from './pages/CustomerProductDetailsPage'
import { AddCustomerProductPage } from './pages/AddCustomerProductPage'
import { OrdersPage } from './pages/OrdersPage'
import { LoginPage } from './pages/LoginPage'
import { ShoppingCardsPage } from './pages/ShoppingCardsPage'
@@ -83,6 +86,10 @@ function App() {
<Route path="store/cards" element={<ShoppingCardsPage />} />
<Route path="store/settings" element={<StoreSettingsPage />} />
<Route path="customers" element={<CustomersPage />} />
<Route path="customer-products" element={<CustomerProductsPage />} />
<Route path="customer-products/new" element={<AddCustomerProductPage />} />
<Route path="customer-products/:id/edit" element={<AddCustomerProductPage />} />
<Route path="customer-products/:id" element={<CustomerProductDetailsPage />} />
<Route path="blog" element={<BlogPage />} />
<Route path="blog/list" element={<BlogListPage />} />
<Route path="blog/detail/:id" element={<BlogDetailsPage />} />
apps/business/src/components/BlogCard.module.css
+3 -4
View File
@@ -32,21 +32,20 @@
.imageWrap {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
background: rgba(148, 163, 184, 0.08);
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
height: auto;
}
.imagePlaceholder {
width: 100%;
height: 100%;
aspect-ratio: 3 / 2;
background: linear-gradient(
135deg,
rgba(148, 163, 184, 0.12) 0%,
apps/business/src/components/CategoryAiPromptModal.tsx
+35 -27
View File
@@ -1,15 +1,28 @@
import { useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
import { Sparkles, X } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { ApiError } from '../lib/api'
import { useT } from '../i18n/useT'
import modalStyles from './CategoryModal.module.css'
import aiStyles from '../styles/ai.module.css'
import styles from './CategoryAiPromptModal.module.css'
export const DEFAULT_CATEGORY_AI_PROMPT = `Create a practical product category tree for my store.
export function buildCategoryAiPrompt(locale: 'fa' | 'en') {
if (locale === 'fa') {
return `یک درخت دسته‌بندی محصول کاربردی برای فروشگاه من بساز.
نام انگلیسی، نام فارسی با خط پارسی، و توضیح کوتاه انگلیسی را برای هر دسته اضافه کن.
۳ تا ۵ دسته اصلی با زیردسته‌های مرتبط بساز تا مرور برای خریداران راحت‌تر شود.`
}
return `Create a practical product category tree for my store.
Include English names, Farsi names in Persian script, and short English descriptions.
Use 3-5 main categories with relevant subcategories where it helps shoppers browse.`
}
export const DEFAULT_CATEGORY_AI_PROMPT = buildCategoryAiPrompt('en')
interface CategoryAiPromptModalProps {
open: boolean
@@ -26,16 +39,19 @@ export function CategoryAiPromptModal({
onRun,
isRunning,
}: CategoryAiPromptModalProps) {
const t = useT()
const { locale } = useLocale()
const isFa = locale === 'fa'
const [mounted, setMounted] = useState(open)
const [closing, setClosing] = useState(false)
const [prompt, setPrompt] = useState(DEFAULT_CATEGORY_AI_PROMPT)
const [prompt, setPrompt] = useState(() => buildCategoryAiPrompt(isFa ? 'fa' : 'en'))
const [error, setError] = useState('')
useEffect(() => {
if (open) {
setMounted(true)
setClosing(false)
setPrompt(DEFAULT_CATEGORY_AI_PROMPT)
setPrompt(buildCategoryAiPrompt(isFa ? 'fa' : 'en'))
setError('')
} else if (mounted) {
setClosing(true)
@@ -45,7 +61,7 @@ export function CategoryAiPromptModal({
}, ANIMATION_MS)
return () => clearTimeout(timer)
}
}, [open, mounted])
}, [open, mounted, isFa])
useEffect(() => {
if (!mounted || closing) return
@@ -60,7 +76,7 @@ export function CategoryAiPromptModal({
e.preventDefault()
const trimmed = prompt.trim()
if (trimmed.length < 10) {
setError('Prompt must be at least 10 characters.')
setError(t('products.form.aiPromptTooShort'))
return
}
@@ -73,7 +89,7 @@ export function CategoryAiPromptModal({
} else if (err instanceof Error) {
setError(err.message)
} else {
setError('Unable to generate categories with AI.')
setError(t('categories.ai.error'))
}
}
}
@@ -91,22 +107,22 @@ export function CategoryAiPromptModal({
role="dialog"
aria-modal="true"
aria-labelledby="category-ai-prompt-title"
lang={isFa ? 'fa' : 'en'}
dir={isFa ? 'rtl' : 'ltr'}
>
<div className={`${modalStyles.header} ${styles.header}`}>
<div className={styles.headerBlock}>
<h2 id="category-ai-prompt-title" className={modalStyles.title}>
Fill Categories with AI
{t('categories.ai.title')}
</h2>
<p className={styles.subtitle}>
Edit the prompt below, then run it to generate and save a category tree.
</p>
<p className={styles.subtitle}>{t('categories.ai.subtitle')}</p>
</div>
<button
type="button"
className={modalStyles.closeBtn}
onClick={onClose}
disabled={isRunning}
aria-label="Close"
aria-label={t('common.close')}
>
<X size={20} />
</button>
@@ -114,7 +130,7 @@ export function CategoryAiPromptModal({
<form className={modalStyles.form} onSubmit={(e) => void handleSubmit(e)}>
<div className={`${modalStyles.field} ${aiStyles.aiPromptField}`}>
<label htmlFor="category-ai-prompt">Prompt</label>
<label htmlFor="category-ai-prompt">{t('products.form.aiPrompt')}</label>
<textarea
id="category-ai-prompt"
className={aiStyles.aiPromptTextarea}
@@ -123,6 +139,8 @@ export function CategoryAiPromptModal({
rows={8}
disabled={isRunning}
required
lang={isFa ? 'fa' : 'en'}
dir={isFa ? 'rtl' : 'ltr'}
/>
</div>
@@ -135,30 +153,20 @@ export function CategoryAiPromptModal({
onClick={onClose}
disabled={isRunning}
>
Cancel
{t('categories.modal.cancel')}
</button>
<button
type="submit"
className={aiStyles.aiBtn}
disabled={isRunning || prompt.trim().length < 10}
>
{isRunning ? (
<>
<Sparkles size={16} />
Running...
</>
) : (
<>
<Sparkles size={16} />
Run
</>
)}
<Sparkles size={16} />
{isRunning ? t('products.form.aiGenerating') : t('products.form.aiRun')}
</button>
</div>
</form>
</div>
</div>
,
document.body,
</div>,
document.body,
)
}
apps/business/src/components/CategoryModal.module.css
+5
View File
@@ -11,6 +11,11 @@
padding: 20px;
}
/* Stack above VariationsModal / TechnicalFormModal (z-index 1000–1010) */
.overlayStacked {
z-index: 1200;
}
.modal {
width: 100%;
max-width: 480px;
apps/business/src/components/CategorySearchSelect.module.css
+159
View File
@@ -0,0 +1,159 @@
.wrapper {
position: relative;
}
.inputWrap {
display: flex;
align-items: center;
gap: 6px;
min-height: var(--field-height);
padding: 0 var(--field-padding-x);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
.inputWrapOpen,
.inputWrap:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
}
.inputWrapDisabled {
opacity: 0.55;
cursor: not-allowed;
}
.searchIcon {
flex-shrink: 0;
color: var(--text-muted);
}
.input {
flex: 1;
min-width: 0;
padding: var(--field-padding-y) 0;
font-size: var(--field-font-size);
font-family: var(--font-ui);
line-height: 1.4;
color: var(--text-primary);
background: transparent;
border: none;
outline: none;
}
.input::placeholder {
font-family: var(--font-ui);
color: var(--text-muted);
opacity: 1;
}
.input:disabled {
cursor: not-allowed;
}
.clearBtn {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
color: var(--text-muted);
transition: background 0.2s, color 0.2s;
}
.clearBtn:hover {
background: rgba(148, 163, 184, 0.2);
color: var(--text-secondary);
}
.chevron {
flex-shrink: 0;
color: var(--text-muted);
transition: transform 0.2s ease;
}
.chevronOpen {
transform: rotate(180deg);
}
.dropdown {
position: absolute;
top: calc(100% + 6px);
inset-inline: 0;
max-height: 260px;
overflow-y: auto;
background: var(--elevated-surface);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
box-shadow: var(--glass-shadow);
z-index: 30;
list-style: none;
padding: 6px;
margin: 0;
}
.option {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
width: 100%;
padding: 8px 10px;
font-size: var(--field-font-size);
font-family: var(--font-ui);
text-align: start;
color: var(--text-primary);
border-radius: 8px;
transition: background 0.15s;
box-sizing: border-box;
}
.optionChild {
border-inline-start: 2px solid rgba(var(--primary-rgb) / 0.35);
border-start-start-radius: 0;
border-end-start-radius: 0;
background: rgba(var(--primary-rgb) / 0.03);
padding-inline-start: 14px;
}
.option:hover {
background: rgba(var(--primary-rgb) / 0.08);
}
.optionChild:hover {
background: rgba(var(--primary-rgb) / 0.1);
}
.optionSelected {
background: rgba(var(--primary-rgb) / 0.12);
color: var(--primary);
font-weight: 500;
}
.optionChild.optionSelected {
border-inline-start-color: var(--primary);
background: rgba(var(--primary-rgb) / 0.14);
}
.optionLabel {
font-weight: 500;
}
.optionSecondary {
font-size: 12px;
font-weight: 400;
color: var(--text-muted);
}
.noResults {
padding: 12px;
font-size: 13px;
color: var(--text-muted);
text-align: center;
}
apps/business/src/components/CategorySearchSelect.tsx
+246
View File
@@ -0,0 +1,246 @@
import { useEffect, useMemo, useRef, useState } from 'react'
import { ChevronDown, Search, X } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import type { UserProductCategoryOption } from '../services/userProductsService'
import styles from './CategorySearchSelect.module.css'
export interface FlatCategoryOption extends UserProductCategoryOption {
depth: number
}
interface CategorySearchSelectProps {
options: UserProductCategoryOption[]
value: string
onChange: (value: string) => void
disabled?: boolean
placeholder?: string
id?: string
}
function categoryLabel(category: UserProductCategoryOption, isFa: boolean) {
if (isFa) {
return category.nameFa?.trim() || category.name
}
return category.name || category.nameFa?.trim() || ''
}
export function flattenCategoryTree(
categories: UserProductCategoryOption[],
): FlatCategoryOption[] {
const byParent = new Map<string | null, UserProductCategoryOption[]>()
for (const category of categories) {
const parentKey = category.parentId
const list = byParent.get(parentKey) ?? []
list.push(category)
byParent.set(parentKey, list)
}
for (const list of byParent.values()) {
list.sort((a, b) => {
const aLabel = (a.nameFa || a.name).localeCompare(b.nameFa || b.name, 'fa')
return aLabel
})
}
const result: FlatCategoryOption[] = []
const ids = new Set(categories.map((item) => item.id))
function walk(parentId: string | null, depth: number) {
const children = byParent.get(parentId) ?? []
for (const child of children) {
result.push({ ...child, depth })
walk(child.id, depth + 1)
}
}
walk(null, 0)
// Orphans whose parent is missing from the list
for (const category of categories) {
if (category.parentId && !ids.has(category.parentId)) {
if (!result.some((item) => item.id === category.id)) {
result.push({ ...category, depth: 0 })
walk(category.id, 1)
}
}
}
return result
}
function filterCategoryTree(
flat: FlatCategoryOption[],
query: string,
): FlatCategoryOption[] {
const q = query.trim().toLowerCase()
if (!q) return flat
const byId = new Map(flat.map((item) => [item.id, item]))
const matchedIds = new Set<string>()
for (const item of flat) {
const nameEn = item.name.toLowerCase()
const nameFa = (item.nameFa || '').toLowerCase()
if (nameEn.includes(q) || nameFa.includes(q) || (item.nameFa || '').includes(query.trim())) {
matchedIds.add(item.id)
let parentId = item.parentId
while (parentId) {
matchedIds.add(parentId)
parentId = byId.get(parentId)?.parentId ?? null
}
}
}
return flat.filter((item) => matchedIds.has(item.id))
}
export function CategorySearchSelect({
options,
value,
onChange,
disabled = false,
placeholder,
id,
}: CategorySearchSelectProps) {
const t = useT()
const { locale } = useLocale()
const isFa = locale === 'fa'
const [open, setOpen] = useState(false)
const [query, setQuery] = useState('')
const containerRef = useRef<HTMLDivElement>(null)
const flat = useMemo(() => flattenCategoryTree(options), [options])
const filtered = useMemo(() => filterCategoryTree(flat, query), [flat, query])
const selected = flat.find((option) => option.id === value)
const selectedLabel = selected ? categoryLabel(selected, isFa) : ''
const searchPlaceholder = placeholder ?? t('customerProducts.form.fields.searchCategory')
useEffect(() => {
if (!open) return
function onClickOutside(e: MouseEvent) {
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
setOpen(false)
setQuery('')
}
}
document.addEventListener('mousedown', onClickOutside)
return () => document.removeEventListener('mousedown', onClickOutside)
}, [open])
useEffect(() => {
if (disabled) {
setOpen(false)
setQuery('')
}
}, [disabled])
function selectOption(nextId: string) {
onChange(nextId)
setOpen(false)
setQuery('')
}
return (
<div
className={styles.wrapper}
ref={containerRef}
dir={isFa ? 'rtl' : 'ltr'}
>
<div
className={[
styles.inputWrap,
open ? styles.inputWrapOpen : '',
disabled ? styles.inputWrapDisabled : '',
]
.filter(Boolean)
.join(' ')}
>
<Search size={16} className={styles.searchIcon} aria-hidden />
<input
id={id}
type="text"
className={styles.input}
disabled={disabled}
placeholder={selected ? selectedLabel : searchPlaceholder}
value={open ? query : selectedLabel}
onChange={(e) => {
setQuery(e.target.value)
if (!open) setOpen(true)
}}
onFocus={() => {
if (!disabled) setOpen(true)
}}
autoComplete="off"
role="combobox"
aria-expanded={open}
aria-autocomplete="list"
/>
{value && !open && !disabled ? (
<button
type="button"
className={styles.clearBtn}
onClick={() => onChange('')}
aria-label={t('customerProducts.form.fields.clearCategory')}
>
<X size={14} />
</button>
) : null}
<ChevronDown
size={16}
className={`${styles.chevron} ${open ? styles.chevronOpen : ''}`}
aria-hidden
/>
</div>
{open && !disabled ? (
<ul className={styles.dropdown} role="listbox">
{filtered.length === 0 ? (
<li className={styles.noResults}>{t('customerProducts.form.fields.noCategories')}</li>
) : (
filtered.map((option) => (
<li key={option.id}>
<button
type="button"
className={[
styles.option,
option.depth > 0 ? styles.optionChild : '',
value === option.id ? styles.optionSelected : '',
]
.filter(Boolean)
.join(' ')}
style={
option.depth > 0
? {
marginInlineStart: `${option.depth * 22}px`,
}
: undefined
}
onClick={() => selectOption(option.id)}
role="option"
aria-selected={value === option.id}
>
<span className={styles.optionLabel}>
{categoryLabel(option, isFa)}
</span>
{!isFa && option.nameFa ? (
<span className={styles.optionSecondary}>{option.nameFa}</span>
) : null}
{isFa && option.name && option.name !== option.nameFa ? (
<span className={styles.optionSecondary} dir="ltr">
{option.name}
</span>
) : null}
</button>
</li>
))
)}
</ul>
) : null}
</div>
)
}
apps/business/src/components/CitySearchSelect.module.css
+129
View File
@@ -0,0 +1,129 @@
.wrapper {
position: relative;
}
.inputWrap {
display: flex;
align-items: center;
gap: 6px;
min-height: var(--field-height);
padding: 0 var(--field-padding-x);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
.inputWrapOpen,
.inputWrap:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
}
.inputWrapDisabled {
opacity: 0.55;
cursor: not-allowed;
}
.searchIcon {
flex-shrink: 0;
color: var(--text-muted);
}
.input {
flex: 1;
min-width: 0;
padding: var(--field-padding-y) 0;
font-size: var(--field-font-size);
font-family: var(--font-ui);
line-height: 1.4;
color: var(--text-primary);
background: transparent;
border: none;
outline: none;
}
.input::placeholder {
font-family: var(--font-ui);
color: var(--text-muted);
opacity: 1;
}
.input:disabled {
cursor: not-allowed;
}
.clearBtn {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
color: var(--text-muted);
transition: background 0.2s, color 0.2s;
}
.clearBtn:hover {
background: rgba(148, 163, 184, 0.2);
color: var(--text-secondary);
}
.chevron {
flex-shrink: 0;
color: var(--text-muted);
transition: transform 0.2s ease;
}
.chevronOpen {
transform: rotate(180deg);
}
.dropdown {
position: absolute;
top: calc(100% + 6px);
inset-inline: 0;
max-height: 220px;
overflow-y: auto;
background: var(--elevated-surface);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
box-shadow: var(--glass-shadow);
z-index: 20;
list-style: none;
padding: 6px;
margin: 0;
}
.option {
display: flex;
align-items: center;
width: 100%;
padding: 7px 10px;
font-size: var(--field-font-size);
font-family: var(--font-ui);
text-align: start;
color: var(--text-primary);
border-radius: 8px;
transition: background 0.15s;
}
.option:hover {
background: rgba(var(--primary-rgb) / 0.08);
}
.optionSelected {
background: rgba(var(--primary-rgb) / 0.12);
color: var(--primary);
font-weight: 500;
}
.noResults {
padding: 12px;
font-size: 13px;
color: var(--text-muted);
text-align: center;
}
apps/business/src/components/CitySearchSelect.tsx
+146
View File
@@ -0,0 +1,146 @@
import { useEffect, useRef, useState } from 'react'
import { ChevronDown, Search, X } from 'lucide-react'
import {
getLocationOptionLabel,
useLocale,
type CityOption,
} from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import styles from './CitySearchSelect.module.css'
interface CitySearchSelectProps {
options: CityOption[]
value: string
onChange: (value: string) => void
disabled?: boolean
placeholder?: string
id?: string
}
export function CitySearchSelect({
options,
value,
onChange,
disabled = false,
placeholder,
id,
}: CitySearchSelectProps) {
const t = useT()
const { locale } = useLocale()
const [open, setOpen] = useState(false)
const [query, setQuery] = useState('')
const containerRef = useRef<HTMLDivElement>(null)
const selected = options.find((option) => option.id === value)
const selectedLabel = selected ? getLocationOptionLabel(selected, locale) : ''
const searchPlaceholder = placeholder ?? t('customerProducts.form.fields.searchCity')
const filtered = options.filter((option) => {
const q = query.trim().toLowerCase()
if (!q) return true
return (
option.nameEn.toLowerCase().includes(q) ||
option.nameFa.includes(query.trim()) ||
option.slug.toLowerCase().includes(q)
)
})
useEffect(() => {
if (!open) return
function onClickOutside(e: MouseEvent) {
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
setOpen(false)
setQuery('')
}
}
document.addEventListener('mousedown', onClickOutside)
return () => document.removeEventListener('mousedown', onClickOutside)
}, [open])
useEffect(() => {
if (disabled) {
setOpen(false)
setQuery('')
}
}, [disabled])
function selectOption(nextId: string) {
onChange(nextId)
setOpen(false)
setQuery('')
}
return (
<div className={styles.wrapper} ref={containerRef}>
<div
className={[
styles.inputWrap,
open ? styles.inputWrapOpen : '',
disabled ? styles.inputWrapDisabled : '',
]
.filter(Boolean)
.join(' ')}
>
<Search size={16} className={styles.searchIcon} aria-hidden />
<input
id={id}
type="text"
className={styles.input}
disabled={disabled}
placeholder={selected ? selectedLabel : searchPlaceholder}
value={open ? query : selectedLabel}
onChange={(e) => {
setQuery(e.target.value)
if (!open) setOpen(true)
}}
onFocus={() => {
if (!disabled) setOpen(true)
}}
autoComplete="off"
role="combobox"
aria-expanded={open}
aria-autocomplete="list"
/>
{value && !open && !disabled ? (
<button
type="button"
className={styles.clearBtn}
onClick={() => onChange('')}
aria-label={t('customerProducts.form.fields.clearCity')}
>
<X size={14} />
</button>
) : null}
<ChevronDown
size={16}
className={`${styles.chevron} ${open ? styles.chevronOpen : ''}`}
aria-hidden
/>
</div>
{open && !disabled ? (
<ul className={styles.dropdown} role="listbox">
{filtered.length === 0 ? (
<li className={styles.noResults}>{t('customerProducts.form.fields.noCities')}</li>
) : (
filtered.map((option) => (
<li key={option.id}>
<button
type="button"
className={`${styles.option} ${value === option.id ? styles.optionSelected : ''}`}
onClick={() => selectOption(option.id)}
role="option"
aria-selected={value === option.id}
>
{getLocationOptionLabel(option, locale)}
</button>
</li>
))
)}
</ul>
) : null}
</div>
)
}
apps/business/src/components/Sidebar.tsx
+9
View File
@@ -14,6 +14,7 @@ import {
ChevronDown,
Building2,
Pencil,
Package,
} from 'lucide-react'
import type { LucideIcon } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
@@ -129,6 +130,14 @@ export function Sidebar() {
],
},
{ type: 'link', id: 'customers', icon: Users, labelKey: 'nav.customers', to: '/customers' },
{
type: 'link',
id: 'customer-products',
icon: Package,
labelKey: 'nav.customerProducts',
to: '/customer-products',
moduleId: 'customer_products',
},
{
type: 'group',
id: 'blog',
apps/business/src/components/TechnicalFormAiPromptModal.tsx
+42 -19
View File
@@ -1,11 +1,28 @@
import { useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
import { Sparkles, X } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import modalStyles from './CategoryModal.module.css'
import aiStyles from '../styles/ai.module.css'
import styles from './CategoryAiPromptModal.module.css'
export function buildTechnicalFormAiPrompt(categoryName: string) {
export function buildTechnicalFormAiPrompt(
categoryName: string,
locale: 'fa' | 'en' = 'en',
) {
if (locale === 'fa') {
return `برای دسته‌بندی محصول «${categoryName}» فیلدهای فرم اطلاعات فنی پیشنهاد بده.
برای هر فیلد این موارد را مشخص کن:
- برچسب کوتاه انگلیسی (مثلاً Screen Size، Material، Color)
- نوع ورودی: text، textarea، select یا multi_select
- الزامی بودن یا نبودن
- برای select / multi_select: فهرست گزینه‌ها
روی مشخصات و ویژگی‌هایی تمرکز کن که خریداران معمولاً هنگام مقایسه این نوع محصول بررسی می‌کنند.`
}
return `Suggest technical data form fields for the "${categoryName}" product category.
For each field include:
@@ -34,16 +51,21 @@ export function TechnicalFormAiPromptModal({
onRun,
isRunning,
}: TechnicalFormAiPromptModalProps) {
const t = useT()
const { locale } = useLocale()
const isFa = locale === 'fa'
const [mounted, setMounted] = useState(open)
const [closing, setClosing] = useState(false)
const [prompt, setPrompt] = useState(() => buildTechnicalFormAiPrompt(categoryName))
const [prompt, setPrompt] = useState(() =>
buildTechnicalFormAiPrompt(categoryName, isFa ? 'fa' : 'en'),
)
const [error, setError] = useState('')
useEffect(() => {
if (open) {
setMounted(true)
setClosing(false)
setPrompt(buildTechnicalFormAiPrompt(categoryName))
setPrompt(buildTechnicalFormAiPrompt(categoryName, isFa ? 'fa' : 'en'))
setError('')
} else if (mounted) {
setClosing(true)
@@ -53,7 +75,7 @@ export function TechnicalFormAiPromptModal({
}, ANIMATION_MS)
return () => clearTimeout(timer)
}
}, [open, mounted, categoryName])
}, [open, mounted, categoryName, isFa])
useEffect(() => {
if (!mounted || closing) return
@@ -68,7 +90,7 @@ export function TechnicalFormAiPromptModal({
e.preventDefault()
const trimmed = prompt.trim()
if (trimmed.length < 10) {
setError('Prompt must be at least 10 characters.')
setError(t('products.form.aiPromptTooShort'))
return
}
setError('')
@@ -78,7 +100,7 @@ export function TechnicalFormAiPromptModal({
if (err instanceof Error) {
setError(err.message)
} else {
setError('Unable to generate technical form with AI.')
setError(t('categories.technical.ai.error'))
}
}
}
@@ -87,7 +109,7 @@ export function TechnicalFormAiPromptModal({
return createPortal(
<div
className={`${modalStyles.overlay} ${closing ? modalStyles.overlayOut : modalStyles.overlayIn}`}
className={`${modalStyles.overlay} ${modalStyles.overlayStacked} ${closing ? modalStyles.overlayOut : modalStyles.overlayIn}`}
onClick={(e) => e.target === e.currentTarget && !isRunning && onClose()}
role="presentation"
>
@@ -96,22 +118,22 @@ export function TechnicalFormAiPromptModal({
role="dialog"
aria-modal="true"
aria-labelledby="tech-form-ai-prompt-title"
lang={isFa ? 'fa' : 'en'}
dir={isFa ? 'rtl' : 'ltr'}
>
<div className={`${modalStyles.header} ${styles.header}`}>
<div className={styles.headerBlock}>
<h2 id="tech-form-ai-prompt-title" className={modalStyles.title}>
Generate Technical Form with AI
{t('categories.technical.ai.title')}
</h2>
<p className={styles.subtitle}>
Edit the prompt below, then run it to fill the form fields.
</p>
<p className={styles.subtitle}>{t('categories.technical.ai.subtitle')}</p>
</div>
<button
type="button"
className={modalStyles.closeBtn}
onClick={onClose}
disabled={isRunning}
aria-label="Close"
aria-label={t('common.close')}
>
<X size={20} />
</button>
@@ -119,7 +141,7 @@ export function TechnicalFormAiPromptModal({
<form className={modalStyles.form} onSubmit={(e) => void handleSubmit(e)}>
<div className={`${modalStyles.field} ${aiStyles.aiPromptField}`}>
<label htmlFor="tech-form-ai-prompt">Prompt</label>
<label htmlFor="tech-form-ai-prompt">{t('products.form.aiPrompt')}</label>
<textarea
id="tech-form-ai-prompt"
className={aiStyles.aiPromptTextarea}
@@ -128,10 +150,12 @@ export function TechnicalFormAiPromptModal({
rows={8}
disabled={isRunning}
required
lang={isFa ? 'fa' : 'en'}
dir={isFa ? 'rtl' : 'ltr'}
/>
</div>
{error && <p className={styles.error}>{error}</p>}
{error ? <p className={styles.error}>{error}</p> : null}
<div className={modalStyles.actions}>
<button
@@ -140,7 +164,7 @@ export function TechnicalFormAiPromptModal({
onClick={onClose}
disabled={isRunning}
>
Cancel
{t('categories.modal.cancel')}
</button>
<button
type="submit"
@@ -148,13 +172,12 @@ export function TechnicalFormAiPromptModal({
disabled={isRunning || prompt.trim().length < 10}
>
<Sparkles size={16} />
{isRunning ? 'Generating…' : 'Run'}
{isRunning ? t('products.form.aiGenerating') : t('products.form.aiRun')}
</button>
</div>
</form>
</div>
</div>
,
document.body,
</div>,
document.body,
)
}
apps/business/src/components/TechnicalFormModal.module.css
+18
View File
@@ -156,5 +156,23 @@
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.actionsRow {
justify-content: space-between;
width: 100%;
/* Physical layout: Save leftmost, Cancel next, AI on the right */
direction: ltr;
}
.actionsMain {
display: flex;
align-items: center;
gap: 10px;
}
.actionsAi {
flex-shrink: 0;
white-space: nowrap;
margin-inline-start: auto;
}
apps/business/src/components/TechnicalFormModal.tsx
+103 -73
View File
@@ -1,8 +1,12 @@
import { useEffect, useRef, useState } from 'react'
import { createPortal } from 'react-dom'
import { Plus, Sparkles, Trash2, X } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import type { TechnicalFieldType, TechnicalFormFieldDraft } from '../types/technicalForm'
import { useT } from '../i18n/useT'
import type { BusinessMessageKey } from '../i18n/messages'
import { createId } from '../utils/id'
import { Tooltip } from './Tooltip'
import styles from './VariationsModal.module.css'
import fieldStyles from './TechnicalFormModal.module.css'
import aiStyles from '../styles/ai.module.css'
@@ -14,6 +18,7 @@ interface TechnicalFormModalProps {
isLoading?: boolean
isSaving?: boolean
isGenerating?: boolean
escapeDisabled?: boolean
error?: string
onClose: () => void
onChange: (fields: TechnicalFormFieldDraft[]) => void
@@ -24,11 +29,11 @@ interface TechnicalFormModalProps {
const ANIMATION_MS = 220
const FIELD_TYPE_LABELS: Record<TechnicalFieldType, string> = {
text: 'Text',
textarea: 'Textarea',
select: 'Select',
multi_select: 'Multi',
const FIELD_TYPE_KEYS: Record<TechnicalFieldType, BusinessMessageKey> = {
text: 'categories.technical.type.text',
textarea: 'categories.technical.type.textarea',
select: 'categories.technical.type.select',
multi_select: 'categories.technical.type.multi_select',
}
function createEmptyField(): TechnicalFormFieldDraft {
@@ -48,6 +53,7 @@ export function TechnicalFormModal({
isLoading = false,
isSaving = false,
isGenerating = false,
escapeDisabled = false,
error = '',
onClose,
onChange,
@@ -55,6 +61,9 @@ export function TechnicalFormModal({
onGenerate,
onGenerateClick,
}: TechnicalFormModalProps) {
const t = useT()
const { locale } = useLocale()
const isFa = locale === 'fa'
const [mounted, setMounted] = useState(open)
const [closing, setClosing] = useState(false)
const optionInputRefs = useRef<Record<string, (HTMLInputElement | null)[]>>({})
@@ -82,13 +91,13 @@ export function TechnicalFormModal({
}, [fields])
useEffect(() => {
if (!mounted || closing) return
if (!mounted || closing || escapeDisabled) return
const onKey = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose()
}
document.addEventListener('keydown', onKey)
return () => document.removeEventListener('keydown', onKey)
}, [mounted, closing, onClose])
}, [mounted, closing, escapeDisabled, onClose])
if (!mounted) return null
@@ -180,22 +189,29 @@ export function TechnicalFormModal({
role="dialog"
aria-modal="true"
aria-labelledby="technical-form-title"
lang={isFa ? 'fa' : 'en'}
dir={isFa ? 'rtl' : 'ltr'}
>
<div className={styles.header}>
<div>
<h3 id="technical-form-title" className={styles.title}>
Technical Data Form
{t('categories.technical.title')}
</h3>
{categoryName && <p className={styles.subtitle}>{categoryName}</p>}
{categoryName ? <p className={styles.subtitle}>{categoryName}</p> : null}
</div>
<button className={styles.closeBtn} onClick={onClose} aria-label="Close">
<button
className={styles.closeBtn}
onClick={onClose}
aria-label={t('common.close')}
type="button"
>
<X size={20} />
</button>
</div>
<div className={styles.body}>
{isLoading ? (
<p className={styles.emptyText}>Loading form...</p>
<p className={styles.emptyText}>{t('categories.technical.loading')}</p>
) : (
<>
<div className={fieldStyles.fieldList}>
@@ -206,16 +222,16 @@ export function TechnicalFormModal({
id={`label-${field.id}`}
type="text"
className={fieldStyles.compactInput}
placeholder="Field label"
placeholder={t('categories.technical.fieldLabel')}
value={field.label}
onChange={(e) => updateField(field.id, { label: e.target.value })}
aria-label="Field label"
aria-label={t('categories.technical.fieldLabel')}
/>
<select
id={`type-${field.id}`}
className={fieldStyles.compactInput}
value={field.type}
aria-label="Input type"
aria-label={t('categories.technical.inputType')}
onChange={(e) => {
const type = e.target.value as TechnicalFieldType
updateField(field.id, {
@@ -229,13 +245,16 @@ export function TechnicalFormModal({
})
}}
>
{Object.entries(FIELD_TYPE_LABELS).map(([value, label]) => (
{(Object.keys(FIELD_TYPE_KEYS) as TechnicalFieldType[]).map((value) => (
<option key={value} value={value}>
{label}
{t(FIELD_TYPE_KEYS[value])}
</option>
))}
</select>
<label className={fieldStyles.requiredCell} title="Required">
<label
className={fieldStyles.requiredCell}
title={t('categories.technical.required')}
>
<input
type="checkbox"
checked={field.isRequired}
@@ -243,23 +262,27 @@ export function TechnicalFormModal({
updateField(field.id, { isRequired: e.target.checked })
}
/>
<span>Required</span>
<span>{t('categories.technical.required')}</span>
</label>
<div className={fieldStyles.removeCell}>
<button
type="button"
className={styles.removeRowBtn}
onClick={() => removeField(field.id)}
aria-label="Remove field"
>
<Trash2 size={15} />
</button>
<Tooltip label={t('categories.technical.removeField')}>
<button
type="button"
className={styles.removeRowBtn}
onClick={() => removeField(field.id)}
aria-label={t('categories.technical.removeField')}
>
<Trash2 size={15} />
</button>
</Tooltip>
</div>
</div>
{(field.type === 'select' || field.type === 'multi_select') && (
<div className={fieldStyles.optionsBlock}>
<span className={fieldStyles.optionsLabel}>Options</span>
<span className={fieldStyles.optionsLabel}>
{t('categories.technical.options')}
</span>
<div className={fieldStyles.customValues}>
{field.options.map((option, optionIndex) => (
<div key={optionIndex} className={fieldStyles.customRow}>
@@ -271,7 +294,9 @@ export function TechnicalFormModal({
optionInputRefs.current[field.id][optionIndex] = el
}}
type="text"
placeholder={`Option ${optionIndex + 1}`}
placeholder={t('categories.technical.optionN', {
n: optionIndex + 1,
})}
value={option}
onChange={(e) =>
updateOption(field.id, optionIndex, e.target.value)
@@ -282,14 +307,16 @@ export function TechnicalFormModal({
/>
{field.options.length > 1 && (
<div className={fieldStyles.removeCell}>
<button
type="button"
className={styles.removeRowBtn}
onClick={() => removeOption(field.id, optionIndex)}
aria-label="Remove option"
>
<X size={16} />
</button>
<Tooltip label={t('categories.technical.removeOption')}>
<button
type="button"
className={styles.removeRowBtn}
onClick={() => removeOption(field.id, optionIndex)}
aria-label={t('categories.technical.removeOption')}
>
<X size={16} />
</button>
</Tooltip>
</div>
)}
{field.options.length <= 1 && <div />}
@@ -301,7 +328,7 @@ export function TechnicalFormModal({
onClick={() => addOption(field.id)}
>
<Plus size={14} />
Add option
{t('categories.technical.addOption')}
</button>
</div>
</div>
@@ -310,56 +337,59 @@ export function TechnicalFormModal({
))}
{!fields.length && (
<p className={styles.emptyText}>
No fields yet. Add text, textarea, select, or multi-select inputs.
</p>
<p className={styles.emptyText}>{t('categories.technical.empty')}</p>
)}
</div>
<div className={fieldStyles.toolbar}>
{(onGenerateClick ?? onGenerate) && (
<button
type="button"
className={aiStyles.aiBtn}
onClick={onGenerateClick ?? onGenerate}
disabled={isLoading || isSaving || isGenerating}
>
<Sparkles size={16} />
{isGenerating ? 'Generating…' : 'Generate with AI'}
</button>
)}
<button type="button" className={styles.addBtn} onClick={addField}>
<Plus size={18} />
Add field
{t('categories.technical.addField')}
</button>
</div>
</>
)}
{error && <p className={styles.errorText}>{error}</p>}
{error ? <p className={styles.errorText}>{error}</p> : null}
<div className={styles.actions}>
<button
type="button"
className={styles.cancelBtn}
onClick={onClose}
disabled={isSaving || isGenerating}
>
Cancel
</button>
<button
type="button"
className={styles.submitBtn}
onClick={onSave}
disabled={!canSave}
>
{isSaving ? 'Saving…' : 'Save form'}
</button>
<div className={`${styles.actions} ${fieldStyles.actionsRow}`}>
<div className={fieldStyles.actionsMain}>
<button
type="button"
className={styles.submitBtn}
onClick={onSave}
disabled={!canSave}
>
{isSaving
? t('categories.technical.saving')
: t('categories.technical.save')}
</button>
<button
type="button"
className={styles.cancelBtn}
onClick={onClose}
disabled={isSaving || isGenerating}
>
{t('categories.modal.cancel')}
</button>
</div>
{(onGenerateClick ?? onGenerate) ? (
<button
type="button"
className={`${aiStyles.aiBtn} ${fieldStyles.actionsAi}`}
onClick={onGenerateClick ?? onGenerate}
disabled={isLoading || isSaving || isGenerating}
>
<Sparkles size={16} />
{isGenerating
? t('products.form.aiGenerating')
: t('categories.technical.generateAi')}
</button>
) : null}
</div>
</div>
</div>
</div>
,
document.body,
</div>,
document.body,
)
}
apps/business/src/components/Tooltip.module.css
+11 -14
View File
@@ -4,10 +4,9 @@
}
.tip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
position: fixed;
z-index: 10000;
transform: translate(-50%, calc(-100% + 4px));
padding: 6px 10px;
font-family: var(--font-ui);
font-size: 12px;
@@ -19,8 +18,7 @@
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
z-index: 50;
background: rgba(255, 255, 255, 0.75);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
@@ -28,6 +26,12 @@
box-shadow: 0 4px 16px rgba(31, 38, 135, 0.12);
}
.tipVisible {
opacity: 1;
visibility: visible;
transform: translate(-50%, -100%);
}
.tip::after {
content: '';
position: absolute;
@@ -35,12 +39,5 @@
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: rgba(255, 255, 255, 0.75);
}
.wrap:hover .tip,
.wrap:focus-within .tip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
border-top-color: rgba(255, 255, 255, 0.95);
}
apps/business/src/components/Tooltip.tsx
+64 -5
View File
@@ -1,4 +1,5 @@
import type { ReactElement } from 'react'
import { useEffect, useRef, useState, type ReactElement } from 'react'
import { createPortal } from 'react-dom'
import styles from './Tooltip.module.css'
interface TooltipProps {
@@ -7,12 +8,70 @@ interface TooltipProps {
}
export function Tooltip({ label, children }: TooltipProps) {
const wrapRef = useRef<HTMLSpanElement>(null)
const [visible, setVisible] = useState(false)
const [coords, setCoords] = useState({ top: 0, left: 0 })
function updatePosition() {
const el = wrapRef.current
if (!el) return
const rect = el.getBoundingClientRect()
setCoords({
top: rect.top - 8,
left: rect.left + rect.width / 2,
})
}
function show() {
updatePosition()
setVisible(true)
}
function hide() {
setVisible(false)
}
useEffect(() => {
if (!visible) return
function onReposition() {
updatePosition()
}
window.addEventListener('scroll', onReposition, true)
window.addEventListener('resize', onReposition)
return () => {
window.removeEventListener('scroll', onReposition, true)
window.removeEventListener('resize', onReposition)
}
}, [visible])
return (
<span className={styles.wrap}>
<span
ref={wrapRef}
className={styles.wrap}
onMouseEnter={show}
onMouseLeave={hide}
onFocusCapture={show}
onBlurCapture={(e) => {
if (!wrapRef.current?.contains(e.relatedTarget as Node | null)) {
hide()
}
}}
>
{children}
<span className={styles.tip} role="tooltip">
{label}
</span>
{visible
? createPortal(
<span
className={`${styles.tip} ${styles.tipVisible}`}
role="tooltip"
style={{ top: coords.top, left: coords.left }}
>
{label}
</span>,
document.body,
)
: null}
</span>
)
}
apps/business/src/components/UserProductCard.module.css
+252
View File
@@ -0,0 +1,252 @@
.card {
display: flex;
flex-direction: column;
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);
transition: var(--card-hover-transition, transform 0.2s, box-shadow 0.2s);
overflow: hidden;
}
.mainLink {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
color: inherit;
text-decoration: none;
}
.imageWrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--card-media-bg, rgba(148, 163, 184, 0.12));
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.imagePlaceholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(148, 163, 184, 0.75);
background: linear-gradient(
135deg,
rgba(148, 163, 184, 0.14) 0%,
rgba(148, 163, 184, 0.05) 100%
);
}
.badge {
position: absolute;
top: 8px;
inset-inline-start: 8px;
padding: 3px 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.03em;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 1;
}
.badge[data-status='draft'] {
color: #fff;
background: linear-gradient(
145deg,
rgba(251, 191, 36, 0.55) 0%,
rgba(245, 158, 11, 0.32) 100%
);
border-color: rgba(251, 191, 36, 0.35);
}
.badge[data-status='published'] {
color: #047857;
background: linear-gradient(
145deg,
rgba(167, 243, 208, 0.55) 0%,
rgba(52, 211, 153, 0.28) 100%
);
border-color: rgba(110, 231, 183, 0.4);
}
.badge[data-status='archived'] {
color: #e2e8f0;
background: linear-gradient(
145deg,
rgba(148, 163, 184, 0.45) 0%,
rgba(100, 116, 139, 0.28) 100%
);
border-color: rgba(148, 163, 184, 0.35);
}
.badge[data-status='rejected'] {
color: #fff;
background: linear-gradient(
145deg,
rgba(239, 68, 68, 0.55) 0%,
rgba(220, 38, 38, 0.32) 100%
);
border-color: rgba(239, 68, 68, 0.35);
}
.promotedBadge {
position: absolute;
top: 8px;
inset-inline-end: 8px;
padding: 3px 8px;
font-size: 10px;
font-weight: 600;
color: #fff;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: linear-gradient(
145deg,
rgba(99, 102, 241, 0.7) 0%,
rgba(168, 85, 247, 0.45) 100%
);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 1;
}
.body {
padding: 10px 10px 8px;
flex: 1;
}
.title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
margin: 0 0 3px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.secondary {
font-family: var(--font-ui);
font-size: 12px;
color: var(--text-secondary);
margin: 0 0 6px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.categoryChip {
display: inline-block;
margin-bottom: 6px;
padding: 2px 8px;
font-size: 10px;
font-weight: 500;
color: var(--text-secondary);
background: rgba(148, 163, 184, 0.12);
border-radius: 50px;
}
.owner {
display: flex;
align-items: center;
gap: 4px;
margin: 0 0 6px;
font-size: 11px;
color: var(--text-muted);
min-width: 0;
}
.owner span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.metaRow {
display: flex;
align-items: center;
gap: 8px;
margin-top: 2px;
/* Physical LTR: price left, location right */
direction: ltr;
}
.location {
display: flex;
align-items: center;
gap: 4px;
margin: 0 0 0 auto;
font-size: 11px;
color: var(--text-muted);
min-width: 0;
}
.location span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.price {
margin: 0;
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
flex-shrink: 0;
}
.controls {
display: flex;
align-items: center;
justify-content: space-around;
padding: 8px 6px 10px;
border-top: 1px solid rgba(148, 163, 184, 0.15);
overflow: visible;
}
.controls button {
position: relative;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: var(--text-secondary);
transition: background 0.2s, color 0.2s;
}
.controls button:hover:not(:disabled) {
background: rgba(var(--primary-rgb) / 0.1);
color: var(--primary);
}
.controls button:disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
.controls button.danger:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
apps/business/src/components/UserProductCard.tsx
+181
View File
@@ -0,0 +1,181 @@
import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import {
Check,
ImageOff,
MapPin,
Megaphone,
Pencil,
Trash2,
User,
} from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import type { UserProductListItem } from '../types/userProduct'
import { formatIrtPrice } from '../utils/irtPrice'
import { useT } from '../i18n/useT'
import { Tooltip } from './Tooltip'
import styles from './UserProductCard.module.css'
interface UserProductCardProps {
product: UserProductListItem
to?: string
onEdit: (id: string) => void
onPromote: (id: string) => void
onChangeStatus: (id: string) => void
onRemove: (id: string) => void
busyAction?: 'remove' | 'promote' | 'status' | null
}
export function UserProductCard({
product,
to,
onEdit,
onPromote,
onChangeStatus,
onRemove,
busyAction = null,
}: UserProductCardProps) {
const t = useT()
const { locale } = useLocale()
const isFa = locale === 'fa'
const titleFa = product.titleFa || product.title
const titleEn = product.titleEn?.trim() || ''
const title = isFa ? titleFa : titleEn || titleFa
const secondary = isFa ? titleEn : titleEn ? titleFa : ''
const city = isFa ? product.cityNameFa || product.cityName : product.cityName
const category = isFa
? product.categoryNameFa || product.categoryName
: product.categoryName
const owner = isFa ? product.ownerNameFa || product.ownerName : product.ownerName
const imageSrc = product.imageUrl?.trim() || ''
const [imageFailed, setImageFailed] = useState(false)
const showImage = Boolean(imageSrc) && !imageFailed
const isBusy = busyAction != null
const currency = (product.priceCurrency || 'IRT').toUpperCase()
const priceLabel =
product.price == null
? t('customerProducts.priceUnavailable')
: currency === 'IRT'
? formatIrtPrice(product.price)
: `${product.price.toLocaleString('en-US')} ${currency}`
useEffect(() => {
setImageFailed(false)
}, [imageSrc])
const statusLabel =
product.status === 'published'
? t('customerProducts.status.published')
: product.status === 'archived'
? t('customerProducts.status.archived')
: product.status === 'rejected'
? t('customerProducts.status.rejected')
: t('customerProducts.status.pending')
const mediaAndBody = (
<>
<div className={styles.imageWrap}>
{showImage ? (
<img
src={imageSrc}
alt={title}
className={styles.image}
loading="lazy"
onError={() => setImageFailed(true)}
/>
) : (
<div className={styles.imagePlaceholder} aria-hidden="true">
<ImageOff size={28} strokeWidth={1.5} />
</div>
)}
<span className={styles.badge} data-status={product.status}>
{statusLabel}
</span>
{product.promoted ? (
<span className={styles.promotedBadge}>{t('customerProducts.promoted')}</span>
) : null}
</div>
<div className={styles.body} dir={isFa ? 'rtl' : 'ltr'}>
<h3 className={styles.title}>{title}</h3>
{secondary ? <p className={styles.secondary}>{secondary}</p> : null}
{category ? <span className={styles.categoryChip}>{category}</span> : null}
{owner ? (
<p className={styles.owner}>
<User size={12} aria-hidden="true" />
<span>{owner}</span>
</p>
) : null}
<div className={styles.metaRow}>
<p className={styles.price}>{priceLabel}</p>
<p className={styles.location} dir={isFa ? 'rtl' : 'ltr'}>
<MapPin size={12} aria-hidden="true" />
<span>{city}</span>
</p>
</div>
</div>
</>
)
return (
<article className={styles.card} data-card-hover>
{to ? (
<Link to={to} className={styles.mainLink}>
{mediaAndBody}
</Link>
) : (
mediaAndBody
)}
<div className={styles.controls}>
<Tooltip label={t('customerProducts.edit')}>
<button
type="button"
onClick={() => onEdit(product.id)}
aria-label={t('customerProducts.edit')}
disabled={isBusy}
>
<Pencil size={16} />
</button>
</Tooltip>
<Tooltip
label={
product.promoted
? t('customerProducts.promoted')
: t('customerProducts.promote')
}
>
<button
type="button"
onClick={() => onPromote(product.id)}
aria-label={t('customerProducts.promote')}
disabled={isBusy || product.promoted}
>
<Megaphone size={16} />
</button>
</Tooltip>
<Tooltip label={t('customerProducts.statusChange')}>
<button
type="button"
onClick={() => onChangeStatus(product.id)}
aria-label={t('customerProducts.statusChange')}
disabled={isBusy}
>
<Check size={16} />
</button>
</Tooltip>
<Tooltip label={t('customerProducts.remove')}>
<button
type="button"
className={styles.danger}
onClick={() => onRemove(product.id)}
aria-label={t('customerProducts.remove')}
disabled={isBusy}
>
<Trash2 size={16} />
</button>
</Tooltip>
</div>
</article>
)
}
apps/business/src/components/UserProductStatusModal.module.css
+65
View File
@@ -0,0 +1,65 @@
.hint {
margin: 0;
font-size: 13px;
color: var(--text-secondary);
font-family: var(--font-ui);
}
.options {
display: grid;
gap: 8px;
}
.option {
display: flex;
align-items: center;
gap: 10px;
min-height: var(--field-height);
padding: var(--field-padding-y) var(--field-padding-x);
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
font-size: var(--field-font-size);
font-family: var(--font-ui);
color: var(--text-primary);
text-align: start;
transition: border-color 0.15s, background 0.15s;
}
.option:hover:not(:disabled) {
border-color: rgba(var(--primary-rgb) / 0.35);
}
.option[data-selected='true'] {
border-color: var(--primary);
background: rgba(var(--primary-rgb) / 0.08);
}
.option:disabled {
opacity: 0.65;
cursor: wait;
}
.radio {
width: 16px;
height: 16px;
flex-shrink: 0;
border-radius: 50%;
border: 2px solid rgba(148, 163, 184, 0.55);
background: transparent;
box-shadow: inset 0 0 0 0 transparent;
transition: border-color 0.15s, box-shadow 0.15s;
}
.option[data-selected='true'] .radio {
border-color: var(--primary);
box-shadow: inset 0 0 0 4px var(--primary);
}
.saving {
margin: 4px 0 0;
font-size: 12px;
color: var(--text-muted);
font-family: var(--font-ui);
}
apps/business/src/components/UserProductStatusModal.tsx
+108
View File
@@ -0,0 +1,108 @@
import { createPortal } from 'react-dom'
import { X } from 'lucide-react'
import type { UserProductStatus } from '../types/userProduct'
import { useT } from '../i18n/useT'
import modalStyles from './CategoryModal.module.css'
import styles from './UserProductStatusModal.module.css'
const STATUSES: UserProductStatus[] = [
'draft',
'published',
'rejected',
'archived',
]
interface UserProductStatusModalProps {
open: boolean
currentStatus: UserProductStatus
saving?: boolean
onClose: () => void
onSave: (status: UserProductStatus) => void
}
export function UserProductStatusModal({
open,
currentStatus,
saving = false,
onClose,
onSave,
}: UserProductStatusModalProps) {
const t = useT()
if (!open) return null
function statusLabel(value: UserProductStatus) {
if (value === 'draft') return t('customerProducts.status.pending')
if (value === 'published') return t('customerProducts.status.published')
if (value === 'rejected') return t('customerProducts.status.rejected')
return t('customerProducts.status.archived')
}
function handleSelect(value: UserProductStatus) {
if (saving) return
if (value === currentStatus) {
onClose()
return
}
onSave(value)
}
return createPortal(
<div
className={modalStyles.overlay}
role="presentation"
onClick={saving ? undefined : onClose}
>
<div
className={modalStyles.modal}
role="dialog"
aria-modal="true"
aria-labelledby="user-product-status-title"
onClick={(e) => e.stopPropagation()}
>
<div className={modalStyles.header}>
<h2 id="user-product-status-title" className={modalStyles.title}>
{t('customerProducts.statusModalTitle')}
</h2>
<button
type="button"
className={modalStyles.closeBtn}
onClick={onClose}
aria-label={t('customerProducts.form.cancel')}
disabled={saving}
>
<X size={18} />
</button>
</div>
<div className={modalStyles.form}>
<p className={styles.hint}>{t('customerProducts.statusModalHint')}</p>
<div className={styles.options} role="radiogroup">
{STATUSES.map((value) => {
const selected = value === currentStatus
return (
<button
key={value}
type="button"
className={styles.option}
role="radio"
aria-checked={selected}
data-selected={selected ? 'true' : undefined}
disabled={saving}
onClick={() => handleSelect(value)}
>
<span className={styles.radio} aria-hidden />
<span>{statusLabel(value)}</span>
</button>
)
})}
</div>
{saving ? (
<p className={styles.saving}>{t('customerProducts.form.submitting')}</p>
) : null}
</div>
</div>
</div>,
document.body,
)
}
apps/business/src/i18n/messages.ts
+381
View File
@@ -28,6 +28,7 @@ const en = {
'nav.store.cards': 'Shopping Cards',
'nav.store.settings': 'Settings',
'nav.customers': 'Customers',
'nav.customerProducts': 'Customer products',
'nav.settings': 'Settings',
'nav.blog': 'Blog',
'nav.blog.overview': 'Overview',
@@ -241,6 +242,163 @@ const en = {
'Are you sure you want to delete "{name}"? This action cannot be undone.',
'products.list.addByAi': 'Add product by AI',
'products.list.addNew': 'Add new product',
'customerProducts.title': 'Customer products',
'customerProducts.subtitle': '{count} products submitted by customers.',
'customerProducts.empty': 'No customer products yet.',
'customerProducts.form.title': 'My Products',
'customerProducts.form.empty': 'You have not added any products yet.',
'customerProducts.form.add': 'Add product',
'customerProducts.form.addTitle': 'Add product',
'customerProducts.form.addSubtitle': 'Submit a new product for review.',
'customerProducts.form.addComingSoon': 'The add form will be designed next.',
'customerProducts.form.backToList': 'Back to my products',
'customerProducts.form.editTitle': 'Edit product',
'customerProducts.form.editSubtitle': 'Update your listing details, then save.',
'customerProducts.form.detailsTitle': 'Product details',
'customerProducts.form.detailsSubtitle': 'Review your submitted listing.',
'customerProducts.form.edit': 'Edit product',
'customerProducts.form.yes': 'Yes',
'customerProducts.form.editSoon': 'Edit product will be available soon.',
'customerProducts.form.remove': 'Remove product',
'customerProducts.form.removeConfirm': 'Remove this product from your stock?',
'customerProducts.form.removeSuccess': 'Product removed.',
'customerProducts.form.promote': 'Promote product',
'customerProducts.form.promoted': 'Promoted',
'customerProducts.form.promoteSuccess': 'Product promoted.',
'customerProducts.form.priceUnavailable': 'Price on request',
'customerProducts.form.status.pending': 'Pending',
'customerProducts.form.status.published': 'Approved',
'customerProducts.form.status.archived': 'Archived',
'customerProducts.form.stepperLabel': 'Add product steps',
'customerProducts.form.step.basics': 'Basics',
'customerProducts.form.step.basicsHint': 'Category, names, description, price, and location.',
'customerProducts.form.step.basicsPlaceholder': 'Basic fields will go here.',
'customerProducts.form.step.images': 'Images',
'customerProducts.form.step.imagesHint': 'Add a cropped thumbnail and gallery photos.',
'customerProducts.form.step.details': 'Details',
'customerProducts.form.step.detailsHint': 'Description and technical information for the selected category.',
'customerProducts.form.step.detailsPlaceholder': 'Details and technical fields will go here.',
'customerProducts.form.step.technical': 'Technical data',
'customerProducts.form.step.technicalHint':
'Choose condition, add optional notes, then fill the category technical form.',
'customerProducts.form.optional': '(optional)',
'customerProducts.form.loading': 'Loading products…',
'customerProducts.form.fields.category': 'Category',
'customerProducts.form.fields.selectCategory': 'Select category',
'customerProducts.form.fields.searchCategory': 'Search category…',
'customerProducts.form.fields.clearCategory': 'Clear category',
'customerProducts.form.fields.noCategories': 'No categories found',
'customerProducts.form.fields.titleFa': 'Name (FA)',
'customerProducts.form.fields.titleFaPlaceholder': 'Product name in Farsi',
'customerProducts.form.fields.titleEn': 'Name (EN)',
'customerProducts.form.fields.titleEnPlaceholder': 'Product name in English',
'customerProducts.form.fields.description': 'Description',
'customerProducts.form.fields.descriptionPlaceholder': 'Short description of your product',
'customerProducts.form.fields.price': 'Desired price',
'customerProducts.form.fields.priceSuggested': 'Your suggested price',
'customerProducts.form.fields.priceByExpert': 'I want an expert to set the price',
'customerProducts.form.fields.pricePlaceholder': 'e.g. 1,500,000',
'customerProducts.form.fields.priceUnit': 'Unit',
'customerProducts.form.fields.priceUnit.IRT': 'IRT',
'customerProducts.form.fields.priceUnit.USD': 'Dollar',
'customerProducts.form.fields.priceUnit.EUR': 'EURO',
'customerProducts.form.fields.priceUnit.AED': 'AED',
'customerProducts.form.fields.location': 'Location',
'customerProducts.form.fields.country': 'Country',
'customerProducts.form.fields.selectCountry': 'Select country',
'customerProducts.form.fields.province': 'Province',
'customerProducts.form.fields.selectProvince': 'Select province',
'customerProducts.form.fields.city': 'City',
'customerProducts.form.fields.selectCity': 'Select city',
'customerProducts.form.fields.searchCity': 'Search city…',
'customerProducts.form.fields.clearCity': 'Clear city',
'customerProducts.form.fields.noCities': 'No cities found',
'customerProducts.form.fields.deliveryNote': 'Pickup / delivery note',
'customerProducts.form.fields.deliveryNotePlaceholder': 'e.g. pickup only, evening delivery…',
'customerProducts.form.fields.district': 'District',
'customerProducts.form.fields.selectDistrict': 'Select district',
'customerProducts.form.fields.condition': 'Condition',
'customerProducts.form.fields.technicalNotes': 'Technical notes',
'customerProducts.form.fields.technicalNotesPlaceholder': 'Optional extra technical details…',
'customerProducts.form.condition.new': 'New',
'customerProducts.form.condition.stock': 'Stock',
'customerProducts.form.condition.needs_repair': 'Needs repair',
'customerProducts.form.condition.scrap': 'Scrap',
'customerProducts.form.images.thumbnail': 'Thumbnail',
'customerProducts.form.images.thumbnailUpload': 'Upload thumbnail',
'customerProducts.form.images.thumbnailHint': '3:2 landscape works best',
'customerProducts.form.images.thumbnailChange': 'Change thumbnail',
'customerProducts.form.images.thumbnailRemove': 'Remove thumbnail',
'customerProducts.form.images.zoom': 'Zoom',
'customerProducts.form.images.applyCrop': 'Apply crop',
'customerProducts.form.images.gallery': 'Gallery',
'customerProducts.form.images.galleryAdd': 'Add photos',
'customerProducts.form.images.galleryHint': 'You can select multiple images.',
'customerProducts.form.images.galleryRemove': 'Remove image {index}',
'customerProducts.form.technical.select': 'Select…',
'customerProducts.form.technical.needCategory': 'Choose a category in step 1 to load technical fields.',
'customerProducts.form.technical.empty': 'This category has no technical fields yet.',
'customerProducts.form.technical.categoryForm': 'Category technical form',
'customerProducts.form.technical.loading': 'Loading technical fields…',
'customerProducts.form.cancel': 'Cancel',
'customerProducts.form.next': 'Next',
'customerProducts.form.back': 'Back',
'customerProducts.form.submit': 'Submit',
'customerProducts.form.save': 'Save changes',
'customerProducts.form.submitting': 'Submitting…',
'customerProducts.form.submitSuccess': 'Product submitted for review.',
'customerProducts.form.updateSuccess': 'Product updated.',
'customerProducts.form.error.load': 'Unable to load your products.',
'customerProducts.form.error.loadDetail': 'Unable to load this product.',
'customerProducts.form.error.loadLocations': 'Unable to load locations.',
'customerProducts.form.error.loadCategories': 'Unable to load categories.',
'customerProducts.form.error.loadTechnicalForm': 'Unable to load the category technical form.',
'customerProducts.form.error.categoryRequired': 'Please select a category.',
'customerProducts.form.error.titleFaRequired': 'Please enter the Farsi name.',
'customerProducts.form.error.locationRequired': 'Please select country and city.',
'customerProducts.form.error.priceInvalid': 'Please enter a valid price.',
'customerProducts.form.error.conditionRequired': 'Please select a condition.',
'customerProducts.form.error.technicalRequired': 'Please fill required technical fields.',
'customerProducts.form.error.submit': 'Unable to submit the product.',
'customerProducts.form.error.update': 'Unable to update the product.',
'customerProducts.form.error.remove': 'Unable to remove the product.',
'customerProducts.form.error.promote': 'Unable to promote the product.',
'customerProducts.add': 'Add product',
'customerProducts.detailsTitle': 'Product details',
'customerProducts.detailsSubtitle': 'Review a customer-submitted listing.',
'customerProducts.backToList': 'Back to customer products',
'customerProducts.owner': 'Customer',
'customerProducts.location': 'Location',
'customerProducts.promote': 'Promote product',
'customerProducts.promoted': 'Promoted',
'customerProducts.promoteSuccess': 'Product promoted.',
'customerProducts.remove': 'Remove product',
'customerProducts.removeConfirm': 'Delete this customer product?',
'customerProducts.removeSuccess': 'Product deleted.',
'customerProducts.statusChange': 'Change status',
'customerProducts.statusModalTitle': 'Change product status',
'customerProducts.statusModalSave': 'Update status',
'customerProducts.statusModalHint': 'Choose how this listing should appear.',
'customerProducts.status.pending': 'Pending',
'customerProducts.status.published': 'Approved',
'customerProducts.status.rejected': 'Rejected',
'customerProducts.status.archived': 'Archived',
'customerProducts.statusSuccess': 'Status updated.',
'customerProducts.loading': 'Loading products…',
'customerProducts.error.load': 'Unable to load customer products.',
'customerProducts.error.loadDetail': 'Unable to load this product.',
'customerProducts.error.remove': 'Unable to delete the product.',
'customerProducts.error.promote': 'Unable to promote the product.',
'customerProducts.error.status': 'Unable to update status.',
'customerProducts.yes': 'Yes',
'customerProducts.edit': 'Edit product',
'customerProducts.approve': 'Approve product',
'customerProducts.editSoon': 'Customer product editing comes next.',
'customerProducts.toast.approved': 'Product approved.',
'customerProducts.priceUnavailable': 'Price on request',
'products.card.edit': 'Edit product',
'products.card.quickInfo': 'Quick info',
'products.card.variations': 'Manage variations',
@@ -301,6 +459,10 @@ const en = {
'categories.addSub': 'Add Sub Category',
'categories.edit': 'Edit Category',
'categories.addByAi': 'Fill categories by AI',
'categories.ai.title': 'Fill Categories with AI',
'categories.ai.subtitle':
'Edit the prompt below, then run it to generate and save a category tree.',
'categories.ai.error': 'Unable to generate categories with AI.',
'categories.deleteTitle': 'Delete Category',
'categories.deleteMessage':
'Are you sure you want to delete "{name}"? Subcategories will also be removed.',
@@ -325,6 +487,31 @@ const en = {
'categories.select.empty': 'No categories found',
'categories.select.clear': 'Clear selection',
'categories.technical.title': 'Technical Data Form',
'categories.technical.loading': 'Loading form...',
'categories.technical.empty':
'No fields yet. Add text, textarea, select, or multi-select inputs.',
'categories.technical.fieldLabel': 'Field label',
'categories.technical.inputType': 'Input type',
'categories.technical.required': 'Required',
'categories.technical.removeField': 'Remove field',
'categories.technical.options': 'Options',
'categories.technical.optionN': 'Option {n}',
'categories.technical.removeOption': 'Remove option',
'categories.technical.addOption': 'Add option',
'categories.technical.addField': 'Add field',
'categories.technical.generateAi': 'Generate with AI',
'categories.technical.save': 'Save form',
'categories.technical.saving': 'Saving…',
'categories.technical.type.text': 'Text',
'categories.technical.type.textarea': 'Textarea',
'categories.technical.type.select': 'Select',
'categories.technical.type.multi_select': 'Multi',
'categories.technical.ai.title': 'Generate Technical Form with AI',
'categories.technical.ai.subtitle':
'Edit the prompt below, then run it to fill the form fields.',
'categories.technical.ai.error': 'Unable to generate technical form with AI.',
'brands.page.subtitle': 'Manage product brands for your store catalog.',
'brands.loading': 'Loading brands...',
'brands.empty': 'No brands yet. Click + to add one.',
@@ -1009,6 +1196,7 @@ const en = {
'title.orders': 'My Orders',
'title.shoppingCards': 'Shopping Cards',
'title.customers': 'Customers',
'title.customerProducts': 'Customer products',
'title.blog': 'Blog',
'title.myBlogs': 'My Blogs',
'title.addBlog': 'Add New Blog',
@@ -1143,6 +1331,7 @@ const fa: Record<MessageKey, string> = {
'nav.store.cards': 'کارت‌های خرید',
'nav.store.settings': 'تنظیمات',
'nav.customers': 'مشتریان',
'nav.customerProducts': 'محصولات مشتریان',
'nav.settings': 'تنظیمات',
'nav.blog': 'بلاگ',
'nav.blog.overview': 'نمای کلی',
@@ -1356,6 +1545,163 @@ const fa: Record<MessageKey, string> = {
'آیا از حذف «{name}» مطمئن هستید؟ این عمل قابل بازگشت نیست.',
'products.list.addByAi': 'افزودن محصول با هوش مصنوعی',
'products.list.addNew': 'افزودن محصول جدید',
'customerProducts.title': 'محصولات مشتریان',
'customerProducts.subtitle': '{count} محصول ثبت‌شده توسط مشتریان.',
'customerProducts.empty': 'هنوز محصول مشتری ثبت نشده است.',
'customerProducts.form.title': 'محصولات من',
'customerProducts.form.empty': 'هنوز محصولی ثبت نکرده‌اید.',
'customerProducts.form.add': 'افزودن محصول',
'customerProducts.form.addTitle': 'افزودن محصول',
'customerProducts.form.addSubtitle': 'محصول جدید را برای بررسی ارسال کنید.',
'customerProducts.form.addComingSoon': 'فرم افزودن در مرحله بعد طراحی می‌شود.',
'customerProducts.form.backToList': 'بازگشت به محصولات من',
'customerProducts.form.editTitle': 'ویرایش محصول',
'customerProducts.form.editSubtitle': 'جزئیات آگهی را به‌روز کنید و ذخیره کنید.',
'customerProducts.form.detailsTitle': 'جزئیات محصول',
'customerProducts.form.detailsSubtitle': 'جزئیات آگهی ثبت‌شده را ببینید.',
'customerProducts.form.edit': 'ویرایش محصول',
'customerProducts.form.yes': 'بله',
'customerProducts.form.editSoon': 'ویرایش محصول به‌زودی در دسترس خواهد بود.',
'customerProducts.form.remove': 'حذف محصول',
'customerProducts.form.removeConfirm': 'این محصول از موجودی شما حذف شود؟',
'customerProducts.form.removeSuccess': 'محصول حذف شد.',
'customerProducts.form.promote': 'پروموت محصول',
'customerProducts.form.promoted': 'پروموت شده',
'customerProducts.form.promoteSuccess': 'محصول پروموت شد.',
'customerProducts.form.priceUnavailable': 'قیمت اعلام نشده',
'customerProducts.form.status.pending': 'در انتظار تأیید',
'customerProducts.form.status.published': 'تأیید شده',
'customerProducts.form.status.archived': 'بایگانی',
'customerProducts.form.stepperLabel': 'مراحل افزودن محصول',
'customerProducts.form.step.basics': 'اطلاعات پایه',
'customerProducts.form.step.basicsHint': 'دسته‌بندی، نام، توضیحات، قیمت و موقعیت.',
'customerProducts.form.step.basicsPlaceholder': 'فیلدهای پایه اینجا قرار می‌گیرند.',
'customerProducts.form.step.images': 'تصاویر',
'customerProducts.form.step.imagesHint': 'تصویر شاخص با برش و گالری تصاویر را اضافه کنید.',
'customerProducts.form.step.details': 'جزئیات',
'customerProducts.form.step.detailsHint': 'توضیحات و اطلاعات فنی بر اساس دسته‌بندی انتخاب‌شده.',
'customerProducts.form.step.detailsPlaceholder': 'جزئیات و فیلدهای فنی اینجا قرار می‌گیرند.',
'customerProducts.form.step.technical': 'اطلاعات فنی',
'customerProducts.form.step.technicalHint':
'وضعیت را انتخاب کنید، یادداشت اختیاری بنویسید و فرم فنی دسته‌بندی را تکمیل کنید.',
'customerProducts.form.optional': '(اختیاری)',
'customerProducts.form.loading': 'در حال بارگذاری محصولات…',
'customerProducts.form.fields.category': 'دسته‌بندی',
'customerProducts.form.fields.selectCategory': 'انتخاب دسته‌بندی',
'customerProducts.form.fields.searchCategory': 'جستجوی دسته‌بندی…',
'customerProducts.form.fields.clearCategory': 'پاک کردن دسته‌بندی',
'customerProducts.form.fields.noCategories': 'دسته‌بندی‌ای پیدا نشد',
'customerProducts.form.fields.titleFa': 'نام (فارسی)',
'customerProducts.form.fields.titleFaPlaceholder': 'نام محصول به فارسی',
'customerProducts.form.fields.titleEn': 'نام (انگلیسی)',
'customerProducts.form.fields.titleEnPlaceholder': 'نام محصول به انگلیسی',
'customerProducts.form.fields.description': 'توضیحات',
'customerProducts.form.fields.descriptionPlaceholder': 'توضیح کوتاه درباره محصول',
'customerProducts.form.fields.price': 'قیمت پیشنهادی',
'customerProducts.form.fields.priceSuggested': 'قیمت پیشنهادی شما',
'customerProducts.form.fields.priceByExpert': 'می‌خواهم قیمت توسط کارشناس مشخص شود',
'customerProducts.form.fields.pricePlaceholder': 'مثلاً ۱٬۵۰۰٬۰۰۰',
'customerProducts.form.fields.priceUnit': 'واحد',
'customerProducts.form.fields.priceUnit.IRT': 'IRT',
'customerProducts.form.fields.priceUnit.USD': 'Dollar',
'customerProducts.form.fields.priceUnit.EUR': 'EURO',
'customerProducts.form.fields.priceUnit.AED': 'AED',
'customerProducts.form.fields.location': 'موقعیت',
'customerProducts.form.fields.country': 'کشور',
'customerProducts.form.fields.selectCountry': 'انتخاب کشور',
'customerProducts.form.fields.province': 'استان',
'customerProducts.form.fields.selectProvince': 'انتخاب استان',
'customerProducts.form.fields.city': 'شهر',
'customerProducts.form.fields.selectCity': 'انتخاب شهر',
'customerProducts.form.fields.searchCity': 'جستجوی شهر…',
'customerProducts.form.fields.clearCity': 'پاک کردن شهر',
'customerProducts.form.fields.noCities': 'شهری پیدا نشد',
'customerProducts.form.fields.deliveryNote': 'یادداشت تحویل / دریافت',
'customerProducts.form.fields.deliveryNotePlaceholder': 'مثلاً فقط حضوری، تحویل عصر…',
'customerProducts.form.fields.district': 'منطقه',
'customerProducts.form.fields.selectDistrict': 'انتخاب منطقه',
'customerProducts.form.fields.condition': 'وضعیت',
'customerProducts.form.fields.technicalNotes': 'توضیحات فنی',
'customerProducts.form.fields.technicalNotesPlaceholder': 'جزئیات فنی اختیاری…',
'customerProducts.form.condition.new': 'نو',
'customerProducts.form.condition.stock': 'استوک',
'customerProducts.form.condition.needs_repair': 'نیاز به تعمیر',
'customerProducts.form.condition.scrap': 'اوراق',
'customerProducts.form.images.thumbnail': 'تصویر شاخص',
'customerProducts.form.images.thumbnailUpload': 'آپلود تصویر شاخص',
'customerProducts.form.images.thumbnailHint': 'نسبت ۳:۲ افقی بهتر است',
'customerProducts.form.images.thumbnailChange': 'تغییر تصویر شاخص',
'customerProducts.form.images.thumbnailRemove': 'حذف تصویر شاخص',
'customerProducts.form.images.zoom': 'بزرگنمایی',
'customerProducts.form.images.applyCrop': 'اعمال برش',
'customerProducts.form.images.gallery': 'گالری',
'customerProducts.form.images.galleryAdd': 'افزودن عکس',
'customerProducts.form.images.galleryHint': 'می‌توانید چند تصویر انتخاب کنید.',
'customerProducts.form.images.galleryRemove': 'حذف تصویر {index}',
'customerProducts.form.technical.select': 'انتخاب کنید…',
'customerProducts.form.technical.needCategory': 'برای نمایش فیلدهای فنی، در مرحله ۱ دسته‌بندی را انتخاب کنید.',
'customerProducts.form.technical.empty': 'برای این دسته‌بندی هنوز فیلد فنی تعریف نشده است.',
'customerProducts.form.technical.categoryForm': 'فرم فنی دسته‌بندی',
'customerProducts.form.technical.loading': 'در حال بارگذاری فیلدهای فنی…',
'customerProducts.form.cancel': 'انصراف',
'customerProducts.form.next': 'بعدی',
'customerProducts.form.back': 'قبلی',
'customerProducts.form.submit': 'ارسال',
'customerProducts.form.save': 'ذخیره تغییرات',
'customerProducts.form.submitting': 'در حال ارسال…',
'customerProducts.form.submitSuccess': 'محصول برای بررسی ارسال شد.',
'customerProducts.form.updateSuccess': 'محصول به‌روز شد.',
'customerProducts.form.error.load': 'بارگذاری محصولات ممکن نشد.',
'customerProducts.form.error.loadDetail': 'بارگذاری این محصول ممکن نشد.',
'customerProducts.form.error.loadLocations': 'بارگذاری موقعیت‌ها ممکن نشد.',
'customerProducts.form.error.loadCategories': 'بارگذاری دسته‌بندی‌ها ممکن نشد.',
'customerProducts.form.error.loadTechnicalForm': 'بارگذاری فرم فنی دسته‌بندی ممکن نشد.',
'customerProducts.form.error.categoryRequired': 'لطفاً دسته‌بندی را انتخاب کنید.',
'customerProducts.form.error.titleFaRequired': 'لطفاً نام فارسی را وارد کنید.',
'customerProducts.form.error.locationRequired': 'لطفاً کشور و شهر را انتخاب کنید.',
'customerProducts.form.error.priceInvalid': 'لطفاً قیمت معتبر وارد کنید.',
'customerProducts.form.error.conditionRequired': 'لطفاً وضعیت را انتخاب کنید.',
'customerProducts.form.error.technicalRequired': 'لطفاً فیلدهای فنی الزامی را تکمیل کنید.',
'customerProducts.form.error.submit': 'ارسال محصول ممکن نشد.',
'customerProducts.form.error.update': 'به‌روزرسانی محصول ممکن نشد.',
'customerProducts.form.error.remove': 'حذف محصول ممکن نشد.',
'customerProducts.form.error.promote': 'پروموت محصول ممکن نشد.',
'customerProducts.add': 'افزودن محصول',
'customerProducts.detailsTitle': 'جزئیات محصول',
'customerProducts.detailsSubtitle': 'جزئیات محصول ثبت‌شده توسط مشتری را ببینید.',
'customerProducts.backToList': 'بازگشت به محصولات مشتریان',
'customerProducts.owner': 'مشتری',
'customerProducts.location': 'موقعیت',
'customerProducts.promote': 'پروموت محصول',
'customerProducts.promoted': 'پروموت شده',
'customerProducts.promoteSuccess': 'محصول پروموت شد.',
'customerProducts.remove': 'حذف محصول',
'customerProducts.removeConfirm': 'این محصول مشتری حذف شود؟',
'customerProducts.removeSuccess': 'محصول حذف شد.',
'customerProducts.statusChange': 'تغییر وضعیت',
'customerProducts.statusModalTitle': 'تغییر وضعیت محصول',
'customerProducts.statusModalSave': 'به‌روزرسانی وضعیت',
'customerProducts.statusModalHint': 'وضعیت نمایش این آگهی را انتخاب کنید.',
'customerProducts.status.pending': 'در انتظار تأیید',
'customerProducts.status.published': 'تأیید شده',
'customerProducts.status.rejected': 'رد شده',
'customerProducts.status.archived': 'بایگانی',
'customerProducts.statusSuccess': 'وضعیت به‌روز شد.',
'customerProducts.loading': 'در حال بارگذاری محصولات…',
'customerProducts.error.load': 'بارگذاری محصولات مشتریان ممکن نشد.',
'customerProducts.error.loadDetail': 'بارگذاری این محصول ممکن نشد.',
'customerProducts.error.remove': 'حذف محصول ممکن نشد.',
'customerProducts.error.promote': 'پروموت محصول ممکن نشد.',
'customerProducts.error.status': 'به‌روزرسانی وضعیت ممکن نشد.',
'customerProducts.yes': 'بله',
'customerProducts.edit': 'ویرایش محصول',
'customerProducts.approve': 'تأیید محصول',
'customerProducts.editSoon': 'ویرایش محصول مشتری در مرحله بعد اضافه می‌شود.',
'customerProducts.toast.approved': 'محصول تأیید شد.',
'customerProducts.priceUnavailable': 'قیمت اعلام نشده',
'products.card.edit': 'ویرایش محصول',
'products.card.quickInfo': 'اطلاعات سریع',
'products.card.variations': 'مدیریت تنوع‌ها',
@@ -1416,6 +1762,10 @@ const fa: Record<MessageKey, string> = {
'categories.addSub': 'افزودن زیردسته',
'categories.edit': 'ویرایش دسته‌بندی',
'categories.addByAi': 'پر کردن دسته‌ها با هوش مصنوعی',
'categories.ai.title': 'پر کردن دسته‌ها با هوش مصنوعی',
'categories.ai.subtitle':
'پرامپت زیر را ویرایش کنید، سپس اجرا کنید تا درخت دسته‌بندی ساخته و ذخیره شود.',
'categories.ai.error': 'تولید دسته‌بندی با هوش مصنوعی ممکن نشد.',
'categories.deleteTitle': 'حذف دسته‌بندی',
'categories.deleteMessage':
'آیا از حذف «{name}» مطمئن هستید؟ زیردسته‌ها نیز حذف می‌شوند.',
@@ -1440,6 +1790,31 @@ const fa: Record<MessageKey, string> = {
'categories.select.empty': 'دسته‌بندی‌ای یافت نشد',
'categories.select.clear': 'پاک کردن انتخاب',
'categories.technical.title': 'فرم اطلاعات فنی',
'categories.technical.loading': 'در حال بارگذاری فرم...',
'categories.technical.empty':
'هنوز فیلدی نیست. فیلد متنی، چندخطی، انتخابی یا چندانتخابی اضافه کنید.',
'categories.technical.fieldLabel': 'برچسب فیلد',
'categories.technical.inputType': 'نوع ورودی',
'categories.technical.required': 'الزامی',
'categories.technical.removeField': 'حذف فیلد',
'categories.technical.options': 'گزینه‌ها',
'categories.technical.optionN': 'گزینه {n}',
'categories.technical.removeOption': 'حذف گزینه',
'categories.technical.addOption': 'افزودن گزینه',
'categories.technical.addField': 'افزودن فیلد',
'categories.technical.generateAi': 'تولید با هوش مصنوعی',
'categories.technical.save': 'ذخیره فرم',
'categories.technical.saving': 'در حال ذخیره…',
'categories.technical.type.text': 'متنی',
'categories.technical.type.textarea': 'چندخطی',
'categories.technical.type.select': 'انتخابی',
'categories.technical.type.multi_select': 'چندانتخابی',
'categories.technical.ai.title': 'تولید فرم فنی با هوش مصنوعی',
'categories.technical.ai.subtitle':
'پرامپت زیر را ویرایش کنید، سپس اجرا کنید تا فیلدهای فرم پر شوند.',
'categories.technical.ai.error': 'تولید فرم فنی با هوش مصنوعی ممکن نشد.',
'brands.page.subtitle': 'برندهای محصول فروشگاه خود را مدیریت کنید.',
'brands.loading': 'در حال بارگذاری برندها...',
'brands.empty': 'هنوز برندی نیست. برای افزودن روی + کلیک کنید.',
@@ -2123,6 +2498,7 @@ const fa: Record<MessageKey, string> = {
'title.orders': 'سفارش‌های من',
'title.shoppingCards': 'کارت‌های خرید',
'title.customers': 'مشتریان',
'title.customerProducts': 'محصولات مشتریان',
'title.blog': 'بلاگ',
'title.myBlogs': 'بلاگ‌های من',
'title.addBlog': 'افزودن بلاگ',
@@ -2255,6 +2631,7 @@ const BREADCRUMB_LABEL_KEYS: Record<string, MessageKey> = {
'Shipping Fees': 'nav.store.shipping',
'Shopping Cards': 'nav.store.cards',
Customers: 'nav.customers',
'Customer products': 'nav.customerProducts',
Blog: 'nav.blog',
'My Blogs': 'nav.blog.list',
'Add New Blog': 'nav.blog.new',
@@ -2323,6 +2700,10 @@ export function getBusinessRouteTitleRules(locale: DashboardLocale): RouteTitleR
{ match: '/store/settings', labels: [t('title.store'), t('title.settings')] },
{ match: '/store', labels: [t('title.store')] },
{ match: '/customers', labels: [t('title.customers')] },
{ match: '/customer-products/new', labels: [t('title.customerProducts'), t('customerProducts.add')] },
{ match: /^\/customer-products\/[^/]+\/edit$/, labels: [t('title.customerProducts'), t('customerProducts.edit')] },
{ match: /^\/customer-products\/[^/]+$/, labels: [t('title.customerProducts'), t('customerProducts.detailsTitle')] },
{ match: '/customer-products', labels: [t('title.customerProducts')] },
{ 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')] },
apps/business/src/pages/AddCustomerProductPage.module.css
+605
View File
@@ -0,0 +1,605 @@
.root {
display: flex;
flex-direction: column;
gap: 0;
font-family: var(--font-ui);
}
.shell {
display: flex;
align-items: stretch;
gap: 12px;
}
.iconRail {
width: 128px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 16px 12px;
border: 1px dashed rgba(148, 163, 184, 0.4);
border-radius: var(--radius);
background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-sizing: border-box;
}
.iconRailInner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
text-align: center;
}
.iconRailGlyph {
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
margin-bottom: 2px;
}
.iconRailLabelFa {
display: block;
width: 100%;
font-size: 12px;
font-weight: 700;
font-family: var(--font-ui);
color: var(--text-primary);
line-height: 1.2;
text-align: center;
}
.iconRailLabelEn {
display: block;
width: 100%;
margin-top: -6px;
font-size: 9px;
font-weight: 700;
font-family: var(--font-en);
color: var(--text-muted);
line-height: 1.25;
letter-spacing: 0.1em;
/* Compensate letter-spacing so centered Latin text doesn’t drift */
padding-inline-start: 0.1em;
text-transform: uppercase;
text-align: center;
direction: ltr;
unicode-bidi: isolate;
}
.card {
flex: 1;
min-width: 0;
background: var(--glass-bg);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: var(--glass-shadow);
padding: 28px 28px 24px;
}
@media (max-width: 640px) {
.shell {
flex-direction: column;
}
.iconRail {
width: 100%;
min-height: 88px;
}
.card {
padding: 22px 18px 20px;
}
}
.stepper {
display: flex;
align-items: flex-end;
width: 100%;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}
.stepGroup {
display: flex;
align-items: flex-end;
flex: 1;
min-width: 0;
}
.stepGroup:last-child {
flex: 0 0 auto;
}
.stepUnit {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.stepDot {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
background: rgba(148, 163, 184, 0.2);
color: var(--text-muted);
border: 2px solid transparent;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.stepLabel {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
transition: color 0.2s;
}
.stepActive .stepDot {
background: rgba(var(--primary-rgb) / 0.15);
color: var(--primary);
border-color: var(--primary);
}
.stepActive .stepLabel {
color: var(--primary);
}
.stepDone .stepDot {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.stepDone .stepLabel {
color: var(--text-secondary);
}
.connector {
flex: 1;
height: 2px;
min-width: 24px;
margin: 0 8px 13px;
background: rgba(148, 163, 184, 0.3);
border-radius: 1px;
transition: background 0.2s;
}
.connectorDone {
background: var(--primary);
}
.body {
display: flex;
flex-direction: column;
gap: 10px;
min-height: 180px;
}
.stepTitle {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
}
.stepDesc {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
}
.form {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 8px;
}
.fieldRow {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.priceRow {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 12px;
align-items: end;
}
.checkRow {
display: inline-flex;
align-items: center;
align-self: end;
gap: 8px;
height: var(--field-height);
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
user-select: none;
box-sizing: border-box;
}
.checkRow input[type='checkbox'] {
width: 16px;
height: 16px;
accent-color: var(--primary);
cursor: pointer;
flex-shrink: 0;
margin: 0;
}
.fieldRowTriple {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
.locationRow {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 12px;
align-items: end;
}
.col2 {
grid-column: span 2;
}
.col3 {
grid-column: span 3;
}
.col4 {
grid-column: span 4;
}
.col6 {
grid-column: span 6;
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field label {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
}
.optional {
font-weight: 400;
color: var(--text-muted);
}
.field input,
.field select,
.field textarea {
width: 100%;
font-size: var(--field-font-size);
font-family: var(--font-ui);
color: var(--text-primary);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
.field input,
.field select {
min-height: var(--field-height);
padding: var(--field-padding-y) var(--field-padding-x);
}
.field textarea {
padding: var(--field-padding-y) var(--field-padding-x);
resize: vertical;
min-height: 96px;
line-height: 1.5;
}
.field input::placeholder,
.field textarea::placeholder {
font-family: var(--font-ui);
color: var(--text-muted);
opacity: 1;
}
.field select {
appearance: none;
-webkit-appearance: none;
padding-inline-end: var(--select-padding-end);
background-color: var(--surface);
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;
}
:global([dir='rtl']) .field select {
background-position: left var(--select-arrow-offset) center;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
}
.sectionDivider {
display: flex;
align-items: center;
gap: 12px;
margin-top: 4px;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sectionDivider::before,
.sectionDivider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(148, 163, 184, 0.25);
}
.thumbnailBlock {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.thumbnailBlock > .field {
grid-column: 5 / span 4;
}
@media (max-width: 720px) {
.thumbnailBlock > .field {
grid-column: 1 / -1;
}
}
.chipGrid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip {
padding: 7px 14px;
font-size: 13px;
font-weight: 500;
font-family: var(--font-ui);
color: var(--text-secondary);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 50px;
transition: all 0.15s;
}
.chip:hover {
border-color: var(--primary);
color: var(--primary);
}
.chipSelected {
background: rgba(var(--primary-rgb) / 0.12);
border-color: var(--primary);
color: var(--primary);
}
.conditionFieldset {
margin: 0;
padding: 0;
border: none;
}
.conditionFieldset legend {
margin-bottom: 8px;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
}
.radioGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.radioCard {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--field-height);
padding: var(--field-padding-y) 8px;
font-size: 12px;
font-family: var(--font-ui);
color: var(--text-primary);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
text-align: center;
}
.radioCard:hover {
border-color: var(--primary);
}
.radioCard:has(input:checked) {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.16);
}
.radioCard input {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--primary);
flex-shrink: 0;
}
.radioCard span {
min-width: 0;
line-height: 1.25;
}
@media (max-width: 720px) {
.radioGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.inlineStatus {
margin: 4px 0 0;
font-size: 13px;
color: var(--text-muted);
}
.placeholder {
margin-top: 8px;
padding: 28px 20px;
text-align: center;
font-size: 13px;
color: var(--text-muted);
background: color-mix(in srgb, var(--surface) 70%, transparent);
border: 1px dashed var(--glass-border);
border-radius: var(--radius-sm);
}
.error {
margin-top: 8px;
font-size: 13px;
color: #fca5a5;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.28);
border-radius: var(--radius-sm);
padding: 10px 12px;
}
.actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(148, 163, 184, 0.25);
}
.ghostBtn,
.secondaryBtn,
.primaryBtn {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
line-height: 1.4;
border-radius: var(--radius-sm);
transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s, background 0.2s, color 0.2s;
white-space: nowrap;
}
.ghostBtn {
padding: 10px 4px;
color: var(--text-secondary);
text-decoration: none;
background: transparent;
}
.ghostBtn:hover {
color: var(--primary);
}
.secondaryBtn {
padding: 10px 18px;
color: var(--text-primary);
background: rgba(148, 163, 184, 0.16);
border: 1px solid var(--glass-border);
}
.secondaryBtn:hover {
background: rgba(148, 163, 184, 0.24);
}
.primaryBtn {
margin-inline-start: auto;
padding: 10px 22px;
color: white;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
box-shadow: 0 4px 14px rgba(var(--primary-rgb) / 0.35);
}
.primaryBtn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(var(--primary-rgb) / 0.4);
}
@media (max-width: 720px) {
.fieldRow,
.fieldRowTriple,
.priceRow,
.locationRow {
grid-template-columns: 1fr;
}
.col2,
.col3,
.col4,
.col6 {
grid-column: auto;
}
}
@media (max-width: 520px) {
.stepLabel {
font-size: 11px;
}
.connector {
min-width: 12px;
margin: 0 4px 13px;
}
.actions {
flex-direction: column-reverse;
align-items: stretch;
}
.primaryBtn,
.secondaryBtn,
.ghostBtn {
width: 100%;
margin-inline-start: 0;
text-align: center;
}
}
apps/business/src/pages/AddCustomerProductPage.tsx
+891
View File
@@ -0,0 +1,891 @@
import { useEffect, useRef, useState } from 'react'
import { Link, useNavigate, useParams } from 'react-router-dom'
import { Check, ClipboardList, Images, SlidersHorizontal } from 'lucide-react'
import {
getLocationOptionLabel,
useLocale,
type CityOption,
} from '@meshkee/dashboard-ui'
import { Breadcrumbs } from '../components/Breadcrumbs'
import { useToast } from '../context/ToastContext'
import pageStyles from '../components/PageContent.module.css'
import { CitySearchSelect } from '../components/CitySearchSelect'
import { CategorySearchSelect } from '../components/CategorySearchSelect'
import { ImageCropper } from '../components/ImageCropper'
import { ImageUploader } from '../components/ImageUploader'
import { useT } from '../i18n/useT'
import { translate } from '../i18n/messages'
import { ApiError, isAbortError } from '../lib/api'
import {
listCitiesByCountrySlug,
listCountries,
} from '../services/citiesService'
import {
buildTechnicalValuesPayload,
createUserProduct,
getUserProduct,
getUserProductCategoryTechnicalForm,
listUserProductCategories,
updateUserProduct,
type TechnicalFormField,
type TechnicalFormValues,
type UserProductCategoryOption,
type UserProductCondition,
type UserProductPriceCurrency,
type UserProductTechnicalValueInput,
} from '../services/userProductsService'
import { resolveDataUrlToMediaId, resolveDataUrlsToMediaIds } from '../services/mediaService'
import { formatIrtInput, parseIrtInput } from '../utils/irtPrice'
import styles from './AddCustomerProductPage.module.css'
type StepId = 1 | 2 | 3
const PRICE_UNITS: UserProductPriceCurrency[] = ['IRT', 'USD', 'EUR', 'AED']
const CONDITIONS: UserProductCondition[] = [
'new',
'stock',
'needs_repair',
'scrap',
]
function fieldLabel(field: TechnicalFormField) {
return field.label
}
function optionLabel(option: TechnicalFormField['options'][number]) {
return option.label
}
function mapTechnicalValues(
items: UserProductTechnicalValueInput[],
): TechnicalFormValues {
const values: TechnicalFormValues = {}
for (const item of items) {
if (item.textValue != null) {
values[item.fieldId] = item.textValue
continue
}
if (item.optionId) {
values[item.fieldId] = item.optionId
continue
}
if (item.optionIds?.length) {
values[item.fieldId] = item.optionIds
}
}
return values
}
function isCondition(value: string | null | undefined): value is UserProductCondition {
return (
value === 'new' ||
value === 'stock' ||
value === 'needs_repair' ||
value === 'scrap'
)
}
function isPriceCurrency(
value: string | null | undefined,
): value is UserProductPriceCurrency {
return (
value === 'IRT' || value === 'USD' || value === 'EUR' || value === 'AED'
)
}
export function AddCustomerProductPage() {
const t = useT()
const { locale } = useLocale()
const navigate = useNavigate()
const { id } = useParams<{ id?: string }>()
const isEdit = Boolean(id)
const { showToast } = useToast()
const [loaded, setLoaded] = useState(!isEdit)
const [step, setStep] = useState<StepId>(1)
const [stepError, setStepError] = useState('')
const [submitting, setSubmitting] = useState(false)
const pendingTechnicalValuesRef = useRef<TechnicalFormValues | null>(null)
const [categories, setCategories] = useState<UserProductCategoryOption[]>([])
const [loadingCategories, setLoadingCategories] = useState(false)
const [categoryId, setCategoryId] = useState('')
const [titleFa, setTitleFa] = useState('')
const [titleEn, setTitleEn] = useState('')
const [description, setDescription] = useState('')
const [priceInput, setPriceInput] = useState('')
const [priceUnit, setPriceUnit] = useState<UserProductPriceCurrency>('IRT')
const [priceByExpert, setPriceByExpert] = useState(false)
const [countries, setCountries] = useState<CityOption[]>([])
const [cities, setCities] = useState<CityOption[]>([])
const [countrySlug, setCountrySlug] = useState('')
const [countryId, setCountryId] = useState('')
const [cityId, setCityId] = useState('')
const [deliveryNote, setDeliveryNote] = useState('')
const [loadingLocations, setLoadingLocations] = useState(false)
const [thumbnail, setThumbnail] = useState<string | null>(null)
const [featuredMediaId, setFeaturedMediaId] = useState<string | null>(null)
const [gallery, setGallery] = useState<string[]>([])
const [galleryMediaIds, setGalleryMediaIds] = useState<string[]>([])
const [condition, setCondition] = useState<UserProductCondition>('new')
const [technicalNotes, setTechnicalNotes] = useState('')
const [technicalFields, setTechnicalFields] = useState<TechnicalFormField[]>([])
const [technicalValues, setTechnicalValues] = useState<TechnicalFormValues>({})
const [loadingTechnicalForm, setLoadingTechnicalForm] = useState(false)
const steps: { id: StepId; label: string }[] = [
{ id: 1, label: t('customerProducts.form.step.basics') },
{ id: 2, label: t('customerProducts.form.step.images') },
{ id: 3, label: t('customerProducts.form.step.technical') },
]
const stepIcon =
step === 1 ? (
<ClipboardList size={40} strokeWidth={1.4} />
) : step === 2 ? (
<Images size={40} strokeWidth={1.4} />
) : (
<SlidersHorizontal size={40} strokeWidth={1.4} />
)
const stepLabelKey =
step === 1
? 'customerProducts.form.step.basics'
: step === 2
? 'customerProducts.form.step.images'
: 'customerProducts.form.step.technical'
const stepNameFa = translate('fa', stepLabelKey)
const stepNameEn = translate('en', stepLabelKey)
useEffect(() => {
const controller = new AbortController()
setLoadingLocations(true)
void listCountries(controller.signal)
.then((items) => {
if (!controller.signal.aborted) setCountries(items)
})
.catch((err) => {
if (!isAbortError(err)) setStepError(t('customerProducts.form.error.loadLocations'))
})
.finally(() => {
if (!controller.signal.aborted) setLoadingLocations(false)
})
return () => controller.abort()
}, [t])
useEffect(() => {
const controller = new AbortController()
setLoadingCategories(true)
void listUserProductCategories(controller.signal)
.then((response) => {
if (!controller.signal.aborted) setCategories(response.items)
})
.catch((err) => {
if (!isAbortError(err)) setStepError(t('customerProducts.form.error.loadCategories'))
})
.finally(() => {
if (!controller.signal.aborted) setLoadingCategories(false)
})
return () => controller.abort()
}, [t])
useEffect(() => {
if (!isEdit || !id) return
const controller = new AbortController()
async function loadProduct() {
setStepError('')
try {
const response = await getUserProduct(id!, controller.signal)
if (controller.signal.aborted) return
const product = response.product
pendingTechnicalValuesRef.current = mapTechnicalValues(
product.technicalValues ?? [],
)
setCategoryId(product.categoryId ?? '')
setTitleFa(product.titleFa ?? product.title ?? '')
setTitleEn(product.titleEn ?? '')
setDescription(product.description ?? '')
setPriceInput(
product.price != null ? formatIrtInput(String(product.price)) : '',
)
setPriceUnit(
isPriceCurrency(product.priceCurrency)
? product.priceCurrency
: 'IRT',
)
setPriceByExpert(product.priceByExpert === true)
setCountrySlug(product.countrySlug)
setCountryId(product.countryId)
setCityId(product.cityId)
setDeliveryNote(product.deliveryNote ?? '')
setThumbnail(product.imageUrl)
setFeaturedMediaId(product.featuredMediaId)
setGallery((product.images ?? []).map((item) => item.url))
setGalleryMediaIds(product.galleryMediaIds ?? [])
setCondition(isCondition(product.condition) ? product.condition : 'new')
setTechnicalNotes(product.technicalNotes ?? '')
if (product.countrySlug) {
setCities(await listCitiesByCountrySlug(product.countrySlug))
}
if (!controller.signal.aborted) setLoaded(true)
} catch (err) {
if (isAbortError(err) || controller.signal.aborted) return
showToast(
err instanceof ApiError ? err.message : t('customerProducts.form.error.load'),
'error',
)
navigate('/customer-products', { replace: true })
}
}
void loadProduct()
return () => controller.abort()
}, [isEdit, id, navigate, showToast, t])
useEffect(() => {
if (!pendingTechnicalValuesRef.current) {
setTechnicalValues({})
}
setTechnicalFields([])
if (!categoryId) return
const controller = new AbortController()
setLoadingTechnicalForm(true)
void getUserProductCategoryTechnicalForm(categoryId, controller.signal)
.then((response) => {
if (controller.signal.aborted) return
setTechnicalFields(response.form?.fields ?? [])
if (pendingTechnicalValuesRef.current) {
setTechnicalValues(pendingTechnicalValuesRef.current)
pendingTechnicalValuesRef.current = null
}
})
.catch((err) => {
if (!isAbortError(err)) {
setTechnicalFields([])
setStepError(t('customerProducts.form.error.loadTechnicalForm'))
}
})
.finally(() => {
if (!controller.signal.aborted) setLoadingTechnicalForm(false)
})
return () => controller.abort()
}, [categoryId, t])
async function handleCountryChange(nextSlug: string) {
setCountrySlug(nextSlug)
setCountryId(countries.find((item) => item.slug === nextSlug)?.id ?? '')
setCityId('')
setCities([])
if (!nextSlug) return
setLoadingLocations(true)
try {
setCities(await listCitiesByCountrySlug(nextSlug))
} catch {
setStepError(t('customerProducts.form.error.loadLocations'))
} finally {
setLoadingLocations(false)
}
}
function validateStep1() {
if (!categoryId) return t('customerProducts.form.error.categoryRequired')
if (!titleFa.trim()) return t('customerProducts.form.error.titleFaRequired')
if (!countryId || !cityId) {
return t('customerProducts.form.error.locationRequired')
}
const price = parseIrtInput(priceInput)
if (priceInput.trim() && (price === null || price < 0)) {
return t('customerProducts.form.error.priceInvalid')
}
return ''
}
function validateStep3() {
if (!condition) return t('customerProducts.form.error.conditionRequired')
for (const field of technicalFields) {
if (!field.isRequired) continue
const value = technicalValues[field.id]
const ok =
field.type === 'multi_select'
? Array.isArray(value) && value.length > 0
: typeof value === 'string' && value.trim().length > 0
if (!ok) {
return t('customerProducts.form.error.technicalRequired')
}
}
return ''
}
function goNext() {
setStepError('')
if (step === 1) {
const error = validateStep1()
if (error) {
setStepError(error)
return
}
setStep(2)
return
}
if (step === 2) setStep(3)
}
function goBack() {
setStepError('')
if (step === 2) setStep(1)
if (step === 3) setStep(2)
}
async function handleSubmit() {
setStepError('')
const validationError = validateStep3()
if (validationError) {
setStepError(validationError)
return
}
const price = parseIrtInput(priceInput)
setSubmitting(true)
try {
let nextFeaturedMediaId = featuredMediaId
if (thumbnail?.startsWith('data:')) {
nextFeaturedMediaId = await resolveDataUrlToMediaId(
thumbnail,
'user-product-thumbnail.jpg',
featuredMediaId,
)
} else if (!thumbnail) {
nextFeaturedMediaId = null
}
const nextGalleryMediaIds = await resolveDataUrlsToMediaIds(
gallery,
galleryMediaIds,
)
const payload = {
titleFa: titleFa.trim(),
titleEn: titleEn.trim() || undefined,
description: description.trim() || undefined,
categoryId,
price: price ?? undefined,
priceCurrency: priceUnit,
priceByExpert,
countryId,
cityId,
deliveryNote: deliveryNote.trim() || undefined,
condition,
technicalNotes: technicalNotes.trim() || undefined,
technicalValues: buildTechnicalValuesPayload(technicalFields, technicalValues),
featuredMediaId: nextFeaturedMediaId || undefined,
galleryMediaIds: nextGalleryMediaIds,
}
if (isEdit && id) {
await updateUserProduct(id, payload)
showToast(t('customerProducts.form.updateSuccess'), 'success')
} else {
await createUserProduct(payload)
showToast(t('customerProducts.form.submitSuccess'), 'success')
}
navigate('/customer-products')
} catch (err) {
setStepError(
err instanceof ApiError
? err.message
: isEdit
? t('customerProducts.form.error.update')
: t('customerProducts.form.error.submit'),
)
} finally {
setSubmitting(false)
}
}
function setTechnicalField(fieldId: string, value: string | string[]) {
setTechnicalValues((prev) => ({ ...prev, [fieldId]: value }))
}
function toggleMultiOption(fieldId: string, optionId: string) {
setTechnicalValues((prev) => {
const current = prev[fieldId]
const selected = Array.isArray(current) ? current : []
const next = selected.includes(optionId)
? selected.filter((item) => item !== optionId)
: [...selected, optionId]
return { ...prev, [fieldId]: next }
})
}
function renderTechnicalField(field: TechnicalFormField) {
const value = technicalValues[field.id]
const id = `tech-${field.id}`
if (field.type === 'textarea') {
return (
<textarea
id={id}
value={typeof value === 'string' ? value : ''}
onChange={(e) => setTechnicalField(field.id, e.target.value)}
rows={4}
/>
)
}
if (field.type === 'select') {
return (
<select
id={id}
value={typeof value === 'string' ? value : ''}
onChange={(e) => setTechnicalField(field.id, e.target.value)}
>
<option value="">{t('customerProducts.form.technical.select')}</option>
{field.options.map((option) => (
<option key={option.id} value={option.id}>
{optionLabel(option)}
</option>
))}
</select>
)
}
if (field.type === 'multi_select') {
const selected = Array.isArray(value) ? value : []
return (
<div className={styles.chipGrid}>
{field.options.map((option) => (
<button
key={option.id}
type="button"
className={`${styles.chip} ${selected.includes(option.id) ? styles.chipSelected : ''}`}
onClick={() => toggleMultiOption(field.id, option.id)}
>
{optionLabel(option)}
</button>
))}
</div>
)
}
return (
<input
id={id}
type="text"
value={typeof value === 'string' ? value : ''}
onChange={(e) => setTechnicalField(field.id, e.target.value)}
/>
)
}
if (!loaded) {
return (
<main className={pageStyles.content}>
<p className={styles.inlineStatus}>{t('customerProducts.form.loading')}</p>
</main>
)
}
return (
<main className={pageStyles.content}>
<Breadcrumbs
items={[
{ label: t('nav.home'), href: '/' },
{ label: t('customerProducts.title'), href: '/customer-products' },
{
label: isEdit
? t('customerProducts.edit')
: t('customerProducts.add'),
},
]}
/>
<div className={styles.shell}>
<aside className={styles.iconRail} aria-hidden>
<div className={styles.iconRailInner}>
<span className={styles.iconRailGlyph}>{stepIcon}</span>
<span className={styles.iconRailLabelFa}>{stepNameFa}</span>
<span className={styles.iconRailLabelEn}>{stepNameEn}</span>
</div>
</aside>
<div className={styles.card}>
<div className={styles.root}>
<nav className={styles.stepper} aria-label={t('customerProducts.form.stepperLabel')}>
{steps.map((item, index) => {
const isDone = step > item.id
const isActive = step === item.id
const connectorDone = step > item.id
return (
<div key={item.id} className={styles.stepGroup}>
<div
className={[
styles.stepUnit,
isActive ? styles.stepActive : '',
isDone ? styles.stepDone : '',
]
.filter(Boolean)
.join(' ')}
>
<span className={styles.stepLabel}>{item.label}</span>
<span className={styles.stepDot} aria-hidden>
{isDone ? <Check size={14} /> : index + 1}
</span>
</div>
{index < steps.length - 1 && (
<div
className={[
styles.connector,
connectorDone ? styles.connectorDone : '',
]
.filter(Boolean)
.join(' ')}
aria-hidden
/>
)}
</div>
)
})}
</nav>
<div className={styles.body} key={step}>
{step === 1 && (
<>
<h2 className={styles.stepTitle}>
{isEdit ? t('customerProducts.form.editTitle') : t('customerProducts.form.step.basics')}
</h2>
<p className={styles.stepDesc}>
{isEdit
? t('customerProducts.form.editSubtitle')
: t('customerProducts.form.step.basicsHint')}
</p>
<div className={styles.form}>
<div className={styles.field}>
<label htmlFor="add-category">{t('customerProducts.form.fields.category')}</label>
<CategorySearchSelect
id="add-category"
options={categories}
value={categoryId}
onChange={setCategoryId}
disabled={loadingCategories}
placeholder={t('customerProducts.form.fields.searchCategory')}
/>
</div>
<div className={styles.fieldRow}>
<div className={styles.field}>
<label htmlFor="add-title-fa">{t('customerProducts.form.fields.titleFa')}</label>
<input
id="add-title-fa"
type="text"
value={titleFa}
onChange={(e) => setTitleFa(e.target.value)}
placeholder={t('customerProducts.form.fields.titleFaPlaceholder')}
/>
</div>
<div className={styles.field}>
<label htmlFor="add-title-en">{t('customerProducts.form.fields.titleEn')}</label>
<input
id="add-title-en"
type="text"
value={titleEn}
onChange={(e) => setTitleEn(e.target.value)}
placeholder={t('customerProducts.form.fields.titleEnPlaceholder')}
dir="ltr"
/>
</div>
</div>
<div className={styles.field}>
<label htmlFor="add-description">{t('customerProducts.form.fields.description')}</label>
<textarea
id="add-description"
rows={4}
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder={t('customerProducts.form.fields.descriptionPlaceholder')}
/>
</div>
<div className={styles.priceRow}>
<label
className={`${styles.checkRow} ${styles.col6}`}
htmlFor="add-price-by-expert"
>
<input
id="add-price-by-expert"
type="checkbox"
checked={priceByExpert}
onChange={(e) => setPriceByExpert(e.target.checked)}
/>
<span>{t('customerProducts.form.fields.priceByExpert')}</span>
</label>
<div className={`${styles.field} ${styles.col4}`}>
<label htmlFor="add-price">
{priceByExpert
? t('customerProducts.form.fields.priceSuggested')
: t('customerProducts.form.fields.price')}
</label>
<input
id="add-price"
type="text"
inputMode="numeric"
value={priceInput}
onChange={(e) => setPriceInput(formatIrtInput(e.target.value))}
placeholder={t('customerProducts.form.fields.pricePlaceholder')}
dir="ltr"
/>
</div>
<div className={`${styles.field} ${styles.col2}`}>
<label htmlFor="add-price-unit">{t('customerProducts.form.fields.priceUnit')}</label>
<select
id="add-price-unit"
value={priceUnit}
onChange={(e) =>
setPriceUnit(e.target.value as UserProductPriceCurrency)
}
>
{PRICE_UNITS.map((unit) => (
<option key={unit} value={unit}>
{t(`customerProducts.form.fields.priceUnit.${unit}`)}
</option>
))}
</select>
</div>
</div>
<div className={styles.sectionDivider}>
<span>{t('customerProducts.form.fields.location')}</span>
</div>
<div className={styles.locationRow}>
<div className={`${styles.field} ${styles.col2}`}>
<label htmlFor="add-country">{t('customerProducts.form.fields.country')}</label>
<select
id="add-country"
value={countrySlug}
disabled={loadingLocations}
onChange={(e) => void handleCountryChange(e.target.value)}
>
<option value="">{t('customerProducts.form.fields.selectCountry')}</option>
{countries.map((country) => (
<option key={country.id} value={country.slug}>
{getLocationOptionLabel(country, locale)}
</option>
))}
</select>
</div>
<div className={`${styles.field} ${styles.col4}`}>
<label htmlFor="add-city">{t('customerProducts.form.fields.city')}</label>
<CitySearchSelect
id="add-city"
options={cities}
value={cityId}
onChange={setCityId}
disabled={!countrySlug || loadingLocations}
placeholder={t('customerProducts.form.fields.searchCity')}
/>
</div>
<div className={`${styles.field} ${styles.col6}`}>
<label htmlFor="add-delivery-note">
{t('customerProducts.form.fields.deliveryNote')}
<span className={styles.optional}> {t('customerProducts.form.optional')}</span>
</label>
<input
id="add-delivery-note"
type="text"
value={deliveryNote}
onChange={(e) => setDeliveryNote(e.target.value)}
placeholder={t('customerProducts.form.fields.deliveryNotePlaceholder')}
/>
</div>
</div>
</div>
</>
)}
{step === 2 && (
<>
<h2 className={styles.stepTitle}>{t('customerProducts.form.step.images')}</h2>
<p className={styles.stepDesc}>{t('customerProducts.form.step.imagesHint')}</p>
<div className={styles.form}>
<div className={styles.thumbnailBlock}>
<div className={styles.field}>
<label>{t('customerProducts.form.images.thumbnail')}</label>
<ImageCropper
value={thumbnail}
onChange={(value) => {
setThumbnail(value)
if (!value || value.startsWith('data:')) {
setFeaturedMediaId(null)
}
}}
aspect={1}
hint={t('customerProducts.form.images.thumbnailHint')}
/>
</div>
</div>
<div className={styles.sectionDivider}>
<span>{t('customerProducts.form.images.gallery')}</span>
</div>
<div className={styles.field}>
<ImageUploader
images={gallery}
onChange={(next) => {
const prevUrlToId = new Map(
gallery.map((url, index) => [
url,
galleryMediaIds[index] ?? '',
]),
)
setGallery(next)
setGalleryMediaIds(
next.map((url) =>
url.startsWith('data:')
? ''
: prevUrlToId.get(url) ?? '',
),
)
}}
/>
</div>
</div>
</>
)}
{step === 3 && (
<>
<h2 className={styles.stepTitle}>{t('customerProducts.form.step.technical')}</h2>
<p className={styles.stepDesc}>{t('customerProducts.form.step.technicalHint')}</p>
<div className={styles.form}>
<fieldset className={styles.conditionFieldset}>
<legend>{t('customerProducts.form.fields.condition')}</legend>
<div className={styles.radioGrid} role="radiogroup">
{CONDITIONS.map((value) => (
<label key={value} className={styles.radioCard}>
<input
type="radio"
name="product-condition"
value={value}
checked={condition === value}
onChange={() => setCondition(value)}
/>
<span>{t(`customerProducts.form.condition.${value}`)}</span>
</label>
))}
</div>
</fieldset>
<div className={styles.field}>
<label htmlFor="add-technical-notes">
{t('customerProducts.form.fields.technicalNotes')}
<span className={styles.optional}> {t('customerProducts.form.optional')}</span>
</label>
<textarea
id="add-technical-notes"
rows={4}
value={technicalNotes}
onChange={(e) => setTechnicalNotes(e.target.value)}
placeholder={t('customerProducts.form.fields.technicalNotesPlaceholder')}
/>
</div>
<div className={styles.sectionDivider}>
<span>{t('customerProducts.form.technical.categoryForm')}</span>
</div>
{!categoryId ? (
<div className={styles.placeholder}>
{t('customerProducts.form.technical.needCategory')}
</div>
) : loadingTechnicalForm ? (
<p className={styles.inlineStatus}>{t('customerProducts.form.technical.loading')}</p>
) : technicalFields.length === 0 ? (
<div className={styles.placeholder}>{t('customerProducts.form.technical.empty')}</div>
) : (
technicalFields.map((field) => (
<div key={field.id} className={styles.field}>
<label htmlFor={`tech-${field.id}`}>
{fieldLabel(field)}
{field.isRequired ? (
' *'
) : (
<span className={styles.optional}> {t('customerProducts.form.optional')}</span>
)}
</label>
{renderTechnicalField(field)}
</div>
))
)}
</div>
</>
)}
{stepError ? (
<div className={styles.error} role="alert">
{stepError}
</div>
) : null}
</div>
<div className={styles.actions}>
{step === 1 ? (
<Link to="/customer-products" className={styles.ghostBtn}>
{t('customerProducts.form.cancel')}
</Link>
) : (
<button
type="button"
className={styles.secondaryBtn}
onClick={goBack}
disabled={submitting}
>
{t('customerProducts.form.back')}
</button>
)}
{step < 3 ? (
<button type="button" className={styles.primaryBtn} onClick={goNext}>
{t('customerProducts.form.next')}
</button>
) : (
<button
type="button"
className={styles.primaryBtn}
onClick={() => void handleSubmit()}
disabled={submitting || loadingTechnicalForm}
>
{submitting
? t('customerProducts.form.submitting')
: isEdit
? t('customerProducts.form.save')
: t('customerProducts.form.submit')}
</button>
)}
</div>
</div>
</div>
</div>
</main>
)
}
apps/business/src/pages/BlogDetailsPage.module.css
+3 -5
View File
@@ -7,7 +7,6 @@
width: 100%;
max-width: 640px;
margin: 0 auto 20px;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: var(--radius);
background: rgba(148, 163, 184, 0.08);
@@ -15,15 +14,14 @@
}
.heroImage {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
width: 100%;
height: auto;
}
.heroPlaceholder {
width: 100%;
height: 100%;
aspect-ratio: 3 / 2;
background: linear-gradient(
135deg,
rgba(148, 163, 184, 0.12) 0%,
apps/business/src/pages/CategoriesPage.tsx
+1
View File
@@ -528,6 +528,7 @@ export function CategoriesPage() {
isGenerating={technicalGenerating}
error={technicalError}
onClose={() => !technicalSaving && !technicalGenerating && setTechnicalTarget(null)}
escapeDisabled={techAiPromptOpen}
onChange={(fields) => {
setCategoryTechnicalFields((prev) => ({
...prev,
apps/business/src/pages/CustomerProductDetailsPage.module.css
+338
View File
@@ -0,0 +1,338 @@
.headerRow {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 8px;
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.editBtn,
.secondaryBtn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: var(--field-height);
padding: var(--field-padding-y) 14px;
border-radius: var(--radius-sm);
font-size: var(--field-font-size);
font-weight: 600;
font-family: var(--font-ui);
white-space: nowrap;
}
.editBtn {
color: #fff;
background: var(--primary);
}
.editBtn:hover {
filter: brightness(1.05);
}
.secondaryBtn {
color: var(--text-primary);
background: rgba(148, 163, 184, 0.14);
border: 1px solid rgba(148, 163, 184, 0.2);
}
.secondaryBtn:hover {
background: rgba(148, 163, 184, 0.22);
}
.layout {
display: grid;
grid-template-columns: minmax(0, 320px) 1fr;
gap: 28px;
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;
}
.gallery {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 320px;
}
.mainImage {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.15);
overflow: hidden;
background: #ffffff;
}
.galleryThumbs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.galleryThumb {
aspect-ratio: 1 / 1;
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.15);
overflow: hidden;
background: #ffffff;
}
.galleryThumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.imagePlaceholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(148, 163, 184, 0.75);
}
.badge {
position: absolute;
top: 10px;
inset-inline-start: 10px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(14px);
z-index: 1;
}
.badge[data-status='draft'] {
color: #fff;
background: linear-gradient(
145deg,
rgba(251, 191, 36, 0.55) 0%,
rgba(245, 158, 11, 0.32) 100%
);
}
.badge[data-status='published'] {
color: #047857;
background: linear-gradient(
145deg,
rgba(167, 243, 208, 0.55) 0%,
rgba(52, 211, 153, 0.28) 100%
);
}
.badge[data-status='archived'] {
color: #e2e8f0;
background: linear-gradient(
145deg,
rgba(148, 163, 184, 0.45) 0%,
rgba(100, 116, 139, 0.28) 100%
);
}
.badge[data-status='rejected'] {
color: #fff;
background: linear-gradient(
145deg,
rgba(239, 68, 68, 0.55) 0%,
rgba(220, 38, 38, 0.32) 100%
);
}
.details {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.categoryChip {
align-self: flex-start;
padding: 4px 12px;
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
background: rgba(148, 163, 184, 0.15);
border-radius: 50px;
}
.title {
margin: 0;
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.3;
font-family: var(--font-ui);
}
.secondary {
margin: 0;
font-size: 14px;
color: var(--text-secondary);
font-family: var(--font-ui);
}
.summaryRow {
display: flex;
align-items: center;
gap: 12px 16px;
flex-wrap: wrap;
direction: ltr;
}
.price {
margin: 0;
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
white-space: nowrap;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.summaryMeta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 14px;
margin-inline-start: auto;
min-width: 0;
}
.metaItem {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-secondary);
font-family: var(--font-ui);
min-width: 0;
}
.metaGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px 16px;
margin: 4px 0 0;
}
.metaGrid dt {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 4px;
}
.metaGrid dd {
margin: 0;
font-size: 13px;
color: var(--text-primary);
font-family: var(--font-ui);
}
.location {
display: inline-flex;
align-items: center;
gap: 6px;
}
.section {
padding-top: 8px;
border-top: 1px solid rgba(148, 163, 184, 0.15);
}
.section h3 {
margin: 0 0 8px;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
}
.prose {
margin: 0;
font-size: 13px;
line-height: 1.65;
color: var(--text-primary);
white-space: pre-wrap;
font-family: var(--font-ui);
}
.techGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin: 0;
}
.techGrid dt {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 4px;
}
.techGrid dd {
margin: 0;
font-size: 13px;
color: var(--text-primary);
font-family: var(--font-ui);
}
.status {
margin: 24px 0;
font-size: 14px;
color: var(--text-secondary);
}
.error {
margin: 24px 0;
font-size: 14px;
color: #ef4444;
}
.backLink {
color: var(--primary);
font-weight: 600;
text-decoration: none;
}
.backLink:hover {
text-decoration: underline;
}
@media (max-width: 800px) {
.headerRow {
flex-direction: column;
}
.layout {
grid-template-columns: 1fr;
padding: 16px;
}
.gallery {
max-width: none;
}
}
apps/business/src/pages/CustomerProductDetailsPage.tsx
+331
View File
@@ -0,0 +1,331 @@
import { useEffect, useMemo, useState } from 'react'
import { Link, useNavigate, useParams } from 'react-router-dom'
import { ImageOff, MapPin, Pencil, User } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { Breadcrumbs } from '../components/Breadcrumbs'
import { UserProductStatusModal } from '../components/UserProductStatusModal'
import { useToast } from '../context/ToastContext'
import { useT } from '../i18n/useT'
import { ApiError, isAbortError } from '../lib/api'
import {
getUserProduct,
getUserProductCategoryTechnicalForm,
updateUserProductStatus,
type TechnicalFormField,
type UserProductDetail,
type UserProductTechnicalValueInput,
} from '../services/userProductsService'
import type { UserProductStatus } from '../types/userProduct'
import { formatIrtPrice } from '../utils/irtPrice'
import pageStyles from '../components/PageContent.module.css'
import styles from './CustomerProductDetailsPage.module.css'
function formatTechnicalValue(
field: TechnicalFormField,
value: UserProductTechnicalValueInput | undefined,
): string {
if (!value) return '—'
if (value.textValue != null && value.textValue.trim()) return value.textValue
if (value.optionId) {
return field.options.find((option) => option.id === value.optionId)?.label ?? value.optionId
}
if (value.optionIds?.length) {
return value.optionIds
.map(
(optionId) =>
field.options.find((option) => option.id === optionId)?.label ?? optionId,
)
.join(', ')
}
return '—'
}
export function CustomerProductDetailsPage() {
const { id } = useParams<{ id: string }>()
const t = useT()
const { locale } = useLocale()
const navigate = useNavigate()
const { showToast } = useToast()
const isFa = locale === 'fa'
const [product, setProduct] = useState<UserProductDetail | null>(null)
const [technicalFields, setTechnicalFields] = useState<TechnicalFormField[]>([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState('')
const [statusOpen, setStatusOpen] = useState(false)
const [statusSaving, setStatusSaving] = useState(false)
useEffect(() => {
if (!id) return
const controller = new AbortController()
async function load() {
setLoading(true)
setError('')
try {
const response = await getUserProduct(id!, controller.signal)
if (controller.signal.aborted) return
setProduct(response.product)
if (response.product.categoryId) {
const formResponse = await getUserProductCategoryTechnicalForm(
response.product.categoryId,
controller.signal,
)
if (controller.signal.aborted) return
setTechnicalFields(formResponse.form?.fields ?? [])
} else {
setTechnicalFields([])
}
} catch (err) {
if (isAbortError(err) || controller.signal.aborted) return
const message =
err instanceof ApiError
? err.message
: t('customerProducts.error.loadDetail')
setError(message)
setProduct(null)
} finally {
if (!controller.signal.aborted) setLoading(false)
}
}
void load()
return () => controller.abort()
}, [id, t])
const technicalRows = useMemo(() => {
if (!product) return []
const byField = new Map(
(product.technicalValues ?? []).map((item) => [item.fieldId, item]),
)
return technicalFields.map((field) => ({
id: field.id,
label: field.label,
value: formatTechnicalValue(field, byField.get(field.id)),
}))
}, [product, technicalFields])
async function handleStatusSave(status: UserProductStatus) {
if (!product) return
setStatusSaving(true)
try {
const response = await updateUserProductStatus(product.id, status)
setProduct((prev) => (prev ? { ...prev, ...response.product } : prev))
showToast(t('customerProducts.statusSuccess'), 'success')
setStatusOpen(false)
} catch (err) {
showToast(
err instanceof ApiError
? err.message
: t('customerProducts.error.status'),
'error',
)
} finally {
setStatusSaving(false)
}
}
if (loading) {
return (
<main className={pageStyles.content}>
<p className={styles.status}>{t('customerProducts.loading')}</p>
</main>
)
}
if (error || !product) {
return (
<main className={pageStyles.content}>
<p className={styles.error}>{error || t('customerProducts.error.loadDetail')}</p>
<Link to="/customer-products" className={styles.backLink}>
{t('customerProducts.backToList')}
</Link>
</main>
)
}
const title = isFa ? product.titleFa || product.title : product.titleEn || product.title
const secondary = isFa ? product.titleEn || '' : product.titleFa || ''
const city = isFa ? product.cityNameFa || product.cityName : product.cityName
const country = isFa
? product.countryNameFa || product.countryName
: product.countryName
const category = isFa
? product.categoryNameFa || product.categoryName
: product.categoryName
const owner = isFa ? product.ownerNameFa || product.ownerName : product.ownerName
const imageSrc = product.imageUrl?.trim() || ''
const galleryImages = (product.images ?? [])
.map((item) => item.url?.trim())
.filter((url): url is string => Boolean(url))
const statusLabel =
product.status === 'published'
? t('customerProducts.status.published')
: product.status === 'archived'
? t('customerProducts.status.archived')
: product.status === 'rejected'
? t('customerProducts.status.rejected')
: t('customerProducts.status.pending')
const currency = (product.priceCurrency || 'IRT').toUpperCase()
const priceLabel =
product.price == null
? t('customerProducts.priceUnavailable')
: currency === 'IRT'
? formatIrtPrice(product.price)
: `${Number(product.price).toLocaleString('en-US')} ${currency}`
const conditionKey = product.condition
? `customerProducts.form.condition.${product.condition}`
: ''
const conditionLabel = conditionKey ? t(conditionKey) : '—'
return (
<main className={pageStyles.content}>
<Breadcrumbs
items={[
{ label: t('nav.home'), href: '/' },
{ label: t('customerProducts.title'), href: '/customer-products' },
{ label: title },
]}
/>
<div className={styles.headerRow}>
<div>
<h2 className={pageStyles.pageTitle}>{t('customerProducts.detailsTitle')}</h2>
<p className={pageStyles.pageSubtitle}>{t('customerProducts.detailsSubtitle')}</p>
</div>
<div className={styles.actions}>
<button
type="button"
className={styles.secondaryBtn}
onClick={() => setStatusOpen(true)}
>
{t('customerProducts.statusChange')}
</button>
<button
type="button"
className={styles.editBtn}
onClick={() => navigate(`/customer-products/${product.id}/edit`)}
>
<Pencil size={16} />
{t('customerProducts.edit')}
</button>
</div>
</div>
<div className={styles.layout} dir={isFa ? 'rtl' : 'ltr'}>
<div className={styles.gallery}>
<div className={styles.mainImage}>
{imageSrc ? (
<img src={imageSrc} alt={title} className={styles.image} />
) : (
<div className={styles.imagePlaceholder}>
<ImageOff size={36} strokeWidth={1.5} />
</div>
)}
<span className={styles.badge} data-status={product.status}>
{statusLabel}
</span>
</div>
{galleryImages.length > 0 ? (
<div className={styles.galleryThumbs}>
{galleryImages.map((url) => (
<div key={url} className={styles.galleryThumb}>
<img src={url} alt="" />
</div>
))}
</div>
) : null}
</div>
<div className={styles.details}>
{category ? <span className={styles.categoryChip}>{category}</span> : null}
<h1 className={styles.title}>{title}</h1>
{secondary ? <p className={styles.secondary}>{secondary}</p> : null}
<div className={styles.summaryRow}>
<p className={styles.price} dir="ltr">
{priceLabel}
</p>
<div className={styles.summaryMeta} dir={isFa ? 'rtl' : 'ltr'}>
{owner ? (
<span className={styles.metaItem}>
<User size={14} aria-hidden />
{owner}
</span>
) : null}
<span className={styles.metaItem}>
<MapPin size={14} aria-hidden />
{[city, country].filter(Boolean).join(isFa ? '، ' : ', ') || '—'}
</span>
</div>
</div>
<dl className={styles.metaGrid}>
<div>
<dt>{t('customerProducts.form.fields.country')}</dt>
<dd>{country || '—'}</dd>
</div>
<div>
<dt>{t('customerProducts.form.fields.city')}</dt>
<dd>{city || '—'}</dd>
</div>
<div>
<dt>{t('customerProducts.form.fields.condition')}</dt>
<dd>{conditionLabel}</dd>
</div>
{product.priceByExpert ? (
<div>
<dt>{t('customerProducts.form.fields.priceByExpert')}</dt>
<dd>{t('customerProducts.yes')}</dd>
</div>
) : null}
</dl>
{product.description ? (
<section className={styles.section}>
<h3>{t('customerProducts.form.fields.description')}</h3>
<p className={styles.prose}>{product.description}</p>
</section>
) : null}
{product.deliveryNote ? (
<section className={styles.section}>
<h3>{t('customerProducts.form.fields.deliveryNote')}</h3>
<p className={styles.prose}>{product.deliveryNote}</p>
</section>
) : null}
{product.technicalNotes ? (
<section className={styles.section}>
<h3>{t('customerProducts.form.fields.technicalNotes')}</h3>
<p className={styles.prose}>{product.technicalNotes}</p>
</section>
) : null}
{technicalRows.length > 0 ? (
<section className={styles.section}>
<h3>{t('customerProducts.form.technical.categoryForm')}</h3>
<dl className={styles.techGrid}>
{technicalRows.map((row) => (
<div key={row.id}>
<dt>{row.label}</dt>
<dd>{row.value}</dd>
</div>
))}
</dl>
</section>
) : null}
</div>
</div>
<UserProductStatusModal
open={statusOpen}
currentStatus={product.status}
saving={statusSaving}
onClose={() => setStatusOpen(false)}
onSave={(status) => void handleStatusSave(status)}
/>
</main>
)
}
apps/business/src/pages/CustomerProductsPage.module.css
+84
View File
@@ -0,0 +1,84 @@
.empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 48px 24px;
text-align: center;
font-size: 14px;
color: var(--text-secondary);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
}
.emptyLink {
margin-top: 4px;
color: var(--primary);
font-weight: 600;
text-decoration: none;
}
.emptyLink:hover {
text-decoration: underline;
}
.status,
.error {
margin: 16px 0;
font-size: 14px;
color: var(--text-secondary);
}
.error {
color: #ef4444;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.fabDock {
position: fixed;
inset-inline-end: 32px;
bottom: 32px;
z-index: 110;
}
.addFab {
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);
}
@media (min-width: 640px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1280px) {
.grid {
grid-template-columns: repeat(6, 1fr);
}
}
apps/business/src/pages/CustomerProductsPage.tsx
+248
View File
@@ -0,0 +1,248 @@
import { useEffect, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { Package, Plus } from 'lucide-react'
import { Pagination } from '@meshkee/dashboard-ui'
import { Breadcrumbs } from '../components/Breadcrumbs'
import { UserProductCard } from '../components/UserProductCard'
import { UserProductStatusModal } from '../components/UserProductStatusModal'
import { useToast } from '../context/ToastContext'
import { useT } from '../i18n/useT'
import { ApiError, isAbortError } from '../lib/api'
import {
deleteUserProduct,
listUserProducts,
promoteUserProduct,
updateUserProductStatus,
type UserProductsListResponse,
} from '../services/userProductsService'
import type { UserProductStatus } from '../types/userProduct'
import pageStyles from '../components/PageContent.module.css'
import styles from './CustomerProductsPage.module.css'
const PAGE_SIZE = 24
export function CustomerProductsPage() {
const t = useT()
const navigate = useNavigate()
const { showToast } = useToast()
const [data, setData] = useState<UserProductsListResponse | null>(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState('')
const [page, setPage] = useState(1)
const [busyId, setBusyId] = useState<string | null>(null)
const [busyAction, setBusyAction] = useState<
'remove' | 'promote' | 'status' | null
>(null)
const [statusProductId, setStatusProductId] = useState<string | null>(null)
useEffect(() => {
const controller = new AbortController()
async function load() {
setLoading(true)
setError('')
try {
const response = await listUserProducts(
{ page, pageSize: PAGE_SIZE },
controller.signal,
)
if (controller.signal.aborted) return
setData(response)
} catch (err) {
if (isAbortError(err) || controller.signal.aborted) return
setError(
err instanceof ApiError ? err.message : t('customerProducts.error.load'),
)
} finally {
if (!controller.signal.aborted) setLoading(false)
}
}
void load()
return () => controller.abort()
}, [page, t])
const products = data?.items ?? []
const total = data?.total ?? 0
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
const statusProduct = products.find((item) => item.id === statusProductId)
function handleEdit(id: string) {
navigate(`/customer-products/${id}/edit`)
}
async function handleRemove(id: string) {
if (!window.confirm(t('customerProducts.removeConfirm'))) return
setBusyId(id)
setBusyAction('remove')
try {
await deleteUserProduct(id)
setData((prev) =>
prev
? {
...prev,
items: prev.items.filter((item) => item.id !== id),
total: Math.max(0, prev.total - 1),
}
: prev,
)
showToast(t('customerProducts.removeSuccess'), 'success')
} catch (err) {
showToast(
err instanceof ApiError
? err.message
: t('customerProducts.error.remove'),
'error',
)
} finally {
setBusyId(null)
setBusyAction(null)
}
}
async function handlePromote(id: string) {
setBusyId(id)
setBusyAction('promote')
try {
const response = await promoteUserProduct(id)
setData((prev) =>
prev
? {
...prev,
items: prev.items.map((item) =>
item.id === id ? { ...item, ...response.product } : item,
),
}
: prev,
)
showToast(t('customerProducts.promoteSuccess'), 'success')
} catch (err) {
showToast(
err instanceof ApiError
? err.message
: t('customerProducts.error.promote'),
'error',
)
} finally {
setBusyId(null)
setBusyAction(null)
}
}
async function handleStatusSave(status: UserProductStatus) {
if (!statusProductId) return
setBusyId(statusProductId)
setBusyAction('status')
try {
const response = await updateUserProductStatus(statusProductId, status)
setData((prev) =>
prev
? {
...prev,
items: prev.items.map((item) =>
item.id === statusProductId
? { ...item, ...response.product }
: item,
),
}
: prev,
)
showToast(t('customerProducts.statusSuccess'), 'success')
setStatusProductId(null)
} catch (err) {
showToast(
err instanceof ApiError
? err.message
: t('customerProducts.error.status'),
'error',
)
} finally {
setBusyId(null)
setBusyAction(null)
}
}
return (
<main className={pageStyles.content}>
<Breadcrumbs
items={[
{ label: t('nav.home'), href: '/' },
{ label: t('customerProducts.title') },
]}
/>
<div className={pageStyles.pageHeader}>
<div>
<h2 className={pageStyles.pageTitle}>{t('customerProducts.title')}</h2>
<p className={pageStyles.pageSubtitle}>
{t('customerProducts.subtitle', { count: total })}
</p>
</div>
</div>
{error ? (
<div className={styles.error} role="alert">
{error}
</div>
) : null}
{loading ? <p className={styles.status}>{t('customerProducts.loading')}</p> : null}
{!loading && !error && products.length === 0 ? (
<div className={styles.empty}>
<Package size={32} />
<p>{t('customerProducts.empty')}</p>
<Link to="/customer-products/new" className={styles.emptyLink}>
{t('customerProducts.add')}
</Link>
</div>
) : null}
{!loading && products.length > 0 ? (
<>
<div className={styles.grid}>
{products.map((product) => (
<UserProductCard
key={product.id}
product={product}
to={`/customer-products/${product.id}`}
onEdit={handleEdit}
onPromote={handlePromote}
onChangeStatus={setStatusProductId}
onRemove={handleRemove}
busyAction={busyId === product.id ? busyAction : null}
/>
))}
</div>
{totalPages > 1 ? (
<Pagination
currentPage={page}
totalPages={totalPages}
onPageChange={setPage}
disabled={loading}
/>
) : null}
</>
) : null}
<div className={styles.fabDock}>
<Link
to="/customer-products/new"
className={styles.addFab}
aria-label={t('customerProducts.add')}
>
<Plus size={22} />
</Link>
</div>
<UserProductStatusModal
open={Boolean(statusProduct)}
currentStatus={statusProduct?.status ?? 'draft'}
saving={busyAction === 'status'}
onClose={() => setStatusProductId(null)}
onSave={(status) => void handleStatusSave(status)}
/>
</main>
)
}
apps/business/src/services/citiesService.ts
+14
View File
@@ -18,3 +18,17 @@ export async function listCitiesByProvinceSlug(parentSlug: string, signal?: Abor
)
return data.items
}
export async function listCountries(signal?: AbortSignal) {
const data = await apiRequest<{ items: CityOption[] }>('/cities?level=country', { signal })
return data.items
}
export async function listCitiesByCountrySlug(parentSlug: string, signal?: AbortSignal) {
const data = await apiRequest<{ items: CityOption[] }>(
`/cities?level=city&parentSlug=${encodeURIComponent(parentSlug)}`,
{ signal },
)
return data.items
}
apps/business/src/services/userProductsService.ts
+218
View File
@@ -0,0 +1,218 @@
import { apiRequest } from '../lib/api'
import { getActiveBusinessId } from '../lib/businessContext'
import type { UserProductListItem, UserProductStatus } from '../types/userProduct'
export type UserProductCondition = 'new' | 'stock' | 'needs_repair' | 'scrap'
export type UserProductPriceCurrency = 'IRT' | 'USD' | 'EUR' | 'AED'
export type TechnicalFieldType = 'text' | 'textarea' | 'select' | 'multi_select'
export interface UserProductCategoryOption {
id: string
name: string
nameFa: string | null
parentId: string | null
}
export interface TechnicalFormFieldOption {
id: string
label: string
value: string
sortOrder: number
}
export interface TechnicalFormField {
id: string
label: string
key: string
type: TechnicalFieldType
isRequired: boolean
sortOrder: number
options: TechnicalFormFieldOption[]
}
export interface CategoryTechnicalForm {
id: string
categoryId: string
fields: TechnicalFormField[]
}
export type TechnicalFormValues = Record<string, string | string[]>
export interface UserProductTechnicalValueInput {
fieldId: string
textValue?: string
optionId?: string
optionIds?: string[]
}
export interface CreateUserProductInput {
titleFa: string
titleEn?: string
description?: string
categoryId: string
price?: number
priceCurrency?: UserProductPriceCurrency
priceByExpert?: boolean
countryId: string
cityId: string
deliveryNote?: string
condition: UserProductCondition
technicalNotes?: string
technicalValues?: UserProductTechnicalValueInput[]
featuredMediaId?: string
galleryMediaIds?: string[]
}
export type UpdateUserProductInput = CreateUserProductInput
export interface UserProductDetail extends UserProductListItem {
countryId: string
cityId: string
countrySlug: string
featuredMediaId: string | null
galleryMediaIds: string[]
images: Array<{ mediaId: string; url: string }>
technicalValues: UserProductTechnicalValueInput[]
deliveryNote?: string | null
technicalNotes?: string | null
description?: string | null
titleEn?: string | null
priceCurrency?: string | null
priceByExpert?: boolean
promoted?: boolean
condition?: string | null
categoryId?: string | null
}
export interface ListUserProductsParams {
page?: number
pageSize?: number
status?: UserProductStatus
}
export interface UserProductsListResponse {
items: UserProductListItem[]
total: number
page: number
pageSize: number
}
function businessPath(suffix = '') {
const businessId = getActiveBusinessId()
if (!businessId) {
throw new Error('No active business selected. Please sign in again.')
}
return `/businesses/${businessId}/user-products${suffix}`
}
export function buildTechnicalValuesPayload(
fields: TechnicalFormField[],
values: TechnicalFormValues,
): UserProductTechnicalValueInput[] {
const payload: UserProductTechnicalValueInput[] = []
for (const field of fields) {
const value = values[field.id]
if (field.type === 'text' || field.type === 'textarea') {
const text = typeof value === 'string' ? value.trim() : ''
if (!text) continue
payload.push({ fieldId: field.id, textValue: text })
continue
}
if (field.type === 'select') {
const optionId = typeof value === 'string' ? value.trim() : ''
if (!optionId) continue
payload.push({ fieldId: field.id, optionId })
continue
}
const optionIds = Array.isArray(value) ? value.filter(Boolean) : []
if (!optionIds.length) continue
payload.push({ fieldId: field.id, optionIds })
}
return payload
}
export async function listUserProducts(
params: ListUserProductsParams = {},
signal?: AbortSignal,
) {
const q = new URLSearchParams()
if (params.page !== undefined) q.set('page', String(params.page))
if (params.pageSize !== undefined) q.set('pageSize', String(params.pageSize))
if (params.status) q.set('status', params.status)
const query = q.toString()
return apiRequest<UserProductsListResponse>(
`${businessPath()}${query ? `?${query}` : ''}`,
{ auth: true, signal },
)
}
export async function getUserProduct(productId: string, signal?: AbortSignal) {
return apiRequest<{ product: UserProductDetail }>(
businessPath(`/${productId}`),
{ auth: true, signal },
)
}
export async function createUserProduct(input: CreateUserProductInput) {
return apiRequest<{ message: string; product: UserProductListItem }>(
businessPath(),
{ method: 'POST', auth: true, body: input },
)
}
export async function updateUserProduct(
productId: string,
input: UpdateUserProductInput,
) {
return apiRequest<{ message: string; product: UserProductListItem }>(
businessPath(`/${productId}`),
{ method: 'PATCH', auth: true, body: input },
)
}
export async function updateUserProductStatus(
productId: string,
status: UserProductStatus,
) {
return apiRequest<{ message: string; product: UserProductListItem }>(
businessPath(`/${productId}/status`),
{ method: 'PATCH', auth: true, body: { status } },
)
}
export async function promoteUserProduct(productId: string) {
return apiRequest<{ message: string; product: UserProductListItem }>(
businessPath(`/${productId}/promote`),
{ method: 'POST', auth: true },
)
}
export async function deleteUserProduct(productId: string) {
return apiRequest<{ message: string }>(businessPath(`/${productId}`), {
method: 'DELETE',
auth: true,
})
}
export async function listUserProductCategories(signal?: AbortSignal) {
return apiRequest<{ items: UserProductCategoryOption[] }>(
businessPath('/categories'),
{ auth: true, signal },
)
}
export async function getUserProductCategoryTechnicalForm(
categoryId: string,
signal?: AbortSignal,
) {
return apiRequest<{ form: CategoryTechnicalForm | null }>(
businessPath(`/categories/${categoryId}/technical-form`),
{ auth: true, signal },
)
}
apps/business/src/types/userProduct.ts
+30
View File
@@ -0,0 +1,30 @@
export type UserProductStatus = 'draft' | 'published' | 'archived' | 'rejected'
export type UserProductPriceCurrency = 'IRT' | 'USD' | 'EUR' | 'AED'
export interface UserProductListItem {
id: string
title: string
titleFa?: string | null
titleEn?: string | null
description?: string | null
price: number | null
priceCurrency?: UserProductPriceCurrency | string | null
priceByExpert?: boolean
promoted?: boolean
status: UserProductStatus
condition?: string | null
cityName: string
cityNameFa?: string | null
countryName?: string | null
countryNameFa?: string | null
imageUrl: string | null
categoryId?: string | null
categoryName?: string | null
categoryNameFa?: string | null
ownerId?: string
ownerName: string
ownerNameFa?: string
ownerCell?: string
createdAt?: string
}
apps/business/src/utils/businessModules.ts
+19 -4
View File
@@ -1,5 +1,5 @@
/** Optional CMS modules a business can have. Always-on areas are not listed. */
export const BUSINESS_MODULE_IDS = [
/** Optional business-dashboard CMS modules. Always-on areas are not listed. */
export const BUSINESS_DASHBOARD_MODULE_IDS = [
'products',
'store',
'portfolio',
@@ -8,6 +8,18 @@ export const BUSINESS_MODULE_IDS = [
'videos',
] as const
/** Optional customer-dashboard modules. Always-on: home, profile, addresses, orders, favorites. */
export const CUSTOMER_MODULE_IDS = ['customer_products'] as const
/** All optional modules stored in `settings.modules.enabled`. */
export const BUSINESS_MODULE_IDS = [
...BUSINESS_DASHBOARD_MODULE_IDS,
...CUSTOMER_MODULE_IDS,
] as const
export type BusinessDashboardModuleId =
(typeof BUSINESS_DASHBOARD_MODULE_IDS)[number]
export type CustomerModuleId = (typeof CUSTOMER_MODULE_IDS)[number]
export type BusinessModuleId = (typeof BUSINESS_MODULE_IDS)[number]
/** Home dashboard chart slots (super-admin selectable). */
@@ -21,9 +33,12 @@ export const HOME_CHART_IDS = [
export type HomeChartId = (typeof HOME_CHART_IDS)[number]
/** Existing tenants without saved modules keep every module enabled. */
/**
* Existing tenants without saved modules keep every business-dashboard module
* enabled. Customer modules stay opt-in.
*/
export const DEFAULT_ENABLED_BUSINESS_MODULES: BusinessModuleId[] = [
...BUSINESS_MODULE_IDS,
...BUSINESS_DASHBOARD_MODULE_IDS,
]
export const DEFAULT_HOME_CHARTS: [HomeChartId, HomeChartId] = [
apps/customer/package.json
+1
View File
@@ -15,6 +15,7 @@
"lucide-react": "^1.23.0",
"react": "^19.2.7",
"react-dom": "^19.2.7",
"react-easy-crop": "^6.2.3",
"react-router-dom": "^7.18.1"
},
"devDependencies": {
apps/customer/src/App.tsx
+10
View File
@@ -8,11 +8,15 @@ import { DashboardDocumentTitle } from './components/DashboardDocumentTitle'
import { ProtectedRoute } from './components/ProtectedRoute'
import { GuestRoute } from './components/GuestRoute'
import { PageLayout } from './components/PageLayout'
import { AddMyProductLayout } from './components/AddMyProductLayout'
import { HomePage } from './pages/HomePage'
import { ProfilePage } from './pages/ProfilePage'
import { OrdersPage } from './pages/OrdersPage'
import { AddressesPage } from './pages/AddressesPage'
import { FavoritesPage } from './pages/FavoritesPage'
import { MyProductsPage } from './pages/MyProductsPage'
import { MyProductDetailsPage } from './pages/MyProductDetailsPage'
import { AddMyProductPage } from './pages/AddMyProductPage'
import { LoginPage } from './pages/LoginPage'
import { CheckoutLayout } from './components/checkout/CheckoutLayout'
import { CheckoutFlow } from './pages/checkout/CheckoutFlow'
@@ -51,12 +55,18 @@ function App() {
</Route>
<Route element={<ProtectedRoute />}>
<Route element={<AddMyProductLayout />}>
<Route path="my-products/new" element={<AddMyProductPage />} />
<Route path="my-products/:id/edit" element={<AddMyProductPage />} />
</Route>
<Route element={<PageLayout />}>
<Route index element={<HomePage />} />
<Route path="profile" element={<ProfilePage />} />
<Route path="addresses" element={<AddressesPage />} />
<Route path="orders" element={<OrdersPage />} />
<Route path="favorites" element={<FavoritesPage />} />
<Route path="my-products" element={<MyProductsPage />} />
<Route path="my-products/:id" element={<MyProductDetailsPage />} />
</Route>
</Route>
</Routes>
apps/customer/src/components/AddMyProductLayout.module.css
+42
View File
@@ -0,0 +1,42 @@
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
background-color: var(--bg-gradient-mid);
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;
}
.main {
flex: 1;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 32px 24px 48px;
}
.container {
width: 60%;
max-width: none;
min-width: 320px;
}
@media (max-width: 900px) {
.container {
width: 90%;
}
}
@media (max-width: 480px) {
.main {
padding: 20px 16px 32px;
}
}
apps/customer/src/components/AddMyProductLayout.tsx
+16
View File
@@ -0,0 +1,16 @@
import { Outlet } from 'react-router-dom'
import { Header } from './Header'
import styles from './AddMyProductLayout.module.css'
export function AddMyProductLayout() {
return (
<div className={styles.page}>
<Header hideMenu showBrand />
<main className={styles.main}>
<div className={styles.container}>
<Outlet />
</div>
</main>
</div>
)
}
apps/customer/src/components/CategorySearchSelect.module.css
+159
View File
@@ -0,0 +1,159 @@
.wrapper {
position: relative;
}
.inputWrap {
display: flex;
align-items: center;
gap: 6px;
min-height: var(--field-height);
padding: 0 var(--field-padding-x);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
.inputWrapOpen,
.inputWrap:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
}
.inputWrapDisabled {
opacity: 0.55;
cursor: not-allowed;
}
.searchIcon {
flex-shrink: 0;
color: var(--text-muted);
}
.input {
flex: 1;
min-width: 0;
padding: var(--field-padding-y) 0;
font-size: var(--field-font-size);
font-family: var(--font-ui);
line-height: 1.4;
color: var(--text-primary);
background: transparent;
border: none;
outline: none;
}
.input::placeholder {
font-family: var(--font-ui);
color: var(--text-muted);
opacity: 1;
}
.input:disabled {
cursor: not-allowed;
}
.clearBtn {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
color: var(--text-muted);
transition: background 0.2s, color 0.2s;
}
.clearBtn:hover {
background: rgba(148, 163, 184, 0.2);
color: var(--text-secondary);
}
.chevron {
flex-shrink: 0;
color: var(--text-muted);
transition: transform 0.2s ease;
}
.chevronOpen {
transform: rotate(180deg);
}
.dropdown {
position: absolute;
top: calc(100% + 6px);
inset-inline: 0;
max-height: 260px;
overflow-y: auto;
background: var(--elevated-surface);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
box-shadow: var(--glass-shadow);
z-index: 30;
list-style: none;
padding: 6px;
margin: 0;
}
.option {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
width: 100%;
padding: 8px 10px;
font-size: var(--field-font-size);
font-family: var(--font-ui);
text-align: start;
color: var(--text-primary);
border-radius: 8px;
transition: background 0.15s;
box-sizing: border-box;
}
.optionChild {
border-inline-start: 2px solid rgba(var(--primary-rgb) / 0.35);
border-start-start-radius: 0;
border-end-start-radius: 0;
background: rgba(var(--primary-rgb) / 0.03);
padding-inline-start: 14px;
}
.option:hover {
background: rgba(var(--primary-rgb) / 0.08);
}
.optionChild:hover {
background: rgba(var(--primary-rgb) / 0.1);
}
.optionSelected {
background: rgba(var(--primary-rgb) / 0.12);
color: var(--primary);
font-weight: 500;
}
.optionChild.optionSelected {
border-inline-start-color: var(--primary);
background: rgba(var(--primary-rgb) / 0.14);
}
.optionLabel {
font-weight: 500;
}
.optionSecondary {
font-size: 12px;
font-weight: 400;
color: var(--text-muted);
}
.noResults {
padding: 12px;
font-size: 13px;
color: var(--text-muted);
text-align: center;
}
apps/customer/src/components/CategorySearchSelect.tsx
+246
View File
@@ -0,0 +1,246 @@
import { useEffect, useMemo, useRef, useState } from 'react'
import { ChevronDown, Search, X } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import type { UserProductCategoryOption } from '../services/userProductsService'
import styles from './CategorySearchSelect.module.css'
export interface FlatCategoryOption extends UserProductCategoryOption {
depth: number
}
interface CategorySearchSelectProps {
options: UserProductCategoryOption[]
value: string
onChange: (value: string) => void
disabled?: boolean
placeholder?: string
id?: string
}
function categoryLabel(category: UserProductCategoryOption, isFa: boolean) {
if (isFa) {
return category.nameFa?.trim() || category.name
}
return category.name || category.nameFa?.trim() || ''
}
export function flattenCategoryTree(
categories: UserProductCategoryOption[],
): FlatCategoryOption[] {
const byParent = new Map<string | null, UserProductCategoryOption[]>()
for (const category of categories) {
const parentKey = category.parentId
const list = byParent.get(parentKey) ?? []
list.push(category)
byParent.set(parentKey, list)
}
for (const list of byParent.values()) {
list.sort((a, b) => {
const aLabel = (a.nameFa || a.name).localeCompare(b.nameFa || b.name, 'fa')
return aLabel
})
}
const result: FlatCategoryOption[] = []
const ids = new Set(categories.map((item) => item.id))
function walk(parentId: string | null, depth: number) {
const children = byParent.get(parentId) ?? []
for (const child of children) {
result.push({ ...child, depth })
walk(child.id, depth + 1)
}
}
walk(null, 0)
// Orphans whose parent is missing from the list
for (const category of categories) {
if (category.parentId && !ids.has(category.parentId)) {
if (!result.some((item) => item.id === category.id)) {
result.push({ ...category, depth: 0 })
walk(category.id, 1)
}
}
}
return result
}
function filterCategoryTree(
flat: FlatCategoryOption[],
query: string,
): FlatCategoryOption[] {
const q = query.trim().toLowerCase()
if (!q) return flat
const byId = new Map(flat.map((item) => [item.id, item]))
const matchedIds = new Set<string>()
for (const item of flat) {
const nameEn = item.name.toLowerCase()
const nameFa = (item.nameFa || '').toLowerCase()
if (nameEn.includes(q) || nameFa.includes(q) || (item.nameFa || '').includes(query.trim())) {
matchedIds.add(item.id)
let parentId = item.parentId
while (parentId) {
matchedIds.add(parentId)
parentId = byId.get(parentId)?.parentId ?? null
}
}
}
return flat.filter((item) => matchedIds.has(item.id))
}
export function CategorySearchSelect({
options,
value,
onChange,
disabled = false,
placeholder,
id,
}: CategorySearchSelectProps) {
const t = useT()
const { locale } = useLocale()
const isFa = locale === 'fa'
const [open, setOpen] = useState(false)
const [query, setQuery] = useState('')
const containerRef = useRef<HTMLDivElement>(null)
const flat = useMemo(() => flattenCategoryTree(options), [options])
const filtered = useMemo(() => filterCategoryTree(flat, query), [flat, query])
const selected = flat.find((option) => option.id === value)
const selectedLabel = selected ? categoryLabel(selected, isFa) : ''
const searchPlaceholder = placeholder ?? t('myProducts.fields.searchCategory')
useEffect(() => {
if (!open) return
function onClickOutside(e: MouseEvent) {
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
setOpen(false)
setQuery('')
}
}
document.addEventListener('mousedown', onClickOutside)
return () => document.removeEventListener('mousedown', onClickOutside)
}, [open])
useEffect(() => {
if (disabled) {
setOpen(false)
setQuery('')
}
}, [disabled])
function selectOption(nextId: string) {
onChange(nextId)
setOpen(false)
setQuery('')
}
return (
<div
className={styles.wrapper}
ref={containerRef}
dir={isFa ? 'rtl' : 'ltr'}
>
<div
className={[
styles.inputWrap,
open ? styles.inputWrapOpen : '',
disabled ? styles.inputWrapDisabled : '',
]
.filter(Boolean)
.join(' ')}
>
<Search size={16} className={styles.searchIcon} aria-hidden />
<input
id={id}
type="text"
className={styles.input}
disabled={disabled}
placeholder={selected ? selectedLabel : searchPlaceholder}
value={open ? query : selectedLabel}
onChange={(e) => {
setQuery(e.target.value)
if (!open) setOpen(true)
}}
onFocus={() => {
if (!disabled) setOpen(true)
}}
autoComplete="off"
role="combobox"
aria-expanded={open}
aria-autocomplete="list"
/>
{value && !open && !disabled ? (
<button
type="button"
className={styles.clearBtn}
onClick={() => onChange('')}
aria-label={t('myProducts.fields.clearCategory')}
>
<X size={14} />
</button>
) : null}
<ChevronDown
size={16}
className={`${styles.chevron} ${open ? styles.chevronOpen : ''}`}
aria-hidden
/>
</div>
{open && !disabled ? (
<ul className={styles.dropdown} role="listbox">
{filtered.length === 0 ? (
<li className={styles.noResults}>{t('myProducts.fields.noCategories')}</li>
) : (
filtered.map((option) => (
<li key={option.id}>
<button
type="button"
className={[
styles.option,
option.depth > 0 ? styles.optionChild : '',
value === option.id ? styles.optionSelected : '',
]
.filter(Boolean)
.join(' ')}
style={
option.depth > 0
? {
marginInlineStart: `${option.depth * 22}px`,
}
: undefined
}
onClick={() => selectOption(option.id)}
role="option"
aria-selected={value === option.id}
>
<span className={styles.optionLabel}>
{categoryLabel(option, isFa)}
</span>
{!isFa && option.nameFa ? (
<span className={styles.optionSecondary}>{option.nameFa}</span>
) : null}
{isFa && option.name && option.name !== option.nameFa ? (
<span className={styles.optionSecondary} dir="ltr">
{option.name}
</span>
) : null}
</button>
</li>
))
)}
</ul>
) : null}
</div>
)
}
apps/customer/src/components/CitySearchSelect.module.css
+129
View File
@@ -0,0 +1,129 @@
.wrapper {
position: relative;
}
.inputWrap {
display: flex;
align-items: center;
gap: 6px;
min-height: var(--field-height);
padding: 0 var(--field-padding-x);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
.inputWrapOpen,
.inputWrap:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
}
.inputWrapDisabled {
opacity: 0.55;
cursor: not-allowed;
}
.searchIcon {
flex-shrink: 0;
color: var(--text-muted);
}
.input {
flex: 1;
min-width: 0;
padding: var(--field-padding-y) 0;
font-size: var(--field-font-size);
font-family: var(--font-ui);
line-height: 1.4;
color: var(--text-primary);
background: transparent;
border: none;
outline: none;
}
.input::placeholder {
font-family: var(--font-ui);
color: var(--text-muted);
opacity: 1;
}
.input:disabled {
cursor: not-allowed;
}
.clearBtn {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
color: var(--text-muted);
transition: background 0.2s, color 0.2s;
}
.clearBtn:hover {
background: rgba(148, 163, 184, 0.2);
color: var(--text-secondary);
}
.chevron {
flex-shrink: 0;
color: var(--text-muted);
transition: transform 0.2s ease;
}
.chevronOpen {
transform: rotate(180deg);
}
.dropdown {
position: absolute;
top: calc(100% + 6px);
inset-inline: 0;
max-height: 220px;
overflow-y: auto;
background: var(--elevated-surface);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
box-shadow: var(--glass-shadow);
z-index: 20;
list-style: none;
padding: 6px;
margin: 0;
}
.option {
display: flex;
align-items: center;
width: 100%;
padding: 7px 10px;
font-size: var(--field-font-size);
font-family: var(--font-ui);
text-align: start;
color: var(--text-primary);
border-radius: 8px;
transition: background 0.15s;
}
.option:hover {
background: rgba(var(--primary-rgb) / 0.08);
}
.optionSelected {
background: rgba(var(--primary-rgb) / 0.12);
color: var(--primary);
font-weight: 500;
}
.noResults {
padding: 12px;
font-size: 13px;
color: var(--text-muted);
text-align: center;
}
apps/customer/src/components/CitySearchSelect.tsx
+146
View File
@@ -0,0 +1,146 @@
import { useEffect, useRef, useState } from 'react'
import { ChevronDown, Search, X } from 'lucide-react'
import {
getLocationOptionLabel,
useLocale,
type CityOption,
} from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import styles from './CitySearchSelect.module.css'
interface CitySearchSelectProps {
options: CityOption[]
value: string
onChange: (value: string) => void
disabled?: boolean
placeholder?: string
id?: string
}
export function CitySearchSelect({
options,
value,
onChange,
disabled = false,
placeholder,
id,
}: CitySearchSelectProps) {
const t = useT()
const { locale } = useLocale()
const [open, setOpen] = useState(false)
const [query, setQuery] = useState('')
const containerRef = useRef<HTMLDivElement>(null)
const selected = options.find((option) => option.id === value)
const selectedLabel = selected ? getLocationOptionLabel(selected, locale) : ''
const searchPlaceholder = placeholder ?? t('myProducts.fields.searchCity')
const filtered = options.filter((option) => {
const q = query.trim().toLowerCase()
if (!q) return true
return (
option.nameEn.toLowerCase().includes(q) ||
option.nameFa.includes(query.trim()) ||
option.slug.toLowerCase().includes(q)
)
})
useEffect(() => {
if (!open) return
function onClickOutside(e: MouseEvent) {
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
setOpen(false)
setQuery('')
}
}
document.addEventListener('mousedown', onClickOutside)
return () => document.removeEventListener('mousedown', onClickOutside)
}, [open])
useEffect(() => {
if (disabled) {
setOpen(false)
setQuery('')
}
}, [disabled])
function selectOption(nextId: string) {
onChange(nextId)
setOpen(false)
setQuery('')
}
return (
<div className={styles.wrapper} ref={containerRef}>
<div
className={[
styles.inputWrap,
open ? styles.inputWrapOpen : '',
disabled ? styles.inputWrapDisabled : '',
]
.filter(Boolean)
.join(' ')}
>
<Search size={16} className={styles.searchIcon} aria-hidden />
<input
id={id}
type="text"
className={styles.input}
disabled={disabled}
placeholder={selected ? selectedLabel : searchPlaceholder}
value={open ? query : selectedLabel}
onChange={(e) => {
setQuery(e.target.value)
if (!open) setOpen(true)
}}
onFocus={() => {
if (!disabled) setOpen(true)
}}
autoComplete="off"
role="combobox"
aria-expanded={open}
aria-autocomplete="list"
/>
{value && !open && !disabled ? (
<button
type="button"
className={styles.clearBtn}
onClick={() => onChange('')}
aria-label={t('myProducts.fields.clearCity')}
>
<X size={14} />
</button>
) : null}
<ChevronDown
size={16}
className={`${styles.chevron} ${open ? styles.chevronOpen : ''}`}
aria-hidden
/>
</div>
{open && !disabled ? (
<ul className={styles.dropdown} role="listbox">
{filtered.length === 0 ? (
<li className={styles.noResults}>{t('myProducts.fields.noCities')}</li>
) : (
filtered.map((option) => (
<li key={option.id}>
<button
type="button"
className={`${styles.option} ${value === option.id ? styles.optionSelected : ''}`}
onClick={() => selectOption(option.id)}
role="option"
aria-selected={value === option.id}
>
{getLocationOptionLabel(option, locale)}
</button>
</li>
))
)}
</ul>
) : null}
</div>
)
}
apps/customer/src/components/FavoriteStoreItemCard.module.css
+3 -3
View File
@@ -27,7 +27,7 @@
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #ffffff;
background: var(--card-media-bg);
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
@@ -54,10 +54,10 @@
letter-spacing: 0.03em;
border-radius: 50px;
border: 1px solid var(--glass-border);
background: rgba(255, 255, 255, 0.82);
background: var(--elevated-surface);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
box-shadow: var(--glass-shadow);
z-index: 1;
}
apps/customer/src/components/Header.module.css
+46 -3
View File
@@ -16,6 +16,49 @@
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.brandLogo {
width: 36px;
height: 36px;
object-fit: contain;
flex-shrink: 0;
border-radius: 8px;
background: transparent;
}
.brandText {
display: flex;
flex-direction: column;
min-width: 0;
}
.brandTitle {
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.brandSubtitle {
font-size: 11px;
font-weight: 500;
color: var(--text-muted);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.menuBtn {
@@ -87,7 +130,7 @@
padding-block: 8px;
padding-inline: 14px 12px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
background: var(--surface);
border: 1px solid var(--glass-border);
cursor: pointer;
transition: box-shadow 0.2s, border-color 0.2s;
@@ -131,12 +174,12 @@
inset-inline-end: 0;
min-width: 180px;
padding: 6px;
background: rgba(255, 255, 255, 0.95);
background: var(--elevated-surface);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
box-shadow: 0 12px 32px rgba(31, 38, 135, 0.12);
box-shadow: var(--glass-shadow);
z-index: 60;
animation: dropdownIn 0.15s ease;
}
apps/customer/src/components/Header.tsx
+36 -4
View File
@@ -3,8 +3,10 @@ import { Link, useNavigate } from 'react-router-dom'
import { Menu, Bell, MessageSquare, ChevronDown, User, KeyRound, LogOut } from 'lucide-react'
import { LanguageSelect, PasswordResetModal, useLocale } from '@meshkee/dashboard-ui'
import { useAuth } from '../context/AuthContext'
import { useTenantBranding } from '../context/TenantBrandingContext'
import { useT } from '../i18n/useT'
import { changePassword } from '../services/authService'
import meshkeeLogo from '../assets/meshkee-logo.png'
import styles from './Header.module.css'
function displayUserName(
@@ -30,16 +32,30 @@ function displayUserName(
return localized || other || user.cellNumber || fallback
}
export function Header() {
interface HeaderProps {
/** Hide the mobile sidebar hamburger (e.g. full-width flows without a sidebar). */
hideMenu?: boolean
/** Show website logo + name on the start side (visual right in RTL). */
showBrand?: boolean
}
export function Header({ hideMenu = false, showBrand = false }: HeaderProps) {
const navigate = useNavigate()
const { user, logout } = useAuth()
const { locale } = useLocale()
const { businessName, businessNameEn, logoUrl } = useTenantBranding()
const t = useT()
const [menuOpen, setMenuOpen] = useState(false)
const [passwordModalOpen, setPasswordModalOpen] = useState(false)
const menuRef = useRef<HTMLDivElement>(null)
const displayName = displayUserName(user, locale, t('app.role.customer'))
const brandTitle = locale === 'en'
? businessNameEn || businessName
: businessName || businessNameEn
const brandSubtitle = locale === 'en'
? (businessName && businessName !== brandTitle ? businessName : '')
: (businessNameEn && businessNameEn !== brandTitle ? businessNameEn : '')
useEffect(() => {
if (!menuOpen) return
@@ -77,9 +93,25 @@ export function Header() {
<>
<header className={styles.header}>
<div className={styles.left}>
<button className={styles.menuBtn} aria-label={t('header.toggleMenu')}>
<Menu size={22} />
</button>
{showBrand ? (
<div className={styles.brand}>
<img
src={logoUrl || meshkeeLogo}
alt=""
className={styles.brandLogo}
/>
<div className={styles.brandText}>
<span className={styles.brandTitle}>{brandTitle || t('app.storeFallback')}</span>
{brandSubtitle ? (
<span className={styles.brandSubtitle}>{brandSubtitle}</span>
) : null}
</div>
</div>
) : !hideMenu ? (
<button className={styles.menuBtn} aria-label={t('header.toggleMenu')}>
<Menu size={22} />
</button>
) : null}
</div>
<div className={styles.right}>
apps/customer/src/components/ImageCropper.module.css
+170
View File
@@ -0,0 +1,170 @@
.wrapper {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.uploadZone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 0;
border: 2px dashed rgba(148, 163, 184, 0.4);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--surface) 70%, transparent);
color: var(--text-secondary);
font-size: 14px;
font-family: var(--font-ui);
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
box-sizing: border-box;
}
.uploadZone:hover {
border-color: var(--primary);
background: rgba(var(--primary-rgb) / 0.06);
color: var(--primary);
}
.hint {
font-size: 12px;
color: var(--text-muted);
}
.preview {
position: relative;
width: 100%;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--glass-border);
background: var(--card-media-bg);
}
.previewImg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.removeBtn {
position: absolute;
top: 8px;
inset-inline-end: 8px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(15, 23, 42, 0.6);
color: white;
transition: background 0.2s;
}
.removeBtn:hover {
background: #ef4444;
}
.cropPanel {
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
overflow: hidden;
background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.cropArea {
position: relative;
width: 100%;
min-height: 160px;
max-height: 420px;
background: #1e293b;
}
.cropAreaPortrait {
max-height: none;
min-height: 0;
}
.cropControls {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.zoomLabel {
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
color: var(--text-secondary);
font-family: var(--font-ui);
}
.zoomLabel input {
flex: 1;
accent-color: var(--primary);
}
.cropActions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.cancelBtn {
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
font-family: var(--font-ui);
color: var(--text-secondary);
border-radius: 8px;
transition: background 0.2s;
}
.cancelBtn:hover {
background: rgba(148, 163, 184, 0.15);
}
.applyBtn {
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
font-family: var(--font-ui);
color: white;
background: var(--primary);
border-radius: 8px;
transition: background 0.2s;
}
.applyBtn:hover {
background: var(--primary-dark);
}
.applyBtn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.changeBtn {
display: inline-flex;
align-self: flex-start;
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
font-family: var(--font-ui);
color: var(--primary);
border: 1px solid rgba(var(--primary-rgb) / 0.3);
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
}
.changeBtn:hover {
background: rgba(var(--primary-rgb) / 0.08);
}
apps/customer/src/components/ImageCropper.tsx
+175
View File
@@ -0,0 +1,175 @@
import { useCallback, useEffect, useState } from 'react'
import Cropper, { type Area } from 'react-easy-crop'
import { ImagePlus, X } from 'lucide-react'
import { getCroppedImage } from '../utils/cropImage'
import { useT } from '../i18n/useT'
import styles from './ImageCropper.module.css'
interface ImageCropperProps {
value: string | null
onChange: (value: string | null) => void
aspect?: number
outputFormat?: 'jpeg' | 'png'
accept?: string
uploadLabel?: string
hint?: string
changeLabel?: string
}
export function ImageCropper({
value,
onChange,
aspect = 1,
outputFormat = 'jpeg',
accept = 'image/*',
uploadLabel,
hint,
changeLabel,
}: ImageCropperProps) {
const t = useT()
const resolvedUploadLabel = uploadLabel ?? t('myProducts.images.thumbnailUpload')
const resolvedHint = hint ?? t('myProducts.images.thumbnailHint')
const resolvedChangeLabel = changeLabel ?? t('myProducts.images.thumbnailChange')
const [imageSrc, setImageSrc] = useState<string | null>(null)
const [crop, setCrop] = useState({ x: 0, y: 0 })
const [zoom, setZoom] = useState(1)
const [croppedArea, setCroppedArea] = useState<Area | null>(null)
useEffect(() => {
setCrop({ x: 0, y: 0 })
setZoom(1)
setCroppedArea(null)
}, [aspect])
const onCropComplete = useCallback((_: Area, pixels: Area) => {
setCroppedArea(pixels)
}, [])
function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
const file = e.target.files?.[0]
if (!file) return
const reader = new FileReader()
reader.onload = () => {
setImageSrc(reader.result as string)
setCrop({ x: 0, y: 0 })
setZoom(1)
setCroppedArea(null)
}
reader.readAsDataURL(file)
e.target.value = ''
}
async function applyCrop() {
if (!imageSrc || !croppedArea) return
const cropped = await getCroppedImage(imageSrc, croppedArea, outputFormat)
onChange(cropped)
setImageSrc(null)
setZoom(1)
setCrop({ x: 0, y: 0 })
}
function cancelCrop() {
setImageSrc(null)
setZoom(1)
setCrop({ x: 0, y: 0 })
}
function removeThumbnail() {
onChange(null)
}
const isPortrait = aspect < 1
const frameStyle: React.CSSProperties = isPortrait
? {
aspectRatio: `${aspect}`,
height: 'min(480px, 65vh)',
width: 'auto',
maxWidth: '100%',
marginInline: 'auto',
}
: {
aspectRatio: String(aspect),
width: '100%',
height: 'auto',
}
return (
<div className={styles.wrapper}>
{value && !imageSrc && (
<div className={styles.preview} style={{ aspectRatio: String(aspect) }}>
<img src={value} alt={resolvedUploadLabel} className={styles.previewImg} />
<button
type="button"
className={styles.removeBtn}
onClick={removeThumbnail}
aria-label={t('myProducts.images.thumbnailRemove')}
>
<X size={16} />
</button>
</div>
)}
{!value && !imageSrc && (
<label className={styles.uploadZone} style={frameStyle}>
<ImagePlus size={28} />
<span>{resolvedUploadLabel}</span>
<span className={styles.hint}>{resolvedHint}</span>
<input type="file" accept={accept} onChange={handleFile} hidden />
</label>
)}
{imageSrc && (
<div className={styles.cropPanel}>
<div
className={`${styles.cropArea} ${isPortrait ? styles.cropAreaPortrait : ''}`}
style={frameStyle}
>
<Cropper
key={String(aspect)}
image={imageSrc}
crop={crop}
zoom={zoom}
aspect={aspect}
onCropChange={setCrop}
onZoomChange={setZoom}
onCropComplete={onCropComplete}
/>
</div>
<div className={styles.cropControls}>
<label className={styles.zoomLabel}>
{t('myProducts.images.zoom')}
<input
type="range"
min={1}
max={3}
step={0.05}
value={zoom}
onChange={(e) => setZoom(Number(e.target.value))}
/>
</label>
<div className={styles.cropActions}>
<button type="button" className={styles.cancelBtn} onClick={cancelCrop}>
{t('myProducts.cancel')}
</button>
<button
type="button"
className={styles.applyBtn}
onClick={() => void applyCrop()}
disabled={!croppedArea}
>
{t('myProducts.images.applyCrop')}
</button>
</div>
</div>
</div>
)}
{value && !imageSrc && (
<label className={styles.changeBtn}>
{resolvedChangeLabel}
<input type="file" accept={accept} onChange={handleFile} hidden />
</label>
)}
</div>
)
}
apps/customer/src/components/ImageUploader.module.css
+83
View File
@@ -0,0 +1,83 @@
.wrapper {
display: flex;
flex-direction: column;
gap: 8px;
}
.grid {
--thumb-height: 140px;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: stretch;
}
.item {
position: relative;
height: var(--thumb-height);
width: fit-content;
max-width: 100%;
flex: 0 0 auto;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--glass-border);
background: var(--card-media-bg);
display: flex;
align-items: center;
justify-content: center;
}
.item img {
height: var(--thumb-height);
width: auto;
display: block;
object-fit: contain;
}
.removeBtn {
position: absolute;
top: 6px;
inset-inline-end: 6px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(15, 23, 42, 0.65);
color: white;
transition: background 0.2s;
}
.removeBtn:hover {
background: #ef4444;
}
.addBtn {
height: var(--thumb-height);
width: var(--thumb-height);
flex: 0 0 var(--thumb-height);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
border: 2px dashed rgba(148, 163, 184, 0.4);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--surface) 70%, transparent);
color: var(--text-secondary);
font-size: 12px;
font-family: var(--font-ui);
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.addBtn:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(var(--primary-rgb) / 0.06);
}
.hint {
font-size: 12px;
color: var(--text-muted);
}
apps/customer/src/components/ImageUploader.tsx
+77
View File
@@ -0,0 +1,77 @@
import { useRef } from 'react'
import { ImagePlus, X } from 'lucide-react'
import { useT } from '../i18n/useT'
import styles from './ImageUploader.module.css'
interface ImageUploaderProps {
images: string[]
onChange: (images: string[]) => void
}
export function ImageUploader({ images, onChange }: ImageUploaderProps) {
const t = useT()
const inputRef = useRef<HTMLInputElement>(null)
function handleFiles(e: React.ChangeEvent<HTMLInputElement>) {
const files = Array.from(e.target.files ?? [])
if (!files.length) return
const readers = files.map(
(file) =>
new Promise<string>((resolve) => {
const reader = new FileReader()
reader.onload = () => resolve(reader.result as string)
reader.readAsDataURL(file)
}),
)
Promise.all(readers).then((results) => {
onChange([...images, ...results])
})
e.target.value = ''
}
function removeImage(index: number) {
onChange(images.filter((_, i) => i !== index))
}
return (
<div className={styles.wrapper}>
<div className={styles.grid}>
{images.map((src, index) => (
<div key={`${src.slice(0, 32)}-${index}`} className={styles.item}>
<img src={src} alt={t('myProducts.images.gallery')} />
<button
type="button"
className={styles.removeBtn}
onClick={() => removeImage(index)}
aria-label={t('myProducts.images.galleryRemove', { index: index + 1 })}
>
<X size={14} />
</button>
</div>
))}
<button
type="button"
className={styles.addBtn}
onClick={() => inputRef.current?.click()}
>
<ImagePlus size={24} />
<span>{t('myProducts.images.galleryAdd')}</span>
</button>
</div>
<input
ref={inputRef}
type="file"
accept="image/*"
multiple
hidden
onChange={handleFiles}
/>
<p className={styles.hint}>{t('myProducts.images.galleryHint')}</p>
</div>
)
}
apps/customer/src/components/OrderItemsModal.module.css
+2 -2
View File
@@ -48,7 +48,7 @@
padding: 10px 12px;
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(255, 255, 255, 0.55);
background: var(--surface);
}
.itemThumb {
@@ -57,7 +57,7 @@
flex-shrink: 0;
border-radius: 8px;
overflow: hidden;
background: #fff;
background: var(--card-media-bg);
border: 1px solid rgba(148, 163, 184, 0.15);
}
apps/customer/src/components/PageContent.module.css
+31 -2
View File
@@ -62,11 +62,32 @@
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
margin-top: 24px;
}
.col6 {
grid-column: span 6;
display: flex;
min-height: 0;
}
.col6 > *,
.col4 > *,
.col3 > * {
flex: 1;
width: 100%;
min-height: 100%;
}
.col4 {
grid-column: span 4;
display: flex;
min-height: 0;
}
.col3 {
grid-column: span 3;
display: flex;
min-height: 0;
}
@media (max-width: 1400px) {
@@ -80,6 +101,12 @@
.grid {
grid-template-columns: repeat(2, 1fr);
}
.col6,
.col4,
.col3 {
grid-column: span 12;
}
}
@media (max-width: 768px) {
@@ -107,7 +134,9 @@
gap: 16px;
}
.col6 {
.col6,
.col4,
.col3 {
grid-column: span 12;
}
}
apps/customer/src/components/Sidebar.tsx
+8 -1
View File
@@ -1,12 +1,14 @@
import { useEffect, useState } from 'react'
import { NavLink, useNavigate } from 'react-router-dom'
import { Home, User, MapPin, ShoppingBag, Heart, HelpCircle, LogOut } from 'lucide-react'
import { Home, User, MapPin, ShoppingBag, Heart, Package, HelpCircle, LogOut } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useAuth } from '../context/AuthContext'
import { useTenantBranding } from '../context/TenantBrandingContext'
import { useT } from '../i18n/useT'
import { getActiveBusinessDomain } from '../lib/businessContext'
import { isAbortError } from '../lib/api'
import { getWebsiteBusinessInfo } from '../services/websiteService'
import { hasBusinessModule } from '../utils/businessModules'
import meshkeeLogo from '../assets/meshkee-logo.png'
import styles from './Sidebar.module.css'
@@ -14,6 +16,7 @@ export function Sidebar() {
const navigate = useNavigate()
const { user, logout } = useAuth()
const { locale } = useLocale()
const { enabledModules } = useTenantBranding()
const t = useT()
const [brandName, setBrandName] = useState('')
const [logoUrl, setLogoUrl] = useState<string | null>(null)
@@ -21,6 +24,7 @@ export function Sidebar() {
const businessDomain = getActiveBusinessDomain()
const fallbackBusinessName = user?.customerBusinesses[0]?.name ?? t('app.storeFallback')
const displayName = brandName || fallbackBusinessName
const showMyProducts = hasBusinessModule(enabledModules, 'customer_products')
const navItems = [
{ icon: Home, label: t('nav.home'), to: '/' },
@@ -28,6 +32,9 @@ export function Sidebar() {
{ icon: MapPin, label: t('nav.addresses'), to: '/addresses' },
{ icon: ShoppingBag, label: t('nav.orders'), to: '/orders' },
{ icon: Heart, label: t('nav.favorites'), to: '/favorites' },
...(showMyProducts
? [{ icon: Package, label: t('nav.myProducts'), to: '/my-products' }]
: []),
]
useEffect(() => {
apps/customer/src/components/Toast.module.css
+1 -1
View File
@@ -19,7 +19,7 @@
font-weight: 500;
line-height: 1.4;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.55);
background: var(--elevated-surface);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
border: 1px solid var(--glass-border);
apps/customer/src/components/Tooltip.module.css
+12 -15
View File
@@ -4,10 +4,9 @@
}
.tip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
position: fixed;
z-index: 10000;
transform: translate(-50%, calc(-100% + 4px));
padding: 6px 10px;
font-size: 12px;
font-weight: 500;
@@ -18,13 +17,18 @@
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
z-index: 50;
background: rgba(255, 255, 255, 0.75);
background: var(--elevated-surface);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(31, 38, 135, 0.12);
box-shadow: var(--glass-shadow);
}
.tipVisible {
opacity: 1;
visibility: visible;
transform: translate(-50%, -100%);
}
.tip::after {
@@ -34,12 +38,5 @@
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: rgba(255, 255, 255, 0.75);
}
.wrap:hover .tip,
.wrap:focus-within .tip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
border-top-color: var(--elevated-surface);
}
apps/customer/src/components/Tooltip.tsx
+64 -5
View File
@@ -1,4 +1,5 @@
import type { ReactElement } from 'react'
import { useEffect, useRef, useState, type ReactElement } from 'react'
import { createPortal } from 'react-dom'
import styles from './Tooltip.module.css'
interface TooltipProps {
@@ -7,12 +8,70 @@ interface TooltipProps {
}
export function Tooltip({ label, children }: TooltipProps) {
const wrapRef = useRef<HTMLSpanElement>(null)
const [visible, setVisible] = useState(false)
const [coords, setCoords] = useState({ top: 0, left: 0 })
function updatePosition() {
const el = wrapRef.current
if (!el) return
const rect = el.getBoundingClientRect()
setCoords({
top: rect.top - 8,
left: rect.left + rect.width / 2,
})
}
function show() {
updatePosition()
setVisible(true)
}
function hide() {
setVisible(false)
}
useEffect(() => {
if (!visible) return
function onReposition() {
updatePosition()
}
window.addEventListener('scroll', onReposition, true)
window.addEventListener('resize', onReposition)
return () => {
window.removeEventListener('scroll', onReposition, true)
window.removeEventListener('resize', onReposition)
}
}, [visible])
return (
<span className={styles.wrap}>
<span
ref={wrapRef}
className={styles.wrap}
onMouseEnter={show}
onMouseLeave={hide}
onFocusCapture={show}
onBlurCapture={(e) => {
if (!wrapRef.current?.contains(e.relatedTarget as Node | null)) {
hide()
}
}}
>
{children}
<span className={styles.tip} role="tooltip">
{label}
</span>
{visible
? createPortal(
<span
className={`${styles.tip} ${styles.tipVisible}`}
role="tooltip"
style={{ top: coords.top, left: coords.left }}
>
{label}
</span>,
document.body,
)
: null}
</span>
)
}
apps/customer/src/components/UserProductCard.module.css
+236
View File
@@ -0,0 +1,236 @@
.card {
display: flex;
flex-direction: column;
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);
transition: var(--card-hover-transition, transform 0.2s, box-shadow 0.2s);
overflow: hidden;
}
.mainLink {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
color: inherit;
text-decoration: none;
}
.imageWrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--card-media-bg);
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.imagePlaceholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(148, 163, 184, 0.75);
background: linear-gradient(
135deg,
rgba(148, 163, 184, 0.14) 0%,
rgba(148, 163, 184, 0.05) 100%
);
}
.badge {
position: absolute;
top: 8px;
inset-inline-start: 8px;
padding: 3px 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.03em;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 1;
}
.badge[data-status='draft'] {
color: #fff;
background: linear-gradient(
145deg,
rgba(251, 191, 36, 0.55) 0%,
rgba(245, 158, 11, 0.32) 100%
);
border-color: rgba(251, 191, 36, 0.35);
}
.badge[data-status='published'] {
color: #047857;
background: linear-gradient(
145deg,
rgba(167, 243, 208, 0.55) 0%,
rgba(52, 211, 153, 0.28) 100%
);
border-color: rgba(110, 231, 183, 0.4);
}
.badge[data-status='archived'] {
color: #e2e8f0;
background: linear-gradient(
145deg,
rgba(148, 163, 184, 0.45) 0%,
rgba(100, 116, 139, 0.28) 100%
);
border-color: rgba(148, 163, 184, 0.35);
}
.badge[data-status='rejected'] {
color: #fff;
background: linear-gradient(
145deg,
rgba(239, 68, 68, 0.55) 0%,
rgba(220, 38, 38, 0.32) 100%
);
border-color: rgba(239, 68, 68, 0.35);
}
.body {
padding: 10px 10px 8px;
flex: 1;
}
.title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
margin: 0 0 3px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.secondary {
font-family: var(--font-ui);
font-size: 12px;
color: var(--text-secondary);
margin: 0 0 6px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.categoryChip {
display: inline-block;
margin-bottom: 6px;
padding: 2px 8px;
font-size: 10px;
font-weight: 500;
color: var(--text-secondary);
background: rgba(148, 163, 184, 0.12);
border-radius: 50px;
}
.metaRow {
display: flex;
align-items: center;
gap: 8px;
margin-top: 2px;
/* Physical LTR: price left, location right */
direction: ltr;
}
.location {
display: flex;
align-items: center;
gap: 4px;
margin: 0 0 0 auto;
font-size: 11px;
color: var(--text-muted);
min-width: 0;
}
.location span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.price {
margin: 0;
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
flex-shrink: 0;
}
.promotedBadge {
position: absolute;
top: 8px;
inset-inline-end: 8px;
padding: 3px 8px;
font-size: 10px;
font-weight: 600;
color: #fff;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: linear-gradient(
145deg,
rgba(99, 102, 241, 0.7) 0%,
rgba(168, 85, 247, 0.45) 100%
);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 1;
}
.controls {
display: flex;
align-items: center;
justify-content: space-around;
padding: 8px 6px 10px;
border-top: 1px solid rgba(148, 163, 184, 0.15);
overflow: visible;
}
.controls button {
position: relative;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: var(--text-secondary);
transition: background 0.2s, color 0.2s;
}
.controls button:hover:not(:disabled) {
background: rgba(var(--primary-rgb) / 0.1);
color: var(--primary);
}
.controls button:disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
.controls button.danger:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
apps/customer/src/components/UserProductCard.tsx
+161
View File
@@ -0,0 +1,161 @@
import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { ImageOff, MapPin, Megaphone, Pencil, Trash2 } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import type { UserProductListItem } from '../types/userProduct'
import { formatIrtPrice } from '../utils/irtPrice'
import { useT } from '../i18n/useT'
import { Tooltip } from './Tooltip'
import styles from './UserProductCard.module.css'
interface UserProductCardProps {
product: UserProductListItem
to?: string
onEdit?: (id: string) => void
onRemove?: (id: string) => void
onPromote?: (id: string) => void
busyAction?: 'remove' | 'promote' | null
}
export function UserProductCard({
product,
to,
onEdit,
onRemove,
onPromote,
busyAction = null,
}: UserProductCardProps) {
const t = useT()
const { locale } = useLocale()
const isFa = locale === 'fa'
const titleFa = product.titleFa || product.title
const titleEn = product.titleEn?.trim() || ''
const title = isFa ? titleFa : titleEn || titleFa
const secondary = isFa ? titleEn : titleEn ? titleFa : ''
const city = isFa ? product.cityNameFa || product.cityName : product.cityName
const category = isFa
? product.categoryNameFa || product.categoryName
: product.categoryName
const imageSrc = product.imageUrl?.trim() || ''
const [imageFailed, setImageFailed] = useState(false)
const showImage = Boolean(imageSrc) && !imageFailed
const currency = (product.priceCurrency || 'IRT').toUpperCase()
const priceLabel =
product.price == null
? t('myProducts.priceUnavailable')
: currency === 'IRT'
? formatIrtPrice(product.price)
: `${product.price.toLocaleString('en-US')} ${currency}`
const showControls = Boolean(onEdit || onRemove || onPromote)
const isBusy = busyAction != null
useEffect(() => {
setImageFailed(false)
}, [imageSrc])
const statusLabel =
product.status === 'published'
? t('myProducts.status.published')
: product.status === 'archived'
? t('myProducts.status.archived')
: product.status === 'rejected'
? t('myProducts.status.rejected')
: t('myProducts.status.pending')
const mediaAndBody = (
<>
<div className={styles.imageWrap}>
{showImage ? (
<img
src={imageSrc}
alt={title}
className={styles.image}
loading="lazy"
onError={() => setImageFailed(true)}
/>
) : (
<div className={styles.imagePlaceholder} aria-hidden="true">
<ImageOff size={28} strokeWidth={1.5} />
</div>
)}
<span className={styles.badge} data-status={product.status}>
{statusLabel}
</span>
{product.promoted ? (
<span className={styles.promotedBadge}>{t('myProducts.promoted')}</span>
) : null}
</div>
<div className={styles.body} dir={isFa ? 'rtl' : 'ltr'}>
<h3 className={styles.title}>{title}</h3>
{secondary ? <p className={styles.secondary}>{secondary}</p> : null}
{category ? <span className={styles.categoryChip}>{category}</span> : null}
<div className={styles.metaRow}>
<p className={styles.price}>{priceLabel}</p>
<p className={styles.location} dir={isFa ? 'rtl' : 'ltr'}>
<MapPin size={12} aria-hidden="true" />
<span>{city}</span>
</p>
</div>
</div>
</>
)
return (
<article className={styles.card} data-card-hover>
{to ? (
<Link to={to} className={styles.mainLink}>
{mediaAndBody}
</Link>
) : (
mediaAndBody
)}
{showControls ? (
<div className={styles.controls}>
{onEdit ? (
<Tooltip label={t('myProducts.edit')}>
<button
type="button"
onClick={() => onEdit(product.id)}
aria-label={t('myProducts.edit')}
disabled={isBusy}
>
<Pencil size={16} />
</button>
</Tooltip>
) : null}
{onPromote ? (
<Tooltip
label={
product.promoted ? t('myProducts.promoted') : t('myProducts.promote')
}
>
<button
type="button"
onClick={() => onPromote(product.id)}
aria-label={t('myProducts.promote')}
disabled={isBusy || product.promoted}
>
<Megaphone size={16} />
</button>
</Tooltip>
) : null}
{onRemove ? (
<Tooltip label={t('myProducts.remove')}>
<button
type="button"
className={styles.danger}
onClick={() => onRemove(product.id)}
aria-label={t('myProducts.remove')}
disabled={isBusy}
>
<Trash2 size={16} />
</button>
</Tooltip>
) : null}
</div>
) : null}
</article>
)
}
apps/customer/src/components/VariationsModal.module.css
+5 -5
View File
@@ -20,7 +20,7 @@
max-width: 480px;
max-height: 90vh;
overflow-y: auto;
background: rgba(255, 255, 255, 0.92);
background: var(--surface);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border);
@@ -100,7 +100,7 @@
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.6);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: var(--radius-sm);
}
@@ -185,7 +185,7 @@
line-height: 1.4;
font-family: inherit;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
@@ -213,7 +213,7 @@
line-height: 1.5;
font-family: inherit;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
@@ -233,7 +233,7 @@
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 50px;
transition: all 0.15s;
apps/customer/src/components/checkout/CheckoutAddAddressPanel.module.css
+3 -3
View File
@@ -5,7 +5,7 @@
padding: 14px;
border: 2px solid rgba(var(--primary-rgb) / 0.2);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
}
.formInModal {
@@ -60,7 +60,7 @@
font-size: var(--field-font-size);
font-family: var(--font-fa);
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.85);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
@@ -141,7 +141,7 @@
padding: 14px;
border: 2px dashed rgba(148, 163, 184, 0.45);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.45);
background: var(--surface);
color: var(--primary);
font-size: 13px;
font-weight: 600;
apps/customer/src/components/checkout/CheckoutLayout.module.css
+10 -15
View File
@@ -4,19 +4,14 @@
flex-direction: column;
position: relative;
direction: rtl;
font-family: var(--font-fa);
/* Soften brand color in page wash — keep primary accents, less saturated bg */
background-color: #f8f6f6;
background-image:
radial-gradient(ellipse 520px 520px at calc(100% - 40px) -60px, rgba(var(--primary-rgb) / 0.1), transparent 72%),
radial-gradient(ellipse 420px 420px at 18% calc(100% + 20px), rgba(var(--primary-rgb) / 0.07), transparent 72%),
radial-gradient(ellipse 320px 320px at -40px 42%, rgba(var(--primary-rgb) / 0.05), transparent 72%),
linear-gradient(
135deg,
color-mix(in srgb, var(--primary-light) 22%, #ffffff) 0%,
color-mix(in srgb, var(--primary-light) 10%, #ffffff) 50%,
#fafafa 100%
);
font-family: var(--font-ui);
background-color: var(--bg-gradient-mid);
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;
@@ -119,12 +114,12 @@
}
.card {
background: rgba(255, 255, 255, 0.75);
background: var(--glass-bg);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: 0 20px 60px rgba(31, 38, 135, 0.12);
box-shadow: var(--glass-shadow);
padding: 28px 28px 24px;
}
apps/customer/src/context/CustomerThemeContext.tsx
+10
View File
@@ -5,6 +5,13 @@ import { resolveTenantByDomain } from '../services/tenantService'
import { applyBusinessPrimaryColor, resetBusinessPrimaryColor } from '../utils/applyBusinessTheme'
import { normalizeBusinessPrimaryColorId } from '../utils/businessPrimaryColors'
function applyThemeMode(mode: 'light' | 'dark' | undefined) {
document.documentElement.setAttribute(
'data-theme',
mode === 'dark' ? 'dark' : 'light',
)
}
export function CustomerThemeProvider({ children }: { children: ReactNode }) {
useEffect(() => {
const controller = new AbortController()
@@ -13,12 +20,15 @@ export function CustomerThemeProvider({ children }: { children: ReactNode }) {
async function loadTheme() {
try {
const tenant = await resolveTenantByDomain(domain, controller.signal)
if (controller.signal.aborted) return
applyBusinessPrimaryColor(
normalizeBusinessPrimaryColorId(tenant.primaryColor),
)
applyThemeMode(tenant.themeMode)
} catch (err) {
if (isAbortError(err)) return
applyBusinessPrimaryColor(undefined)
applyThemeMode('light')
}
}
apps/customer/src/context/TenantBrandingContext.tsx
+13 -2
View File
@@ -13,12 +13,18 @@ import { isAbortError } from '../lib/api'
import { getTenantDomain } from '../lib/config'
import { getWebsiteBusinessInfo } from '../services/websiteService'
import { resolveTenantByDomain } from '../services/tenantService'
import {
DEFAULT_ENABLED_BUSINESS_MODULES,
normalizeEnabledBusinessModules,
type BusinessModuleId,
} from '../utils/businessModules'
interface TenantBrandingContextValue {
businessName: string
businessNameEn: string
logoUrl: string | null
faviconUrl: string | null
enabledModules: BusinessModuleId[]
}
const TenantBrandingContext = createContext<TenantBrandingContextValue | null>(null)
@@ -39,6 +45,9 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
const [businessNameEn, setBusinessNameEn] = useState('')
const [logoUrl, setLogoUrl] = useState<string | null>(null)
const [faviconUrl, setFaviconUrl] = useState<string | null>(null)
const [enabledModules, setEnabledModules] = useState<BusinessModuleId[]>(
DEFAULT_ENABLED_BUSINESS_MODULES,
)
const defaultLocaleAppliedRef = useRef(false)
const domain = getTenantDomain()
@@ -75,6 +84,7 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
setBusinessNameEn(nameEn || domain)
setLogoUrl(nextLogo)
setFaviconUrl(nextFavicon)
setEnabledModules(normalizeEnabledBusinessModules(tenant.enabledModules))
applyDocumentFavicon(nextFavicon)
if (!defaultLocaleAppliedRef.current) {
@@ -91,6 +101,7 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
setBusinessNameEn(domain)
setLogoUrl(null)
setFaviconUrl(null)
setEnabledModules([...DEFAULT_ENABLED_BUSINESS_MODULES])
applyDocumentFavicon(null)
}
}
@@ -103,8 +114,8 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
}, [domain, setLocale])
const value = useMemo(
() => ({ businessName, businessNameEn, logoUrl, faviconUrl }),
[businessName, businessNameEn, logoUrl, faviconUrl],
() => ({ businessName, businessNameEn, logoUrl, faviconUrl, enabledModules }),
[businessName, businessNameEn, logoUrl, faviconUrl, enabledModules],
)
return (
apps/customer/src/i18n/messages.ts
+264
View File
@@ -12,6 +12,7 @@ const en = {
'nav.addresses': 'My Addresses',
'nav.orders': 'My Orders',
'nav.favorites': 'My Favorites',
'nav.myProducts': 'My Products',
'nav.help': 'Help Center',
'nav.logout': 'Logout',
@@ -30,12 +31,19 @@ const en = {
'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.addresses.count': '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.orders.count': 'orders',
'home.card.favorites.title': 'My Favorites',
'home.card.favorites.desc': 'Browse and manage your saved favorite products.',
'home.card.favorites.link': 'View favorites',
'home.card.favorites.count': 'favorites',
'home.card.myProducts.title': 'My Products',
'home.card.myProducts.desc': 'List and manage products you have submitted.',
'home.card.myProducts.link': 'View my products',
'home.card.myProducts.count': 'products',
'profile.title': 'My Profile',
'profile.subtitle': 'Update your personal information and contact details.',
@@ -154,6 +162,128 @@ const en = {
'favorites.inStock': '{count} in stock',
'favorites.variantOne': '1 variant',
'favorites.variantMany': '{count} variants',
'myProducts.title': 'My Products',
'myProducts.subtitle':
'The products below are yours and will be sold on our website after supervisor approval.',
'myProducts.empty': 'You have not added any products yet.',
'myProducts.add': 'Add product',
'myProducts.addTitle': 'Add product',
'myProducts.addSubtitle': 'Submit a new product for review.',
'myProducts.addComingSoon': 'The add form will be designed next.',
'myProducts.backToList': 'Back to my products',
'myProducts.editTitle': 'Edit product',
'myProducts.editSubtitle': 'Update your listing details, then save.',
'myProducts.detailsTitle': 'Product details',
'myProducts.detailsSubtitle': 'Review your submitted listing.',
'myProducts.edit': 'Edit product',
'myProducts.yes': 'Yes',
'myProducts.editSoon': 'Edit product will be available soon.',
'myProducts.remove': 'Remove product',
'myProducts.removeConfirm': 'Remove this product from your stock?',
'myProducts.removeSuccess': 'Product removed.',
'myProducts.promote': 'Promote product',
'myProducts.promoted': 'Promoted',
'myProducts.promoteSuccess': 'Product promoted.',
'myProducts.priceUnavailable': 'Price on request',
'myProducts.status.pending': 'Pending',
'myProducts.status.published': 'Approved',
'myProducts.status.rejected': 'Rejected',
'myProducts.status.archived': 'Archived',
'myProducts.stepperLabel': 'Add product steps',
'myProducts.step.basics': 'Basics',
'myProducts.step.basicsHint': 'Category, names, description, price, and location.',
'myProducts.step.basicsPlaceholder': 'Basic fields will go here.',
'myProducts.step.images': 'Images',
'myProducts.step.imagesHint': 'Add a cropped thumbnail and gallery photos.',
'myProducts.step.details': 'Details',
'myProducts.step.detailsHint': 'Description and technical information for the selected category.',
'myProducts.step.detailsPlaceholder': 'Details and technical fields will go here.',
'myProducts.step.technical': 'Technical data',
'myProducts.step.technicalHint':
'Choose condition, add optional notes, then fill the category technical form.',
'myProducts.optional': '(optional)',
'myProducts.loading': 'Loading products…',
'myProducts.fields.category': 'Category',
'myProducts.fields.selectCategory': 'Select category',
'myProducts.fields.searchCategory': 'Search category…',
'myProducts.fields.clearCategory': 'Clear category',
'myProducts.fields.noCategories': 'No categories found',
'myProducts.fields.titleFa': 'Name (FA)',
'myProducts.fields.titleFaPlaceholder': 'Product name in Farsi',
'myProducts.fields.titleEn': 'Name (EN)',
'myProducts.fields.titleEnPlaceholder': 'Product name in English',
'myProducts.fields.description': 'Description',
'myProducts.fields.descriptionPlaceholder': 'Short description of your product',
'myProducts.fields.price': 'Desired price',
'myProducts.fields.priceSuggested': 'Your suggested price',
'myProducts.fields.priceByExpert': 'I want an expert to set the price',
'myProducts.fields.pricePlaceholder': 'e.g. 1,500,000',
'myProducts.fields.priceUnit': 'Unit',
'myProducts.fields.priceUnit.IRT': 'IRT',
'myProducts.fields.priceUnit.USD': 'Dollar',
'myProducts.fields.priceUnit.EUR': 'EURO',
'myProducts.fields.priceUnit.AED': 'AED',
'myProducts.fields.location': 'Location',
'myProducts.fields.country': 'Country',
'myProducts.fields.selectCountry': 'Select country',
'myProducts.fields.province': 'Province',
'myProducts.fields.selectProvince': 'Select province',
'myProducts.fields.city': 'City',
'myProducts.fields.selectCity': 'Select city',
'myProducts.fields.searchCity': 'Search city…',
'myProducts.fields.clearCity': 'Clear city',
'myProducts.fields.noCities': 'No cities found',
'myProducts.fields.deliveryNote': 'Pickup / delivery note',
'myProducts.fields.deliveryNotePlaceholder': 'e.g. pickup only, evening delivery…',
'myProducts.fields.district': 'District',
'myProducts.fields.selectDistrict': 'Select district',
'myProducts.fields.condition': 'Condition',
'myProducts.fields.technicalNotes': 'Technical notes',
'myProducts.fields.technicalNotesPlaceholder': 'Optional extra technical details…',
'myProducts.condition.new': 'New',
'myProducts.condition.stock': 'Stock',
'myProducts.condition.needs_repair': 'Needs repair',
'myProducts.condition.scrap': 'Scrap',
'myProducts.images.thumbnail': 'Thumbnail',
'myProducts.images.thumbnailUpload': 'Upload thumbnail',
'myProducts.images.thumbnailHint': '3:2 landscape works best',
'myProducts.images.thumbnailChange': 'Change thumbnail',
'myProducts.images.thumbnailRemove': 'Remove thumbnail',
'myProducts.images.zoom': 'Zoom',
'myProducts.images.applyCrop': 'Apply crop',
'myProducts.images.gallery': 'Gallery',
'myProducts.images.galleryAdd': 'Add photos',
'myProducts.images.galleryHint': 'You can select multiple images.',
'myProducts.images.galleryRemove': 'Remove image {index}',
'myProducts.technical.select': 'Select…',
'myProducts.technical.needCategory': 'Choose a category in step 1 to load technical fields.',
'myProducts.technical.empty': 'This category has no technical fields yet.',
'myProducts.technical.categoryForm': 'Category technical form',
'myProducts.technical.loading': 'Loading technical fields…',
'myProducts.cancel': 'Cancel',
'myProducts.next': 'Next',
'myProducts.back': 'Back',
'myProducts.submit': 'Submit',
'myProducts.save': 'Save changes',
'myProducts.submitting': 'Submitting…',
'myProducts.submitSuccess': 'Product submitted for review.',
'myProducts.updateSuccess': 'Product updated.',
'myProducts.error.load': 'Unable to load your products.',
'myProducts.error.loadDetail': 'Unable to load this product.',
'myProducts.error.loadLocations': 'Unable to load locations.',
'myProducts.error.loadCategories': 'Unable to load categories.',
'myProducts.error.loadTechnicalForm': 'Unable to load the category technical form.',
'myProducts.error.categoryRequired': 'Please select a category.',
'myProducts.error.titleFaRequired': 'Please enter the Farsi name.',
'myProducts.error.locationRequired': 'Please select country and city.',
'myProducts.error.priceInvalid': 'Please enter a valid price.',
'myProducts.error.conditionRequired': 'Please select a condition.',
'myProducts.error.technicalRequired': 'Please fill required technical fields.',
'myProducts.error.submit': 'Unable to submit the product.',
'myProducts.error.update': 'Unable to update the product.',
'myProducts.error.remove': 'Unable to remove the product.',
'myProducts.error.promote': 'Unable to promote the product.',
'storeItems.price.contact': 'Contact for price',
'title.signIn': 'Sign in',
@@ -261,6 +391,7 @@ const fa: Record<MessageKey, string> = {
'nav.addresses': 'آدرس‌های من',
'nav.orders': 'سفارش‌های من',
'nav.favorites': 'علاقه‌مندی‌ها',
'nav.myProducts': 'محصولات من',
'nav.help': 'مرکز راهنما',
'nav.logout': 'خروج',
@@ -279,12 +410,19 @@ const fa: Record<MessageKey, string> = {
'home.card.addresses.title': 'آدرس‌های من',
'home.card.addresses.desc': 'آدرس‌های ارسال برای تسویه‌حساب و تحویل را مدیریت کنید.',
'home.card.addresses.link': 'مشاهده آدرس‌ها',
'home.card.addresses.count': 'آدرس',
'home.card.orders.title': 'سفارش‌های من',
'home.card.orders.desc': 'سفارش‌ها را پیگیری کنید و تاریخچه و جزئیات را ببینید.',
'home.card.orders.link': 'مشاهده سفارش‌ها',
'home.card.orders.count': 'سفارش',
'home.card.favorites.title': 'علاقه‌مندی‌ها',
'home.card.favorites.desc': 'محصولات ذخیره‌شده مورد علاقه‌تان را ببینید و مدیریت کنید.',
'home.card.favorites.link': 'مشاهده علاقه‌مندی‌ها',
'home.card.favorites.count': 'علاقه‌مندی',
'home.card.myProducts.title': 'محصولات من',
'home.card.myProducts.desc': 'محصولاتی که ثبت کرده‌اید را ببینید و مدیریت کنید.',
'home.card.myProducts.link': 'مشاهده محصولات من',
'home.card.myProducts.count': 'محصول',
'profile.title': 'پروفایل من',
'profile.subtitle': 'اطلاعات شخصی و راه‌های ارتباطی خود را به‌روزرسانی کنید.',
@@ -403,6 +541,128 @@ const fa: Record<MessageKey, string> = {
'favorites.inStock': '{count} موجود',
'favorites.variantOne': '۱ تنوع',
'favorites.variantMany': '{count} تنوع',
'myProducts.title': 'محصولات من',
'myProducts.subtitle':
'محصولات زیر، محصولات شما هستند که توسط وبسایت ما بعد از تایید ناظر به فروش خواهد رسید.',
'myProducts.empty': 'هنوز محصولی ثبت نکرده‌اید.',
'myProducts.add': 'افزودن محصول',
'myProducts.addTitle': 'افزودن محصول',
'myProducts.addSubtitle': 'محصول جدید را برای بررسی ارسال کنید.',
'myProducts.addComingSoon': 'فرم افزودن در مرحله بعد طراحی می‌شود.',
'myProducts.backToList': 'بازگشت به محصولات من',
'myProducts.editTitle': 'ویرایش محصول',
'myProducts.editSubtitle': 'جزئیات آگهی را به‌روز کنید و ذخیره کنید.',
'myProducts.detailsTitle': 'جزئیات محصول',
'myProducts.detailsSubtitle': 'جزئیات آگهی ثبت‌شده را ببینید.',
'myProducts.edit': 'ویرایش محصول',
'myProducts.yes': 'بله',
'myProducts.editSoon': 'ویرایش محصول به‌زودی در دسترس خواهد بود.',
'myProducts.remove': 'حذف محصول',
'myProducts.removeConfirm': 'این محصول از موجودی شما حذف شود؟',
'myProducts.removeSuccess': 'محصول حذف شد.',
'myProducts.promote': 'پروموت محصول',
'myProducts.promoted': 'پروموت شده',
'myProducts.promoteSuccess': 'محصول پروموت شد.',
'myProducts.priceUnavailable': 'قیمت اعلام نشده',
'myProducts.status.pending': 'در انتظار تأیید',
'myProducts.status.published': 'تأیید شده',
'myProducts.status.rejected': 'رد شده',
'myProducts.status.archived': 'بایگانی',
'myProducts.stepperLabel': 'مراحل افزودن محصول',
'myProducts.step.basics': 'اطلاعات پایه',
'myProducts.step.basicsHint': 'دسته‌بندی، نام، توضیحات، قیمت و موقعیت.',
'myProducts.step.basicsPlaceholder': 'فیلدهای پایه اینجا قرار می‌گیرند.',
'myProducts.step.images': 'تصاویر',
'myProducts.step.imagesHint': 'تصویر شاخص با برش و گالری تصاویر را اضافه کنید.',
'myProducts.step.details': 'جزئیات',
'myProducts.step.detailsHint': 'توضیحات و اطلاعات فنی بر اساس دسته‌بندی انتخاب‌شده.',
'myProducts.step.detailsPlaceholder': 'جزئیات و فیلدهای فنی اینجا قرار می‌گیرند.',
'myProducts.step.technical': 'اطلاعات فنی',
'myProducts.step.technicalHint':
'وضعیت را انتخاب کنید، یادداشت اختیاری بنویسید و فرم فنی دسته‌بندی را تکمیل کنید.',
'myProducts.optional': '(اختیاری)',
'myProducts.loading': 'در حال بارگذاری محصولات…',
'myProducts.fields.category': 'دسته‌بندی',
'myProducts.fields.selectCategory': 'انتخاب دسته‌بندی',
'myProducts.fields.searchCategory': 'جستجوی دسته‌بندی…',
'myProducts.fields.clearCategory': 'پاک کردن دسته‌بندی',
'myProducts.fields.noCategories': 'دسته‌بندی‌ای پیدا نشد',
'myProducts.fields.titleFa': 'نام (فارسی)',
'myProducts.fields.titleFaPlaceholder': 'نام محصول به فارسی',
'myProducts.fields.titleEn': 'نام (انگلیسی)',
'myProducts.fields.titleEnPlaceholder': 'نام محصول به انگلیسی',
'myProducts.fields.description': 'توضیحات',
'myProducts.fields.descriptionPlaceholder': 'توضیح کوتاه درباره محصول',
'myProducts.fields.price': 'قیمت پیشنهادی',
'myProducts.fields.priceSuggested': 'قیمت پیشنهادی شما',
'myProducts.fields.priceByExpert': 'می‌خواهم قیمت توسط کارشناس مشخص شود',
'myProducts.fields.pricePlaceholder': 'مثلاً ۱٬۵۰۰٬۰۰۰',
'myProducts.fields.priceUnit': 'واحد',
'myProducts.fields.priceUnit.IRT': 'IRT',
'myProducts.fields.priceUnit.USD': 'Dollar',
'myProducts.fields.priceUnit.EUR': 'EURO',
'myProducts.fields.priceUnit.AED': 'AED',
'myProducts.fields.location': 'موقعیت',
'myProducts.fields.country': 'کشور',
'myProducts.fields.selectCountry': 'انتخاب کشور',
'myProducts.fields.province': 'استان',
'myProducts.fields.selectProvince': 'انتخاب استان',
'myProducts.fields.city': 'شهر',
'myProducts.fields.selectCity': 'انتخاب شهر',
'myProducts.fields.searchCity': 'جستجوی شهر…',
'myProducts.fields.clearCity': 'پاک کردن شهر',
'myProducts.fields.noCities': 'شهری پیدا نشد',
'myProducts.fields.deliveryNote': 'یادداشت تحویل / دریافت',
'myProducts.fields.deliveryNotePlaceholder': 'مثلاً فقط حضوری، تحویل عصر…',
'myProducts.fields.district': 'منطقه',
'myProducts.fields.selectDistrict': 'انتخاب منطقه',
'myProducts.fields.condition': 'وضعیت',
'myProducts.fields.technicalNotes': 'توضیحات فنی',
'myProducts.fields.technicalNotesPlaceholder': 'جزئیات فنی اختیاری…',
'myProducts.condition.new': 'نو',
'myProducts.condition.stock': 'استوک',
'myProducts.condition.needs_repair': 'نیاز به تعمیر',
'myProducts.condition.scrap': 'اوراق',
'myProducts.images.thumbnail': 'تصویر شاخص',
'myProducts.images.thumbnailUpload': 'آپلود تصویر شاخص',
'myProducts.images.thumbnailHint': 'نسبت ۳:۲ افقی بهتر است',
'myProducts.images.thumbnailChange': 'تغییر تصویر شاخص',
'myProducts.images.thumbnailRemove': 'حذف تصویر شاخص',
'myProducts.images.zoom': 'بزرگنمایی',
'myProducts.images.applyCrop': 'اعمال برش',
'myProducts.images.gallery': 'گالری',
'myProducts.images.galleryAdd': 'افزودن عکس',
'myProducts.images.galleryHint': 'می‌توانید چند تصویر انتخاب کنید.',
'myProducts.images.galleryRemove': 'حذف تصویر {index}',
'myProducts.technical.select': 'انتخاب کنید…',
'myProducts.technical.needCategory': 'برای نمایش فیلدهای فنی، در مرحله ۱ دسته‌بندی را انتخاب کنید.',
'myProducts.technical.empty': 'برای این دسته‌بندی هنوز فیلد فنی تعریف نشده است.',
'myProducts.technical.categoryForm': 'فرم فنی دسته‌بندی',
'myProducts.technical.loading': 'در حال بارگذاری فیلدهای فنی…',
'myProducts.cancel': 'انصراف',
'myProducts.next': 'بعدی',
'myProducts.back': 'قبلی',
'myProducts.submit': 'ارسال',
'myProducts.save': 'ذخیره تغییرات',
'myProducts.submitting': 'در حال ارسال…',
'myProducts.submitSuccess': 'محصول برای بررسی ارسال شد.',
'myProducts.updateSuccess': 'محصول به‌روز شد.',
'myProducts.error.load': 'بارگذاری محصولات ممکن نشد.',
'myProducts.error.loadDetail': 'بارگذاری این محصول ممکن نشد.',
'myProducts.error.loadLocations': 'بارگذاری موقعیت‌ها ممکن نشد.',
'myProducts.error.loadCategories': 'بارگذاری دسته‌بندی‌ها ممکن نشد.',
'myProducts.error.loadTechnicalForm': 'بارگذاری فرم فنی دسته‌بندی ممکن نشد.',
'myProducts.error.categoryRequired': 'لطفاً دسته‌بندی را انتخاب کنید.',
'myProducts.error.titleFaRequired': 'لطفاً نام فارسی را وارد کنید.',
'myProducts.error.locationRequired': 'لطفاً کشور و شهر را انتخاب کنید.',
'myProducts.error.priceInvalid': 'لطفاً قیمت معتبر وارد کنید.',
'myProducts.error.conditionRequired': 'لطفاً وضعیت را انتخاب کنید.',
'myProducts.error.technicalRequired': 'لطفاً فیلدهای فنی الزامی را تکمیل کنید.',
'myProducts.error.submit': 'ارسال محصول ممکن نشد.',
'myProducts.error.update': 'به‌روزرسانی محصول ممکن نشد.',
'myProducts.error.remove': 'حذف محصول ممکن نشد.',
'myProducts.error.promote': 'پروموت محصول ممکن نشد.',
'storeItems.price.contact': 'برای قیمت، تماس بگیرید',
'title.signIn': 'ورود',
@@ -533,6 +793,10 @@ export function getCustomerRouteTitleRules(locale: DashboardLocale) {
{ match: '/addresses', labels: [t('nav.addresses')] },
{ match: '/orders', labels: [t('nav.orders')] },
{ match: '/favorites', labels: [t('nav.favorites')] },
{ match: '/my-products/new', labels: [t('nav.myProducts'), t('myProducts.addTitle')] },
{ match: /^\/my-products\/[^/]+\/edit$/, labels: [t('nav.myProducts'), t('myProducts.editTitle')] },
{ match: /^\/my-products\/[^/]+$/, labels: [t('nav.myProducts'), t('myProducts.detailsTitle')] },
{ match: '/my-products', labels: [t('nav.myProducts')] },
{ match: '/', labels: [t('nav.home')] },
]
}
apps/customer/src/index.css
+65
View File
@@ -5,4 +5,69 @@
--font-en: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-fa: 'YekanBakh', Tahoma, sans-serif;
--font-ui: var(--font-en), var(--font-fa);
/* Neutral light surfaces (theme color stays on accents only) */
--bg-gradient-start: #f4f5f7;
--bg-gradient-mid: #eef0f3;
--bg-gradient-end: #e8eaee;
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-border: rgba(148, 163, 184, 0.28);
--glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
--surface: rgba(255, 255, 255, 0.82);
--card-media-bg: #ffffff;
--elevated-surface: rgba(255, 255, 255, 0.96);
--icon-bg: color-mix(in srgb, var(--primary) 14%, #ffffff);
--icon-bg-end: color-mix(in srgb, var(--primary) 8%, #f1f5f9);
}
/*
* Dark mode: neutral dark gray backgrounds.
* Brand/theme color (--primary) is for accents only — not page/card backgrounds.
*/
html[data-theme='dark'] {
color-scheme: dark;
--bg-gradient-start: #2a2d34;
--bg-gradient-mid: #22252b;
--bg-gradient-end: #1a1d23;
--glass-bg: rgba(45, 49, 57, 0.9);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
--modal-overlay-bg: rgba(0, 0, 0, 0.6);
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--border-color: rgba(255, 255, 255, 0.12);
--surface: rgba(55, 59, 68, 0.95);
--card-media-bg: #32363f;
--elevated-surface: #3a3e48;
--card-hover-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
/* Icon chip: clear primary tint on dark gray (not muddy page wash) */
--icon-bg: rgba(var(--primary-rgb) / 0.22);
--icon-bg-end: rgba(var(--primary-rgb) / 0.12);
}
html[data-theme='dark'] select {
background-color: var(--surface);
color: var(--text-primary);
border-color: var(--border-color);
}
html[data-theme='dark']
input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden']),
html[data-theme='dark'] textarea {
background-color: var(--surface);
color: var(--text-primary);
border-color: var(--border-color);
}
/* Soft neutral aura — no theme-color wash on the page */
html[data-theme='dark'] body::before {
background:
radial-gradient(ellipse 520px 520px at 72% 18%, rgba(255, 255, 255, 0.04), transparent 72%),
radial-gradient(ellipse 420px 420px at 22% 82%, rgba(255, 255, 255, 0.03), transparent 72%);
}
apps/customer/src/lib/routeTitles.ts
+4
View File
@@ -15,5 +15,9 @@ export const customerRouteTitleRules: RouteTitleRule[] = [
{ match: '/addresses', labels: ['My Addresses'] },
{ match: '/orders', labels: ['My Orders'] },
{ match: '/favorites', labels: ['My Favorites'] },
{ match: '/my-products/new', labels: ['My Products', 'Add product'] },
{ match: /^\/my-products\/[^/]+\/edit$/, labels: ['My Products', 'Edit product'] },
{ match: /^\/my-products\/[^/]+$/, labels: ['My Products', 'Product details'] },
{ match: '/my-products', labels: ['My Products'] },
{ match: '/', labels: ['Home'] },
]
apps/customer/src/pages/AddMyProductPage.module.css
+605
View File
@@ -0,0 +1,605 @@
.root {
display: flex;
flex-direction: column;
gap: 0;
font-family: var(--font-ui);
}
.shell {
display: flex;
align-items: stretch;
gap: 12px;
}
.iconRail {
width: 128px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 16px 12px;
border: 1px dashed rgba(148, 163, 184, 0.4);
border-radius: var(--radius);
background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-sizing: border-box;
}
.iconRailInner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
text-align: center;
}
.iconRailGlyph {
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
margin-bottom: 2px;
}
.iconRailLabelFa {
display: block;
width: 100%;
font-size: 12px;
font-weight: 700;
font-family: var(--font-ui);
color: var(--text-primary);
line-height: 1.2;
text-align: center;
}
.iconRailLabelEn {
display: block;
width: 100%;
margin-top: -6px;
font-size: 9px;
font-weight: 700;
font-family: var(--font-en);
color: var(--text-muted);
line-height: 1.25;
letter-spacing: 0.1em;
/* Compensate letter-spacing so centered Latin text doesn’t drift */
padding-inline-start: 0.1em;
text-transform: uppercase;
text-align: center;
direction: ltr;
unicode-bidi: isolate;
}
.card {
flex: 1;
min-width: 0;
background: var(--glass-bg);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: var(--glass-shadow);
padding: 28px 28px 24px;
}
@media (max-width: 640px) {
.shell {
flex-direction: column;
}
.iconRail {
width: 100%;
min-height: 88px;
}
.card {
padding: 22px 18px 20px;
}
}
.stepper {
display: flex;
align-items: flex-end;
width: 100%;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}
.stepGroup {
display: flex;
align-items: flex-end;
flex: 1;
min-width: 0;
}
.stepGroup:last-child {
flex: 0 0 auto;
}
.stepUnit {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.stepDot {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
background: rgba(148, 163, 184, 0.2);
color: var(--text-muted);
border: 2px solid transparent;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.stepLabel {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
transition: color 0.2s;
}
.stepActive .stepDot {
background: rgba(var(--primary-rgb) / 0.15);
color: var(--primary);
border-color: var(--primary);
}
.stepActive .stepLabel {
color: var(--primary);
}
.stepDone .stepDot {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.stepDone .stepLabel {
color: var(--text-secondary);
}
.connector {
flex: 1;
height: 2px;
min-width: 24px;
margin: 0 8px 13px;
background: rgba(148, 163, 184, 0.3);
border-radius: 1px;
transition: background 0.2s;
}
.connectorDone {
background: var(--primary);
}
.body {
display: flex;
flex-direction: column;
gap: 10px;
min-height: 180px;
}
.stepTitle {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
}
.stepDesc {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
}
.form {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 8px;
}
.fieldRow {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.priceRow {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 12px;
align-items: end;
}
.checkRow {
display: inline-flex;
align-items: center;
align-self: end;
gap: 8px;
height: var(--field-height);
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
user-select: none;
box-sizing: border-box;
}
.checkRow input[type='checkbox'] {
width: 16px;
height: 16px;
accent-color: var(--primary);
cursor: pointer;
flex-shrink: 0;
margin: 0;
}
.fieldRowTriple {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
.locationRow {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 12px;
align-items: end;
}
.col2 {
grid-column: span 2;
}
.col3 {
grid-column: span 3;
}
.col4 {
grid-column: span 4;
}
.col6 {
grid-column: span 6;
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field label {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
}
.optional {
font-weight: 400;
color: var(--text-muted);
}
.field input,
.field select,
.field textarea {
width: 100%;
font-size: var(--field-font-size);
font-family: var(--font-ui);
color: var(--text-primary);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
.field input,
.field select {
min-height: var(--field-height);
padding: var(--field-padding-y) var(--field-padding-x);
}
.field textarea {
padding: var(--field-padding-y) var(--field-padding-x);
resize: vertical;
min-height: 96px;
line-height: 1.5;
}
.field input::placeholder,
.field textarea::placeholder {
font-family: var(--font-ui);
color: var(--text-muted);
opacity: 1;
}
.field select {
appearance: none;
-webkit-appearance: none;
padding-inline-end: var(--select-padding-end);
background-color: var(--surface);
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;
}
:global([dir='rtl']) .field select {
background-position: left var(--select-arrow-offset) center;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
}
.sectionDivider {
display: flex;
align-items: center;
gap: 12px;
margin-top: 4px;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sectionDivider::before,
.sectionDivider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(148, 163, 184, 0.25);
}
.thumbnailBlock {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.thumbnailBlock > .field {
grid-column: 5 / span 4;
}
@media (max-width: 720px) {
.thumbnailBlock > .field {
grid-column: 1 / -1;
}
}
.chipGrid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip {
padding: 7px 14px;
font-size: 13px;
font-weight: 500;
font-family: var(--font-ui);
color: var(--text-secondary);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 50px;
transition: all 0.15s;
}
.chip:hover {
border-color: var(--primary);
color: var(--primary);
}
.chipSelected {
background: rgba(var(--primary-rgb) / 0.12);
border-color: var(--primary);
color: var(--primary);
}
.conditionFieldset {
margin: 0;
padding: 0;
border: none;
}
.conditionFieldset legend {
margin-bottom: 8px;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
}
.radioGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.radioCard {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--field-height);
padding: var(--field-padding-y) 8px;
font-size: 12px;
font-family: var(--font-ui);
color: var(--text-primary);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
text-align: center;
}
.radioCard:hover {
border-color: var(--primary);
}
.radioCard:has(input:checked) {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.16);
}
.radioCard input {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--primary);
flex-shrink: 0;
}
.radioCard span {
min-width: 0;
line-height: 1.25;
}
@media (max-width: 720px) {
.radioGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.inlineStatus {
margin: 4px 0 0;
font-size: 13px;
color: var(--text-muted);
}
.placeholder {
margin-top: 8px;
padding: 28px 20px;
text-align: center;
font-size: 13px;
color: var(--text-muted);
background: color-mix(in srgb, var(--surface) 70%, transparent);
border: 1px dashed var(--glass-border);
border-radius: var(--radius-sm);
}
.error {
margin-top: 8px;
font-size: 13px;
color: #fca5a5;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.28);
border-radius: var(--radius-sm);
padding: 10px 12px;
}
.actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(148, 163, 184, 0.25);
}
.ghostBtn,
.secondaryBtn,
.primaryBtn {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
line-height: 1.4;
border-radius: var(--radius-sm);
transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s, background 0.2s, color 0.2s;
white-space: nowrap;
}
.ghostBtn {
padding: 10px 4px;
color: var(--text-secondary);
text-decoration: none;
background: transparent;
}
.ghostBtn:hover {
color: var(--primary);
}
.secondaryBtn {
padding: 10px 18px;
color: var(--text-primary);
background: rgba(148, 163, 184, 0.16);
border: 1px solid var(--glass-border);
}
.secondaryBtn:hover {
background: rgba(148, 163, 184, 0.24);
}
.primaryBtn {
margin-inline-start: auto;
padding: 10px 22px;
color: white;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
box-shadow: 0 4px 14px rgba(var(--primary-rgb) / 0.35);
}
.primaryBtn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(var(--primary-rgb) / 0.4);
}
@media (max-width: 720px) {
.fieldRow,
.fieldRowTriple,
.priceRow,
.locationRow {
grid-template-columns: 1fr;
}
.col2,
.col3,
.col4,
.col6 {
grid-column: auto;
}
}
@media (max-width: 520px) {
.stepLabel {
font-size: 11px;
}
.connector {
min-width: 12px;
margin: 0 4px 13px;
}
.actions {
flex-direction: column-reverse;
align-items: stretch;
}
.primaryBtn,
.secondaryBtn,
.ghostBtn {
width: 100%;
margin-inline-start: 0;
text-align: center;
}
}
apps/customer/src/pages/AddMyProductPage.tsx
+872
View File
@@ -0,0 +1,872 @@
import { useEffect, useRef, useState } from 'react'
import { Link, useNavigate, useParams } from 'react-router-dom'
import { Check, ClipboardList, Images, SlidersHorizontal } from 'lucide-react'
import {
getLocationOptionLabel,
useLocale,
useToast,
type CityOption,
} from '@meshkee/dashboard-ui'
import { CitySearchSelect } from '../components/CitySearchSelect'
import { CategorySearchSelect } from '../components/CategorySearchSelect'
import { ImageCropper } from '../components/ImageCropper'
import { ImageUploader } from '../components/ImageUploader'
import { useT } from '../i18n/useT'
import { translate } from '../i18n/messages'
import { ApiError, isAbortError } from '../lib/api'
import {
listCitiesByCountrySlug,
listCountries,
} from '../services/citiesService'
import {
buildTechnicalValuesPayload,
createMyUserProduct,
getMyUserProduct,
getMyUserProductCategoryTechnicalForm,
listMyUserProductCategories,
updateMyUserProduct,
type TechnicalFormField,
type TechnicalFormValues,
type UserProductCategoryOption,
type UserProductCondition,
type UserProductPriceCurrency,
type UserProductTechnicalValueInput,
} from '../services/userProductsService'
import { resolveDataUrlToMediaId, resolveDataUrlsToMediaIds } from '../services/mediaService'
import { formatIrtInput, parseIrtInput } from '../utils/irtPrice'
import styles from './AddMyProductPage.module.css'
type StepId = 1 | 2 | 3
const PRICE_UNITS: UserProductPriceCurrency[] = ['IRT', 'USD', 'EUR', 'AED']
const CONDITIONS: UserProductCondition[] = [
'new',
'stock',
'needs_repair',
'scrap',
]
function fieldLabel(field: TechnicalFormField) {
return field.label
}
function optionLabel(option: TechnicalFormField['options'][number]) {
return option.label
}
function mapTechnicalValues(
items: UserProductTechnicalValueInput[],
): TechnicalFormValues {
const values: TechnicalFormValues = {}
for (const item of items) {
if (item.textValue != null) {
values[item.fieldId] = item.textValue
continue
}
if (item.optionId) {
values[item.fieldId] = item.optionId
continue
}
if (item.optionIds?.length) {
values[item.fieldId] = item.optionIds
}
}
return values
}
function isCondition(value: string | null | undefined): value is UserProductCondition {
return (
value === 'new' ||
value === 'stock' ||
value === 'needs_repair' ||
value === 'scrap'
)
}
function isPriceCurrency(
value: string | null | undefined,
): value is UserProductPriceCurrency {
return (
value === 'IRT' || value === 'USD' || value === 'EUR' || value === 'AED'
)
}
export function AddMyProductPage() {
const t = useT()
const { locale } = useLocale()
const navigate = useNavigate()
const { id } = useParams<{ id?: string }>()
const isEdit = Boolean(id)
const { showToast } = useToast()
const [loaded, setLoaded] = useState(!isEdit)
const [step, setStep] = useState<StepId>(1)
const [stepError, setStepError] = useState('')
const [submitting, setSubmitting] = useState(false)
const pendingTechnicalValuesRef = useRef<TechnicalFormValues | null>(null)
const [categories, setCategories] = useState<UserProductCategoryOption[]>([])
const [loadingCategories, setLoadingCategories] = useState(false)
const [categoryId, setCategoryId] = useState('')
const [titleFa, setTitleFa] = useState('')
const [titleEn, setTitleEn] = useState('')
const [description, setDescription] = useState('')
const [priceInput, setPriceInput] = useState('')
const [priceUnit, setPriceUnit] = useState<UserProductPriceCurrency>('IRT')
const [priceByExpert, setPriceByExpert] = useState(false)
const [countries, setCountries] = useState<CityOption[]>([])
const [cities, setCities] = useState<CityOption[]>([])
const [countrySlug, setCountrySlug] = useState('')
const [countryId, setCountryId] = useState('')
const [cityId, setCityId] = useState('')
const [deliveryNote, setDeliveryNote] = useState('')
const [loadingLocations, setLoadingLocations] = useState(false)
const [thumbnail, setThumbnail] = useState<string | null>(null)
const [featuredMediaId, setFeaturedMediaId] = useState<string | null>(null)
const [gallery, setGallery] = useState<string[]>([])
const [galleryMediaIds, setGalleryMediaIds] = useState<string[]>([])
const [condition, setCondition] = useState<UserProductCondition>('new')
const [technicalNotes, setTechnicalNotes] = useState('')
const [technicalFields, setTechnicalFields] = useState<TechnicalFormField[]>([])
const [technicalValues, setTechnicalValues] = useState<TechnicalFormValues>({})
const [loadingTechnicalForm, setLoadingTechnicalForm] = useState(false)
const steps: { id: StepId; label: string }[] = [
{ id: 1, label: t('myProducts.step.basics') },
{ id: 2, label: t('myProducts.step.images') },
{ id: 3, label: t('myProducts.step.technical') },
]
const stepIcon =
step === 1 ? (
<ClipboardList size={40} strokeWidth={1.4} />
) : step === 2 ? (
<Images size={40} strokeWidth={1.4} />
) : (
<SlidersHorizontal size={40} strokeWidth={1.4} />
)
const stepLabelKey =
step === 1
? 'myProducts.step.basics'
: step === 2
? 'myProducts.step.images'
: 'myProducts.step.technical'
const stepNameFa = translate('fa', stepLabelKey)
const stepNameEn = translate('en', stepLabelKey)
useEffect(() => {
const controller = new AbortController()
setLoadingLocations(true)
void listCountries(controller.signal)
.then((items) => {
if (!controller.signal.aborted) setCountries(items)
})
.catch((err) => {
if (!isAbortError(err)) setStepError(t('myProducts.error.loadLocations'))
})
.finally(() => {
if (!controller.signal.aborted) setLoadingLocations(false)
})
return () => controller.abort()
}, [t])
useEffect(() => {
const controller = new AbortController()
setLoadingCategories(true)
void listMyUserProductCategories(controller.signal)
.then((response) => {
if (!controller.signal.aborted) setCategories(response.items)
})
.catch((err) => {
if (!isAbortError(err)) setStepError(t('myProducts.error.loadCategories'))
})
.finally(() => {
if (!controller.signal.aborted) setLoadingCategories(false)
})
return () => controller.abort()
}, [t])
useEffect(() => {
if (!isEdit || !id) return
const controller = new AbortController()
async function loadProduct() {
setStepError('')
try {
const response = await getMyUserProduct(id!, controller.signal)
if (controller.signal.aborted) return
const product = response.product
pendingTechnicalValuesRef.current = mapTechnicalValues(
product.technicalValues ?? [],
)
setCategoryId(product.categoryId ?? '')
setTitleFa(product.titleFa ?? product.title ?? '')
setTitleEn(product.titleEn ?? '')
setDescription(product.description ?? '')
setPriceInput(
product.price != null ? formatIrtInput(String(product.price)) : '',
)
setPriceUnit(
isPriceCurrency(product.priceCurrency)
? product.priceCurrency
: 'IRT',
)
setPriceByExpert(product.priceByExpert === true)
setCountrySlug(product.countrySlug)
setCountryId(product.countryId)
setCityId(product.cityId)
setDeliveryNote(product.deliveryNote ?? '')
setThumbnail(product.imageUrl)
setFeaturedMediaId(product.featuredMediaId)
setGallery((product.images ?? []).map((item) => item.url))
setGalleryMediaIds(product.galleryMediaIds ?? [])
setCondition(isCondition(product.condition) ? product.condition : 'new')
setTechnicalNotes(product.technicalNotes ?? '')
if (product.countrySlug) {
setCities(await listCitiesByCountrySlug(product.countrySlug))
}
if (!controller.signal.aborted) setLoaded(true)
} catch (err) {
if (isAbortError(err) || controller.signal.aborted) return
showToast(
err instanceof ApiError ? err.message : t('myProducts.error.load'),
'error',
)
navigate('/my-products', { replace: true })
}
}
void loadProduct()
return () => controller.abort()
}, [isEdit, id, navigate, showToast, t])
useEffect(() => {
if (!pendingTechnicalValuesRef.current) {
setTechnicalValues({})
}
setTechnicalFields([])
if (!categoryId) return
const controller = new AbortController()
setLoadingTechnicalForm(true)
void getMyUserProductCategoryTechnicalForm(categoryId, controller.signal)
.then((response) => {
if (controller.signal.aborted) return
setTechnicalFields(response.form?.fields ?? [])
if (pendingTechnicalValuesRef.current) {
setTechnicalValues(pendingTechnicalValuesRef.current)
pendingTechnicalValuesRef.current = null
}
})
.catch((err) => {
if (!isAbortError(err)) {
setTechnicalFields([])
setStepError(t('myProducts.error.loadTechnicalForm'))
}
})
.finally(() => {
if (!controller.signal.aborted) setLoadingTechnicalForm(false)
})
return () => controller.abort()
}, [categoryId, t])
async function handleCountryChange(nextSlug: string) {
setCountrySlug(nextSlug)
setCountryId(countries.find((item) => item.slug === nextSlug)?.id ?? '')
setCityId('')
setCities([])
if (!nextSlug) return
setLoadingLocations(true)
try {
setCities(await listCitiesByCountrySlug(nextSlug))
} catch {
setStepError(t('myProducts.error.loadLocations'))
} finally {
setLoadingLocations(false)
}
}
function validateStep1() {
if (!categoryId) return t('myProducts.error.categoryRequired')
if (!titleFa.trim()) return t('myProducts.error.titleFaRequired')
if (!countryId || !cityId) {
return t('myProducts.error.locationRequired')
}
const price = parseIrtInput(priceInput)
if (priceInput.trim() && (price === null || price < 0)) {
return t('myProducts.error.priceInvalid')
}
return ''
}
function validateStep3() {
if (!condition) return t('myProducts.error.conditionRequired')
for (const field of technicalFields) {
if (!field.isRequired) continue
const value = technicalValues[field.id]
const ok =
field.type === 'multi_select'
? Array.isArray(value) && value.length > 0
: typeof value === 'string' && value.trim().length > 0
if (!ok) {
return t('myProducts.error.technicalRequired')
}
}
return ''
}
function goNext() {
setStepError('')
if (step === 1) {
const error = validateStep1()
if (error) {
setStepError(error)
return
}
setStep(2)
return
}
if (step === 2) setStep(3)
}
function goBack() {
setStepError('')
if (step === 2) setStep(1)
if (step === 3) setStep(2)
}
async function handleSubmit() {
setStepError('')
const validationError = validateStep3()
if (validationError) {
setStepError(validationError)
return
}
const price = parseIrtInput(priceInput)
setSubmitting(true)
try {
let nextFeaturedMediaId = featuredMediaId
if (thumbnail?.startsWith('data:')) {
nextFeaturedMediaId = await resolveDataUrlToMediaId(
thumbnail,
'user-product-thumbnail.jpg',
featuredMediaId,
)
} else if (!thumbnail) {
nextFeaturedMediaId = null
}
const nextGalleryMediaIds = await resolveDataUrlsToMediaIds(
gallery,
galleryMediaIds,
)
const payload = {
titleFa: titleFa.trim(),
titleEn: titleEn.trim() || undefined,
description: description.trim() || undefined,
categoryId,
price: price ?? undefined,
priceCurrency: priceUnit,
priceByExpert,
countryId,
cityId,
deliveryNote: deliveryNote.trim() || undefined,
condition,
technicalNotes: technicalNotes.trim() || undefined,
technicalValues: buildTechnicalValuesPayload(technicalFields, technicalValues),
featuredMediaId: nextFeaturedMediaId || undefined,
galleryMediaIds: nextGalleryMediaIds,
}
if (isEdit && id) {
await updateMyUserProduct(id, payload)
showToast(t('myProducts.updateSuccess'), 'success')
} else {
await createMyUserProduct(payload)
showToast(t('myProducts.submitSuccess'), 'success')
}
navigate('/my-products')
} catch (err) {
setStepError(
err instanceof ApiError
? err.message
: isEdit
? t('myProducts.error.update')
: t('myProducts.error.submit'),
)
} finally {
setSubmitting(false)
}
}
function setTechnicalField(fieldId: string, value: string | string[]) {
setTechnicalValues((prev) => ({ ...prev, [fieldId]: value }))
}
function toggleMultiOption(fieldId: string, optionId: string) {
setTechnicalValues((prev) => {
const current = prev[fieldId]
const selected = Array.isArray(current) ? current : []
const next = selected.includes(optionId)
? selected.filter((item) => item !== optionId)
: [...selected, optionId]
return { ...prev, [fieldId]: next }
})
}
function renderTechnicalField(field: TechnicalFormField) {
const value = technicalValues[field.id]
const id = `tech-${field.id}`
if (field.type === 'textarea') {
return (
<textarea
id={id}
value={typeof value === 'string' ? value : ''}
onChange={(e) => setTechnicalField(field.id, e.target.value)}
rows={4}
/>
)
}
if (field.type === 'select') {
return (
<select
id={id}
value={typeof value === 'string' ? value : ''}
onChange={(e) => setTechnicalField(field.id, e.target.value)}
>
<option value="">{t('myProducts.technical.select')}</option>
{field.options.map((option) => (
<option key={option.id} value={option.id}>
{optionLabel(option)}
</option>
))}
</select>
)
}
if (field.type === 'multi_select') {
const selected = Array.isArray(value) ? value : []
return (
<div className={styles.chipGrid}>
{field.options.map((option) => (
<button
key={option.id}
type="button"
className={`${styles.chip} ${selected.includes(option.id) ? styles.chipSelected : ''}`}
onClick={() => toggleMultiOption(field.id, option.id)}
>
{optionLabel(option)}
</button>
))}
</div>
)
}
return (
<input
id={id}
type="text"
value={typeof value === 'string' ? value : ''}
onChange={(e) => setTechnicalField(field.id, e.target.value)}
/>
)
}
if (!loaded) {
return <p className={styles.inlineStatus}>{t('myProducts.loading')}</p>
}
return (
<div className={styles.shell}>
<aside className={styles.iconRail} aria-hidden>
<div className={styles.iconRailInner}>
<span className={styles.iconRailGlyph}>{stepIcon}</span>
<span className={styles.iconRailLabelFa}>{stepNameFa}</span>
<span className={styles.iconRailLabelEn}>{stepNameEn}</span>
</div>
</aside>
<div className={styles.card}>
<div className={styles.root}>
<nav className={styles.stepper} aria-label={t('myProducts.stepperLabel')}>
{steps.map((item, index) => {
const isDone = step > item.id
const isActive = step === item.id
const connectorDone = step > item.id
return (
<div key={item.id} className={styles.stepGroup}>
<div
className={[
styles.stepUnit,
isActive ? styles.stepActive : '',
isDone ? styles.stepDone : '',
]
.filter(Boolean)
.join(' ')}
>
<span className={styles.stepLabel}>{item.label}</span>
<span className={styles.stepDot} aria-hidden>
{isDone ? <Check size={14} /> : index + 1}
</span>
</div>
{index < steps.length - 1 && (
<div
className={[
styles.connector,
connectorDone ? styles.connectorDone : '',
]
.filter(Boolean)
.join(' ')}
aria-hidden
/>
)}
</div>
)
})}
</nav>
<div className={styles.body} key={step}>
{step === 1 && (
<>
<h2 className={styles.stepTitle}>
{isEdit ? t('myProducts.editTitle') : t('myProducts.step.basics')}
</h2>
<p className={styles.stepDesc}>
{isEdit
? t('myProducts.editSubtitle')
: t('myProducts.step.basicsHint')}
</p>
<div className={styles.form}>
<div className={styles.field}>
<label htmlFor="add-category">{t('myProducts.fields.category')}</label>
<CategorySearchSelect
id="add-category"
options={categories}
value={categoryId}
onChange={setCategoryId}
disabled={loadingCategories}
placeholder={t('myProducts.fields.searchCategory')}
/>
</div>
<div className={styles.fieldRow}>
<div className={styles.field}>
<label htmlFor="add-title-fa">{t('myProducts.fields.titleFa')}</label>
<input
id="add-title-fa"
type="text"
value={titleFa}
onChange={(e) => setTitleFa(e.target.value)}
placeholder={t('myProducts.fields.titleFaPlaceholder')}
/>
</div>
<div className={styles.field}>
<label htmlFor="add-title-en">{t('myProducts.fields.titleEn')}</label>
<input
id="add-title-en"
type="text"
value={titleEn}
onChange={(e) => setTitleEn(e.target.value)}
placeholder={t('myProducts.fields.titleEnPlaceholder')}
dir="ltr"
/>
</div>
</div>
<div className={styles.field}>
<label htmlFor="add-description">{t('myProducts.fields.description')}</label>
<textarea
id="add-description"
rows={4}
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder={t('myProducts.fields.descriptionPlaceholder')}
/>
</div>
<div className={styles.priceRow}>
<label
className={`${styles.checkRow} ${styles.col6}`}
htmlFor="add-price-by-expert"
>
<input
id="add-price-by-expert"
type="checkbox"
checked={priceByExpert}
onChange={(e) => setPriceByExpert(e.target.checked)}
/>
<span>{t('myProducts.fields.priceByExpert')}</span>
</label>
<div className={`${styles.field} ${styles.col4}`}>
<label htmlFor="add-price">
{priceByExpert
? t('myProducts.fields.priceSuggested')
: t('myProducts.fields.price')}
</label>
<input
id="add-price"
type="text"
inputMode="numeric"
value={priceInput}
onChange={(e) => setPriceInput(formatIrtInput(e.target.value))}
placeholder={t('myProducts.fields.pricePlaceholder')}
dir="ltr"
/>
</div>
<div className={`${styles.field} ${styles.col2}`}>
<label htmlFor="add-price-unit">{t('myProducts.fields.priceUnit')}</label>
<select
id="add-price-unit"
value={priceUnit}
onChange={(e) =>
setPriceUnit(e.target.value as UserProductPriceCurrency)
}
>
{PRICE_UNITS.map((unit) => (
<option key={unit} value={unit}>
{t(`myProducts.fields.priceUnit.${unit}`)}
</option>
))}
</select>
</div>
</div>
<div className={styles.sectionDivider}>
<span>{t('myProducts.fields.location')}</span>
</div>
<div className={styles.locationRow}>
<div className={`${styles.field} ${styles.col2}`}>
<label htmlFor="add-country">{t('myProducts.fields.country')}</label>
<select
id="add-country"
value={countrySlug}
disabled={loadingLocations}
onChange={(e) => void handleCountryChange(e.target.value)}
>
<option value="">{t('myProducts.fields.selectCountry')}</option>
{countries.map((country) => (
<option key={country.id} value={country.slug}>
{getLocationOptionLabel(country, locale)}
</option>
))}
</select>
</div>
<div className={`${styles.field} ${styles.col4}`}>
<label htmlFor="add-city">{t('myProducts.fields.city')}</label>
<CitySearchSelect
id="add-city"
options={cities}
value={cityId}
onChange={setCityId}
disabled={!countrySlug || loadingLocations}
placeholder={t('myProducts.fields.searchCity')}
/>
</div>
<div className={`${styles.field} ${styles.col6}`}>
<label htmlFor="add-delivery-note">
{t('myProducts.fields.deliveryNote')}
<span className={styles.optional}> {t('myProducts.optional')}</span>
</label>
<input
id="add-delivery-note"
type="text"
value={deliveryNote}
onChange={(e) => setDeliveryNote(e.target.value)}
placeholder={t('myProducts.fields.deliveryNotePlaceholder')}
/>
</div>
</div>
</div>
</>
)}
{step === 2 && (
<>
<h2 className={styles.stepTitle}>{t('myProducts.step.images')}</h2>
<p className={styles.stepDesc}>{t('myProducts.step.imagesHint')}</p>
<div className={styles.form}>
<div className={styles.thumbnailBlock}>
<div className={styles.field}>
<label>{t('myProducts.images.thumbnail')}</label>
<ImageCropper
value={thumbnail}
onChange={(value) => {
setThumbnail(value)
if (!value || value.startsWith('data:')) {
setFeaturedMediaId(null)
}
}}
aspect={1}
hint={t('myProducts.images.thumbnailHint')}
/>
</div>
</div>
<div className={styles.sectionDivider}>
<span>{t('myProducts.images.gallery')}</span>
</div>
<div className={styles.field}>
<ImageUploader
images={gallery}
onChange={(next) => {
const prevUrlToId = new Map(
gallery.map((url, index) => [
url,
galleryMediaIds[index] ?? '',
]),
)
setGallery(next)
setGalleryMediaIds(
next.map((url) =>
url.startsWith('data:')
? ''
: prevUrlToId.get(url) ?? '',
),
)
}}
/>
</div>
</div>
</>
)}
{step === 3 && (
<>
<h2 className={styles.stepTitle}>{t('myProducts.step.technical')}</h2>
<p className={styles.stepDesc}>{t('myProducts.step.technicalHint')}</p>
<div className={styles.form}>
<fieldset className={styles.conditionFieldset}>
<legend>{t('myProducts.fields.condition')}</legend>
<div className={styles.radioGrid} role="radiogroup">
{CONDITIONS.map((value) => (
<label key={value} className={styles.radioCard}>
<input
type="radio"
name="product-condition"
value={value}
checked={condition === value}
onChange={() => setCondition(value)}
/>
<span>{t(`myProducts.condition.${value}`)}</span>
</label>
))}
</div>
</fieldset>
<div className={styles.field}>
<label htmlFor="add-technical-notes">
{t('myProducts.fields.technicalNotes')}
<span className={styles.optional}> {t('myProducts.optional')}</span>
</label>
<textarea
id="add-technical-notes"
rows={4}
value={technicalNotes}
onChange={(e) => setTechnicalNotes(e.target.value)}
placeholder={t('myProducts.fields.technicalNotesPlaceholder')}
/>
</div>
<div className={styles.sectionDivider}>
<span>{t('myProducts.technical.categoryForm')}</span>
</div>
{!categoryId ? (
<div className={styles.placeholder}>
{t('myProducts.technical.needCategory')}
</div>
) : loadingTechnicalForm ? (
<p className={styles.inlineStatus}>{t('myProducts.technical.loading')}</p>
) : technicalFields.length === 0 ? (
<div className={styles.placeholder}>{t('myProducts.technical.empty')}</div>
) : (
technicalFields.map((field) => (
<div key={field.id} className={styles.field}>
<label htmlFor={`tech-${field.id}`}>
{fieldLabel(field)}
{field.isRequired ? (
' *'
) : (
<span className={styles.optional}> {t('myProducts.optional')}</span>
)}
</label>
{renderTechnicalField(field)}
</div>
))
)}
</div>
</>
)}
{stepError ? (
<div className={styles.error} role="alert">
{stepError}
</div>
) : null}
</div>
<div className={styles.actions}>
{step === 1 ? (
<Link to="/my-products" className={styles.ghostBtn}>
{t('myProducts.cancel')}
</Link>
) : (
<button
type="button"
className={styles.secondaryBtn}
onClick={goBack}
disabled={submitting}
>
{t('myProducts.back')}
</button>
)}
{step < 3 ? (
<button type="button" className={styles.primaryBtn} onClick={goNext}>
{t('myProducts.next')}
</button>
) : (
<button
type="button"
className={styles.primaryBtn}
onClick={() => void handleSubmit()}
disabled={submitting || loadingTechnicalForm}
>
{submitting
? t('myProducts.submitting')
: isEdit
? t('myProducts.save')
: t('myProducts.submit')}
</button>
)}
</div>
</div>
</div>
</div>
)
}
apps/customer/src/pages/AddressesPage.module.css
+1 -1
View File
@@ -54,7 +54,7 @@
padding: 10px 12px;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.55);
background: var(--elevated-surface);
}
.rowLine {
apps/customer/src/pages/HomePage.tsx
+124 -33
View File
@@ -1,49 +1,129 @@
import { CalendarDays, User, MapPin, ShoppingBag, Heart } from 'lucide-react'
import { useEffect, useState } from 'react'
import { CalendarDays, User, MapPin, ShoppingBag, Heart, Package } from 'lucide-react'
import { SectionCard, useLocale } from '@meshkee/dashboard-ui'
import { useAuth } from '../context/AuthContext'
import { useTenantBranding } from '../context/TenantBrandingContext'
import { useT } from '../i18n/useT'
import type { CustomerMessageKey } from '../i18n/messages'
import { listAddresses } from '../services/addressService'
import { listFavorites } from '../services/favoritesService'
import { listOrders } from '../services/orderService'
import { listMyUserProducts } from '../services/userProductsService'
import { hasBusinessModule } from '../utils/businessModules'
import styles from '../components/PageContent.module.css'
type CountKey = 'myProducts' | 'addresses' | 'orders' | 'favorites'
type HomeSection = {
icon: typeof User
titleKey: CustomerMessageKey
descKey: CustomerMessageKey
countLabelKey?: CustomerMessageKey
href: string
countKey?: CountKey
colClass: string
moduleGated?: boolean
}
const baseSections: HomeSection[] = [
{
icon: Package,
titleKey: 'home.card.myProducts.title',
descKey: 'home.card.myProducts.desc',
countLabelKey: 'home.card.myProducts.count',
href: '/my-products',
countKey: 'myProducts',
colClass: styles.col6,
moduleGated: true,
},
{
icon: User,
titleKey: 'home.card.profile.title',
descKey: 'home.card.profile.desc',
href: '/profile',
colClass: styles.col3,
},
{
icon: MapPin,
titleKey: 'home.card.addresses.title',
descKey: 'home.card.addresses.desc',
countLabelKey: 'home.card.addresses.count',
href: '/addresses',
countKey: 'addresses',
colClass: styles.col3,
},
{
icon: ShoppingBag,
titleKey: 'home.card.orders.title',
descKey: 'home.card.orders.desc',
countLabelKey: 'home.card.orders.count',
href: '/orders',
countKey: 'orders',
colClass: styles.col3,
},
{
icon: Heart,
titleKey: 'home.card.favorites.title',
descKey: 'home.card.favorites.desc',
countLabelKey: 'home.card.favorites.count',
href: '/favorites',
countKey: 'favorites',
colClass: styles.col3,
},
]
type SectionCounts = Partial<Record<CountKey, number>>
async function loadSectionCounts(signal: AbortSignal): Promise<SectionCounts> {
const [myProducts, addresses, orders, favorites] = await Promise.all([
listMyUserProducts({ page: 1, pageSize: 1 }, signal)
.then((r) => r.total)
.catch(() => null),
listAddresses(signal)
.then((r) => r.items.length)
.catch(() => null),
listOrders({ page: 1, pageSize: 1 }, signal)
.then((r) => r.total)
.catch(() => null),
listFavorites({ page: 1, pageSize: 1 }, signal)
.then((r) => r.total)
.catch(() => null),
])
const counts: SectionCounts = {}
if (myProducts !== null) counts.myProducts = myProducts
if (addresses !== null) counts.addresses = addresses
if (orders !== null) counts.orders = orders
if (favorites !== null) counts.favorites = favorites
return counts
}
export function HomePage() {
const { user } = useAuth()
const { locale } = useLocale()
const { enabledModules } = useTenantBranding()
const t = useT()
const [counts, setCounts] = useState<SectionCounts>({})
const showMyProducts = hasBusinessModule(enabledModules, 'customer_products')
useEffect(() => {
const controller = new AbortController()
void loadSectionCounts(controller.signal).then((next) => {
if (!controller.signal.aborted) setCounts(next)
})
return () => controller.abort()
}, [])
const firstName =
(locale === 'en' ? user?.firstNameEn : user?.firstName) ||
user?.firstName ||
user?.firstNameEn ||
t('home.welcomeFallback')
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 sections = baseSections.filter(
(section) => !section.moduleGated || showMyProducts,
)
const formattedDate = new Intl.DateTimeFormat(locale === 'fa' ? 'fa-IR' : 'en-US', {
month: 'long',
@@ -68,9 +148,20 @@ export function HomePage() {
</div>
</div>
<div className={styles.gridHome}>
<div className={styles.grid12}>
{sections.map((section) => (
<SectionCard key={section.href} {...section} />
<div key={section.href} className={section.colClass}>
<SectionCard
icon={section.icon}
title={t(section.titleKey)}
description={t(section.descKey)}
href={section.href}
count={section.countKey ? counts[section.countKey] : undefined}
countLabel={
section.countLabelKey ? t(section.countLabelKey) : undefined
}
/>
</div>
))}
</div>
</main>
apps/customer/src/pages/LoginPage.module.css
+4 -4
View File
@@ -15,12 +15,12 @@
width: 100%;
max-width: 420px;
padding: 36px 32px 32px;
background: rgba(255, 255, 255, 0.75);
background: var(--glass-bg);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: 0 20px 60px rgba(31, 38, 135, 0.12);
box-shadow: var(--glass-shadow);
}
.brand {
@@ -148,8 +148,8 @@
line-height: 1.4;
font-family: inherit;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(148, 163, 184, 0.35);
background: var(--surface);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
apps/customer/src/pages/MyProductDetailsPage.module.css
+327
View File
@@ -0,0 +1,327 @@
.headerRow {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 8px;
}
.editBtn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: var(--field-height);
padding: var(--field-padding-y) 14px;
border-radius: var(--radius-sm);
font-size: var(--field-font-size);
font-weight: 600;
font-family: var(--font-ui);
color: #fff;
background: var(--primary);
white-space: nowrap;
flex-shrink: 0;
}
.editBtn:hover {
filter: brightness(1.05);
}
.layout {
display: grid;
grid-template-columns: minmax(0, 320px) 1fr;
gap: 28px;
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;
}
.gallery {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 320px;
}
.mainImage {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.15);
overflow: hidden;
background: var(--card-media-bg, rgba(148, 163, 184, 0.12));
}
.galleryThumbs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.galleryThumb {
aspect-ratio: 1 / 1;
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.15);
overflow: hidden;
background: var(--card-media-bg, rgba(148, 163, 184, 0.12));
}
.galleryThumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.imagePlaceholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(148, 163, 184, 0.75);
}
.badge {
position: absolute;
top: 10px;
inset-inline-start: 10px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 1;
}
.badge[data-status='draft'] {
color: #fff;
background: linear-gradient(
145deg,
rgba(251, 191, 36, 0.55) 0%,
rgba(245, 158, 11, 0.32) 100%
);
}
.badge[data-status='published'] {
color: #047857;
background: linear-gradient(
145deg,
rgba(167, 243, 208, 0.55) 0%,
rgba(52, 211, 153, 0.28) 100%
);
}
.badge[data-status='archived'] {
color: #e2e8f0;
background: linear-gradient(
145deg,
rgba(148, 163, 184, 0.45) 0%,
rgba(100, 116, 139, 0.28) 100%
);
}
.promotedBadge {
position: absolute;
top: 10px;
inset-inline-end: 10px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
color: #fff;
border-radius: 50px;
background: linear-gradient(
145deg,
rgba(99, 102, 241, 0.7) 0%,
rgba(168, 85, 247, 0.45) 100%
);
z-index: 1;
}
.details {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.categoryChip {
align-self: flex-start;
padding: 4px 12px;
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
background: rgba(148, 163, 184, 0.15);
border-radius: 50px;
}
.title {
margin: 0;
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.3;
font-family: var(--font-ui);
}
.secondary {
margin: 0;
font-size: 14px;
color: var(--text-secondary);
font-family: var(--font-ui);
}
.summaryRow {
display: flex;
align-items: center;
gap: 12px 16px;
flex-wrap: wrap;
direction: ltr;
}
.price {
margin: 0;
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
white-space: nowrap;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.summaryMeta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 14px;
margin-inline-start: auto;
min-width: 0;
}
.metaItem {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-secondary);
font-family: var(--font-ui);
min-width: 0;
}
.metaGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px 16px;
margin: 4px 0 0;
}
.metaGrid dt {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 4px;
}
.metaGrid dd {
margin: 0;
font-size: 13px;
color: var(--text-primary);
font-family: var(--font-ui);
}
.location {
display: inline-flex;
align-items: center;
gap: 6px;
}
.section {
padding-top: 8px;
border-top: 1px solid rgba(148, 163, 184, 0.15);
}
.section h3 {
margin: 0 0 8px;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
}
.prose {
margin: 0;
font-size: 13px;
line-height: 1.65;
color: var(--text-primary);
white-space: pre-wrap;
font-family: var(--font-ui);
}
.techGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin: 0;
}
.techGrid dt {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 4px;
}
.techGrid dd {
margin: 0;
font-size: 13px;
color: var(--text-primary);
font-family: var(--font-ui);
}
.status,
.error {
margin: 24px 0;
font-size: 14px;
color: var(--text-secondary);
}
.error {
color: #ef4444;
}
.backLink {
color: var(--primary);
font-weight: 600;
text-decoration: none;
}
.backLink:hover {
text-decoration: underline;
}
@media (max-width: 800px) {
.headerRow {
flex-direction: column;
}
.layout {
grid-template-columns: 1fr;
padding: 16px;
}
.gallery {
max-width: none;
}
}
apps/customer/src/pages/MyProductDetailsPage.tsx
+285
View File
@@ -0,0 +1,285 @@
import { useEffect, useMemo, useState } from 'react'
import { Link, useNavigate, useParams } from 'react-router-dom'
import { ImageOff, MapPin, Pencil } from 'lucide-react'
import { Breadcrumbs, useLocale, useToast } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import { ApiError, isAbortError } from '../lib/api'
import {
getMyUserProduct,
getMyUserProductCategoryTechnicalForm,
type TechnicalFormField,
type UserProductDetail,
type UserProductTechnicalValueInput,
} from '../services/userProductsService'
import { formatIrtPrice } from '../utils/irtPrice'
import pageStyles from '../components/PageContent.module.css'
import styles from './MyProductDetailsPage.module.css'
function formatTechnicalValue(
field: TechnicalFormField,
value: UserProductTechnicalValueInput | undefined,
): string {
if (!value) return '—'
if (value.textValue != null && value.textValue.trim()) return value.textValue
if (value.optionId) {
return field.options.find((option) => option.id === value.optionId)?.label ?? value.optionId
}
if (value.optionIds?.length) {
return value.optionIds
.map(
(optionId) =>
field.options.find((option) => option.id === optionId)?.label ?? optionId,
)
.join(', ')
}
return '—'
}
export function MyProductDetailsPage() {
const { id } = useParams<{ id: string }>()
const t = useT()
const { locale } = useLocale()
const navigate = useNavigate()
const { showToast } = useToast()
const isFa = locale === 'fa'
const [product, setProduct] = useState<UserProductDetail | null>(null)
const [technicalFields, setTechnicalFields] = useState<TechnicalFormField[]>([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState('')
useEffect(() => {
if (!id) return
const controller = new AbortController()
async function load() {
setLoading(true)
setError('')
try {
const response = await getMyUserProduct(id!, controller.signal)
if (controller.signal.aborted) return
setProduct(response.product)
if (response.product.categoryId) {
const formResponse = await getMyUserProductCategoryTechnicalForm(
response.product.categoryId,
controller.signal,
)
if (controller.signal.aborted) return
setTechnicalFields(formResponse.form?.fields ?? [])
} else {
setTechnicalFields([])
}
} catch (err) {
if (isAbortError(err) || controller.signal.aborted) return
const message =
err instanceof ApiError ? err.message : t('myProducts.error.loadDetail')
setError(message)
setProduct(null)
showToast(message, 'error')
} finally {
if (!controller.signal.aborted) setLoading(false)
}
}
void load()
return () => controller.abort()
}, [id, showToast, t])
const technicalRows = useMemo(() => {
if (!product) return []
const byField = new Map(
(product.technicalValues ?? []).map((item) => [item.fieldId, item]),
)
return technicalFields.map((field) => ({
id: field.id,
label: field.label,
value: formatTechnicalValue(field, byField.get(field.id)),
}))
}, [product, technicalFields])
if (loading) {
return (
<main className={pageStyles.content}>
<p className={styles.status}>{t('myProducts.loading')}</p>
</main>
)
}
if (error || !product) {
return (
<main className={pageStyles.content}>
<p className={styles.error}>{error || t('myProducts.error.loadDetail')}</p>
<Link to="/my-products" className={styles.backLink}>
{t('myProducts.backToList')}
</Link>
</main>
)
}
const titleFa = product.titleFa || product.title
const titleEn = product.titleEn?.trim() || ''
const title = isFa ? titleFa : titleEn || titleFa
const secondary = isFa ? titleEn : titleEn ? titleFa : ''
const city = isFa ? product.cityNameFa || product.cityName : product.cityName
const country = isFa
? product.countryNameFa || product.countryName
: product.countryName
const category = isFa
? product.categoryNameFa || product.categoryName
: product.categoryName
const location = [city, country].filter(Boolean).join(isFa ? '، ' : ', ')
const statusLabel =
product.status === 'published'
? t('myProducts.status.published')
: product.status === 'archived'
? t('myProducts.status.archived')
: product.status === 'rejected'
? t('myProducts.status.rejected')
: t('myProducts.status.pending')
const conditionLabel = product.condition
? t(`myProducts.condition.${product.condition}`)
: '—'
const imageSrc = product.imageUrl?.trim() || ''
const galleryImages = (product.images ?? [])
.map((item) => item.url?.trim())
.filter((url): url is string => Boolean(url))
const currency = (product.priceCurrency || 'IRT').toUpperCase()
const priceLabel =
product.price == null
? t('myProducts.priceUnavailable')
: currency === 'IRT'
? formatIrtPrice(product.price)
: `${Number(product.price).toLocaleString('en-US')} ${currency}`
return (
<main className={pageStyles.content}>
<Breadcrumbs
items={[
{ label: t('nav.home'), href: '/' },
{ label: t('myProducts.title'), href: '/my-products' },
{ label: title },
]}
/>
<div className={styles.headerRow}>
<div>
<h2 className={pageStyles.pageTitle}>{t('myProducts.detailsTitle')}</h2>
<p className={pageStyles.pageSubtitle}>{t('myProducts.detailsSubtitle')}</p>
</div>
<button
type="button"
className={styles.editBtn}
onClick={() => navigate(`/my-products/${product.id}/edit`)}
>
<Pencil size={16} />
{t('myProducts.edit')}
</button>
</div>
<div className={styles.layout} dir={isFa ? 'rtl' : 'ltr'}>
<div className={styles.gallery}>
<div className={styles.mainImage}>
{imageSrc ? (
<img src={imageSrc} alt={title} className={styles.image} />
) : (
<div className={styles.imagePlaceholder}>
<ImageOff size={36} strokeWidth={1.5} />
</div>
)}
<span className={styles.badge} data-status={product.status}>
{statusLabel}
</span>
{product.promoted ? (
<span className={styles.promotedBadge}>{t('myProducts.promoted')}</span>
) : null}
</div>
{galleryImages.length > 0 ? (
<div className={styles.galleryThumbs}>
{galleryImages.map((url) => (
<div key={url} className={styles.galleryThumb}>
<img src={url} alt="" />
</div>
))}
</div>
) : null}
</div>
<div className={styles.details}>
{category ? <span className={styles.categoryChip}>{category}</span> : null}
<h1 className={styles.title}>{title}</h1>
{secondary ? <p className={styles.secondary}>{secondary}</p> : null}
<div className={styles.summaryRow}>
<p className={styles.price} dir="ltr">
{priceLabel}
</p>
<div className={styles.summaryMeta} dir={isFa ? 'rtl' : 'ltr'}>
<span className={styles.metaItem}>
<MapPin size={14} aria-hidden />
{location || '—'}
</span>
</div>
</div>
<dl className={styles.metaGrid}>
<div>
<dt>{t('myProducts.fields.country')}</dt>
<dd>{country || '—'}</dd>
</div>
<div>
<dt>{t('myProducts.fields.city')}</dt>
<dd>{city || '—'}</dd>
</div>
<div>
<dt>{t('myProducts.fields.condition')}</dt>
<dd>{conditionLabel}</dd>
</div>
{product.priceByExpert ? (
<div>
<dt>{t('myProducts.fields.priceByExpert')}</dt>
<dd>{t('myProducts.yes')}</dd>
</div>
) : null}
</dl>
{product.description ? (
<section className={styles.section}>
<h3>{t('myProducts.fields.description')}</h3>
<p className={styles.prose}>{product.description}</p>
</section>
) : null}
{product.deliveryNote ? (
<section className={styles.section}>
<h3>{t('myProducts.fields.deliveryNote')}</h3>
<p className={styles.prose}>{product.deliveryNote}</p>
</section>
) : null}
{product.technicalNotes ? (
<section className={styles.section}>
<h3>{t('myProducts.fields.technicalNotes')}</h3>
<p className={styles.prose}>{product.technicalNotes}</p>
</section>
) : null}
{technicalRows.length > 0 ? (
<section className={styles.section}>
<h3>{t('myProducts.technical.categoryForm')}</h3>
<dl className={styles.techGrid}>
{technicalRows.map((row) => (
<div key={row.id}>
<dt>{row.label}</dt>
<dd>{row.value}</dd>
</div>
))}
</dl>
</section>
) : null}
</div>
</div>
</main>
)
}
apps/customer/src/pages/MyProductsPage.module.css
+103
View File
@@ -0,0 +1,103 @@
.error {
margin-bottom: 16px;
padding: 12px 14px;
font-size: 13px;
color: #b91c1c;
background: rgba(254, 226, 226, 0.85);
border: 1px solid rgba(248, 113, 113, 0.45);
border-radius: var(--radius-sm);
}
.status {
margin: 8px 0 16px;
font-size: 13px;
color: var(--text-muted);
}
.empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 48px 24px;
text-align: center;
font-size: 14px;
color: var(--text-secondary);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
}
.emptyLink {
margin-top: 4px;
font-size: 13px;
font-weight: 600;
color: var(--primary);
text-decoration: none;
}
.emptyLink:hover {
text-decoration: underline;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.fabDock {
position: fixed;
inset-inline-end: 32px;
inset-inline-start: auto;
bottom: 32px;
z-index: 110;
}
.addFab {
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);
}
@media (min-width: 640px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1280px) {
.grid {
grid-template-columns: repeat(6, 1fr);
}
}
@media (max-width: 768px) {
.fabDock {
inset-inline-end: 20px;
bottom: 20px;
}
.addFab {
width: 52px;
height: 52px;
}
}
apps/customer/src/pages/MyProductsPage.tsx
+190
View File
@@ -0,0 +1,190 @@
import { useEffect, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { Package, Plus } from 'lucide-react'
import { Breadcrumbs, Pagination, useToast } from '@meshkee/dashboard-ui'
import { UserProductCard } from '../components/UserProductCard'
import { useT } from '../i18n/useT'
import { ApiError, isAbortError } from '../lib/api'
import {
deleteMyUserProduct,
listMyUserProducts,
promoteMyUserProduct,
type MyUserProductsListResponse,
} from '../services/userProductsService'
import pageStyles from '../components/PageContent.module.css'
import styles from './MyProductsPage.module.css'
const PAGE_SIZE = 24
export function MyProductsPage() {
const t = useT()
const navigate = useNavigate()
const { showToast } = useToast()
const [data, setData] = useState<MyUserProductsListResponse | null>(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState('')
const [page, setPage] = useState(1)
const [busyId, setBusyId] = useState<string | null>(null)
const [busyAction, setBusyAction] = useState<'remove' | 'promote' | null>(null)
useEffect(() => {
const controller = new AbortController()
async function load() {
setLoading(true)
setError('')
try {
const response = await listMyUserProducts(
{ page, pageSize: PAGE_SIZE },
controller.signal,
)
if (controller.signal.aborted) return
setData(response)
} catch (err) {
if (isAbortError(err) || controller.signal.aborted) return
setError(err instanceof ApiError ? err.message : t('myProducts.error.load'))
} finally {
if (!controller.signal.aborted) setLoading(false)
}
}
void load()
return () => controller.abort()
}, [page, t])
const products = data?.items ?? []
const total = data?.total ?? 0
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
function handleEdit(id: string) {
navigate(`/my-products/${id}/edit`)
}
async function handleRemove(id: string) {
if (!window.confirm(t('myProducts.removeConfirm'))) return
setBusyId(id)
setBusyAction('remove')
try {
await deleteMyUserProduct(id)
setData((prev) =>
prev
? {
...prev,
items: prev.items.filter((item) => item.id !== id),
total: Math.max(0, prev.total - 1),
}
: prev,
)
showToast(t('myProducts.removeSuccess'), 'success')
} catch (err) {
showToast(
err instanceof ApiError ? err.message : t('myProducts.error.remove'),
'error',
)
} finally {
setBusyId(null)
setBusyAction(null)
}
}
async function handlePromote(id: string) {
setBusyId(id)
setBusyAction('promote')
try {
const response = await promoteMyUserProduct(id)
setData((prev) =>
prev
? {
...prev,
items: prev.items.map((item) =>
item.id === id ? { ...item, ...response.product } : item,
),
}
: prev,
)
showToast(t('myProducts.promoteSuccess'), 'success')
} catch (err) {
showToast(
err instanceof ApiError ? err.message : t('myProducts.error.promote'),
'error',
)
} finally {
setBusyId(null)
setBusyAction(null)
}
}
return (
<main className={pageStyles.content}>
<Breadcrumbs
items={[
{ label: t('nav.home'), href: '/' },
{ label: t('myProducts.title') },
]}
/>
<div className={pageStyles.pageHeader}>
<div>
<h2 className={pageStyles.pageTitle}>{t('myProducts.title')}</h2>
<p className={pageStyles.pageSubtitle}>{t('myProducts.subtitle')}</p>
</div>
</div>
{error ? (
<div className={styles.error} role="alert">
{error}
</div>
) : null}
{loading ? <p className={styles.status}>{t('myProducts.loading')}</p> : null}
{!loading && !error && products.length === 0 ? (
<div className={styles.empty}>
<Package size={32} />
<p>{t('myProducts.empty')}</p>
<Link to="/my-products/new" className={styles.emptyLink}>
{t('myProducts.add')}
</Link>
</div>
) : null}
{!loading && products.length > 0 ? (
<>
<div className={styles.grid}>
{products.map((product) => (
<UserProductCard
key={product.id}
product={product}
to={`/my-products/${product.id}`}
onEdit={handleEdit}
onRemove={handleRemove}
onPromote={handlePromote}
busyAction={busyId === product.id ? busyAction : null}
/>
))}
</div>
{totalPages > 1 ? (
<Pagination
currentPage={page}
totalPages={totalPages}
onPageChange={setPage}
disabled={loading}
/>
) : null}
</>
) : null}
<div className={styles.fabDock}>
<Link
to="/my-products/new"
className={styles.addFab}
aria-label={t('myProducts.add')}
title={t('myProducts.add')}
>
<Plus size={24} />
</Link>
</div>
</main>
)
}
apps/customer/src/pages/OrdersPage.module.css
+2 -2
View File
@@ -80,7 +80,7 @@
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.35);
background: var(--elevated-surface);
}
.td {
@@ -282,7 +282,7 @@
padding: 6px 10px;
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.25);
background: rgba(255, 255, 255, 0.35);
background: var(--elevated-surface);
color: var(--text-secondary);
font-weight: 700;
font-size: 12px;
apps/customer/src/pages/checkout/CheckoutSteps.module.css
+7 -7
View File
@@ -125,7 +125,7 @@
align-items: center;
gap: 14px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.6);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: var(--radius-sm);
}
@@ -299,7 +299,7 @@
padding: 16px 12px;
border: 2px solid rgba(148, 163, 184, 0.3);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.5);
background: var(--surface);
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
text-align: center;
@@ -345,7 +345,7 @@
padding: 12px 14px;
border: 2px solid rgba(148, 163, 184, 0.3);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.5);
background: var(--surface);
cursor: pointer;
text-align: left;
transition: border-color 0.2s, background 0.2s;
@@ -435,7 +435,7 @@
font-size: var(--field-font-size);
font-family: inherit;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.8);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
@@ -482,7 +482,7 @@
padding: 14px;
border: 2px solid rgba(148, 163, 184, 0.3);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.5);
background: var(--surface);
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
text-align: right;
@@ -538,7 +538,7 @@
padding: 12px 14px;
border: 1.5px solid rgba(148, 163, 184, 0.3);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.65);
background: var(--surface);
cursor: pointer;
text-align: right;
font-size: 13px;
@@ -765,7 +765,7 @@
font-size: var(--field-font-size);
font-family: inherit;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.8);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
apps/customer/src/services/citiesService.ts
+21 -2
View File
@@ -3,14 +3,33 @@ import type { CityOption } from '@meshkee/dashboard-ui'
export type { CityOption }
export async function listIranProvinces(signal?: AbortSignal) {
export async function listCountries(signal?: AbortSignal) {
const data = await apiRequest<{ items: CityOption[] }>('/cities?level=country', { signal })
return data.items
}
/** Cities under a country (direct + via provinces). Province is optional in the tree. */
export async function listCitiesByCountrySlug(parentSlug: string, signal?: AbortSignal) {
const data = await apiRequest<{ items: CityOption[] }>(
'/cities?level=province&parentSlug=iran',
`/cities?level=city&parentSlug=${encodeURIComponent(parentSlug)}`,
{ signal },
)
return data.items
}
export async function listProvincesByCountrySlug(parentSlug: string, signal?: AbortSignal) {
const data = await apiRequest<{ items: CityOption[] }>(
`/cities?level=province&parentSlug=${encodeURIComponent(parentSlug)}`,
{ signal },
)
return data.items
}
/** @deprecated Prefer listProvincesByCountrySlug('iran') */
export async function listIranProvinces(signal?: AbortSignal) {
return listProvincesByCountrySlug('iran', signal)
}
export async function listCitiesByProvinceSlug(parentSlug: string, signal?: AbortSignal) {
const data = await apiRequest<{ items: CityOption[] }>(
`/cities?level=city&parentSlug=${encodeURIComponent(parentSlug)}`,
apps/customer/src/services/mediaService.ts
+155
View File
@@ -0,0 +1,155 @@
import {
clearTokens,
getAccessToken,
setTokens,
} from '../lib/api'
import { getActiveBusinessId } from '../lib/businessContext'
import { ensureJpegUploadFile, ensureUploadFile } from '../utils/imageUpload'
const API_BASE_URL =
import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:3000/api/v1'
export interface MediaItem {
id: string
publicUrl: string
fileName: string
originalFileName: string
mimeType: string
width: number | null
height: number | null
}
function isDataUrl(value: string) {
return value.startsWith('data:')
}
function businessMediaPath() {
const businessId = getActiveBusinessId()
if (!businessId) {
throw new Error('No active business selected. Please sign in again.')
}
return `/businesses/${businessId}/my-user-products/media`
}
async function refreshAccessToken() {
const refreshToken = localStorage.getItem('meshkee_customer_refresh_token')
if (!refreshToken) return false
const response = await fetch(`${API_BASE_URL}/auth/refresh`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ refreshToken }),
})
if (!response.ok) {
clearTokens()
return false
}
const data = await response.json()
setTokens(data.accessToken, data.refreshToken)
return true
}
function parseUploadError(payload: unknown, status: number) {
if (payload && typeof payload === 'object') {
const message = (payload as { message?: string | string[] }).message
if (Array.isArray(message)) {
return message.join(', ')
}
if (typeof message === 'string' && message) {
return message
}
}
return `Upload failed with status ${status}`
}
export async function uploadMyUserProductMedia(
files: File[],
signal?: AbortSignal,
): Promise<MediaItem[]> {
if (!files.length) return []
const send = async () => {
const formData = new FormData()
files.forEach((file) => formData.append('files', file))
const headers = new Headers()
const accessToken = getAccessToken()
if (accessToken) {
headers.set('Authorization', `Bearer ${accessToken}`)
}
return fetch(`${API_BASE_URL}${businessMediaPath()}`, {
method: 'POST',
headers,
body: formData,
signal,
})
}
let response = await send()
if (response.status === 401) {
const refreshed = await refreshAccessToken()
if (refreshed) {
response = await send()
}
}
const payload = await response.json().catch(() => null)
if (!response.ok) {
throw new Error(parseUploadError(payload, response.status))
}
return (payload.items as Array<Record<string, unknown>>).map((item) => ({
id: String(item.id),
publicUrl: String(item.publicUrl),
fileName: String(item.fileName),
originalFileName: String(item.originalFileName),
mimeType: String(item.mimeType),
width: typeof item.width === 'number' ? item.width : null,
height: typeof item.height === 'number' ? item.height : null,
}))
}
export async function resolveDataUrlToMediaId(
value: string | null,
filename: string,
existingMediaId?: string | null,
): Promise<string | null> {
if (!value) return null
if (!isDataUrl(value)) {
return existingMediaId ?? null
}
const file = filename.toLowerCase().endsWith('.png')
? await ensureUploadFile(value, filename)
: await ensureJpegUploadFile(value, filename)
const uploaded = await uploadMyUserProductMedia([file])
return uploaded[0]?.id ?? null
}
export async function resolveDataUrlsToMediaIds(
values: string[],
existingMediaIds: string[],
): Promise<string[]> {
const resolved: string[] = []
for (let index = 0; index < values.length; index += 1) {
const value = values[index]
if (isDataUrl(value)) {
const file = await ensureJpegUploadFile(
value,
`user-product-image-${index + 1}.jpg`,
)
const uploaded = await uploadMyUserProductMedia([file])
if (uploaded[0]) resolved.push(uploaded[0].id)
} else if (existingMediaIds[index]) {
resolved.push(existingMediaIds[index])
}
}
return resolved
}
apps/customer/src/services/tenantService.ts
+5
View File
@@ -1,6 +1,9 @@
import { apiRequest } from '../lib/api'
import type { DashboardLocale } from '@meshkee/dashboard-core'
import type { BusinessPrimaryColorId } from '../utils/businessPrimaryColors'
import type { BusinessModuleId } from '../utils/businessModules'
export type DashboardThemeMode = 'light' | 'dark'
export interface ResolvedTenant {
id: string
@@ -10,6 +13,8 @@ export interface ResolvedTenant {
domain: string
primaryColor: BusinessPrimaryColorId
defaultLocale?: DashboardLocale
themeMode?: DashboardThemeMode
enabledModules?: BusinessModuleId[]
logoUrl?: string | null
faviconUrl?: string | null
}
apps/customer/src/services/userProductsService.ts
+213
View File
@@ -0,0 +1,213 @@
import { apiRequest } from '../lib/api'
import { getActiveBusinessId } from '../lib/businessContext'
import type { UserProductListItem } from '../types/userProduct'
export type UserProductCondition = 'new' | 'stock' | 'needs_repair' | 'scrap'
export type UserProductPriceCurrency = 'IRT' | 'USD' | 'EUR' | 'AED'
export type TechnicalFieldType = 'text' | 'textarea' | 'select' | 'multi_select'
export interface UserProductCategoryOption {
id: string
name: string
nameFa: string | null
parentId: string | null
}
export interface TechnicalFormFieldOption {
id: string
label: string
value: string
sortOrder: number
}
export interface TechnicalFormField {
id: string
label: string
key: string
type: TechnicalFieldType
isRequired: boolean
sortOrder: number
options: TechnicalFormFieldOption[]
}
export interface CategoryTechnicalForm {
id: string
categoryId: string
fields: TechnicalFormField[]
}
export type TechnicalFormValues = Record<string, string | string[]>
export interface UserProductTechnicalValueInput {
fieldId: string
textValue?: string
optionId?: string
optionIds?: string[]
}
export interface CreateUserProductInput {
titleFa: string
titleEn?: string
description?: string
categoryId: string
price?: number
priceCurrency?: UserProductPriceCurrency
priceByExpert?: boolean
countryId: string
cityId: string
deliveryNote?: string
condition: UserProductCondition
technicalNotes?: string
technicalValues?: UserProductTechnicalValueInput[]
featuredMediaId?: string
galleryMediaIds?: string[]
}
export type UpdateUserProductInput = CreateUserProductInput
export interface UserProductDetail extends UserProductListItem {
countryId: string
cityId: string
countrySlug: string
featuredMediaId: string | null
galleryMediaIds: string[]
images: Array<{ mediaId: string; url: string }>
technicalValues: UserProductTechnicalValueInput[]
deliveryNote?: string | null
technicalNotes?: string | null
}
export interface ListMyUserProductsParams {
page?: number
pageSize?: number
}
export interface MyUserProductsListResponse {
items: UserProductListItem[]
total: number
page: number
pageSize: number
}
function businessPath(suffix = '') {
const businessId = getActiveBusinessId()
if (!businessId) {
throw new Error('No active business selected. Please sign in again.')
}
return `/businesses/${businessId}/my-user-products${suffix}`
}
export function buildTechnicalValuesPayload(
fields: TechnicalFormField[],
values: TechnicalFormValues,
): UserProductTechnicalValueInput[] {
const payload: UserProductTechnicalValueInput[] = []
for (const field of fields) {
const value = values[field.id]
if (field.type === 'text' || field.type === 'textarea') {
const text = typeof value === 'string' ? value.trim() : ''
if (!text) continue
payload.push({ fieldId: field.id, textValue: text })
continue
}
if (field.type === 'select') {
const optionId = typeof value === 'string' ? value.trim() : ''
if (!optionId) continue
payload.push({ fieldId: field.id, optionId })
continue
}
const optionIds = Array.isArray(value) ? value.filter(Boolean) : []
if (!optionIds.length) continue
payload.push({ fieldId: field.id, optionIds })
}
return payload
}
export async function listMyUserProducts(
params: ListMyUserProductsParams = {},
signal?: AbortSignal,
) {
const q = new URLSearchParams()
if (params.page !== undefined) q.set('page', String(params.page))
if (params.pageSize !== undefined) q.set('pageSize', String(params.pageSize))
const query = q.toString()
return apiRequest<MyUserProductsListResponse>(
`${businessPath()}${query ? `?${query}` : ''}`,
{ auth: true, signal },
)
}
export async function createMyUserProduct(input: CreateUserProductInput) {
return apiRequest<{ message: string; product: UserProductListItem }>(
businessPath(),
{
method: 'POST',
auth: true,
body: input,
},
)
}
export async function getMyUserProduct(
productId: string,
signal?: AbortSignal,
) {
return apiRequest<{ product: UserProductDetail }>(
businessPath(`/${productId}`),
{ auth: true, signal },
)
}
export async function updateMyUserProduct(
productId: string,
input: UpdateUserProductInput,
) {
return apiRequest<{ message: string; product: UserProductListItem }>(
businessPath(`/${productId}`),
{
method: 'PATCH',
auth: true,
body: input,
},
)
}
export async function deleteMyUserProduct(productId: string) {
return apiRequest<{ message: string }>(businessPath(`/${productId}`), {
method: 'DELETE',
auth: true,
})
}
export async function promoteMyUserProduct(productId: string) {
return apiRequest<{ message: string; product: UserProductListItem }>(
businessPath(`/${productId}/promote`),
{
method: 'POST',
auth: true,
},
)
}
export async function listMyUserProductCategories(signal?: AbortSignal) {
return apiRequest<{ items: UserProductCategoryOption[] }>(
businessPath('/categories'),
{ auth: true, signal },
)
}
export async function getMyUserProductCategoryTechnicalForm(
categoryId: string,
signal?: AbortSignal,
) {
return apiRequest<{ form: CategoryTechnicalForm | null }>(
businessPath(`/categories/${categoryId}/technical-form`),
{ auth: true, signal },
)
}
apps/customer/src/types/userProduct.ts
+26
View File
@@ -0,0 +1,26 @@
export type UserProductStatus = 'draft' | 'published' | 'archived' | 'rejected'
export type UserProductPriceCurrency = 'IRT' | 'USD' | 'EUR' | 'AED'
export interface UserProductListItem {
id: string
title: string
titleFa?: string | null
titleEn?: string | null
description?: string | null
price: number | null
priceCurrency?: UserProductPriceCurrency | string | null
priceByExpert?: boolean
promoted?: boolean
status: UserProductStatus
condition?: string | null
cityName: string
cityNameFa?: string | null
countryName?: string | null
countryNameFa?: string | null
imageUrl: string | null
categoryId?: string | null
categoryName?: string | null
categoryNameFa?: string | null
createdAt?: string
}
apps/customer/src/utils/businessModules.ts
+53
View File
@@ -0,0 +1,53 @@
/** Optional modules that can gate customer-dashboard sections. */
export const CUSTOMER_MODULE_IDS = ['customer_products'] as const
export type CustomerModuleId = (typeof CUSTOMER_MODULE_IDS)[number]
/** All optional module ids returned on tenant resolve (business + customer). */
export const BUSINESS_MODULE_IDS = [
'products',
'store',
'portfolio',
'blog',
'warehouse',
'videos',
...CUSTOMER_MODULE_IDS,
] as const
export type BusinessModuleId = (typeof BUSINESS_MODULE_IDS)[number]
/** Legacy tenants without modules: business modules on, customer modules opt-in. */
export const DEFAULT_ENABLED_BUSINESS_MODULES: BusinessModuleId[] = [
'products',
'store',
'portfolio',
'blog',
'warehouse',
'videos',
]
const MODULE_ID_SET = new Set<string>(BUSINESS_MODULE_IDS)
export function isBusinessModuleId(value: unknown): value is BusinessModuleId {
return typeof value === 'string' && MODULE_ID_SET.has(value)
}
export function normalizeEnabledBusinessModules(value: unknown): BusinessModuleId[] {
if (!Array.isArray(value)) {
return [...DEFAULT_ENABLED_BUSINESS_MODULES]
}
const selected = new Set<BusinessModuleId>()
for (const item of value) {
if (isBusinessModuleId(item)) selected.add(item)
}
return BUSINESS_MODULE_IDS.filter((id) => selected.has(id))
}
export function hasBusinessModule(
enabledModules: readonly BusinessModuleId[] | null | undefined,
moduleId: BusinessModuleId,
): boolean {
return normalizeEnabledBusinessModules(enabledModules).includes(moduleId)
}
apps/customer/src/utils/cropImage.ts
+46
View File
@@ -0,0 +1,46 @@
import type { Area } from 'react-easy-crop'
function createImage(url: string): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => {
const image = new Image()
image.addEventListener('load', () => resolve(image))
image.addEventListener('error', reject)
image.src = url
})
}
export async function getCroppedImage(
imageSrc: string,
pixelCrop: Area,
format: 'jpeg' | 'png' = 'jpeg',
): Promise<string> {
const image = await createImage(imageSrc)
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
if (!ctx) throw new Error('Could not get canvas context')
canvas.width = pixelCrop.width
canvas.height = pixelCrop.height
if (format === 'png') {
ctx.clearRect(0, 0, canvas.width, canvas.height)
}
ctx.drawImage(
image,
pixelCrop.x,
pixelCrop.y,
pixelCrop.width,
pixelCrop.height,
0,
0,
pixelCrop.width,
pixelCrop.height,
)
if (format === 'png') {
return canvas.toDataURL('image/png')
}
return canvas.toDataURL('image/jpeg', 0.92)
}
apps/customer/src/utils/imageUpload.ts
+84
View File
@@ -0,0 +1,84 @@
const ALLOWED_IMAGE_TYPES = new Set([
'image/jpeg',
'image/jpg',
'image/png',
'image/webp',
'image/gif',
])
function parseDataUrl(dataUrl: string): { mime: string; bytes: Uint8Array } {
const match = dataUrl.match(/^data:([^;]+);base64,(.+)$/)
if (!match) {
throw new Error('Invalid image data')
}
const mime = match[1] === 'image/jpg' ? 'image/jpeg' : match[1]
const binary = atob(match[2])
const bytes = new Uint8Array(binary.length)
for (let i = 0; i < binary.length; i += 1) {
bytes[i] = binary.charCodeAt(i)
}
return { mime, bytes }
}
function loadImage(src: string): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => {
const image = new Image()
image.addEventListener('load', () => resolve(image))
image.addEventListener('error', () => reject(new Error('Could not load image')))
image.src = src
})
}
export function dataUrlToFile(dataUrl: string, filename: string): File {
const { mime, bytes } = parseDataUrl(dataUrl)
const copy = new Uint8Array(bytes)
return new File([copy], filename, { type: mime })
}
export async function ensureUploadFile(dataUrl: string, filename: string): Promise<File> {
if (dataUrl.startsWith('data:')) {
const mime = dataUrl.slice(5, dataUrl.indexOf(';'))
const normalized = mime === 'image/jpg' ? 'image/jpeg' : mime
if (ALLOWED_IMAGE_TYPES.has(normalized)) {
const file = dataUrlToFile(dataUrl, filename)
if (file.size > 0) {
return file
}
}
}
const image = await loadImage(dataUrl)
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
if (!ctx) {
throw new Error('Could not prepare image for upload')
}
const wantsPng = filename.toLowerCase().endsWith('.png')
canvas.width = image.naturalWidth
canvas.height = image.naturalHeight
if (wantsPng) {
ctx.clearRect(0, 0, canvas.width, canvas.height)
}
ctx.drawImage(image, 0, 0)
const outputDataUrl = wantsPng
? canvas.toDataURL('image/png')
: canvas.toDataURL('image/jpeg', 0.92)
const safeName = filename.replace(/\.[^.]+$/, '') || 'image'
const extension = wantsPng ? 'png' : 'jpg'
return dataUrlToFile(outputDataUrl, `${safeName}.${extension}`)
}
export async function ensureJpegUploadFile(
dataUrl: string,
filename: string,
): Promise<File> {
const safeName = filename.replace(/\.[^.]+$/, '') || 'image'
return ensureUploadFile(dataUrl, `${safeName}.jpg`)
}
apps/super-admin/src/components/PrimaryColorSwatchControl.module.css
+62 -5
View File
@@ -43,12 +43,12 @@
z-index: 1200;
transform: translateX(-50%);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
flex-direction: column;
gap: 10px;
width: max-content;
min-width: 196px;
max-width: 280px;
padding: 8px 10px;
padding: 10px;
border-radius: var(--radius-sm);
border: 1px solid rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.78);
@@ -57,6 +57,63 @@
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.16);
}
.section {
display: flex;
flex-direction: column;
gap: 6px;
}
.sectionLabel {
margin: 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.themeRow {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.themeOption {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 32px;
padding: 0 10px;
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.28);
background: rgba(255, 255, 255, 0.55);
color: var(--text-secondary);
font-size: 12px;
font-weight: 500;
transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.themeOption:hover {
border-color: rgba(148, 163, 184, 0.45);
color: var(--text-primary);
}
.themeOptionSelected {
border-color: var(--primary);
background: rgba(var(--primary-rgb) / 0.1);
color: var(--primary);
box-shadow: 0 0 0 2px rgba(var(--primary-rgb) / 0.12);
}
.colorRow {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 6px;
}
.option {
width: 28px;
height: 28px;
apps/super-admin/src/components/PrimaryColorSwatchControl.tsx
+66 -23
View File
@@ -1,15 +1,19 @@
import { useEffect, useRef, useState } from 'react'
import { createPortal } from 'react-dom'
import { Moon, Sun } from 'lucide-react'
import {
BUSINESS_PRIMARY_COLOR_IDS,
BUSINESS_PRIMARY_COLOR_PALETTE,
type BusinessPrimaryColorId,
} from '../utils/businessPrimaryColors'
import type { DashboardThemeMode } from '../services/businessSettingsService'
import styles from './PrimaryColorSwatchControl.module.css'
interface PrimaryColorSwatchControlProps {
value: BusinessPrimaryColorId
themeMode: DashboardThemeMode
onChange: (value: BusinessPrimaryColorId) => void
onThemeModeChange: (value: DashboardThemeMode) => void
disabled?: boolean
}
@@ -20,7 +24,9 @@ type PopoverPosition = {
export function PrimaryColorSwatchControl({
value,
themeMode,
onChange,
onThemeModeChange,
disabled = false,
}: PrimaryColorSwatchControlProps) {
const [open, setOpen] = useState(false)
@@ -60,6 +66,12 @@ export function PrimaryColorSwatchControl({
setOpen(false)
}
function selectThemeMode(mode: DashboardThemeMode) {
if (mode !== themeMode) {
onThemeModeChange(mode)
}
}
useEffect(() => {
if (!open) return
@@ -99,10 +111,10 @@ export function PrimaryColorSwatchControl({
className={`${styles.trigger} ${open ? styles.triggerOpen : ''}`}
onClick={toggleOpen}
disabled={disabled}
aria-label={`Dashboard primary color: ${tokens.label}`}
aria-haspopup="listbox"
aria-label={`Dashboard theme: ${themeMode}, color: ${tokens.label}`}
aria-haspopup="dialog"
aria-expanded={open}
title={`Theme: ${tokens.label}`}
title={`Theme: ${themeMode} · ${tokens.label}`}
>
<span
className={styles.swatchDot}
@@ -117,35 +129,66 @@ export function PrimaryColorSwatchControl({
<div
ref={popoverRef}
className={styles.popover}
role="listbox"
aria-label="Choose primary color"
role="dialog"
aria-label="Choose dashboard theme and primary color"
style={{
top: popoverPos.top,
left: popoverPos.left,
}}
>
{BUSINESS_PRIMARY_COLOR_IDS.map((colorId) => {
const option = BUSINESS_PRIMARY_COLOR_PALETTE[colorId]
const selected = colorId === value
return (
<div className={styles.section}>
<p className={styles.sectionLabel}>Theme</p>
<div className={styles.themeRow} role="radiogroup" aria-label="Theme mode">
<button
key={colorId}
type="button"
role="option"
aria-selected={selected}
aria-label={option.label}
className={`${styles.option} ${selected ? styles.optionSelected : ''}`}
onClick={() => selectColor(colorId)}
role="radio"
aria-checked={themeMode === 'light'}
className={`${styles.themeOption} ${themeMode === 'light' ? styles.themeOptionSelected : ''}`}
onClick={() => selectThemeMode('light')}
>
<span
className={styles.optionDot}
style={{ backgroundColor: option.primary }}
aria-hidden="true"
/>
<Sun size={14} aria-hidden="true" />
<span>Light</span>
</button>
)
})}
<button
type="button"
role="radio"
aria-checked={themeMode === 'dark'}
className={`${styles.themeOption} ${themeMode === 'dark' ? styles.themeOptionSelected : ''}`}
onClick={() => selectThemeMode('dark')}
>
<Moon size={14} aria-hidden="true" />
<span>Dark</span>
</button>
</div>
</div>
<div className={styles.section}>
<p className={styles.sectionLabel}>Color</p>
<div className={styles.colorRow} role="listbox" aria-label="Primary color">
{BUSINESS_PRIMARY_COLOR_IDS.map((colorId) => {
const option = BUSINESS_PRIMARY_COLOR_PALETTE[colorId]
const selected = colorId === value
return (
<button
key={colorId}
type="button"
role="option"
aria-selected={selected}
aria-label={option.label}
className={`${styles.option} ${selected ? styles.optionSelected : ''}`}
onClick={() => selectColor(colorId)}
>
<span
className={styles.optionDot}
style={{ backgroundColor: option.primary }}
aria-hidden="true"
/>
</button>
)
})}
</div>
</div>
</div>,
document.body,
)}
apps/super-admin/src/pages/BusinessesPage.module.css
+17 -3
View File
@@ -459,13 +459,27 @@
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.modulesSection {
margin-top: 14px;
}
.modulesSection .entityGroupLabel {
margin: 0;
}
.modulesChecks {
display: flex;
flex-direction: column;
gap: 10px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px 16px;
margin-top: 10px;
}
@media (max-width: 560px) {
.modulesChecks {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.modulesCharts {
display: flex;
flex-direction: column;
apps/super-admin/src/pages/BusinessesPage.tsx
+106 -22
View File
@@ -53,11 +53,16 @@ import {
updateBusinessDefaultLocale,
updateBusinessModules,
updateBusinessPrimaryColor,
updateBusinessThemeMode,
type DashboardLocale,
type DashboardThemeMode,
} from '../services/businessSettingsService'
import {
BUSINESS_DASHBOARD_MODULE_IDS,
BUSINESS_DASHBOARD_MODULE_LABELS,
BUSINESS_MODULE_IDS,
BUSINESS_MODULE_LABELS,
CUSTOMER_MODULE_IDS,
CUSTOMER_MODULE_LABELS,
DEFAULT_ENABLED_BUSINESS_MODULES,
DEFAULT_HOME_CHARTS,
HOME_CHART_IDS,
@@ -74,11 +79,16 @@ import styles from './BusinessesPage.module.css'
const DEFAULT_PAGE_SIZE = 10
const DEFAULT_LOCALE: DashboardLocale = 'fa'
const DEFAULT_THEME_MODE: DashboardThemeMode = 'light'
function normalizeDefaultLocale(value: unknown): DashboardLocale {
return value === 'en' || value === 'fa' ? value : DEFAULT_LOCALE
}
function normalizeThemeMode(value: unknown): DashboardThemeMode {
return value === 'dark' || value === 'light' ? value : DEFAULT_THEME_MODE
}
function emptyModuleSelection(
enabled: BusinessModuleId[] = DEFAULT_ENABLED_BUSINESS_MODULES,
): Record<BusinessModuleId, boolean> {
@@ -400,7 +410,7 @@ export function BusinessesPage() {
try {
await updateBusinessPrimaryColor(b.id, primaryColor)
showToast(`Theme updated for "${b.name}".`, 'success')
showToast(`Theme color updated for "${b.name}".`, 'success')
} catch (err) {
setData((prev) => {
if (!prev) return prev
@@ -413,7 +423,53 @@ export function BusinessesPage() {
})
showToast(
err instanceof ApiError ? err.message : 'Unable to update theme.',
err instanceof ApiError ? err.message : 'Unable to update theme color.',
'error',
)
} finally {
setSavingColorId(null)
}
}
async function handleThemeModeChange(
b: BusinessListItem,
themeMode: DashboardThemeMode,
) {
const currentMode = normalizeThemeMode(b.themeMode)
if (currentMode === themeMode) return
setSavingColorId(b.id)
setError('')
setData((prev) => {
if (!prev) return prev
return {
...prev,
items: prev.items.map((item) =>
item.id === b.id ? { ...item, themeMode } : item,
),
}
})
try {
await updateBusinessThemeMode(b.id, themeMode)
showToast(
`${themeMode === 'dark' ? 'Dark' : 'Light'} theme set for "${b.name}".`,
'success',
)
} catch (err) {
setData((prev) => {
if (!prev) return prev
return {
...prev,
items: prev.items.map((item) =>
item.id === b.id ? { ...item, themeMode: currentMode } : item,
),
}
})
showToast(
err instanceof ApiError ? err.message : 'Unable to update theme mode.',
'error',
)
} finally {
@@ -1103,10 +1159,14 @@ export function BusinessesPage() {
<td className={`${styles.td} ${styles.tdTheme}`}>
<PrimaryColorSwatchControl
value={normalizeBusinessPrimaryColorId(b.primaryColor)}
themeMode={normalizeThemeMode(b.themeMode)}
disabled={savingColorId === b.id}
onChange={(primaryColor) =>
void handlePrimaryColorChange(b, primaryColor)
}
onThemeModeChange={(themeMode) =>
void handleThemeModeChange(b, themeMode)
}
/>
</td>
<td className={`${styles.td} ${styles.tdLocale}`}>
@@ -1384,26 +1444,50 @@ export function BusinessesPage() {
</p>
) : null}
<p className={styles.helperText}>
Choose which optional modules this business can use. Customers, website,
and other general sections stay available for every business.
Choose which optional modules this business can use. Home, profile,
website, and other general sections stay available for every business.
</p>
<div className={styles.modulesChecks}>
{BUSINESS_MODULE_IDS.map((id) => (
<label key={id} className={styles.entityCheck}>
<input
type="checkbox"
checked={modulesSelected[id]}
disabled={modulesSubmitting}
onChange={(e) =>
setModulesSelected((prev) => ({
...prev,
[id]: e.target.checked,
}))
}
/>
<span>{BUSINESS_MODULE_LABELS[id]}</span>
</label>
))}
<div className={styles.modulesSection}>
<p className={styles.entityGroupLabel}>Business modules</p>
<div className={styles.modulesChecks}>
{BUSINESS_DASHBOARD_MODULE_IDS.map((id) => (
<label key={id} className={styles.entityCheck}>
<input
type="checkbox"
checked={modulesSelected[id]}
disabled={modulesSubmitting}
onChange={(e) =>
setModulesSelected((prev) => ({
...prev,
[id]: e.target.checked,
}))
}
/>
<span>{BUSINESS_DASHBOARD_MODULE_LABELS[id]}</span>
</label>
))}
</div>
</div>
<div className={styles.modulesSection}>
<p className={styles.entityGroupLabel}>Customer modules</p>
<div className={styles.modulesChecks}>
{CUSTOMER_MODULE_IDS.map((id) => (
<label key={id} className={styles.entityCheck}>
<input
type="checkbox"
checked={modulesSelected[id]}
disabled={modulesSubmitting}
onChange={(e) =>
setModulesSelected((prev) => ({
...prev,
[id]: e.target.checked,
}))
}
/>
<span>{CUSTOMER_MODULE_LABELS[id]}</span>
</label>
))}
</div>
</div>
<div className={styles.modulesCharts}>
<p className={styles.entityGroupLabel}>Home charts</p>
apps/super-admin/src/services/businessSettingsService.ts
+16
View File
@@ -4,9 +4,12 @@ import type { BusinessModuleId, HomeChartId } from '../utils/businessModules'
export type DashboardLocale = 'en' | 'fa'
export type DashboardThemeMode = 'light' | 'dark'
export interface BrandingSettings {
primaryColor: BusinessPrimaryColorId
defaultLocale: DashboardLocale
themeMode: DashboardThemeMode
}
export interface ModulesSettings {
@@ -52,6 +55,19 @@ export async function updateBusinessPrimaryColor(
})
}
export async function updateBusinessThemeMode(
businessId: string,
themeMode: DashboardThemeMode,
) {
return apiRequest<BusinessSettingsResponse>(`/businesses/${businessId}/settings`, {
method: 'PATCH',
auth: true,
body: {
branding: { themeMode },
},
})
}
export async function updateBusinessDefaultLocale(
businessId: string,
defaultLocale: DashboardLocale,
apps/super-admin/src/types/business.ts
+5 -1
View File
@@ -1,6 +1,9 @@
import type { BusinessPrimaryColorId } from '../utils/businessPrimaryColors'
import type { BusinessModuleId, HomeChartId } from '../utils/businessModules'
import type { DashboardLocale } from '../services/businessSettingsService'
import type {
DashboardLocale,
DashboardThemeMode,
} from '../services/businessSettingsService'
export interface BusinessOwnerInfo {
name: string | null
@@ -28,6 +31,7 @@ export interface BusinessListItem {
ownerCellNumber: string | null
isActive: boolean
primaryColor: BusinessPrimaryColorId
themeMode: DashboardThemeMode
defaultLocale: DashboardLocale
enabledModules: BusinessModuleId[]
moduleCount: number
apps/super-admin/src/utils/businessModules.ts
+32 -5
View File
@@ -1,5 +1,5 @@
/** Optional CMS modules a business can have. Always-on areas are not listed. */
export const BUSINESS_MODULE_IDS = [
/** Optional business-dashboard CMS modules. Always-on areas are not listed. */
export const BUSINESS_DASHBOARD_MODULE_IDS = [
'products',
'store',
'portfolio',
@@ -8,9 +8,24 @@ export const BUSINESS_MODULE_IDS = [
'videos',
] as const
/** Optional customer-dashboard modules. Always-on: home, profile, addresses, orders, favorites. */
export const CUSTOMER_MODULE_IDS = ['customer_products'] as const
/** All optional modules stored in `settings.modules.enabled`. */
export const BUSINESS_MODULE_IDS = [
...BUSINESS_DASHBOARD_MODULE_IDS,
...CUSTOMER_MODULE_IDS,
] as const
export type BusinessDashboardModuleId =
(typeof BUSINESS_DASHBOARD_MODULE_IDS)[number]
export type CustomerModuleId = (typeof CUSTOMER_MODULE_IDS)[number]
export type BusinessModuleId = (typeof BUSINESS_MODULE_IDS)[number]
export const BUSINESS_MODULE_LABELS: Record<BusinessModuleId, string> = {
export const BUSINESS_DASHBOARD_MODULE_LABELS: Record<
BusinessDashboardModuleId,
string
> = {
products: 'Products',
store: 'Store',
portfolio: 'Portfolio',
@@ -19,6 +34,15 @@ export const BUSINESS_MODULE_LABELS: Record<BusinessModuleId, string> = {
videos: 'Videos',
}
export const CUSTOMER_MODULE_LABELS: Record<CustomerModuleId, string> = {
customer_products: 'Customer products',
}
export const BUSINESS_MODULE_LABELS: Record<BusinessModuleId, string> = {
...BUSINESS_DASHBOARD_MODULE_LABELS,
...CUSTOMER_MODULE_LABELS,
}
/** Home dashboard chart slots (super-admin selectable). */
export const HOME_CHART_IDS = [
'none',
@@ -38,9 +62,12 @@ export const HOME_CHART_LABELS: Record<HomeChartId, string> = {
products_added_1y: 'Added product in last year',
}
/** Existing tenants without saved modules keep every module enabled. */
/**
* Existing tenants without saved modules keep every business-dashboard module
* enabled. Customer modules stay opt-in.
*/
export const DEFAULT_ENABLED_BUSINESS_MODULES: BusinessModuleId[] = [
...BUSINESS_MODULE_IDS,
...BUSINESS_DASHBOARD_MODULE_IDS,
]
export const DEFAULT_HOME_CHARTS: [HomeChartId, HomeChartId] = [
docs/PROJECT_CONTEXT.md
+16 -4
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: August 7, 2026
Last updated: August 9, 2026
---
@@ -165,6 +165,10 @@ Add to `/etc/hosts` (one line per tenant):
| `/addresses` | Addresses |
| `/orders` | Orders |
| `/favorites` | Favorites |
| `/my-products` | Customer stock listings (gated by `customer_products`) — list API |
| `/my-products/:id` | User product details |
| `/my-products/new` | Add user product (3 steps: basics, images, technical) — create API |
| `/my-products/:id/edit` | Edit user product — update API |
### Business (`apps/business`)
@@ -184,6 +188,10 @@ Add to `/etc/hosts` (one line per tenant):
| `/store/items` | Store items (product variants) | Yes |
| `/store/settings` | Online sell + order process steps | Yes |
| `/customers` | Business customers list | Yes |
| `/customer-products` | Customer user-product listings (admin API) | Yes |
| `/customer-products/new` | Admin create user product (under admin name) | Yes |
| `/customer-products/:id` | Customer user-product details | Yes |
| `/customer-products/:id/edit` | Admin edit user product | Yes |
| `/store/orders` | Orders list + filters | Yes |
| `/blog` | Blog hub | Yes |
| `/blog/list` | My Blogs grid | Yes |
@@ -257,9 +265,9 @@ Products accept optional `brandId` on create/update.
### Business settings
- `GET/PATCH /businesses/:businessId/settings` — `branding`, `dashboard`, `store`, `modules`
- `modules.enabled`: optional CMS modules (`products`, `store`, `portfolio`, `blog`, `warehouse`, `videos`); missing key → all enabled (legacy). Super-admin only for modules PATCH.
- `modules.enabled`: optional modules — business: `products`, `store`, `portfolio`, `blog`, `warehouse`, `videos`; customer: `customer_products`. Missing key → all business modules enabled (legacy); customer modules stay opt-in. Super-admin only for modules PATCH.
- `modules.charts`: two home chart slots (`none`, `orders_30d`, `customers_joined_1y`, `blog_views_30d`, `products_added_1y`); `none` hides that slot; defaults orders + customers.
- Always-on (not in modules list): customers, website, profile, settings, home
- Always-on (not in modules list): business — customers, website, profile, settings, home; customer — home, profile, addresses, orders, favorites
- Tenant public: `GET /tenants/:host` includes `enabledModules` + `homeCharts`
### Portfolios
@@ -301,6 +309,10 @@ Products accept optional `brandId` on create/update.
### Media
- `POST /businesses/:businessId/media` — upload to S3
### User products (customer listings)
- Customer (own stock): `GET/POST /businesses/:businessId/my-user-products`, `GET/PATCH/DELETE .../:productId`, `POST .../:productId/promote`, categories + technical-form + media
- Business admin (all listings): `GET/POST /businesses/:businessId/user-products`, `GET/PATCH/DELETE .../:productId`, `PATCH .../:productId/status` (`draft` | `published` | `rejected` | `archived`), `POST .../:productId/promote`, categories + technical-form. Admin create is attributed to the admin user.
---
## Feature status (business app)
@@ -441,7 +453,7 @@ Global input sizing lives in `packages/dashboard-core/src/styles/tokens.css` (cu
- **Farsi text:** Customer app → Yekan Bakh (`src/fonts/yekanbakh.css`, `--font-fa` in `index.css`); business/super-admin → IranYekan (`iranyekan.css`, `.faText`). Input + placeholder must share the same stack — see `.cursor/rules/ui-farsi-fonts.mdc`
- **Per-business theme:** Super Admin sets `branding.primaryColor`; business app applies via `BusinessThemeProvider`
- **Per-business modules:** Super Admin **Modules** column on Businesses list; stored in `settings.modules.enabled`; business Home + Sidebar hide disabled modules
- **Per-business modules:** Super Admin **Modules** column on Businesses list; stored in `settings.modules.enabled` (business + customer sections); business Home + Sidebar hide disabled business modules; `customer_products` gates customer My Products (`/my-products`, `/my-products/new`) which call `businesses/:id/my-user-products`
- **RTL:** Farsi inputs use `dir="rtl"` and the app’s `--font-fa`
- **IRT prices:** comma-separated thousands + `IRT` suffix — see `.cursor/rules/ui-irt-price.mdc`
- **Toasts:** see `.cursor/rules/ui-toasts.mdc`
package-lock.json
Generated
+4 -3
View File
@@ -40,6 +40,7 @@
"lucide-react": "^1.23.0",
"react": "^19.2.7",
"react-dom": "^19.2.7",
"react-easy-crop": "^6.2.3",
"react-router-dom": "^7.18.1"
},
"devDependencies": {
@@ -1287,9 +1288,9 @@
}
},
"node_modules/react-easy-crop": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-6.2.2.tgz",
"integrity": "sha512-b0HOicSvLYoNk1yvZTwjH8sNjF5uD9xLtWrSDnv+fx1dXTbwd8bNLQaP6gjXw//A+tni9Mw5KDmPNOEjKF55NQ==",
"version": "6.2.3",
"resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-6.2.3.tgz",
"integrity": "sha512-ebimG3OGlzizjxEZ77Cj9CVLcg5vDZ6QVz8ud1rx4WmsCDWHIROEhgMi0GpJ/jKAuwHrH0M+QZUK4hyvxbYhOA==",
"license": "MIT",
"dependencies": {
"normalize-wheel": "^1.0.1"
packages/dashboard-core/src/styles/tokens.css
+2
View File
@@ -48,6 +48,8 @@
--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;
--icon-bg: color-mix(in srgb, var(--primary) 14%, #ffffff);
--icon-bg-end: color-mix(in srgb, var(--primary) 8%, #f1f5f9);
}
html {
packages/dashboard-ui/src/components/AddressListEditor.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import styles from './AddressListEditor.module.css'
export type CityOption = {
id: string
parentId: string | null
level: 'country' | 'province' | 'city'
level: 'country' | 'province' | 'city' | 'district'
nameFa: string
nameEn: string
landlineCode: string | null
packages/dashboard-ui/src/components/LanguageSelect.module.css
+24 -6
View File
@@ -4,9 +4,16 @@
align-items: center;
height: 38px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
background: linear-gradient(
145deg,
color-mix(in srgb, var(--elevated-surface) 78%, transparent) 0%,
color-mix(in srgb, var(--glass-bg) 55%, transparent) 55%,
color-mix(in srgb, var(--surface) 42%, transparent) 100%
);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid var(--glass-border);
transition: box-shadow 0.2s, border-color 0.2s;
transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
}
.wrap:hover,
@@ -20,6 +27,7 @@
inset-inline-start: 12px;
color: var(--text-secondary);
pointer-events: none;
z-index: 1;
}
.chevron {
@@ -27,27 +35,37 @@
inset-inline-end: 10px;
color: var(--text-muted);
pointer-events: none;
z-index: 1;
}
.select {
/* Beat global `select` + `html[data-theme='dark'] select` so the pill stays one surface */
.wrap .select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
height: 100%;
min-width: 72px;
min-height: 0;
min-width: 76px;
padding-block: 0;
padding-inline: 34px 28px;
border: none;
border-radius: 50px;
background: transparent;
background-color: transparent;
background-image: none;
box-shadow: none;
color: var(--text-primary);
font-size: 13px;
font-weight: 600;
font-family: var(--font-ui);
line-height: 1;
cursor: pointer;
outline: none;
transition: none;
}
.select:focus {
.wrap .select:focus {
border: none;
box-shadow: none;
outline: none;
}
packages/dashboard-ui/src/components/SectionCard.module.css
+58 -7
View File
@@ -1,6 +1,7 @@
.card {
display: flex;
flex-direction: column;
height: 100%;
padding: 28px;
background: var(--glass-bg);
backdrop-filter: blur(20px);
@@ -19,7 +20,8 @@
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-light) 0%, rgba(219, 234, 254, 0.5) 100%);
background: linear-gradient(135deg, var(--icon-bg) 0%, var(--icon-bg-end) 100%);
border: 1px solid rgba(var(--primary-rgb) / 0.22);
border-radius: var(--radius-sm);
color: var(--primary);
margin-bottom: 20px;
@@ -50,6 +52,9 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 36px;
margin-top: auto;
}
.link {
@@ -58,28 +63,74 @@
color: var(--primary);
}
.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);
}
:global([dir='rtl']) .card:hover .arrowBtn {
transform: scaleX(-1) translateX(2px);
}
packages/dashboard-ui/src/components/SectionCard.tsx
+25 -3
View File
@@ -6,8 +6,12 @@ interface SectionCardProps {
icon: LucideIcon
title: string
description: string
linkText: string
/** Legacy footer link text; prefer count + countLabel when available. */
linkText?: string
href: string
/** Entity total shown beside the arrow; omit for sections without a count. */
count?: number | null
countLabel?: string
}
export function SectionCard({
@@ -16,7 +20,14 @@ export function SectionCard({
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} data-card-hover>
<div className={styles.iconWrap}>
@@ -27,9 +38,20 @@ 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>
) : linkText ? (
<span className={styles.link}>{linkText}</span>
) : (
<span />
)}
<span className={styles.arrowBtn} aria-hidden="true">
<ArrowRight size={18} />
<ArrowRight size={18} className={styles.arrowIcon} />
</span>
</div>
</Link>
packages/dashboard-ui/src/context/Toast.module.css
+1 -1
View File
@@ -19,7 +19,7 @@
font-weight: 500;
line-height: 1.4;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.55);
background: var(--elevated-surface);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
border: 1px solid var(--glass-border);