From cfd1ca33fe3101fa65d72f3a7537a6ad5d9fdde4 Mon Sep 17 00:00:00 2001
From: san-zrl <san@zurich.ibm.com>
Date: Mon, 2 Sep 2024 15:04:00 +0200
Subject: [PATCH] feat: render CBOM 1.6 data

Signed-off-by: san-zrl <san@zurich.ibm.com>

update: Ikev2Types rendering
---
 package-lock.json                             |   2 +-
 package.json                                  |   2 +-
 src/containers/DefaultContainer.vue           |   6 +
 src/forms/BInputGroupFormInputNumber.vue      | 132 ++++
 src/forms/BInputGroupFormSelectMultiple.vue   | 116 +++
 src/i18n/locales/en.json                      | 101 +++
 src/router/index.js                           |  22 +
 src/shared/api.json                           |   1 +
 src/shared/common.js                          |   2 +
 src/views/dashboard/CryptoAssetWidgetRow.vue  | 117 +++
 src/views/dashboard/WidgetCryptoAssets.vue    |  87 +++
 .../dashboard/WidgetMostUsedAlgorithm.vue     |  87 +++
 src/views/dashboard/WidgetNumberOfKeys.vue    |  87 +++
 .../portfolio/cryptoassets/CryptoAssets.vue   | 271 +++++++
 .../projects/ComponentDetailsModal.vue        | 714 ++++++++++++++++++
 src/views/portfolio/projects/CryptoAsset.vue  |  80 ++
 .../projects/ProjectAddComponentModal.vue     |   4 +-
 .../projects/ProjectCreateProjectModal.vue    |   4 +-
 .../projects/ProjectCryptoAssets.vue          | 229 ++++++
 19 files changed, 2058 insertions(+), 6 deletions(-)
 create mode 100644 src/forms/BInputGroupFormInputNumber.vue
 create mode 100644 src/forms/BInputGroupFormSelectMultiple.vue
 create mode 100644 src/views/dashboard/CryptoAssetWidgetRow.vue
 create mode 100644 src/views/dashboard/WidgetCryptoAssets.vue
 create mode 100644 src/views/dashboard/WidgetMostUsedAlgorithm.vue
 create mode 100644 src/views/dashboard/WidgetNumberOfKeys.vue
 create mode 100644 src/views/portfolio/cryptoassets/CryptoAssets.vue
 create mode 100644 src/views/portfolio/projects/CryptoAsset.vue
 create mode 100644 src/views/portfolio/projects/ProjectCryptoAssets.vue

diff --git a/package-lock.json b/package-lock.json
index 8c210514..39b9fe88 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,7 +63,7 @@
         "@vue/cli-service": "3.12.1",
         "@vue/runtime-dom": "3.4.21",
         "copy-webpack-plugin": "5.1.2",
-        "cross-env": "7.0.3",
+        "cross-env": "^7.0.3",
         "eslint": "8.57.0",
         "eslint-config-prettier": "9.1.0",
         "eslint-plugin-prettier": "5.1.3",
diff --git a/package.json b/package.json
index 68af4a08..540a6af2 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,7 @@
     "@vue/cli-service": "3.12.1",
     "@vue/runtime-dom": "3.4.21",
     "copy-webpack-plugin": "5.1.2",
-    "cross-env": "7.0.3",
+    "cross-env": "^7.0.3",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.1.3",
diff --git a/src/containers/DefaultContainer.vue b/src/containers/DefaultContainer.vue
index 9190536d..5a8bb170 100644
--- a/src/containers/DefaultContainer.vue
+++ b/src/containers/DefaultContainer.vue
@@ -90,6 +90,12 @@ export default {
           icon: 'fa fa-cubes',
           permission: permissions.VIEW_PORTFOLIO,
         },
+        {
+          name: this.$t('message.crypto_assets'),
+          url: '/cryptoassets',
+          icon: 'fa fa-lock',
+          permission: permissions.VIEW_PORTFOLIO,
+        },
         {
           name: this.$t('message.vulnerabilities'),
           url: '/vulnerabilities',
diff --git a/src/forms/BInputGroupFormInputNumber.vue b/src/forms/BInputGroupFormInputNumber.vue
new file mode 100644
index 00000000..2b7d8fe6
--- /dev/null
+++ b/src/forms/BInputGroupFormInputNumber.vue
@@ -0,0 +1,132 @@
+<template>
+  <b-form-group
+    :id="id"
+    :label="label"
+    :label-for="`${id}-input`"
+    :label-class="labelClasses"
+  >
+    <b-input-group :class="inputGroupSize">
+      <b-input-group-prepend v-if="icon"
+        ><b-input-group-text><i :class="icon"></i></b-input-group-text
+      ></b-input-group-prepend>
+      <b-form-input
+        :id="`${id}-input`"
+        :type="type"
+        :class="inputClasses"
+        v-model="innerValue"
+        :placeholder="label"
+        :state="feedbackState()"
+        :autocomplete="autocomplete"
+        :autofocus="isFocused"
+        :required="isRequired"
+        :readonly="readonly"
+        :disabled="isDisabled"
+        v-on="inputListeners"
+        v-on:blur="hadFocus = true"
+        trim
+      />
+      <b-input-group-append v-if="tooltip"
+        ><b-input-group-text v-b-tooltip.hover :title="tooltip"
+          ><i class="cui-info font-lg"></i></b-input-group-text
+      ></b-input-group-append>
+    </b-input-group>
+    <b-form-invalid-feedback
+      v-if="this.feedback === 'true'"
+      :state="feedbackState()"
+    >
+      {{ feedbackText }}
+    </b-form-invalid-feedback>
+  </b-form-group>
+</template>
+
+<script>
+import common from '../shared/common';
+
+export default {
+  props: {
+    id: String,
+    label: String,
+    value: Number,
+    inputGroupSize: String,
+    icon: String,
+    type: String,
+    autocomplete: String,
+    autofocus: String,
+    tooltip: String,
+    feedbackText: String,
+    feedback: String,
+    lazy: String,
+    required: String,
+    readonly: Boolean,
+    disabled: String,
+    state: {
+      default: undefined,
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      isFocused: false,
+      isRequired: false,
+      isDisabled: false,
+      hadFocus: false,
+    };
+  },
+  beforeMount() {
+    this.isFocused = common.toBoolean(this.autofocus);
+    this.isRequired = common.toBoolean(this.required);
+    this.isDisabled = common.toBoolean(this.disabled);
+  },
+  computed: {
+    innerValue: {
+      get: function () {
+        if (this.value && this.value.length > 0) {
+          //
+        }
+        return this.value;
+      },
+      set: function (newValue) {
+        return newValue;
+      },
+    },
+    inputListeners: function () {
+      const vm = this;
+      return Object.assign({}, this.$listeners, {
+        input: function (event) {
+          vm.$emit('input', event);
+        },
+      });
+    },
+    inputClasses: function () {
+      return this.isRequired ? 'required' : null;
+    },
+    labelClasses: function () {
+      return this.isRequired ? 'required' : null;
+    },
+  },
+  methods: {
+    feedbackState: function () {
+      if (this.isDisabled && !this.isRequired) {
+        return undefined;
+      }
+      if (this.state !== undefined) {
+        return this.state;
+      }
+      if (common.toBoolean(this.lazy) && common.toBoolean(this.required)) {
+        if (this.value && this.value.length > 0) {
+          return true;
+        } else if (this.hadFocus) {
+          return false;
+        } else {
+          return undefined;
+        }
+      }
+      if (this.value && this.value.length > 0) {
+        return true;
+      } else {
+        return undefined;
+      }
+    },
+  },
+};
+</script>
diff --git a/src/forms/BInputGroupFormSelectMultiple.vue b/src/forms/BInputGroupFormSelectMultiple.vue
new file mode 100644
index 00000000..da5f75eb
--- /dev/null
+++ b/src/forms/BInputGroupFormSelectMultiple.vue
@@ -0,0 +1,116 @@
+<template>
+  <b-form-group
+    :id="id"
+    :label="label"
+    :label-for="`${id}-input`"
+    :label-class="labelClasses"
+  >
+    <b-input-group :class="inputGroupSize">
+      <b-input-group-prepend v-if="icon"
+        ><b-input-group-text><i :class="icon"></i></b-input-group-text
+      ></b-input-group-prepend>
+
+      <b-form-select
+        :id="`${id}-input`"
+        v-model="value"
+        :options="options"
+        multiple
+        :select-size="3"
+        :autofocus="isFocused"
+        :disabled="disabled"
+        :required="isRequired"
+        :state="feedbackState()"
+        :class="inputClasses"
+        v-on="inputListeners"
+        v-on:blur="hadFocus = true"
+      />
+
+      <b-input-group-append v-if="tooltip"
+        ><b-input-group-text v-b-tooltip.hover :title="tooltip"
+          ><i class="cui-info font-lg"></i></b-input-group-text
+      ></b-input-group-append>
+    </b-input-group>
+    <b-form-invalid-feedback
+      v-if="this.feedback === 'true'"
+      :state="feedbackState()"
+    >
+      {{ feedbackText }}
+    </b-form-invalid-feedback>
+  </b-form-group>
+</template>
+
+<script>
+import common from '../shared/common';
+
+export default {
+  props: {
+    id: String,
+    label: String,
+    value: Array,
+    options: Array,
+    inputGroupSize: String,
+    icon: String,
+    type: String,
+    autocomplete: String,
+    autofocus: String,
+    tooltip: String,
+    feedbackText: String,
+    feedback: String,
+    lazy: String,
+    required: String,
+    disabled: Boolean,
+    state: {
+      default: undefined,
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      isFocused: false,
+      isRequired: false,
+      hadFocus: false,
+    };
+  },
+  beforeMount() {
+    this.isFocused = common.toBoolean(this.autofocus);
+    this.isRequired = common.toBoolean(this.required);
+  },
+  computed: {
+    inputListeners: function () {
+      const vm = this;
+      return Object.assign({}, this.$listeners, {
+        input: function (event) {
+          vm.$emit('input', event);
+        },
+      });
+    },
+    inputClasses: function () {
+      return this.isRequired ? 'required' : null;
+    },
+    labelClasses: function () {
+      return this.isRequired ? 'required' : null;
+    },
+  },
+  methods: {
+    feedbackState: function () {
+      if (this.state !== undefined) {
+        return this.state;
+      }
+      if (common.toBoolean(this.lazy) && common.toBoolean(this.required)) {
+        if (this.value && this.value.length > 0) {
+          return true;
+        } else if (this.hadFocus) {
+          return false;
+        } else {
+          return undefined;
+        }
+      }
+      if (this.value && this.value.length > 0) {
+        return true;
+      } else {
+        return undefined;
+      }
+    },
+  },
+};
+</script>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 94327b2d..07728cd0 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -392,6 +392,8 @@
     "component_classification_desc": "Classifies whether a component is considered internal or external to an organization",
     "component_classifier_desc": "Specifies the type of component: Assets (applications, operating systems, and hardware) and non-assets (libraries, frameworks, and files)",
     "component_container": "Container",
+    "component_cryptographic_asset": "Cryptographic Asset",
+    "component_cryptographic_properties": "Cryptographic Properties",
     "component_cpe_desc": "The CPE v2.2 or v2.3 URI as provided by MITRE or NIST. All assets (applications, operating systems, and hardware) should have a CPE specified",
     "component_created": "Component created",
     "component_deleted": "Component deleted",
@@ -442,6 +444,104 @@
     "create_vulnerability": "Create Vulnerability",
     "created": "Created",
     "credits": "Credits",
+    "crypto_assets": "Crypto Assets",
+    "crypto_asset": "Crypto Asset",
+    "crypto_assetType": "Asset Type",
+    "crypto_assetType_desc": "The type of the crypto asset as provided by the supplier",
+    "crypto_algo_primitive": "Primitive",
+    "crypto_algo_primitive_desc": "The primitive of the crytographic algorithm",
+    "crypto_algo_curve": "Curve",
+    "crypto_algo_curve_desc": "The underlying Elliptic Curve of the crytographic algorithm",
+    "crypto_algo_parameterSetId": "Parameter Set Identifier",
+    "crypto_algo_parameterSetId_desc": "Parameter Set Identifier",
+    "crypto_algo_execEnv": "Execution Environment",
+    "crypto_algo_execEnv_desc": "The Execution Environment of the crytographic algorithm",
+    "crypto_algo_implPlfm": "Implementation Platform",
+    "crypto_algo_implPlfm_desc": "The Implementation Platform of the crytographic algorithm",
+    "crypto_algo_certLvl": "Certification Level",
+    "crypto_algo_certLvl_desc": "The Certification Level of the crytographic algorithm",
+    "crypto_algo_mode": "Mode",
+    "crypto_algo_mode_desc": "The mode of operation of the crytographic algorithm",
+    "crypto_algo_padding": "Padding",
+    "crypto_algo_padding_desc": "The padding scheme of the crytographic algorithm",
+    "crypto_algo_cryptoFunctions": "Cryptographic Functions",
+    "crypto_algo_cryptoFunctions_desc": "The crypto functions implemented by the crytographic algorithm",
+    "crypto_algo_classicalSL": "Classical Security Level",
+    "crypto_algo_classicalSL_desc": "The classicial security level of the crytographic algorithm",
+    "crypto_algo_nistQSL": "NIST Quantum Security Level",
+    "crypto_algo_nistQSL_desc": "The NIST Quantum Security Level of the crytographic algorithm",
+    "crypto_cert_subject": "Subject Name",
+    "crypto_cert_subject_desc": "The subject name for the certificate",
+    "crypto_cert_issuer": "Issuer Name",
+    "crypto_cert_issuer_desc": "The issuer name for the certificate",
+    "crypto_cert_notValidBefore": "Not Valid Before",
+    "crypto_cert_notValidBefore_desc": "ISO8601 date and time from which the certificate is valid",
+    "crypto_cert_notValidAfter": "Not Valid After",
+    "crypto_cert_notValidAfter_desc": "ISO8601 date and time after which the certificate is not valid",
+    "crypto_cert_signAlgoRef": "Signature Algorithm Reference",
+    "crypto_cert_signAlgoRef_desc": "The bom-ref to signature algorithm used by the certificate",
+    "crypto_cert_subjPubKeyRef": "Subject Public Key Reference",
+    "crypto_cert_subjPubKeyRef_desc": "The bom-ref to the public key of the subject",
+    "crypto_cert_format": "Certificate Format",
+    "crypto_cert_format_desc": "The format of the certificate",
+    "crypto_cert_ext": "Certificate Format",
+    "crypto_cert_ext_desc": "The file extension of the certificate",
+    "crypto_rcm_type": "Type",
+    "crypto_rcm_type_desc": "The type for the related cryptographic material",
+    "crypto_rcm_id": "Id",
+    "crypto_rcm_id_desc": "The optional unique identifier for the related cryptographic material.",
+    "crypto_rcm_state": "State",
+    "crypto_rcm_state_desc": "The key state as defined by NIST SP 800-57",
+    "crypto_rcm_algoRef": "Algorithm Reference",
+    "crypto_rcm_algoRef_desc": "The bom-ref to the algorithm used to generate the related cryptographic material",
+    "crypto_rcm_cdate": "Creation Date",
+    "crypto_rcm_cdate_desc": "ISO8601 date and time when related cryptographic materia was created",
+    "crypto_rcm_adate": "Activation Date",
+    "crypto_rcm_adate_desc": "ISO8601 date and time when related cryptographic materia was activated",
+    "crypto_rcm_udate": "Update Date",
+    "crypto_rcm_udate_desc": "ISO8601 date and time when related cryptographic materia was updated",
+    "crypto_rcm_edate": "Expiration Date",
+    "crypto_rcm_edate_desc": "ISO8601 date and time when related cryptographic material expires",
+    "crypto_rcm_value": "Value",
+    "crypto_rcm_value_desc": "The associated value of the cryptographic material",
+    "crypto_rcm_size": "Size",
+    "crypto_rcm_size_desc": "The size of the cryptographic asset in bits",
+    "crypto_rcm_format": "Format",
+    "crypto_rcm_format_desc": "The format of the related cryptographic material",
+    "crypto_rcm_secByMech": "Secured by Mechansim",
+    "crypto_rcm_secByMech_desc": "The mechanism the cryptographic asset is secured by",
+    "crypto_rcm_secByAlgoRef": "Secured by Algorith Reference",
+    "crypto_rcm_secByAlgoRef_desc": "The bom-ref to the algorithm the cryptographic asset is secured by",
+    "crypto_prot_type": "Protocol Type",
+    "crypto_prot_type_desc": "The protocol type",
+    "crypto_prot_version": "Protocol Version",
+    "crypto_prot_version_desc": "The protocol version",
+    "crypto_prot_cipherSuites": "Cipher Suites",
+    "crypto_prot_cipherSuites_desc": "A comma-separated list of cipher suites",
+    "crypto_prot_ikev2Encr": "IKEv2 Transform Type 1: Encryption Algorithms",
+    "crypto_prot_ikev2Encr_desc": "Internet Key Exchange v2 Transform Type 1: encryption algorithms",
+    "crypto_prot_ikev2Prf": "IKEv2 Transform Type 2: Pseudorandom Functions",
+    "crypto_prot_ikev2Prf_desc": "Internet Key Exchange v2 Transform Type 2: integrity algorithms",
+    "crypto_prot_ikev2Integ": "IKEv2 Transform Type 3: Encryption Algorithms",
+    "crypto_prot_ikev2Integ_desc": "Internet Key Exchange v2 Transform Type 3: integrity algorithms",
+    "crypto_prot_ikev2Ke": "IKEv2 Transform Type 4: Key Exchange Method",
+    "crypto_prot_ikev2Ke_desc": "Internet Key Exchange v2 Transform Type 4: Key Exchange Method (KE) per RFC9370, formerly called Diffie-Hellman Group (D-H)",
+    "crypto_prot_ikev2Esn": "IKEv2 Transform Type: Extended Sequence Number",
+    "crypto_prot_ikev2Esn_desc": "Internet Key Exchange v2 extended sequence number ",
+    "crypto_prot_ikev2Auth": "IKEv2 Transform Type: Authentication Method",
+    "crypto_prot_ikev2Auth_desc": "Internet Key Exchange v2 authentication method",
+    "crypto_prot_cryptoRefs": "Cryptographic Reference Array",
+    "crypto_prot_cryptoRefs_desc": "A comma-separated list of bom-refs to protocol-related cryptographic assets",
+    "crypto_oid": "OID",
+    "crypto_oid_desc": "The Object Identifier of the cryptographic asset",
+    "add_cryptoAsset": "Add Crypto Asset",
+    "remove_cryptoAsset": "Remove Crypto Asset",
+    "upload_cbom": "Upload CBOM",
+    "download_cbom": "Download CBOM",
+    "cryptoAsset_deleted": "Crypto Asset deleted",
+    "numberOfCryptoAssets": "Number of cryptographic assets",
+    "mostUsedAlgorithm": "Most used cryptographic algorithm",
+    "numberOfKeys": "Number of cryptographic keys",
     "custom_license": "Custom License",
     "custom_license_deleted": "Custom License Deleted",
     "cvss": "CVSS",
@@ -775,6 +875,7 @@
     "required_component_identifier": "A component identifier is required",
     "required_component_name": "The component name is required",
     "required_component_version": "The component version is required",
+    "required_crypto_assetType": "The type of the crypto asset is required",
     "required_license_id": "The license ID is required",
     "required_license_name": "The license name is required",
     "required_project_name": "The project name is required",
diff --git a/src/router/index.js b/src/router/index.js
index 1153d028..58d96239 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,8 @@ import i18n from '../i18n';
 import EventBus from '../shared/eventbus';
 import { getToken, hasPermission } from '../shared/permissions';
 import { getContextPath } from '../shared/utils';
+import CryptoAsset from "../views/portfolio/projects/CryptoAsset";
+import CryptoAssets from "../views/portfolio/cryptoassets/CryptoAssets";
 
 // Containers
 const DefaultContainer = () => import('@/containers/DefaultContainer');
@@ -242,6 +244,26 @@ function configRoutes() {
             permissions: ['VIEW_PORTFOLIO'],
           },
         },
+        {
+          path: 'cryptoassets',
+          name: 'CryptoAssets',
+          component: CryptoAssets,
+          meta: {
+            title: i18n.t('message.component_search'),
+            i18n: 'message.crypto_assets',
+            sectionPath: '/cryptoassets',
+          },
+        },
+        {
+          path: '/cryptoassets/:uuid',
+          name: 'CryptoAsset',
+          props: (route) => ( { uuid: route.params.uuid } ),
+          component: CryptoAsset,
+          meta: {
+            i18n: 'message.projects',
+            sectionPath: '/projects',
+          },
+        },
         {
           path: 'vulnerabilities',
           name: 'Vulnerabilities',
diff --git a/src/shared/api.json b/src/shared/api.json
index a38230cb..db304da0 100644
--- a/src/shared/api.json
+++ b/src/shared/api.json
@@ -19,6 +19,7 @@
   "URL_CALCULATOR_OWASP": "api/v1/calculator/owasp",
   "URL_COMPONENT": "api/v1/component",
   "URL_CONFIG_PROPERTY": "api/v1/configProperty",
+  "URL_CRYPTO_ASSET": "api/v1/crypto",
   "URL_CWE": "api/v1/cwe",
   "URL_DEPENDENCY_GRAPH": "api/v1/dependencyGraph",
   "URL_FINDING": "api/v1/finding",
diff --git a/src/shared/common.js b/src/shared/common.js
index 86f1cc07..dc389645 100644
--- a/src/shared/common.js
+++ b/src/shared/common.js
@@ -418,6 +418,7 @@ $common.componentClassifierLabelFormatter = (i18n) => {
       case 'DEVICE':
       case 'FIRMWARE':
       case 'FILE':
+      case 'CRYPTOGRAPHIC_ASSET':
         return i18n.$t(`message.component_${value.toLowerCase()}`);
       default:
         return null;
@@ -444,6 +445,7 @@ $common.componentClassifierLabelProjectUrlFormatter = (i18n) => {
       case 'DEVICE':
       case 'FIRMWARE':
       case 'FILE':
+      case 'CRYPTOGRAPHIC_ASSET':
         return `<a href="${url}">${i18n.$t(
           `message.component_${value.toLowerCase()}`,
         )}</a>`;
diff --git a/src/views/dashboard/CryptoAssetWidgetRow.vue b/src/views/dashboard/CryptoAssetWidgetRow.vue
new file mode 100644
index 00000000..d4a16bab
--- /dev/null
+++ b/src/views/dashboard/CryptoAssetWidgetRow.vue
@@ -0,0 +1,117 @@
+<template>
+  <b-row>
+    <b-col sm="6" lg="4">
+      <b-card no-body class="bg-widget">
+        <b-card-body class="pb-0">
+          <h4 class="mb-0">{{ numberOfCryptographicAssets }}</h4>
+          <p>{{ $t('message.numberOfCryptoAssets') }}</p>
+        </b-card-body>
+        <widget-crypto-assets
+          ref="widgetCryptoAssets"
+          chartId="card-chart-01"
+          class="chart-wrapper px-3"
+          style="height: 70px"
+          :height="70"
+        />
+      </b-card>
+    </b-col>
+    <b-col sm="6" lg="4">
+      <b-card no-body class="bg-widget">
+        <b-card-body class="pb-0">
+          <h4 class="mb-0">
+            <span style="text-transform: uppercase"
+              >{{ mostUsedAlgorithmName }}
+            </span>
+            <span style="font-size: 14px; opacity: 0.7"
+              >({{ mostUsedAlgorithmPercentage }}%)</span
+            >
+          </h4>
+          <p>{{ $t('message.mostUsedAlgorithm') }}</p>
+        </b-card-body>
+        <widget-most-used-algorithm
+          ref="widgetMostUsedAlgorithm"
+          chartId="card-chart-01"
+          class="chart-wrapper px-3"
+          style="height: 70px"
+          :height="70"
+        />
+      </b-card>
+    </b-col>
+    <b-col sm="6" lg="4">
+      <b-card no-body class="bg-widget">
+        <b-card-body class="pb-0">
+          <h4 class="mb-0">
+            {{ numberOfKeys }}
+          </h4>
+          <p>{{ $t('message.numberOfKeys') }}</p>
+        </b-card-body>
+        <widget-number-of-keys
+          ref="widgetNumberOfKeys"
+          chartId="card-chart-03"
+          class="chart-wrapper px-3"
+          style="height: 70px"
+          :height="70"
+        />
+      </b-card>
+    </b-col>
+  </b-row>
+</template>
+
+<script>
+import WidgetCryptoAssets from '@/views/dashboard/WidgetCryptoAssets.vue';
+import WidgetMostUsedAlgorithm from '@/views/dashboard/WidgetMostUsedAlgorithm.vue';
+import WidgetNumberOfKeys from '@/views/dashboard/WidgetNumberOfKeys.vue';
+
+export default {
+  components: {
+    WidgetCryptoAssets,
+    WidgetMostUsedAlgorithm,
+    WidgetNumberOfKeys,
+  },
+  props: {
+    fetch: {
+      default: false,
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      numberOfCryptographicAssets: 0,
+      mostUsedAlgorithmName: '',
+      mostUsedAlgorithmPercentage: 0.0,
+      numberOfKeys: 0,
+    };
+  },
+  beforeMount() {
+    if (this.fetch) {
+      const daysBack = 90;
+      let url = `${this.$api.BASE_URL}/${this.$api.URL_METRICS}/cryptography/${daysBack}/days`;
+      this.axios.get(url).then((response) => {
+        this.render(response.data);
+      });
+    }
+  },
+  methods: {
+    render: function (metrics) {
+      if (metrics.length > 0) {
+        this.numberOfCryptographicAssets =
+          metrics[metrics.length - 1].numberOfCryptographicAssets;
+        this.mostUsedAlgorithmName =
+          metrics[metrics.length - 1].mostUsedAlgorithmName;
+        this.mostUsedAlgorithmPercentage =
+          metrics[metrics.length - 1].mostUsedAlgorithmPercentage;
+        this.numberOfKeys = metrics[metrics.length - 1].numberOfKeys;
+      } else {
+        this.numberOfCryptographicAssets = 0;
+        this.mostUsedAlgorithmName = "";
+        this.mostUsedAlgorithmPercentage = 0;
+        this.numberOfKeys = 0;
+      }
+
+      this.$refs.widgetCryptoAssets.render(metrics);
+      this.$refs.widgetMostUsedAlgorithm.render(metrics);
+      this.$refs.widgetNumberOfKeys.render(metrics);
+    },
+  },
+};
+</script>
diff --git a/src/views/dashboard/WidgetCryptoAssets.vue b/src/views/dashboard/WidgetCryptoAssets.vue
new file mode 100644
index 00000000..49b1fb79
--- /dev/null
+++ b/src/views/dashboard/WidgetCryptoAssets.vue
@@ -0,0 +1,87 @@
+<script>
+import { Line } from 'vue-chartjs';
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
+import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities';
+import common from '../../shared/common';
+
+export default {
+  extends: Line,
+  props: {
+    height: Number,
+    width: Number,
+  },
+  methods: {
+    render: function (metrics) {
+      const widgetColor = getStyle('--widget-1');
+      let chartLabels = [];
+      let chartData = [];
+      for (let i = 0; i < metrics.length; i++) {
+        chartLabels.push(common.formatTimestamp(metrics[i].firstOccurrence));
+        chartData.push(metrics[i].numberOfCryptographicAssets);
+      }
+
+      const datasets = [
+        {
+          label: this.$t('message.numberOfCryptoAssets'),
+          backgroundColor: hexToRgba(widgetColor, 10),
+          borderColor: widgetColor,
+          pointHoverBackgroundColor: '#fff',
+          data: chartData,
+        },
+      ];
+
+      this.renderChart(
+        {
+          labels: chartLabels,
+          datasets: datasets,
+        },
+        {
+          tooltips: {
+            enabled: false,
+            custom: CustomTooltips,
+          },
+          maintainAspectRatio: false,
+          legend: {
+            display: false,
+          },
+          scales: {
+            xAxes: [
+              {
+                gridLines: {
+                  color: 'transparent',
+                  zeroLineColor: 'transparent',
+                },
+                ticks: {
+                  fontSize: 2,
+                  fontColor: 'transparent',
+                },
+              },
+            ],
+            yAxes: [
+              {
+                display: false,
+                ticks: {
+                  display: false,
+                  min: 0,
+                  max: Math.max.apply(Math, datasets[0].data) + 5,
+                },
+              },
+            ],
+          },
+          elements: {
+            line: {
+              tension: 0.00001,
+              borderWidth: 2,
+            },
+            point: {
+              radius: 0,
+              hitRadius: 10,
+              hoverRadius: 4,
+            },
+          },
+        },
+      );
+    },
+  },
+};
+</script>
diff --git a/src/views/dashboard/WidgetMostUsedAlgorithm.vue b/src/views/dashboard/WidgetMostUsedAlgorithm.vue
new file mode 100644
index 00000000..cd6cf821
--- /dev/null
+++ b/src/views/dashboard/WidgetMostUsedAlgorithm.vue
@@ -0,0 +1,87 @@
+<script>
+import { Line } from 'vue-chartjs';
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
+import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities';
+import common from '../../shared/common';
+
+export default {
+  extends: Line,
+  props: {
+    height: Number,
+    width: Number,
+  },
+  methods: {
+    render: function (metrics) {
+      const widgetColor = getStyle('--widget-3');
+      let chartLabels = [];
+      let chartData = [];
+      for (let i = 0; i < metrics.length; i++) {
+        chartLabels.push(common.formatTimestamp(metrics[i].firstOccurrence));
+        chartData.push(metrics[i].mostUsedAlgorithmPercentage);
+      }
+
+      const datasets = [
+        {
+          label: this.$t('message.crypto_algo_classicalSL'),
+          backgroundColor: hexToRgba(widgetColor, 10),
+          borderColor: widgetColor,
+          pointHoverBackgroundColor: '#fff',
+          data: chartData,
+        },
+      ];
+
+      this.renderChart(
+        {
+          labels: chartLabels,
+          datasets: datasets,
+        },
+        {
+          tooltips: {
+            enabled: false,
+            custom: CustomTooltips,
+          },
+          maintainAspectRatio: false,
+          legend: {
+            display: false,
+          },
+          scales: {
+            xAxes: [
+              {
+                gridLines: {
+                  color: 'transparent',
+                  zeroLineColor: 'transparent',
+                },
+                ticks: {
+                  fontSize: 2,
+                  fontColor: 'transparent',
+                },
+              },
+            ],
+            yAxes: [
+              {
+                display: false,
+                ticks: {
+                  display: false,
+                  min: 0,
+                  max: Math.max.apply(Math, datasets[0].data) + 5,
+                },
+              },
+            ],
+          },
+          elements: {
+            line: {
+              tension: 0.00001,
+              borderWidth: 2,
+            },
+            point: {
+              radius: 0,
+              hitRadius: 10,
+              hoverRadius: 4,
+            },
+          },
+        },
+      );
+    },
+  },
+};
+</script>
diff --git a/src/views/dashboard/WidgetNumberOfKeys.vue b/src/views/dashboard/WidgetNumberOfKeys.vue
new file mode 100644
index 00000000..b9687b49
--- /dev/null
+++ b/src/views/dashboard/WidgetNumberOfKeys.vue
@@ -0,0 +1,87 @@
+<script>
+import { Line } from 'vue-chartjs';
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
+import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities';
+import common from '../../shared/common';
+
+export default {
+  extends: Line,
+  props: {
+    height: Number,
+    width: Number,
+  },
+  methods: {
+    render: function (metrics) {
+      const widgetColor = getStyle('--widget-2');
+      let chartLabels = [];
+      let chartData = [];
+      for (let i = 0; i < metrics.length; i++) {
+        chartLabels.push(common.formatTimestamp(metrics[i].firstOccurrence));
+        chartData.push(metrics[i].numberOfKeys);
+      }
+
+      const datasets = [
+        {
+          label: this.$t('message.crypto_algo_classicalSL'),
+          backgroundColor: hexToRgba(widgetColor, 10),
+          borderColor: widgetColor,
+          pointHoverBackgroundColor: '#fff',
+          data: chartData,
+        },
+      ];
+
+      this.renderChart(
+        {
+          labels: chartLabels,
+          datasets: datasets,
+        },
+        {
+          tooltips: {
+            enabled: false,
+            custom: CustomTooltips,
+          },
+          maintainAspectRatio: false,
+          legend: {
+            display: false,
+          },
+          scales: {
+            xAxes: [
+              {
+                gridLines: {
+                  color: 'transparent',
+                  zeroLineColor: 'transparent',
+                },
+                ticks: {
+                  fontSize: 2,
+                  fontColor: 'transparent',
+                },
+              },
+            ],
+            yAxes: [
+              {
+                display: false,
+                ticks: {
+                  display: false,
+                  min: 0,
+                  max: Math.max.apply(Math, datasets[0].data) + 5,
+                },
+              },
+            ],
+          },
+          elements: {
+            line: {
+              tension: 0.00001,
+              borderWidth: 2,
+            },
+            point: {
+              radius: 0,
+              hitRadius: 10,
+              hoverRadius: 4,
+            },
+          },
+        },
+      );
+    },
+  },
+};
+</script>
diff --git a/src/views/portfolio/cryptoassets/CryptoAssets.vue b/src/views/portfolio/cryptoassets/CryptoAssets.vue
new file mode 100644
index 00000000..af242325
--- /dev/null
+++ b/src/views/portfolio/cryptoassets/CryptoAssets.vue
@@ -0,0 +1,271 @@
+<template>
+  <div class="animated fadeIn" v-permission="'VIEW_PORTFOLIO'">
+    <crypto-asset-widget-row ref="cryptoAssetWidgetRow" />
+
+    <b-card>
+      <div id="cryptoAssetSearchToolbar">
+        <b-row>
+          <b-col md="5" lg="5">
+            <b-input-group-form-select
+              id="input-subject"
+              required="true"
+              v-model="subject"
+              :options="subjects"
+            />
+          </b-col>
+          <b-col md="6" lg="6">
+            <b-input-group-form-input
+              v-if="subject !== 'ASSET TYPE'"
+              id="input-value"
+              required="true"
+              type="text"
+              v-model="value"
+              lazy="true"
+              v-on:keyup.enter="performSearch"
+            />
+            <b-form-select
+              v-else-if="subject === 'ASSET TYPE'"
+              v-model="value"
+              :required="true"
+              :options="assetTypeOptions"
+              id="input-aead-value"
+              v-on:keyup.enter="performSearch"
+            />
+          </b-col>
+          <b-col md="1" lg="1">
+            <b-button variant="outline-primary" v-on:click="performSearch">{{
+              $t('message.search')
+            }}</b-button>
+          </b-col>
+        </b-row>
+      </div>
+      <bootstrap-table
+        ref="table"
+        :columns="columns"
+        :data="data"
+        :options="options"
+      >
+      </bootstrap-table>
+    </b-card>
+  </div>
+</template>
+
+<script>
+import BInputGroupFormSelect from '../../../forms/BInputGroupFormSelect';
+import BInputGroupFormInput from '../../../forms/BInputGroupFormInput';
+import common from '@/shared/common';
+import xssFilters from 'xss-filters';
+import CryptoAssetWidgetRow from '@/views/dashboard/CryptoAssetWidgetRow';
+import permissionsMixin from '@/mixins/permissionsMixin';
+
+export default {
+  mixins: [permissionsMixin],
+  components: {
+    CryptoAssetWidgetRow,
+    BInputGroupFormSelect,
+    BInputGroupFormInput,
+  },
+  name: 'CryptoAssets',
+  methods: {
+    createQueryParams: function () {
+      if (this.subject === 'ASSET TYPE') {
+        let v = common.trimToNull(this.value);
+        return v != null ? 'assetType=' + encodeURIComponent(v) : '';
+      }
+    },
+    performSearch: function () {
+      let queryParams = this.createQueryParams();
+      this.options.url = `${this.$api.BASE_URL}/${this.$api.URL_CRYPTO_ASSET}/identity?${queryParams}`;
+      this.$refs.table.refresh({ silent: true });
+    },
+    extractStats(metrics) {
+      if (!metrics || metrics.length === 0) {
+        return;
+      }
+      let metric = metrics[metrics.length - 1]; //Use the most recent metric
+      this.numberOfCryptoAssets = common.valueWithDefault(
+        metric.numberOfCryptographicAssets,
+        '0',
+      );
+      this.notEnoughInformationToStateQSComponents = common.valueWithDefault(
+        metric.notEnoughInformationToStateQSComponents,
+        '0',
+      );
+      this.numberOfQuantumSafeComponents = common.valueWithDefault(
+        metric.quantumSafeComponents,
+        '0',
+      );
+      this.consideredComponents =
+        this.notEnoughInformationToStateQSComponents +
+        this.numberOfQuantumSafeComponents;
+      this.quantumSafeProgressPercent = common.calcProgressPercent(
+        this.consideredComponents,
+        this.numberOfQuantumSafeComponents,
+      );
+    },
+  },
+  data() {
+    return {
+      quantumSafeProgressPercent: 0,
+      numberOfCryptoAssets: 0,
+      numberOfQuantumSafeComponents: 0,
+      notEnoughInformationToStateQSComponents: 0,
+      consideredComponents: 0,
+
+      subject: 'ASSET TYPE',
+      value: null,
+      coordinatesGroup: null,
+      coordinatesName: null,
+      coordinatesVersion: null,
+      subjects: [
+        { value: 'ASSET TYPE', text: this.$t('message.crypto_assetType') },
+      ],
+      assetTypeOptions: [
+        { value: null, text: "ALL"},
+        { value: 'ALGORITHM', text: 'Algorithm' },
+        { value: 'CERTIFICATE', text: 'Certificate' },
+        { value: 'RELATED_CRYPTO_MATERIAL', text: 'Related Crypto Material' },
+        { value: 'PROTOCOL', text: 'Protocol' },
+      ],
+      columns: [
+        {
+          field: 'state',
+          checkbox: true,
+          align: 'center',
+        },
+        {
+          title: this.$t('message.crypto_assets'),
+          field: 'name',
+          sortable: true,
+          formatter(value, row, index) {
+            let url = xssFilters.uriInUnQuotedAttr('../components/' + row.uuid);
+            return `<a href="${url}">${xssFilters.inHTMLData(value)}</a>`;
+          },
+        },
+        {
+          title: this.$t('message.version'),
+          field: 'version',
+          sortable: true,
+          formatter(value, row) {
+            if (
+              Object.prototype.hasOwnProperty.call(row, 'repositoryMeta') &&
+              Object.prototype.hasOwnProperty.call(
+                row.repositoryMeta,
+                'latestVersion',
+              )
+            ) {
+              row.latestVersion = row.repositoryMeta.latestVersion;
+              if (row.repositoryMeta.latestVersion !== row.version) {
+                return (
+                  '<span style="float:right" data-toggle="tooltip" data-placement="bottom" title="Risk: Outdated component. Current version is: ' +
+                  xssFilters.inHTMLData(row.repositoryMeta.latestVersion) +
+                  '"><i class="fa fa-exclamation-triangle status-warning" aria-hidden="true"></i></span> ' +
+                  xssFilters.inHTMLData(row.version)
+                );
+              } else {
+                return (
+                  '<span style="float:right" data-toggle="tooltip" data-placement="bottom" title="Component version is the latest available from the configured repositories"><i class="fa fa-exclamation-triangle status-passed" aria-hidden="true"></i></span> ' +
+                  xssFilters.inHTMLData(row.version)
+                );
+              }
+            } else {
+              return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+            }
+          },
+        },
+        {
+          title: this.$t('message.latest_version'),
+          field: 'latestVersion',
+          sortable: false,
+          visible: false,
+          formatter(value) {
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+        {
+          title: this.$t('message.crypto_assetType'),
+          field: 'cryptoAssetProperties.assetType',
+          sortable: true,
+          formatter(value) {
+            if (typeof value === 'undefined') {
+              return '-'; // No primitive info available
+            }
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+        {
+          title: this.$t('message.crypto_oid'),
+          field: 'cryptoAssetProperties.oid',
+          sortable: true,
+          formatter(value) {
+            if (typeof value === 'undefined') {
+              return '-'; // No primitive info available
+            }
+            return xssFilters.inHTMLData(value);
+          },
+        },
+        {
+          title: this.$t('message.crypto_algo_primitive'),
+          field: 'cryptoAssetProperties.algorithmProperties.primitive',
+          sortable: true,
+          formatter(value) {
+            if (typeof value === 'undefined') {
+              return '-'; // No primitive info available
+            }
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+        {
+          title: this.$t('message.crypto_algo_nistQSL'),
+          field:
+            'cryptoAssetProperties.algorithmProperties.nistQuantumSecurityLevel',
+          sortable: true,
+          class: 'tight',
+        },
+        {
+          title: this.$t('message.crypto_algo_classicalSL'),
+          field:
+            'cryptoAssetProperties.algorithmProperties.classicalSecurityLevel',
+          sortable: true,
+          class: 'tight',
+        },
+      ],
+      data: [],
+      options: {
+        onPostBody: this.initializeTooltips,
+        search: false,
+        showColumns: true,
+        showRefresh: true,
+        pagination: true,
+        silentSort: false,
+        toolbar: '#cryptoAssetSearchToolbar',
+        sidePagination: 'server',
+        queryParamsType: 'pageSize',
+        pageList: '[10, 25, 50, 100]',
+        pageSize: 10,
+        icons: {
+          refresh: 'fa-refresh',
+        },
+        //toolbar: '#componentSearchToolbar',
+        responseHandler: function (res, xhr) {
+          res.total = xhr.getResponseHeader('X-Total-Count');
+          return res;
+        },
+        url: `${this.$api.BASE_URL}/${this.$api.URL_CRYPTO_ASSET}/identity`,
+      },
+    };
+  },
+  mounted() {
+    if (this.isPermitted(this.PERMISSIONS.VIEW_PORTFOLIO)) {
+      const daysBack = 90;
+      let url = `${this.$api.BASE_URL}/${this.$api.URL_METRICS}/cryptography/${daysBack}/days`;
+      this.axios.get(url).then((response) => {
+        this.$refs.cryptoAssetWidgetRow.render(response.data);
+        this.extractStats(response.data);
+      });
+    }
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/portfolio/projects/ComponentDetailsModal.vue b/src/views/portfolio/projects/ComponentDetailsModal.vue
index 74adc391..a3adc475 100644
--- a/src/views/portfolio/projects/ComponentDetailsModal.vue
+++ b/src/views/portfolio/projects/ComponentDetailsModal.vue
@@ -204,6 +204,548 @@
           </b-form-group>
         </b-card>
       </b-tab>
+      <div v-if='component.cryptoAssetProperties != undefined'>
+      <b-tab>
+        <template v-slot:title
+          ><i class="fa fa-lock"></i> {{ $t('message.component_cryptographic_properties') }}</template
+        >
+        <b-card>
+          <b-input-group-form-select
+            id="component-assetType-input"
+            required="true"
+            v-model="component.cryptoAssetProperties.assetType"
+            :options="assetTypeOptions"
+            :label="$t('message.crypto_assetType')"
+            :tooltip="$t('message.crypto_assetType_desc')"
+            :disabled="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+          />
+          <b-input-group-form-input
+            id="component-oid-input"
+            input-group-size="mb-3"
+            type="text"
+            v-model="component.cryptoAssetProperties.oid"
+            lazy="true"
+            required="false"
+            feedback="true"
+            autofocus="false"
+            :label="$t('message.crypto_oid')"
+            :tooltip="this.$t('message.crypto_oid_desc')"
+            :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+          />
+          <div v-if='component.cryptoAssetProperties.assetType === "algorithm"'>
+            <b-input-group-form-select
+              id="component-algo-primitive-input"
+              required="false"
+              v-model="component.cryptoAssetProperties.algorithmProperties.primitive"
+              :options="primitiveOptions"
+              :label="$t('message.crypto_algo_primitive')"
+              :tooltip="$t('message.crypto_algo_primitive_desc')"
+              :disabled="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-algo-parameter-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.algorithmProperties.parameterSetIdentifier"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_algo_parameterSetId')"
+              :tooltip="this.$t('message.crypto_algo_parameterSetId_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-algo-curve-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.algorithmProperties.curve"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_algo_curve')"
+              :tooltip="this.$t('message.crypto_algo_curve_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-select
+              id="component-algo-execEnv-input"
+              required="false"
+              v-model="component.cryptoAssetProperties.algorithmProperties.executionEnvironment"
+              :options="execEnvOptions"
+              :label="$t('message.crypto_algo_execEnv')"
+              :tooltip="$t('message.crypto_algo_execEnv_desc')"
+              :disabled="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-select
+              id="component-algo-implPlfm-input"
+              required="false"
+              v-model="component.cryptoAssetProperties.algorithmProperties.implementationPlatform"
+              :options="implPflmOptions"
+              :label="$t('message.crypto_algo_implPlfm')"
+              :tooltip="$t('message.crypto_algo_implPlfm_desc')"
+              :disabled="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-select
+              id="component-algo-certLvl-input"
+              required="false"
+              v-model="component.cryptoAssetProperties.algorithmProperties.certificationLevel"
+              :options="certLvlOptions"
+              :label="$t('message.crypto_algo_certLvl')"
+              :tooltip="$t('message.crypto_algo_certLvl_desc')"
+              :disabled="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-select
+              id="component-algo-mode-input"
+              required="false"
+              v-model="component.cryptoAssetProperties.algorithmProperties.mode"
+              :options="modeOptions"
+              :label="$t('message.crypto_algo_mode')"
+              :tooltip="$t('message.crypto_algo_mode_desc')"
+              :disabled="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-select
+              id="component-algo-padding-input"
+              required="false"
+              v-model="component.cryptoAssetProperties.algorithmProperties.padding"
+              :options="paddingOptions"
+              :label="$t('message.crypto_algo_padding')"
+              :tooltip="$t('message.crypto_algo_padding_desc')"
+              :disabled="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-select-multiple
+              id="component-algo-cryptoFunctions-input"
+              required="false"
+              v-model="this.component.cryptoAssetProperties.algorithmProperties.cryptoFunctions"
+              :options="cryptoFunctionOptions"
+              :label="$t('message.crypto_algo_cryptoFunctions')"
+              :tooltip="$t('message.crypto_algo_cryptoFunctions_desc')"
+              :disabled="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input-number
+              id="component-algo-classicalSL-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="this.component.cryptoAssetProperties.algorithmProperties.classicalSecurityLevel"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_algo_classicalSL')"
+              :tooltip="this.$t('message.crypto_algo_classicalSL_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input-number
+              id="component-algo-nistQSL-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="this.component.cryptoAssetProperties.algorithmProperties.nistQuantumSecurityLevel"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_algo_nistQSL')"
+              :tooltip="this.$t('message.crypto_algo_nistQSL_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+          </div> 
+          <div v-else-if='component.cryptoAssetProperties.assetType === "certificate"'>
+            <b-input-group-form-input
+              id="component-cert-subject-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.certificateProperties.subjectName"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_cert_subject')"
+              :tooltip="this.$t('message.crypto_cert_subject_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-cert-issuer-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.certificateProperties.issuerName"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_cert_issuer')"
+              :tooltip="this.$t('message.crypto_cert_issuer_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-cert-notValidBefore-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.certificateProperties.notValidBefore"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_cert_notValidBefore')"
+              :tooltip="this.$t('message.crypto_cert_notValidBefore_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-cert-notValidAfter-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.certificateProperties.notValidAfter"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_cert_notValidAfter')"
+              :tooltip="this.$t('message.crypto_cert_notValidAfter_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-cert-signAlgoRef-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.certificateProperties.signatureAlgorithmRef"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_cert_signAlgoRef')"
+              :tooltip="this.$t('message.crypto_cert_signAlgoRef_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-cert-subjPubKeyRef-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.certificateProperties.subjectPublicKeyRef"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_cert_subjPubKeyRef')"
+              :tooltip="this.$t('message.crypto_cert_subjPubKeyRef_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-cert-format-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.certificateProperties.certificateFormat"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_cert_format')"
+              :tooltip="this.$t('message.crypto_cert_format_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-cert-ext-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.certificateProperties.certificateExtension"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_cert_ext')"
+              :tooltip="this.$t('message.crypto_cert_ext_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+          </div> 
+          <div v-else-if='component.cryptoAssetProperties.assetType === "related-crypto-material"'>
+            <b-input-group-form-select
+              id="component-rcm-type-input"
+              v-model="component.cryptoAssetProperties.relatedMaterialProperties.type"
+              required="false"
+              :options="typeOptions"
+              :label="$t('message.crypto_rcm_type')"
+              :tooltip="$t('message.crypto_rcm_type_desc')"
+              :disabled="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-rcm-id-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.relatedMaterialProperties.identifier"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_rcm_id')"
+              :tooltip="this.$t('message.crypto_rcm_id_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-select
+              id="component-rcm-state-input"
+              v-model="component.cryptoAssetProperties.relatedMaterialProperties.state"
+              required="false"
+              :options="stateOptions"
+              :label="$t('message.crypto_rcm_state')"
+              :tooltip="$t('message.crypto_rcm_state_desc')"
+              :disabled="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-rcm-algoRef-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.relatedMaterialProperties.algorithmRef"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_rcm_algoRef')"
+              :tooltip="this.$t('message.crypto_rcm_algoRef_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-rcm-cdate-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.relatedMaterialProperties.creationDate"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_rcm_cdate')"
+              :tooltip="this.$t('message.crypto_rcm_cdate_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-rcm-adate-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.relatedMaterialProperties.activationDate"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_rcm_adate')"
+              :tooltip="this.$t('message.crypto_rcm_adate_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-rcm-udate-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.relatedMaterialProperties.updateDate"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_rcm_udate')"
+              :tooltip="this.$t('message.crypto_rcm_udate_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-rcm-edate-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.relatedMaterialProperties.expirationDate"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_rcm_edate')"
+              :tooltip="this.$t('message.crypto_rcm_edate_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-rcm-value-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.relatedMaterialProperties.value"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_rcm_value')"
+              :tooltip="this.$t('message.crypto_rcm_value_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input-number
+              id="component-rcm-size-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="this.component.cryptoAssetProperties.relatedMaterialProperties.size"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_rcm_size')"
+              :tooltip="this.$t('message.crypto_rcm_size_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-rcm-format-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.relatedMaterialProperties.format"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_rcm_format')"
+              :tooltip="this.$t('message.crypto_rcm_format_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-rcm-secByMech-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.relatedMaterialProperties.securedByMechanism"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_rcm_secByMech')"
+              :tooltip="this.$t('message.crypto_rcm_secByMech_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-rcm-secByAlgoRef-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.relatedMaterialProperties.securedByAlgorithmRef"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_rcm_secByAlgoRef')"
+              :tooltip="this.$t('message.crypto_rcm_secByAlgoRef_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+          </div>
+          <div v-else-if='component.cryptoAssetProperties.assetType === "protocol"'>
+            <b-input-group-form-select
+              id="component-prot-type-input"
+              v-model="component.cryptoAssetProperties.protocolProperties.type"
+              :options="protocolTypeOptions"
+              :label="$t('message.crypto_prot_type')"
+              :tooltip="this.$t('message.crypto_prot_type_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-prot-version-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.protocolProperties.version"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_prot_version')"
+              :tooltip="this.$t('message.crypto_prot_version_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-prot-ciphersuites-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="this.cipherSuites"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_prot_cipherSuites')"
+              :tooltip="$t('message.crypto_prot_cipherSuites_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-prot-ciphersuites-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="this.ikev2Encr"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_prot_ikev2Encr')"
+              :tooltip="$t('message.crypto_prot_ikev2Encr_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-prot-ciphersuites-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="this.ikev2Prf"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_prot_ikev2Prf')"
+              :tooltip="$t('message.crypto_prot_ikev2Prf_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-prot-ciphersuites-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="this.ikev2Integ"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_prot_ikev2Integ')"
+              :tooltip="$t('message.crypto_prot_ikev2Integ_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-prot-ciphersuites-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="this.ikev2Ke"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_prot_ikev2Ke')"
+              :tooltip="$t('message.crypto_prot_ikev2Ke_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-prot-ciphersuites-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="this.ikev2Esn"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_prot_ikev2Esn')"
+              :tooltip="$t('message.crypto_prot_ikev2Esn_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <b-input-group-form-input
+              id="component-prot-ciphersuites-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="this.ikev2Auth"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_prot_ikev2Auth')"
+              :tooltip="$t('message.crypto_prot_ikev2Auth_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            />
+            <!--b-input-group-form-input
+              id="component-prot-cryptoRefs-input"
+              input-group-size="mb-3"
+              type="text"
+              v-model="component.cryptoAssetProperties.protocolProperties.cryptoRefs"
+              lazy="true"
+              required="false"
+              feedback="true"
+              autofocus="false"
+              :label="$t('message.crypto_prot_cryptoRefs')"
+              :tooltip="this.$t('message.crypto_prot_cryptoRefs_desc')"
+              :readonly="this.isNotPermitted(PERMISSIONS.PORTFOLIO_MANAGEMENT)"
+            /-->
+          </div> 
+        </b-card>
+      </b-tab>
+      </div>
       <b-tab>
         <template v-slot:title
           ><i class="fa fa-balance-scale"></i>
@@ -500,7 +1042,9 @@
 
 <script>
 import BInputGroupFormInput from '../../../forms/BInputGroupFormInput';
+import BInputGroupFormInputNumber from '../../../forms/BInputGroupFormInputNumber';
 import BInputGroupFormSelect from '../../../forms/BInputGroupFormSelect';
+import BInputGroupFormSelectMultiple from '../../../forms/BInputGroupFormSelectMultiple';
 import ComponentPropertiesModal from './ComponentPropertiesModal.vue';
 import permissionsMixin from '../../../mixins/permissionsMixin';
 import xssFilters from 'xss-filters';
@@ -511,7 +1055,9 @@ export default {
   mixins: [permissionsMixin],
   components: {
     BInputGroupFormInput,
+    BInputGroupFormInputNumber,
     BInputGroupFormSelect,
+    BInputGroupFormSelectMultiple,
     ComponentPropertiesModal,
   },
   props: {
@@ -540,6 +1086,146 @@ export default {
         { value: 'DEVICE', text: this.$i18n.t('message.component_device') },
         { value: 'FIRMWARE', text: this.$i18n.t('message.component_firmware') },
         { value: 'FILE', text: this.$i18n.t('message.component_file') },
+        { value: 'CRYPTOGRAPHIC_ASSET', text: this.$i18n.t('message.component_cryptographic_asset') },
+      ],
+      assetTypeOptions: [
+        { value: 'algorithm', text: 'Algorithm' },
+        { value: 'certificate', text: 'Certificate' },
+        { value: 'related-crypto-material', text: 'Related Crypto Material' },
+        { value: 'protocol', text: 'Protocol' }
+      ],
+      primitiveOptions: [
+        { value: 'drbg', text: 'Deterministic Random Bit Generator' },
+        { value: 'mac', text: 'Message Authentication Code' },
+        { value: 'block-cipher', text: 'Block Cipher' },
+        { value: 'stream-cipher', text: 'Stream Cipher' },
+        { value: 'signature', text: 'Signature' },
+        { value: 'hash', text: 'Hash' },
+        { value: 'pke', text: 'Public Key Encryption' },
+        { value: 'xof', text: 'XOF' },
+        { value: 'kdf', text: 'Key Derivation Function' },
+        { value: 'key-agree', text: 'Key Agreement' },
+        { value: 'kem', text: 'Key Encapsulation Mechanism' },
+        { value: 'ae', text: 'Authenticated Encryption' },
+        { value: 'other', text: 'Other' }
+      ],
+      execEnvOptions: [
+        { value: 'software-plain-ram', text: 'Plain RAM Software' },
+        { value: 'software-encrypted-ram', text: 'Encrypted RAM Software' },
+        { value: 'software-tee', text: 'Software in Trusted Execution Environment'},
+        { value: 'hardware', text: 'Hardware' },
+        { value: 'other', text: 'Other' }
+      ],
+      implPflmOptions: [
+        { value: 'generic', text: 'generic'},
+        { value: 'x86_32', text: 'x86_32' },
+        { value: 'x86_64', text: 'X86_64' },
+        { value: 'armv7-a', text: 'armv7-a' },
+        { value: 'armv7-m', text: 'armv7-m' },
+        { value: 'armv8-a', text: 'armv8-a' },
+        { value: 'armv8-m', text: 'armv8-m' },
+        { value: 'armv9-a', text: 'armv9-a' },
+        { value: 'armv9-m', text: 'armv9-m' },
+        { value: 's390x', text: 's390x' },
+        { value: 'ppc64', text: 'ppc64' },
+        { value: 'ppc64le', text: 'ppc64le' },
+        { value: 'other', text: 'Other' }
+      ],
+      certLvlOptions: [
+        { value: 'none', text: 'None'},
+        { value: 'fips140-1-l1', text: 'FIPS 140-1 Level 1' },
+        { value: 'fips140-1-l2', text: 'FIPS 140-1 Level 2' },
+        { value: 'fips140-1-l3', text: 'FIPS 140-1 Level 3' },
+        { value: 'fips140-1-l4', text: 'FIPS 140-1 Level 4' },
+        { value: 'fips140-2-l1', text: 'FIPS 140-2 Level 1' },
+        { value: 'fips140-2-l2', text: 'FIPS 140-2 Level 2' },
+        { value: 'fips140-2-l3', text: 'FIPS 140-2 Level 3' },
+        { value: 'fips140-2-l4', text: 'FIPS 140-2 Level 4' },
+        { value: 'fips140-3-l1', text: 'FIPS 140-3 Level 1' },
+        { value: 'fips140-3-l2', text: 'FIPS 140-3 Level 2' },
+        { value: 'fips140-3-l3', text: 'FIPS 140-3 Level 3' },
+        { value: 'fips140-3-l4', text: 'FIPS 140-3 Level 4' },
+        { value: 'cc-eal1', text: 'Common Criteria - Evaluation Assurance Level 1' },
+        { value: 'cc-eal1+', text: 'Common Criteria - Evaluation Assurance Level 1 (Augmented)' },
+        { value: 'cc-eal2', text: 'Common Criteria - Evaluation Assurance Level 2' },
+        { value: 'cc-eal2+', text: 'Common Criteria - Evaluation Assurance Level 2 (Augmented)' },
+        { value: 'cc-eal3', text: 'Common Criteria - Evaluation Assurance Level 3' },
+        { value: 'cc-eal3+', text: 'Common Criteria - Evaluation Assurance Level 3 (Augmented)' },
+        { value: 'cc-eal4', text: 'Common Criteria - Evaluation Assurance Level 4' },
+        { value: 'cc-eal4+', text: 'Common Criteria - Evaluation Assurance Level 4 (Augmented)' },
+        { value: 'cc-eal5', text: 'Common Criteria - Evaluation Assurance Level 5' },
+        { value: 'cc-eal5+', text: 'Common Criteria - Evaluation Assurance Level 5 (Augmented)' },
+        { value: 'cc-eal6', text: 'Common Criteria - Evaluation Assurance Level 6' },
+        { value: 'cc-eal6+', text: 'Common Criteria - Evaluation Assurance Level 6 (Augmented)' },
+        { value: 'cc-eal7', text: 'Common Criteria - Evaluation Assurance Level 7' },
+        { value: 'cc-eal7+', text: 'Common Criteria - Evaluation Assurance Level 7 (Augmented)' },
+        { value: 'other', text: 'Other' }
+      ],
+      modeOptions: [
+        { value: 'cbc', text: 'Cipher Block Chaining' },
+        { value: 'ecb', text: 'Electronic Codebook' },
+        { value: 'gcm', text: 'Galois/counter' },
+        { value: 'ofb', text: 'Output Feedback' },
+        { value: 'ctr', text: 'Counter' },
+        { value: 'other', text: 'Other' }
+      ],
+      paddingOptions: [
+        { value: 'pkcs5', text: 'Public Key Cryptography Standard: Password-Based Cryptography' },
+        { value: 'pkcs7', text: 'Public Key Cryptography Standard: Cryptographic Message Syntax' },
+        { value: 'pkcs1v15', text: 'Public Key Cryptography Standard: RSA Cryptography v1.5r' },
+        { value: 'oaep', text: 'Optimal Asymmetric Encryption Padding' },
+        { value: 'raw', text: 'Raw' },
+        { value: 'other', text: 'Other' }
+      ],
+      cryptoFunctionOptions: [
+        { value: 'generate', text: 'generate' },
+        { value: 'keygen', text: 'keygen' },
+        { value: 'encrypt', text: 'encrypt' },
+        { value: 'decrypt', text: 'decrypt' },
+        { value: 'digest', text: 'digest' },
+        { value: 'tag', text: 'tag' },
+        { value: 'keyderive', text: 'keyderive' },
+        { value: 'sign', text: 'sign' },
+        { value: 'verify', text: 'verify' },
+        { value: 'encapsulate', text: 'encapsulate' },
+        { value: 'decapsulate', text: 'decapsulate' },
+        { value: 'other', text: 'Other' }
+      ],
+      typeOptions: [
+        { value: 'private_key', text: 'Private Key (asymmetric)' },
+        { value: 'public-key', text: 'Public Key (asymmetric)' },
+        { value: 'secret-key', text: 'Secret Key (symmetric)' },
+        { value: 'key', text: 'Key' },
+        { value: 'ciphertext', text: 'Ciphertext' },
+        { value: 'signature', text: 'Signature' },
+        { value: 'digest', text: 'Digest' },
+        { value: 'initialization-vector', text: 'Initialization Vector' },
+        { value: 'seed', text: 'Seed' },
+        { value: 'salt', text: 'Salt' },
+        { value: 'shared-secret', text: 'Shared Secret' },
+        { value: 'tag', text: 'Authentication Tag' },
+        { value: 'additional-data', text: 'Additional Data' },
+        { value: 'password', text: 'Password' },
+        { value: 'credential', text: 'Credential' },
+        { value: 'token', text: 'Token' },
+        { value: 'other', text: 'Other' }
+      ],
+      stateOptions: [
+        { value: 'pre-activation', text: 'pre-activation' },
+        { value: 'active', text: 'active' },
+        { value: 'suspended', text: 'suspended' },
+        { value: 'deactivated', text: 'deactivated' },
+        { value: 'compromised', text: 'compromised' },
+        { value: 'destroyed', text: 'destroyed' }
+      ],
+      protocolTypeOptions: [
+        { value: 'tls', text: 'Transport Layer Security' },
+        { value: 'ssh', text: 'Secure Shell' },
+        { value: 'ipsec', text: 'Internet Protocol Security' },
+        { value: 'ike', text: 'Internet Key Exchange' },
+        { value: 'sstp', text: 'Secure Socket Tunneling Protocol' },
+        { value: 'wpa', text: 'Wi-Fi Protected Access' },
+        { value: 'other', text: 'Other' },
       ],
       selectableLicenses: [],
       selectedLicense: '',
@@ -671,6 +1357,34 @@ export default {
   },
   beforeUpdate() {
     //console.log(this.component);
+    if (this.component.hasOwnProperty('cryptoAssetProperties') &&
+        this.component.cryptoAssetProperties.hasOwnProperty('protocolProperties')) {
+      let pp = this.component.cryptoAssetProperties.protocolProperties;
+      if (pp.hasOwnProperty('cipherSuites')) {
+        this.cipherSuites = pp.cipherSuites.map(a => a.name).join(", ");
+      }
+
+      if (pp.hasOwnProperty('ikev2Types')) {
+        if (pp.ikev2Types.hasOwnProperty('encr')) {
+          this.ikev2Encr = pp.ikev2Types.encr.join(", ");
+        }
+        if (pp.ikev2Types.hasOwnProperty('prf')) {
+          this.ikev2Prf = pp.ikev2Types.prf.join(", ");
+        }
+        if (pp.ikev2Types.hasOwnProperty('integ')) {
+          this.ikev2Integ = pp.ikev2Types.integ.join(", ");
+        }
+        if (pp.ikev2Types.hasOwnProperty('ke')) {
+          this.ikev2Ke = pp.ikev2Types.ke.join(", ");
+        }
+        if (pp.ikev2Types.hasOwnProperty('esn')) {
+          this.ikev2Esn = pp.ikev2Types.esn.join(", ");
+        }
+        if (pp.ikev2Types.hasOwnProperty('auth')) {
+          this.ikev2Auth = pp.ikev2Types.auth.join(", ");
+        }
+      }
+    }
   },
   methods: {
     updateComponent: function () {
diff --git a/src/views/portfolio/projects/CryptoAsset.vue b/src/views/portfolio/projects/CryptoAsset.vue
new file mode 100644
index 00000000..2c71e7ac
--- /dev/null
+++ b/src/views/portfolio/projects/CryptoAsset.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="animated fadeIn" v-permission="PERMISSIONS.VIEW_PORTFOLIO">
+    <b-card :no-body="true" footer-class="px-3 py-2 card-footer-action">
+      <b-card-body class="p-3 clearfix">
+        <b-row>
+          <b-col>
+            <i class="fa fa-lock bg-primary p-3 font-2xl mr-3 float-left"></i>
+            <div class="h5 mb-0 mt-2">{{ cryptoAssetLabel }}</div>
+          </b-col>
+        </b-row>
+      </b-card-body>
+      <div id="component-info-footer" slot="footer">
+        <b-link class="font-weight-bold font-xs btn-block text-muted" v-b-modal.componentDetailsModal>{{ $t('message.view_details') }} <i class="fa fa-angle-right float-right font-lg"></i></b-link>
+      </div>
+    </b-card>
+    <b-tabs class="body-bg-color" style="border-left: 0; border-right:0; border-top:0 ">
+      <b-tab class="body-bg-color" style="border-left: 0; border-right:0; border-top:0; padding: 0;" active>
+        <template v-slot:title><i class="fa fa-line-chart"></i> {{ $t('message.overview') }}</template>
+        <crypto-asset-overview :key="this.uuid" :uuid="this.uuid" :cryptoAsset="this.cryptoAsset"/>
+      </b-tab>
+    </b-tabs>
+  </div>
+</template>
+
+<script>
+import EventBus from "@/shared/eventbus";
+import permissionsMixin from "@/mixins/permissionsMixin";
+
+export default {
+  mixins: [permissionsMixin],
+  name: "CryptoAsset",
+  title: '',
+  computed: {
+    projectLabel () {
+      if (this.cryptoAsset.hasOwnProperty("project")) {
+        if (this.cryptoAsset.project.name && this.cryptoAsset.project.version) {
+          return this.cryptoAsset.project.name + ' ▸ ' + this.cryptoAsset.project.version;
+        } else {
+          return this.cryptoAsset.project.name;
+        }
+      }
+    },
+    cryptoAssetLabel () {
+      if (this.cryptoAsset.name && this.cryptoAsset.version) {
+        return this.cryptoAsset.name + ' ▸ ' + this.cryptoAsset.version;
+      } else {
+        return this.cryptoAsset.name;
+      }
+    }
+  },
+
+  data() {
+    return {
+      cryptoAsset: {},
+      uuid: null,
+    }
+  },
+  beforeMount() {
+    this.uuid = this.$route.params.uuid;
+  },
+  mounted() {
+    let cryptoAssetUrl = `${this.$api.BASE_URL}/${this.$api.URL_CRYPTO_ASSET}/${this.uuid}`;
+    this.axios.get(cryptoAssetUrl).then((response) => {
+      this.cryptoAsset = response.data;
+      EventBus.$emit('addCrumb', this.cryptoAssetLabel, 'Project', this.cryptoAsset.project.uuid, this.projectLabel);
+      this.$title = this.cryptoAssetLabel;
+    });
+
+  },
+  destroyed() {
+    EventBus.$emit('crumble');
+  }
+
+}
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/portfolio/projects/ProjectAddComponentModal.vue b/src/views/portfolio/projects/ProjectAddComponentModal.vue
index 46a71159..d4a14a49 100644
--- a/src/views/portfolio/projects/ProjectAddComponentModal.vue
+++ b/src/views/portfolio/projects/ProjectAddComponentModal.vue
@@ -293,6 +293,7 @@ export default {
         { value: 'DEVICE', text: this.$i18n.t('message.component_device') },
         { value: 'FIRMWARE', text: this.$i18n.t('message.component_firmware') },
         { value: 'FILE', text: this.$i18n.t('message.component_file') },
+        { value: 'CRYPTOGRAPHIC_ASSET', text: this.$i18n.t('message.component_cryptographic_asset') },
       ],
       selectableLicenses: [],
       selectedLicense: '',
@@ -370,8 +371,7 @@ export default {
         .then((response) => {
           // Allow for license to be un-selected.
           this.selectableLicenses.push({ value: '', text: '' });
-          for (let i = 0; i < response.data.length; i++) {
-            let license = response.data[i];
+          for (const license of response.data) {
             this.selectableLicenses.push({
               value: license.licenseId,
               text: license.name,
diff --git a/src/views/portfolio/projects/ProjectCreateProjectModal.vue b/src/views/portfolio/projects/ProjectCreateProjectModal.vue
index 3346af88..04b7b10b 100644
--- a/src/views/portfolio/projects/ProjectCreateProjectModal.vue
+++ b/src/views/portfolio/projects/ProjectCreateProjectModal.vue
@@ -237,6 +237,7 @@ export default {
         { value: 'DEVICE', text: this.$i18n.t('message.component_device') },
         { value: 'FIRMWARE', text: this.$i18n.t('message.component_firmware') },
         { value: 'FILE', text: this.$i18n.t('message.component_file') },
+        { value: 'CRYPTOGRAPHIC_ASSET', text: this.$i18n.t('message.component_cryptographic_asset') },
       ],
       selectableLicenses: [],
       selectedLicense: '',
@@ -330,8 +331,7 @@ export default {
         this.axios
           .get(url)
           .then((response) => {
-            for (let i = 0; i < response.data.length; i++) {
-              let license = response.data[i];
+            for (const license of response.data) {
               this.selectableLicenses.push({
                 value: license.licenseId,
                 text: license.name,
diff --git a/src/views/portfolio/projects/ProjectCryptoAssets.vue b/src/views/portfolio/projects/ProjectCryptoAssets.vue
new file mode 100644
index 00000000..253c7b16
--- /dev/null
+++ b/src/views/portfolio/projects/ProjectCryptoAssets.vue
@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <div id="cbomToolbar">
+      <div class="form-inline btn-spaced-group" role="form">
+        <b-button size="md" variant="outline-primary"
+                  v-b-modal.projectAddComponentModal
+                  v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT">
+          <span class="fa fa-plus"></span> {{ $t('message.add_cryptoAsset') }}
+        </b-button>
+        <b-button size="md" variant="outline-primary"
+                  @click="removeDependencies"
+                  v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT">
+          <span class="fa fa-minus"></span> {{ $t('message.remove_cryptoAsset') }}
+        </b-button>
+        <b-button size="md" variant="outline-primary"
+                  v-b-modal.projectUploadBomModal
+                  v-permission:or="[PERMISSIONS.PORTFOLIO_MANAGEMENT, PERMISSIONS.BOM_UPLOAD]">
+          <span class="fa fa-upload"></span> {{ $t('message.upload_cbom') }}
+        </b-button>
+        <b-dropdown variant="outline-primary" v-permission="PERMISSIONS.PORTFOLIO_MANAGEMENT">
+          <template #button-content>
+            <span class="fa fa-download"></span> {{ $t('message.download_cbom') }}
+          </template>
+          <b-dropdown-item @click="downloadCbom('cbom')" href="#">{{ $t('message.inventory') }}</b-dropdown-item>
+          <b-dropdown-item @click="downloadCbom('cbom_withVulnerabilities')" href="#">{{ $t('message.inventory_with_vulnerabilities') }}</b-dropdown-item>
+        </b-dropdown>
+      </div>
+    </div>
+    <bootstrap-table
+      ref="table"
+      :columns="columns"
+      :data="data"
+      :options="options"
+      @on-load-success="tableLoaded">
+    </bootstrap-table>
+  </div>
+</template>
+
+<script>
+  import $ from 'jquery';
+  import common from "../../../shared/common";
+  import xssFilters from "xss-filters";
+  import permissionsMixin from "../../../mixins/permissionsMixin";
+
+  export default {
+    mixins: [permissionsMixin],
+    props: {
+      uuid: String
+    },
+    data() {
+      return {
+        columns: [
+          {
+            field: "state",
+            checkbox: true,
+            align: "center"
+          },
+          {
+            title: this.$t('message.crypto_assets'),
+            field: "name",
+            sortable: true,
+            formatter(value, row, index) {
+              let url = xssFilters.uriInUnQuotedAttr("../../../components/" + row.uuid);
+              return `<a href="${url}">${xssFilters.inHTMLData(value)}</a>`;
+            }
+          },
+          {
+            title: this.$t('message.version'),
+            field: "version",
+            sortable: true,
+            formatter(value, row, index) {
+              if (Object.prototype.hasOwnProperty.call(row, "repositoryMeta") && Object.prototype.hasOwnProperty.call(row.repositoryMeta, "latestVersion")) {
+                row.latestVersion = row.repositoryMeta.latestVersion;
+                if (row.repositoryMeta.latestVersion !== row.version) {
+                  return '<span style="float:right" data-toggle="tooltip" data-placement="bottom" title="Risk: Outdated component. Current version is: '+ xssFilters.inHTMLData(row.repositoryMeta.latestVersion) + '"><i class="fa fa-exclamation-triangle status-warning" aria-hidden="true"></i></span> ' + xssFilters.inHTMLData(row.version);
+                } else {
+                  return '<span style="float:right" data-toggle="tooltip" data-placement="bottom" title="Component version is the latest available from the configured repositories"><i class="fa fa-exclamation-triangle status-passed" aria-hidden="true"></i></span> ' + xssFilters.inHTMLData(row.version);
+                }
+              } else {
+                return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
+              }
+            }
+          },
+          {
+            title: this.$t('message.latest_version'),
+            field: "latestVersion",
+            sortable: false,
+            visible: false,
+            formatter(value, row, index) {
+              return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
+            }
+          },
+          {
+            title: this.$t('message.crypto_assetType'),
+            field: "cryptoAssetProperties.assetType",
+            sortable: true,
+            formatter(value, row, index) {
+              if (typeof value === "undefined") {
+                return "-"; // No primitive info available
+              }
+              return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
+            }
+          },
+          {
+            title: this.$t('message.crypto_oid'),
+            field: "cryptoAssetProperties.oid",
+            sortable: true,
+            formatter(value, row, index) {
+              if (typeof value === "undefined") {
+                return "-"; // No primitive info available
+              }
+              return xssFilters.inHTMLData(value);
+            }
+          },
+          {
+            title: this.$t('message.crypto_algo_primitive'),
+            field: "cryptoAssetProperties.primitive",
+            sortable: true,
+            formatter(value, row, index) {
+              if (typeof value === "undefined") {
+                return "-"; // No primitive info available
+              }
+              return xssFilters.inHTMLData(common.valueWithDefault(value, ""));
+            }
+          },
+          {
+            title: this.$t('message.crypto_quantumSecurityLevel'),
+            field: "cryptoAssetProperties.quantumSecurityLevel",
+            sortable: true,
+            class: "tight",
+          },
+          {
+            title: this.$t('message.crypto_classicalSecurityLevel'),
+            field: "cryptoAssetProperties.classicalSecurityLevel",
+            sortable: true,
+            class: "tight",
+          },
+          {
+            title: this.$t('message.crypto_nistQscLevel'),
+            field: "cryptoAssetProperties.nistQscLevel",
+            sortable: true,
+          }
+        ],
+        data: [],
+        options: {
+          onPostBody: this.initializeTooltips,
+          search: true,
+          showColumns: true,
+          showRefresh: true,
+          pagination: true,
+          silentSort: false,
+          sidePagination: 'server',
+          toolbar: '#cbomToolbar',
+          queryParamsType: 'pageSize',
+          pageList: '[10, 25, 50, 100]',
+          pageSize: 10,
+          icons: {
+            refresh: 'fa-refresh'
+          },
+          responseHandler: function (res, xhr) {
+            res.total = xhr.getResponseHeader("X-Total-Count");
+            return res;
+          },
+          url: `${this.$api.BASE_URL}/api/v1/crypto/project/${this.uuid}`
+        }
+      };
+    },
+    methods: {
+      initializeTooltips: function () {
+        $('[data-toggle="tooltip"]').tooltip();
+      },
+      removeDependencies: function () {
+        let selections = this.$refs.table.getSelections();
+        if (selections.length === 0) return;
+        for (let i=0; i<selections.length; i++) {
+          let url = `${this.$api.BASE_URL}/${this.$api.URL_CRYPTO_ASSET}/${selections[i].uuid}`;
+          this.axios.delete(url).then((response) => {
+            this.$refs.table.refresh({ silent: true });
+            this.$toastr.s(this.$t('message.cryptoAsset_deleted'));
+          }).catch((error) => {
+            this.$toastr.w(this.$t('condition.unsuccessful_action'));
+          });
+        }
+        this.$refs.table.uncheckAll();
+      },
+      downloadCbom: function (data) {
+        let url = `${this.$api.BASE_URL}/${this.$api.URL_BOM}/cyclonedx/project/${this.uuid}`;
+        this.axios.request({
+          responseType: 'blob',
+          url: url,
+          method: 'get',
+          params: {
+            format: 'json',
+            variant: data,
+            download: 'true'
+          }
+        }).then((response) => {
+          const url = window.URL.createObjectURL(new Blob([response.data]));
+          const link = document.createElement('a');
+          link.href = url;
+          let filename = "bom.json";
+          let disposition = response.headers["content-disposition"]
+          if (disposition && disposition.indexOf('attachment') !== -1) {
+            let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+            let matches = filenameRegex.exec(disposition);
+            if (matches != null && matches[1]) {
+              filename = matches[1].replace(/['"]/g, '');
+            }
+          }
+          link.setAttribute('download', filename);
+          document.body.appendChild(link);
+          link.click();
+        });
+      },
+      tableLoaded: function(data) {
+        if (data && Object.prototype.hasOwnProperty.call(data, "total")) {
+          this.$emit('total', data.total);
+        } else {
+          this.$emit('total', '?');
+        }
+      },
+      refreshTable: function() {
+        this.$refs.table.refresh({
+          silent: true
+        });
+      }
+    }
+  };
+</script>