@nuskin/react-mysite-elements 1.4.3 → 1.5.0-comx-2229.1

package/README.md

@@ -123,6 +123,202 @@ The main hero component for Mysite pages with advanced scroll behavior and respo
 [];
 ```
 
+### Shopping Dashboard Suite
+
+The Shopping Dashboard provides a complete analytics experience with overview widgets,
+full-detail views, and stateful in-page navigation.
+
+#### Highlights
+
+- Dashboard overview with stats cards and 4 widgets (Top Products, Sign-ups, Conversion Rate, Top Categories)
+- Full views for each widget with filtering, sorting, and pagination
+- History-state navigation between dashboard and full views (back/forward/refresh aware)
+- Loading skeletons and explicit empty/error states
+- Translation-ready text (`getTranslation` + key catalog)
+- Accessibility and test automation support with stable `data-testid` selectors
+- Responsive mobile/desktop rendering with performance-focused optimizations
+
+#### Main Exports
+
+- `ShoppingDashboard`
+- `MysiteDashboardWithNavigation`
+- `ProductOfferDashboard`
+- `PoDashboardWithNavigation`
+- `ProductsFullView`
+- `SignupsFullView`
+- `ConversionRateFullView`
+- `CategoriesFullView`
+- `TopPerformingOffersFullView`
+- `StatsCard`, `DashboardHeader`, `WidgetMenu`
+- `TopSellingProductsList`, `SignupsChart`, `ConversionRateChart`, `TopCategoriesPieChart`, `TopPerformingOffersPieChart`
+
+#### Quick Usage
+
+```tsx
+import React, { useState } from 'react';
+import {
+    MysiteDashboardWithNavigation,
+    mockStats,
+    mockTopProducts,
+    mockConversionData,
+    mockSignupData,
+    mockCategories,
+    mockOrders,
+    mockSignupDetails,
+} from '@nuskin/react-mysite-elements';
+
+export default function DashboardExample() {
+    const [dateRange, setDateRange] = useState('last30days');
+    const [market, setMarket] = useState('all');
+
+    return (
+        <MysiteDashboardWithNavigation
+            stats={mockStats}
+            topProducts={mockTopProducts}
+            conversionData={mockConversionData}
+            signupData={mockSignupData}
+            categories={mockCategories}
+            orders={mockOrders}
+            signups={mockSignupDetails}
+            dateRange={dateRange}
+            market={market}
+            onDateRangeChange={setDateRange}
+            onMarketChange={setMarket}
+        />
+    );
+}
+```
+
+#### Translations (i18n)
+
+The dashboard ships built-in **English** fallback strings for every label (see the
+`ShoppingDashboardTranslationKeys` catalog). To localize, pass an optional
+`translate` resolver — `(key, fallback) => string` — into the top-level component.
+Every internal `getTranslation` call routes through it; any key the resolver can't
+localize (or an empty/throwing result) safely falls back to the built-in English text,
+so partial catalogs are fine. Omit the prop to keep the current English-only behavior.
+
+```tsx
+import { MysiteDashboardWithNavigation } from '@nuskin/react-mysite-elements';
+// e.g. a ContentStack-backed resolver in the host app
+import { translate } from '@/utils/translation';
+
+<MysiteDashboardWithNavigation
+    translate={translate} // (key: string, fallback: string) => string
+    stats={stats}
+    /* …other props… */
+/>;
+```
+
+A declarative `TranslationProvider` and a `useTranslation()` hook are also exported for
+advanced/standalone usage:
+
+```tsx
+import { TranslationProvider } from '@nuskin/react-mysite-elements';
+
+<TranslationProvider translate={translate}>{/* any dashboard components */}</TranslationProvider>;
+```
+
+Translation keys follow the `shoppingDashboard.*` namespace; the host maps these to its
+locale resources.
+
+#### Storybook
+
+Shopping Dashboard stories are available under the `ShoppingDashboard` group, including
+loading, error, navigation, and full-view scenarios.
+
+#### Product Offer Dashboard
+
+```tsx
+import {
+    PoDashboardWithNavigation,
+    mockProductOfferStats,
+    mockTopProducts,
+    mockConversionData,
+    mockTopOffers,
+} from '@nuskin/react-mysite-elements';
+
+export default function ProductOfferDashboardExample() {
+    return (
+        <PoDashboardWithNavigation
+            stats={mockProductOfferStats}
+            topProducts={mockTopProducts}
+            conversionData={mockConversionData}
+            topOffers={mockTopOffers}
+        />
+    );
+}
+```
+
+#### Dashboard Architecture
+
+The dashboard is a **presentational (dumb) component library**. It renders whatever
+data the host application passes in and owns none of the data fetching. Hosts
+(`Mysite-Admin`, `Personal-offer-mfe`) are responsible for calling the analytics APIs,
+adapting the raw responses into the view models below, and passing them in as props.
+
+```
+┌──────────────────────── Host application (Mysite-Admin / PO-MFE) ───────────────────────┐
+│  API call  ──▶  adapters (adaptDashboardResponse / drilldownAdapters)  ──▶  view models  │
+└───────────────────────────────────────────┬─────────────────────────────────────────────┘
+                                             │ props (stats, topProducts, categories, …)
+                                             ▼
+        ┌──────────────── *DashboardWithNavigation (stateful wrapper) ────────────────┐
+        │  Owns view state + history-state navigation (overview ⇄ full views)         │
+        │                                                                             │
+        │   ┌── Overview ──────────────┐         ┌── Full views ───────────────────┐  │
+        │   │ StatsCard × n            │         │ ProductsFullView                 │  │
+        │   │ TopSellingProductsList   │  ⇄      │ CategoriesFullView               │  │
+        │   │ ConversionRateChart      │         │ ConversionRateFullView           │  │
+        │   │ TopCategoriesPieChart    │         │ TopPerformingOffersFullView …    │  │
+        │   └──────────────────────────┘         └──────────────────────────────────┘  │
+        │                                                                             │
+        │   shared/ primitives: DataTable · Pagination · FilterBar · PageHeader ·     │
+        │                       WidgetMenu · LoadingSkeletons                         │
+        │   utils/: dataUtils (formatMoney, usePaginatedItems) · trendUtils ·         │
+        │           marketOptions · dateFormat                                        │
+        └──────────────────────────────────────────────────────────────────────────────┘
+```
+
+##### Layers
+
+| Layer             | Location                                                                                                              | Responsibility                                                                   |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+| Stateful wrapper  | `MysiteDashboardWithNavigation`, `PoDashboardWithNavigation`                                                          | View selection, history-state (back/forward/refresh) navigation, prop routing    |
+| Overview screens  | `ShoppingDashboard`, `ProductOfferDashboard`                                                                          | Compose stats cards + widgets for the landing view                               |
+| Widgets           | `shared/TopProducts`, `shared/TopCategories`, `shared/ConversionRate`, `shared/Signups`, `shared/TopPerformingOffers` | Summarized charts/lists shown on the overview                                    |
+| Full views        | `*FullView.tsx` in each `shared/*` folder                                                                             | Detailed tables/charts with filtering, sorting, and pagination                   |
+| Shared primitives | `shared/` (`DataTable`, `Pagination`, `FilterBar`, `PageHeader`, `WidgetMenu`, `LoadingSkeletons`)                    | Reusable building blocks across every screen                                     |
+| Utilities         | `utils/`                                                                                                              | `formatMoney`, `usePaginatedItems`, trend parsing, market/date helpers           |
+| Types             | `types.d.ts`, `types/`                                                                                                | Shared view-model contracts (`TopProduct`, `CategoryRevenue`, `OrderHistory`, …) |
+| Translations      | `TranslationContext.tsx`, `TranslationKeys/`                                                                          | `getTranslation` catalog + optional host `translate` resolver                    |
+
+##### Navigation model
+
+`*DashboardWithNavigation` keeps the active view in local state and mirrors it into
+`window.history` state, so browser **back / forward / refresh** move between the overview
+and a full view without a hard reload. Filter, sort, and page selections live in the
+component that owns the view and reset appropriately when the underlying data changes.
+
+##### Currency formatting
+
+Monetary values are formatted **inside the library** so charts, totals, and sorting keep
+working with numeric revenue while still displaying the correct symbol. Each data item
+carries an optional `currencyCode` (ISO code, e.g. `USD`, `EUR`) that the host adapters
+stamp from the API `currency_code` field. Rendering goes through the `formatMoney` helper:
+
+```ts
+formatMoney(value, currencyCode?, locale = 'en-US', fractionDigits?)
+```
+
+- When `currencyCode` is present it uses `Intl.NumberFormat` (code → symbol) with natural
+  decimals (`0`–`2`); pass `fractionDigits` to force fixed decimals (order totals use `2`).
+- When `currencyCode` is missing or invalid it falls back to a `$` prefix, so existing
+  behavior is preserved.
+
+Hosts should populate `currencyCode` on every money-bearing item (products, categories,
+offers, order rows). See `HOST_APP_API_RESPONSE.md` for the expected API payload shape.
+
 ## ✨ Advanced Features
 
 ### Intelligent Scroll Behavior
@@ -250,6 +446,36 @@ The component automatically detects and integrates with Nu Skin's external heade
 4. Push to the branch (`git push origin feature/amazing-feature`)
 5. Open a Pull Request
 
+### Constitution Compliance (Required)
+
+All UI contributions must follow the repository constitution in
+`.specify/memory/constitution.md`.
+
+Core non-negotiable rules:
+
+- No inline CSS in production components (`style={{}}`, inline `sx`, runtime `.style` mutation)
+- Styled component definitions must live in dedicated `*.styled.tsx` files, not inside component files
+- No hardcoded user-visible strings in component code (use translation keys)
+- Accessibility-first implementation (ADA/WCAG aligned)
+- Mobile and desktop viewport validation for changed flows
+- Stable `data-testid` selectors for critical interactions
+
+PR validation checklist:
+
+- [ ] UI styles are in stylesheet/styled-component files only
+- [ ] Styled components are defined in `*.styled.tsx` files, not inline in component files
+- [ ] All user-facing text is sourced from translation files
+- [ ] Keyboard and semantic accessibility checks were completed
+- [ ] Mobile and desktop behavior was validated
+- [ ] Critical interactive elements include `data-testid`
+
+Recommended verification commands:
+
+```bash
+npx jest --testPathPattern="shopping-dashboard" --no-coverage
+npx tsc --noEmit --project tsconfig.json
+```
+
 ### Commit Convention
 
 We use [Conventional Commits](https://www.conventionalcommits.org/) for semantic versioning:

package/dist/common/carousel/ProductTabCarousel.d.ts

@@ -34,7 +34,7 @@ interface ProductTabCarouselProps {
     readonly emptyProductMessage?: string;
     readonly showCustomCategory?: boolean;
     readonly productsCountLabel?: string;
-    readonly getCategoryId: (categoryId: string) => Promise<Category[]>;
+    readonly getCategoryId?: (categoryId: string) => Promise<Category[]>;
     readonly history?: {
         push: (path: string) => void;
     };

package/dist/common/icon/icons/SocialMediaIcons.styled.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    brandColor: string;
+}, {}, {}>;

package/dist/common/index.d.ts

@@ -2,3 +2,4 @@ export * from './card';
 export * from './carousel';
 export * from './headers';
 export * from './Nav-Category-Navigation';
+export * from './shopping-dashboard';

package/dist/common/shopping-dashboard/MysiteDashboardWithNavigation.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { TranslateFn } from './TranslationKeys/translationResolver';
+import type { DashboardStats, TopProduct, ConversionDataPoint, SignupDataPoint, CategoryRevenue, OrderHistory, SignupDetail, DateRangeOption, MarketOption, MarketFilterOption, ProductSortOption, SignupViewOption, ConversionFilterOption, CategorySortOption, FullViewWidgetType } from './types.d';
+export type MysiteDashboardView = 'dashboard' | FullViewWidgetType;
+export interface MysiteDashboardHistoryLocation {
+    readonly pathname?: string;
+    readonly search?: string;
+    readonly hash?: string;
+    readonly state?: unknown;
+}
+export interface MysiteDashboardHistoryAdapter {
+    readonly location?: MysiteDashboardHistoryLocation;
+    push(location: MysiteDashboardHistoryLocation): void;
+    replace(location: MysiteDashboardHistoryLocation): void;
+    goBack(): void;
+    listen(listener: (location: MysiteDashboardHistoryLocation, action: string) => void): () => void;
+}
+export interface MysiteDashboardWithNavigationProps {
+    readonly stats?: DashboardStats | null;
+    readonly topProducts?: TopProduct[];
+    readonly conversionData?: ConversionDataPoint[];
+    readonly signupData?: SignupDataPoint[];
+    readonly categories?: CategoryRevenue[];
+    readonly orders?: OrderHistory[];
+    readonly signups?: SignupDetail[];
+    readonly isLoading?: boolean;
+    readonly error?: string | null;
+    readonly shopTitle?: string;
+    readonly className?: string;
+    readonly translate?: TranslateFn;
+    readonly initialDateRange?: DateRangeOption;
+    readonly initialMarket?: MarketOption;
+    readonly initialProductSort?: ProductSortOption;
+    readonly initialSignupView?: SignupViewOption;
+    readonly initialConversionFilter?: ConversionFilterOption;
+    readonly initialCategorySort?: CategorySortOption;
+    readonly markets?: ReadonlyArray<MarketFilterOption>;
+    readonly historyAdapter?: MysiteDashboardHistoryAdapter;
+    readonly historyStateKey?: string;
+    readonly resetToDashboardOnMount?: boolean;
+    readonly onDateRangeChange?: (range: DateRangeOption) => void;
+    readonly onMarketChange?: (market: MarketOption) => void;
+    readonly onProductSortChange?: (sort: ProductSortOption) => void;
+    readonly onSignupViewChange?: (view: SignupViewOption) => void;
+    readonly onConversionFilterChange?: (filter: ConversionFilterOption) => void;
+    readonly onCategorySortChange?: (sort: CategorySortOption) => void;
+    readonly onViewChange?: (view: MysiteDashboardView) => void;
+}
+export declare const MysiteDashboardWithNavigation: React.FC<MysiteDashboardWithNavigationProps>;
+export default MysiteDashboardWithNavigation;

package/dist/common/shopping-dashboard/PoDashboardWithNavigation.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PoDashboardWithNavigationProps } from './types.d';
+export declare const PoDashboardWithNavigation: React.FC<PoDashboardWithNavigationProps>;
+export default PoDashboardWithNavigation;

package/dist/common/shopping-dashboard/ProductOfferDashboard.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ProductOfferDashboardProps } from './types.d';
+export declare const ProductOfferDashboard: React.FC<ProductOfferDashboardProps>;
+export default ProductOfferDashboard;

package/dist/common/shopping-dashboard/ProductOfferDashboard.styled.d.ts

@@ -0,0 +1,20 @@
+export declare const PoDashboardContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TopChartsRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StatsCardStack: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BottomChartsRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ErrorContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/common/shopping-dashboard/ShoppingDashboard.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { DashboardStats, TopProduct, ConversionDataPoint, SignupDataPoint, CategoryRevenue, DateRangeOption, MarketOption, MarketFilterOption, ProductSortOption, SignupViewOption, ConversionFilterOption, CategorySortOption } from './types.d';
+export interface ShoppingDashboardProps {
+    readonly stats?: DashboardStats | null;
+    readonly topProducts?: TopProduct[];
+    readonly conversionData?: ConversionDataPoint[];
+    readonly signupData?: SignupDataPoint[];
+    readonly categories?: CategoryRevenue[];
+    readonly isLoading?: boolean;
+    readonly error?: string | null;
+    readonly shopTitle?: string;
+    readonly className?: string;
+    readonly dateRange?: DateRangeOption;
+    readonly market?: MarketOption;
+    readonly productSort?: ProductSortOption;
+    readonly signupView?: SignupViewOption;
+    readonly conversionFilter?: ConversionFilterOption;
+    readonly categorySort?: CategorySortOption;
+    readonly markets?: ReadonlyArray<MarketFilterOption>;
+    readonly onDateRangeChange?: (range: DateRangeOption) => void;
+    readonly onMarketChange?: (market: MarketOption) => void;
+    readonly onProductSortChange?: (sort: ProductSortOption) => void;
+    readonly onSignupViewChange?: (view: SignupViewOption) => void;
+    readonly onConversionFilterChange?: (filter: ConversionFilterOption) => void;
+    readonly onCategorySortChange?: (sort: CategorySortOption) => void;
+    readonly onProductsTitleClick?: () => void;
+    readonly onConversionTitleClick?: () => void;
+    readonly onSignupsTitleClick?: () => void;
+    readonly onCategoriesToTitleClick?: () => void;
+}
+export declare const ShoppingDashboard: React.FC<ShoppingDashboardProps>;
+export default ShoppingDashboard;

package/dist/common/shopping-dashboard/ShoppingDashboard.styled.d.ts

@@ -0,0 +1,20 @@
+export declare const DashboardContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StatsRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WidgetContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TwoColumnGrid: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ErrorContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/common/shopping-dashboard/TranslationContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type TranslateFn, type TranslationEntry } from './TranslationKeys/translationResolver';
+export declare function useTranslationResolver(translate?: TranslateFn): void;
+export interface TranslationProviderProps {
+    readonly translate?: TranslateFn;
+    readonly children?: React.ReactNode;
+}
+export declare const TranslationProvider: React.FC<TranslationProviderProps>;
+export declare function useTranslation(): (entry: TranslationEntry) => string;
+export type { TranslateFn, TranslationEntry };

package/dist/common/shopping-dashboard/TranslationKeys/ProductOfferDashboardTranslationKeys.d.ts

@@ -0,0 +1,230 @@
+type TranslationEntry = {
+    readonly key: string;
+    readonly fallback: string;
+};
+export declare const ProductOfferDashboardTranslationKeys: {
+    readonly title: {
+        readonly key: "productOfferDashboard.title";
+        readonly fallback: "Performance Overview";
+    };
+    readonly error: {
+        readonly key: "productOfferDashboard.error";
+        readonly fallback: "Failed to load dashboard data. Please try again.";
+    };
+    readonly stats: {
+        readonly revenue: {
+            readonly key: "productOfferDashboard.stats.revenue";
+            readonly fallback: "Total Revenue";
+        };
+        readonly offersPurchased: {
+            readonly key: "productOfferDashboard.stats.offersPurchased";
+            readonly fallback: "Offers Purchased";
+        };
+        readonly conversionRate: {
+            readonly key: "productOfferDashboard.stats.conversionRate";
+            readonly fallback: "Conversion Rate";
+        };
+        readonly trendUp: {
+            readonly key: "productOfferDashboard.stats.trendUp";
+            readonly fallback: "Trending up";
+        };
+        readonly trendDown: {
+            readonly key: "productOfferDashboard.stats.trendDown";
+            readonly fallback: "Trending down";
+        };
+        readonly trendNeutral: {
+            readonly key: "productOfferDashboard.stats.trendNeutral";
+            readonly fallback: "No change";
+        };
+        readonly comparedTo: {
+            readonly key: "productOfferDashboard.stats.comparedTo";
+            readonly fallback: "compared to this time last month";
+        };
+    };
+    readonly filter: {
+        readonly dateRange: {
+            readonly label: {
+                readonly key: "productOfferDashboard.filter.dateRange.label";
+                readonly fallback: "Date Range";
+            };
+            readonly last7days: {
+                readonly key: "productOfferDashboard.filter.dateRange.last7days";
+                readonly fallback: "Last 7 Days";
+            };
+            readonly last30days: {
+                readonly key: "productOfferDashboard.filter.dateRange.last30days";
+                readonly fallback: "Last 30 Days";
+            };
+            readonly last90days: {
+                readonly key: "productOfferDashboard.filter.dateRange.last90days";
+                readonly fallback: "Last 90 Days";
+            };
+            readonly thisMonth: {
+                readonly key: "productOfferDashboard.filter.dateRange.thisMonth";
+                readonly fallback: "This Month";
+            };
+        };
+        readonly market: {
+            readonly label: {
+                readonly key: "productOfferDashboard.filter.market.label";
+                readonly fallback: "Market";
+            };
+            readonly all: {
+                readonly key: "productOfferDashboard.filter.market.all";
+                readonly fallback: "All Markets";
+            };
+        };
+        readonly offerSort: {
+            readonly byRevenue: {
+                readonly key: "productOfferDashboard.filter.offerSort.byRevenue";
+                readonly fallback: "Revenue";
+            };
+            readonly byUnits: {
+                readonly key: "productOfferDashboard.filter.offerSort.byUnits";
+                readonly fallback: "Units";
+            };
+        };
+        readonly productSort: {
+            readonly byUnits: {
+                readonly key: "productOfferDashboard.filter.productSort.byUnits";
+                readonly fallback: "Units";
+            };
+            readonly byRevenue: {
+                readonly key: "productOfferDashboard.filter.productSort.byRevenue";
+                readonly fallback: "Revenue";
+            };
+            readonly byVolume: {
+                readonly key: "productOfferDashboard.filter.productSort.byVolume";
+                readonly fallback: "Volume";
+            };
+        };
+        readonly conversionFilter: {
+            readonly overall: {
+                readonly key: "productOfferDashboard.filter.conversionFilter.overall";
+                readonly fallback: "Overall";
+            };
+        };
+    };
+    readonly widget: {
+        readonly topProducts: {
+            readonly title: {
+                readonly key: "productOfferDashboard.widget.topProducts.title";
+                readonly fallback: "Top Selling Products";
+            };
+            readonly emptyState: {
+                readonly key: "productOfferDashboard.widget.topProducts.emptyState";
+                readonly fallback: "No products data available";
+            };
+        };
+        readonly conversionRate: {
+            readonly title: {
+                readonly key: "productOfferDashboard.widget.conversionRate.title";
+                readonly fallback: "Conversion Rate";
+            };
+            readonly subtitle: {
+                readonly key: "productOfferDashboard.widget.conversionRate.subtitle";
+                readonly fallback: "Orders ÷ Site visits";
+            };
+        };
+        readonly topPerformingOffers: {
+            readonly title: {
+                readonly key: "productOfferDashboard.widget.topPerformingOffers.title";
+                readonly fallback: "Top Performing Offers";
+            };
+            readonly totalRevenue: {
+                readonly key: "productOfferDashboard.widget.topPerformingOffers.totalRevenue";
+                readonly fallback: "Total revenue";
+            };
+            readonly emptyState: {
+                readonly key: "productOfferDashboard.widget.topPerformingOffers.emptyState";
+                readonly fallback: "No offers data available";
+            };
+        };
+        readonly menu: {
+            readonly fullView: {
+                readonly key: "productOfferDashboard.widget.menu.fullView";
+                readonly fallback: "Full View";
+            };
+        };
+    };
+    readonly navigation: {
+        readonly back: {
+            readonly key: "productOfferDashboard.navigation.back";
+            readonly fallback: "Back to Dashboard";
+        };
+    };
+    readonly ariaLabel: {
+        readonly dashboard: {
+            readonly key: "productOfferDashboard.ariaLabel.dashboard";
+            readonly fallback: "Product Offer Performance Dashboard";
+        };
+        readonly statsCard: {
+            readonly key: "productOfferDashboard.ariaLabel.statsCard";
+            readonly fallback: "Performance metric";
+        };
+        readonly conversionChart: {
+            readonly key: "productOfferDashboard.ariaLabel.conversionChart";
+            readonly fallback: "Conversion rate chart";
+        };
+        readonly topProducts: {
+            readonly key: "productOfferDashboard.ariaLabel.topProducts";
+            readonly fallback: "Top selling products";
+        };
+        readonly topOffers: {
+            readonly key: "productOfferDashboard.ariaLabel.topOffers";
+            readonly fallback: "Top performing offers chart";
+        };
+        readonly widgetMenu: {
+            readonly key: "productOfferDashboard.ariaLabel.widgetMenu";
+            readonly fallback: "Widget options menu";
+        };
+        readonly filterDateRange: {
+            readonly key: "productOfferDashboard.ariaLabel.filterDateRange";
+            readonly fallback: "Filter by date range";
+        };
+        readonly filterMarket: {
+            readonly key: "productOfferDashboard.ariaLabel.filterMarket";
+            readonly fallback: "Filter by market";
+        };
+        readonly backButton: {
+            readonly key: "productOfferDashboard.ariaLabel.backButton";
+            readonly fallback: "Back to dashboard overview";
+        };
+    };
+    readonly fullView: {
+        readonly topOffers: {
+            readonly title: {
+                readonly key: "productOfferDashboard.fullView.topOffers.title";
+                readonly fallback: "Top Performing Offers";
+            };
+            readonly columnName: {
+                readonly key: "productOfferDashboard.fullView.topOffers.columnName";
+                readonly fallback: "Offer Name";
+            };
+            readonly columnRevenue: {
+                readonly key: "productOfferDashboard.fullView.topOffers.columnRevenue";
+                readonly fallback: "Revenue";
+            };
+            readonly columnPercentage: {
+                readonly key: "productOfferDashboard.fullView.topOffers.columnPercentage";
+                readonly fallback: "Share";
+            };
+            readonly columnTrend: {
+                readonly key: "productOfferDashboard.fullView.topOffers.columnTrend";
+                readonly fallback: "Trend";
+            };
+        };
+    };
+    readonly defaults: {
+        readonly trendZero: {
+            readonly key: "productOfferDashboard.defaults.trendZero";
+            readonly fallback: "+0%";
+        };
+        readonly noData: {
+            readonly key: "productOfferDashboard.defaults.noData";
+            readonly fallback: "--";
+        };
+    };
+};
+export declare function getTranslation(entry: TranslationEntry): string;
+export {};