diff --git a/Mohem/src/app/authentication/confirm-login/confirm-login.component.ts b/Mohem/src/app/authentication/confirm-login/confirm-login.component.ts
index f661aa72..45132891 100644
--- a/Mohem/src/app/authentication/confirm-login/confirm-login.component.ts
+++ b/Mohem/src/app/authentication/confirm-login/confirm-login.component.ts
@@ -584,15 +584,15 @@ export class ConfirmLoginComponent implements OnInit {
- clientId: "Fingerprint Authetnciation",
+ // clientId: "Fingerprint Authetnciation",
- clientSecret: "Ate343_9347lajF", // Only necessary for Android
+ // clientSecret: "Ate343_9347lajF", // Only necessary for Android
- disableBackup: true, // Only for Android(optional)
+ // disableBackup: true, // Only for Android(optional)
- localizedFallbackTitle: this.ts.trPK("general", "use-pin"), // Only for iOS
+ // localizedFallbackTitle: this.ts.trPK("general", "use-pin"), // Only for iOS
- localizedReason: this.ts.trPK("general", "auth-please") // Only for iOS
+ // localizedReason: this.ts.trPK("general", "auth-please") // Only for iOS
})
diff --git a/Mohem/src/app/eit/home/home.component.html b/Mohem/src/app/eit/home/home.component.html
index 944ae6ef..6e489093 100644
--- a/Mohem/src/app/eit/home/home.component.html
+++ b/Mohem/src/app/eit/home/home.component.html
@@ -21,23 +21,22 @@
{{menuItem.PROMPT}}
-
-
+
+
+ *ngIf="menuItem.children && menuItem.MENU_ENTRY_TYPE=='MENU' && menuItem.PROMPT != 'Time And Attendance'" slot="end" class="arrow-down">
\ No newline at end of file
diff --git a/Mohem/src/app/eit/home/home.component.ts b/Mohem/src/app/eit/home/home.component.ts
index 686b5c0d..2289313c 100644
--- a/Mohem/src/app/eit/home/home.component.ts
+++ b/Mohem/src/app/eit/home/home.component.ts
@@ -29,7 +29,7 @@ export class HomeComponent implements OnInit {
openPage(page, index) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
- if (page.children.length == 0) {
+ if (page.children.length == 0 || page.PROMPT == 'Time And Attendance') {
this.goToRequest(page);
} else {
if (this.selectedMenu == 0) {
@@ -55,6 +55,10 @@ export class HomeComponent implements OnInit {
if (menuEntry.REQUEST_TYPE =='PAYSLIP'){
this.cs.openPayslipPage();
}
+ if (menuEntry.PROMPT == 'Time And Attendance'){
+ this.cs.openTimeCardPage();
+ }
+
}
}
diff --git a/Mohem/src/app/hmg-common/services/common/common.service.ts b/Mohem/src/app/hmg-common/services/common/common.service.ts
index 532e6bd4..e5630281 100644
--- a/Mohem/src/app/hmg-common/services/common/common.service.ts
+++ b/Mohem/src/app/hmg-common/services/common/common.service.ts
@@ -1071,6 +1071,9 @@ export class CommonService {
public openPayslipPage() {
this.nav.navigateForward(["/payslip/home"]);
}
+ public openTimeCardPage() {
+ this.nav.navigateForward(["/time-card/home"]);
+ }
public openEarningsPage() {
this.nav.navigateForward(["/payslip/Earnings"]);
}
diff --git a/Mohem/src/app/time-card/home/home.component.html b/Mohem/src/app/time-card/home/home.component.html
index afc16a36..aa52c414 100644
--- a/Mohem/src/app/time-card/home/home.component.html
+++ b/Mohem/src/app/time-card/home/home.component.html
@@ -1,3 +1,29 @@
-
- home works!
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{timeCard.heading}}
+ {{timeCard.description}}
+
+
+
+
+
+
+
+
+
+
diff --git a/Mohem/src/app/time-card/home/home.component.scss b/Mohem/src/app/time-card/home/home.component.scss
index e69de29b..42dcf08e 100644
--- a/Mohem/src/app/time-card/home/home.component.scss
+++ b/Mohem/src/app/time-card/home/home.component.scss
@@ -0,0 +1,54 @@
+ion-header{
+ overflow: hidden;
+}
+ion-content{
+ --ion-background-color: #f2f2f3;
+}
+
+ion-card-content {
+ padding: 0px;
+}
+
+ion-card {
+ box-shadow: none !important;
+ background-color: white;
+ margin: 10px 30px;
+}
+ion-header {
+ background: #f2f2f3;
+}
+ion-title{
+ text-align: center;
+ font-family: WorkSans-Bold;
+ font-size: 18px;
+}
+.header-toolbar-new{
+ --background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
+ border-bottom-right-radius: 30px;
+ border-bottom-left-radius: 30px;
+}
+
+.time-card-image{
+ padding: 10px;
+}
+.time-card-details{
+ padding: 0px;
+ margin-top: 25px;
+ line-height: 10px;
+}
+
+.time-card-heading{
+ font-weight: bold;
+ font-size: 13px;
+ color: #666666;
+ font-family: WorkSans-Bold;
+}
+
+.time-card-description{
+ font-size: 10px;
+}
+
+.time-card-rightIcon{
+ padding: 8px;
+ margin-top: 18px;
+}
diff --git a/Mohem/src/app/time-card/home/home.component.ts b/Mohem/src/app/time-card/home/home.component.ts
index a7aad8ad..d6617717 100644
--- a/Mohem/src/app/time-card/home/home.component.ts
+++ b/Mohem/src/app/time-card/home/home.component.ts
@@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
-
+import { NavController } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
@@ -7,8 +7,38 @@ import { Component, OnInit } from '@angular/core';
})
export class HomeComponent implements OnInit {
- constructor() { }
+ public timeCardOptions: any = [
+ {
+ imageName: 'MyTimeCard.png',
+ heading: 'My Time Card',
+ description: 'View your attendance records.',
+ pageLink: '/time-card/time-card-details'
+ },
+ {
+ imageName: 'Timeback.png',
+ heading: 'Time Back',
+ description: 'View and use your extra work time.',
+ pageLink: '/time-card/home'
+ },
+ {
+ imageName: 'MissingSwipe.png',
+ heading: 'Missing Swipe',
+ description: 'Resolve swipe and attendance records',
+ pageLink: '/time-card/home'
+ },
+ {
+ imageName: 'WorkOnBreak.png',
+ heading: 'Work on Break',
+ description: 'Record your work time in during break.',
+ pageLink: '/time-card/home'
+ }
+ ];
+
+ constructor(public nav: NavController) {}
ngOnInit() {}
+ public openDetailPage() {
+ this.nav.navigateForward(['/time-card/time-card-details']);
+ }
}
diff --git a/Mohem/src/app/time-card/select-period/select-period.component.html b/Mohem/src/app/time-card/select-period/select-period.component.html
new file mode 100644
index 00000000..58a4b24f
--- /dev/null
+++ b/Mohem/src/app/time-card/select-period/select-period.component.html
@@ -0,0 +1,51 @@
+
+
+
+ select-period works!
+
+
+ select-period works!
+
+
+ select-period works!
+
+
+ select-period works!
+
+
+ select-period works!
+
+
+ select-period works!
+
+
+ select-period works!
+
+
+ select-period works!
+
+
+ select-period works!
+
+
+ select-period works!
+
+
+
+ select-period works!
+
+
+ select-period works!
+
+
+ select-period works!
+
+
+ select-period works!
+
+
+
diff --git a/Mohem/src/app/time-card/select-period/select-period.component.scss b/Mohem/src/app/time-card/select-period/select-period.component.scss
new file mode 100644
index 00000000..6a342b88
--- /dev/null
+++ b/Mohem/src/app/time-card/select-period/select-period.component.scss
@@ -0,0 +1,12 @@
+.footer-modal-button{
+ position: absolute;
+ bottom: 0;
+ color: white;
+ width: 100%;
+ text-align: center;
+ }
+ .footer-modal-button button{
+ font-size: 20px;
+ background: white;
+ line-height: 2;
+ }
\ No newline at end of file
diff --git a/Mohem/src/app/time-card/select-period/select-period.component.spec.ts b/Mohem/src/app/time-card/select-period/select-period.component.spec.ts
new file mode 100644
index 00000000..bde45178
--- /dev/null
+++ b/Mohem/src/app/time-card/select-period/select-period.component.spec.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectPeriodComponent } from './select-period.component';
+
+describe('SelectPeriodComponent', () => {
+ let component: SelectPeriodComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ SelectPeriodComponent ],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SelectPeriodComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/Mohem/src/app/time-card/select-period/select-period.component.ts b/Mohem/src/app/time-card/select-period/select-period.component.ts
new file mode 100644
index 00000000..effe87d8
--- /dev/null
+++ b/Mohem/src/app/time-card/select-period/select-period.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-select-period',
+ templateUrl: './select-period.component.html',
+ styleUrls: ['./select-period.component.scss'],
+})
+export class SelectPeriodComponent implements OnInit {
+
+ constructor(public modalController: ModalController) { }
+
+ ngOnInit() {}
+
+ public dismiss() {
+ this.modalController.dismiss({
+ dismissed: true
+ });
+ }
+
+}
diff --git a/Mohem/src/app/time-card/service/time-card.service.ts b/Mohem/src/app/time-card/service/time-card.service.ts
index 7e8f2cc3..b4fba9fe 100644
--- a/Mohem/src/app/time-card/service/time-card.service.ts
+++ b/Mohem/src/app/time-card/service/time-card.service.ts
@@ -1,27 +1,27 @@
-import { Injectable } from "@angular/core";
-import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service";
-import { ConnectorService } from "src/app/hmg-common/services/connector/connector.service";
-import { Request } from "src/app/hmg-common/services/models/request";
+import { Injectable } from '@angular/core';
+import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
+import { ConnectorService } from 'src/app/hmg-common/services/connector/connector.service';
+import { Request } from 'src/app/hmg-common/services/models/request';
-import { Observable } from "rxjs";
-import { GetShiftTypeResponse } from "./models/get-shift-type.response";
-import { GetDayAndHoursDetailsResponse } from "./models/get-day-hours-type-details.response";
-import { GetTimeCardSummaryResponse } from "./models/get-time-card-summary.response";
-import { GetShiftDetailResponse } from "./models/get-shift-detail.response";
-import { GetSwipesResponse } from "./models/get-swipes-response";
+import { Observable } from 'rxjs';
+import { GetShiftTypeResponse } from './models/get-shift-type.response';
+import { GetDayAndHoursDetailsResponse } from './models/get-day-hours-type-details.response';
+import { GetTimeCardSummaryResponse } from './models/get-time-card-summary.response';
+import { GetShiftDetailResponse } from './models/get-shift-detail.response';
+import { GetSwipesResponse } from './models/get-swipes-response';
@Injectable({
- providedIn: "root"
+ providedIn: 'root'
})
export class TimeCardService {
- public static getShiftTypeUrl = "Services/ERP.svc/REST/GET_SHIFT_TYPES";
+ public static getShiftTypeUrl = 'Services/ERP.svc/REST/GET_SHIFT_TYPES';
public static getTimeCardSummaryUrl =
- "Services/ERP.svc/REST/GET_TIME_CARD_SUMMARY";
+ 'Services/ERP.svc/REST/GET_TIME_CARD_SUMMARY';
public static getDayHourDetailsUrl =
- "Services/ERP.svc/REST/GET_DAY_HOURS_TYPE_DETAILS";
+ 'Services/ERP.svc/REST/GET_DAY_HOURS_TYPE_DETAILS';
public static getShiftDetailUrl =
- "Services/ERP.svc/REST/GET_SCHEDULE_SHIFTS_DETAILS";
- public static getSwipeUrl = "Services/ERP.svc/REST/GET_SWIPES";
+ 'Services/ERP.svc/REST/GET_SCHEDULE_SHIFTS_DETAILS';
+ public static getSwipeUrl = 'Services/ERP.svc/REST/GET_SWIPES';
constructor(
public con: ConnectorService,
diff --git a/Mohem/src/app/time-card/time-card-details/time-card-details.component.html b/Mohem/src/app/time-card/time-card-details/time-card-details.component.html
index 633c94d1..3e2e30f9 100644
--- a/Mohem/src/app/time-card/time-card-details/time-card-details.component.html
+++ b/Mohem/src/app/time-card/time-card-details/time-card-details.component.html
@@ -1,3 +1,412 @@
-
- time-card-details works!
-
+
+
+
+
+
+
+
+
+
+ Time Card Details
+
+
+ Time Card Summary
+
+
+
+
+
+
+ Days
+
+
+
+ Period Days
+
+
+ 245
+
+
+
+
+ Schedule Days
+
+
+ 156
+
+
+
+
+ Off days
+
+
+ 79
+
+
+
+
+ Attended Days
+
+
+ 163
+
+
+
+
+ Absent Days
+
+
+ 0
+
+
+
+
+
+ Non Schedule Days
+
+
+ 0
+
+
+
+
+ Not Analyzed Days
+
+
+ 3
+
+
+
+
+
+
+
+
+
+
+
+ Hours
+
+
+ Actual
+
+
+ Schedule
+
+
+
+
+ Regular
+
+
+ 245
+
+
+ 235
+
+
+
+
+ Planned OT
+
+
+ 156
+
+
+ 156
+
+
+
+
+ On Call
+
+
+ 79
+
+
+ 79
+
+
+
+
+ Excess
+
+
+ 10
+
+
+ 10
+
+
+
+
+ Time Back
+
+
+ 163
+
+
+
+
+
+
+ Approved Time Back
+
+
+ 0
+
+
+
+
+
+
+ Time Back Balance
+
+
+ 0
+
+
+
+
+
+
+ Late In
+
+
+ 00:06
+
+
+
+
+
+
+ Early Out
+
+
+ 00:03
+
+
+
+
+
+
+
+
+
+
+
+
+ Leaves & Holidays
+
+
+
+ Half-Day Leave
+
+
+ 245
+
+
+
+
+ Unauthorized Leave
+
+
+ 156
+
+
+
+
+ Business Trip
+
+
+ 79
+
+
+
+
+ Sick Leave
+
+
+ 163
+
+
+
+
+ Paid Leave
+
+
+ 0
+
+
+
+
+ Unpaid Leave
+
+
+ 0
+
+
+
+
+ Puclic Holiday
+
+
+ 3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Mohem/src/app/time-card/time-card-details/time-card-details.component.scss b/Mohem/src/app/time-card/time-card-details/time-card-details.component.scss
index e69de29b..89380628 100644
--- a/Mohem/src/app/time-card/time-card-details/time-card-details.component.scss
+++ b/Mohem/src/app/time-card/time-card-details/time-card-details.component.scss
@@ -0,0 +1,128 @@
+ion-header{
+ overflow: hidden;
+}
+ion-content{
+ --ion-background-color: #f2f2f3;
+}
+
+ion-card-content {
+ padding: 0px;
+}
+
+ion-card {
+ box-shadow: none !important;
+ background-color: white;
+ margin: 10px -15px;
+ margin-bottom: 20px;
+}
+ion-header {
+ background: #f2f2f3;
+}
+ion-title{
+ text-align: center;
+ font-family: WorkSans-Bold;
+ font-size: 18px;
+}
+// ion-label {
+// color: #A3D077 !important;
+// }
+.header-toolbar-new{
+ --background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
+ border-bottom-right-radius: 30px;
+ border-bottom-left-radius: 30px;
+}
+
+.active-Segment {
+ border-radius: 5px !important;
+ font-size: 0.3cm !important;
+ background: white !important;
+ color: #fff !important;
+ font-weight: bold !important;
+ border: 1px solid white !important;
+ text-transform: none;
+ --color-checked: none;
+ }
+ .active-Segment ion-label{
+ // color: #A3D077 !important;
+ color: #11975F !important;
+ font-size: 11px;
+ }
+ .normal-Segment ion-label{
+ // color: #A3D077 !important;
+ color: white !important;
+ font-size: 11px;
+ }
+ .normal-Segment {
+ border-radius: 5px !important;
+ font-size: 0.3cm !important;
+ background: #A3D077 !important;
+ color: #fff !important;
+ font-weight: bold !important;
+ border: 1px solid white !important;
+ text-transform: none;
+ --color-checked: none;
+ }
+ .time-card-details-container{
+ margin-right: 20px;
+ margin-left: 20px;
+ }
+
+ .card-summary-heading{
+ margin-left: 10px;
+ margin-top: 12px;
+ color: #606161;
+ font-family: WorkSans-Bold;
+ }
+ .card-summary-heading-hours{
+ color: #606161;
+ font-family: WorkSans-Bold;
+ }
+
+ .card-summary-heading-hours-extended-heading{
+ color: #D3D3D3;
+ font-family: WorkSans-Bold;
+ }
+
+ /////////////////////////////////
+
+ .time-card-details {
+ background: white;
+ margin-top: 15px;
+ border-radius: 5px;
+ }
+
+ .time-card-details-heading-two {
+ color: #606161;
+ font-family: WorkSans-Bold;
+ }
+ .time-card-details-heading-two h2 {
+ margin-top: 15px;
+ font-size: 15px;
+ }
+
+ .time-card-span img{
+ height: 30px;
+ margin-top: -5px;
+ margin-left: 10px;
+ }
+ .show-more-less{
+ width: 100%;
+ background: #606061;
+ text-align: center;
+ /* margin: 10px; */
+ padding-top: 20px;
+ }
+
+ /////////////////////////////////////
+.footer-modal-button{
+ position: absolute;
+ bottom: 0;
+ color: white;
+ width: 100%;
+ text-align: center;
+}
+.footer-modal-button button{
+ font-size: 20px;
+ background: white;
+ line-height: 2;
+}
diff --git a/Mohem/src/app/time-card/time-card-details/time-card-details.component.ts b/Mohem/src/app/time-card/time-card-details/time-card-details.component.ts
index 8fa456db..42303630 100644
--- a/Mohem/src/app/time-card/time-card-details/time-card-details.component.ts
+++ b/Mohem/src/app/time-card/time-card-details/time-card-details.component.ts
@@ -1,4 +1,9 @@
import { Component, OnInit } from '@angular/core';
+import { TimeCardService } from 'src/app/time-card/service/time-card.service';
+import { GetShiftTypeResponse } from '../service/models/get-shift-type.response';
+import { CommonService } from 'src/app/hmg-common/services/common/common.service';
+import { ModalController } from '@ionic/angular';
+import { SelectPeriodComponent } from '../select-period/select-period.component';
@Component({
selector: 'app-time-card-details',
@@ -7,8 +12,40 @@ import { Component, OnInit } from '@angular/core';
})
export class TimeCardDetailsComponent implements OnInit {
- constructor() { }
+ public activeSegment: any = 'time-card-summary';
+ public showMore: any = false;
- ngOnInit() {}
+ constructor(
+ public timeCardService: TimeCardService,
+ public cs: CommonService,
+ public modalController: ModalController
+ ) { }
+ ngOnInit() {
+ // this.getShiftType();
+ }
+
+ public segmentChanged(event: any) {
+ this.activeSegment = event.detail.value;
+ }
+
+ public getShiftType() {
+ this.timeCardService.getShiftType().subscribe((result: GetShiftTypeResponse) => {
+ if (this.cs.validResponse(result)) {
+ console.log('umar' + result);
+ }
+ });
+ }
+
+ public toggleButton() {
+ this.showMore = !this.showMore;
+ }
+
+ async openSelectPeriodModal() {
+ const modal = await this.modalController.create({
+ component: SelectPeriodComponent,
+ cssClass: 'select-period-custom-modal'
+ });
+ return await modal.present();
+ }
}
diff --git a/Mohem/src/app/time-card/time-card.module.ts b/Mohem/src/app/time-card/time-card.module.ts
index e79e452f..586e65fe 100644
--- a/Mohem/src/app/time-card/time-card.module.ts
+++ b/Mohem/src/app/time-card/time-card.module.ts
@@ -8,6 +8,7 @@ import { IonicModule } from '@ionic/angular';
import { TimeCardPage } from './time-card.page';
import { TimeCardDetailsComponent } from './time-card-details/time-card-details.component';
import { HomeComponent } from './home/home.component';
+import { SelectPeriodComponent } from './select-period/select-period.component';
const routes: Routes = [
{
@@ -36,7 +37,11 @@ const routes: Routes = [
declarations: [
TimeCardPage,
HomeComponent,
- TimeCardDetailsComponent
- ]
+ TimeCardDetailsComponent,
+ SelectPeriodComponent
+ ],
+ entryComponents: [
+ SelectPeriodComponent
+ ],
})
export class TimeCardPageModule {}
diff --git a/Mohem/src/assets/imgs/time-card/ArrowDown.png b/Mohem/src/assets/imgs/time-card/ArrowDown.png
new file mode 100644
index 00000000..19693c85
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/ArrowDown.png differ
diff --git a/Mohem/src/assets/imgs/time-card/ArrowRight.png b/Mohem/src/assets/imgs/time-card/ArrowRight.png
new file mode 100644
index 00000000..e04b5a21
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/ArrowRight.png differ
diff --git a/Mohem/src/assets/imgs/time-card/ArrowUp.png b/Mohem/src/assets/imgs/time-card/ArrowUp.png
new file mode 100644
index 00000000..faaa61e8
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/ArrowUp.png differ
diff --git a/Mohem/src/assets/imgs/time-card/Asset 18.png b/Mohem/src/assets/imgs/time-card/Asset 18.png
new file mode 100644
index 00000000..df97a248
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/Asset 18.png differ
diff --git a/Mohem/src/assets/imgs/time-card/Asset 19.png b/Mohem/src/assets/imgs/time-card/Asset 19.png
new file mode 100644
index 00000000..585150ba
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/Asset 19.png differ
diff --git a/Mohem/src/assets/imgs/time-card/Asset 20.png b/Mohem/src/assets/imgs/time-card/Asset 20.png
new file mode 100644
index 00000000..661cb83e
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/Asset 20.png differ
diff --git a/Mohem/src/assets/imgs/time-card/Asset 21.png b/Mohem/src/assets/imgs/time-card/Asset 21.png
new file mode 100644
index 00000000..e03be489
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/Asset 21.png differ
diff --git a/Mohem/src/assets/imgs/time-card/EarlyOut.png b/Mohem/src/assets/imgs/time-card/EarlyOut.png
new file mode 100644
index 00000000..d7c3e48e
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/EarlyOut.png differ
diff --git a/Mohem/src/assets/imgs/time-card/ExcessTime.png b/Mohem/src/assets/imgs/time-card/ExcessTime.png
new file mode 100644
index 00000000..2f7105e1
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/ExcessTime.png differ
diff --git a/Mohem/src/assets/imgs/time-card/LateIn.png b/Mohem/src/assets/imgs/time-card/LateIn.png
new file mode 100644
index 00000000..829cf045
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/LateIn.png differ
diff --git a/Mohem/src/assets/imgs/time-card/MissingSwipe.png b/Mohem/src/assets/imgs/time-card/MissingSwipe.png
new file mode 100644
index 00000000..ec7ffcf5
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/MissingSwipe.png differ
diff --git a/Mohem/src/assets/imgs/time-card/MyTimeCard.png b/Mohem/src/assets/imgs/time-card/MyTimeCard.png
new file mode 100644
index 00000000..9ff482cc
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/MyTimeCard.png differ
diff --git a/Mohem/src/assets/imgs/time-card/Notification.png b/Mohem/src/assets/imgs/time-card/Notification.png
new file mode 100644
index 00000000..a4ff12a7
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/Notification.png differ
diff --git a/Mohem/src/assets/imgs/time-card/PlannedOT.png b/Mohem/src/assets/imgs/time-card/PlannedOT.png
new file mode 100644
index 00000000..188e7306
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/PlannedOT.png differ
diff --git a/Mohem/src/assets/imgs/time-card/Remarks.png b/Mohem/src/assets/imgs/time-card/Remarks.png
new file mode 100644
index 00000000..e1a07b3d
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/Remarks.png differ
diff --git a/Mohem/src/assets/imgs/time-card/Shift Hours.png b/Mohem/src/assets/imgs/time-card/Shift Hours.png
new file mode 100644
index 00000000..9d2000b6
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/Shift Hours.png differ
diff --git a/Mohem/src/assets/imgs/time-card/SwipeIn.png b/Mohem/src/assets/imgs/time-card/SwipeIn.png
new file mode 100644
index 00000000..82b381e1
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/SwipeIn.png differ
diff --git a/Mohem/src/assets/imgs/time-card/SwipeOut.png b/Mohem/src/assets/imgs/time-card/SwipeOut.png
new file mode 100644
index 00000000..a84e1c9d
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/SwipeOut.png differ
diff --git a/Mohem/src/assets/imgs/time-card/TimeBackIcon.png b/Mohem/src/assets/imgs/time-card/TimeBackIcon.png
new file mode 100644
index 00000000..42f13fb5
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/TimeBackIcon.png differ
diff --git a/Mohem/src/assets/imgs/time-card/Timeback.png b/Mohem/src/assets/imgs/time-card/Timeback.png
new file mode 100644
index 00000000..287f57ab
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/Timeback.png differ
diff --git a/Mohem/src/assets/imgs/time-card/TotalHours.png b/Mohem/src/assets/imgs/time-card/TotalHours.png
new file mode 100644
index 00000000..f1ec0e8c
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/TotalHours.png differ
diff --git a/Mohem/src/assets/imgs/time-card/WorkOnBreak.png b/Mohem/src/assets/imgs/time-card/WorkOnBreak.png
new file mode 100644
index 00000000..f1f1faa2
Binary files /dev/null and b/Mohem/src/assets/imgs/time-card/WorkOnBreak.png differ
diff --git a/Mohem/src/theme/styles.scss b/Mohem/src/theme/styles.scss
index 32566988..e955a338 100644
--- a/Mohem/src/theme/styles.scss
+++ b/Mohem/src/theme/styles.scss
@@ -851,4 +851,25 @@ color: var(--dark);
// /* bottom: 10px; */
// left: 0;
// width: 100%;
-// }
\ No newline at end of file
+// }
+.select-period-custom-modal{
+ margin-top: 120%;
+ margin-right: 5%;
+ margin-left: 5%;
+ border-radius: 10px;
+}
+
+// .select-period-custom-modal{
+// --height: auto;
+// .modal-wrapper{
+// width: 90vw;
+// .ion-page {
+// position: relative;
+// contain: content;
+// max-height: 90vh;
+// .ion-content {
+// overflow: auto;
+// }
+// }
+// }
+// }
\ No newline at end of file