eclipse-tractusx · manojava-gk · Jun 10, 2024 · Jul 3, 2024 · Jul 3, 2024 · Jul 4, 2024
diff --git a/docs-kits/kits/Behaviour Twin MDP Kit/page_adoption-view.md b/docs-kits/kits/Behaviour Twin MDP Kit/page_adoption-view.md
@@ -4,6 +4,8 @@ title: Adoption View
 description: Model Based Development and Data Processing Kit
 ---
 
+# Adoption View ![Block image](/img/graduated-dots.png#block)
+
 ![Model Based Development and Data Processing Kit banner](/img/kit-icons/behaviour-mdp-kit-icon.svg)
 
 ### Model Based Development and Data Processing Kit

diff --git a/docs-kits/kits/Business Partner Kit/page_adoption-view.md b/docs-kits/kits/Business Partner Kit/page_adoption-view.md
@@ -5,6 +5,8 @@ description: 'Business Partner Kit'
 sidebar_position: 2
 ---
 
+# Adoption View ![Block image](/img/graduated-dots.png#block)
+
 ![Business partner kit banner](/img/kit-icons/bp-kit-icon.svg)
 
 ## Business Partner KIT

diff --git a/docs-kits/kits/Circularity_KIT/page-adoption-view.md b/docs-kits/kits/Circularity_KIT/page-adoption-view.md
@@ -2,6 +2,8 @@
 title: Adoption View
 ---
 
+# Adoption View ![Block image](/img/incubating-dots.png#block)
+
 ![Circulairty Kit banner](/img/kit-icons/circularity-kit-icon.svg)
 
 ## Circularity KIT

diff --git a/docs-kits/kits/Connector Kit/Adoption View/adoption-view.md b/docs-kits/kits/Connector Kit/Adoption View/adoption-view.md
@@ -5,6 +5,8 @@ description: Adoption View
 id: connector_kit_adoption_view
 ---
 
+# Adoption View ![Block image](/img/graduated-dots.png#block)
+
 ![Connector kit banner](/img/kit-icons/connector-kit-icon.svg)
 
 ## Connector KIT

diff --git a/docs-kits/kits/DCM-Kit/page_adoption-view.md b/docs-kits/kits/DCM-Kit/page_adoption-view.md
@@ -7,6 +7,8 @@ toc_min_heading_level: 2
 toc_max_heading_level: 2
 ---
 
+# Adoption View ![Block image](/img/incubating-dots.png#block)
+
 ![DCM kit banner](/img/kit-icons/dcm-kit-icon.svg)
 
 ## Vision & Mission

diff --git a/docs-kits/kits/Data Chain Kit/page_adoption-view.md b/docs-kits/kits/Data Chain Kit/page_adoption-view.md
@@ -5,6 +5,8 @@ description: 'Data Chain Kit'
 sidebar_position: 1
 ---
 
+# Adoption View ![Block image](/img/graduated-dots.png#block)
+
 ![Datachain kit banner](/img/kit-icons/datachain-kit-icon.svg)
 
 ### Data Chain Kit

diff --git a/docs-kits/kits/Data Governance Kit/page_adoption-view.md b/docs-kits/kits/Data Governance Kit/page_adoption-view.md
@@ -4,6 +4,9 @@ title: Adoption View
 description: 'Data Governance Kit'
 sidebar_position: 2
 ---
+
+# Adoption View ![Block image](/img/sandbox-dots.png#block)
+
 ## Data Governance KIT
 
 <!--

diff --git a/docs-kits/kits/Digital Twin Kit/page_adoption-view.md b/docs-kits/kits/Digital Twin Kit/page_adoption-view.md
@@ -5,6 +5,8 @@ description: 'Digital Twin Kit'
 sidebar_position: 2
 ---
 
+# Adoption View ![Block image](/img/graduated-dots.png#block)
+
 <!--
 Adoption View of the Kit.
 -->

diff --git a/docs-kits/kits/ESS-Kit/page_adoption-view.md b/docs-kits/kits/ESS-Kit/page_adoption-view.md
@@ -5,6 +5,8 @@ description: 'Environmental and Social Standards Incident Management Kit'
 sidebar_position: 2
 ---
 
+# Adoption View ![Block image](/img/sandbox-dots.png#block)
+
 ![ESS Kit Icon](@site/static/img/kit-icons/ess-kit-icon.svg)
 
 ## Vision & Mission

diff --git a/docs-kits/kits/Eco_Pass_KIT/page-adoption-view.md b/docs-kits/kits/Eco_Pass_KIT/page-adoption-view.md
@@ -2,6 +2,8 @@
 title: Adoption View
 ---
 
+# Adoption View ![Block image](/img/graduated-dots.png#block)
+
 ![EcoPass KIT Pictotogram](/img/kit-icons/ecopass-kit-icon.svg)
 
 ## Introduction

diff --git a/docs-kits/kits/Industry Core Kit/page_business_view.mdx b/docs-kits/kits/Industry Core Kit/page_business_view.mdx
@@ -5,6 +5,8 @@ description: 'Industry Core Kit'
 sidebar_position: 1
 ---
 
+# Business View ![Block image](/img/graduated-dots.png#block)
+
 <!--
 This work is licensed under the CC-BY-4.0 (https://creativecommons.org/licenses/by/4.0/legalcode).
 

diff --git a/docs-kits/kits/Manufacturing as a Service Kit/page_adoption-view.md b/docs-kits/kits/Manufacturing as a Service Kit/page_adoption-view.md
@@ -5,6 +5,8 @@ description: 'MaaS KIT'
 sidebar_position: 2
 ---
 
+# Adoption View ![Block image](/img/incubating-dots.png#block)
+
 ![Maas kit banner](/img/kit-icons/manufacturing-kit-icon.svg)
 
 ### Manufacturing as a Service KIT

diff --git a/docs-kits/kits/Modular Production Kit/page_adoption-view.md b/docs-kits/kits/Modular Production Kit/page_adoption-view.md
@@ -5,6 +5,8 @@ description: 'Modular Production Kit'
 sidebar_position: 2
 ---
 
+# Adoption View ![Block image](/img/incubating-dots.png#block)
+
 ![mp kit banner](/img/kit-icons/modular-production-kit-icon.svg)
 
 ### Modular Production Kit

diff --git a/docs-kits/kits/OSim Kit/page_adoption-view.md b/docs-kits/kits/OSim Kit/page_adoption-view.md
@@ -5,6 +5,8 @@ description: 'OSim Kit'
 sidebar_position: 2
 ---
 
+# Adoption View ![Block image](/img/incubating-dots.png#block)
+
 ![osim kit banner](@site/static/img/OSimKitIcon.svg)
 
 ### OSim Kit

diff --git a/docs-kits/kits/PCF Exchange Kit/page_adoption-view.md b/docs-kits/kits/PCF Exchange Kit/page_adoption-view.md
@@ -5,6 +5,8 @@ description: 'PCF-Exchange-KIT'
 sidebar_position: 2
 ---
 
+# Adoption View ![Block image](/img/incubating-dots.png#block)
+
 ![PCF Exchange kit banner](/img/kit-icons/pcf-kit-icon.svg)
 
 ## Introduction

diff --git a/docs-kits/kits/PURIS Kit/page_adoption-view.md b/docs-kits/kits/PURIS Kit/page_adoption-view.md
@@ -5,6 +5,8 @@ description: 'PURIS Kit'
 sidebar_position: 2
 ---
 
+# Adoption View ![Block image](/img/incubating-dots.png#block)
+
 ### PURIS Kit
 
 ## Vision & Mission

diff --git a/docs-kits/kits/Quality-Kit/page_adoption-view.md b/docs-kits/kits/Quality-Kit/page_adoption-view.md
@@ -5,6 +5,8 @@ description: 'Quality Kit'
 sidebar_position: 2
 ---
 
+# Adoption View ![Block image](/img/incubating-dots.png#block)
+
 ![Quality kit banner](/img/kit-icons/quality-kit-icon.svg)
 
 ### Quality KIT

diff --git a/docs-kits/kits/Traceability Kit/page_business_view.mdx b/docs-kits/kits/Traceability Kit/page_business_view.mdx
@@ -5,6 +5,8 @@ description: 'Traceability Kit'
 sidebar_position: 1
 ---
 
+# Business View ![Block image](/img/graduated-dots.png#block)
+
 <!---
 This work is licensed under the CC-BY-4.0 (https://creativecommons.org/licenses/by/4.0/legalcode).
 

diff --git a/docs-kits/kits/behaviour-twin-kit/overview.md b/docs-kits/kits/behaviour-twin-kit/overview.md
@@ -5,7 +5,7 @@ hide_title: true
 description: Behaviour Twin KIT
 ---
 
-<div style={{fontSize:60, color:'rgb(255,166,1)', marginBottom:8, marginTop:0, paddingTop:0}}>BEHAVIOUR TWIN KIT</div>
+# Behaviour Twin KIT ![Block image](/img/graduated-dots.png#block)
 
 ![Behaviour Twin KIT banner](@site/static/img/kit-icons/behaviour-twin-kit-icon.svg)
 

diff --git a/docs-kits/kits/knowledge-agents/adoption-view/intro.md b/docs-kits/kits/knowledge-agents/adoption-view/intro.md
@@ -3,6 +3,8 @@ sidebar_position: 1
 title: Adoption View
 ---
 
+# Adotoption View ![Block image](/img/graduated-dots.png#block)
+
 <!--
  * Copyright (c) 2021,2024 T-Systems International GmbH
  * Copyright (c) 2021,2023 Bayerische Motoren Werke Aktiengesellschaft (BMW AG) 

diff --git a/src/components/KitsGalleryWithFilters/index.js b/src/components/KitsGalleryWithFilters/index.js
@@ -28,8 +28,10 @@ import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
 import styles from "./styles.module.css";
 
+
 export default function KitsGalleryWithFilters({itemsArray, title, description}) {
   const [selectedDomain, setSelectedDomain] = useState('All Domains');
+  const [selectedMaturityLevel, setSelectedMaturityLevel] = useState('Maturity Levels');
   const [filteredAndSortedKits, setFilteredAndSortedKits] = useState(itemsArray);
   const [sortOrder, setSortOrder] = useState('asc');
 
@@ -41,23 +43,33 @@ export default function KitsGalleryWithFilters({itemsArray, title, description})
 
   // In charge of filter the cards by domain, keeping the selected sorted order
   const handleDomainChange = (event) => {
-    const selectedDomain = event.target.value;
-    setSelectedDomain(selectedDomain);
-
+    setSelectedDomain(event.target.value);
+  };
+
+  // In charge of filter the cards by maturity levels
+  const handleMaturityLevelChange = (event) => {
+    setSelectedMaturityLevel(event.target.value);
+  };
+
+  useEffect(() => {
     let filteredKits = itemsArray;
-    if (selectedDomain !== 'All Domains') {
-      filteredKits = itemsArray.filter((kit) => kit.domain === selectedDomain);
-    }
-
     let sortedKits = filteredKits;
+    if(selectedDomain !== 'All Domains') {
+      filteredKits = itemsArray.filter((kit) => kit.domain === selectedDomain); 
+    }
+    if(selectedMaturityLevel !== 'Maturity Levels') {
+      sortedKits = filteredKits.filter((kit) => kit.maturityLevel === selectedMaturityLevel);
+    } else {
+      sortedKits = filteredKits
+    }
     if (sortOrder === 'asc') {
       sortedKits.sort((a, b) => a.name.localeCompare(b.name));
     } else {
       sortedKits.sort((a, b) => b.name.localeCompare(a.name));
     }
 
     setFilteredAndSortedKits(sortedKits);
-  };
+  },[selectedDomain,selectedMaturityLevel])
 
   // In charge of switch the sorted order by name from "asc" to "des" and vice versa
   const handleSort = () => {
@@ -149,6 +161,51 @@ export default function KitsGalleryWithFilters({itemsArray, title, description})
               </Select>
             </FormControl>
           </Box>
+          <Box>
+            <FormControl
+              size="small"
+            >
+              <Select
+                labelId="domain-label"
+                id="domain-options"
+                value={selectedMaturityLevel}
+                onChange={handleMaturityLevelChange}
+                sx={
+                  {
+                    color: '#fff',
+                    padding: '0 0.5rem',
+                    '& .MuiSvgIcon-root': {
+                      color: '#faa023',
+                    },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      borderColor: '#faa023'
+                    },
+                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                      borderColor: '#c37304',
+                    },
+                    '&:hover .MuiOutlinedInput-notchedOutline': {
+                      borderColor: '#ed8c05',
+                    }
+                  }
+                }
+                inputProps={{
+                  MenuProps: {
+                    MenuListProps: {
+                      sx: {
+                        backgroundColor: '#1f1f1f',
+                        color: '#fff',
+                      }
+                    },
+                  }
+                }}
+              >
+                <MenuItem value={'Maturity Levels'}>Maturity Levels</MenuItem>
+                <MenuItem value={'Sandbox'}>Sandbox</MenuItem>
+                <MenuItem value={'Incubating'}>Incubating</MenuItem>
+                <MenuItem value={'Graduated'}>Graduated</MenuItem>
+              </Select>
+            </FormControl>
+          </Box>
 
           <div className={styles.button_container}>
             {

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -324,3 +324,21 @@
     margin: auto;
   }
 }
+
+img[src$="#block"] {
+  position: absolute;
+  margin-top: 15px;
+  height: 40px;
+  width: auto;
+  margin-left: 10px;
+}
+
+@media screen and (max-width: 600px) {
+  img[src$="#block"] {
+    position: absolute;
+    margin-top: 8px;
+    height: 30px;
+    width: auto;
+    margin-left: 10px;
+  }
+}
diff --git a/static/img/graduated-dots.png b/static/img/graduated-dots.png
diff --git a/static/img/incubating-dots.png b/static/img/incubating-dots.png
diff --git a/static/img/mdp_image.png b/static/img/mdp_image.png
diff --git a/static/img/sandbox-dots.png b/static/img/sandbox-dots.png
diff --git a/static/img/version.png b/static/img/version.png