Add business modules column and selectable home charts.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { CalendarDays } from 'lucide-react'
 import {
   ShoppingBag,
@@ -11,7 +11,7 @@ import {
 import { useLocale } from '@meshkee/dashboard-ui'
 import { useAuth } from '../context/AuthContext'
 import { SectionCard } from '../components/SectionCard'
-import { DailyActivityChart } from '../components/DailyActivityChart'
+import { HomeChartSlot } from '../components/HomeChartSlot'
 import { useT } from '../i18n/useT'
 import type { BusinessMessageKey } from '../i18n/messages'
 import { listProducts } from '../services/productService'
@@ -19,10 +19,12 @@ import { listStoreItems } from '../services/storeItemService'
 import { listCustomers } from '../services/customerService'
 import { listBlogs } from '../services/blogService'
 import { listPortfolios } from '../services/portfolioService'
+import { useTenantBranding } from '../context/TenantBrandingContext'
 import {
-  getCustomersDailyActivity,
-  getOrdersDailyActivity,
-} from '../services/dailyActivityService'
+  hasBusinessModule,
+  isActiveHomeChart,
+  type BusinessModuleId,
+} from '../utils/businessModules'
 import styles from '../components/PageContent.module.css'
 
 type CountKey = 'products' | 'store' | 'customers' | 'blog' | 'portfolios'
@@ -35,6 +37,8 @@ const sections: {
   countLabelKey?: BusinessMessageKey
   href: string
   countKey?: CountKey
+  /** When set, card is shown only if this optional module is enabled. */
+  moduleId?: BusinessModuleId
 }[] = [
   {
     icon: ShoppingBag,
@@ -44,6 +48,7 @@ const sections: {
     countLabelKey: 'home.card.products.count',
     href: '/products',
     countKey: 'products',
+    moduleId: 'products',
   },
   {
     icon: Store,
@@ -53,6 +58,7 @@ const sections: {
     countLabelKey: 'home.card.store.count',
     href: '/store',
     countKey: 'store',
+    moduleId: 'store',
   },
   {
     icon: Users,
@@ -71,6 +77,7 @@ const sections: {
     countLabelKey: 'home.card.blog.count',
     href: '/blog',
     countKey: 'blog',
+    moduleId: 'blog',
   },
   {
     icon: Briefcase,
@@ -80,6 +87,7 @@ const sections: {
     countLabelKey: 'home.card.portfolios.count',
     href: '/portfolios',
     countKey: 'portfolios',
+    moduleId: 'portfolio',
   },
   {
     icon: Globe,
@@ -113,6 +121,7 @@ async function loadSectionCounts(signal: AbortSignal): Promise<SectionCounts> {
 export function HomePage() {
   const { user } = useAuth()
   const { locale } = useLocale()
+  const { enabledModules, homeCharts } = useTenantBranding()
   const t = useT()
   const [counts, setCounts] = useState<SectionCounts>({})
 
@@ -124,14 +133,11 @@ export function HomePage() {
     return () => controller.abort()
   }, [])
 
-  const loadOrdersActivity = useCallback(
-    (signal: AbortSignal) => getOrdersDailyActivity(30, signal),
-    [],
-  )
-  const loadCustomersActivity = useCallback(
-    (signal: AbortSignal) => getCustomersDailyActivity(30, signal),
-    [],
+  const visibleSections = sections.filter(
+    (section) =>
+      !section.moduleId || hasBusinessModule(enabledModules, section.moduleId),
   )
+  const visibleCharts = homeCharts.filter(isActiveHomeChart)
 
   const firstName =
     (locale === 'en'
@@ -160,7 +166,7 @@ export function HomePage() {
       </div>
 
       <div className={styles.gridHome}>
-        {sections.map((section) => (
+        {visibleSections.map((section) => (
           <SectionCard
             key={section.href}
             icon={section.icon}
@@ -174,34 +180,15 @@ export function HomePage() {
         ))}
       </div>
 
-      <div className={styles.grid12}>
-        <div className={styles.col6}>
-          <DailyActivityChart
-            titleKey="home.chart.orders.title"
-            subtitleKey="home.chart.orders.subtitle"
-            primaryLegendKey="home.chart.orders.legend"
-            secondaryLegendKey="home.chart.orders.cartLegend"
-            loadingKey="home.chart.orders.loading"
-            errorKey="home.chart.orders.error"
-            primaryBarTitleKey="home.chart.orders.bar"
-            secondaryBarTitleKey="home.chart.orders.cartBar"
-            load={loadOrdersActivity}
-          />
+      {visibleCharts.length > 0 ? (
+        <div className={styles.grid12}>
+          {visibleCharts.map((chartId, index) => (
+            <div key={`${chartId}-${index}`} className={styles.col6}>
+              <HomeChartSlot chartId={chartId} />
+            </div>
+          ))}
         </div>
-        <div className={styles.col6}>
-          <DailyActivityChart
-            titleKey="home.chart.customers.title"
-            subtitleKey="home.chart.customers.subtitle"
-            primaryLegendKey="home.chart.customers.legend"
-            secondaryLegendKey="home.chart.customers.activeLegend"
-            loadingKey="home.chart.customers.loading"
-            errorKey="home.chart.customers.error"
-            primaryBarTitleKey="home.chart.customers.bar"
-            secondaryBarTitleKey="home.chart.customers.activeBar"
-            load={loadCustomersActivity}
-          />
-        </div>
-      </div>
+      ) : null}
     </main>
   )
 }