meshkee-app/dashboards
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add view traffic charts to business home and super-admin.

Browse Source 
Wire product, website, portfolio, and blog 30-day view charts to the analytics API and expose the new chart types in super-admin business settings.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-26 01:12:45 +03:30
co-authored by Cursor
parent 468bb87fcf
commit 202ac7d4bd
7 changed files with 188 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/business/src/components/DailyActivityChart.tsx
+34 -25
View File
@@ -25,6 +25,8 @@ interface DailyActivityChartProps {
load: (signal: AbortSignal) => Promise<DualDailyActivityResponse>
/** Day bars (default) or roll up into last 12 months. */
granularity?: 'day' | 'month'
/** Hide the secondary series (for single-metric view charts). */
showSecondary?: boolean
}
function formatDayLabel(dateKey: string, locale: string): string {
@@ -47,6 +49,7 @@ export function DailyActivityChart({
secondaryBarTitleKey,
load,
granularity = 'day',
showSecondary = true,
}: DailyActivityChartProps) {
const t = useT()
const { locale } = useLocale()
@@ -120,10 +123,12 @@ export function DailyActivityChart({
<span className={`${styles.legendDot} ${styles.tonePrimary}`} />
{t(primaryLegendKey, { count: primaryTotal })}
</span>
<span className={styles.legendItem}>
<span className={`${styles.legendDot} ${styles.toneAccent}`} />
{t(secondaryLegendKey, { count: secondaryTotal })}
</span>
{showSecondary ? (
<span className={styles.legendItem}>
<span className={`${styles.legendDot} ${styles.toneAccent}`} />
{t(secondaryLegendKey, { count: secondaryTotal })}
</span>
) : null}
</div>
</div>
@@ -159,17 +164,19 @@ export function DailyActivityChart({
count: item.primary,
})}
/>
<div
className={`${styles.bar} ${styles.barAccent} ${styles.barMonth}`}
style={{
height: Math.max(secondaryHeight, item.secondary > 0 ? 4 : 0),
}}
title={t(secondaryBarTitleKey, {
day: item.label,
month: item.label,
count: item.secondary,
})}
/>
{showSecondary ? (
<div
className={`${styles.bar} ${styles.barAccent} ${styles.barMonth}`}
style={{
height: Math.max(secondaryHeight, item.secondary > 0 ? 4 : 0),
}}
title={t(secondaryBarTitleKey, {
day: item.label,
month: item.label,
count: item.secondary,
})}
/>
) : null}
</div>
<span
className={styles.label}
@@ -196,16 +203,18 @@ export function DailyActivityChart({
style={{ height: Math.max(primaryHeight, item.count > 0 ? 4 : 0) }}
title={t(primaryBarTitleKey, { day: label, count: item.count })}
/>
<div
className={`${styles.bar} ${styles.barAccent}`}
style={{
height: Math.max(secondaryHeight, secondaryCount > 0 ? 4 : 0),
}}
title={t(secondaryBarTitleKey, {
day: label,
count: secondaryCount,
})}
/>
{showSecondary ? (
<div
className={`${styles.bar} ${styles.barAccent}`}
style={{
height: Math.max(secondaryHeight, secondaryCount > 0 ? 4 : 0),
}}
title={t(secondaryBarTitleKey, {
day: label,
count: secondaryCount,
})}
/>
) : null}
</div>
<span className={styles.label} lang="en" dir="ltr">
{label}
apps/business/src/components/HomeChartSlot.tsx
+82 -22
View File
@@ -4,36 +4,93 @@ import { ProductActivityChart } from './ProductActivityChart'
import {
getCustomersDailyActivity,
getOrdersDailyActivity,
getViewDailyActivity,
type WebsiteViewKind,
} from '../services/dailyActivityService'
import type { HomeChartId } from '../utils/businessModules'
import { useT } from '../i18n/useT'
import styles from './DailyActivityChart.module.css'
import type { BusinessMessageKey } from '../i18n/messages'
interface HomeChartSlotProps {
chartId: HomeChartId
}
function HomeChartPlaceholder({ chartId }: { chartId: HomeChartId }) {
const t = useT()
const titleKey =
chartId === 'blog_views_30d'
? 'home.chart.blogViews.title'
: 'home.chart.placeholder.title'
const subtitleKey =
chartId === 'blog_views_30d'
? 'home.chart.blogViews.subtitle'
: 'home.chart.placeholder.subtitle'
const VIEW_CHART_CONFIG: Record<
Extract<
HomeChartId,
'blog_views_30d' | 'product_views_30d' | 'website_views_30d' | 'portfolio_views_30d'
>,
{
kind: WebsiteViewKind
titleKey: BusinessMessageKey
subtitleKey: BusinessMessageKey
legendKey: BusinessMessageKey
loadingKey: BusinessMessageKey
errorKey: BusinessMessageKey
barKey: BusinessMessageKey
}
> = {
product_views_30d: {
kind: 'product',
titleKey: 'home.chart.productViews.title',
subtitleKey: 'home.chart.productViews.subtitle',
legendKey: 'home.chart.productViews.legend',
loadingKey: 'home.chart.productViews.loading',
errorKey: 'home.chart.productViews.error',
barKey: 'home.chart.productViews.bar',
},
website_views_30d: {
kind: 'website',
titleKey: 'home.chart.websiteViews.title',
subtitleKey: 'home.chart.websiteViews.subtitle',
legendKey: 'home.chart.websiteViews.legend',
loadingKey: 'home.chart.websiteViews.loading',
errorKey: 'home.chart.websiteViews.error',
barKey: 'home.chart.websiteViews.bar',
},
portfolio_views_30d: {
kind: 'portfolio',
titleKey: 'home.chart.portfolioViews.title',
subtitleKey: 'home.chart.portfolioViews.subtitle',
legendKey: 'home.chart.portfolioViews.legend',
loadingKey: 'home.chart.portfolioViews.loading',
errorKey: 'home.chart.portfolioViews.error',
barKey: 'home.chart.portfolioViews.bar',
},
blog_views_30d: {
kind: 'blog',
titleKey: 'home.chart.blogViews.title',
subtitleKey: 'home.chart.blogViews.subtitle',
legendKey: 'home.chart.blogViews.legend',
loadingKey: 'home.chart.blogViews.loading',
errorKey: 'home.chart.blogViews.error',
barKey: 'home.chart.blogViews.bar',
},
}
function ViewActivityChart({
chartId,
}: {
chartId: keyof typeof VIEW_CHART_CONFIG
}) {
const config = VIEW_CHART_CONFIG[chartId]
const load = useCallback(
(signal: AbortSignal) => getViewDailyActivity(config.kind, 30, signal),
[config.kind],
)
return (
<section className={styles.card} aria-label={t(titleKey)}>
<div className={styles.header}>
<div>
<h3 className={styles.title}>{t(titleKey)}</h3>
<p className={styles.subtitle}>{t(subtitleKey)}</p>
</div>
</div>
<p className={styles.status}>{t('home.chart.placeholder.comingSoon')}</p>
</section>
<DailyActivityChart
showSecondary={false}
titleKey={config.titleKey}
subtitleKey={config.subtitleKey}
primaryLegendKey={config.legendKey}
secondaryLegendKey={config.legendKey}
loadingKey={config.loadingKey}
errorKey={config.errorKey}
primaryBarTitleKey={config.barKey}
secondaryBarTitleKey={config.barKey}
load={load}
/>
)
}
@@ -81,8 +138,11 @@ export function HomeChartSlot({ chartId }: HomeChartSlotProps) {
)
case 'products_added_1y':
return <ProductActivityChart />
case 'product_views_30d':
case 'website_views_30d':
case 'portfolio_views_30d':
case 'blog_views_30d':
return <HomeChartPlaceholder chartId={chartId} />
return <ViewActivityChart chartId={chartId} />
default:
return null
}
apps/business/src/i18n/messages.ts
+44 -6
View File
@@ -270,9 +270,28 @@ const en = {
'home.chart.customersJoined.activeBar': '{month}: {count} active',
'home.chart.blogViews.title': 'Article views',
'home.chart.blogViews.subtitle': 'Blog article views in the last 30 days',
'home.chart.placeholder.title': 'Chart',
'home.chart.placeholder.subtitle': 'This chart will appear here once available.',
'home.chart.placeholder.comingSoon': 'Coming soon',
'home.chart.blogViews.legend': 'Views ({count})',
'home.chart.blogViews.loading': 'Loading chart...',
'home.chart.blogViews.error': 'Unable to load blog view activity.',
'home.chart.blogViews.bar': '{day}: {count} views',
'home.chart.productViews.title': 'Product views',
'home.chart.productViews.subtitle': 'Product page views in the last 30 days',
'home.chart.productViews.legend': 'Views ({count})',
'home.chart.productViews.loading': 'Loading chart...',
'home.chart.productViews.error': 'Unable to load product view activity.',
'home.chart.productViews.bar': '{day}: {count} views',
'home.chart.websiteViews.title': 'Website views',
'home.chart.websiteViews.subtitle': 'Storefront page views in the last 30 days',
'home.chart.websiteViews.legend': 'Views ({count})',
'home.chart.websiteViews.loading': 'Loading chart...',
'home.chart.websiteViews.error': 'Unable to load website view activity.',
'home.chart.websiteViews.bar': '{day}: {count} views',
'home.chart.portfolioViews.title': 'Portfolio views',
'home.chart.portfolioViews.subtitle': 'Portfolio page views in the last 30 days',
'home.chart.portfolioViews.legend': 'Views ({count})',
'home.chart.portfolioViews.loading': 'Loading chart...',
'home.chart.portfolioViews.error': 'Unable to load portfolio view activity.',
'home.chart.portfolioViews.bar': '{day}: {count} views',
'products.overview.subtitle': 'Manage your products, inventory and categories.',
'products.card.list.desc': 'View, edit and manage all your existing products.',
@@ -2510,9 +2529,28 @@ const fa: Record<MessageKey, string> = {
'home.chart.customersJoined.activeBar': '{month}: {count} فعال',
'home.chart.blogViews.title': 'بازدید مقالات',
'home.chart.blogViews.subtitle': 'بازدید مقالات در ۳۰ روز گذشته',
'home.chart.placeholder.title': 'نمودار',
'home.chart.placeholder.subtitle': 'این نمودار به‌زودی در دسترس خواهد بود.',
'home.chart.placeholder.comingSoon': 'به‌زودی',
'home.chart.blogViews.legend': 'بازدید ({count})',
'home.chart.blogViews.loading': 'در حال بارگذاری نمودار...',
'home.chart.blogViews.error': 'بارگذاری بازدید مقالات ممکن نشد.',
'home.chart.blogViews.bar': '{day}: {count} بازدید',
'home.chart.productViews.title': 'بازدید محصولات',
'home.chart.productViews.subtitle': 'بازدید صفحات محصول در ۳۰ روز گذشته',
'home.chart.productViews.legend': 'بازدید ({count})',
'home.chart.productViews.loading': 'در حال بارگذاری نمودار...',
'home.chart.productViews.error': 'بارگذاری بازدید محصولات ممکن نشد.',
'home.chart.productViews.bar': '{day}: {count} بازدید',
'home.chart.websiteViews.title': 'بازدید وب‌سایت',
'home.chart.websiteViews.subtitle': 'بازدید صفحات فروشگاه در ۳۰ روز گذشته',
'home.chart.websiteViews.legend': 'بازدید ({count})',
'home.chart.websiteViews.loading': 'در حال بارگذاری نمودار...',
'home.chart.websiteViews.error': 'بارگذاری بازدید وب‌سایت ممکن نشد.',
'home.chart.websiteViews.bar': '{day}: {count} بازدید',
'home.chart.portfolioViews.title': 'بازدید نمونه‌کارها',
'home.chart.portfolioViews.subtitle': 'بازدید صفحات نمونه‌کار در ۳۰ روز گذشته',
'home.chart.portfolioViews.legend': 'بازدید ({count})',
'home.chart.portfolioViews.loading': 'در حال بارگذاری نمودار...',
'home.chart.portfolioViews.error': 'بارگذاری بازدید نمونه‌کارها ممکن نشد.',
'home.chart.portfolioViews.bar': '{day}: {count} بازدید',
'products.overview.subtitle': 'محصولات، موجودی و دسته‌بندی‌ها را مدیریت کنید.',
'products.card.list.desc': 'همه محصولات موجود را ببینید، ویرایش و مدیریت کنید.',
apps/business/src/services/dailyActivityService.ts
+17
View File
@@ -39,3 +39,20 @@ export async function getCustomersDailyActivity(days = 30, signal?: AbortSignal)
{ auth: true, signal },
)
}
export type WebsiteViewKind = 'website' | 'product' | 'portfolio' | 'blog'
export async function getViewDailyActivity(
kind: WebsiteViewKind,
days = 30,
signal?: AbortSignal,
) {
const businessId = getActiveBusinessId()
if (!businessId) {
throw new Error('No active business selected. Please sign in again.')
}
return apiRequest<DualDailyActivityResponse>(
`/businesses/${businessId}/analytics/views/activity?kind=${kind}&days=${days}`,
{ auth: true, signal },
)
}
apps/business/src/utils/businessModules.ts
+3
View File
@@ -32,6 +32,9 @@ export const HOME_CHART_IDS = [
'customers_joined_1y',
'blog_views_30d',
'products_added_1y',
'product_views_30d',
'website_views_30d',
'portfolio_views_30d',
] as const
export type HomeChartId = (typeof HOME_CHART_IDS)[number]
apps/super-admin/src/utils/businessModules.ts
+7 -1
View File
@@ -56,6 +56,9 @@ export const HOME_CHART_IDS = [
'customers_joined_1y',
'blog_views_30d',
'products_added_1y',
'product_views_30d',
'website_views_30d',
'portfolio_views_30d',
] as const
export type HomeChartId = (typeof HOME_CHART_IDS)[number]
@@ -64,8 +67,11 @@ export const HOME_CHART_LABELS: Record<HomeChartId, string> = {
none: 'No chart',
orders_30d: 'Orders in past 30 days',
customers_joined_1y: 'Joined users in last year',
blog_views_30d: 'Blog visit in last month',
blog_views_30d: 'Blog visit in last 30 days',
products_added_1y: 'Added product in last year',
product_views_30d: 'Product visit in last 30 days',
website_views_30d: 'Website visit in last 30 days',
portfolio_views_30d: 'Portfolio visit in last 30 days',
}
/**
docs/PROJECT_CONTEXT.md
+1 -1
View File
@@ -276,7 +276,7 @@ Products accept optional `brandId` on create/update.
- `GET/PATCH /businesses/:businessId/settings` — `branding`, `dashboard`, `store`, `modules`, `website`
- `website.specialProductsSource`: `product` \| `store_item`. Unset → `store_item` if the store module is enabled, otherwise `product`.
- `modules.enabled`: optional modules — business: `products`, `store`, `portfolio`, `blog`, `warehouse`, `videos`, `finance`; 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.
- `modules.charts`: two home chart slots (`none`, `orders_30d`, `customers_joined_1y`, `blog_views_30d`, `products_added_1y`, `product_views_30d`, `website_views_30d`, `portfolio_views_30d`); `none` hides that slot; defaults orders + customers. View charts need `POST /tenants/{domain}/analytics/views` from the storefront.
- 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` + `specialProductsSource`