Add business modules column and selectable home charts.

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

apps/super-admin/src/pages/BusinessesPage.module.css

@@ -414,6 +414,94 @@
   padding-right: 8px;
 }
 
+.thModules,
+.tdModules {
+  width: 1%;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.tdModules {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.modulesCountBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  min-height: var(--field-height);
+  padding: var(--field-padding-y) 12px;
+  font-size: var(--field-font-size);
+  font-weight: 600;
+  font-family: var(--font-ui);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  background: rgba(255, 255, 255, 0.7);
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+}
+
+.modulesCountBtn:hover {
+  border-color: var(--primary);
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
+}
+
+.modulesCountBtn:focus-visible {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
+}
+
+.modulesChecks {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.modulesCharts {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 16px;
+  padding-top: 14px;
+  border-top: 1px solid rgba(148, 163, 184, 0.28);
+}
+
+.modulesCharts .field select {
+  appearance: none;
+  -webkit-appearance: none;
+  min-height: var(--field-height);
+  padding: var(--field-padding-y) var(--select-padding-end) var(--field-padding-y)
+    var(--field-padding-x);
+  font-size: var(--field-font-size);
+  font-family: var(--font-ui);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  background-color: rgba(255, 255, 255, 0.7);
+  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);
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.modulesCharts .field select:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
+}
+
+.modulesCharts .field select:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .localeSelect {
   min-height: var(--field-height);
   padding: var(--field-padding-y) var(--select-padding-end) var(--field-padding-y)

apps/super-admin/src/pages/BusinessesPage.tsx

@@ -55,9 +55,22 @@ import {
   getBusinessSettings,
   updateBusinessBranding,
   updateBusinessDefaultLocale,
+  updateBusinessModules,
   updateBusinessPrimaryColor,
   type DashboardLocale,
 } from '../services/businessSettingsService'
+import {
+  BUSINESS_MODULE_IDS,
+  BUSINESS_MODULE_LABELS,
+  DEFAULT_ENABLED_BUSINESS_MODULES,
+  DEFAULT_HOME_CHARTS,
+  HOME_CHART_IDS,
+  HOME_CHART_LABELS,
+  normalizeEnabledBusinessModules,
+  normalizeHomeCharts,
+  type BusinessModuleId,
+  type HomeChartId,
+} from '../utils/businessModules'
 import { flattenBusinessCategories } from '../utils/categories'
 import { Pagination } from '@meshkee/dashboard-ui'
 import pageStyles from '../components/PageContent.module.css'
@@ -70,6 +83,15 @@ function normalizeDefaultLocale(value: unknown): DashboardLocale {
   return value === 'en' || value === 'fa' ? value : DEFAULT_LOCALE
 }
 
+function emptyModuleSelection(
+  enabled: BusinessModuleId[] = DEFAULT_ENABLED_BUSINESS_MODULES,
+): Record<BusinessModuleId, boolean> {
+  const selected = new Set(enabled)
+  return Object.fromEntries(
+    BUSINESS_MODULE_IDS.map((id) => [id, selected.has(id)]),
+  ) as Record<BusinessModuleId, boolean>
+}
+
 function formatDate(value: string) {
   const d = new Date(value)
   if (Number.isNaN(d.getTime())) return value
@@ -227,6 +249,17 @@ export function BusinessesPage() {
   const [savingColorId, setSavingColorId] = useState<string | null>(null)
   const [savingLocaleId, setSavingLocaleId] = useState<string | null>(null)
 
+  const [modulesOpen, setModulesOpen] = useState(false)
+  const [modulesBusiness, setModulesBusiness] = useState<BusinessListItem | null>(null)
+  const [modulesSelected, setModulesSelected] = useState<Record<BusinessModuleId, boolean>>(
+    () => emptyModuleSelection(),
+  )
+  const [modulesCharts, setModulesCharts] = useState<[HomeChartId, HomeChartId]>([
+    ...DEFAULT_HOME_CHARTS,
+  ])
+  const [modulesSubmitting, setModulesSubmitting] = useState(false)
+  const [modulesError, setModulesError] = useState('')
+
   const [migrateOpen, setMigrateOpen] = useState(false)
   const [migrateBusiness, setMigrateBusiness] = useState<BusinessListItem | null>(null)
   const [migrateOldId, setMigrateOldId] = useState('')
@@ -465,6 +498,62 @@ export function BusinessesPage() {
     }
   }
 
+  function openModules(b: BusinessListItem) {
+    setModulesBusiness(b)
+    setModulesSelected(
+      emptyModuleSelection(
+        normalizeEnabledBusinessModules(b.enabledModules ?? DEFAULT_ENABLED_BUSINESS_MODULES),
+      ),
+    )
+    setModulesCharts(normalizeHomeCharts(b.homeCharts ?? DEFAULT_HOME_CHARTS))
+    setModulesError('')
+    setModulesOpen(true)
+  }
+
+  function closeModules() {
+    if (modulesSubmitting) return
+    setModulesOpen(false)
+    setModulesBusiness(null)
+    setModulesError('')
+  }
+
+  async function submitModules() {
+    if (!modulesBusiness) return
+    const enabled = BUSINESS_MODULE_IDS.filter((id) => modulesSelected[id])
+    const charts = normalizeHomeCharts(modulesCharts)
+    setModulesSubmitting(true)
+    setModulesError('')
+    try {
+      await updateBusinessModules(modulesBusiness.id, enabled, charts)
+      setData((prev) =>
+        prev
+          ? {
+              ...prev,
+              items: prev.items.map((item) =>
+                item.id === modulesBusiness.id
+                  ? {
+                      ...item,
+                      enabledModules: enabled,
+                      moduleCount: enabled.length,
+                      homeCharts: charts,
+                    }
+                  : item,
+              ),
+            }
+          : prev,
+      )
+      showToast('Modules updated.', 'success')
+      setModulesOpen(false)
+      setModulesBusiness(null)
+    } catch (err) {
+      setModulesError(
+        err instanceof ApiError ? err.message : 'Unable to update modules.',
+      )
+    } finally {
+      setModulesSubmitting(false)
+    }
+  }
+
   async function submitEdit() {
     if (!editBusiness) return
     setEditSubmitting(true)
@@ -903,13 +992,14 @@ export function BusinessesPage() {
                   <th className={styles.th}>Owner</th>
                   <th className={`${styles.th} ${styles.thTheme}`}>Theme</th>
                   <th className={`${styles.th} ${styles.thLocale}`}>Lang</th>
+                  <th className={`${styles.th} ${styles.thModules}`}>Modules</th>
                   <th className={`${styles.th} ${styles.thActions}`}>Actions</th>
                 </tr>
               </thead>
               <tbody>
                 {loading && (
                   <tr>
-                    <td className={styles.td} colSpan={7}>
+                    <td className={styles.td} colSpan={8}>
                       Loading...
                     </td>
                   </tr>
@@ -917,7 +1007,7 @@ export function BusinessesPage() {
 
                 {!loading && data?.items?.length === 0 && (
                   <tr>
-                    <td className={styles.td} colSpan={7}>
+                    <td className={styles.td} colSpan={8}>
                       No results found.
                     </td>
                   </tr>
@@ -992,6 +1082,21 @@ export function BusinessesPage() {
                           <option value="en">EN</option>
                         </select>
                       </td>
+                      <td className={`${styles.td} ${styles.tdModules}`}>
+                        <button
+                          type="button"
+                          className={styles.modulesCountBtn}
+                          onClick={() => openModules(b)}
+                          title="Edit modules"
+                          aria-label={`Edit modules for ${b.name}`}
+                        >
+                          {typeof b.moduleCount === 'number'
+                            ? b.moduleCount
+                            : normalizeEnabledBusinessModules(
+                                b.enabledModules ?? DEFAULT_ENABLED_BUSINESS_MODULES,
+                              ).length}
+                        </button>
+                      </td>
                       <td className={`${styles.td} ${styles.tdActions}`}>
                         <div className={styles.rowActions}>
                           <span className={styles.toggleInActions}>
@@ -1212,6 +1317,104 @@ export function BusinessesPage() {
         </div>
       </Modal>
 
+      <Modal
+        open={modulesOpen}
+        title={
+          modulesBusiness
+            ? `Modules — ${modulesBusiness.name}`
+            : 'Modules'
+        }
+        onClose={closeModules}
+      >
+        {modulesError ? (
+          <p className={styles.alertError} role="alert">
+            {modulesError}
+          </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.
+        </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>
+        <div className={styles.modulesCharts}>
+          <p className={styles.entityGroupLabel}>Home charts</p>
+          <div className={styles.field}>
+            <label htmlFor="modules-chart-1">Chart 1</label>
+            <select
+              id="modules-chart-1"
+              value={modulesCharts[0]}
+              disabled={modulesSubmitting}
+              onChange={(e) => {
+                const value = e.target.value
+                if (!HOME_CHART_IDS.includes(value as HomeChartId)) return
+                setModulesCharts([value as HomeChartId, modulesCharts[1]])
+              }}
+            >
+              {HOME_CHART_IDS.map((id) => (
+                <option key={id} value={id}>
+                  {HOME_CHART_LABELS[id]}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className={styles.field}>
+            <label htmlFor="modules-chart-2">Chart 2</label>
+            <select
+              id="modules-chart-2"
+              value={modulesCharts[1]}
+              disabled={modulesSubmitting}
+              onChange={(e) => {
+                const value = e.target.value
+                if (!HOME_CHART_IDS.includes(value as HomeChartId)) return
+                setModulesCharts([modulesCharts[0], value as HomeChartId])
+              }}
+            >
+              {HOME_CHART_IDS.map((id) => (
+                <option key={id} value={id}>
+                  {HOME_CHART_LABELS[id]}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <div style={{ height: 12 }} />
+        <div className={styles.actionsRow}>
+          <button
+            type="button"
+            className={`${styles.btn} ${styles.btnGhost}`}
+            onClick={closeModules}
+            disabled={modulesSubmitting}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className={`${styles.btn} ${styles.btnPrimary}`}
+            onClick={() => void submitModules()}
+            disabled={modulesSubmitting}
+          >
+            {modulesSubmitting ? 'Saving…' : 'Save modules'}
+          </button>
+        </div>
+      </Modal>
+
       <Modal
         open={migrateOpen}
         title={

apps/super-admin/src/services/businessSettingsService.ts

@@ -1,5 +1,6 @@
 import { apiRequest } from '../lib/api'
 import type { BusinessPrimaryColorId } from '../utils/businessPrimaryColors'
+import type { BusinessModuleId, HomeChartId } from '../utils/businessModules'
 
 export type DashboardLocale = 'en' | 'fa'
 
@@ -8,6 +9,11 @@ export interface BrandingSettings {
   defaultLocale: DashboardLocale
 }
 
+export interface ModulesSettings {
+  enabled: BusinessModuleId[]
+  charts: [HomeChartId, HomeChartId]
+}
+
 export interface BusinessSettings {
   branding: BrandingSettings
   dashboard: {
@@ -18,6 +24,7 @@ export interface BusinessSettings {
     onlineSellEnabled: boolean
     orderProcessSteps: Array<{ id: string; label: string; color: string }>
   }
+  modules: ModulesSettings
 }
 
 export interface BusinessSettingsResponse {
@@ -68,3 +75,17 @@ export async function updateBusinessBranding(
     body: { branding },
   })
 }
+
+export async function updateBusinessModules(
+  businessId: string,
+  enabled: BusinessModuleId[],
+  charts: [HomeChartId, HomeChartId],
+) {
+  return apiRequest<BusinessSettingsResponse>(`/businesses/${businessId}/settings`, {
+    method: 'PATCH',
+    auth: true,
+    body: {
+      modules: { enabled, charts },
+    },
+  })
+}

apps/super-admin/src/types/business.ts

@@ -1,4 +1,5 @@
 import type { BusinessPrimaryColorId } from '../utils/businessPrimaryColors'
+import type { BusinessModuleId, HomeChartId } from '../utils/businessModules'
 import type { DashboardLocale } from '../services/businessSettingsService'
 
 export interface BusinessOwnerInfo {
@@ -24,6 +25,9 @@ export interface BusinessListItem {
   isActive: boolean
   primaryColor: BusinessPrimaryColorId
   defaultLocale: DashboardLocale
+  enabledModules: BusinessModuleId[]
+  moduleCount: number
+  homeCharts: [HomeChartId, HomeChartId]
   oldBusinessId: string | null
 }
 

apps/super-admin/src/utils/businessModules.ts

@@ -0,0 +1,87 @@
+/** Optional CMS modules a business can have. Always-on areas are not listed. */
+export const BUSINESS_MODULE_IDS = [
+  'products',
+  'store',
+  'portfolio',
+  'blog',
+  'warehouse',
+  'videos',
+] as const
+
+export type BusinessModuleId = (typeof BUSINESS_MODULE_IDS)[number]
+
+export const BUSINESS_MODULE_LABELS: Record<BusinessModuleId, string> = {
+  products: 'Products',
+  store: 'Store',
+  portfolio: 'Portfolio',
+  blog: 'Blog',
+  warehouse: 'Warehouse',
+  videos: 'Videos',
+}
+
+/** Home dashboard chart slots (super-admin selectable). */
+export const HOME_CHART_IDS = [
+  'none',
+  'orders_30d',
+  'customers_joined_1y',
+  'blog_views_30d',
+  'products_added_1y',
+] as const
+
+export type HomeChartId = (typeof HOME_CHART_IDS)[number]
+
+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',
+  products_added_1y: 'Added product in last year',
+}
+
+/** Existing tenants without saved modules keep every module enabled. */
+export const DEFAULT_ENABLED_BUSINESS_MODULES: BusinessModuleId[] = [
+  ...BUSINESS_MODULE_IDS,
+]
+
+export const DEFAULT_HOME_CHARTS: [HomeChartId, HomeChartId] = [
+  'orders_30d',
+  'customers_joined_1y',
+]
+
+const MODULE_ID_SET = new Set<string>(BUSINESS_MODULE_IDS)
+const HOME_CHART_ID_SET = new Set<string>(HOME_CHART_IDS)
+
+export function isBusinessModuleId(value: unknown): value is BusinessModuleId {
+  return typeof value === 'string' && MODULE_ID_SET.has(value)
+}
+
+export function isHomeChartId(value: unknown): value is HomeChartId {
+  return typeof value === 'string' && HOME_CHART_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 normalizeHomeCharts(value: unknown): [HomeChartId, HomeChartId] {
+  if (!Array.isArray(value)) {
+    return [...DEFAULT_HOME_CHARTS]
+  }
+
+  const first = isHomeChartId(value[0]) ? value[0] : DEFAULT_HOME_CHARTS[0]
+  const second = isHomeChartId(value[1]) ? value[1] : DEFAULT_HOME_CHARTS[1]
+  return [first, second]
+}
+
+export function isActiveHomeChart(value: HomeChartId): boolean {
+  return value !== 'none'
+}