ADD: cpu widget to the new control page

launcher/public/output.css

@@ -2378,6 +2378,14 @@ video {
   width: 100vw;
 }
 
+.w-2\/5{
+  width: 40%;
+}
+
+.w-\[90\%\]{
+  width: 90%;
+}
+
 .min-w-\[100px\]{
   min-width: 100px;
 }

launcher/src/components/UI/control-page/components/widgets/TheCpu.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="theCpuParent flex w-full h-full justify-center items-center">
+    <div class="cpuIco w-1/3 h-full flex flex-col justify-center items-center">
+      <div class="cpuIco-container flex justify-center items-center w-full h-4/5">
+        <img class="w-3/4" src="/img/icon/control-page-icons/cpuIcon.svg" />
+      </div>
+      <span class="w-full h-1/5 flex justify-center items-center text-gray-200 text-2xs font-semibold uppercase">CPU</span>
+    </div>
+    <div class="cpuCountPart w-2/3 h-full flex flex-col justify-center items-center">
+      <div class="cpuUsage flex justify-center items-center w-full h-1/2">
+        <div class="cpuProccessBarCont w-[90%] h-full flex justify-center items-center">
+          <div class="cpuProccessBar">
+            <div class="cpuProccessBar_value_bg">
+              <div class="cpuProccessBar_value" :style="getStyle" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="cpuTemp flex justify-center items-center w-full h-1/2 text-gray-200 text-[90%] uppercase">
+        <div class="cpuTemp-title flex justify-center items-center w-2/5 h-full">
+          <span>{{ $t("controlPage.usage") }} :</span>
+        </div>
+        <div class="cpuTemp-value flex justify-center items-center w-2/5 h-full">
+          <span>{{ cpu }} %</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useControlStore } from "@/store/theControl";
+import { computed } from "vue";
+
+const controlStore = useControlStore();
+
+const cpu = computed(() => controlStore.cpu);
+
+const getStyle = computed(() => {
+  return { width: 100 - cpu.value + "%" };
+});
+</script>
+
+<style scoped>
+.cpuProccessBar {
+  width: 90%;
+  background: #33393e;
+  height: 50%;
+  border: 1px solid #33393e;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 1px 1px 11px 1px #1f1f1f;
+}
+.cpuProccessBar_value_bg {
+  width: 99%;
+  background-image: linear-gradient(to right, green 35%, yellow, red);
+  height: 88%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  border-radius: 10px;
+}
+.cpuProccessBar_value {
+  height: 100%;
+  background: #33393e;
+}
+</style>

launcher/src/components/UI/control-page/components/widgets/TheNetwork.vue

@@ -8,7 +8,7 @@
         $t("controlPage.network")
       }}</span>
     </div>
-    <div class="totalReceived w-1/3 h-full flex flex-col">
+    <div class="totalReceived w-1/3 h-full flex flex-col justify-center items-center">
       <div class="receivePerSecond w-full h-1/2 flex justify-center items-end">
         <span class="text-orange-600 font-semibold text-lg">{{ controlStore.rx }}</span>
       </div>

launcher/src/components/UI/control-page/sections/CommonSidebar.vue

@@ -1,16 +1,18 @@
 <template>
   <div
-    class="w-full h-full col-start-1 col-end-7 row-start-2 row-span-full grid grid-cols-6 grid-rows-12 items-center bg-red-600 gap-1 p-1"
+    class="w-full h-full col-start-1 col-end-7 row-start-2 row-span-full grid grid-cols-6 grid-rows-15 items-center bg-red-600 gap-1 p-1"
   >
     <WidgetCard class="info-widget col-start-1 col-span-6 row-start-1 row-span-3" />
     <WidgetCard class="info-widget col-start-1 col-span-6 row-start-4 row-span-3" />
-    <WidgetCard class="ram-widget col-start-1 col-span-6 row-start-7 row-span-3"><TheRam /></WidgetCard>
-    <WidgetCard class="network-widget col-start-1 col-span-6 row-start-10 row-span-3"><TheNetwork /></WidgetCard>
+    <WidgetCard class="cpu-widget col-start-1 col-span-6 row-start-7 row-span-3"><TheCpu /></WidgetCard>
+    <WidgetCard class="ram-widget col-start-1 col-span-6 row-start-10 row-span-3"><TheRam /></WidgetCard>
+    <WidgetCard class="network-widget col-start-1 col-span-6 row-start-13 row-span-3"><TheNetwork /></WidgetCard>
   </div>
 </template>
 
 <script setup>
 import WidgetCard from "../components/cards/WidgetCard.vue";
 import TheNetwork from "../components/widgets/TheNetwork.vue";
 import TheRam from "../components/widgets/TheRam.vue";
+import TheCpu from "../components/widgets/TheCpu.vue";
 </script>

launcher/src/components/UI/the-control/ControlDashboard.vue

@@ -63,7 +63,7 @@ import TheStorage from "./TheStorage.vue";
 import DataApi from "./DataApi.vue";
 import SyncStatus from "./SyncStatus.vue";
 import EpochSlot from "./EpochSlot.vue";
-import TheCpu from "./TheCpu.vue";
+import TheCpu from "../control-page/components/widgets/TheCpu.vue";
 import TheHard from "./TheHard.vue";
 import MachineName from "./MachineName.vue";
 import DashboardCard from "./DashboardCard.vue";