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

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

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

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-01 09:35:27 +03:30
co-authored by Cursor
parent f5b2193ba1
commit 66004a0fba
112 changed files with 4338 additions and 1061 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/dashboard-ui/src/components/AddressListEditor.module.css
+1 -1
View File
@@ -69,7 +69,7 @@
}
.selectFieldFa {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
direction: rtl;
text-align: right;
}
packages/dashboard-ui/src/components/AddressListEditor.tsx
+52 -16
View File
@@ -35,6 +35,23 @@ export function createEmptyAddressItem(): AddressListItem {
export type AddressLocale = 'en' | 'fa'
export type AddressListEditorLabels = {
title?: string
addLabel?: string
loading?: string
province?: string
city?: string
address?: string
postalCode?: string
landline?: string
selectProvince?: string
selectCity?: string
streetPlaceholder?: string
postalPlaceholder?: string
landlinePlaceholder?: string
removeAriaLabel?: string
}
export function getLocationOptionLabel(option: CityOption, locale: AddressLocale = 'en') {
return locale === 'fa' ? option.nameFa : option.nameEn
}
@@ -72,6 +89,7 @@ type AddressListEditorProps = {
locale?: AddressLocale
title?: string
addLabel?: string
labels?: AddressListEditorLabels
}
export function AddressListEditor({
@@ -85,32 +103,50 @@ export function AddressListEditor({
disabled = false,
loading = false,
locale = 'en',
title = 'Saved addresses',
addLabel = 'Add address',
title,
addLabel,
labels = {},
}: AddressListEditorProps) {
const selectClassName =
locale === 'fa' ? `${styles.selectField} ${styles.selectFieldFa}` : styles.selectField
const resolved = {
title: labels.title ?? title ?? 'Saved addresses',
addLabel: labels.addLabel ?? addLabel ?? 'Add address',
loading: labels.loading ?? 'Loading addresses...',
province: labels.province ?? 'Province',
city: labels.city ?? 'City',
address: labels.address ?? 'Address',
postalCode: labels.postalCode ?? 'Postal code',
landline: labels.landline ?? 'Landline',
selectProvince: labels.selectProvince ?? 'Select province',
selectCity: labels.selectCity ?? 'Select city',
streetPlaceholder: labels.streetPlaceholder ?? 'Street address',
postalPlaceholder: labels.postalPlaceholder ?? 'Postal code',
landlinePlaceholder: labels.landlinePlaceholder ?? 'Landline',
removeAriaLabel: labels.removeAriaLabel ?? 'Remove address',
}
return (
<>
<div className={styles.sectionHeader}>
<h3 className={styles.sectionTitle}>{title}</h3>
<h3 className={styles.sectionTitle}>{resolved.title}</h3>
<button type="button" className={styles.addBtn} onClick={onAdd} disabled={disabled}>
<Plus size={16} />
{addLabel}
{resolved.addLabel}
</button>
</div>
{loading ? (
<p className={styles.helperText}>Loading addresses...</p>
<p className={styles.helperText}>{resolved.loading}</p>
) : (
<div className={styles.duplicatorGrid}>
<div className={styles.gridHeader}>
<span>Province</span>
<span>City</span>
<span>Address</span>
<span>Postal code</span>
<span>Landline</span>
<span>{resolved.province}</span>
<span>{resolved.city}</span>
<span>{resolved.address}</span>
<span>{resolved.postalCode}</span>
<span>{resolved.landline}</span>
<span />
</div>
@@ -127,7 +163,7 @@ export function AddressListEditor({
disabled={disabled}
onChange={(e) => void onProvinceChange(index, e.target.value)}
>
<option value="">Select province</option>
<option value="">{resolved.selectProvince}</option>
{provinces.map((province) => (
<option key={province.id} value={province.slug}>
{getLocationOptionLabel(province, locale)}
@@ -141,7 +177,7 @@ export function AddressListEditor({
disabled={disabled || !item.provinceSlug}
onChange={(e) => onAddressChange(index, { city: e.target.value })}
>
<option value="">Select city</option>
<option value="">{resolved.selectCity}</option>
{cities.map((city) => (
<option key={city.id} value={getLocationOptionLabel(city, locale)}>
{getLocationOptionLabel(city, locale)}
@@ -154,7 +190,7 @@ export function AddressListEditor({
value={item.address}
disabled={disabled}
onChange={(e) => onAddressChange(index, { address: e.target.value })}
placeholder="Street address"
placeholder={resolved.streetPlaceholder}
/>
<input
@@ -162,7 +198,7 @@ export function AddressListEditor({
value={item.postalCode}
disabled={disabled}
onChange={(e) => onAddressChange(index, { postalCode: e.target.value })}
placeholder="Postal code"
placeholder={resolved.postalPlaceholder}
/>
<input
@@ -170,14 +206,14 @@ export function AddressListEditor({
value={item.landline}
disabled={disabled}
onChange={(e) => onAddressChange(index, { landline: e.target.value })}
placeholder="Landline"
placeholder={resolved.landlinePlaceholder}
/>
<button
type="button"
className={styles.removeBtn}
onClick={() => onRemove(index)}
aria-label="Remove address"
aria-label={resolved.removeAriaLabel}
disabled={disabled}
>
<Trash2 size={15} />
packages/dashboard-ui/src/components/LanguageSelect.module.css
+64
View File
@@ -0,0 +1,64 @@
.wrap {
position: relative;
display: inline-flex;
align-items: center;
height: 38px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--glass-border);
transition: box-shadow 0.2s, border-color 0.2s;
}
.wrap:hover,
.wrap:focus-within {
box-shadow: var(--glass-shadow);
border-color: rgba(var(--primary-rgb) / 0.25);
}
.icon {
position: absolute;
inset-inline-start: 12px;
color: var(--text-secondary);
pointer-events: none;
}
.chevron {
position: absolute;
inset-inline-end: 10px;
color: var(--text-muted);
pointer-events: none;
}
.select {
appearance: none;
-webkit-appearance: none;
height: 100%;
min-width: 72px;
padding-block: 0;
padding-inline: 34px 28px;
border: none;
border-radius: 50px;
background: transparent;
color: var(--text-primary);
font-size: 13px;
font-weight: 600;
font-family: var(--font-ui);
cursor: pointer;
outline: none;
}
.select:focus {
outline: none;
}
.srOnly {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
packages/dashboard-ui/src/components/LanguageSelect.tsx
+33
View File
@@ -0,0 +1,33 @@
import { ChevronDown, Languages } from 'lucide-react'
import { useLocale } from '../context/LocaleContext'
import type { DashboardLocale } from '@meshkee/dashboard-core'
import styles from './LanguageSelect.module.css'
const OPTIONS: { value: DashboardLocale; label: string }[] = [
{ value: 'en', label: 'EN' },
{ value: 'fa', label: 'فا' },
]
export function LanguageSelect() {
const { locale, setLocale } = useLocale()
return (
<label className={styles.wrap}>
<span className={styles.srOnly}>Language</span>
<Languages size={16} className={styles.icon} aria-hidden />
<select
className={styles.select}
value={locale}
onChange={(e) => setLocale(e.target.value as DashboardLocale)}
aria-label="Language"
>
{OPTIONS.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
<ChevronDown size={14} className={styles.chevron} aria-hidden />
</label>
)
}
packages/dashboard-ui/src/components/PasswordResetModal.module.css
+1 -1
View File
@@ -60,7 +60,7 @@
min-height: var(--field-height);
padding: var(--field-padding-y) var(--field-padding-x);
font-size: var(--field-font-size);
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
line-height: 1.4;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.75);
packages/dashboard-ui/src/components/SectionCard.module.css
+8
View File
@@ -75,3 +75,11 @@
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/context/LocaleContext.tsx
+66
View File
@@ -0,0 +1,66 @@
import {
createContext,
useCallback,
useContext,
useEffect,
useMemo,
useState,
type ReactNode,
} from 'react'
import {
applyDocumentLocale,
getLocaleDirection,
readStoredLocale,
writeStoredLocale,
type DashboardLocale,
} from '@meshkee/dashboard-core'
interface LocaleContextValue {
locale: DashboardLocale
dir: 'ltr' | 'rtl'
isRtl: boolean
setLocale: (locale: DashboardLocale) => void
}
const LocaleContext = createContext<LocaleContextValue | null>(null)
export function LocaleProvider({
children,
defaultLocale = 'fa',
}: {
children: ReactNode
defaultLocale?: DashboardLocale
}) {
const [locale, setLocaleState] = useState<DashboardLocale>(() =>
readStoredLocale(defaultLocale),
)
useEffect(() => {
applyDocumentLocale(locale)
writeStoredLocale(locale)
}, [locale])
const setLocale = useCallback((next: DashboardLocale) => {
setLocaleState(next)
}, [])
const value = useMemo<LocaleContextValue>(() => {
const dir = getLocaleDirection(locale)
return {
locale,
dir,
isRtl: dir === 'rtl',
setLocale,
}
}, [locale, setLocale])
return <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>
}
export function useLocale(): LocaleContextValue {
const context = useContext(LocaleContext)
if (!context) {
throw new Error('useLocale must be used within LocaleProvider')
}
return context
}
packages/dashboard-ui/src/index.ts
+3
View File
@@ -4,6 +4,7 @@ export {
getLocationOptionLabel,
matchCityByName,
matchProvinceByName,
type AddressListEditorLabels,
type AddressListItem,
type AddressLocale,
type CityOption,
@@ -20,4 +21,6 @@ export {
type ChangePasswordHandler,
type PasswordResetModalProps,
} from './components/PasswordResetModal'
export { LanguageSelect } from './components/LanguageSelect'
export { LocaleProvider, useLocale } from './context/LocaleContext'
export { useDashboardDocumentTitle } from './hooks/useDashboardDocumentTitle'