Attendace report UI

src/app/tabs/more/attendance/attendance.component.html

@@ -9,18 +9,6 @@
         </h5>
     </header>
 
-    <section class="statistics-upfold">
-        <div class="stat safe">
-            <p> 2019-2020 </p>
-            <h4> 50% </h4>
-        </div>
-
-        <div class="stat danger">
-            <p> June 2020 </p>
-            <h4> 80% </h4>
-        </div>
-    </section>
-
     <ul class="segment-list">
         <li [ngClass]="{'active' : selectedSegment === 'ALL'}"
         (click)="selectedSegment = 'ALL'">
@@ -72,7 +60,86 @@
     </ul>
 
 
-    <ul class="month-list">
+    <section class="segment-tabs">
+        <button (click)="selectedSegmentTab = 'report'"
+        [ngClass]="{'active': selectedSegmentTab === 'report' }"> Report </button>
+        <button (click)="selectedSegmentTab = 'details'"
+        [ngClass]="{'active': selectedSegmentTab === 'details' }"> Details </button>
+    </section>
+
+    <ul class="attendance-report" *ngIf="selectedSegmentTab === 'report'">
+        <li class="year" [ngClass]="{'active' : selectedReportYear === 2020 }">
+            <header (click)="selectedReportYear === 2020 ? selectedReportYear = 0 : selectedReportYear = 2020">
+                <label> Year of 2020 - 2021 </label>
+                <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
+            </header>
+
+            <table>
+                <tbody>
+                    <tr>
+                        <th> Month </th>
+                        <th> Present </th>
+                        <th> Absent </th>
+                    </tr>
+
+                    <tr>
+                        <td> June 2020 </td>
+                        <td> 20 </td>
+                        <td> 2 </td>
+                    </tr>
+
+                    <tr>
+                        <td> July 2020 </td>
+                        <td> 18 </td>
+                        <td> 4 </td>
+                    </tr>
+
+                    <tr>
+                        <td> August 2020 </td>
+                        <td> 20 </td>
+                        <td> 6 </td>
+                    </tr>
+                </tbody>
+            </table>
+        </li>
+
+        <li class="year" [ngClass]="{'active' : selectedReportYear === 2019 }">
+            <header (click)="selectedReportYear === 2019 ? selectedReportYear = 0 : selectedReportYear = 2019">
+                <label> Year of 2019 - 2020 </label>
+                <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
+            </header>
+
+            <table>
+                <tbody>
+                    <tr>
+                        <th> Month </th>
+                        <th> Present </th>
+                        <th> Absent </th>
+                    </tr>
+
+                    <tr>
+                        <td> June 2020 </td>
+                        <td> 20 </td>
+                        <td> 2 </td>
+                    </tr>
+
+                    <tr>
+                        <td> July 2020 </td>
+                        <td> 18 </td>
+                        <td> 4 </td>
+                    </tr>
+
+                    <tr>
+                        <td> August 2020 </td>
+                        <td> 20 </td>
+                        <td> 6 </td>
+                    </tr>
+                </tbody>
+            </table>
+        </li>
+    </ul>
+
+    <ul class="month-list" *ngIf="selectedSegmentTab === 'details'">
         <li class="month" [ngClass]="{'active' : selectedList === 1}"
         (click)="selectedList === 1 ? selectedList = 0 : selectedList = 1">
             <div class="list-header">

src/app/tabs/more/attendance/attendance.component.scss

@@ -15,6 +15,7 @@
     position: -webkit-sticky;
     top: 0;
     z-index: 1;
+    box-shadow: 0px 0px 5px var(--black);
 
     .close-button {
         border: 0px;
@@ -147,9 +148,130 @@
     }
 }
 
+.segment-tabs {
+    background-color: var(--ash-black);
+    display: flex;
+    align-items: stretch;
+    height: 50px;
+    box-shadow: 0px 0px 5px var(--black);
+    position: relative;
+    margin-bottom: 2px;
+
+    button {
+        font-size: 14px;
+        width: calc(100% / 2);
+        border: 0px;
+        background-color: transparent;
+        color: var(--light-grey);
+
+        &.active {
+            color: var(--teal-green);
+        }
+    }
+}
+
+.attendance-report {
+    list-style: none;
+    width: 90%;
+    margin: 20px auto;
+
+    .year {
+        margin-bottom: 20px;
+        background-color: var(--ash-black);
+        border-radius: 7px;
+        overflow: hidden;
+
+        &.active {
+            .icon {
+                transform: rotate(0deg);
+            }
+            table {
+                display: table;
+            }
+        }
+    }
+
+    header {
+        background-color: var(--dark-grey);
+        color: white;
+        display: flex;
+        width: 100%;
+        align-items: center;
+        height: 45px;
+        justify-content: space-between;
+        padding: 0 5%;
+        border-radius: 7px;
+    }
+
+    label {
+        font-size: 14px;
+        font-weight: 400;
+    }
+
+    .icon {
+        fill: white;
+        width: 15px;
+        height: 15px;
+        transform: rotate(90deg);
+    }
+
+    table {
+        display: none;
+        width: 90%;
+        margin: 0px auto;
+        border-spacing: 0px;
+        border-collapse: separate;
+
+        th {
+            font-weight: 500;
+            font-size: 14px;
+
+            &:nth-child(1) {
+                color: var(--light-grey);
+            }
+
+            &:nth-child(2) {
+                color: var(--danger);
+            }
+
+            &:nth-child(3) {
+                color: var(--green);
+            }
+        }
+
+        tr {
+            height: 50px;
+            font-size: 14px;
+            color: var(--light-grey);
+
+            &:last-child td {
+                border-bottom: 0;
+            }
+        }
+
+        td, th {
+            border-bottom: 2px solid var(--dark-grey);
+        }
+
+        td {
+            &:nth-child(1) {
+                color: var(--light-grey);
+            }
+
+            &:nth-child(2) {
+                color: var(--danger);
+            }
+
+            &:nth-child(3) {
+                color: var(--green);
+            }
+        }
+
+    }
+}
+
 .month-list {
     list-style: none;
-    margin-top: 5px;
 
     .month {
         &.active {

src/app/tabs/more/attendance/attendance.component.ts

@@ -9,6 +9,8 @@ import { Location } from '@angular/common';
 export class AttendanceComponent implements OnInit {
     selectedList: number = 1;
     selectedSegment: string = 'ALL';
+    selectedSegmentTab: string = 'report';
+    selectedReportYear: number = 2020;
 
 	constructor(
         private location: Location