lms-app/src/app/attendance/attendance.component.html

<div class="page">
    <header class="nav-header">
        <button class="close-button" (click)="back()">
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
        </button>
        <h5>
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/attendance.svg"></svg-icon>
            <span> Attendance </span>
        </h5>
    </header>

    <ul class="segment-list">
        <li [ngClass]="{'active' : selectedSegment === 'ALL'}"
        (click)="selectedSegment = 'ALL'">
            <div class="container">
                <h4> ALL </h4>
                <p> 50% </p>
            </div>
        </li>

        <li [ngClass]="{'active' : selectedSegment === 'KAN'}"
        (click)="selectedSegment = 'KAN'">
            <div class="container">
                <h4> KAN </h4>
                <p> 50% </p>
            </div>
        </li>

        <li [ngClass]="{'active' : selectedSegment === 'ENG'}"
        (click)="selectedSegment = 'ENG'">
            <div class="container">
                <h4> ENG </h4>
                <p> 50% </p>
            </div>
        </li>

        <li [ngClass]="{'active' : selectedSegment === 'MAT'}"
        (click)="selectedSegment = 'MAT'">
            <div class="container">
                <h4> MAT </h4>
                <p> 50% </p>
            </div>
        </li>

        <li [ngClass]="{'active' : selectedSegment === 'PHY'}"
        (click)="selectedSegment = 'PHY'">
            <div class="container">
                <h4> PHY </h4>
                <p> 50% </p>
            </div>
        </li>

        <li [ngClass]="{'active' : selectedSegment === 'CHE'}"
        (click)="selectedSegment = 'CHE'">
            <div class="container">
                <h4> CHE </h4>
                <p> 50% </p>
            </div>
        </li>
    </ul>


    <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> Absent </th>
                        <th> Present </th>
                    </tr>

                    <tr>
                        <td> June 2020 </td>
                        <td> 2 </td>
                        <td> 20 </td>
                    </tr>

                    <tr>
                        <td> July 2020 </td>
                        <td> 4 </td>
                        <td> 18 </td>
                    </tr>

                    <tr>
                        <td> August 2020 </td>
                        <td> 6 </td>
                        <td> 20 </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> Absent </th>
                        <th> Present </th>
                    </tr>

                    <tr>
                        <td> June 2020 </td>
                        <td> 2 </td>
                        <td> 20 </td>
                    </tr>

                    <tr>
                        <td> July 2020 </td>
                        <td> 4 </td>
                        <td> 18 </td>
                    </tr>

                    <tr>
                        <td> August 2020 </td>
                        <td> 6 </td>
                        <td> 20 </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">
                <div class="content">
                    <label> June </label>
                    <p> 90 Class : 60 Hrs </p>
                </div>
                <div class="progress">
                    50%
                </div>
                <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
            </div>

            <ul class="subject-list">
                <header> <p> Today: </p> <div class="progress"> 50% </div> </header>
                <li class="subject completed">
                    <div class="content">
                        <label> English </label>
                        <p> Chapter : Topic </p>
                        <p class="status-text"> Attended </p>
                    </div>
                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
                </li>

                <li class="subject failed">
                    <div class="content">
                        <label> Kannada </label>
                        <p> Chapter : Topic </p>
                        <p class="status-text"> Absent </p>
                    </div>
                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
                </li>

                <li class="subject warning">
                    <div class="content">
                        <label> Physics </label>
                        <p> Chapter : Topic </p>
                        <p class="status-text"> 10 Mins late </p>
                    </div>
                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
                </li>

                <header> <p> Yesterday: </p> <div class="progress"> 50% </div> </header>
                <li class="subject completed">
                    <div class="content">
                        <label> English </label>
                        <p> Chapter : Topic </p>
                        <p class="status-text"> Attended </p>
                    </div>
                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
                </li>

                <li class="subject failed">
                    <div class="content">
                        <label> Kannada </label>
                        <p> Chapter : Topic </p>
                        <p class="status-text"> Absent </p>
                    </div>
                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
                </li>

                <li class="subject warning">
                    <div class="content">
                        <label> Physics </label>
                        <p> Chapter : Topic </p>
                        <p class="status-text"> 15 Mins late </p>
                    </div>
                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
                </li>
            </ul>
        </li>


        <li class="month" [ngClass]="{'active' : selectedList === 2}"
        (click)="selectedList === 2 ? selectedList = 0 : selectedList = 2">
            <div class="list-header">
                <div class="content">
                    <label> July </label>
                    <p> 90 Class : 60 Hrs </p>
                </div>
                <div class="progress">
                    50%
                </div>
                <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
            </div>

            <ul class="subject-list">
                <header> <p> 30th: </p> <div class="progress"> 50% </div> </header>
                <li class="subject warning">
                    <div class="content">
                        <label> Kannada </label>
                        <p> Chapter : Topic </p>
                        <p class="status-text"> warning </p>
                    </div>
                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
                </li>

                <li class="subject warning">
                    <div class="content">
                        <label> English </label>
                        <p> Chapter : Topic </p>
                        <p class="status-text"> warning </p>
                    </div>
                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
                </li>


                <li class="subject warning">
                    <div class="content">
                        <label> Chemistry </label>
                        <p> Chapter : Topic </p>
                        <p class="status-text"> warning </p>
                    </div>
                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
                </li>


                <li class="subject warning">
                    <div class="content">
                        <label> Physics </label>
                        <p> Chapter : Topic </p>
                        <p class="status-text"> warning </p>
                    </div>
                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
                </li>
            </ul>
        </li>
    </ul>
</div>