diff --git a/Mohem/src/app/eit/home/home.component.html b/Mohem/src/app/eit/home/home.component.html index 944ae6ef..2aedb05f 100644 --- a/Mohem/src/app/eit/home/home.component.html +++ b/Mohem/src/app/eit/home/home.component.html @@ -21,7 +21,6 @@
{{menuItem.PROMPT}} -
@@ -30,7 +29,7 @@ (click)="openPage(subPage)">  {{subPage.PROMPT}} - + diff --git a/Mohem/src/app/eit/home/home.component.ts b/Mohem/src/app/eit/home/home.component.ts index 75909a97..c7127fd1 100644 --- a/Mohem/src/app/eit/home/home.component.ts +++ b/Mohem/src/app/eit/home/home.component.ts @@ -55,6 +55,9 @@ export class HomeComponent implements OnInit { if (menuEntry.REQUEST_TYPE === 'PAYSLIP'){ this.cs.openPayslipPage(); } + if (menuEntry.REQUEST_TYPE === 'TIME_CARD') { + 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 17bc82a5..221deb14 100644 --- a/Mohem/src/app/hmg-common/services/common/common.service.ts +++ b/Mohem/src/app/hmg-common/services/common/common.service.ts @@ -1178,6 +1178,9 @@ public getMonthNameAr(value: number): string { public openPayslipPage() { this.nav.navigateForward(["/payslip/home"]); } + public openTimeCardPage() { + this.nav.navigateForward(["/time-card/time-card-details"]); + } public openEarningsPage() { this.nav.navigateForward(["/payslip/Earnings"]); } @@ -1188,6 +1191,10 @@ public getMonthNameAr(value: number): string { this.nav.navigateForward(["/authentication/confirmLogin"]); } + public navigatePage(path) { + this.nav.navigateForward([path]); + } + public reload(url: string, from: string) { console.log("force reload called from:" + from); // window.location.reload(); diff --git a/Mohem/src/app/time-card/home/home.component.html b/Mohem/src/app/time-card/home/home.component.html index afc16a36..f853e899 100644 --- a/Mohem/src/app/time-card/home/home.component.html +++ b/Mohem/src/app/time-card/home/home.component.html @@ -1,3 +1,34 @@ -

- home works! -

+ + + + + + Time and Attendance + + + + +
+ + + + + + + + +

{{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..1477aa51 100644 --- a/Mohem/src/app/time-card/home/home.component.scss +++ b/Mohem/src/app/time-card/home/home.component.scss @@ -0,0 +1,59 @@ +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-bottom: 15px; +} +ion-header { + background: #f2f2f3; +} +ion-title{ + text-align: center; + font-family: WorkSans-Bold; + font-size: 18px; +} +.time-card-home-container{ + margin-right: 10px; + margin-left: 10px; + margin-top: 20px +} +.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..a33764ae 100644 --- a/Mohem/src/app/time-card/home/home.component.ts +++ b/Mohem/src/app/time-card/home/home.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { CommonService } from 'src/app/hmg-common/services/common/common.service'; @Component({ selector: 'app-home', @@ -7,8 +8,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 common: CommonService) {} ngOnInit() {} + public openDetailPage(path) { + this.common.navigatePage(path); + } } 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..0bc9515f --- /dev/null +++ b/Mohem/src/app/time-card/select-period/select-period.component.html @@ -0,0 +1,61 @@ + + +
+ + + +
+ Date From + +
+
+ + +
+ Date To + +
+
+
+
+ +
+ + {{filter.name}} + +
+ + + + + Shift type + + + {{shift.SHT_TYPE_DESC}} + + + + + + Search +
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..038155ad --- /dev/null +++ b/Mohem/src/app/time-card/select-period/select-period.component.scss @@ -0,0 +1,30 @@ +.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; + } + .filters-container{ + display: inline-block; + text-align: center; + margin-top: 10px; + } + .filter-tag-button{ + display: inline-block; + border-radius: 5px; + border: 2px solid #A3D077; + color: #606161; + text-align: center; + font-size: 18px; + padding: 5px; + margin: 5px; + } + .filters-container .selected { + background-color: #d4f0e4; + } \ 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..5ecc7a18 --- /dev/null +++ b/Mohem/src/app/time-card/select-period/select-period.component.ts @@ -0,0 +1,128 @@ +import { Component, OnInit } from '@angular/core'; +import { ModalController, NavParams } from '@ionic/angular'; +import { CommonService } from 'src/app/hmg-common/services/common/common.service'; +import { TimeCardService } from 'src/app/time-card/service/time-card.service'; + +@Component({ + selector: 'app-select-period', + templateUrl: './select-period.component.html', + styleUrls: ['./select-period.component.scss'], +}) +export class SelectPeriodComponent implements OnInit { + public shiftTypesArray: any = []; + public dateFrom: any; + public dateTo: any; + public selectedShiftType: any; + + public filtersArray: any = [ + { + name: 'Excess', + active: false, + key: 'P_EXCESS_FLAG', + value: '' + }, + { + name: 'Timeback', + active: false, + key: 'P_TIMEBACK_FLAG', + value: '' + }, + { + name: 'Comp Off', + active: false, + key: 'P_COMP_OFF_FLAG', + value: '' + }, + { + name: 'Non scheduled', + active: false, + key: 'P_NON_SCHEDULED_FLAG', + value: '' + }, + { + name: 'Late In', + active: false, + key: 'P_LATE_IN_FLAG', + value: '' + }, + { + name: 'Early Out', + active: false, + key: 'P_EARLY_OUT_FLAG', + value: '' + }, + { + name: 'Shortage', + active: false, + key: 'P_SHORTAGE_FLAG', + value: '' + }, + { + name: 'Missing Swipe', + active: false, + key: 'P_MISSING_SWIPE_FLAG', + value: '' + }, + { + name: 'Work On Break', + active: false, + key: 'P_ACTUAL_WOB_SEC', + value: '' + }, + { + name: 'Analyzed', + active: false, + key: 'P_ANALAYZED_FLAG', + value: '' + }, + { + name: 'Approved Timeback', + active: false, + key: 'P_APPR_TIMEBACK_FLAG', + value: '' + }, + ]; + constructor( + public modalController: ModalController, + public common: CommonService, + public timeCardService: TimeCardService, + public navParams: NavParams) { } + + ngOnInit() { + this.getShiftTypes(); + this.dateFrom = this.navParams.get('dateFrom'); + this.dateTo = this.navParams.get('dateTo'); + } + + public dismissModal() { + const selectedFilters: any = {}; + for (const filter of this.filtersArray) { + selectedFilters[filter.key] = filter; + } + this.modalController.dismiss({ + dismissed: true, + keySelectedFilters: selectedFilters, + selectedShiftType: this.selectedShiftType, + dateFrom: this.dateFrom, + dateTo: this.dateTo + }); + } + + public changeFiltersSelection(i: any) { + this.filtersArray[i].active = !this.filtersArray[i].active; + if (this.filtersArray[i].active) { + this.filtersArray[i].value = 'Y'; + } else { + this.filtersArray[i].value = ''; + } + } + + public getShiftTypes() { + this.timeCardService.getShiftType().subscribe((result) => { + if (this.common.validResponse(result)) { + this.shiftTypesArray = result.GetShiftTypesList; + } + }); + } + +} diff --git a/Mohem/src/app/time-card/service/models/get-day-hours-type-details.request.ts b/Mohem/src/app/time-card/service/models/get-day-hours-type-details.request.ts index 987dc09c..240f1b37 100644 --- a/Mohem/src/app/time-card/service/models/get-day-hours-type-details.request.ts +++ b/Mohem/src/app/time-card/service/models/get-day-hours-type-details.request.ts @@ -5,8 +5,8 @@ export class GetDayAndHoursDetailsRequest extends Request { public P_SELECTED_EMPLOYEE_NUMBER: string; public P_MENU_TYPE: string; public P_SELECTED_RESP_ID: number; - public P_SCHEDULE_DATE_FROM: DateTimeInput; - public P_SCHEDULE_DATE_TO: DateTimeInput; + public P_SCHEDULE_DATE_FROM: string; + public P_SCHEDULE_DATE_TO: string; public P_EXCESS_FLAG: string; public P_TIMEBACK_FLAG: string; public P_COMP_OFF_FLAG: string; diff --git a/Mohem/src/app/time-card/service/models/get-swipes-request.ts b/Mohem/src/app/time-card/service/models/get-swipes-request.ts index 006f16e3..b0afbf15 100644 --- a/Mohem/src/app/time-card/service/models/get-swipes-request.ts +++ b/Mohem/src/app/time-card/service/models/get-swipes-request.ts @@ -3,7 +3,7 @@ import { DateTimeInput } from "src/app/uI-elements/date-time.input"; export class GetSwipesRequest extends Request { public P_SELECTED_EMPLOYEE_NUMBER: string; - public P_SCHEDULE_DATE: DateTimeInput; + public P_SCHEDULE_DATE: string; public P_PAGE_NUM: number; public P_PAGE_LIMIT: number; } diff --git a/Mohem/src/app/time-card/service/models/get-time-card-summary.request.ts b/Mohem/src/app/time-card/service/models/get-time-card-summary.request.ts index 7e5036f0..4f845c1e 100644 --- a/Mohem/src/app/time-card/service/models/get-time-card-summary.request.ts +++ b/Mohem/src/app/time-card/service/models/get-time-card-summary.request.ts @@ -5,8 +5,8 @@ export class GetTimeCardSummaryRequest extends Request { public P_SELECTED_EMPLOYEE_NUMBER: string; public P_MENU_TYPE: string; public P_SELECTED_RESP_ID: number; - public P_SCHEDULE_DATE_FROM: DateTimeInput; - public P_SCHEDULE_DATE_TO: DateTimeInput; + public P_SCHEDULE_DATE_FROM: string; + public P_SCHEDULE_DATE_TO: string; public P_EXCESS_FLAG: string; public P_TIMEBACK_FLAG: string; public P_COMP_OFF_FLAG: string; 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/shift-details/shift-details.component.html b/Mohem/src/app/time-card/shift-details/shift-details.component.html new file mode 100644 index 00000000..2e8a1ee3 --- /dev/null +++ b/Mohem/src/app/time-card/shift-details/shift-details.component.html @@ -0,0 +1,191 @@ + + + + + + Shift Details + + + + +
+ + +

Shift details

+

{{ shiftData.SCHEDULE_DATE | date }}

+ + + + Shift type + + + {{shiftData.SHT_TYPE_DESC}} + + + + + Shift + + + {{shiftData.SHT_NAME}} + + + + + Break + + + {{shiftData.BREAK_NAME}} + + + + + Work On Break + + + {{shiftData.ACTUAL_WOB_HRS}} + + + +

Actual Swipe(s)

+
+ + + Start + + + {{shiftData.SHT_ACTUAL_START_TIME}} + + + + + End + + + {{shiftData.SHT_ACTUAL_END_TIME}} + + + +

Approved Swipe(s)

+
+ + + Start + + + {{shiftData.APPROVED_START_TIME}} + + + + + Start Reason + + + {{shiftData.APPROVED_START_REASON_DESC}} + + + + + End + + + {{shiftData.APPROVED_END_TIME}} + + + + + End Reason + + + {{shiftData.APPROVED_END_REASON_DESC}} + + + + + Actual Hours + + + {{shiftData.SHT_ACTUAL_HRS}} + + +
+
+
+
+ +
+ + +

Employee Swipe(s)

+

{{ swipeData.SCHEDULE_DATE | date }}

+ + + + + Swipe Date + + + {{swipeData.SWIPE_DATE}} + + + + + Swipe Time + + + {{swipeData.SWIPE_TIME}} + + + + + Swipe Status + + + {{swipeData.SWIPE_STATUS}} + + + + + Machine Location + + + {{swipeData.MACHINE_LOCATION}} + + + + + Unit Number + + + {{swipeData.UNIT_NUMBER}} + + + + + Unit Name + + + {{swipeData.UNIT_NAME}} + + + + + Exclude + + + {{swipeData.EXCLUDE_FLAG}} + + + + + Error Message + + + {{swipeData.RETURN_MESSAGE}} + + + +
+
+
+
\ No newline at end of file diff --git a/Mohem/src/app/time-card/shift-details/shift-details.component.scss b/Mohem/src/app/time-card/shift-details/shift-details.component.scss new file mode 100644 index 00000000..976ada04 --- /dev/null +++ b/Mohem/src/app/time-card/shift-details/shift-details.component.scss @@ -0,0 +1,30 @@ +ion-header{ + overflow: hidden; + background: #f2f2f3; +} +ion-content{ + --ion-background-color: #f2f2f3; +} + +ion-card-content { + padding: 0px; +} + +ion-card { + box-shadow: none !important; + background-color: white; + margin: 10px; +} + +ion-title{ + text-align: center; + font-family: WorkSans-Bold; + font-size: 18px; + margin-right: 45px; +} + +.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; +} diff --git a/Mohem/src/app/time-card/shift-details/shift-details.component.spec.ts b/Mohem/src/app/time-card/shift-details/shift-details.component.spec.ts new file mode 100644 index 00000000..808e6498 --- /dev/null +++ b/Mohem/src/app/time-card/shift-details/shift-details.component.spec.ts @@ -0,0 +1,27 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ShiftDetailsComponent } from './shift-details.component'; + +describe('ShiftDetailsComponent', () => { + let component: ShiftDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ShiftDetailsComponent ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ShiftDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Mohem/src/app/time-card/shift-details/shift-details.component.ts b/Mohem/src/app/time-card/shift-details/shift-details.component.ts new file mode 100644 index 00000000..1362b9ff --- /dev/null +++ b/Mohem/src/app/time-card/shift-details/shift-details.component.ts @@ -0,0 +1,62 @@ +import { Component, OnInit } from '@angular/core'; +import { TimeCardService } from 'src/app/time-card/service/time-card.service'; +import { CommonService } from 'src/app/hmg-common/services/common/common.service'; +import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service'; +import { GetShiftDetailRequest } from 'src/app/time-card/service/models/get-shift-detail.request'; +import { GetSwipesRequest } from 'src/app/time-card/service/models/get-swipes-request'; +import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response'; +import * as moment from 'moment'; + +@Component({ + selector: 'app-shift-details', + templateUrl: './shift-details.component.html', + styleUrls: ['./shift-details.component.scss'], +}) +export class ShiftDetailsComponent implements OnInit { + public selectedShift: any; + public shiftDetailsData: any = []; + public swipeDetailsData: any = []; + constructor( + public timeCardService: TimeCardService, + public common: CommonService, + public sharedData: SharedDataService) { } + + ngOnInit() { + this.selectedShift = this.sharedData.getSharedData('selectedShift', false); + console.log(this.selectedShift); + if (this.selectedShift.origin === 'shiftDetails') { + this.getScheduleShiftDetails(); + } else if (this.selectedShift.origin === 'shiftSwipes') { + this.getSwipesDetails(); + } + } + + getScheduleShiftDetails() { + const GetShiftDetailRequestObject = new GetShiftDetailRequest(); + GetShiftDetailRequestObject.P_RTP_ID = this.selectedShift.RTP_ID; + GetShiftDetailRequestObject.P_PAGE_NUM = 1; + GetShiftDetailRequestObject.P_PAGE_LIMIT = 10; + console.log(GetShiftDetailRequestObject); + this.timeCardService.getShiftDetail(GetShiftDetailRequestObject).subscribe((result) => { + if (this.common.validResponse(result)) { + console.log(result); + this.shiftDetailsData = result.GetScheduleShiftsDetailsList; + } + }); + } + + getSwipesDetails() { + const GetSwipesRequestObject = new GetSwipesRequest(); + GetSwipesRequestObject.P_SELECTED_EMPLOYEE_NUMBER = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false); + GetSwipesRequestObject.P_SCHEDULE_DATE = this.common.convertISODateToJsonDate(this.selectedShift.SCHEDULE_DATE); + GetSwipesRequestObject.P_PAGE_NUM = 1; + GetSwipesRequestObject.P_PAGE_LIMIT = 10; + this.timeCardService.getSwipes(GetSwipesRequestObject).subscribe((result) => { + if (this.common.validResponse(result)) { + console.log(result); + this.swipeDetailsData = result.GetSwipesList; + } + }); + } + +} 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..0e0123e6 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,387 @@ -

- time-card-details works! -

+ + + + + + My Time Card + + + + +
+ + + Time Card Details + + + Time Card Summary + + + +
+ + +

Days

+ + + + Period Days + + + {{timeCardSummaryData.PERIOD_DAYS}} + + + + + Schedule Days + + + {{timeCardSummaryData.SCHEDULE_DAYS}} + + + + + Off days + + + {{timeCardSummaryData.OFF_DAYS}} + + + + + Attended Days + + + {{timeCardSummaryData.ATTENDED_DAYS}} + + + + + Absent Days + + + {{timeCardSummaryData.ABSENT_DAYS}} + + + + + Non Schedule Days + + + {{timeCardSummaryData.NON_SCHEDULE_DAYS}} + + + + + Not Analyzed Days + + + {{timeCardSummaryData.NOT_ANALYZED_DAYS}} + + + +
+
+ + + + + + + Hours + + + Actual + + + Schedule + + + + + Regular + + + {{timeCardSummaryData.ACTUAL_HRS}} + + + {{timeCardSummaryData.SCHEDULED_HRS}} + + + + + Planned OT + + + {{timeCardSummaryData.PLANNED_OTHRS}} + + + {{timeCardSummaryData.SCHEDULED_PLANNED_OT_HRS}} + + + + + On Call + + + {{timeCardSummaryData.ON_CALL_HRS}} + + + {{timeCardSummaryData.SCHEDULED_ON_CALL_HRS}} + + + + + Excess + + + {{timeCardSummaryData.EXCESS_HRS}} + + + + + + + Time Back + + + {{timeCardSummaryData.TIMEBACK_HRS}} + + + + + + + Approved Time Back + + + {{timeCardSummaryData.TIMEBACK_HRS}} + + + + + + + Time Back Balance + + + {{timeCardSummaryData.TIME_BACK_BALANCE}} + + + + + + + Late In + + + {{timeCardSummaryData.LATE_IN_HRS}} + + + + + + + Early Out + + + {{timeCardSummaryData.EARLY_OUT_HRS}} + + + + + + + + + + +

Leaves & Holidays

+ + + + Half-Day Leave + + + {{timeCardSummaryData.HALF_DAY_LEAVE}} + + + + + Unauthorized Leave + + + {{timeCardSummaryData.UNAUTHORIZED_LEAVE}} + + + + + Business Trip + + + {{timeCardSummaryData.BUSINESS_TRIP}} + + + + + Sick Leave + + + {{timeCardSummaryData.SICK_LEAVE}} + + + + + Paid Leave + + + {{timeCardSummaryData.PAID_LEAVE}} + + + + + Unpaid Leave + + + {{timeCardSummaryData.UNPAID_LEAVE}} + + + + + Puclic Holiday + + + {{timeCardSummaryData.PUBLIC_HOLIDAY}} + + + +
+
+
+ +
+ + + + + +

{{ dayHours.SCHEDULE_DATE | date }}

+

Time card details

+
+
+ + + + + + Time Back: + + + {{dayHours.TIMEBACK_HRS}} + + + + + + + + + Remarks: + + + {{dayHours.REMARKS}} + + + + + + + + + Shift Hours: + + + {{dayHours.SCHEDULED_HRS}} + + + + + + + + + Excess Time: + + + {{dayHours.EXCESS_HRS}} + + + + + + + + + Planned OT: + + + {{dayHours.PLANNED_OT_HRS}} + + + + + + + + + Late In: + + + {{dayHours.LATE_IN_HRS}} + + + + + + + + + Early Out: + + + {{dayHours.EARLY_OUT_HRS}} + + +
+
+ +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + + \ 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..54a81fd9 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,154 @@ +ion-header{ + overflow: hidden; + background: #f2f2f3; +} +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-title{ + text-align: center; + font-family: WorkSans-Bold; + font-size: 18px; + margin-right: 35px; +} + +.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: 20px; + 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; + } + .dayhours-button-container{ + width: 100%; + padding-right: 5px; + padding-left: 5px; + } + + .dayhours-button{ + width: 50%; + height: 35px; + font-size: 15px; + color: white; + background: #606161; + } + + ///////////////////////////////////// +.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; + margin: -42px auto 0; + display: block; +} + +//////////////////////////// +.right-slider-icon{ + float: right; + height: 100%; + width: 15%; + position: fixed; + right: -5%; + top: 31%; +} + +.left-slider-icon{ + width: 15%; + position: fixed; + top: 32%; + left: -4%; + height: 100%; +} + + 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..adbc8112 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,13 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild, Input } from '@angular/core'; +import { TimeCardService } from 'src/app/time-card/service/time-card.service'; +import { CommonService } from 'src/app/hmg-common/services/common/common.service'; +import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service'; +import { ModalController, IonSlides } from '@ionic/angular'; +import { SelectPeriodComponent } from '../select-period/select-period.component'; +import { GetDayAndHoursDetailsRequest } from 'src/app/time-card/service/models/get-day-hours-type-details.request'; +import { GetTimeCardSummaryRequest } from 'src/app/time-card/service/models/get-time-card-summary.request'; +import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response'; +import * as moment from 'moment'; @Component({ selector: 'app-time-card-details', @@ -6,9 +15,207 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./time-card-details.component.scss'], }) export class TimeCardDetailsComponent implements OnInit { + @ViewChild('sliderRef') protected sliderRef: IonSlides; + public activeSegment: any = 'time-card-summary'; + public showMore: any = true; + public menuType: any; + public selEmp: string; + public dateFrom: any = new Date(); + public dateTo: any = new Date(); + public selMenu: MenuResponse = new MenuResponse(); + public respID: number; + public timeCardSummaryData: any = []; + public dayHoursData: any = []; + public selectedShift: any; + public rightIconActive = false; + public leftIconActive = false; + public loadMore = false; + public dayAndHoursPageNumber = 1; + public selectedFilters: any = {}; + public selectedShiftFilter: any; + public loadMoreDateHoursData = false; + constructor( + public timeCardService: TimeCardService, + public common: CommonService, + public modalController: ModalController, + public sharedData: SharedDataService + ) { } - constructor() { } + ngOnInit() { + this.getTimeCardSummaryDetails(); + } - ngOnInit() {} + public segmentChanged(event: any) { + this.activeSegment = event.detail.value; + if (this.activeSegment === 'time-card-details' && this.dayHoursData.length === 0) { + this.getDayHoursTypeDetails(); + } else { + this.rightIconActive = true; + this.leftIconActive = false; + } + } + public toggleButton() { + this.showMore = !this.showMore; + } + + public getDayHoursTypeDetails() { + const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest(); + this.dateFrom = moment(this.dateFrom).format('YYYY-MM-DDTHH:mm:ssZ'); + this.dateTo = moment(this.dateTo).format('YYYY-MM-DDTHH:mm:ssZ'); + this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false); + this.respID = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false); + this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false); + this.menuType = this.selMenu.List_Menu.MENU_TYPE; + + dayAndHoursReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp; + dayAndHoursReqObj.P_MENU_TYPE = this.menuType; + dayAndHoursReqObj.P_SELECTED_RESP_ID = this.respID; + dayAndHoursReqObj.P_SCHEDULE_DATE_FROM = this.common.convertISODateToJsonDate(this.dateFrom); + dayAndHoursReqObj.P_SCHEDULE_DATE_TO = this.common.convertISODateToJsonDate(this.dateTo); + dayAndHoursReqObj.P_PAGE_NUM = this.dayAndHoursPageNumber; + dayAndHoursReqObj.P_PAGE_LIMIT = 10; + + if (Object.keys(this.selectedFilters).length !== 0) { + dayAndHoursReqObj.P_SHT_TYPE = this.selectedShiftFilter; + dayAndHoursReqObj.P_EXCESS_FLAG = this.selectedFilters['P_EXCESS_FLAG'.toString()].value; + dayAndHoursReqObj.P_TIMEBACK_FLAG = this.selectedFilters['P_TIMEBACK_FLAG'.toString()].value; + dayAndHoursReqObj.P_COMP_OFF_FLAG = this.selectedFilters['P_COMP_OFF_FLAG'.toString()].value; + dayAndHoursReqObj.P_NON_SCHEDULED_FLAG = this.selectedFilters['P_NON_SCHEDULED_FLAG'.toString()].value; + dayAndHoursReqObj.P_LATE_IN_FLAG = this.selectedFilters['P_LATE_IN_FLAG'.toString()].value; + dayAndHoursReqObj.P_EARLY_OUT_FLAG = this.selectedFilters['P_EARLY_OUT_FLAG'.toString()].value; + dayAndHoursReqObj.P_SHORTAGE_FLAG = this.selectedFilters['P_SHORTAGE_FLAG'.toString()].value; + dayAndHoursReqObj.P_MISSING_SWIPE_FLAG = this.selectedFilters['P_MISSING_SWIPE_FLAG'.toString()].value; + dayAndHoursReqObj.P_ACTUAL_WOB_SEC = this.selectedFilters['P_ACTUAL_WOB_SEC'.toString()].value; + dayAndHoursReqObj.P_ANALAYZED_FLAG = this.selectedFilters['P_ANALAYZED_FLAG'.toString()].value; + dayAndHoursReqObj.P_APPR_TIMEBACK_FLAG = this.selectedFilters['P_APPR_TIMEBACK_FLAG'.toString()].value; + } + + this.timeCardService.getDayHoursTypeDetails(dayAndHoursReqObj).subscribe((result) => { + if (this.common.validResponse(result)) { + this.loadMoreDateHoursData = false; + const daysDataLength = result.GetDayHoursTypeDetailsList.length; + this.loadMore = daysDataLength === 10 ? true : false; + if (this.dayAndHoursPageNumber > 1 && daysDataLength !== 0) { + this.rightIconActive = true; + this.dayHoursData = this.dayHoursData.concat(result.GetDayHoursTypeDetailsList); + setTimeout(() => { + this.nextSlide(); + }, 1000); + } else if (this.dayAndHoursPageNumber === 1 && daysDataLength <= 10 && daysDataLength !== 0) { + this.rightIconActive = true; + this.dayHoursData = result.GetDayHoursTypeDetailsList; + } + } + }); + + } + + public getTimeCardSummaryDetails() { + const timeCardSummaryReqObj = new GetTimeCardSummaryRequest(); + this.dateFrom = moment(this.dateFrom).format('YYYY-MM-DDTHH:mm:ssZ'); + this.dateTo = moment(this.dateTo).format('YYYY-MM-DDTHH:mm:ssZ'); + this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false); + this.respID = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false); + this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false); + this.menuType = this.selMenu.List_Menu.MENU_TYPE; + + timeCardSummaryReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp; + timeCardSummaryReqObj.P_MENU_TYPE = this.menuType; + timeCardSummaryReqObj.P_SELECTED_RESP_ID = this.respID; + timeCardSummaryReqObj.P_SCHEDULE_DATE_FROM = this.common.convertISODateToJsonDate(this.dateFrom); + timeCardSummaryReqObj.P_SCHEDULE_DATE_TO = this.common.convertISODateToJsonDate(this.dateTo); + + if (Object.keys(this.selectedFilters).length !== 0) { + timeCardSummaryReqObj.P_SHT_TYPE = this.selectedShiftFilter; + timeCardSummaryReqObj.P_EXCESS_FLAG = this.selectedFilters['P_EXCESS_FLAG'.toString()].value; + timeCardSummaryReqObj.P_TIMEBACK_FLAG = this.selectedFilters['P_TIMEBACK_FLAG'.toString()].value; + timeCardSummaryReqObj.P_COMP_OFF_FLAG = this.selectedFilters['P_COMP_OFF_FLAG'.toString()].value; + timeCardSummaryReqObj.P_NON_SCHEDULED_FLAG = this.selectedFilters['P_NON_SCHEDULED_FLAG'.toString()].value; + timeCardSummaryReqObj.P_LATE_IN_FLAG = this.selectedFilters['P_LATE_IN_FLAG'.toString()].value; + timeCardSummaryReqObj.P_EARLY_OUT_FLAG = this.selectedFilters['P_EARLY_OUT_FLAG'.toString()].value; + timeCardSummaryReqObj.P_SHORTAGE_FLAG = this.selectedFilters['P_SHORTAGE_FLAG'.toString()].value; + timeCardSummaryReqObj.P_MISSING_SWIPE_FLAG = this.selectedFilters['P_MISSING_SWIPE_FLAG'.toString()].value; + timeCardSummaryReqObj.P_ACTUAL_WOB_SEC = this.selectedFilters['P_ACTUAL_WOB_SEC'.toString()].value; + timeCardSummaryReqObj.P_ANALAYZED_FLAG = this.selectedFilters['P_ANALAYZED_FLAG'.toString()].value; + timeCardSummaryReqObj.P_APPR_TIMEBACK_FLAG = this.selectedFilters['P_APPR_TIMEBACK_FLAG'.toString()].value; + } + this.timeCardService.getTimeCardSummary(timeCardSummaryReqObj).subscribe((result) => { + if (this.common.validResponse(result)) { + this.timeCardSummaryData = result.GetTimeCardSummaryList[0]; + } + }); + } + + async openSelectPeriodModal() { + const modal = await this.modalController.create({ + component: SelectPeriodComponent, + cssClass: 'select-period-custom-modal', + componentProps: { + dateFrom : this.dateFrom, + dateTo : this.dateTo + } + }); + modal.onDidDismiss().then(result => { + console.log(result.data); + this.loadMore = false; + this.rightIconActive = false; + this.leftIconActive = false; + this.dayHoursData = []; + this.timeCardSummaryData = []; + this.dayAndHoursPageNumber = 1; + this.loadMoreDateHoursData = false; + this.dateFrom = result.data.dateFrom; + this.dateTo = result.data.dateTo; + this.selectedFilters = result.data.keySelectedFilters; + this.selectedShiftFilter = result.data.selectedShiftType; + if (this.dateFrom && this.dateTo) { + this.getDayHoursTypeDetails(); + this.getTimeCardSummaryDetails(); + } + }); + return await modal.present(); + } + + slideChanged(ev: any) { + const prom1 = this.sliderRef.isBeginning(); + const prom2 = this.sliderRef.isEnd(); + + Promise.all([prom1, prom2]).then((data) => { + data[0] ? this.leftIconActive = false : this.leftIconActive = true; + if (data[1]) { + if (!this.loadMore) { + this.rightIconActive = false; + } + } else { + this.rightIconActive = true; + } + }); + } + + showShiftDetails(origin: string) { + this.sliderRef.getActiveIndex().then((index: number) => { + this.selectedShift = this.dayHoursData[index]; + this.selectedShift.origin = origin; + this.sharedData.setSharedData(this.selectedShift, 'selectedShift'); + this.common.navigatePage('/time-card/shift-details'); + }); + } + + nextSlide() { + if (this.loadMoreDateHoursData && this.loadMore) { + this.dayAndHoursPageNumber++; + this.getDayHoursTypeDetails(); + } + this.sliderRef.slideNext(); + this.sliderRef.getActiveIndex().then((index: number) => { + if (index === (this.dayHoursData.length - 1)) { + this.loadMoreDateHoursData = true; + } + }); + } + + previousSlide() { + this.sliderRef.slidePrev(); + } } diff --git a/Mohem/src/app/time-card/time-card.module.ts b/Mohem/src/app/time-card/time-card.module.ts index e79e452f..cc4ca8bf 100644 --- a/Mohem/src/app/time-card/time-card.module.ts +++ b/Mohem/src/app/time-card/time-card.module.ts @@ -8,6 +8,8 @@ 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'; +import { ShiftDetailsComponent } from './shift-details/shift-details.component'; const routes: Routes = [ { @@ -21,6 +23,10 @@ const routes: Routes = [ { path: 'time-card-details', component: TimeCardDetailsComponent + }, + { + path: 'shift-details', + component: ShiftDetailsComponent } ] } @@ -36,7 +42,12 @@ const routes: Routes = [ declarations: [ TimeCardPage, HomeComponent, - TimeCardDetailsComponent - ] + TimeCardDetailsComponent, + SelectPeriodComponent, + ShiftDetailsComponent + ], + 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