feat: add check backup

pages/index.vue

@@ -3,9 +3,13 @@
     <div class="dashboard-container">
       <header class="dashboard-header">
         <div>
+          <p class="section-kicker">Operations</p>
           <h1 class="font-display text-3xl font-bold tracking-tight text-m-text">
             Monitoring
           </h1>
+          <p class="header-description">
+            Visualisez l'etat des applications, des sauvegardes et des ressources systeme depuis une vue unique.
+          </p>
         </div>
       </header>
 
@@ -221,8 +225,24 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: space-between;
   margin-bottom: 2rem;
-  padding-bottom: 1.5rem;
-  border-bottom: 1px solid rgba(80, 140, 255, 0.08);
+  padding-bottom: 1.25rem;
+  border-bottom: 1px solid rgba(80, 140, 255, 0.1);
+}
+
+.section-kicker {
+  margin: 0 0 0.45rem;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: rgb(var(--m-accent));
+}
+
+.header-description {
+  max-width: 62ch;
+  margin-top: 0.9rem;
+  color: rgb(var(--m-muted));
+  line-height: 1.65;
 }
 
 .storage-section {
@@ -240,9 +260,11 @@ onBeforeUnmount(() => {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 1rem;
-  border-radius: 12px;
-  background: rgb(var(--m-secondary));
-  padding: 0.75rem;
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgb(var(--m-secondary) / 0.78), rgb(var(--m-secondary) / 0.92));
+  border: 1px solid rgb(var(--m-border) / 0.32);
+  padding: 0.85rem;
 }
 
 .content-grid {
@@ -281,6 +303,7 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
+  min-width: 0;
 }
 
 @media (max-width: 1180px) {