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-core/src/index.ts
+10
View File
@@ -31,6 +31,16 @@ export {
export { applyDocumentFavicon } from './utils/favicon'
export {
applyDocumentLocale,
DASHBOARD_LOCALE_STORAGE_KEY,
getLocaleDirection,
isDashboardLocale,
readStoredLocale,
writeStoredLocale,
type DashboardLocale,
} from './locale/dashboardLocale'
export {
BUSINESS_SUBDOMAIN_PREFIX,
CUSTOMER_SUBDOMAIN_PREFIX,
packages/dashboard-core/src/locale/dashboardLocale.ts
+37
View File
@@ -0,0 +1,37 @@
export type DashboardLocale = 'en' | 'fa'
export const DASHBOARD_LOCALE_STORAGE_KEY = 'meshkee.dashboard.locale'
export function isDashboardLocale(value: unknown): value is DashboardLocale {
return value === 'en' || value === 'fa'
}
export function getLocaleDirection(locale: DashboardLocale): 'ltr' | 'rtl' {
return locale === 'fa' ? 'rtl' : 'ltr'
}
export function applyDocumentLocale(locale: DashboardLocale): void {
if (typeof document === 'undefined') return
const root = document.documentElement
root.lang = locale
root.dir = getLocaleDirection(locale)
}
export function readStoredLocale(fallback: DashboardLocale = 'fa'): DashboardLocale {
if (typeof localStorage === 'undefined') return fallback
try {
const raw = localStorage.getItem(DASHBOARD_LOCALE_STORAGE_KEY)
return isDashboardLocale(raw) ? raw : fallback
} catch {
return fallback
}
}
export function writeStoredLocale(locale: DashboardLocale): void {
if (typeof localStorage === 'undefined') return
try {
localStorage.setItem(DASHBOARD_LOCALE_STORAGE_KEY, locale)
} catch {
// ignore quota / private mode
}
}
packages/dashboard-core/src/styles/tokens.css
+64 -12
View File
@@ -13,6 +13,10 @@
--primary-dark: #2563eb;
--primary-rgb: 59 130 246;
--primary-dark-rgb: 37 99 235;
--chart-accent: #06b6d4;
--chart-accent-dark: #0891b2;
--chart-accent-rgb: 6 182 212;
--chart-accent-dark-rgb: 8 145 178;
--bg-gradient-start: color-mix(in srgb, var(--primary-light) 72%, #ffffff);
--bg-gradient-mid: color-mix(in srgb, var(--primary-light) 42%, #ffffff);
--bg-gradient-end: color-mix(in srgb, var(--primary-light) 18%, #ffffff);
@@ -35,8 +39,10 @@
--field-padding-y: 9px;
--field-padding-x: 12px;
--field-height: 38px;
--font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-en: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-fa: 'IRANYekan', 'IranYekan', 'Yekan', Tahoma, sans-serif;
/* Latin → Montserrat first; Arabic/Persian glyphs fall through to --font-fa */
--font-ui: var(--font-en), var(--font-fa);
--card-hover-lift: -4px;
--card-hover-shadow: 0 16px 48px rgba(var(--primary-rgb) / 0.14);
--card-hover-transition: transform 0.25s ease, box-shadow 0.25s ease;
@@ -52,18 +58,64 @@ body,
}
body {
font-family: var(--font-en);
font-family: var(--font-ui);
color: var(--text-primary);
background-color: var(--bg-gradient-mid);
background-image:
radial-gradient(ellipse 520px 520px at calc(100% - 40px) -60px, rgba(var(--primary-rgb) / 0.28), transparent 72%),
radial-gradient(ellipse 420px 420px at 18% calc(100% + 20px), rgba(var(--primary-rgb) / 0.18), transparent 72%),
radial-gradient(ellipse 320px 320px at -40px 42%, rgba(var(--primary-rgb) / 0.12), transparent 72%),
linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
background-image: linear-gradient(
135deg,
var(--bg-gradient-start) 0%,
var(--bg-gradient-mid) 50%,
var(--bg-gradient-end) 100%
);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
inset: -30%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(
ellipse 520px 520px at 72% 18%,
rgba(var(--primary-rgb) / 0.3),
transparent 72%
),
radial-gradient(
ellipse 420px 420px at 22% 82%,
rgba(var(--primary-rgb) / 0.2),
transparent 72%
),
radial-gradient(
ellipse 360px 360px at 8% 42%,
rgba(var(--chart-accent-rgb, var(--primary-rgb)) / 0.14),
transparent 72%
);
animation: pageAuraDrift 22s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes pageAuraDrift {
0% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(3.5%, -2.5%, 0) scale(1.06);
}
100% {
transform: translate3d(-3%, 3.5%, 0) scale(1.04);
}
}
@media (prefers-reduced-motion: reduce) {
body::before {
animation: none;
}
}
/* Interactive glass cards: lift + shadow on hover (no border change) */
@@ -119,7 +171,7 @@ select:focus {
input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden']),
textarea {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
font-size: var(--field-font-size);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
@@ -140,20 +192,20 @@ textarea:focus {
input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden'])::placeholder,
textarea::placeholder {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
}
[dir='rtl'],
:lang(fa),
.faText {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
font-weight: 400;
text-align: right;
text-align: start;
}
[dir='rtl']::placeholder,
:lang(fa)::placeholder,
.faText::placeholder {
font-family: var(--font-fa), var(--font-en);
font-family: var(--font-ui);
font-weight: 400;
}
packages/dashboard-core/src/types/auth.ts
+2
View File
@@ -18,6 +18,8 @@ export interface AuthUser {
email: string | null
firstName: string | null
lastName: string | null
firstNameEn: string | null
lastNameEn: string | null
cellVerifiedAt: string | null
roles: string[]
dashboard: DashboardType
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'