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

@@ -8,6 +8,39 @@
     </div>
 
     <div class="card-container">
+      <div class="card-parameter">
+        <div>
+          <app-gauge-chart 
+            [gaugeTitle]="nitrogenTitle" 
+            [gaugeData]="nitrogenData"
+            [colorStops]="nitrogenColorStops"
+            [maxValue]="nitrogenMaxValue"
+            [satuanData]="nitrogenSatuanData">
+          </app-gauge-chart>
+        </div>
+      </div>
+      <div class="card-parameter">
+        <div>
+          <app-gauge-chart 
+            [gaugeTitle]="pottasiumTitle" 
+            [gaugeData]="pottasiumData"
+            [colorStops]="pottasiumColorStops"
+            [maxValue]="pottasiumMaxValue"
+            [satuanData]="pottasiumSatuanData">
+          </app-gauge-chart>
+        </div>
+      </div>
+      <div class="card-parameter">
+        <div>
+          <app-gauge-chart 
+            [gaugeTitle]="phosphorusTitle" 
+            [gaugeData]="phosphorusData"
+            [colorStops]="phosphorusColorStops"
+            [maxValue]="phosphorusMaxValue"
+            [satuanData]="phosphorusSatuanData">
+          </app-gauge-chart>
+        </div>
+      </div>
       <div class="card-parameter">
         <div>
           <app-gauge-chart 
@@ -32,29 +65,6 @@
           </app-gauge-chart>
         </div>
       </div>
-          
-      <div class="card-parameter">
-        <div>
-          <app-gauge-chart 
-            [gaugeTitle]="suhuTitle" 
-            [gaugeData]="suhuData"
-            [colorStops]="suhuColorStops"
-            [maxValue]="suhuMaxValue"
-            [satuanData]="suhuSatuanData">
-          </app-gauge-chart>
-        </div>
-      </div>
-      <div class="card-parameter">
-        <div>
-          <app-gauge-chart 
-            [gaugeTitle]="kelembabanTanahTitle" 
-            [gaugeData]="kelembabanTanahData"
-            [colorStops]="kelembabanTanahColorStops"
-            [maxValue]="kelembabanTanahMaxValue"
-            [satuanData]="kelembabanTanahSatuanData">
-          </app-gauge-chart>
-        </div>
-      </div>
     </div>
 
     <div class="graph">

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

@@ -34,7 +34,7 @@
     padding: 20px 0px 20px 0px;
     border-radius: 8px;
     text-align: center;
-    flex: 1 1 40%;
+    flex: 1 1 30%;
     min-width: 200px;
 }
 
@@ -55,13 +55,13 @@
 }
 
 @media (max-width: 768px) {
-    .card-suhu, .card-cahaya, .card-kelembapan {
+    .card-parameter{
         flex: 1 1 45%; 
     }
 }
 
 @media (max-width: 576px) {
-    .card-suhu, .card-cahaya, .card-kelembapan {
+    .card-parameter{
         flex: 1 1 100%;
     }
 }

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

@@ -40,4 +40,25 @@ export class DashboardComponent{
   kelembabanTanahSatuanData: string = '%';
   kelembabanTanahTitle: string = 'Kelembapan Tanah';
 
+    //nitrogen
+  nitrogenData: number = 1063;
+  nitrogenColorStops: [number, string][] = [[0, '#364732'], [1, '#364732']];
+  nitrogenMaxValue: number = 2000;
+  nitrogenSatuanData: string = 'NPM';
+  nitrogenTitle: string = 'Nitrogen';
+
+  //pottasium
+  pottasiumData: number = 1000;
+  pottasiumColorStops: [number, string][] = [[0, '#472e49'], [1, '#472e49']];
+  pottasiumMaxValue: number = 2000;
+  pottasiumSatuanData: string = 'NPM';
+  pottasiumTitle: string = 'Pottasium';
+
+  //phospor
+  phosphorusData: number = 1000;
+  phosphorusColorStops: [number, string][] = [[0, '#663440'], [1, '#663440']];
+  phosphorusMaxValue: number = 2000;
+  phosphorusSatuanData: string = 'NPM';
+  phosphorusTitle: string = 'Phosporus';
+
 }

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

@@ -1,9 +1,10 @@
 <div class="container-fluid">
-    <div class="row flex-nowrap">
+    <div class="row">
-        <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 background">
+        <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 background sidebar-fixed">
             <app-sidebar></app-sidebar>
         </div>
-        <div class="col py-3">
+
+        <div class="col py-3 content-area">
             <router-outlet></router-outlet>
         </div>
     </div>

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

@@ -1,4 +1,22 @@
-.background{
+.background {
     background-color: #16423C;
     border-radius: 0px 15px 15px 0px;
-}
+}
+
+.sidebar-fixed {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 16.67%; 
+    z-index: 1000;
+    overflow-y: auto; 
+}
+
+.content-area {
+    margin-left: 16.67%; 
+    overflow-y: auto; 
+    padding-left: 1rem;
+    padding-right: 1rem;
+    height: 100vh;
+}

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

@@ -13,13 +13,13 @@
         </li> -->
     </ul>
     <hr>
-    <!-- <div class="dropdown pb-4">
+    <div class="dropdown pb-4">
         <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
             <img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30" class="rounded-circle">
             <span class="d-none d-sm-inline mx-1">loser</span>
         </a>
         <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
-            <li><a class="dropdown-item" routerLink='/login'>Sign out</a></li>
+            <li><a class="dropdown-item" routerLink='/auth'>Sign out</a></li>
         </ul>
-    </div> -->
+    </div>
 </div>

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

@@ -3,6 +3,10 @@
     border-radius: 0px 15px 15px 0px;
 }
 
+.container{
+    font-family: 'Poppins', sans-serif;
+}
+
 .title{
     color: white;
 }

agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.ts

@@ -88,9 +88,6 @@ export class GaugeChartComponent {
           style: {
             fontSize: '15px',
             fontFamily: 'Poppins, sans-serif',
-            color: 'white',
-            backgroundColor: 'transparent',
-            border: 'none'
           }
         }
       }] as Highcharts.SeriesSolidgaugeOptions[]

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

@@ -1,9 +1,11 @@
 <div class="container-graph">
     <select class="form-select" id="parameterSelect" (change)="updateChart()">
         <option value="humidity">Kelembaban Udara</option>
-        <option value="humidityTanah">Kelembaban Tanah</option>
         <option value="temperature">Suhu</option>
         <option value="light">Intensitas Cahaya</option>
+        <option value="nitrogen">Nitrogen</option>
+        <option value="phosphorus">Phosphorus</option>
+        <option value="pottasium">Pottasium</option>
     </select>
     
     <select  class="form-select" id="timeframeSelect" (change)="updateChart()">

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

@@ -183,6 +183,9 @@ export class GraphComponent implements OnInit {
     const suhuColor = '#8F5A62';
     const intensitasCahayaColor = '#DF9B55';
     const humidityTanahColor = '#493e30';
+    const nitrogenColor = '#364732';
+    const pottasiumColor = '#472e49';
+    const phosphorusColor = '#663440';
   
     switch (parameter) {
       case 'humidity':
@@ -209,6 +212,24 @@ export class GraphComponent implements OnInit {
         newColor = humidityTanahColor;
         newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
         break; 
+      case 'nitrogen':
+        newLabel = timeframe === 'hourly' ? 'Nitrogen Per Jam' : (timeframe === 'daily' ? 'Nitrogen Harian' : 'Nitrogen Bulanan');
+        newData = timeframe === 'hourly' ? this.nitrogenData : (timeframe === 'daily' ? this.dailyNitrogenData : this.monthlyNitrogenData);
+        newColor = nitrogenColor;
+        newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
+        break; 
+      case 'pottasium':
+        newLabel = timeframe === 'hourly' ? 'Pottasium Per Jam' : (timeframe === 'daily' ? 'Pottasium Harian' : 'Pottasium Bulanan');
+        newData = timeframe === 'hourly' ? this.pottasiumData : (timeframe === 'daily' ? this.dailyPottasiumData: this.monthlyPottasiumData);
+        newColor = pottasiumColor;
+        newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
+        break; 
+      case 'phosphorus':
+          newLabel = timeframe === 'hourly' ? 'Phosphorus Per Jam' : (timeframe === 'daily' ? 'Phosphorus Harian' : 'Phosphorus Bulanan');
+          newData = timeframe === 'hourly' ? this.phosphorusData : (timeframe === 'daily' ? this.dailyPhosphorusData : this.monthlyPhosphorusData);
+          newColor = phosphorusColor;
+          newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
+          break; 
       default:
         newLabel = 'Kelembapan Per Jam';
         newData = this.humidityData;