fix: fix copywrite dan responsivenes

agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html

@@ -8,7 +8,7 @@
   </div>
 
   <div>
-    <button [ngClass]="{'active-button': selectedButton === 'dht'}" (click)="selectSensor('dht')">DHT</button>
+    <button [ngClass]="{'active-button': selectedButton === 'dht'}" (click)="selectSensor('dht')">BHT</button>
     <button [ngClass]="{'active-button': selectedButton === 'npk1'}" (click)="selectSensor('npk1')">NPK 1</button>
     <button [ngClass]="{'active-button': selectedButton === 'npk2'}" (click)="selectSensor('npk2')">NPK 2</button>
     <button [ngClass]="{'active-button': selectedButton === 'relay'}" (click)="selectSensor('relay')">Relay</button>
@@ -50,6 +50,24 @@
   <div *ngIf="!isLoaded && selectedButton === 'npk1'">
     <div *ngIf="sensorData.npk1.temperature || sensorData.npk1.moisture || sensorData.npk1.conductivity; else noData">
       <div class="card-container">
+        <div class="card-parameter">
+          <div>
+            <h3>{{sensorData.npk1.nitrogen}} mg/L</h3>
+            <h6>Nitrogen</h6>
+          </div>
+        </div>
+        <div class="card-parameter">
+          <div>
+            <h3>{{sensorData.npk1.phosphorus}} mg/L</h3>
+            <h6>Phosphorus</h6>
+          </div>
+        </div>
+        <div class="card-parameter">
+          <div>
+            <h3>{{sensorData.npk1.potassium}} mg/L</h3>
+            <h6>Kalium</h6>
+          </div>
+        </div>
         <div class="card-parameter">
           <div>
             <h3>{{sensorData.npk1.temperature}} °C</h3>
@@ -74,24 +92,6 @@
             <h6>pH</h6>
           </div>
         </div>
-        <div class="card-parameter">
-          <div>
-            <h3>{{sensorData.npk1.nitrogen}} mg/L</h3>
-            <h6>Nitrogen</h6>
-          </div>
-        </div>
-        <div class="card-parameter">
-          <div>
-            <h3>{{sensorData.npk1.phosphorus}} mg/L</h3>
-            <h6>Phosphorus</h6>
-          </div>
-        </div>
-        <div class="card-parameter">
-          <div>
-            <h3>{{sensorData.npk1.potassium}} mg/L</h3>
-            <h6>Kalium</h6>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -99,6 +99,24 @@
   <div *ngIf="!isLoaded && selectedButton === 'npk2'">
     <div *ngIf="sensorData.npk2.temperature || sensorData.npk2.moisture || sensorData.npk2.conductivity; else noData">
       <div class="card-container">
+        <div class="card-parameter">
+          <div>
+            <h3>{{sensorData.npk2.nitrogen}} mg/L</h3>
+            <h6>Nitrogen</h6>
+          </div>
+        </div>
+        <div class="card-parameter">
+          <div>
+            <h3>{{sensorData.npk2.phosphorus}} mg/L</h3>
+            <h6>Phosphorus</h6>
+          </div>
+        </div>
+        <div class="card-parameter">
+          <div>
+            <h3>{{sensorData.npk2.potassium}} mg/L</h3>
+            <h6>Kalium</h6>
+          </div>
+        </div>
         <div class="card-parameter">
           <div>
             <h3>{{sensorData.npk2.temperature}} °C</h3>
@@ -123,24 +141,6 @@
             <h6>pH</h6>
           </div>
         </div>
-        <div class="card-parameter">
-          <div>
-            <h3>{{sensorData.npk2.nitrogen}} mg/L</h3>
-            <h6>Nitrogen</h6>
-          </div>
-        </div>
-        <div class="card-parameter">
-          <div>
-            <h3>{{sensorData.npk2.phosphorus}} mg/L</h3>
-            <h6>Phosphorus</h6>
-          </div>
-        </div>
-        <div class="card-parameter">
-          <div>
-            <h3>{{sensorData.npk2.potassium}} mg/L</h3>
-            <h6>Kalium</h6>
-          </div>
-        </div>
       </div>
     </div>
   </div>

agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss

@@ -1,5 +1,10 @@
 .container {
     font-family: "Onest", sans-serif;
+
+    .active-button {
+        background-color: #cad849;
+        color: white;
+    }
 }
 
 .title {
@@ -80,17 +85,45 @@
         flex: 1 1 45%; 
     }
 
-    .card-container{
+    .active-button {
+        background-color: #cad849;
+        color: white;
+    }
+
+    button {
+        color: black;
+        margin-bottom: 20px;
+    }
+
+    .card-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 30px;
+        margin-top: 20px;
         justify-content: center;
     }
 }
 
-@media (max-width: 576px) {
+@media (max-width: 344px) {
     .card-parameter{
         flex: 1 1 100%;
     }
 
-    .card-container{
+    button {
+        color: black;
+        margin-bottom: 20px;
+    }
+
+    .active-button {
+        background-color: #cad849;
+        color: white;
+    }
+
+    .card-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 30px;
+        margin-top: 20px;
         justify-content: center;
     }
 }
@@ -104,11 +137,6 @@ button {
     margin-right: 20px;
 }
 
-.active-button {
-    background-color: #cad849;
-    color: white;
-}
-
 .loading{
     font-size: 18px;
     text-align: center;

agrilink_vocpro/src/app/pages/dashboard/layouts/layouts.component.scss

@@ -9,11 +9,12 @@
     bottom: 0;
     left: 0;
     width: 16.67%; 
-    z-index: 1000;
+    z-index: 1;
     overflow-y: auto; 
 }
 
 .content-area {
+    z-index: 0;
     margin-left: 16.67%; 
     overflow-y: auto; 
     padding-left: 1rem;

agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html

@@ -22,6 +22,5 @@
     <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
         <li><a class="dropdown-item" (click)="onLogout()">Sign out</a></li>
     </ul>
-</div>
+    </div>
-
 </div>

agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.scss

@@ -21,8 +21,24 @@
     color: white;
     font-size: 15px;
     padding-left: 10px;
+    z-index: 9999;
 }
 
 .container-sidebar{
     display: block;
-}
+}
+
+@media (max-width: 430px) {
+    .dropdown-menu{
+        position: absolute; 
+        z-index: 9999;
+        overflow: visible;
+    }
+
+    .dropdown-menu{
+       a{
+        font-size: 11.5px;
+        padding: 0px 0px 0px 10px
+       }
+    }
+}

agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss

@@ -64,6 +64,14 @@
   }
 }
 
+@media (max-width: 344px) {
+  canvas {
+    height: auto; 
+    width: 100%;
+    max-width: 100%; 
+  }
+}
+
 .loading {
   font-size: 18px;
   text-align: center;

agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.scss

@@ -85,16 +85,19 @@
     }
 }
 
-@media (max-width: 576px) {
+@media (min-width: 344px) {
     .card-parameter{
         flex: 1 1 100%;
     }
 
-    .card-container{
+    button {
-        justify-content: center;
+        color: #49473C;
+        margin-right: 20px;
+        margin-bottom: 20px;
     }
 }
 
+
 button {
     border: none;
     border-radius: 10px;