dashitems update

src/app/dashboard/dashboard.component.html

@@ -2,23 +2,39 @@
     <div class="content">
       <div class="left">
       </div>
-      <div class="divider" role="separator" aria-label="Divider"></div>
+      <!--<div class="divider" role="separator" aria-label="Divider"></div>-->
       <div class="center">
         @if (!loginService.user?.token?.ucp) {
           <div class="header">
             <img id="site-logo" src="https://cdn.swopt.com/fis/image/fis-logo.webp" alt="FIS"/>
-            <h1>{{'welcome'|tr:'Welcome'}}</h1>
+            <!--<h1>{{'welcome'|tr:'Welcome'}}</h1>-->
           </div>
           <div class="login">
             <inputx [field]="goto.field" [value]="goto.value" (onChange)="goto.onChange($event)"></inputx>
             <login/>
           </div>
         } @else {
-          <div class="segment">
-            <h2>{{'eLeave'|tr:'eLeave'}}</h2>
-            <mat-divider></mat-divider>
-            <leave-submission-dashboard-item></leave-submission-dashboard-item>
-          </div>
+          <mat-expansion-panel class="segment" expanded="true">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <h2>{{'eleave'|tr:'eLeave'}}</h2>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <div class="dashitems">
+              <leave-submission-dashitem></leave-submission-dashitem>
+              <leave-approval-dashitem></leave-approval-dashitem>
+            </div>
+          </mat-expansion-panel>
+          <mat-expansion-panel class="segment" expanded="true">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <h2>{{'spts'|tr:'SPTS'}}</h2>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <div class="dashitems">
+              
+            </div>
+          </mat-expansion-panel>
         }
         <div class="social-links">
           
@@ -62,7 +78,6 @@
           </a>
         </div>
       </div>
-      <div class="divider" role="separator" aria-label="Divider"></div>
       <div class="right"></div>
     </div>
   </main>

src/app/dashboard/dashboard.component.scss

@@ -100,11 +100,14 @@ main {
   gap: 1.5rem;
   margin-bottom: 1rem;
 }
-
 .content .center .segment {
-  mat-divider {
-    margin-bottom: 1rem;
-  }
+  margin-bottom: 0.5rem;
+}
+
+.content .center .dashitems {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
 .content .right {