Project

General

Profile

Edit Copy Actions

Feature #11214

open

Implement Dynamic Company Primary Brand Color Theming across Admin Portal, Storefront, and Export Engines

Added by Ajit A 5 days ago. Updated 4 days ago.

Status:
Resolved
Priority:
Normal
Assignee:
Start date:
10/01/2026
Due date:
% Done:

100%

Estimated time:
4:00 h
Spent time:

Add

Subtasks


Add

Related issues

Updated by Ajit A 5 days ago

Replaced static and hardcoded gold/accent colors (#CAA869, #9F7E3A, #70C000, etc.) with a dynamic, real-time company theme engine driven by the active CompanyProfile configuration in the database. When the company primary color is changed in settings, the entire system (Admin panel, Storefront, Toasts, Stats Cards, Charts, Invoices, and Excel/PDF report exports) updates consistently.

Repository 1: Noxa-Jewellery-be (NestJS Backend)
Dynamic Excel & PDF Export Utility (

export.utility.ts
):
Implemented getCompanyPrimaryColor() to retrieve the live company primary color from MongoDB (companyprofiles) with fallback support.
Updated generateExcel to apply dynamic ARGB fills to table header rows.
Updated generatePDF to fill report banners and table headers using the active brand color.
Invoice Service (

invoice.service.ts
):
Bound invoice PDF header banners, title typography, item table underlines, and payment summary borders to profile.primaryColor.
Repository 2: Noxa-Jewellery-fe (Admin Frontend)
Admin Brand Theme Engine (

AdminBrandThemeProvider.tsx
,

colorUtils.ts
):
Created dynamic palette generator computing primary, dark, light, RGB, shadow, and gradient tokens, injecting them into :root CSS variables.
Created getExportBrandColors() helper for client-side export color formatting.
Company Profile Settings (

CompanyProfilePage.tsx
):
Enhanced color picker & palette selection UI with live preview and immediate theme synchronization upon saving.
Toast Notifications & Alerts (

Toast.tsx
,

common.tsx
):
Updated notification cards, success badges, and progress borders to style with brand primary tokens.
Dashboard & Stats Overview (

StatsOverview.tsx
,

DashboardCards.tsx
,

DashboardCharts.tsx
):
Bound KPI cards, progress bars, chart fills, date range filters, and active stats card backgrounds to the brand theme.
Enforced crisp white icon styling for all active stats overview cards.
Product & Order Management Modules:
Standardized ProductsList, ProductCategoriesList, SubCategoriesList, CreateProduct, OrdersList, ReviewsList, and DeliveryCharges header titles, + Create action buttons, switches, input focus rings, and client-side Excel/PDF exporters.
Repository 3: Noxa_E_Comm_Fe (Storefront Frontend)
Brand Theme Provider (

BrandThemeProvider.tsx
,

tailwind.config.ts
):
Configured Tailwind brand-primary theme tokens mapped to CSS variables with runtime palette calculation.
Storefront Components & Pages:
Applied dynamic branding to the Header, Navigation, Product Cards, Product Details, Virtual Try-On, Cart, Checkout, Blog Hero, Search Modal, and Pagination.

Actions #2

Updated by Ajit A 5 days ago

  • Target version set to Sprint (09/28/2026 - 10/02/2026)
  • % Done changed from 0 to 70
Actions #3

Updated by Ajit A 4 days ago

  • Status changed from New to Resolved
  • % Done changed from 70 to 100
Edit Copy Actions

Also available in: Atom PDF