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,11 @@
  margin: auto;
  }
 }
+
+img[src$="#block"] {
+ position: absolute;
+ margin-top: 15px;
+ height: 40px;
+ 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