From 10e18031b70fdcc684cddf8942e330facdef875e Mon Sep 17 00:00:00 2001
From: Deyan Kamburov <dkamburov@users.noreply.github.com>
Date: Wed, 2 Apr 2025 17:09:20 +0300
Subject: [PATCH 1/4] grid landing pages updates

---
 generationLogs.json                           |  2 +-
 src/app/erpinventory/erpinventory.module.css  |  4 +++
 src/app/erpinventory/erpinventory.tsx         | 31 +++++++++++++------
 .../ERPProducts/table1-type-erpproducts.ts    |  2 +-
 .../org-chart-hr-portal.module.css            |  9 ++++++
 .../org-chart-hr-portal.tsx                   | 23 +++++++++++---
 6 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/generationLogs.json b/generationLogs.json
index a4794fe..94199ce 100644
--- a/generationLogs.json
+++ b/generationLogs.json
@@ -1 +1 @@
-[{"Text":"Component with Id 3f93ffc8-18aa-4ea3-acb2-c80823127a50 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a8b89ecd-1b63-4286-a5b7-893a0354471c try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e6ab092d-2237-4a4b-b847-1a61622c27fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id c067e6f8-6bfc-4867-a22e-01a93ed93665 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id e8843921-647f-4dab-bb0b-11c232dc169f try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 64222c38-a9d4-448e-b4a8-fda6a23f2cb5 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 2bf787fe-2555-4d36-945f-d1c98f551712 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id a3b6e72a-ec01-4f60-b319-a7c92aecd0dd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 5bd7a64d-4bb9-41a2-abf5-3300a9c949fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a24e66b7-9154-40f4-ac11-f56efbfaaad4 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id f0305457-ff36-4f5b-9e4f-f5925738a151 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a010c605-14b8-4c9f-938d-22279965ece8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 18e4de2c-b47a-4db1-ba24-1e7a7a2361aa try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id 280fdc5b-3f1c-4d19-8dd7-dff0a11445a4 try to add CSS class name ig-scrollbar. Class name already exists in this view!","Type":1},{"Text":"Component '' with id '0a23bf69-1695-4b54-ba68-5aef99f5a47a' has property with no name. Property was not generated.","Type":1},{"Text":"Component '' with id '0a23bf69-1695-4b54-ba68-5aef99f5a47a' has property with no name. Property was not generated.","Type":1}]
\ No newline at end of file
+[{"Text":"Component with Id 3f93ffc8-18aa-4ea3-acb2-c80823127a50 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a8b89ecd-1b63-4286-a5b7-893a0354471c try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e6ab092d-2237-4a4b-b847-1a61622c27fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 07ead4cc-f57e-4c0d-804d-317e113c2193 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id e8843921-647f-4dab-bb0b-11c232dc169f try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 64222c38-a9d4-448e-b4a8-fda6a23f2cb5 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id cc2d2139-3b37-41bb-a9da-79243b8558a3 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id a3b6e72a-ec01-4f60-b319-a7c92aecd0dd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 5bd7a64d-4bb9-41a2-abf5-3300a9c949fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 849d8156-ba0b-4449-946f-139da3a6e2d9 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id f0305457-ff36-4f5b-9e4f-f5925738a151 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a010c605-14b8-4c9f-938d-22279965ece8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 895cac1e-a540-4829-a744-1460035fb51f try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id 280fdc5b-3f1c-4d19-8dd7-dff0a11445a4 try to add CSS class name ig-scrollbar. Class name already exists in this view!","Type":1},{"Text":"Component '' with id '826df48f-2fd2-4376-bcac-daaf56423363' has property value of type 'number' which is not in the correct format.","Type":1},{"Text":"Component '' with id 'cd9500d4-58be-4e2a-a6a2-73fb57fa8576' has property with no name. Property was not generated.","Type":1},{"Text":"Component '' with id 'cd9500d4-58be-4e2a-a6a2-73fb57fa8576' has property with no name. Property was not generated.","Type":1}]
\ No newline at end of file
diff --git a/src/app/erpinventory/erpinventory.module.css b/src/app/erpinventory/erpinventory.module.css
index 023a0ab..c0dbbc6 100644
--- a/src/app/erpinventory/erpinventory.module.css
+++ b/src/app/erpinventory/erpinventory.module.css
@@ -14,3 +14,7 @@
   flex-grow: 1;
   flex-basis: 0;
 }
+.rating {
+  width: max-content;
+  height: max-content;
+}
diff --git a/src/app/erpinventory/erpinventory.tsx b/src/app/erpinventory/erpinventory.tsx
index 693de68..d47db96 100644
--- a/src/app/erpinventory/erpinventory.tsx
+++ b/src/app/erpinventory/erpinventory.tsx
@@ -1,20 +1,30 @@
-import { IgrColumn, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle, IgrHierarchicalGrid, IgrHierarchicalGridModule, IgrRowIsland } from 'igniteui-react-grids';
+import { IgrCellTemplateContext, IgrColumn, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle, IgrHierarchicalGrid, IgrHierarchicalGridModule, IgrRowIsland } from 'igniteui-react-grids';
+import { IgrRating, IgrRatingModule } from 'igniteui-react';
 import { useGetTable1List as eRPProductsUseGetTable1List } from '../hooks/erpproducts-hooks';
 import 'igniteui-react-grids/grids/combined.js';
 import styles from './erpinventory.module.css';
 import createClassTransformer from '../style-utils';
 
 IgrHierarchicalGridModule.register();
+IgrRatingModule.register();
 
 export default function ERPInventory() {
   const classes = createClassTransformer(styles);
   const uuid = () => crypto.randomUUID();
   const { eRPProductsTable1 } = eRPProductsUseGetTable1List();
 
+  const columnBodyTemplate = (ctx: { dataContext: IgrCellTemplateContext }) => {
+    return (
+      <>
+        <IgrRating value={ctx.dataContext.cell.value} className={classes("rating")}></IgrRating>
+      </>
+    )
+  }
+
   return (
     <>
       <div className={classes("row-layout erpinventory-container")}>
-        <IgrHierarchicalGrid data={eRPProductsTable1} primaryKey="sku" rowSelection="multiple" allowFiltering="true" filterMode="quickFilter" className={classes("ig-typography ig-scrollbar hierarchical-grid")}>
+        <IgrHierarchicalGrid data={eRPProductsTable1} primaryKey="sku" rowSelection="multiple" allowFiltering="true" filterMode="quickFilter" className={classes("ig-typography ig-scrollbar hierarchical-grid")} key={uuid()}>
           <IgrGridToolbar>
             <IgrGridToolbarActions>
               <IgrGridToolbarPinning></IgrGridToolbarPinning>
@@ -29,13 +39,16 @@ export default function ERPInventory() {
             <IgrColumn field="orderId" dataType="number" header="orderId" sortable="true" selectable="false"></IgrColumn>
             <IgrColumn field="status" dataType="string" header="status" sortable="true" selectable="false"></IgrColumn>
           </IgrRowIsland>
-          <IgrColumn field="sku" dataType="string" header="sku" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="imageUrl" dataType="string" header="imageUrl" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="productName" dataType="string" header="productName" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="category" dataType="string" header="category" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="rating" dataType="number" header="rating" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="grossPrice" dataType="number" header="grossPrice" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="netPrice" dataType="number" header="netPrice" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn field="sku" dataType="string" header="SKU" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn field="imageUrl" dataType="image" header="Image" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn field="productName" dataType="string" header="Product Name" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn field="category" dataType="string" header="Category" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn field="rating" dataType="number" header="Rating" sortable="true" bodyTemplate={columnBodyTemplate} selectable="false"></IgrColumn>
+          <IgrColumn header="Sold Units Last Month" sortable="true" selectable="false" key="86f2766e-c724-4e27-bdc0-d17d845eb299"></IgrColumn>
+          <IgrColumn header="Montly Sales Trends" sortable="true" selectable="false" key="bb1b0e09-b31c-4c2d-a985-155db4ad6906"></IgrColumn>
+          <IgrColumn field="grossPrice" dataType="currency" header="Gross Price" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn field="netPrice" dataType="currency" header="Net Price" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn header="Net Profit" sortable="true" selectable="false" key="0a4cffbd-702e-4f7a-af19-4c3fac55f63e"></IgrColumn>
         </IgrHierarchicalGrid>
       </div>
     </>
diff --git a/src/app/models/ERPProducts/table1-type-erpproducts.ts b/src/app/models/ERPProducts/table1-type-erpproducts.ts
index b8d4f2d..6e52283 100644
--- a/src/app/models/ERPProducts/table1-type-erpproducts.ts
+++ b/src/app/models/ERPProducts/table1-type-erpproducts.ts
@@ -1,5 +1,5 @@
-import { OrdersType } from './orders-type';
 import { SalesTrendDataType } from './sales-trend-data-type';
+import { OrdersType } from './orders-type';
 
 export interface Table1TypeERPProducts {
   sku: string;
diff --git a/src/app/org-chart-hr-portal/org-chart-hr-portal.module.css b/src/app/org-chart-hr-portal/org-chart-hr-portal.module.css
index 01ccd68..209f53a 100644
--- a/src/app/org-chart-hr-portal/org-chart-hr-portal.module.css
+++ b/src/app/org-chart-hr-portal/org-chart-hr-portal.module.css
@@ -14,3 +14,12 @@
   flex-grow: 1;
   flex-basis: 0;
 }
+.avatar::part(base) {
+  background-color: transparent;
+}
+.text {
+  width: 300px;
+  height: max-content;
+  min-width: min-content;
+  max-width: 300px;
+}
diff --git a/src/app/org-chart-hr-portal/org-chart-hr-portal.tsx b/src/app/org-chart-hr-portal/org-chart-hr-portal.tsx
index ea96130..24fb9e0 100644
--- a/src/app/org-chart-hr-portal/org-chart-hr-portal.tsx
+++ b/src/app/org-chart-hr-portal/org-chart-hr-portal.tsx
@@ -1,9 +1,11 @@
-import { IgrColumn, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle, IgrTreeGrid, IgrTreeGridModule } from 'igniteui-react-grids';
+import { IgrAvatar, IgrAvatarModule } from 'igniteui-react';
+import { IgrCellTemplateContext, IgrColumn, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle, IgrTreeGrid, IgrTreeGridModule } from 'igniteui-react-grids';
 import { useGetTable1List as hRDataUseGetTable1List } from '../hooks/hrdata-hooks';
 import 'igniteui-react-grids/grids/combined.js';
 import styles from './org-chart-hr-portal.module.css';
 import createClassTransformer from '../style-utils';
 
+IgrAvatarModule.register();
 IgrTreeGridModule.register();
 
 export default function OrgChartHRPortal() {
@@ -11,10 +13,21 @@ export default function OrgChartHRPortal() {
   const uuid = () => crypto.randomUUID();
   const { hRDataTable1 } = hRDataUseGetTable1List();
 
+  const columnBodyTemplate = (ctx: { dataContext: IgrCellTemplateContext }) => {
+    return (
+      <>
+        <IgrAvatar src={ctx.dataContext.cell.row.data.Picture} shape="circle" className={classes("avatar")}></IgrAvatar>
+        <p className={classes("typography__body-1 text")}>
+          <span>{ctx.dataContext.cell.value}</span>
+        </p>
+      </>
+    )
+  }
+
   return (
     <>
       <div className={classes("row-layout org-charthr-portal-container")}>
-        <IgrTreeGrid data={hRDataTable1} primaryKey="ID" childDataKey="Employees" rowSelection="multiple" allowFiltering="true" filterMode="excelStyleFilter" className={classes("ig-typography ig-scrollbar tree-grid")}>
+        <IgrTreeGrid data={hRDataTable1} primaryKey="ID" childDataKey="Employees" rowSelection="multiple" allowFiltering="true" filterMode="excelStyleFilter" className={classes("ig-typography ig-scrollbar tree-grid")} key={uuid()}>
           <IgrGridToolbar>
             <IgrGridToolbarActions>
               <IgrGridToolbarPinning></IgrGridToolbarPinning>
@@ -25,9 +38,9 @@ export default function OrgChartHRPortal() {
               <span key={uuid()}>HR Portal</span>
             </IgrGridToolbarTitle>
           </IgrGridToolbar>
-          <IgrColumn field="ID" dataType="number" header="ID" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Name" dataType="string" header="Name" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="JobTitle" dataType="string" header="JobTitle" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn field="ID" dataType="number" header="ID" hidden="true" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn field="Name" dataType="string" header="Name" width="300px" pinned="true" sortable="true" bodyTemplate={columnBodyTemplate} selectable="false"></IgrColumn>
+          <IgrColumn field="JobTitle" dataType="string" header="Job Title" sortable="true" selectable="false"></IgrColumn>
           <IgrColumn field="Department" dataType="string" header="Department" sortable="true" selectable="false"></IgrColumn>
           <IgrColumn field="Location" dataType="string" header="Location" sortable="true" selectable="false"></IgrColumn>
           <IgrColumn field="Country" dataType="string" header="Country" sortable="true" selectable="false"></IgrColumn>

From 8c62862e6282d9eed2e12f1e73cc5de60c09c209 Mon Sep 17 00:00:00 2001
From: Deyan Kamburov <dkamburov@users.noreply.github.com>
Date: Thu, 3 Apr 2025 15:00:50 +0300
Subject: [PATCH 2/4] grid landing pages updates

---
 .github/workflows/github-pages.yml            |  50 ++++++++++
 generationLogs.json                           |   2 +-
 ig-theme.css                                  |   5 +
 ignite-ui-cli.json                            |   2 +-
 index.html                                    |   1 +
 package.json                                  |   3 +-
 .../financial-portfolio.module.css            |   7 ++
 .../financial-portfolio.tsx                   |  47 +++++++--
 src/app/fleet-management/fleet-management.tsx |  31 ++----
 src/app/models/ERPProducts/orders-type.ts     |   2 +-
 .../org-chart-hr-portal.module.css            |   4 +
 .../org-chart-hr-portal.tsx                   |  92 +++++++++---------
 src/assets/Zoom.png                           | Bin 0 -> 26230 bytes
 13 files changed, 165 insertions(+), 81 deletions(-)
 create mode 100644 .github/workflows/github-pages.yml
 create mode 100644 src/assets/Zoom.png

diff --git a/.github/workflows/github-pages.yml b/.github/workflows/github-pages.yml
new file mode 100644
index 0000000..9c8bdb3
--- /dev/null
+++ b/.github/workflows/github-pages.yml
@@ -0,0 +1,50 @@
+name: Deploy GitHub Pages
+
+on:
+  push:
+    branches: [ master ]
+  workflow_dispatch: {}
+
+jobs:
+  build-and-deploy:
+
+    runs-on: ubuntu-latest
+
+    permissions:
+      pages: write
+      id-token: write
+      actions: read
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    strategy:
+      matrix:
+        node-version: [22.x]
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        # cache: 'npm' # enable after committing lock file from first install
+    - run: npm i # replace with 'npm ci' after committing lock file from first install
+    - name: Set environment variable for basename
+      run: echo "VITE_BASENAME=/${{ github.event.repository.name }}" >> $GITHUB_ENV
+    - run: npm run build -- --base=/${{ github.event.repository.name }}/
+    - name: Update Resource Paths
+      run: |
+        find ./dist/assets -type f -name "*.js" -exec sed -i 's|src/assets|${{ github.event.repository.name }}/assets|g' {} +;
+        find ./dist/assets -type f -name "*.js" -exec sed -i 's|/static-data/|/${{ github.event.repository.name }}/static-data/|g' {} +
+    - name: Copy Resources to dist
+      run: mkdir -p ./dist/assets && cp -R ./src/assets/* ./dist/assets/
+    - name: SPA routing handling
+      run: cp ./dist/index.html ./dist/404.html
+    - name: Upload build artifact to GitHub Pages
+      uses: actions/upload-pages-artifact@v3
+      with:
+        path: ./dist
+    - name: Deploy to GitHub Pages
+      uses: actions/deploy-pages@v4
diff --git a/generationLogs.json b/generationLogs.json
index 94199ce..386ed54 100644
--- a/generationLogs.json
+++ b/generationLogs.json
@@ -1 +1 @@
-[{"Text":"Component with Id 3f93ffc8-18aa-4ea3-acb2-c80823127a50 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a8b89ecd-1b63-4286-a5b7-893a0354471c try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e6ab092d-2237-4a4b-b847-1a61622c27fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 07ead4cc-f57e-4c0d-804d-317e113c2193 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id e8843921-647f-4dab-bb0b-11c232dc169f try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 64222c38-a9d4-448e-b4a8-fda6a23f2cb5 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id cc2d2139-3b37-41bb-a9da-79243b8558a3 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id a3b6e72a-ec01-4f60-b319-a7c92aecd0dd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 5bd7a64d-4bb9-41a2-abf5-3300a9c949fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 849d8156-ba0b-4449-946f-139da3a6e2d9 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id f0305457-ff36-4f5b-9e4f-f5925738a151 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a010c605-14b8-4c9f-938d-22279965ece8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 895cac1e-a540-4829-a744-1460035fb51f try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id 280fdc5b-3f1c-4d19-8dd7-dff0a11445a4 try to add CSS class name ig-scrollbar. Class name already exists in this view!","Type":1},{"Text":"Component '' with id '826df48f-2fd2-4376-bcac-daaf56423363' has property value of type 'number' which is not in the correct format.","Type":1},{"Text":"Component '' with id 'cd9500d4-58be-4e2a-a6a2-73fb57fa8576' has property with no name. Property was not generated.","Type":1},{"Text":"Component '' with id 'cd9500d4-58be-4e2a-a6a2-73fb57fa8576' has property with no name. Property was not generated.","Type":1}]
\ No newline at end of file
+[{"Text":"Component with Id 3f93ffc8-18aa-4ea3-acb2-c80823127a50 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a8b89ecd-1b63-4286-a5b7-893a0354471c try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e6ab092d-2237-4a4b-b847-1a61622c27fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 76cb7ce3-78ca-4b1e-a1a1-7911ce3f407e try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id e8843921-647f-4dab-bb0b-11c232dc169f try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 64222c38-a9d4-448e-b4a8-fda6a23f2cb5 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 3ce00d5b-db5c-4cbc-a106-ff38689eba44 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id a3b6e72a-ec01-4f60-b319-a7c92aecd0dd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 5bd7a64d-4bb9-41a2-abf5-3300a9c949fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 952b3930-13d1-477a-b43b-a2daf0595569 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id f0305457-ff36-4f5b-9e4f-f5925738a151 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a010c605-14b8-4c9f-938d-22279965ece8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 5a76479c-49ad-4859-a754-86c7f2dcb8de try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id 280fdc5b-3f1c-4d19-8dd7-dff0a11445a4 try to add CSS class name ig-scrollbar. Class name already exists in this view!","Type":1},{"Text":"Component '' with id '826df48f-2fd2-4376-bcac-daaf56423363' has property value of type 'number' which is not in the correct format.","Type":1},{"Text":"Component with Id 112a5f47-fca2-46be-9a5e-bde316fccee8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 692a2005-5c6e-457c-b25a-8c54c02e5945 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e35f768d-97b4-40a6-a6ba-9ec9083e8071 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 2e6962f4-c6d8-499f-a2a5-136f6d4e0de8 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id 19e304aa-28d0-4de6-baf3-aeb8594a160d try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id f03fddd8-ece8-454e-8b40-7eb429db94d8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component '' with id 'e96b25bf-9912-43a8-b4c1-6cf704a2c49c' has property with no name. Property was not generated.","Type":1},{"Text":"Component '' with id 'e96b25bf-9912-43a8-b4c1-6cf704a2c49c' has property with no name. Property was not generated.","Type":1}]
\ No newline at end of file
diff --git a/ig-theme.css b/ig-theme.css
index 4bfece3..e980f0b 100644
--- a/ig-theme.css
+++ b/ig-theme.css
@@ -224,3 +224,8 @@ igc-card-header h6[slot='subtitle'] {
 .ig-typography__body-1 {
     margin: 0 !important;
 }
+
+igc-button .imx-icon, igc-icon-button .imx-icon {
+  /* adjust icon size when projected in other components */
+  --size: 1.125rem;
+}
diff --git a/ignite-ui-cli.json b/ignite-ui-cli.json
index 8529d2e..53ba17f 100644
--- a/ignite-ui-cli.json
+++ b/ignite-ui-cli.json
@@ -1,5 +1,5 @@
 {
-  "version": "14.3.15",
+  "version": "14.3.16",
   "project": {
     "defaultPort": 3003,
     "framework": "react",
diff --git a/index.html b/index.html
index a64df0e..be7c9da 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
     <title>grid landing pages</title>
     <link rel="stylesheet" href="./styles.css">
     <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
+  <link href='./node_modules/@igniteui/material-icons-extended/styles/sprite.css' rel='stylesheet'>
   <link rel='stylesheet' href='./node_modules/igniteui-webcomponents/themes/light/material.css'>
   <link rel='stylesheet' href='./node_modules/igniteui-react-grids/grids/themes/light/material.css'>
   <link href='https://fonts.googleapis.com/css?family=Titillium+Web:wght@300;400;600;700' rel='stylesheet'>
diff --git a/package.json b/package.json
index 5dacc18..e38acf8 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
+    "@igniteui/material-icons-extended": "^3.0.0",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "element-internals-polyfill": "^1.3.10",
@@ -31,7 +32,7 @@
     "typescript": "~5.5.4",
     "vite": "^4.4.9",
     "vitest-canvas-mock": "^0.3.3",
-    "igniteui-cli": "~14.3.15"
+    "igniteui-cli": "~14.3.16"
   },
   "scripts": {
     "start": "vite",
diff --git a/src/app/financial-portfolio/financial-portfolio.module.css b/src/app/financial-portfolio/financial-portfolio.module.css
index bd6f189..2865ea8 100644
--- a/src/app/financial-portfolio/financial-portfolio.module.css
+++ b/src/app/financial-portfolio/financial-portfolio.module.css
@@ -14,3 +14,10 @@
   flex-grow: 1;
   flex-basis: 0;
 }
+.avatar::part(base) {
+  background-color: transparent;
+}
+.text {
+  height: max-content;
+  min-width: min-content;
+}
diff --git a/src/app/financial-portfolio/financial-portfolio.tsx b/src/app/financial-portfolio/financial-portfolio.tsx
index ccceda6..e37ff15 100644
--- a/src/app/financial-portfolio/financial-portfolio.tsx
+++ b/src/app/financial-portfolio/financial-portfolio.tsx
@@ -1,9 +1,11 @@
-import { IgrColumn, IgrGrid, IgrGridModule, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle } from 'igniteui-react-grids';
+import { IgrAvatar, IgrAvatarModule } from 'igniteui-react';
+import { IgrCellTemplateContext, IgrColumn, IgrGrid, IgrGridModule, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle } from 'igniteui-react-grids';
 import { useGetTable1List as financeUseGetTable1List } from '../hooks/finance-hooks';
 import 'igniteui-react-grids/grids/combined.js';
 import styles from './financial-portfolio.module.css';
 import createClassTransformer from '../style-utils';
 
+IgrAvatarModule.register();
 IgrGridModule.register();
 
 export default function FinancialPortfolio() {
@@ -11,10 +13,34 @@ export default function FinancialPortfolio() {
   const uuid = () => crypto.randomUUID();
   const { financeTable1 } = financeUseGetTable1List();
 
+  const columnBodyTemplate = (ctx: { dataContext: IgrCellTemplateContext }) => {
+    return (
+      <>
+        <IgrAvatar src="/src/assets/Zoom.png" shape="rounded" className={classes("avatar")}></IgrAvatar>
+        <p className={classes("typography__body-1 text")}>
+          <span>{ctx.dataContext.cell.value}</span>
+        </p>
+      </>
+    )
+  }
+
+  const columnBodyTemplate1 = (ctx: { dataContext: IgrCellTemplateContext }) => {
+    return (
+      <>
+        <p className={classes("typography__body-1 text")}>
+          <span>{ctx.dataContext.cell.value}</span>
+        </p>
+        <p className={classes("typography__body-1 text")}>
+          <span> days</span>
+        </p>
+      </>
+    )
+  }
+
   return (
     <>
       <div className={classes("row-layout financial-portfolio-container")}>
-        <IgrGrid data={financeTable1} primaryKey="id" rowSelection="multiple" className={classes("ig-typography ig-scrollbar grid")}>
+        <IgrGrid data={financeTable1} primaryKey="id" rowSelection="multiple" className={classes("ig-typography ig-scrollbar grid")} key={uuid()}>
           <IgrGridToolbar>
             <IgrGridToolbarActions>
               <IgrGridToolbarPinning></IgrGridToolbarPinning>
@@ -25,12 +51,17 @@ export default function FinancialPortfolio() {
               <span key={uuid()}>Financial Portfolio</span>
             </IgrGridToolbarTitle>
           </IgrGridToolbar>
-          <IgrColumn field="id" dataType="string" header="id" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="holdingName" dataType="string" header="holdingName" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="positions" dataType="number" header="positions" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="holdingPeriod" dataType="number" header="holdingPeriod" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="value.currentPrice" dataType="number" header="value currentPrice" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="value.boughtPrice" dataType="number" header="value boughtPrice" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="id" dataType="string" header="Symbol" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="holdingName" dataType="string" header="holdingName" sortable="true" bodyTemplate={columnBodyTemplate} filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="positions" dataType="number" header="Positions" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="value.boughtPrice" dataType="currency" header="Average Cost/Share" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="value.currentPrice" dataType="currency" header="Last Price" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn header="Daily Change %" sortable="true" filterable="false" selectable="false" key="edd5fd57-f366-41a7-ab71-4f54f6ebd8a4"></IgrColumn>
+          <IgrColumn header="Market Value" sortable="true" filterable="false" selectable="false" key="20ffb91b-55c9-4294-8286-0de1c30febeb"></IgrColumn>
+          <IgrColumn header="NET Profit/Loss" sortable="true" filterable="false" selectable="false" key="7aaf09c0-8ee8-4f54-b0bf-6c124aed404e"></IgrColumn>
+          <IgrColumn header="NET Profit/Loss %" sortable="true" filterable="false" selectable="false" key="0305822a-4055-45f0-9319-31b73605aee8"></IgrColumn>
+          <IgrColumn header="Allocation" sortable="true" filterable="false" selectable="false" key="46776679-446b-41bd-8db3-dbe47a7e1e45"></IgrColumn>
+          <IgrColumn field="holdingPeriod" dataType="number" header="Holding Period" sortable="true" bodyTemplate={columnBodyTemplate1} filterable="false" selectable="false"></IgrColumn>
         </IgrGrid>
       </div>
     </>
diff --git a/src/app/fleet-management/fleet-management.tsx b/src/app/fleet-management/fleet-management.tsx
index 030230e..392b800 100644
--- a/src/app/fleet-management/fleet-management.tsx
+++ b/src/app/fleet-management/fleet-management.tsx
@@ -25,28 +25,15 @@ export default function FleetManagement() {
               <span key={uuid()}>Fleet Management</span>
             </IgrGridToolbarTitle>
           </IgrGridToolbar>
-          <IgrColumn field="vehicleId" dataType="string" header="vehicleId" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="licensePlate" dataType="string" header="licensePlate" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="make" dataType="string" header="make" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="model" dataType="string" header="model" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="type" dataType="string" header="type" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="vin" dataType="string" header="vin" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="status" dataType="string" header="status" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="locationCity" dataType="string" header="locationCity" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="locationGps" dataType="string" header="locationGps" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="details.generation" dataType="string" header="details generation" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="details.yearOfManufacture" dataType="number" header="details yearOfManufacture" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="details.fuelType" dataType="string" header="details fuelType" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="details.doors" dataType="number" header="details doors" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="details.seats" dataType="number" header="details seats" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="details.transmission" dataType="string" header="details transmission" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="details.engine" dataType="string" header="details engine" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="details.power" dataType="string" header="details power" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="details.mileage" dataType="string" header="details mileage" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="details.cubature" dataType="string" header="details cubature" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="details.color" dataType="string" header="details color" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="details.msrp" dataType="string" header="details msrp" sortable="true" filterable="false" selectable="false"></IgrColumn>
-          <IgrColumn field="details.tollPassId" dataType="string" header="details tollPassId" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="vehicleId" dataType="string" header="Vehicle ID" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="licensePlate" dataType="string" header="License Plate" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="make" dataType="string" header="Make" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="model" dataType="string" header="Model" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="type" dataType="string" header="Type" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="vin" dataType="string" header="VIN" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="status" dataType="string" header="Status" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="locationCity" dataType="string" header="Location (City)" sortable="true" filterable="false" selectable="false"></IgrColumn>
+          <IgrColumn field="locationGps" dataType="string" header="Location (GPS)" sortable="true" filterable="false" selectable="false"></IgrColumn>
         </IgrGrid>
       </div>
     </>
diff --git a/src/app/models/ERPProducts/orders-type.ts b/src/app/models/ERPProducts/orders-type.ts
index 318b13b..3007dca 100644
--- a/src/app/models/ERPProducts/orders-type.ts
+++ b/src/app/models/ERPProducts/orders-type.ts
@@ -1,5 +1,5 @@
-import { DeliveryType } from './delivery-type';
 import { OrderInformationType } from './order-information-type';
+import { DeliveryType } from './delivery-type';
 
 export interface OrdersType {
   orderId: number;
diff --git a/src/app/org-chart-hr-portal/org-chart-hr-portal.module.css b/src/app/org-chart-hr-portal/org-chart-hr-portal.module.css
index 209f53a..3646ddc 100644
--- a/src/app/org-chart-hr-portal/org-chart-hr-portal.module.css
+++ b/src/app/org-chart-hr-portal/org-chart-hr-portal.module.css
@@ -23,3 +23,7 @@
   min-width: min-content;
   max-width: 300px;
 }
+.text_1 {
+  height: max-content;
+  min-width: min-content;
+}
diff --git a/src/app/org-chart-hr-portal/org-chart-hr-portal.tsx b/src/app/org-chart-hr-portal/org-chart-hr-portal.tsx
index 24fb9e0..942b33a 100644
--- a/src/app/org-chart-hr-portal/org-chart-hr-portal.tsx
+++ b/src/app/org-chart-hr-portal/org-chart-hr-portal.tsx
@@ -1,4 +1,4 @@
-import { IgrAvatar, IgrAvatarModule } from 'igniteui-react';
+import { IgrAvatar, IgrAvatarModule, IgrIconButton, IgrIconButtonModule, IgrRipple, IgrRippleModule } from 'igniteui-react';
 import { IgrCellTemplateContext, IgrColumn, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrGridToolbarTitle, IgrTreeGrid, IgrTreeGridModule } from 'igniteui-react-grids';
 import { useGetTable1List as hRDataUseGetTable1List } from '../hooks/hrdata-hooks';
 import 'igniteui-react-grids/grids/combined.js';
@@ -6,6 +6,8 @@ import styles from './org-chart-hr-portal.module.css';
 import createClassTransformer from '../style-utils';
 
 IgrAvatarModule.register();
+IgrIconButtonModule.register();
+IgrRippleModule.register();
 IgrTreeGridModule.register();
 
 export default function OrgChartHRPortal() {
@@ -24,6 +26,45 @@ export default function OrgChartHRPortal() {
     )
   }
 
+  const columnBodyTemplate1 = (ctx: { dataContext: IgrCellTemplateContext }) => {
+    return (
+      <>
+        <p className={classes("typography__body-1 text_1")}>
+          <span>{ctx.dataContext.cell.value}</span>
+        </p>
+        <p className={classes("typography__body-1 text_1")}>
+          <span>,</span>
+        </p>
+        <p className={classes("typography__body-1 text_1")}>
+          <span>{ctx.dataContext.cell.row.data.Country}</span>
+        </p>
+      </>
+    )
+  }
+
+  const columnBodyTemplate2 = () => {
+    return (
+      <>
+        <IgrIconButton variant="flat">
+          <span className={classes("material-icons")} key={uuid()}>
+            <span key={uuid()}>email</span>
+          </span>
+          <IgrRipple key={uuid()}></IgrRipple>
+        </IgrIconButton>
+        <IgrIconButton variant="flat">
+          <span className={classes("material-icons")} key={uuid()}>
+            <span key={uuid()}>phone</span>
+          </span>
+          <IgrRipple key={uuid()}></IgrRipple>
+        </IgrIconButton>
+        <IgrIconButton variant="flat">
+          <span className={classes("imx-icon imx-linkedin")} key={uuid()}></span>
+          <IgrRipple key={uuid()}></IgrRipple>
+        </IgrIconButton>
+      </>
+    )
+  }
+
   return (
     <>
       <div className={classes("row-layout org-charthr-portal-container")}>
@@ -42,53 +83,10 @@ export default function OrgChartHRPortal() {
           <IgrColumn field="Name" dataType="string" header="Name" width="300px" pinned="true" sortable="true" bodyTemplate={columnBodyTemplate} selectable="false"></IgrColumn>
           <IgrColumn field="JobTitle" dataType="string" header="Job Title" sortable="true" selectable="false"></IgrColumn>
           <IgrColumn field="Department" dataType="string" header="Department" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Location" dataType="string" header="Location" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Country" dataType="string" header="Country" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="GrossSalary" dataType="number" header="GrossSalary" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Phone" dataType="string" header="Phone" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Contacts" dataType="string" header="Contacts" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Picture" dataType="string" header="Picture" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Age" dataType="number" header="Age" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn field="Location" dataType="string" header="Location" sortable="true" bodyTemplate={columnBodyTemplate1} selectable="false"></IgrColumn>
+          <IgrColumn field="Contacts" dataType="string" header="Contacts" sortable="true" bodyTemplate={columnBodyTemplate2} selectable="false"></IgrColumn>
           <IgrColumn field="HireDate" dataType="date" header="HireDate" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Employees" dataType="array" header="Employees" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="ID" dataType="number" header="Employees ID" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Name" dataType="string" header="Employees Name" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="JobTitle" dataType="string" header="Employees JobTitle" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Department" dataType="string" header="Employees Department" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Location" dataType="string" header="Employees Location" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Country" dataType="string" header="Employees Country" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="GrossSalary" dataType="number" header="Employees GrossSalary" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Phone" dataType="string" header="Employees Phone" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Contacts" dataType="string" header="Employees Contacts" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Picture" dataType="string" header="Employees Picture" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Age" dataType="number" header="Employees Age" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="HireDate" dataType="date" header="Employees HireDate" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Employees" dataType="array" header="Employees Employees" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="ID" dataType="number" header="Employees Employees ID" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Name" dataType="string" header="Employees Employees Name" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="JobTitle" dataType="string" header="Employees Employees JobTitle" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Department" dataType="string" header="Employees Employees Department" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Location" dataType="string" header="Employees Employees Location" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Country" dataType="string" header="Employees Employees Country" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="GrossSalary" dataType="number" header="Employees Employees GrossSalary" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Phone" dataType="string" header="Employees Employees Phone" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Contacts" dataType="string" header="Employees Employees Contacts" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Picture" dataType="string" header="Employees Employees Picture" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Age" dataType="number" header="Employees Employees Age" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="HireDate" dataType="date" header="Employees Employees HireDate" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Employees" dataType="array" header="Employees Employees Employees" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="ID" dataType="number" header="Employees Employees Employees ID" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Name" dataType="string" header="Employees Employees Employees Name" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="JobTitle" dataType="string" header="Employees Employees Employees JobTitle" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Department" dataType="string" header="Employees Employees Employees Department" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Location" dataType="string" header="Employees Employees Employees Location" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Country" dataType="string" header="Employees Employees Employees Country" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="GrossSalary" dataType="number" header="Employees Employees Employees GrossSalary" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Phone" dataType="string" header="Employees Employees Employees Phone" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Contacts" dataType="string" header="Employees Employees Employees Contacts" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Picture" dataType="string" header="Employees Employees Employees Picture" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="Age" dataType="number" header="Employees Employees Employees Age" sortable="true" selectable="false"></IgrColumn>
-          <IgrColumn field="HireDate" dataType="date" header="Employees Employees Employees HireDate" sortable="true" selectable="false"></IgrColumn>
+          <IgrColumn field="GrossSalary" dataType="number" header="GrossSalary" sortable="true" selectable="false"></IgrColumn>
         </IgrTreeGrid>
       </div>
     </>
diff --git a/src/assets/Zoom.png b/src/assets/Zoom.png
new file mode 100644
index 0000000000000000000000000000000000000000..cbce0151f2e3641da158b93b5e5e4641ae34d2eb
GIT binary patch
literal 26230
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
AGynhq

literal 0
HcmV?d00001


From 348f4a95d63caf6b34637f2b2ce7bb0625a8e8b5 Mon Sep 17 00:00:00 2001
From: Deyan Kamburov <dkamburov@users.noreply.github.com>
Date: Thu, 3 Apr 2025 15:01:21 +0300
Subject: [PATCH 3/4] grid landing pages updates

---
 generationLogs.json                                   | 2 +-
 src/app/models/ERPProducts/table1-type-erpproducts.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/generationLogs.json b/generationLogs.json
index 386ed54..f15922b 100644
--- a/generationLogs.json
+++ b/generationLogs.json
@@ -1 +1 @@
-[{"Text":"Component with Id 3f93ffc8-18aa-4ea3-acb2-c80823127a50 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a8b89ecd-1b63-4286-a5b7-893a0354471c try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e6ab092d-2237-4a4b-b847-1a61622c27fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 76cb7ce3-78ca-4b1e-a1a1-7911ce3f407e try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id e8843921-647f-4dab-bb0b-11c232dc169f try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 64222c38-a9d4-448e-b4a8-fda6a23f2cb5 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 3ce00d5b-db5c-4cbc-a106-ff38689eba44 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id a3b6e72a-ec01-4f60-b319-a7c92aecd0dd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 5bd7a64d-4bb9-41a2-abf5-3300a9c949fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 952b3930-13d1-477a-b43b-a2daf0595569 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id f0305457-ff36-4f5b-9e4f-f5925738a151 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a010c605-14b8-4c9f-938d-22279965ece8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 5a76479c-49ad-4859-a754-86c7f2dcb8de try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id 280fdc5b-3f1c-4d19-8dd7-dff0a11445a4 try to add CSS class name ig-scrollbar. Class name already exists in this view!","Type":1},{"Text":"Component '' with id '826df48f-2fd2-4376-bcac-daaf56423363' has property value of type 'number' which is not in the correct format.","Type":1},{"Text":"Component with Id 112a5f47-fca2-46be-9a5e-bde316fccee8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 692a2005-5c6e-457c-b25a-8c54c02e5945 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e35f768d-97b4-40a6-a6ba-9ec9083e8071 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 2e6962f4-c6d8-499f-a2a5-136f6d4e0de8 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id 19e304aa-28d0-4de6-baf3-aeb8594a160d try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id f03fddd8-ece8-454e-8b40-7eb429db94d8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component '' with id 'e96b25bf-9912-43a8-b4c1-6cf704a2c49c' has property with no name. Property was not generated.","Type":1},{"Text":"Component '' with id 'e96b25bf-9912-43a8-b4c1-6cf704a2c49c' has property with no name. Property was not generated.","Type":1}]
\ No newline at end of file
+[{"Text":"Component with Id 3f93ffc8-18aa-4ea3-acb2-c80823127a50 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a8b89ecd-1b63-4286-a5b7-893a0354471c try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e6ab092d-2237-4a4b-b847-1a61622c27fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 44ecc76a-25ab-4b97-bf29-960b64b702a3 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id e8843921-647f-4dab-bb0b-11c232dc169f try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 64222c38-a9d4-448e-b4a8-fda6a23f2cb5 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id feb196f5-93c7-43e5-acc6-7fad2186854c try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id a3b6e72a-ec01-4f60-b319-a7c92aecd0dd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 5bd7a64d-4bb9-41a2-abf5-3300a9c949fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 380ea5d4-a526-4233-aaed-0c2e66df1a3b try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id f0305457-ff36-4f5b-9e4f-f5925738a151 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a010c605-14b8-4c9f-938d-22279965ece8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 3305aa8f-6dcc-4085-a1d0-23277ec4bbb0 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id 280fdc5b-3f1c-4d19-8dd7-dff0a11445a4 try to add CSS class name ig-scrollbar. Class name already exists in this view!","Type":1},{"Text":"Component '' with id '826df48f-2fd2-4376-bcac-daaf56423363' has property value of type 'number' which is not in the correct format.","Type":1},{"Text":"Component with Id 112a5f47-fca2-46be-9a5e-bde316fccee8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 692a2005-5c6e-457c-b25a-8c54c02e5945 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e35f768d-97b4-40a6-a6ba-9ec9083e8071 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id d772c5c6-7610-418b-b915-28c19fcf26e7 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id 19e304aa-28d0-4de6-baf3-aeb8594a160d try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id f03fddd8-ece8-454e-8b40-7eb429db94d8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component '' with id '0f419a6e-fe68-4767-9f79-ac04fda8a760' has property with no name. Property was not generated.","Type":1},{"Text":"Component '' with id '0f419a6e-fe68-4767-9f79-ac04fda8a760' has property with no name. Property was not generated.","Type":1}]
\ No newline at end of file
diff --git a/src/app/models/ERPProducts/table1-type-erpproducts.ts b/src/app/models/ERPProducts/table1-type-erpproducts.ts
index 6e52283..b8d4f2d 100644
--- a/src/app/models/ERPProducts/table1-type-erpproducts.ts
+++ b/src/app/models/ERPProducts/table1-type-erpproducts.ts
@@ -1,5 +1,5 @@
-import { SalesTrendDataType } from './sales-trend-data-type';
 import { OrdersType } from './orders-type';
+import { SalesTrendDataType } from './sales-trend-data-type';
 
 export interface Table1TypeERPProducts {
   sku: string;

From 09e0f6e58e974dda48d868705e7d5f6599a6e04e Mon Sep 17 00:00:00 2001
From: Deyan Kamburov <dkamburov@users.noreply.github.com>
Date: Thu, 3 Apr 2025 15:02:45 +0300
Subject: [PATCH 4/4] grid landing pages updates

---
 generationLogs.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/generationLogs.json b/generationLogs.json
index f15922b..de4fc85 100644
--- a/generationLogs.json
+++ b/generationLogs.json
@@ -1 +1 @@
-[{"Text":"Component with Id 3f93ffc8-18aa-4ea3-acb2-c80823127a50 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a8b89ecd-1b63-4286-a5b7-893a0354471c try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e6ab092d-2237-4a4b-b847-1a61622c27fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 44ecc76a-25ab-4b97-bf29-960b64b702a3 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id e8843921-647f-4dab-bb0b-11c232dc169f try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 64222c38-a9d4-448e-b4a8-fda6a23f2cb5 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id feb196f5-93c7-43e5-acc6-7fad2186854c try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id a3b6e72a-ec01-4f60-b319-a7c92aecd0dd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 5bd7a64d-4bb9-41a2-abf5-3300a9c949fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 380ea5d4-a526-4233-aaed-0c2e66df1a3b try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id f0305457-ff36-4f5b-9e4f-f5925738a151 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a010c605-14b8-4c9f-938d-22279965ece8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 3305aa8f-6dcc-4085-a1d0-23277ec4bbb0 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id 280fdc5b-3f1c-4d19-8dd7-dff0a11445a4 try to add CSS class name ig-scrollbar. Class name already exists in this view!","Type":1},{"Text":"Component '' with id '826df48f-2fd2-4376-bcac-daaf56423363' has property value of type 'number' which is not in the correct format.","Type":1},{"Text":"Component with Id 112a5f47-fca2-46be-9a5e-bde316fccee8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 692a2005-5c6e-457c-b25a-8c54c02e5945 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e35f768d-97b4-40a6-a6ba-9ec9083e8071 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id d772c5c6-7610-418b-b915-28c19fcf26e7 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id 19e304aa-28d0-4de6-baf3-aeb8594a160d try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id f03fddd8-ece8-454e-8b40-7eb429db94d8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component '' with id '0f419a6e-fe68-4767-9f79-ac04fda8a760' has property with no name. Property was not generated.","Type":1},{"Text":"Component '' with id '0f419a6e-fe68-4767-9f79-ac04fda8a760' has property with no name. Property was not generated.","Type":1}]
\ No newline at end of file
+[{"Text":"Component with Id 3f93ffc8-18aa-4ea3-acb2-c80823127a50 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a8b89ecd-1b63-4286-a5b7-893a0354471c try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e6ab092d-2237-4a4b-b847-1a61622c27fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id db9384fb-b8b2-42c9-8412-a10feef648e3 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id e8843921-647f-4dab-bb0b-11c232dc169f try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 64222c38-a9d4-448e-b4a8-fda6a23f2cb5 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 1b916aba-2abf-4f35-8eb6-8c4837054a6d try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id a3b6e72a-ec01-4f60-b319-a7c92aecd0dd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 5bd7a64d-4bb9-41a2-abf5-3300a9c949fd try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id f71aeb5f-fbf6-491d-8e8b-1a7c3dc68d44 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id f0305457-ff36-4f5b-9e4f-f5925738a151 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id a010c605-14b8-4c9f-938d-22279965ece8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id dd4be239-81ca-42a5-888c-579ae78091e6 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id 280fdc5b-3f1c-4d19-8dd7-dff0a11445a4 try to add CSS class name ig-scrollbar. Class name already exists in this view!","Type":1},{"Text":"Component '' with id '826df48f-2fd2-4376-bcac-daaf56423363' has property value of type 'number' which is not in the correct format.","Type":1},{"Text":"Component with Id 112a5f47-fca2-46be-9a5e-bde316fccee8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id 692a2005-5c6e-457c-b25a-8c54c02e5945 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e35f768d-97b4-40a6-a6ba-9ec9083e8071 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id e8a820e0-b189-44bf-912e-c78dcd9eb966 try to add CSS class name material-icons. Class name already exists in this view!","Type":1},{"Text":"Component with Id 19e304aa-28d0-4de6-baf3-aeb8594a160d try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component with Id f03fddd8-ece8-454e-8b40-7eb429db94d8 try to add CSS class name typography__body-1. Class name already exists in this view!","Type":1},{"Text":"Component '' with id '5cd92221-1e48-485d-aba5-d4c514e40be9' has property with no name. Property was not generated.","Type":1},{"Text":"Component '' with id '5cd92221-1e48-485d-aba5-d4c514e40be9' has property with no name. Property was not generated.","Type":1}]
\ No newline at end of file