\r\n :
\r\n - createListItem(x)) : notification?.notifications.map((x) => createListItem(x))}\r\n />\r\n {\r\n full ? \r\n
\r\n onErrorDialogCancel()}\r\n onConfirm={() => onErrorDialogOk()}\r\n />\r\n \r\n \r\n \r\n {(() => {\r\n switch (clockingType) {\r\n case ClockingType.ClockIn: return \r\n {t(clockingType)}\r\n \r\n {attendanceImageRequired === true && faceRecognitionRequired === true ? (\r\n <>\r\n {faceDetected === \"unknown\" ? image : detected}\r\n \r\n \r\n \r\n ) : null}\r\n \r\n }\r\n cancelButton={loading ? \r\n (\r\n setInput({ ...input, comments: textArea ?? \"\" })\r\n )} />\r\n \r\n )} />\r\n \r\n {\r\n setInput({ ...input, latitude: loc.coords.latitude, longitude: loc.coords.longitude })\r\n }}\r\n onError={(err) => {\r\n if (!input.latitude && !input.longitude)\r\n setErrorDialogOpen(true)\r\n setErrorDialogCancelAllowed(true)\r\n setErrorDialogCancelButtonContent(t(\"Proceed anyway\"))\r\n setErrorDialogContent(t(\"Location could not be detected, kindly check the location permission from the settings.\"))\r\n console.log(\"loc error: \", err)\r\n }}\r\n />\r\n \r\n );\r\n\r\n};\r\n","import React from \"react\";\r\nimport { inject, observer } from \"mobx-react\";\r\nimport moment from \"moment\";\r\nimport { Button, Dialog, Flex, TextArea, Text, Alert, Loader, Breadcrumb } from \"@fluentui/react-northstar\";\r\nimport Clock from \"react-live-clock\";\r\nimport { withRouter } from \"react-router-dom\";\r\nimport WebCam from \"react-webcam\";\r\nimport { Panel, PanelType, Separator, TextField } from \"@fluentui/react\";\r\nimport { ClockingType, ClientType, ClockingInput, ClockingView, WorkplaceConfig, AttendanceImageConfig, UserAttendanceImageConfig, BreakConfig, UserFaceRecognitionConfig, FaceRecognitionConfig } from \"../../models\";\r\nimport Timer from \"../../components/timer\";\r\nimport GpsInput from \"../../components/gps-input\";\r\nimport { UserStore } from \"../../store/user\";\r\nimport * as AttendanceApi from \"../../api/attendance\";\r\nimport MediaQuery from \"../../components/media-query\";\r\nimport \"./index.scss\";\r\nimport TimesheetTable from \"../../components/timesheet-table\";\r\nimport { getFormattedDuration, isLocInsideWorkplaces } from \"../../utils\";\r\nimport { ChevronEndIcon, CloseIcon, PlayIcon, PauseIcon } from '@fluentui/react-icons-northstar';\r\nimport { getWorkplaces, getCompanyRules } from \"../../api/Company\";\r\nimport { withTranslation } from \"react-i18next\";\r\nimport { UiStore } from \"../../store/ui\";\r\nimport Icons from \"../../assests/images/SVGIcons/svgIcons\";\r\nimport { HubConnectionBuilder, HubConnectionState } from \"@microsoft/signalr\";\r\nimport { loadLabeledFaceDescriptors, loadModels } from \"../../utils/faceSystem.js\";\r\nimport ClockDialog from \"../../components/ClockDialog\";\r\nimport { FaceMatcher, LabeledFaceDescriptors } from \"face-api.js\";\r\nimport { addLabeledFaceDescriptors } from \"../../api/account\";\r\n\r\n\r\nfunction dataURLtoFile(dataurl: string, filename: string) {\r\n const arr = dataurl.split(\",\");\r\n const mime = (arr[0].match(/:(.*?);/) ?? [])[1];\r\n const bstr = atob(arr[1]);\r\n let n = bstr.length;\r\n const u8arr = new Uint8Array(n);\r\n\r\n while (n--) {\r\n u8arr[n] = bstr.charCodeAt(n);\r\n }\r\n\r\n return new File([u8arr], filename, { type: mime });\r\n}\r\n\r\n\r\ntype Props = Readonly<{\r\n t: any;\r\n ui: UiStore;\r\n user: UserStore;\r\n match: { params: { action?: string, shiftId?: number } }\r\n}>;\r\n\r\ntype State = {\r\n dialogVisible: boolean;\r\n input: ClockingInput;\r\n clockingType: ClockingType;\r\n loading: boolean;\r\n clockingStatus?: ClockingView[];\r\n error?: string;\r\n panelOpen: boolean;\r\n errorDialogOpen: boolean;\r\n errorDialogContent: string;\r\n errorDialogCancelAllowed: boolean;\r\n errorDialogConfirmButtonContent: string;\r\n errorDialogCancelButtonContent: string;\r\n overtimeVerificationAlertVisible: boolean;\r\n inBreakVerificationAlertVisible: boolean;\r\n BreakConfig: BreakConfig;\r\n labeledFaceDescriptors: any[];\r\n faceMatch: string;\r\n stopFaceRecog: boolean;\r\n stopCam: boolean;\r\n webcam: any;\r\n loadedLabeledFaceDescriptors: boolean;\r\n faceRecognitionRequired: boolean;\r\n warningVisible: boolean;\r\n alertContent: string\r\n};\r\n\r\n@inject(\"user\")\r\n@observer\r\nclass Attendance extends React.Component {\r\n interval: NodeJS.Timeout | null;\r\n webcamRef = React.createRef() as React.RefObject & string;\r\n gpsRef = React.createRef();\r\n constructor(props: Props) {\r\n super(props);\r\n const { t } = props\r\n this.interval = null;\r\n this.state = {\r\n dialogVisible: false,\r\n clockingType: ClockingType.ClockIn,\r\n input: {\r\n userId: props.user.userId,\r\n comments: \"\",\r\n clientType: ClientType.Web,\r\n time: new Date(),\r\n fullAddress: \"\",\r\n hoursOffset: 0,\r\n image: null,\r\n },\r\n loading: false,\r\n panelOpen: false,\r\n errorDialogOpen: false,\r\n errorDialogContent: '',\r\n errorDialogCancelAllowed: false,\r\n errorDialogConfirmButtonContent: t('OK'),\r\n errorDialogCancelButtonContent: t('Cancel'),\r\n overtimeVerificationAlertVisible: false,\r\n inBreakVerificationAlertVisible: false,\r\n BreakConfig: BreakConfig.NotRequired,\r\n labeledFaceDescriptors: [],\r\n loadedLabeledFaceDescriptors: false,\r\n faceRecognitionRequired: false,\r\n faceMatch: \"unknown\",\r\n stopFaceRecog: false,\r\n stopCam: false,\r\n warningVisible: false,\r\n alertContent: \"\",\r\n webcam: <> { this.fetch() }}\r\n webcamRef={this.webcamRef}\r\n webcam={this.state.webcam}\r\n gpsRef={this.gpsRef}\r\n dialogVisible={this.state.dialogVisible}\r\n closeDialog={() => { this.closeDialog() }}\r\n clockingType={this.state.clockingType}\r\n faceMatcher={this.state.faceRecognitionRequired ? this.state.loadedLabeledFaceDescriptors ?\r\n new FaceMatcher(this.props.user.labeledFaceDescriptors, 0.6) : [] : []}\r\n primaryColor={this.props.user.companyPrimaryColor ?? \"#005bab\"}\r\n faceRecognitionRequired={this.state.faceRecognitionRequired}\r\n //stopFaceRecognition = {this.state.stopFaceRecog}\r\n >\r\n\r\n {/* // : null } */}\r\n\r\n\r\n (\r\n \r\n \r\n \r\n \r\n {this.state.BreakConfig == BreakConfig.Required ?\r\n \r\n \r\n : null}\r\n {this.state.warningVisible ? \r\n {!lg && <>\r\n this.setState({ panelOpen: false })}\r\n customWidth=\"800px\"\r\n type={PanelType.custom}\r\n >\r\n { }}\r\n timesheet={false}\r\n user={user}\r\n userId={user.userId}\r\n clockings={this.state.clockingStatus}\r\n loading={this.state.loading}\r\n detailsListStyles={{\r\n root: {\r\n height: \"calc(100vh - 107px)\",\r\n overflowY: \"auto\",\r\n overflowX: \"hidden\"\r\n },\r\n }}\r\n onClockTimeChange={() => { }}\r\n showImages={!this.props.user.company?.hideClockingImagesFromTimesheet ?? false}\r\n getShiftHistory={() => { }}\r\n shiftHistory={[]}\r\n timeSheetView={false}\r\n />\r\n \r\n this.setState({ panelOpen: true })}\r\n vAlign=\"center\" hAlign=\"center\">\r\n } />\r\n \r\n }\r\n {lg && <>\r\n { }}\r\n timesheet={false}\r\n userId={user.userId}\r\n user={user}\r\n clockings={this.state.clockingStatus}\r\n loading={this.state.loading}\r\n detailsListStyles={{\r\n root: {\r\n flex: 1,\r\n height: \"calc(100vh - 107px)\",\r\n overflowY: \"auto\",\r\n overflowX: \"hidden\"\r\n },\r\n }}\r\n onClockTimeChange={() => { }}\r\n showImages={!this.props.user.company?.hideClockingImagesFromTimesheet ?? false}\r\n getShiftHistory={() => { }}\r\n shiftHistory={[]}\r\n timeSheetView={false}\r\n />\r\n }\r\n \r\n )} />\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withRouter(withTranslation()(Attendance as any) as any);\r\n","import rootStore from \"./rootStore\";\r\n// import userStore from \"./user\";\r\n// import tokenStore from \"./token\";\r\n// import notificationStore from \"./notification\";\r\n// import uiStore from \"./ui\";\r\n// import companyAddEditStore from \"./companyAddEdit\";\r\n\r\nconst stores = {\r\n rootStore: rootStore,\r\n // user: userStore,\r\n // because userStore uses the request object, same, the request uses the store to get the token\r\n // so now they both use a third tokenStore to eliminate circular dependencies\r\n // using cookies would work\r\n // however we don't want to make the website not functional if the browser had cookies disabled\r\n // token: tokenStore,\r\n // notification: notificationStore,\r\n // ui: uiStore,\r\n // companyAddEdit: companyAddEditStore\r\n};\r\n\r\nexport default stores","export const dayStatusColor = {\r\n sickLeave: \"#F44336\", // red\r\n abscent: \"#F44336\", // red\r\n normal: \"#4CAF50\", // green\r\n holiday: \"#9C27B0\", // purple\r\n leave: \"#2196F3\", // blue\r\n weekend: \"#777777\", // grey\r\n clockIn:\"#4CAF50\", // green\r\n clockOut:\"#F44336\", // red\r\n breakIn:\"#f6ad56\", // yellow\r\n breakOut:\"#e97c0b\", // orange\r\n workingHoursNotFulfilled:\" #E9EC6B\",\r\n sickLeaveWithOpacity: \"#F4433655\",\r\n abscentWithOpacity: \"#F4433655\",\r\n normalWithOpacity: \"#4CAF5055\",\r\n holidayWithOpacity: \"#9C27B055\",\r\n leaveWithOpacity: \"#2196F355\",\r\n weekendWithOpacity: \"#77777755\",\r\n workingHoursNotFulfilledWithOpacity:\" #E9EC6B\",\r\n expectedWorkingHours: \"#BED1DF\"\r\n}","import React from 'react';\r\nimport {\r\n Flex,\r\n Button,\r\n ChevronStartIcon,\r\n ChevronEndIcon\r\n } from \"@fluentui/react-northstar\";\r\n\r\nimport './styles/yearMonthPicker.scss'\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nexport type YearMonthFormProps = {\r\n date: Date; \r\n onChange: Function; \r\n fromMonth: Date;\r\n toMonth: Date;\r\n isRtl: boolean;\r\n };\r\n\r\nexport default function YearMonthForm({ date, onChange, fromMonth, toMonth, isRtl } : YearMonthFormProps) {\r\n const { t } = useTranslation()\r\n \r\n const months = [\r\n t(\"January\"),\r\n t(\"February\"),\r\n t(\"March\"),\r\n t(\"April\"),\r\n t(\"May\"),\r\n t(\"June\"),\r\n t(\"July\"),\r\n t(\"August\"),\r\n t(\"September\"),\r\n t(\"October\"),\r\n t(\"November\"),\r\n t(\"December\")\r\n ]\r\n \r\n const years : number[] = [];\r\n for (let i = fromMonth.getFullYear(); i <= toMonth.getFullYear(); i += 1) {\r\n years.push(i);\r\n }\r\n \r\n const handleChange = function handleChange(e: any) {\r\n const { year, month } = e.target.form;\r\n onChange(new Date(year.value, month.value, 1));\r\n };\r\n \r\n return (\r\n \r\n : \r\n );\r\n }","import request from \"../utils/request\";\r\nimport { Result, Timesheet, TimesheetApprovalInput, TimesheetStatus, TimesheetView } from \"../models\";\r\n\r\nexport async function getTimesheetStatus(userId: string, from: string, to: string) {\r\n const response = await request.get>(`timesheet/${userId}`, {\r\n params: { from, to },\r\n });\r\n\r\n return response.data;\r\n}\r\n\r\nexport async function approveTimesheet(timesheetApprovalInput: TimesheetApprovalInput) {\r\n const response = await request\r\n .post>(`timesheet/ApproveTimesheet`, timesheetApprovalInput);\r\n return response.data;\r\n}\r\n\r\nexport async function getTimesheetStatuses() {\r\n const response = await request.get>(\"timesheet/statuses\");\r\n return response.data;\r\n}\r\n\r\nexport async function getTimesheet(id: string | number) {\r\n const response = await request.get>(`timesheet/GetTimesheetById/${id}`);\r\n return response.data;\r\n}","import React from \"react\";\r\nimport moment from \"moment\";\r\nimport { Pivot, PivotItem, IPivotStyleProps, IPivotStyles, AnimationVariables, TextField, Icon } from \"@fluentui/react\";\r\nimport {\r\n Layout,\r\n Flex,\r\n Divider,\r\n Button,\r\n FlexItem,\r\n Dialog,\r\n Dropdown,\r\n Text,\r\n ChevronStartIcon,\r\n ChevronEndIcon,\r\n Alert\r\n} from \"@fluentui/react-northstar\"\r\nimport { dayStatusColor } from \"../../assests/styles/colors\"\r\nimport { inject, observer } from \"mobx-react\"\r\nimport { withRouter } from \"react-router-dom\"\r\nimport TimesheetTable from \"../../components/timesheet-table\"\r\nimport YearMonthPicker from '../../components/yearMonthPicker'\r\nimport { UserStore } from \"../../store/user\"\r\nimport * as AttendanceApi from \"../../api/attendance\"\r\nimport * as TimesheetApi from \"../../api/timesheet\"\r\nimport * as AccountApi from \"../../api/account\"\r\nimport * as CompanyApi from \"../../api/Company\"\r\nimport * as Models from \"../../models\"\r\nimport { getFormattedDuration, getInitialDay, getYearMonthPickerFromMonth, getYearMonthPickerToMonth } from \"../../utils\"\r\nimport \"./index.scss\"\r\nimport { StringIfPlural, withTranslation } from \"react-i18next\"\r\nimport { UiStore } from \"../../store/ui\"\r\nimport { TimesheetApprovalInput } from \"../../models\"\r\nimport OvertimeApprovalForm from \"../../components/overtimeApprovalForm\"\r\n\r\ntype Props = {\r\n t: any;\r\n ui: UiStore;\r\n user: UserStore;\r\n match: {\r\n params: {\r\n id?: string,\r\n isGCC?: number,\r\n timesheetId?: string,\r\n action?: string,\r\n shiftId?: number,\r\n date?: string,\r\n time?: string\r\n }\r\n }\r\n};\r\n\r\ntype State = {\r\n timesheetTableData: Models.TimesheetTableView;\r\n clockingStatus: Models.ClockingPaginationView;\r\n clockings: Models.ClockingView[][];\r\n loading: boolean;\r\n from: Date;\r\n to: Date;\r\n selectedDay: Date;\r\n status?: Models.TimesheetStatus;\r\n timesheet?: Models.TimesheetView;\r\n approveDialogOpen: boolean;\r\n overtimeApprovalDialogOpen: boolean;\r\n timesheetStatuses: Models.TimesheetStatus[];\r\n statusId?: number;\r\n statusName?: string;\r\n timebarExpended: boolean;\r\n isrequired: boolean;\r\n selectedPivotKey: string;\r\n user?: Models.UserView;\r\n timesheetUserId?: string;\r\n firstLoad: boolean;\r\n approvalFormAlertVisible: boolean;\r\n approvalFormAlertContent: string;\r\n userId: string;\r\n BreakConfig: Models.BreakConfig;\r\n shiftHistory: Models.ShiftHistoryView[];\r\n clockType: Models.ClockingType;\r\n shiftId:number;\r\n};\r\n\r\n@inject(\"user\", \"ui\")\r\n@observer\r\nclass Timesheet extends React.Component {\r\n\r\n constructor(props: Props) {\r\n super(props);\r\n\r\n var today = new Date();\r\n\r\n this.state = {\r\n clockType:Models.ClockingType.ClockIn,\r\n shiftId:0,\r\n clockings: [],\r\n timebarExpended: false,\r\n timesheetStatuses: [],\r\n approveDialogOpen: false,\r\n overtimeApprovalDialogOpen: false,\r\n isrequired: false,\r\n clockingStatus: {\r\n from: new Date(),\r\n results: [],\r\n to: new Date(),\r\n totalWorkTime: \"\",\r\n },\r\n timesheetTableData: {} as Models.TimesheetTableView,\r\n loading: true,\r\n from: getInitialDay(today, this.isGCC),\r\n to: (() => {\r\n const date = getInitialDay(today, this.isGCC);\r\n date.setDate(date.getDate() + 6);\r\n return date;\r\n })(),\r\n // currentday: (() => {\r\n // if ( !props.user.isGCCCountry && new Date().getDay() === 0) { // sunday\r\n // return \"6\";\r\n // }\r\n // return props.user.isGCCCountry ? (new Date().getDay() + 1).toString() : (new Date().getDay() - 1).toString();\r\n // })(),\r\n selectedPivotKey: (new Date().getDay() + (this.isGCC ? 1 : 0)).toString(),\r\n firstLoad: true,\r\n approvalFormAlertVisible: false,\r\n approvalFormAlertContent: \"\",\r\n userId: \"\",\r\n selectedDay: new Date(),\r\n BreakConfig: Models.BreakConfig.NotRequired,\r\n shiftHistory:[]\r\n };\r\n }\r\n\r\n get userId() {\r\n if (this.state && this.state.timesheetUserId)\r\n return this.state.timesheetUserId\r\n return this.props.match.params.id ?? this.props.user.userId\r\n }\r\n\r\n get isGCC() {\r\n if (typeof this.props.match.params.isGCC != 'undefined') {\r\n console.log(\"isgcc from url : \", this.props.match.params.isGCC)\r\n return this.props.match.params.isGCC != 0 ? true : false\r\n }\r\n else {\r\n console.log(\"isgcc from props\")\r\n return this.props.user.isGCCCountry\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n window.dispatchEvent(new Event(\"resize\"));\r\n var today = new Date();\r\n this.getCompanyBreakConfig();\r\n // AccountApi.getUser(this.userId).then(res => {\r\n // var user = res.payload\r\n // this.setState({user});\r\n this.setState({\r\n from: getInitialDay(today, this.isGCC),\r\n to: (() => {\r\n const date = getInitialDay(today, this.isGCC);\r\n date.setDate(date.getDate() + 6); return date;\r\n })(),\r\n })\r\n this.fetch();\r\n // });\r\n var linkUrl = this.props.match.params\r\n if (linkUrl.action === \"overtimeApprovalRequest\") {\r\n AttendanceApi.checkIsSupervisorAndShiftNotArchived(this.props.match.params.id ?? \"\", this.props.match.params.shiftId ?? 0).then(res => {\r\n if (res.payload) {\r\n this.setState({ overtimeApprovalDialogOpen: true });\r\n }\r\n })\r\n }\r\n\r\n }\r\n\r\n getCompanyBreakConfig = async () => {\r\n var breakConfig = (await CompanyApi.getCompanyRules(this.props.user.company?.id as number)).payload.breakConfig;\r\n this.setState({ BreakConfig: breakConfig });\r\n }\r\n\r\n handleYearMonthChange = (date: Date) => {\r\n date.setHours(date.getHours() - (date.getTimezoneOffset() / 60))\r\n\r\n var fromDate = new Date(date)\r\n fromDate.setDate(fromDate.getDate() + 6)\r\n fromDate = getInitialDay(fromDate, this.isGCC)\r\n\r\n var toDate = new Date(fromDate)\r\n toDate.setDate(toDate.getDate() + 6)\r\n this.setState({\r\n from: fromDate,\r\n to: toDate\r\n }, () => this.fetch())\r\n }\r\n\r\n fetch = async () => {\r\n var { from, to, firstLoad } = this.state\r\n var fromDate = from.toJSON().split('T')[0];\r\n var toDate = to.toJSON().split('T')[0];\r\n\r\n this.setState({ loading: true });\r\n const timesheetId = this.props.match.params.timesheetId;\r\n let id = '';\r\n if (timesheetId && firstLoad) {\r\n var timesheet = await TimesheetApi.getTimesheet(timesheetId);\r\n id = timesheet.payload.userId;\r\n from = new Date(timesheet.payload.from)\r\n to = new Date(timesheet.payload.to)\r\n from.setHours(from.getHours() - (from.getTimezoneOffset() / 60))\r\n to.setHours(to.getHours() - (to.getTimezoneOffset() / 60))\r\n fromDate = from.toJSON().split('T')[0];\r\n toDate = to.toJSON().split('T')[0];\r\n this.setState({ from, to, timesheetUserId: id, firstLoad: false });\r\n } else {\r\n id = this.userId;\r\n }\r\n this.setState({ userId: id })\r\n\r\n // const { payload: user } = await AccountApi.getUser(id);\r\n // const { payload: daysSummaryView } = await AttendanceApi.getClockings(id, fromDate, toDate);\r\n // const { payload: clockings } = await AttendanceApi.getClockingsPerDay(id, fromDate, toDate);\r\n const { payload } = await AttendanceApi.getTimesheetTableData(id, fromDate, toDate);\r\n // this.setState({ user, clockingStatus: payload, loading: false, clockings });\r\n this.setState({ timesheetTableData: payload, loading: false, user: { fullName: payload.fullName } as Models.UserView });\r\n let status;\r\n try {\r\n const { payload: statuses } = await TimesheetApi.getTimesheetStatuses();\r\n // eslint-disable-next-line react/no-access-state-in-setstate\r\n const result = await TimesheetApi.getTimesheetStatus(id, fromDate, toDate);\r\n status = result.payload.timesheetStatus;\r\n\r\n this.setState({\r\n timesheet: result.payload,\r\n timesheetStatuses: statuses,\r\n status,\r\n statusId: status.id,\r\n statusName: status.name\r\n });\r\n } catch (err) {\r\n status = undefined;\r\n this.setState({\r\n loading: false,\r\n timesheet: undefined,\r\n // clockingStatus: {\r\n // from: new Date(),\r\n // results: [],\r\n // to: new Date(),\r\n // totalWorkTime: \"\",\r\n // }, \r\n status,\r\n timesheetStatuses: []\r\n });\r\n }\r\n };\r\n\r\n approveTimesheet = async () => {\r\n const { t } = this.props\r\n if (this.state.timesheet && this.state.statusId) {\r\n var timesheetApprovalInput: TimesheetApprovalInput = {\r\n timesheetId: this.state.timesheet.id,\r\n userId: this.state.timesheet.userId,\r\n timesheetStatusId: this.state.statusId,\r\n comment: this.state.timesheet.comment\r\n }\r\n if (this.state.statusId === 2 && this.state.timesheet.comment === \"\") {\r\n this.setState({ approvalFormAlertVisible: true, approvalFormAlertContent: t(\"Comment is required\") });\r\n return\r\n }\r\n try {\r\n await TimesheetApi.approveTimesheet(timesheetApprovalInput);\r\n } catch (error: any) {\r\n if (error && error.errors && error.errors.length > 0 && error.errors[0] && error.errors[0].description) {\r\n this.setState({ approvalFormAlertVisible: true, approvalFormAlertContent: t(error.errors[0].description) });\r\n }\r\n }\r\n await this.fetch();\r\n this.setState({ approveDialogOpen: false, approvalFormAlertVisible: false, approvalFormAlertContent: \"\" });\r\n }\r\n };\r\n\r\n onClockTimeChange = async (recordToEdit: any, editedClockTimes: any[]) => {\r\n const { t } = this.props\r\n var newTime;\r\n if (editedClockTimes.length > 0) {\r\n editedClockTimes.forEach(element => {\r\n if (element.id === recordToEdit.id && element.type === recordToEdit.type)\r\n recordToEdit.time = element.time\r\n });\r\n\r\n recordToEdit.time.setHours(recordToEdit.time.getHours() - (recordToEdit.time.getTimezoneOffset() / 60))\r\n newTime = recordToEdit.time.toJSON().split('Z')[0];\r\n var recordUpdate: Models.EditClockingInput = {\r\n latitude: recordToEdit.latitude,\r\n longitude: recordToEdit.longitude,\r\n fullAddress: recordToEdit.fullAddress,\r\n time: newTime,\r\n userId: recordToEdit.userId,\r\n comments: recordToEdit.comments,\r\n clientType: recordToEdit.clientType,\r\n image: null,\r\n type: recordToEdit.type\r\n }\r\n\r\n await AttendanceApi.editClockTime(recordToEdit.id, recordUpdate).then(res => {\r\n this.fetch();\r\n }).catch((e) => {\r\n console.log(e)\r\n if (e && e.errors && e.errors.length > 0 && e.errors[0].description)\r\n alert(t(e.errors[0].description));\r\n })\r\n }\r\n }\r\n\r\n getShiftHistory = async(recortToGetHistory: any) => {\r\n var historyView = await AttendanceApi.getShiftHistory(recortToGetHistory.id,recortToGetHistory.type);\r\n this.setState({shiftHistory : historyView.payload})\r\n }\r\n render() {\r\n\r\n const { t, user } = this.props;\r\n\r\n // const dialogs = (\r\n // <>\r\n //
*/}\r\n \r\n \r\n {!this.props.isGeolocationAvailable && (\r\n \r\n \r\n
\r\n )}\r\n\r\n {!this.props.coords &&
\r\n );\r\n }\r\n}\r\n\r\nexport default geolocated({\r\n positionOptions: {\r\n enableHighAccuracy: true,\r\n },\r\n // userDecisionTimeout: 5000,\r\n watchPosition: false,\r\n})(GPSInput);\r\n","import React, { createRef, useCallback, useEffect, useState } from \"react\";\r\nimport { Flex, Image, Button, Text, Dropdown, Loader } from \"@fluentui/react-northstar\";\r\nimport { useTranslation } from 'react-i18next';\r\nimport { AttendanceImageConfig, ClockingInput, ClockingType, FaceRecognitionConfig, Result, UserAttendanceImageConfig, UserFaceRecognitionConfig, WorkplaceConfig } from \"../../models\";\r\nimport { TextField, updateA } from \"@fluentui/react\";\r\nimport { Dialog } from \"@fluentui/react-northstar\";\r\nimport Icons from \"../../assests/images/SVGIcons/svgIcons\";\r\nimport { getWorkplaces } from \"../../api/Company\";\r\nimport { isLocInsideWorkplaces } from \"../../utils\";\r\nimport * as AttendanceApi from \"../../api/attendance\";\r\nimport GpsInput from \"../gps-input\";\r\nimport * as faceapi from 'face-api.js';\r\nimport WebCam from \"react-webcam\";\r\nimport { FaceMatcher } from \"face-api.js\";\r\nimport { dayStatusColor } from \"../../assests/styles/colors\";\r\n\r\n\r\nfunction dataURLtoFile(dataurl: string, filename: string) {\r\n const arr = dataurl.split(\",\");\r\n const mime = (arr[0].match(/:(.*?);/) ?? [])[1];\r\n const bstr = atob(arr[1]);\r\n let n = bstr.length;\r\n const u8arr = new Uint8Array(n);\r\n\r\n while (n--) {\r\n u8arr[n] = bstr.charCodeAt(n);\r\n }\r\n\r\n return new File([u8arr], filename, { type: mime });\r\n}\r\n\r\nexport default ({ user, updateParent, gpsRef, closeDialog, dialogVisible,\r\n clockingType, faceMatcher, primaryColor, faceRecognitionRequired }: any) => {\r\n\r\n const { t } = useTranslation();\r\n //const [dialogVisible, setDialogVisible] = useState(false);\r\n const [input, setInput] = useState(\"\" as unknown as ClockingInput);\r\n const [loading, setLoading] = useState(false)\r\n const [error, setError] = useState(\"\");\r\n const [errorDialogOpen, setErrorDialogOpen] = useState(false)\r\n const [errorDialogContent, setErrorDialogContent] = useState(\"\")\r\n const [errorDialogCancelAllowed, setErrorDialogCancelAllowed] = useState(false)\r\n const [errorDialogConfirmButtonContent, setErrorDialogConfirmButtonContent] = useState(\"\")\r\n const [errorDialogCancelButtonContent, setErrorDialogCancelButtonContent] = useState(\"\")\r\n const [faceDetected, setFaceDetected] = useState(\"unknown\")\r\n const [count, setCount] = useState(0);\r\n const webcamRef = React.useRef(null);\r\n\r\n var attendanceImageRequired = true\r\n if (user.attendanceImageConfig === UserAttendanceImageConfig.InheritedFromCompany) {\r\n if (user.company?.attendanceImageConfig === AttendanceImageConfig.NotRequired)\r\n attendanceImageRequired = false\r\n } else {\r\n if (user.attendanceImageConfig === UserAttendanceImageConfig.NotRequired)\r\n attendanceImageRequired = false\r\n }\r\n\r\n\r\n const eyesArray = [Your browser does not support Geolocation
\r\n )}\r\n\r\n {!this.props.isGeolocationEnabled && (\r\n Geolocation is not enabled
\r\n )}\r\n\r\n {this.props.coords && (\r\n | latitude | \r\n{this.props.coords.latitude} | \r\n
| longitude | \r\n{this.props.coords.longitude} | \r\n
Getting the location data…
}\r\n \r\n {\r\n (user.attendanceImageConfig === UserAttendanceImageConfig.InheritedFromCompany && user.company?.attendanceImageConfig === AttendanceImageConfig.NotRequired)\r\n || user.attendanceImageConfig === UserAttendanceImageConfig.NotRequired ? null :\r\n faceRecognitionRequired == false ? <>\r\n 
*/}\r\n\r\n \r\n\r\n \r\n }\r\n {/* */}\r\n
\r\n {error && \r\n
\r\n \r\n {t(\"Break(shift)-\")}\r\n {breakTxt}\r\n
\r\n \r\n {t(\"Break(today)-\")}\r\n {totalBreakTxt}\r\n
\r\n \r\n {user.allowedActions.includes(ClockingType.BreakIn) && this.state.BreakConfig == BreakConfig.Required ?\r\n }\r\n content={t(\"Break In\")} circular\r\n onClick={() => this.openDialog(ClockingType.BreakIn)} />\r\n : null}\r\n {user.allowedActions.includes(ClockingType.BreakOut) && this.state.BreakConfig == BreakConfig.Required ?\r\n }\r\n content={t(\"Break Out\")} circular\r\n onClick={() => this.openDialog(ClockingType.BreakOut)} />\r\n : null}\r\n
\r\n {user.allowedActions.includes(ClockingType.ClockIn) &&\r\n } primary\r\n content={t(\"Clock In\")} circular\r\n onClick={() => this.openDialog(ClockingType.ClockIn)} />}\r\n {user.allowedActions.includes(ClockingType.ClockOut) && (\r\n\r\n } primary\r\n content={t(\"Clock Out\")} circular\r\n onClick={() => this.openDialog(ClockingType.ClockOut)} />)}\r\n\r\n
: \r\n {user.allowedActions.includes(ClockingType.BreakIn) && this.state.BreakConfig == BreakConfig.Required ?\r\n }\r\n content={t(\"Break In\")} circular\r\n onClick={() => this.openDialog(ClockingType.BreakIn)} />\r\n : null}\r\n {user.allowedActions.includes(ClockingType.BreakOut) && this.state.BreakConfig == BreakConfig.Required ?\r\n }\r\n content={t(\"Break Out\")} circular\r\n onClick={() => this.openDialog(ClockingType.BreakOut)} />\r\n : null}\r\n
\r\n {user.allowedActions.includes(ClockingType.ClockIn) &&\r\n } primary\r\n content={t(\"Clock In\")} circular\r\n onClick={() => this.openDialog(ClockingType.ClockIn)} />}\r\n {user.allowedActions.includes(ClockingType.ClockOut) && (\r\n\r\n } primary\r\n content={t(\"Clock Out\")} circular\r\n onClick={() => this.openDialog(ClockingType.ClockOut)} />)}\r\n\r\n
\r\n\r\n }\r\n {/* \r\n {user.allowedActions.includes(ClockingType.BreakIn) && this.state.BreakConfig == BreakConfig.Required ?\r\n }\r\n content={t(\"Break In\")} circular\r\n onClick={() => this.openDialog(ClockingType.BreakIn)} />\r\n :null}\r\n {user.allowedActions.includes(ClockingType.BreakOut) && this.state.BreakConfig == BreakConfig.Required ? \r\n }\r\n content={t(\"Break Out\") } circular\r\n onClick={() => this.openDialog(ClockingType.BreakOut)} />\r\n :null}\r\n
\r\n \r\n {user.allowedActions.includes(ClockingType.ClockIn) && \r\n } primary\r\n content={t(\"Clock In\")} circular\r\n onClick={() => this.openDialog(ClockingType.ClockIn)} /> \r\n }\r\n {user.allowedActions.includes(ClockingType.ClockOut) && (\r\n\r\n } primary\r\n content={t(\"Clock Out\")} circular\r\n onClick={() => this.openDialog(ClockingType.ClockOut)} /> \r\n \r\n
*/}\r\n \r\n \r\n }\r\n content={t(\"Approval form\")}\r\n iconPosition=\"after\"\r\n onClick={() => this.setState({ approveDialogOpen: true })}\r\n >\r\n \r\n
\r\n )\r\n } */}\r\n {/* {\r\n this.state.status\r\n && (\r\n \r\n this.setState({ approveDialogOpen: true }),\r\n },\r\n ]} />\r\n
\r\n )\r\n } */}\r\n {t(\"Total Hours Worked This Week-\")}
\r\n \r\n {getFormattedDuration(moment.duration(this.state.timesheetTableData.totalWorkTime)\r\n .asSeconds())}\r\n
\r\n {/* \r\n this.setState({ timebarExpended: !this.state.timebarExpended })}\r\n hAlign=\"stretch\"\r\n styles={{\r\n cursor: \"pointer\",\r\n height: this.state.timebarExpended ? undefined : \"8px\",\r\n overflow: \"hidden\",\r\n }}>\r\n
\r\n \r\n {this.state.timebarExpended\r\n && (\r\n \r\n Working Time: \r\n {getFormattedDuration(moment.duration(day.workingTime).asSeconds())}\r\n \r\n )}\r\n
\r\n {this.state.BreakConfig == Models.BreakConfig.Required ?\r\n \r\n {this.state.timebarExpended\r\n && (\r\n \r\n Breaks Time: \r\n {getFormattedDuration(moment.duration(day.breaksTime).asSeconds())}\r\n \r\n )}\r\n
\r\n : null}\r\n {this.state.BreakConfig == Models.BreakConfig.Required ?\r\n \r\n : }\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\n\r\nconst WeekScheduleCustomEditor = ({ scheduler, handleConfirm }: CustomEditorProps) => {\r\n\r\n const action = scheduler.edited;\r\n\r\n const [startTime, setStartTime] = useState(scheduler.state.start.value)\r\n const [endTime, setEndTime] = useState(scheduler.state.end.value)\r\n\r\n const handleSubmit = async () => {\r\n\r\n try {\r\n scheduler.loading(true);\r\n\r\n const newEvent = {\r\n event_id: action?.event_id || \" \",\r\n title: \" \",\r\n start: startTime,\r\n end: endTime,\r\n color: \"#BED1DF\"\r\n };\r\n var result = await handleConfirm(newEvent, action ? \"edit\" : \"create\")\r\n scheduler.close();\r\n } finally {\r\n scheduler.loading(false);\r\n }\r\n };\r\n return (\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n Add Shift
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\n\r\nfunction Schedule(this: any, { events, allEmployees, resources, startHour, endHour, eventRenderer,\r\n onDelete, direction, company, onConfirm, recourseHeaderComponent, timesheet, getRemoteEvents, handleConfirm, userId }: CalendarProps) {\r\n if (allEmployees) {\r\n return (\r\n \r\n
\r\n\r\n \r\n {\r\n setStartTime(new Date(newValue))\r\n }}\r\n renderInput={(params : any) => {\r\n setEndTime(new Date(newValue))\r\n }}\r\n renderInput={(params : any) => \r\n \r\n
\r\n Add Shift
\r\n\r\n
{t(\"Total Hours Worked This Week-\")}
\r\n \r\n {getFormattedDuration(moment.duration(this.state.timesheetTableData.totalWorkTime)\r\n .asSeconds())}\r\n
\r\n \r\n
;\r\n }\r\n case \"BreakOut\":\r\n {\r\n var AMPMStart = event.start.toLocaleTimeString().split(\" \")[1] == undefined ? event.start.toLocaleTimeString().split(\" \")[1] : event.start.toLocaleTimeString().split(\" \")[1]\r\n var hours = event.start.getHours()\r\n var mins = event.start.getMinutes() == 0 ? \"00\" : event.start.getMinutes()\r\n var time = event.start.toLocaleTimeString().split(\":\")[0] +\r\n \":\" + event.start.toLocaleTimeString().split(\":\")[1] + \" \"\r\n + AMPMStart\r\n return (\r\n \r\n {startTime}-{endTime}\r\n
\r\n { e.preventDefault() }}>Break Out Time {time}
}\r\n //{\"Break Out Time \" + time}\r\n on=\"hover\"\r\n />\r\n\r\n );\r\n }\r\n case \"ClockIn\":\r\n {\r\n var AMPMStart = event.start.toLocaleTimeString().split(\" \")[1] == undefined ? event.start.toLocaleTimeString().split(\" \")[1] : event.start.toLocaleTimeString().split(\" \")[1]\r\n var hours = event.start.getHours()\r\n var mins = event.start.getMinutes() == 0 ? \"00\" : event.start.getMinutes()\r\n var time = event.start.toLocaleTimeString().split(\":\")[0] +\r\n \":\" + event.start.toLocaleTimeString().split(\":\")[1] + \" \"\r\n + AMPMStart\r\n return (\r\n \r\n
\r\n \r\n }\r\n content={ { e.preventDefault() }}>Clock In Time {time}
}\r\n //{\"Clock In Time \" + time}\r\n on=\"hover\"\r\n />\r\n );\r\n }\r\n\r\n case \"ClockOut\":\r\n {\r\n var AMPMStart = event.start.toLocaleTimeString().split(\" \")[1] == undefined ? event.start.toLocaleTimeString().split(\" \")[1] : event.start.toLocaleTimeString().split(\" \")[1]\r\n var hours = event.start.getHours()\r\n var mins = event.start.getMinutes() == 0 ? \"00\" : event.start.getMinutes()\r\n var time = event.start.toLocaleTimeString().split(\":\")[0] +\r\n \":\" + event.start.toLocaleTimeString().split(\":\")[1] + \" \"\r\n + AMPMStart\r\n return (\r\n \r\n \r\n
\r\n }\r\n content={ { e.preventDefault() }}>Clock Out Time {time}
}\r\n //{\"Clock Out Time \" + time}\r\n on=\"hover\"\r\n />\r\n );\r\n }\r\n case \"BreakIn\":\r\n {\r\n var AMPMStart = event.start.toLocaleTimeString().split(\" \")[1] == undefined ? event.start.toLocaleTimeString().split(\" \")[1] : event.start.toLocaleTimeString().split(\" \")[1]\r\n var hours = event.start.getHours()\r\n var mins = event.start.getMinutes() == 0 ? \"00\" : event.start.getMinutes()\r\n var time = event.start.toLocaleTimeString().split(\":\")[0] +\r\n \":\" + event.start.toLocaleTimeString().split(\":\")[1] + \" \"\r\n + AMPMStart\r\n return (\r\n \r\n \r\n
\r\n }\r\n content={ { e.preventDefault() }}>Break In Time {time}
}\r\n //{\"Break In Time \" + time}\r\n on=\"hover\"\r\n />\r\n );\r\n }\r\n default:\r\n {\r\n return ;\r\n }\r\n }\r\n }\r\n }\r\n >\r\n <>{userInView ? userInView.fullName : \"\"} : <>}\r\n \r\n