Use iframe for inner components use for tab content. Apply themes inline for each sample. Add Sales Grid into main app.

Author: skrustev

src/app/app-routes.tsx

@@ -1,26 +1,26 @@
 import { redirect, RouteObject } from 'react-router-dom';
-import ERPInventory from './erpinventory/erpinventory';
-import OrgChartHRPortal from './org-chart-hr-portal/org-chart-hr-portal';
-import FinancialPortfolio from './financial-portfolio/financial-portfolio';
-import SalesDashboard from './sales-dashboard/sales-dashboard';
-import FleetManagement from './fleet-management/fleet-management';
-import HomeView from './home-view/home-view';
+import ErpHGridView from './views/erp-hgrid/erp-hgrid-view';
+import HRPortalView from './views/hr-portal/hr-portal-view';
+import FinanceView from './views/finance/finance-view';
+import SalesView from './views/sales/sales-view';
+import FleetManagementView from './views/fleet-management/fleet-management-view';
+import HomeView from './views/home/home-view';
 
 export const routes: RouteObject[] = [
   { index: true, loader: () => redirect('home') },
   { path: 'home', element: <HomeView />,
     children: [
       { index: true, loader: () => redirect('inventory') },
-      { path: 'inventory', element: <ERPInventory /> },
-      { path: 'hr-portal', element: <OrgChartHRPortal /> },
-      { path: 'finance', element: <FinancialPortfolio />},
-      { path: 'sales', element: <SalesDashboard /> },
-      { path: 'fleet', element: <FleetManagement /> },
+      { path: 'inventory', element: <ErpHGridView /> },
+      { path: 'hr-portal', element: <HRPortalView /> },
+      { path: 'finance', element: <FinanceView />},
+      { path: 'sales', element: <SalesView /> },
+      { path: 'fleet', element: <FleetManagementView /> },
     ]
   },
-  { path: 'inventory', element: <ERPInventory /> },
-  { path: 'hr-portal', element: <OrgChartHRPortal /> },
-  { path: 'finance', element: <FinancialPortfolio />},
-  { path: 'sales', element: <SalesDashboard /> },
-  { path: 'fleet', element: <FleetManagement /> },
+  { path: 'inventory', element: <ErpHGridView /> },
+  { path: 'hr-portal', element: <HRPortalView /> },
+  { path: 'finance', element: <FinanceView />},
+  { path: 'sales', element: <SalesView /> },
+  { path: 'fleet', element: <FleetManagementView /> },
 ];

src/app/sales-dashboard/sales-dashboard.module.css

@@ -1,6 +1,6 @@
 import { expect, test, vi } from 'vitest';
 import { render } from '@testing-library/react';
-import ERPInventory from './erpinventory';
+import ERPInventory from './erp-hgrid-view';
 import 'element-internals-polyfill';
 
 // Mock API response
@@ -12,4 +12,4 @@ global.fetch = vi.fn().mockResolvedValue(mockResponse);
 test('renders ERPInventory component', () => {
   const wrapper = render(<ERPInventory />);
   expect(wrapper).toBeTruthy();
-});
+});

src/app/sales-dashboard/sales-dashboard.tsx

@@ -1,11 +1,11 @@
 import { IgrCellTemplateContext, IgrColumn, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle, IgrHierarchicalGrid, IgrRowIsland } from 'igniteui-react-grids';
 import { IgrRating } from 'igniteui-react';
-import { useGetTable1List as eRPProductsUseGetTable1List } from '../hooks/erpproducts-hooks';
+import { useGetTable1List as eRPProductsUseGetTable1List } from '../../hooks/erpproducts-hooks';
 
-import styles from './erpinventory.module.css';
-import createClassTransformer from '../style-utils';
+import styles from './erp-hgrid-view.module.css';
+import createClassTransformer from '../../style-utils';
 
-export default function ERPInventory() {
+export default function ERPHGridView() {
   const classes = createClassTransformer(styles);
   const uuid = () => crypto.randomUUID();
   const { eRPProductsTable1 } = eRPProductsUseGetTable1List();

…app/erpinventory/erpinventory.module.css …iews/erp-hgrid/erp-hgrid-view.module.csssrc/app/erpinventory/erpinventory.module.css renamed to src/app/views/erp-hgrid/erp-hgrid-view.module.css src/app/erpinventory/erpinventory.module.css renamed to src/app/views/erp-hgrid/erp-hgrid-view.module.css

@@ -1,6 +1,6 @@
 import { expect, test, vi } from 'vitest';
 import { render } from '@testing-library/react';
-import FinancialPortfolio from './financial-portfolio';
+import FinancialPortfolio from './finance-view';
 import 'element-internals-polyfill';
 
 // Mock API response
@@ -12,4 +12,4 @@ global.fetch = vi.fn().mockResolvedValue(mockResponse);
 test('renders FinancialPortfolio component', () => {
   const wrapper = render(<FinancialPortfolio />);
   expect(wrapper).toBeTruthy();
-});
+});

…c/app/erpinventory/erpinventory.test.tsx …/views/erp-hgrid/erp-hgrid-view.test.tsxsrc/app/erpinventory/erpinventory.test.tsx renamed to src/app/views/erp-hgrid/erp-hgrid-view.test.tsx src/app/erpinventory/erpinventory.test.tsx renamed to src/app/views/erp-hgrid/erp-hgrid-view.test.tsx

@@ -1,12 +1,12 @@
 import { IgrAvatar } from 'igniteui-react';
 import { IgrCellTemplateContext, IgrColumn, IgrGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle } from 'igniteui-react-grids';
-import { useGetTable1List as financeUseGetTable1List } from '../hooks/finance-hooks';
-import createClassTransformer from '../style-utils';
+import { useGetTable1List as financeUseGetTable1List } from '../../hooks/finance-hooks';
+import createClassTransformer from '../../style-utils';
 
-IgrAvatarModule.register();
-IgrGridModule.register();
+import styles from './finance-view.module.css';
+import lightBootstrap from 'igniteui-react-grids/grids/themes/light/bootstrap.css?inline';
 
-export default function FinancialPortfolio() {
+export default function FinanceView() {
   const classes = createClassTransformer(styles);
   const uuid = () => crypto.randomUUID();
   const { financeTable1 } = financeUseGetTable1List();
@@ -37,6 +37,9 @@ export default function FinancialPortfolio() {
 
   return (
     <>
+      <style>
+        {lightBootstrap}
+      </style>
       <div className={classes("row-layout financial-portfolio-container")}>
         <IgrGrid data={financeTable1} primaryKey="id" rowSelection="multiple" className={classes("ig-typography ig-scrollbar grid")} key={uuid()}>
           <IgrGridToolbar>