bfg-common 1.4.800 → 1.4.801

package/components/common/graph/Graph.vue

@@ -1,15 +1,6 @@
 <template>
-  <div class="graph-content">
-    <template v-if="chartOptions">
-      <client-only>
-        <highchart
-          :options="chartOptions"
-          :modules="['exporting', 'export-data']"
-          class="graph-block"
-        />
-      </client-only>
-    </template>
-  </div>
+  <common-graph-new v-if="isNewView" :chart-options="chartOptions" />
+  <common-graph-old v-else :chart-options="chartOptions" />
 </template>
 
 <script setup lang="ts">
@@ -26,6 +17,9 @@ const props = defineProps<{
   selectedRow?: number[]
 }>()
 
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 let localChart: any = null
 const exportChart = (type: string): void => {
   if (type === 'png') {

package/components/common/graph/GraphNew.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="graph-content">
+    <template v-if="props.chartOptions">
+      <client-only>
+        <highchart
+            :options="props.chartOptions"
+            :modules="['exporting', 'export-data']"
+            class="graph-block"
+        />
+      </client-only>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  chartOptions: any
+}>()
+</script>
+
+<style scoped lang="scss">
+.graph-content {
+  width: 100%;
+  //height: inherit;
+  height: 100%;
+
+  .graph-block {
+    height: 100%;
+    border-radius: 8px;
+    box-shadow: 0px 1px 4px 0px #00000014;
+  }
+}
+
+:deep(.highcharts-menu) {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background-color: #ffffff !important;
+  box-shadow: 0px 4px 20px 0px #0000001f !important;
+  padding: 8px !important;
+  border-radius: 8px !important;
+
+  .highcharts-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    color: #4d5d69 !important;
+    padding: 8px !important;
+
+    &::before {
+      content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.66602 6.66675L7.99935 10.0001L11.3327 6.66675' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 9.33333V2' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+    }
+    &:first-child::before {
+      content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_8044_4891)'%3E%3Cpath d='M5.03769 1.33325H2.81547C2.42255 1.33325 2.04573 1.48934 1.7679 1.76717C1.49007 2.045 1.33398 2.42182 1.33398 2.81473V5.03696M14.6673 5.03696V2.81473C14.6673 2.42182 14.5112 2.045 14.2334 1.76717C13.9556 1.48934 13.5788 1.33325 13.1858 1.33325H10.9636M10.9636 14.6666H13.1858C13.5788 14.6666 13.9556 14.5105 14.2334 14.2327C14.5112 13.9548 14.6673 13.578 14.6673 13.1851V10.9629M1.33398 10.9629V13.1851C1.33398 13.578 1.49007 13.9548 1.7679 14.2327C2.04573 14.5105 2.42255 14.6666 2.81547 14.6666H5.03769' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8044_4891'%3E%3Crect width='16' height='16' fill='red'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+    }
+    &:nth-child(2)::before {
+      content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_8044_4828)'%3E%3Cpath d='M4 5.33342V2.33341C4 1.96522 4.29848 1.66675 4.66667 1.66675H11.3333C11.7015 1.66675 12 1.96522 12 2.33341V5.33342' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.00065 11.6668H2.66732C1.93094 11.6668 1.33398 11.0699 1.33398 10.3335V6.66683C1.33398 5.93045 1.93094 5.3335 2.66732 5.3335H13.334C14.0704 5.3335 14.6673 5.93045 14.6673 6.66683V10.3335C14.6673 11.0699 14.0704 11.6668 13.334 11.6668H12.0007' stroke='%234D5D69' stroke-width='1.4'/%3E%3Cpath d='M11.3333 9H4.66667C4.29848 9 4 9.29848 4 9.66667V13.6667C4 14.0349 4.29848 14.3333 4.66667 14.3333H11.3333C11.7015 14.3333 12 14.0349 12 13.6667V9.66667C12 9.29848 11.7015 9 11.3333 9Z' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8044_4828'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    }
+  }
+  hr {
+    border-color: #e9ebed;
+    border-style: solid;
+    margin: 0 8px;
+  }
+}
+</style>

package/components/common/graph/GraphOld.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="graph-content">
+    <template v-if="props.chartOptions">
+      <client-only>
+        <highchart
+          :options="props.chartOptions"
+          :modules="['exporting', 'export-data']"
+          class="graph-block"
+        />
+      </client-only>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  chartOptions: any
+}>()
+</script>
+
+<style scoped lang="scss">
+.graph-content {
+  width: 100%;
+  //height: inherit;
+  height: 100%;
+
+  .graph-block {
+    height: 100%;
+  }
+}
+</style>

package/components/common/monitor/overview/Overview.vue

@@ -1,31 +1,16 @@
 <template>
-  <div class="charts-view">
-    <div v-if="!allData.length" class="content-global-loading">
-      {{ localization.common.loading }}...
-    </div>
-    <template v-else>
-      <template v-for="(chartData, key) in allData" :key="chartData.title">
-        <div :class="['chart-container', `graph-${chartData.title}`]">
-          <div v-if="chartData.loader" class="graphic-loader-block">
-            <div class="spinner"></div>
-            <p>{{ localization.inventoryMonitor.retrievingData }}...</p>
-          </div>
-          <common-graph
-            v-else-if="chartData.data"
-            :data="chartData.data"
-            :chart="charts[key]"
-            :update="updateHelper"
-          />
-          <div v-else class="graph-empty-block">
-            <div class="title">{{ chartData.title }}</div>
-            <div class="body-block">
-              {{ localization.common.emptyGraphText }}
-            </div>
-          </div>
-        </div>
-      </template>
-    </template>
-  </div>
+  <common-monitor-overview-new
+    v-if="isNewView"
+    :charts="props.charts"
+    :all-data="allData"
+    :update-helper="updateHelper"
+  />
+  <common-monitor-overview-old
+    v-else
+    :charts="props.charts"
+    :all-data="allData"
+    :update-helper="updateHelper"
+  />
 </template>
 
 <script setup lang="ts">
@@ -51,7 +36,8 @@ const props = defineProps<{
   graphType: string
 }>()
 
-const { $formattedDatetime } = useNuxtApp()
+const { $formattedDatetime, $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 

package/components/common/monitor/overview/OverviewNew.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="charts-view">
+    <div v-if="!props.allData.length" class="content-global-loading">
+      {{ localization.common.loading }}...
+    </div>
+    <template v-else>
+      <template v-for="(chartData, key) in props.allData" :key="chartData.title">
+        <div :class="['chart-container', `graph-${chartData.title}`]">
+          <div v-if="chartData.loader" class="graphic-loader-block">
+            <div class="spinner"></div>
+            <p>{{ localization.inventoryMonitor.retrievingData }}...</p>
+          </div>
+          <common-graph
+            v-else-if="chartData.data"
+            :data="chartData.data"
+            :chart="props.charts[key]"
+            :update="props.updateHelper"
+          />
+          <div v-else class="graph-empty-block">
+            <div class="title">{{ chartData.title }}</div>
+            <div class="body-block">
+              {{ localization.common.emptyGraphText }}
+            </div>
+          </div>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_GraphDataSettingItem } from '~/components/common/monitor/lib/models/interfaces'
+
+const props = defineProps<{
+  charts: (UI_I_GraphDataSettingItem | null)[]
+  allData: UI_I_GraphDataSettingItem[]
+  updateHelper: number
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+</script>
+
+<style>
+:root {
+  --loader-bg-color: #ffffff;
+}
+:root.dark-theme {
+  --loader-bg-color: #22343c;
+}
+</style>
+
+<style scoped lang="scss">
+.charts-view {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  overflow: auto;
+  height: 100%;
+  gap: 16px;
+
+  .graphic-loader-block {
+    background-color: var(--loader-bg-color);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .graph-empty-block {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--loader-bg-color);
+
+    .title {
+      text-align: center;
+      font-size: 18px;
+      margin-top: 10px;
+      color: var(--global-font-color);
+    }
+
+    .body-block {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      text-align: center;
+      align-items: center;
+      color: var(--global-font-color);
+    }
+  }
+
+  .chart-container {
+    box-sizing: border-box;
+    flex-grow: 1;
+    padding: 5px;
+    min-height: 300px;
+    height: 100%;
+    min-width: 300px;
+    width: 100%;
+    position: relative;
+
+    &:first-child:last-child {
+      height: 100%;
+      width: 100%;
+    }
+
+    &:first-child:nth-last-child(2),
+    &:nth-child(2):last-child {
+      width: 50%;
+      height: 100%;
+    }
+  }
+
+  .content-global-loading {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--global-font-color);
+  }
+}
+@media (min-width: 1280px) {
+  .charts-view .chart-container {
+    width: 50%;
+  }
+}
+@media (min-height: 800px) {
+  .charts-view .chart-container {
+    height: 50%;
+  }
+}
+</style>

package/components/common/monitor/overview/OverviewOld.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="charts-view">
+    <div v-if="!props.allData.length" class="content-global-loading">
+      {{ localization.common.loading }}...
+    </div>
+    <template v-else>
+      <template v-for="(chartData, key) in props.allData" :key="chartData.title">
+        <div :class="['chart-container', `graph-${chartData.title}`]">
+          <div v-if="chartData.loader" class="graphic-loader-block">
+            <div class="spinner"></div>
+            <p>{{ localization.inventoryMonitor.retrievingData }}...</p>
+          </div>
+          <common-graph
+              v-else-if="chartData.data"
+              :data="chartData.data"
+              :chart="props.charts[key]"
+              :update="props.updateHelper"
+          />
+          <div v-else class="graph-empty-block">
+            <div class="title">{{ chartData.title }}</div>
+            <div class="body-block">
+              {{ localization.common.emptyGraphText }}
+            </div>
+          </div>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_GraphDataSettingItem } from '~/components/common/monitor/lib/models/interfaces'
+
+const props = defineProps<{
+  charts: (UI_I_GraphDataSettingItem | null)[]
+  allData: UI_I_GraphDataSettingItem[]
+  updateHelper: number
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+</script>
+
+<style>
+:root {
+  --loader-bg-color: #ffffff;
+}
+:root.dark-theme {
+  --loader-bg-color: #22343c;
+}
+</style>
+
+<style scoped lang="scss">
+.charts-view {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  overflow: auto;
+  height: 100%;
+
+  .graphic-loader-block {
+    background-color: var(--loader-bg-color);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .graph-empty-block {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--loader-bg-color);
+
+    .title {
+      text-align: center;
+      font-size: 18px;
+      margin-top: 10px;
+      color: var(--global-font-color);
+    }
+
+    .body-block {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      text-align: center;
+      align-items: center;
+      color: var(--global-font-color);
+    }
+  }
+
+  .chart-container {
+    box-sizing: border-box;
+    flex-grow: 1;
+    padding: 5px;
+    min-height: 300px;
+    height: 100%;
+    min-width: 300px;
+    width: 100%;
+    position: relative;
+
+    &:first-child:last-child {
+      height: 100%;
+      width: 100%;
+    }
+
+    &:first-child:nth-last-child(2),
+    &:nth-child(2):last-child {
+      width: 50%;
+      height: 100%;
+    }
+  }
+
+  .content-global-loading {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--global-font-color);
+  }
+}
+@media (min-width: 1280px) {
+  .charts-view .chart-container {
+    width: 50%;
+  }
+}
+@media (min-height: 800px) {
+  .charts-view .chart-container {
+    height: 50%;
+  }
+}
+</style>

package/components/common/monitor/overview/filters/Filters.vue

@@ -1,64 +1,39 @@
 <template>
-  <div class="horizontal-flex-container overview-chart-title-bar">
-    <div class="horizontal-flex-container">
-      <label for="periodSelect" class="label-select"
-        >{{ localization.inventoryMonitor.period }}:</label
-      >
-      <div v-if="!disabledPeriodOptions" class="select">
-        <select
-          id="periodSelect"
-          v-model="selectedPeriod"
-          data-id="period-select"
-        >
-          <option
-            v-for="(item, index) in periodOptions"
-            :key="index"
-            :value="item.value"
-          >
-            {{ item.text }}
-          </option>
-        </select>
-      </div>
-      <span v-else class="single-option">{{ periodOptions[0].text }}</span>
-    </div>
-    <div v-show="isShowCustomIntervalButton">
-      <a
-        id="show-interval-modal-button"
-        data-id="show-interval-modal-button"
-        @click="onShowIntervalModal"
-        >{{ localization.inventoryMonitor.changeCustomInterval }}</a
-      >
-    </div>
-    <div v-if="!disabledPeriodOptions" class="chart-title">
-      {{ chartTitleDate }}
-    </div>
-    <div class="view-select-label horizontal-flex-container">
-      <label for="viewSelect" class="label-select"
-        >{{ localization.common.view }}:</label
-      >
-      <div class="select">
-        <select id="viewSelect" v-model="selectedView" data-id="view-select">
-          <option
-            v-for="(item, index) in viewOptions"
-            :key="index"
-            :value="item.value"
-          >
-            {{ item.text }}
-          </option>
-        </select>
-      </div>
-    </div>
-  </div>
-
-  <common-monitor-overview-filters-custom-interval-modal
-    v-if="props.validDateEnd"
-    v-show="isShowIntervalModal"
+  <common-monitor-overview-filters-new
+    v-if="isNewView"
+    v-model:selected-period="selectedPeriod"
+    v-model:selected-view="selectedView"
+    :disabled-period-options="disabledPeriodOptions"
+    :period-options="periodOptions"
+    :is-show-custom-interval-button="isShowCustomIntervalButton"
+    :chart-title-date="chartTitleDate"
+    :view-options="viewOptions"
+    :valid-date-end="props.validDateEnd"
+    :is-show-interval-modal="isShowIntervalModal"
     :selected-periods="props.selectedPeriods"
     :format-date="props.formatDate"
     :current-lang="props.currentLang"
+    @submit-interval-modal="onSubmitIntervalModal"
+    @show-interval-modal="onShowIntervalModal"
+    @hide-interval-modal="onHideIntervalModal"
+  />
+  <common-monitor-overview-filters-old
+    v-else
+    v-model:selected-period="selectedPeriod"
+    v-model:selected-view="selectedView"
+    :disabled-period-options="disabledPeriodOptions"
+    :period-options="periodOptions"
+    :is-show-custom-interval-button="isShowCustomIntervalButton"
+    :chart-title-date="chartTitleDate"
+    :view-options="viewOptions"
     :valid-date-end="props.validDateEnd"
-    @hide="onHideIntervalModal"
-    @submit="onSubmitIntervalModal"
+    :is-show-interval-modal="isShowIntervalModal"
+    :selected-periods="props.selectedPeriods"
+    :format-date="props.formatDate"
+    :current-lang="props.currentLang"
+    @submit-interval-modal="onSubmitIntervalModal"
+    @show-interval-modal="onShowIntervalModal"
+    @hide-interval-modal="onHideIntervalModal"
   />
 </template>
 
@@ -73,8 +48,8 @@ import {
 } from '~/components/common/monitor/overview/filters/lib/config/filterOptions'
 import { getValidDateByOptionFunc } from '~/components/common/monitor/lib/config/getValidDateByOption'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
-const { $formattedDatetime } = useNuxtApp()
+const { $formattedDatetime, $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const props = defineProps<{
   startDate: number
@@ -93,6 +68,8 @@ const emits = defineEmits<{
   (event: 'update-custom-date', value: number[]): void
 }>()
 
+const localization = computed<UI_I_Localization>(() => useLocal())
+
 const selectedPeriod = ref<string>('')
 const periodOptions = computed<UI_I_OptionItem[]>(() =>
   periodFunc(localization.value)
@@ -187,49 +164,4 @@ watch(
 </script>
 
 <style scoped lang="scss">
-.horizontal-flex-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  line-height: 20px;
-  flex-shrink: 0;
-  padding-top: 5px;
-
-  .select {
-    position: relative;
-
-    select {
-      height: 20px;
-      margin: 5px;
-      color: var(--global-font-color);
-    }
-  }
-  .single-option {
-    margin-left: 5px;
-  }
-
-  .chart-title {
-    color: var(--global-font-color);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    margin: 6px;
-    font-weight: 700;
-    text-transform: uppercase;
-  }
-
-  #show-interval-modal-button {
-    cursor: pointer;
-    color: var(--dropdown-item-color);
-  }
-
-  .view-select-label {
-    margin-left: auto;
-    padding-right: 7px;
-    padding-left: 7px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    align-items: center;
-  }
-}
 </style>

package/components/common/monitor/overview/filters/FiltersNew.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="overview-filters">
+    <div class="period-select-wrap">
+      <label for="period-select" class="label-select"
+        >{{ localization.inventoryMonitor.period }}:</label
+      >
+
+      <ui-select
+        v-if="!props.disabledPeriodOptions"
+        v-model="selectedPeriod"
+        :items="props.periodOptions"
+        test-id="period-select"
+      />
+      <span v-else class="single-option">{{
+        props.periodOptions[0].text
+      }}</span>
+      <a
+        v-show="props.isShowCustomIntervalButton"
+        id="show-interval-modal-button"
+        class="chart-text"
+        data-id="show-interval-modal-button"
+        @click="onShowIntervalModal"
+        >{{ localization.inventoryMonitor.changeCustomInterval }}</a
+      >
+      <div v-if="!props.disabledPeriodOptions" class="chart-text">
+        {{ props.chartTitleDate }}
+      </div>
+    </div>
+
+    <div class="view-select-wrap">
+      <label for="view-select" class="label-select"
+        >{{ localization.common.view }}:</label
+      >
+      <ui-select
+        v-model="selectedView"
+        :items="props.viewOptions"
+        test-id="view-select"
+      />
+    </div>
+  </div>
+
+  <common-monitor-overview-filters-custom-interval-modal
+    v-if="props.validDateEnd"
+    v-show="props.isShowIntervalModal"
+    :selected-periods="props.selectedPeriods"
+    :format-date="props.formatDate"
+    :current-lang="props.currentLang"
+    :valid-date-end="props.validDateEnd"
+    @hide="onHideIntervalModal"
+    @submit="onSubmitIntervalModal"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const selectedPeriod = defineModel<string>('selected-period')
+const selectedView = defineModel<string>('selected-view')
+
+const props = defineProps<{
+  disabledPeriodOptions: boolean
+  periodOptions: UI_I_OptionItem[]
+  isShowCustomIntervalButton: boolean
+  chartTitleDate: string
+  viewOptions: UI_I_OptionItem[]
+  validDateEnd: number
+  isShowIntervalModal: boolean
+  selectedPeriods: number[]
+  formatDate: string
+  currentLang: string
+}>()
+const emits = defineEmits<{
+  (event: 'submit-interval-modal', value: number[]): void
+  (event: 'show-interval-modal'): void
+  (event: 'hide-interval-modal'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onShowIntervalModal = (): void => {
+  emits('show-interval-modal')
+}
+const onHideIntervalModal = (): void => {
+  emits('hide-interval-modal')
+}
+const onSubmitIntervalModal = (data: number[]): void => {
+  emits('submit-interval-modal', data)
+}
+</script>
+
+<style scoped lang="scss">
+.overview-filters {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px 16px 16px;
+
+  .period-select-wrap {
+    display: flex;
+    align-items: center;
+
+    .chart-text {
+      font-size: 13px;
+      color: #4d5d69;
+      margin-left: 12px;
+    }
+  }
+
+  .view-select-wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  .label-select {
+    font-size: 13px;
+    font-weight: 500;
+    color: #4d5d69;
+    margin-right: 12px;
+  }
+}
+</style>

package/components/common/monitor/overview/filters/FiltersOld.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="horizontal-flex-container overview-chart-title-bar">
+    <div class="horizontal-flex-container">
+      <label for="periodSelect" class="label-select"
+        >{{ localization.inventoryMonitor.period }}:</label
+      >
+      <div v-if="!props.disabledPeriodOptions" class="select">
+        <select
+          id="periodSelect"
+          v-model="selectedPeriod"
+          data-id="period-select"
+        >
+          <option
+            v-for="(item, index) in props.periodOptions"
+            :key="index"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+      <span v-else class="single-option">{{
+        props.periodOptions[0].text
+      }}</span>
+    </div>
+    <div v-show="props.isShowCustomIntervalButton">
+      <a
+        id="show-interval-modal-button"
+        data-id="show-interval-modal-button"
+        @click="onShowIntervalModal"
+        >{{ localization.inventoryMonitor.changeCustomInterval }}</a
+      >
+    </div>
+    <div v-if="!props.disabledPeriodOptions" class="chart-title">
+      {{ props.chartTitleDate }}
+    </div>
+    <div class="view-select-label horizontal-flex-container">
+      <label for="viewSelect" class="label-select"
+        >{{ localization.common.view }}:</label
+      >
+      <div class="select">
+        <select id="viewSelect" v-model="selectedView" data-id="view-select">
+          <option
+            v-for="(item, index) in props.viewOptions"
+            :key="index"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <common-monitor-overview-filters-custom-interval-modal
+    v-if="props.validDateEnd"
+    v-show="props.isShowIntervalModal"
+    :selected-periods="props.selectedPeriods"
+    :format-date="props.formatDate"
+    :current-lang="props.currentLang"
+    :valid-date-end="props.validDateEnd"
+    @hide="onHideIntervalModal"
+    @submit="onSubmitIntervalModal"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const selectedPeriod = defineModel<string>('selected-period')
+const selectedView = defineModel<string>('selected-view')
+
+const props = defineProps<{
+  disabledPeriodOptions: boolean
+  periodOptions: UI_I_OptionItem[]
+  isShowCustomIntervalButton: boolean
+  chartTitleDate: string
+  viewOptions: UI_I_OptionItem[]
+  validDateEnd: number
+  isShowIntervalModal: boolean
+  selectedPeriods: number[]
+  formatDate: string
+  currentLang: string
+}>()
+const emits = defineEmits<{
+  (event: 'submit-interval-modal', value: number[]): void
+  (event: 'show-interval-modal'): void
+  (event: 'hide-interval-modal'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onShowIntervalModal = (): void => {
+  emits('show-interval-modal')
+}
+const onHideIntervalModal = (): void => {
+  emits('hide-interval-modal')
+}
+const onSubmitIntervalModal = (data: number[]): void => {
+  emits('submit-interval-modal', data)
+}
+</script>
+
+<style scoped lang="scss">
+.horizontal-flex-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  line-height: 20px;
+  flex-shrink: 0;
+  padding-top: 5px;
+
+  .select {
+    position: relative;
+
+    select {
+      height: 20px;
+      margin: 5px;
+      color: var(--global-font-color);
+    }
+  }
+  .single-option {
+    margin-left: 5px;
+  }
+
+  .chart-title {
+    color: var(--global-font-color);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    margin: 6px;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  #show-interval-modal-button {
+    cursor: pointer;
+    color: var(--dropdown-item-color);
+  }
+
+  .view-select-label {
+    margin-left: auto;
+    padding-right: 7px;
+    padding-left: 7px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    align-items: center;
+  }
+}
+</style>

package/components/common/portlets/customAttributes/Portlet.vue

@@ -455,7 +455,7 @@ const onTogglePortlet = (id: string): void => {
   --input-border: #d3d6da;
   --input-color: #4d5d69;
   --input-caret-color: #000000;
-  --input-bg: #ffffff;
+  --input-bg-common: #ffffff;
   --hide-row-icon: #4d5d69;
   --hide-row-icon-hover: #213444;
   --create-row-icon: #008fd6;
@@ -466,7 +466,7 @@ const onTogglePortlet = (id: string): void => {
   --input-border: #e9ebed3d;
   --input-color: #d3d6da;
   --input-caret-color: #ffffff;
-  --input-bg: transparent;
+  --input-bg-common: transparent;
   --hide-row-icon: #e9eaec;
   --hide-row-icon-hover: #ffffff;
   --create-row-icon: #2ba2de;
@@ -549,7 +549,7 @@ const onTogglePortlet = (id: string): void => {
 
 .table-input {
   height: 28px;
-  background-color: var(--input-bg);
+  background-color: var(--input-bg-common);
   border: 1px solid var(--input-border);
   font-size: 12px;
   font-weight: 500;
@@ -580,7 +580,7 @@ const onTogglePortlet = (id: string): void => {
 
   :deep(.ui-select-toggle-button) {
     height: 28px;
-    background-color: var(--input-bg);
+    background-color: var(--input-bg-common);
 
     &:disabled {
       background: var(--select-bg-disabled);

package/components/common/portlets/tag/TagAddNew.vue

@@ -412,7 +412,7 @@ const onCreateCategory = (data: UI_I_CreateCategoryData): void => {
   --input-border: #d3d6da;
   --input-color: #4d5d69;
   --input-caret-color: #000000;
-  --input-bg: #ffffff;
+  --input-bg-common: #ffffff;
   --hide-row-icon: #4d5d69;
   --hide-row-icon-hover: #213444;
   --create-row-icon: #008fd6;
@@ -423,7 +423,7 @@ const onCreateCategory = (data: UI_I_CreateCategoryData): void => {
   --input-border: #e9ebed3d;
   --input-color: #d3d6da;
   --input-caret-color: #ffffff;
-  --input-bg: transparent;
+  --input-bg-common: transparent;
   --hide-row-icon: #e9eaec;
   --hide-row-icon-hover: #ffffff;
   --create-row-icon: #2ba2de;
@@ -512,7 +512,7 @@ const onCreateCategory = (data: UI_I_CreateCategoryData): void => {
 
 .table-input {
   height: 28px;
-  background-color: var(--input-bg);
+  background-color: var(--input-bg-common);
   border: 1px solid var(--input-border);
   font-size: 12px;
   font-weight: 500;
@@ -543,7 +543,7 @@ const onCreateCategory = (data: UI_I_CreateCategoryData): void => {
 
   :deep(.ui-select-toggle-button) {
     height: 28px;
-    background-color: var(--input-bg);
+    background-color: var(--input-bg-common);
   }
 
   :deep(.ui-placeholder) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.800",
+  "version": "1.4.801",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",
@@ -35,7 +35,7 @@
     "@vueuse/components": "^10.1.2",
     "date-fns": "^2.29.3",
     "bfg-nuxt-3-graph": "1.0.17",
-    "bfg-uikit": "1.0.333",
+    "bfg-uikit": "1.0.334",
     "html2canvas": "^1.4.1",
     "prettier-eslint": "^15.0.1"
   }