+
+
+
+
+
+
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+
+
+
+
+
+ 08
+
+
+
+
+
+
+
+ 01
+
+
+
+
+
+ 03
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.scss b/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.scss
new file mode 100644
index 00000000..730bfcfe
--- /dev/null
+++ b/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.scss
@@ -0,0 +1,242 @@
+.colorBG {
+ --background: #f0efef;
+}
+.header-div {
+ background: #22c6b3;
+ color: var(--light);
+ text-transform: capitalize;
+ display: block;
+ position: relative;
+ height: 210px;
+ margin-bottom: 60px;
+}
+
+
+
+
+.chart-modal .modal-Wrapper {
+ --background: rgb(116, 108, 108) !important;
+ --border-color:white!important ;
+ width: 85%!important ;
+ height: 40px !important ;
+
+ }
+
+ .navbar{
+ font-size: 10px !important;
+ --background: #22C6B3 !important;
+ color: aliceblue !important;
+// margin-top: 10px !important;
+
+ }
+
+ .menu{
+ // margin-left:330px !important;
+ margin-top: 0px !important;
+ font-size: 35px !important;
+ background: #22C6B3;
+ color: aliceblue;
+ margin-left: 0px !important;
+
+ }
+
+ .person{
+
+ margin-left:100px !important;
+ margin-top: 0px !important;
+ font-size: 23px !important;
+ background: #22C6B3 !important;
+ color: aliceblue !important;
+
+ }
+
+ .grid{
+margin-bottom: 550px !important;
+margin-top: 20px !important;
+margin-left: 15px !important;
+margin-right: 15px !important;
+background-color:white !important;
+border-radius: 20px !important;
+height: 250px !important;
+ }
+
+ .headerGrid{
+ margin-bottom: 550px !important;
+margin-top: 80px !important;
+margin-left: 15px !important;
+margin-right: 15px !important;
+background-color:white !important;
+border-radius: 20px !important;
+height: 250px !important;
+ }
+
+ .bodyGrid{
+ margin-bottom: 550px !important;
+ margin-top: 20px !important;
+ margin-left: 15px !important;
+ margin-right: 15px !important;
+ background-color:white !important;
+ border-radius: 20px !important;
+ height: 270px !important;
+ }
+ .labelGrid{
+ margin-top: -30px !important;
+ background-color:white !important;
+ border-radius: 20px !important;
+ height: 100px !important;
+ }
+
+.ionSliders{
+ margin: 0px !important;
+ padding: 0px !important;
+
+}
+
+
+ .ionSlide{
+ margin-top: 5px !important;
+ margin-left: 190px !important;
+ color: black !important;
+
+ }
+ .dateLable{
+
+ margin-left: 90px !important;
+ color: black !important;
+ font-size: small !important;
+ margin-top: 15px !important;
+ }
+// h1{
+// font-size: 15px !important;
+// text-align: center !important;
+// }
+.arrowDropright{
+ margin-left:100px !important;
+ font-size: 20px !important;
+ color: rgb(168, 165, 165) !important;
+ margin-top: 15px !important;
+
+}
+.arrowDropleft{
+ font-size: 20px !important;
+ margin-left: 10px !important;
+ margin-top: 15px !important;
+ color: rgb(116, 108, 108) !important;
+}
+
+ .ionLable{
+ font-size: 10px !important;
+ }
+
+ .number{
+
+ font-size: 18px !important;
+ font-weight: bolder !important;
+ color: black !important;
+ }
+
+ .header-div{
+ background:var(--primary);
+ background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
+ background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
+ background: #22C6B3;
+ // background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
+ color:var(--light);
+ text-transform: capitalize;
+
+ display: block;
+ position: relative;
+ height: 210px;
+ margin-bottom:60px;
+ // border-radius: 0px 0px 70px 70px;
+ }
+
+ .request-heading {
+
+ span {
+
+ text-align: center;
+
+ display: block;
+
+ padding-top: 8px;
+
+ font-family: workSans-Regular;
+
+ }
+
+ }
+
+
+
+ .result-graph {
+
+ position: relative;
+
+ background: white;
+
+ margin-right: 20px;
+
+ margin-left: 20px;
+
+ margin-top: 20px;
+
+ padding-bottom: 20px;
+
+ border-radius: 20px;
+
+ }
+
+
+
+
+
+
+
+
+
+
+ .result-text-container {
+
+ padding: 0;
+
+ margin: 0;
+
+ position: absolute;
+
+ left: 50%;
+
+ top: 50%;
+
+ display: block;
+
+ text-align: center;
+
+ transform: translate(-50%, -50%);
+
+ h2 {
+
+ font-size: 38px;
+
+ font-family: WorkSans-Bold;
+
+ margin: 0 auto;
+
+ line-height: 36px;
+
+ }
+
+ span {
+
+ width: 125px;
+
+ display: block;
+
+ margin: 0 auto;
+
+ font-size: 12px;
+
+ font-family: workSans-Regular;
+ }
+ }
+
\ No newline at end of file
diff --git a/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.spec.ts b/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.spec.ts
new file mode 100644
index 00000000..39779b1a
--- /dev/null
+++ b/Mohem/src/app/attendance/monthly-attendance/monthly-attendance.component.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MonthlyAttendanceComponent } from './monthly-attendance.component';
+
+describe('MonthlyAttendanceComponent', () => {
+ let component: MonthlyAttendanceComponent;
+ let fixture: ComponentFixture