other components...

src/components/CCardState/CCardState.scss

@@ -0,0 +1,34 @@
+.my-card-stat {
+  width: 100%;
+  max-width: 200px;
+  min-width: 120px;
+  padding: 1rem 1rem;
+  @media (max-width: 718px) {
+    // PER VERSIONE MOBILE
+    max-width: 150px;
+    padding: 0;
+  }
+
+  box-shadow: none;
+}
+
+.my-card-small-stat {
+  width: 100%;
+  max-width: 60px;
+  min-width: 40px;
+  @media (max-width: 718px) {
+    // PER VERSIONE MOBILE
+    max-width: 50px;
+    min-width: 40px;
+  }
+
+  box-shadow: none;
+}
+
+
+.text-h5-short {
+  line-height: 1.25rem !important;
+  @media (max-width: 718px) {
+    line-height: 1rem !important;
+  }
+}

src/components/CCardState/CCardState.ts

@@ -0,0 +1,83 @@
+import { defineComponent } from 'vue'
+
+import { tools } from '@store/Modules/tools'
+
+export default defineComponent({
+  name: 'CCardState',
+  props: {
+    myperc: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+    mytext: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    myval: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    imgsrc: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    isperc: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    textadd: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    mycolor: {
+      type: String,
+      required: false,
+      default: 'green',
+    },
+    size: {
+      type: String,
+      required: false,
+      default: '150px',
+    },
+    size_mob: {
+      type: String,
+      required: false,
+      default: '130px',
+    },
+    fontsize: {
+      type: String,
+      required: false,
+      default: '1rem',
+    },
+    mystyle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    myclass: {
+      type: String,
+      required: false,
+      default: 'my-card-stat',
+    },
+  },
+  components: {},
+  setup(props) {
+
+    function getsize() {
+      if (tools.isMobile())
+        return props.size_mob
+      else
+        return props.size
+    }
+
+    return {
+      getsize,
+    }
+  },
+})

src/components/CCardState/CCardState.vue

@@ -0,0 +1,36 @@
+<template>
+    <q-card :class="myclass +` text-center`" :style="mystyle">
+        <q-circular-progress
+                show-value
+                :font-size="fontsize"
+                :value="myperc"
+                :size="getsize"
+                :thickness="0.25"
+                :color="mycolor"
+                track-color="grey-3"
+                class="animated"
+        >
+
+            <q-avatar v-if="imgsrc" size="60px">
+                <img :src="imgsrc" alt="img">
+            </q-avatar>
+            <div class="column q-pa-sm text-center">
+                <div>
+                    {{ mytext }}
+                </div>
+                <div v-if="myval" class="mlvalue text-h5 text-blue boldhigh text-h5-short"> {{ myval }} {{ textadd }}
+                </div>
+                <div v-if="isperc" class="cltexth5" >
+                    {{ myperc.toFixed(1) }}%
+                </div>
+            </div>
+        </q-circular-progress>
+    </q-card>
+</template>
+
+<script lang="ts" src="./CCardState.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CCardState.scss';
+</style>

src/components/CCardState/index.ts

@@ -0,0 +1 @@
+export {default as CCardState} from './CCardState.vue'