\n\n {props.searchLocation\n ? (\n \n\n \n )\n : (\n \n )}\n\n
\n \n
\n {/* responsive_openCloseSidebar(sidebartoggle)} style={window.innerWidth <= 991 ? { display: 'block' } : { display: 'none' }}>\n \n
\n \n
\n - \n
- \n \n {control.onLoadSwitchLang ? SpinnerButton : }\n {lang === 'ID' ? 'Bahasa Indonesia' : 'English'}\n \n\n
- \n \n
- { lang === 'EN' && postLanguageUserService('id') }}>\n
Bahasa Indonesia
\n \n - { lang === 'ID' && postLanguageUserService('en') }}>\n
English
\n \n \n
\n\n - { lang === 'EN' && postLanguageUserService('id') }}>\n
- \n \n \n {displayTimezone(props.redux.profile.attr.timezone)}\n {/* */}\n\n {/*
- \n \n
- { timezone !== 'wib' && editTimezone('wib') }}>\n
WIB (UTC+7)
\n \n - { timezone !== 'wita' && editTimezone('wita') }}>\n
WITA (UTC+8)
\n \n - { timezone !== 'wit' && editTimezone('wit') }}>\n
WIT (UTC+9)
\n \n \n
\n\n - { timezone !== 'wib' && editTimezone('wib') }}>\n
- \n \n \n {\n props.redux.mode === 'light' &&\n \n }\n {\n props.redux.mode === 'dark-only' &&\n \n }\n {\n props.redux.mode === 'auto' &&\n \n }\n \n \n\n
- \n \n
- handleDarkMode('light', props)}>\n
\n \n {LangLightMode}\n
\n \n - handleDarkMode('dark-only', props)}>\n
\n \n {LangDarkMode}\n
\n \n - handleDarkMode('auto', props)}>\n
\n \n {LangAutoMode}\n
\n \n \n
\n - handleDarkMode('light', props)}>\n
\n
\n {errors.message !== '' && (\n - \n {/*\n
- \n
\n
\n */}\n\n - \n \n \n {\n notificationCount !== 0 &&\n 9 ? notificationCount > 99 ? '-12px' : '-10px' : '-5px'}` }}>{notificationCount > 99 ? '99+' : notificationCount}\n }\n\n
- \n
- \n
{LangNotification}
\n \n {\n props.redux.notifications.attendance_review !== 0 && checkAuthorization(props.redux, 'attendance-review.index') &&\n - { history.push('/attendance/review') }}>\n
{AttendanceReview} {props.redux.notifications.attendance_review}
\n \n }\n {\n props.redux.notifications.attendance_edit_request !== 0 && checkAuthorization(props.redux, 'attendance-revision.index') &&\n - { history.push('/attendance/revision') }}>\n
{LangAttendanceRevision}{props.redux.notifications.attendance_edit_request}
\n \n }\n {\n props.redux.notifications.unlock_limit_attenance_request !== 0 && checkAuthorization(props.redux, 'attendance-approval.index') &&\n - { history.push('/attendance-approval') }}>\n
{LangAttendanceApproval}{props.redux.notifications.unlock_limit_attenance_request}
\n \n }\n {\n props.redux.notifications.update_profile_picture !== 0 && checkAuthorization(props.redux, 'picture-approval.index') &&\n - { history.push('/attendance/profile-picture-approval') }}>\n
{LangProfilePhotoApproval}{props.redux.notifications.update_profile_picture}
\n \n }\n {\n props.redux.notifications.whitelist_device !== 0 && checkAuthorization(props.redux, 'device-approval.index') &&\n - { history.push('/device-approval') }}>\n
{LangDeviceApproval}{props.redux.notifications.whitelist_device}
\n \n }\n {\n props.redux.notifications.leave_request !== 0 && checkAuthorization(props.redux, 'paid-leave.day.index') &&\n - { history.push('/leave/request') }}>\n
{LangPaidLeaveRequest}{props.redux.notifications.leave_request}
\n \n }\n {\n props.redux.notifications.permit_request !== 0 && checkAuthorization(props.redux, 'unpaid-leave.day.index') &&\n - { history.push('/permit/request') }}>\n
{LangUnpaidLeaveRequest}{props.redux.notifications.permit_request}
\n \n }\n {\n props.redux.notifications.personnel_document_expired && props.redux.notifications.personnel_document_expired !== 0 && checkAuthorization(props.redux, 'employee.doc.index') ?\n - { history.push('/personnels') }}>\n
{LangEmployeeDocsExpired}{props.redux.notifications.personnel_document_expired}
\n : ''\n }\n {\n props.redux.notifications.personnel_document_in_reminder && props.redux.notifications.personnel_document_in_reminder !== 0 && checkAuthorization(props.redux, 'employee.doc.index') ?\n - { history.push('/personnels') }}>\n
{cookies.get('lang') === 'EN' ? LangEmployeeDocsInReminder : widthWindow >= 375 && widthWindow <= 425 ? LangEmployeeDocsInReminder.substring(0, 32) : `${LangEmployeeDocsInReminder.substring(0, 23)}...`}{props.redux.notifications.personnel_document_in_reminder}
\n : ''\n }\n {\n props.redux.notifications.claim_request && props.redux.notifications.claim_request !== 0 && checkAuthorization(props.redux, 'claim.request.index') ?\n - { history.push('/claim/request') }}>\n
{LangClaimRequest}{props.redux.notifications.claim_request}
\n : ''\n }\n {\n props.redux.notifications.pintu_kerjoo_sync_error && props.redux.notifications.pintu_kerjoo_sync_error !== 0 && checkAuthorization(props.redux, 'pintu-kerjoo.approval') ?\n - { history.push('/pintu-kerjoo/attendance-approval') }}>\n
{widthWindow >= 375 && widthWindow <= 425 ? `${LangPintuKerjooAttendanceApproval.substring(0, 36)}` : `${LangPintuKerjooAttendanceApproval.substring(0, 26)}...`}{props.redux.notifications.pintu_kerjoo_sync_error}
\n : ''\n }\n - \n {\n notificationCount === 0 &&
{LangNoNotification}
\n }\n \n
\n \n\n - \n
- \n \n {Hi}, \n \n {\n widthWindow >= 1043 ?\n (\n propsName && propsName.length > 18 ?\n {propsName.slice(0, 18) + '...'}\n : propsName || ''\n )\n :\n widthWindow >= 992 && widthWindow <= 1042 ?\n (\n propsName && propsName.length > 9 ?\n {propsName.slice(0, 9) + '...'}\n : propsName || ''\n )\n :\n widthWindow >= 796 && widthWindow <= 991 ?\n (\n propsName && propsName.length > 18 ?\n {propsName.slice(0, 18) + '...'}\n : propsName || ''\n )\n :\n widthWindow >= 425 && widthWindow <= 795 ?\n (\n propsName && propsName.length > 9 ?\n {propsName.slice(0, 9) + '...'}\n : propsName || ''\n )\n :\n widthWindow >= 375 ?\n limitName.length > 9 ?\n `${name.substring(0, 8)}...` || ''\n :\n name || ''\n :\n limitName.length > 9 ?\n `${name.substring(0, 8)}...` || ''\n :\n name || ''\n }\n \n \n \n\n
- \n
- { history.push('/admin/activity-logs') }} className='d-flex align-items-center'>
{LangActivity} \n {/* - { history.push('/admin/daily-report') }} className='d-flex align-items-center'>
{LangDailyReport} */}\n - { history.push('/admin/setting') }} className='d-flex align-items-center'>
{LangSetting} \n - \n !onLogout && setLogout(true)} className='text-danger d-flex align-items-center'>\n {onLogout ? {SpinnerButton}:
} {LangLogout}\n \n \n
\n - { history.push('/admin/activity-logs') }} className='d-flex align-items-center'>
{errors.message}
}\n />\n )}\n \n\n )\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Rightbar)\n","import React, { useEffect, useRef } from 'react'\nimport { Row } from 'reactstrap'\nimport LeftHeader from './leftbar'\nimport RightHeader from './rightbar'\nimport { connect, mapDispatchToProps, mapStateToProps } from '../../helpers/Common'\n\nconst Header = (props) => {\n const headerRef = useRef(null)\n\n useEffect(() => {\n props.setState({ headerHeight: headerRef.current.offsetHeight })\n // eslint-disable-next-line\n }, [headerRef?.current?.offsetHeight])\n\n return (\n <>\n\n \n
\n
\n \n )\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Header)\n","export class ConfigDB {\n\tstatic data = {\n\t settings: {\n\t layout_type: 'ltr',\n\t sidebar: {\n\t type: 'compact-wrapper',\n\t body_type: 'sidebar-icon'\n\t },\n\t sidebar_setting: 'default-sidebar'\n\t },\n\t color: {\n\t layout_version: 'light',\n\t color: 'color-1',\n\t primary_color: '#7366ff',\n\t secondary_color: '#f73164',\n\t mix_background_layout: 'light-only'\n\t },\n\t router_animation: 'fadeIn'\n\t}\n}\nexport default ConfigDB\n","import React, { Fragment, useState, useEffect } from 'react'\nimport { MENUITEMS, MENUITEMSSUPERVISOR, NEWMENUITEMS, NEWMENUITEMSSUPERVISOR } from './menu'\nimport { ArrowRight, ArrowLeft, ChevronDown, ChevronRight } from 'react-feather'\nimport { Link, useLocation, matchPath } from 'react-router-dom'\nimport { translate } from 'react-switch-lang'\nimport configDB from '../../data/customizer/config'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faAngleDown, faAngleRight, faAngleLeft, faChevronDown, faRetweet } from '@fortawesome/free-solid-svg-icons'\nimport LogoDark from '../../assets/images/logo/dark.svg'\nimport LogoLight from '../../assets/images/logo/light.svg'\nimport LogoIcon from '../../assets/images/logo/logo-icon.png'\nimport { SpinnerButton, axiosCompany, checkAuthorization, connect, cookies, displayTimezone, handleDarkMode, mapDispatchToProps, mapStateToProps } from '../../helpers/Common'\nimport { AttendanceSpot, CompanySetting, DataEmployees, Employe, LangAdjustment, LangAnalytics, LangApproval, LangAttendance, LangAutoMode, LangClaim, LangDarkMode, LangEn, LangId, LangLightMode, LangOther, LangProfileApproval, LangProfilePhotoApproval, LangReview, LangSubscription, LangSwitchToNewVersion, LangSwitchToOldVersion, LangSystem, LangTimesheet, LangUnpaidLeave, LangUserAdmin, LangUserSubAdmin, ManageDivision, ManageEmployees, ShiftDay, ShiftWorkTime, WorkDay, WorkTime } from '../../constant/languange'\nimport moment from 'moment'\n\nconst Sidebar = (props) => {\n const handleFeatures = (menu = []) => {\n // filter menu\n const features = []\n if (!props.redux.enableFeatureLimitAttendance) features.push('Attendance Approval')\n if (!props.redux.enableWhitelistDevice) features.push('Device Approval')\n if (!props.redux.enableFeaturePayroll) features.push('Payroll Calculate')\n if (!props.redux.enableFeatureClientVisit) features.push('Client Visit')\n if (!props.redux.enableFeatureReimbursement) features.push('Claim')\n if (!props.redux.isTemporary) features.push('Reset')\n if (!props.redux.enableFeatureTimesheet) features.push('Timesheet')\n if (!props.redux.enableFeatureSubAdmin) {\n features.push(LangUserSubAdmin)\n } else {\n if (props.redux.profile.role_id === 4) features.push(LangUserSubAdmin)\n }\n if (props.redux.profile.role_id === 4) features.push(LangUserAdmin)\n if (props.redux.profile.role_id === 4) features.push('Reset')\n // if (typeof props.redux.addons === 'object' && props.redux.addons !== null && 'pintu_kerjoo' in props.redux.addons) {\n if (!props.redux.enableFeaturePintuKerjoo) {\n features.push('Pintu Kerjoo')\n } else {\n features.push('Pintu Kerjoo Landing Page')\n }\n if (props.redux.profile.role_id === 4) features.push('Pintu Kerjoo Landing Page')\n const filteredMenu = menu.slice().filter(item => !features.includes(item.menucontent))\n // filter submenu\n const filteredMenuAndSubMenu = filteredMenu.map(item => {\n if (item.Items[0].children) {\n const children = [...item.Items[0].children]\n\n const subFeatures = []\n if (!props.redux.enableFeaturePayroll) subFeatures.push('Overtime Calculation')\n if (!props.redux.enableFeatureSpecialLeave) subFeatures.push('Special Leave')\n if (!props.redux.enableFeatureReimbursement) subFeatures.push('Claim Type')\n if (!props.redux.enableFeaturePintuKerjoo) subFeatures.push('Pintu Kerjoo Attendance Approval')\n if (!props.redux.enableFeaturePintuKerjoo) subFeatures.push('Pintu Kerjoo Data Sync')\n if (!props.redux.enableWhitelistDevice) subFeatures.push('Device Approval')\n if (!props.redux.enableFeatureMultilevelApproval) subFeatures.push('Approval Rules')\n if (props.redux.profile.supervisor_groups !== null) subFeatures.push('Profile Picture Approval')\n if (!props.redux.enableFeatureSubAdmin) {\n subFeatures.push(LangUserSubAdmin)\n } else {\n if (props.redux.profile.role_id === 4) subFeatures.push(LangUserSubAdmin)\n }\n if (props.redux.profile.role_id === 4) subFeatures.push(LangUserAdmin)\n const filteredSubMenu = children.slice().filter(item => !subFeatures.includes(item.submenucontent))\n const newFilteredSubMenu = filteredSubMenu.filter(item => item.key ? checkAuthorization(props.redux, item.key) : true)\n\n item.Items[0].children = [...newFilteredSubMenu]\n if (item.Items[0].children.length === 0) {\n return\n }\n return item\n } else {\n if (item.Items[0].key && !checkAuthorization(props.redux, item.Items[0].key)) {\n return\n }\n }\n return item\n })\n\n return filteredMenuAndSubMenu.filter(a => a !== undefined)\n }\n\n const [DATAMENU] = useState(props.redux.profile.supervisor_groups ? handleFeatures(cookies.get('menu-version') === '2' ? NEWMENUITEMSSUPERVISOR : MENUITEMSSUPERVISOR) : handleFeatures(cookies.get('menu-version') === '2' ? NEWMENUITEMS : MENUITEMS))\n const [mainmenu, setMainMenu] = useState(props.redux.profile.supervisor_groups ? handleFeatures(cookies.get('menu-version') === '2' ? NEWMENUITEMSSUPERVISOR : MENUITEMSSUPERVISOR) : handleFeatures(cookies.get('menu-version') === '2' ? NEWMENUITEMS : MENUITEMS))\n const [margin, setMargin] = useState(0)\n const [width, setWidth] = useState(0)\n const [lang] = useState(cookies.get('lang'))\n const [control, setControl] = useState({ onLoadSwitchLang: false })\n const pathUrls = useLocation()\n // const [sidebartoogle, setSidebartoogle] = useState(true)\n const wrapper = configDB.data.settings.sidebar.type\n const sidebartoogle = true\n useEffect(() => {\n // cookies.set('menu-version', '1')\n document.querySelector('.left-arrow').classList.add('d-none')\n\n window.addEventListener('resize', handleResize)\n handleResize()\n\n const currentUrl = window.location.pathname\n mainmenu.map(items => {\n items.Items.filter((Items) => {\n if (Items.path === currentUrl) { setNavActive(Items) }\n if (!Items.children) return false\n Items.children.filter(subItems => {\n if (subItems.path === currentUrl) { setNavActive(subItems) }\n if (!subItems.children) return false\n subItems.children.filter(subSubItems => {\n if (subSubItems.path === currentUrl) {\n setNavActive(subSubItems)\n return true\n } else {\n return false\n }\n })\n return subItems\n })\n return Items\n })\n return items\n })\n\n if (mainmenu[0].Items[0].children) {\n props.setState({ mainPageUrl: mainmenu[0].Items[0].children[0].path, mainMenu: DATAMENU })\n } else {\n props.setState({ mainPageUrl: mainmenu[0].Items[0].path, mainMenu: DATAMENU })\n }\n\n return () => {\n window.removeEventListener('resize', handleResize)\n }\n\n // eslint-disable-next-line\n }, []);\n\n useEffect(() => {\n if (window.innerWidth > 991) {\n document.querySelector('.page-header').className = 'page-header'\n document.querySelector('.sidebar-wrapper').className = 'sidebar-wrapper'\n // document.querySelector('.mega-menu-container').classList.remove('d-block')\n }\n }, [width])\n\n const handleResize = () => {\n setWidth(window.innerWidth - 500)\n }\n\n useEffect(() => {\n window.addEventListener('popstate', handleChangeUrl())\n return () => {\n window.removeEventListener('popstate', handleChangeUrl())\n }\n // eslint-disable-next-line\n }, [pathUrls])\n\n const handleChangeUrl = () => {\n DATAMENU.map(menuItems => {\n menuItems.Items.filter(Items => {\n if (Items.path !== pathUrls.pathname) { Items.active = false }\n if (Items.path === pathUrls.pathname) { Items.active = true }\n if (Items.type === 'link') {\n if (Items.childs) {\n Items.childs.forEach(childPath => {\n if (matchPath(pathUrls.pathname, { path: childPath })) {\n Items.active = true\n Items.active = true\n }\n })\n }\n }\n if (Items.children) {\n Items.children.map(submenuItems => {\n if (submenuItems.path !== pathUrls.pathname) {\n submenuItems.active = false\n }\n if (submenuItems.path === pathUrls.pathname) {\n submenuItems.active = true\n Items.active = true\n }\n if (submenuItems.childs) {\n submenuItems.childs.forEach(childPath => {\n if (matchPath(pathUrls.pathname, { path: childPath })) {\n submenuItems.active = true\n Items.active = true\n }\n })\n }\n return submenuItems\n })\n }\n return Items\n })\n return menuItems\n })\n setMainMenu({ mainmenu: DATAMENU })\n }\n\n const setNavActive = (item) => {\n DATAMENU.map(menuItems => {\n menuItems.Items.filter(Items => {\n if (Items !== item) { Items.active = false }\n if (Items.children && Items.children.includes(item)) { Items.active = true }\n if (Items.children) {\n Items.children.filter(submenuItems => {\n if (submenuItems.children && submenuItems.children.includes(item)) {\n Items.active = true\n submenuItems.active = true\n return true\n } else {\n return false\n }\n })\n }\n return Items\n })\n return menuItems\n })\n item.active = true\n setMainMenu({ mainmenu: DATAMENU })\n }\n\n const setNavActive2 = (item) => {\n DATAMENU.map(menuItems => {\n menuItems.Items.filter(Items => {\n if (Items !== item) { Items.active = false }\n if (Items.children && Items.children.includes(item)) { Items.active = true }\n if (Items.children) {\n Items.children.filter(submenuItems => {\n if (submenuItems.children && submenuItems.children.includes(item)) {\n Items.active = true\n submenuItems.active = true\n return true\n } else {\n return false\n }\n })\n }\n return Items\n })\n return menuItems\n })\n item.active = !item.active\n setMainMenu({ mainmenu: DATAMENU })\n }\n\n const toggletNavActive = (item) => {\n if (window.innerWidth <= 991) {\n document.querySelector('.page-header').className = 'page-header close_icon'\n document.querySelector('.sidebar-wrapper').className = 'sidebar-wrapper close_icon '\n // document.querySelector('.mega-menu-container').classList.remove('d-block')\n if (item.type === 'sub') {\n document.querySelector('.page-header').className = 'page-header '\n document.querySelector('.sidebar-wrapper').className = 'sidebar-wrapper '\n }\n }\n\n if (!item.active) {\n DATAMENU.map(a => {\n a.Items.filter((Items) => {\n if (a.Items.includes(item)) { Items.active = false }\n if (!Items.children) return false\n Items.children.forEach(b => {\n if (Items.children.includes(item)) {\n b.active = false\n }\n if (!b.children) return false\n b.children.forEach(c => {\n if (b.children.includes(item)) {\n c.active = false\n }\n })\n })\n return Items\n })\n return a\n })\n }\n item.active = true\n setMainMenu({ mainmenu: DATAMENU })\n }\n\n const handleMenuLink = (menuItem) => {\n setNavActive(menuItem)\n toggletNavActive(menuItem)\n }\n\n const scrollToRight = () => {\n if (margin <= -2598 || margin <= -2034) {\n if (width === 492) {\n setMargin(-3570)\n } else {\n setMargin(-3464)\n }\n document.querySelector('.right-arrow').classList.add('d-none')\n document.querySelector('.left-arrow').classList.remove('d-none')\n } else {\n setMargin(margin => margin += (-width))\n document.querySelector('.left-arrow').classList.remove('d-none')\n }\n }\n\n const scrollToLeft = () => {\n if (margin >= -width) {\n setMargin(0)\n document.querySelector('.left-arrow').classList.add('d-none')\n document.querySelector('.right-arrow').classList.remove('d-none')\n } else {\n setMargin(margin => margin += width)\n document.querySelector('.right-arrow').classList.remove('d-none')\n }\n }\n\n // const openCloseSidebar = (toggle) => {\n // if (toggle) {\n // setSidebartoogle(!toggle)\n // document.querySelector('.page-header').className = 'page-header close_icon'\n // document.querySelector('.sidebar-wrapper').className = 'sidebar-wrapper close_icon '\n // } else {\n // setSidebartoogle(!toggle)\n // document.querySelector('.page-header').className = 'page-header'\n // document.querySelector('.sidebar-wrapper').className = 'sidebar-wrapper '\n // }\n // }\n\n const responsiveSidebar = () => {\n document.querySelector('.page-header').className = 'page-header close_icon'\n document.querySelector('.sidebar-wrapper').className = 'sidebar-wrapper close_icon'\n }\n\n const switchVersion = () => {\n if (cookies.get('menu-version') === '2') {\n cookies.set('menu-version', '1')\n window.location.reload()\n } else {\n cookies.set('menu-version', '2')\n window.location.reload()\n }\n }\n\n const postLanguageUserService = (lang) => {\n setControl({ ...control, onLoadSwitchLang: true })\n axiosCompany().post('language', { lang: lang }).then(ress => {\n lang === 'en' ? LangEn() : LangId()\n })\n }\n\n return (\n <>\n \n
\n \n )\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(translate(Sidebar))\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZVQTFRFdMVuMaSeJKCSWLpRueK3fcl39vv2mNLOY7163PHbl9SSptfd5fTk7fjtjtCJyunIS7Nhn9ecqNukwubAhcyA0+3Ssd+tMKSdJqGUKqGXJ6GUL6Oc9vv9NaabJaCSNKWiJqCU4/L4KqKXWrtTLqSbLKOZP6qtKaGW7Pb6csVsOaiYLaOaK6KZbsNpx+fMpNbjXbxXOKimasFkTrOJx+bxX7t+sNzgldDLSq+5a8JlZb9fYLjBcL/LYr5czenwdcSby+jmc8HGKKCVYb1aPquVT7G3pdfdULVmdcHPW7tVueDiZLrFaMBhaLy6Ra6eZ793Wba5cMRrU7O7QKySX71Yjs3bbcNnjMzR1+3yh8nTa8F0Rq21gMp7bMGD2O/eSrCM2u72m9PhesTNZ7zIpdjGTbRjSa+vO6mqW7mQYLx3yefsecW2X7qNhcnKb8NxgsqSqtnigcfVbb7HW7etW7ieeMd7l9DdX7i4Yr15Ra+PTbC8Sq+qo9bb4fLnoNXXe8h1gsqiicvOo9baZL9exOTudcOq////3QHDsgAAAId0Uk5T//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AIvnnfAAABLtJREFUeNrs2ud32zYQAHCCAwxpUqxIUcuSbMs7duM0q2nT7HQlbbr33nvvvfV3V6IXB4A7QfTjax/uox9l/EgCIO4AbVRxaAqgAAqgAAqgAAqgAArwXwZsfPjnJ1cf/cd++1UquswxXdfSLLdueqUC/v7yPbIfNy6f4Bh809IOo2HSsgCXLiyQdPQ/jliXZZqfhGWWAug9cxfJx43PCk+Y1rVi1PzZAb37CCP6r8TZy2JLY4XlzQpgtz+Os0H69psaJzICGcBDnPZJ/zHnsO83NG5Y/kyAnQUegBz/Zr+Xm5oo3FkAS2uEH6fryTVeTRNHMAPgCyKKFx3w9pMJQR4gfACEvFYf+a4GRyAN2BG2T/paZCHa1+rSgFtiADmr4YJKAnprAOA0EuBIAl5fAABPIQGmJOAM0D45fsSAzyEAOWLAnAL8bwBO1QBaMaA2qhgQVAywaMUAU7we8KKmO47QdCQAn07TA1gAv5laTlqhzwfMD7ttXdcXu8OV1F+PIV6AxwfQsLB08JmA1vaifhiLw9YUgIC/LGflElbEAKwO9GwMVtGAgJ+YcHKJMA9oXdOLca2FAlgOPzULeT8Ks4BWW2fFYAsBqFN+cipYTYdpAKf9cXRaAMCKBOm5g3lvEwC3/XFnXBECcplxFkAbQrp/AOjoouh8j5l+WAAgnQn3AfO6OB68k3f7nrBGRKF8wt8DdAHAHca9zN83gSJVBI3e3X8wBz2AMcA4WXwIDQeqkkH57F4+OddBAIzlR/IvkEJlOgpPoMkrnGtjAIbx9BPpHhzDdUIHBiRD+AEdBzCWT3HnHibARH7Df8YCDOP65u7tB6hKKQKQ1FV+xQOM5Xsmv/JHpQLungJgGBd/i7C14qMBnHzZKRGQFDXsaQCTGalJcYAI2QmnAOxNR+wZWGYYJoPZbmMBf22KvkHFmRAGJN3Z7uAADz8LfoZygDpuKW1voQAXN4F1SBEQoybCkU0WYUAyAeSGkA9u2TRQyZRNVkHA9U3W7wMIEKCSKZtAj+CdU8jlaGFNKKywNugBYEXYfvcD/kOMxQDfgr7FuwDRonCwLVyUMmal9LLcQSQzEwBZ57XfngeW5cWFUSYxCeBkKgHwBENEYiLeNXOYbyHdgXcBZMi5fURqJt41Y9X6M/PYHoCstFlZESo5BXbNgtx80MiOX/ugDrCaXp8P1ufx6Tm0axaHBy/CquenDztdoNhenyAG3c5Wa6oCRY1Cm1ZebI4jZnxDbLBEgwCkk5Rpi1TlADSnaoBbNUDzqwaYVQNqVQO0ygFe1QBHASQB56oGXClrz0i2E26UtXUrvX3/LgD4Ade+Kw14DgBcbqIAkTTgefH+ff+E8ABPYdtQ4hDLBSHgfco5wcWr/08PuLQgfgCCQ1ysk0wSB5leEAB+3697urgeIAXoPclt/+vD1aboME0441mypfs57d9Or2L9GmZRLHecjyP46pfcaUbOFEBnP9C49BajJ35USH29BrxvIHmks7fzUq75n64wLisOyJpT1qHWjTfOp451fneTd6Q2sxXoxiWeqh31znz75o/n1x6/+se5DcFlNG6640FZc8PAF1dIqgkFUAAFUAAFUAAFUAAFqBzwrwADAA9OZMBiA56HAAAAAElFTkSuQmCC\"","import React from 'react'\nimport { Container, Row } from 'reactstrap'\nimport { displayDate } from '../../helpers/Common'\nimport moment from 'moment'\n\nconst Footer = (props) => {\n return (\n <>\n \n \n )\n}\n\nexport default Footer\n","import React from 'react'\nimport {\n cookies,\n axios,\n apiUrl,\n SpinnerLoadPages,\n Redirect,\n connect,\n mapStateToProps,\n mapDispatchToProps,\n setAnnualLeaveLabel\n} from '../helpers/Common'\n\n/**\n * cek sudah login belum\n */\nclass AuthCheckComponent extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n loadFirst: true\n }\n }\n\n componentDidMount () {\n /**\n * cek dulu sudah auth belum\n */\n if (this.props.redux.authed) {\n this.setState({ loadFirst: false })\n return true\n }\n\n /**\n * cek dulu ada cookie tidak\n */\n const token = cookies.get('token')\n\n /**\n * jika tidak ada berarti memang belum login\n */\n if (!token) {\n this.setState({ loadFirst: false })\n } else {\n axios.get(apiUrl + '/auth/myprofile', {\n headers: { Authorization: `Bearer ${token}` }\n }).then((result) => {\n /**\n * jika ada isinya berarti personnel\n */\n if (result.data.personnel_id && (!result.data.supervisor_groups || result.data.supervisor_groups.length <= 0)) {\n cookies.remove('token')\n this.setState({ loadFirst: false })\n } else {\n /**\n * ambil company & data init\n */\n axios.get(result.data.company_api_url + '/company?with_init_data=1', {\n headers: { Authorization: `Bearer ${token}` }\n }).then((result2) => {\n /**\n * update redux data\n */\n if (result.data.attr.timezone === 'wita') {\n result.data.timeZone = 'Asia/Ujung_Pandang'\n } else if (result.data.attr.timezone === 'wit') {\n result.data.timeZone = 'Asia/Jayapura'\n } else {\n result.data.timeZone = 'Asia/Jakarta'\n }\n\n this.props.setState({\n authed: true,\n profile: result.data,\n company: result2.data.profile,\n addons: result2.data.addons,\n groups: result2.data.groups,\n personnelsCount: result2.data.personnels_count,\n isTrial: result2.data.is_trial,\n isTemporary: result2.data.is_temporary,\n featureLimitation: result2.data.feature_limitation,\n features: result2.data.features,\n createdAt: result2.data.created_at,\n expiredAt: result2.data.expired_at,\n enableFeatureCustomerDivision: result2.data.enable_feature_customer_division,\n packageName: result2.data.package_name,\n pricePerPersonnel: result2.data.price_per_personnel,\n personnelsQuota: result2.data.personnels_quota,\n broadcastQuota: result2.data.broadcasts_quota,\n calculateDistanceQuota: result2.data.calculate_distance_quota,\n spotQuota: result2.data.spot_quota || 3,\n additionalSpotQuota: result2.data.additional_spot_quota,\n apiDocUrl: result2.data.api_docs_url,\n enableFeatureLimitAttendance: result2.data.enable_feature_limit_attendance,\n enableWhitelistDevice: result2.data.enable_feature_whitelist_device,\n enableAutoClockout: result2.data.enable_feature_auto_clock_out,\n enableFeaturePayroll: result2.data.enable_feature_payroll,\n enableFeatureClientVisit: result2.data.enable_feature_client_visit,\n enableFeatureDocumentPersonnel: result2.data.enable_feature_document_personnel,\n enableFeatureSpecialLeave: result2.data.enable_feature_special_leaves,\n enableFeatureReimbursement: result2.data.enable_feature_reimbursements,\n enableFeaturePintuKerjoo: result2.data.enable_feature_pintu_kerjoo,\n enableFeatureMultilevelApproval: result2.data.enable_feature_multilevel_approval,\n enableFeatureTimesheet: result2.data.enable_feature_timesheet,\n enableFeatureSubAdmin: result2.data.enable_feature_sub_admin\n })\n\n // if (!cookies.get('annual_label_id') && !cookies.get('annual_label_en')) {\n // setAnnualLeaveLabel(result2.data.profile.leave_request_button_label, 'id')\n // setAnnualLeaveLabel(result2.data.profile.leave_request_button_label_en, 'en')\n // window.location.reload()\n // }\n\n const userLang = result.data.attr.lang ? result.data.attr.lang.toUpperCase() : 'ID'\n if (!cookies.get('lang')) {\n cookies.set('lang', userLang) // set language cookies\n window.location.reload()\n } else {\n /**\n * kalo sudah ada coba dibandingkan, sudah sama belum\n */\n if (cookies.get('lang') !== userLang) {\n cookies.set('lang', userLang)\n window.location.reload()\n }\n }\n\n this.setState({ loadFirst: false })\n }).catch(() => {\n cookies.remove('token')\n this.setState({ loadFirst: false })\n })\n }\n }).catch(() => {\n /**\n * hapus saja cookienya untuk login ulang\n */\n cookies.remove('token')\n this.setState({ loadFirst: false })\n })\n }\n }\n\n render () {\n const { loadFirst } = this.state\n const { redux, children } = this.props\n\n /**\n * render spiner\n */\n if (loadFirst) return SpinnerLoadPages\n\n /**\n * cek data redux apakah sudah login?\n */\n if (!redux.authed) {\n return \n setNavActive(DATAMENU[0].Items[0])}>\n 
\n 
\n \n responsiveSidebar()}>
\n \n 
\n
\n \n \n \n \n
\n
\n )}\n | {Name} | \n {activeTab === 0 && (\n <>\n{LangSentAt} | \n {/*Status | */}\n )}\n
|---|---|---|
| \n \n \n \n \n {subData.name}\n{subData?.position ? `${subData.position} | ` : ''}{subData?.group ? subData.group.name : ''} \n | \n {activeTab === 0 && (\n <>\n {item.sent_at && displayDate(item.sent_at, 'DD MMM YYYY @ HH:mm')} | \n {/*{sentStatus[item?.received]?.name} | */}\n \n )}\n
\n
\n \n
\n
\n )\n}\n\nexport default connect(mapStateToProps)(BroadcastQuotaComponent)\n","import React, { useState } from 'react'\nimport { Alert } from 'react-bootstrap'\nimport { Close, LangReceiver, LangSend, LangSendMessageSuccess } from '../../constant/languange'\nimport { axiosCompany, loadPersonnelOptions, SpinnerButton } from '../../helpers/Common'\nimport { AsyncSelectInput } from '../../helpers/Input'\n\nfunction BroadcastTestSendComponent ({ id, onClose, ...props }) {\n const [errors, setError] = useState({ fields: {}, message: '' })\n const [control, setControl] = useState({ showSuccessAlert: false, showLoad: false })\n const [data, setData] = useState({ personnel: null, personnel_id: '' })\n\n const postBroadcastTestService = () => {\n setControl(control => ({ ...control, showLoad: true }))\n axiosCompany().post(`broadcasts/${id}/test`, data).then(() => {\n setControl(control => ({ ...control, showLoad: false, showSuccessAlert: true }))\n setError({ fields: [], message: '' })\n }).catch(e => {\n setError(error => {\n error.fields = e.response.data.errors ? e.response.data.errors : { 0: [e.response.statusText] }\n error.message = e.response.data.message ? e.response.data.message : ''\n return { ...error }\n })\n setControl({ ...control, showLoad: false })\n })\n }\n\n const handleSubmit = () => {\n postBroadcastTestService()\n }\n\n return (\n \n \n
\n {/* \n
\n \n {broadcastQuotaPrice.map((item, i) => (\n
\n { handleSelect(i, item) }} key={i} className='col-12 col-sm-6 col-lg-4 pb-3'>\n
\n ))}\n \n
\n \n
\n {item.label}
\nRp{toRupiah(item.price)}
\n\n \n
\n \n { handleInput(e) }} value={data.quota}>\n {\n broadcastQuotaPrice.map((item, i) => ())\n }\n \n {errors.fields.quota ? (
\n {errors.fields.quota[0]}
) : (null)}\n\n \n
*/}\n \n
\n {toRupiah(data.price)}
\n \n \n
\n \n
\n
\n {toRupiah(data.total)}
\n \n
\n
\n \n {/* {control.showSuccessAlert && {LangSuccessBuyQuota} } */}\n \n
\n
\n \n
\n
\n
\n )\n}\n\nexport default BroadcastTestSendComponent\n","import React from 'react'\nimport { LangMessage, LangNotificationMessage, LangTitle } from '../../constant/languange'\n// import { ContentState, EditorState } from 'draft-js'\n// import htmlToDraft from 'html-to-draftjs'\nimport ReactHtmlParser from 'react-html-parser'\n\nfunction BroadcastPreviewComponent ({ data, ...props }) {\n // const parseToDraft = (content) => {\n // const contentBlock = htmlToDraft(content)\n // if (contentBlock) {\n // return ContentState.createFromBlockArray(contentBlock.contentBlocks)\n // }\n // return []\n // }\n\n // const htmlToText = (content) => {\n // const text = EditorState.createWithContent(parseToDraft(content)).getCurrentContent()\n // return text\n // }\n\n return (\n <>\n \n \n
\n \n setData(data => ({ ...data, personnel_id: item?.value ? item?.value : '', personnel: item }))}\n />\n {errors.fields.personnel_id ? (
\n {errors.fields.personnel_id[0]}
) : (null)}\n\n
\n
\n \n {control.showSuccessAlert && {LangSendMessageSuccess} }\n {(errors.message !== '') && {errors.message} }\n \n \n
\n \n
\n \n
\n {LangTitle}
\n\n
\n \n \n
\n \n {data.message_title}\n
\n \n \n
\n \n {data.message_title_en || ''}\n
\n \n
\n \n
\n {LangNotificationMessage}
\n\n
\n \n \n
\n \n {data.message_content_notif}\n
\n \n \n
\n \n {data.message_content_notif_en || ''}\n
\n \n
\n \n )\n}\n\nexport default BroadcastPreviewComponent\n","import { faEllipsisH, faPaperPlane, faPause, faPen, faPlus, faPlusSquare, faSearch, faShare, faSync, faTimes } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport React, { useEffect, useState, useRef } from 'react'\nimport ReactTooltip from 'react-tooltip'\nimport { categoryReciver, statusBroadcast } from '../../constant/BroadcastConstant'\nimport { Action, Cancel, ChangeHistories, CreatedAt, Delete, Edit, EditData, LangBroadcastInfo, LangBroadcastReceiver, LangCancelConfirmation, LangCopy, LangCreator, LangDeleteSuccess, LangNewBroadcast, LangNoReceiver, LangOrderAddQuotaBroadcast, LangOtherReceiver, LangOutOfQuota, LangOutOfQuotaBroadcastMessage, LangPause, LangPaymentProcess, LangQuota, LangReceiver, LangSend, LangTestSend, LangTitle, LangViewContent, No, Search, Yes } from '../../constant/languange'\nimport { SpinnerButton, SpinnerLoadFirst } from '../../helpers/Spinner'\nimport Breadcrumbs from '../../layout/breadcrumb'\nimport BroadcastFormComponent from './BroadcastFormComponent'\nimport { axiosCompany, checkAuthorization, displayDate, loadDivisionOptions, loadPersonnelOptions, mapStateToProps, PaginationDiv, ShowImage, toRupiah } from '../../helpers/Common'\nimport { ModalApp, Form, AsyncSelectInput, ModalAction } from '../../helpers/Input'\nimport { Alert, Collapse } from 'react-bootstrap'\nimport ModalDelete from '../../helpers/Modal'\nimport BroadcastReceiverComponent from './BroadcastReceiverComponent'\nimport { connect } from 'react-redux'\nimport BroadcastQuotaComponent from './BroadcastQuotaComponent'\nimport { PopoverBody, PopoverHeader, UncontrolledPopover } from 'reactstrap'\nimport BroadcastTestSendComponent from './BroadcastTestSendComponent'\nimport BroadcastPreviewComponent from './BroadcastPreviewComponent'\nimport OrderSummaryComponent from '../common/OrderSummaryComponent'\nimport ModalAdminActivityLogsComponent from '../admin/ModalAdminActivityLogsComponent'\n\nfunction BroadcastComponent ({ redux, ...props }) {\n const [control, setControl] = useState({ showLoad: false, showForm: false, showModalDelete: false, showModalCancel: false, showModalReciver: false, showModalQuota: false, showModalTestSend: false, showModalPreview: false, showModalActivity: false })\n const [orderSummary, setOrderSummary] = useState({ showModal: false, data: {} })\n const [editData, setEditData] = useState(null)\n const [currentData, setCurrentData] = useState(null)\n const [status, setStatus] = useState({ value: '', id: '', index: '', error: '', showModal: false })\n const [data, setData] = useState({\n data: [],\n meta: {\n total: 0\n },\n stats: { canceled: 0, done: 0, paused: 0, quota_runs_out: 0, sending: 0, setup: 0 },\n error: {}\n })\n // console.log(data)\n const [filter, setFilter] = useState({\n keyword: '',\n page: 1,\n target: null,\n target_id: '',\n target_type: '',\n status: ''\n })\n const statusInterval = useRef(null)\n const initAlertData = { code: '', variant: '', message: '', show: false }\n\n useEffect(() => {\n getBroadcastsService()\n // eslint-disable-next-line\n }, [])\n\n // fetch broadcast api each minute if list of data contain 'sending' status\n useEffect(() => {\n if (checkStatus('sending')) {\n statusInterval.current = setInterval(() => {\n getBroadcastsService()\n }, 60000)\n } else {\n clearInterval(statusInterval.current)\n }\n return () => {\n clearInterval(statusInterval.current)\n }\n // eslint-disable-next-line\n }, [data.data])\n\n const getBroadcastsService = () => {\n // filtering spesific group or personnel\n if (filter.target_id !== '') filter.target_id.toString().split('')\n\n setControl(control => ({ ...control, showLoad: true }))\n axiosCompany().get('broadcasts', { params: filter }).then((ress) => {\n setData(data => {\n data = ress.data\n data.data = data.data.map(item => ({ ...item, load: false, alert: initAlertData }))\n return { ...data }\n })\n setControl(control => ({ ...control, showLoad: false, showForm: false }))\n }).catch(e => {\n setData(currData => ({ ...currData, error: e.response.data }))\n setControl(control => ({ ...control, showLoad: false }))\n })\n\n window.scrollTo(0, 0)\n }\n\n const deleteBroadcastService = () => {\n setControl({ ...control, showLoad: true })\n axiosCompany().delete(`broadcasts/${currentData.id}`).then(() => {\n getBroadcastsService()\n setControl({ ...control, showLoad: false, onSubmitDeleteResponse: { success: true } })\n setTimeout(() => {\n setControl({ ...control, showModalDelete: false, onSubmitDeleteResponse: {} })\n }, 1000)\n }).catch(e => {\n setControl(currControl => ({ ...currControl, showLoad: false, onSubmitDeleteResponse: e.response.data }))\n })\n }\n\n const statusBroadcastService = () => {\n setData(data => {\n data.data[status.index].load = true\n return { ...data }\n })\n axiosCompany().put(`broadcasts/${status.id}/status`, { status: status.value }).then(() => {\n getBroadcastsService()\n setData(data => {\n data.data[status.index].load = false\n return { ...data }\n })\n setControl({ ...control, showModalCancel: false })\n }).catch(e => {\n setData(data => {\n data.data[status.index].load = false\n data.data[status.index].alert = e.response.status === 404 ? { code: e.response.status, variant: 'info', message: 'Sepertinya ada perubahan pada data silakan muat ulang untuk mendapatkan data terkini', show: true } : { ...initAlertData, variant: 'danger', message: e.response.data.message, show: true }\n return { ...data }\n })\n })\n }\n\n const copyBroadcastService = (currentData, index) => {\n setData(data => {\n data.data[index].load = true\n return { ...data }\n })\n axiosCompany().post('broadcasts/copy', { broadcast_id: currentData.id }).then(() => {\n getBroadcastsService()\n setData(data => {\n data.data[index].load = false\n return { ...data }\n })\n }).catch(e => {\n setData(data => {\n data.data[index].load = false\n data.data[index].alert = { ...initAlertData, variant: 'danger', message: e.response.data.message, show: true }\n return { ...data }\n })\n })\n }\n\n const checkStatus = (status) => {\n const result = data.data.filter(item => item.status === status)\n return result.length > 0\n }\n\n const handleStatusChange = (value, id, index) => {\n if (value === 'canceled') {\n setStatus({ ...status, id: id, value: value, index: index })\n setControl({ ...control, showModalCancel: true })\n } else {\n status.value = value\n status.id = id\n status.index = index\n statusBroadcastService()\n }\n }\n\n const handlePreview = (data) => {\n setCurrentData({ ...data })\n setControl(control => ({ ...control, showModalPreview: true }))\n }\n\n const handleTestSend = (data) => {\n setCurrentData({ ...data })\n setControl(control => ({ ...control, showModalTestSend: true }))\n }\n\n const handleDelete = (data) => {\n setCurrentData({ ...data })\n setControl({ ...control, showModalDelete: true })\n }\n\n const handleKeydown = (e) => {\n if (e.key === 'Enter') {\n filter.page = 1\n getBroadcastsService()\n }\n }\n\n const handleStatusFilter = (status) => {\n filter.page = 1\n filter.status = status\n getBroadcastsService()\n }\n\n const handlePage = (page) => {\n filter.page = page\n getBroadcastsService()\n }\n\n const handleSearch = () => {\n filter.page = 1\n getBroadcastsService()\n }\n\n const handleForm = (data = null) => {\n data ? setEditData({ ...data }) : setEditData(data)\n setControl({ ...control, showForm: true })\n window.scrollTo({ top: 0, behavior: 'smooth' })\n }\n\n const handleAlertTable = (index) => {\n setData(data => {\n data.data[index].alert.show = false\n return { ...data }\n })\n }\n\n const handleModalReciver = (data) => {\n setControl({ ...control, showModalReciver: true })\n setCurrentData({ ...data })\n }\n\n return (\n \n
\n {LangMessage}
\n\n
\n \n
\n \n \n
\n \n {data.message_content ? ReactHtmlParser(data.message_content) : ''}\n
\n \n
\n \n \n
\n \n {data.message_content_en ? ReactHtmlParser(data.message_content_en) : ''}\n
\n \n setControl({ ...control, showModalActivity: false })}\n body={ setControl({ ...control, showModalPreview: false })}\n body={ setControl({ ...control, showModalTestSend: false })}\n body={ setControl({ ...control, showModalTestSend: false })} />}\n />\n )}\n\n {(control.showModalQuota) && (\n setControl({ ...control, showModalQuota: false })}\n body={\n {\n setControl({ ...control, showModalQuota: false })\n setOrderSummary(order => ({ data: summary, showModal: true }))\n }}\n />\n }\n />\n )}\n\n {(orderSummary.showModal) && (\n setOrderSummary(order => ({ ...order, showModal: false }))}\n body={\n setOrderSummary(order => ({ ...order, showModal: false }))}\n />\n }\n />\n )}\n\n setControl({ ...control, showModalCancel: false })}\n onHide={() => setControl({ ...control, showModalCancel: false })}\n body={\n <>\n \n \n \n }\n />\n\n setControl({ ...control, showModalDelete: false, onSubmitDeleteResponse: {} })}\n closeButton={() => setControl({ ...control, showModalDelete: false, onSubmitDeleteResponse: {} })}\n btn={\n <>\n {control.onSubmitDeleteResponse?.message && setControl({ ...control, showModalReciver: false })}\n body={
\n )\n}\n\nexport default connect(mapStateToProps)(BroadcastComponent)\n","import React from 'react'\nimport BroadcastComponent from '../components/broadcast/BroadcastComponent'\n\nfunction Broadcast () {\n return (\n <>\n \n
\n\n {(control.showModalActivity) && (\n \n
\n \n \n \n
\n \n
\n \n
\n {editData ? EditData : LangNewBroadcast}
\n\n { setControl(control => ({ ...control, showForm: false })) }} />\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n { setFilter({ ...filter, target_type: e.target.value, target: null, target_id: '' }) }}>\n \n {\n categoryReciver.map((item, i) => ())\n }\n \n
\n {\n filter.target_type === 'groups' && (\n \n setFilter(filter => ({ ...filter, target_id: data?.value ? data?.value : '', target: data }))}\n />\n
\n )\n }\n {\n filter.target_type === 'personnels' && (\n \n setFilter(filter => ({ ...filter, target_id: data?.value ? data?.value : '', target: data }))}\n />\n
\n )\n }\n \n
\n \n { setFilter({ ...filter, keyword: e.target.value }) }} style={{ maxWidth: 250 }} />\n \n
\n \n {(redux.profile.supervisor_groups)\n ? (\n
\n \n {(redux.broadcastQuota > 0)\n ? (\n \n )\n : null}\n
\n )\n : (\n \n \n
\n \n {checkAuthorization(redux, 'broadcast.create') && (\n \n )}\n {!redux.broadcastQuota > 0 && (\n \n \n {LangOutOfQuota}\n \n \n \n \n )}\n\n
\n )}\n \n {LangOutOfQuotaBroadcastMessage}\n
\n\n {!redux.isTrial && checkAuthorization(redux, 'broadcast.buy-quota') && (\n \n )}\n {checkAuthorization(redux, 'broadcast.index') && (\n \n )}\n
\n \n
\n \n {\n Object.keys(statusBroadcast).map((key, i) => (\n \n ))\n }\n
\n \n {LangBroadcastInfo}\n \n {control.showLoad\n ? SpinnerLoadFirst\n : (\n \n \n \n
\n
\n )}\n | {LangTitle} | \n{LangCreator} | \n{LangReceiver} | \nStatus | \n{Action} | \n
|---|---|---|---|---|
| {item.message_title} | \n\n {item.created_by && (\n <>\n \n \n \n \n {item.created_by.name}\n{displayDate(item.created_at, 'DD MMM YYYY')} \n | \n \n {categoryReciver.filter(type => type.value === item.target_type)[0].label}\n\n \n
| \n \n {\n item.load\n ? {SpinnerButton} \n : (\n <>\n {statusBroadcast[item.status].name}\n{displayDate(item.created_at, 'DD MMM YYYY')} \n \n )\n }\n | \n \n {item.load\n ? {SpinnerButton} \n : (\n <>\n {/* Hide action set when status is 'done' */}\n {item.status !== 'done' && (\n <>\n {item.status === 'setup'\n ? (\n <>\n {/* Action set when status is 'setup' */}\n {checkAuthorization(redux, 'broadcast.update') && (\n { handleForm(item) }}>\n {item.status === 'setup'\n ? (\n <>\n {/* Action set when status is 'setup' */}\n {checkAuthorization(redux, 'broadcast.update') && (\n { copyBroadcastService(item, i) }}>{LangCopy}\n )}\n {checkAuthorization(redux, 'broadcast.update') && (\n { handleStatusChange('canceled', item.id, i) }}>{Cancel}\n )}\n {checkAuthorization(redux, 'broadcast.delete') && (\n { handleDelete(item) }}>{Delete}\n )}\n \n )\n : (\n <>\n {/* Action set when status except 'setup' */}\n {(item.status === 'done') && { handlePreview(item) }}>{LangViewContent}}\n {checkAuthorization(redux, 'broadcast.update') && (\n <>\n {(item.status === 'paused') && { handleTestSend(item) }}>{LangTestSend}}\n { copyBroadcastService(item, i) }}>{LangCopy}\n {item.status !== 'done' && { handleForm(item) }}>{Edit}}\n \n )}\n {checkAuthorization(redux, 'broadcast.delete') && (\n { handleDelete(item) }}>{Delete}\n )}\n \n )}\n {/* { history.push(toActivityLogs('Broadcast', item?.id)) }}>{ChangeHistories} */}\n { setControl({ ...control, showModalActivity: true }); setCurrentData(item) }}>{ChangeHistories}\n | \n
| \n | \n
\n
\n {data?.error?.message}
}\n {control.onSubmitDeleteResponse?.message}
}\n {control.onSubmitDeleteResponse?.success && {LangDeleteSuccess}
}\n {(!control.onSubmitDeleteResponse?.message && !control.onSubmitDeleteResponse?.success) && (\n <>\n \n \n \n )}\n \n }\n />\n {(control.showModalReciver) && (\n \n
\n\n {control.showModal === 'leave-transaction-history' && (\n \n
\n \n
\n \n
\n \n
\n\n {control.showLoad\n ? SpinnerLoadFirst\n : (\n \n
\n \n
\n\n \n
\n \n
\n {LangPayrollDateRangeInfo}
) : null}\n \n \n
\n \n
\n \n { setFilter({ ...filter, keyword: e.target.value }) }} style={{ maxWidth: 250 }} />\n \n
\n \n
\n \n {!redux.profile.supervisor_groups && (\n <>\n \n {checkAuthorization(redux, 'employee.export') && (\n \n )}\n \n )}\n {/* add other right menu here */}\n
\n \n
\n )}\n\n \n
\n {control.errors.message}
}\n \n \n \n
\n
)}\n\n {(control.showModal === 'view-file') && (\n | {LangRequestDate} | \n{LangReqAmount} (Rp) | \n{LangApproveAmount} (Rp) | \n{LangDescription} | \n{LangExpenses} | \n{LangFiles} | \n{LangApprovedAt} | \n
|---|---|---|---|---|---|---|
| \n {displayDate(item.request_date, 'DD MMM YYYY')} \n {displayDate(item.request_date, '@ HH:mm')}\n | \n {toRupiah(item.request_amount)} | \n{toRupiah(item.approval_amount ?? '')} | \n{item.description} | \n\n
| \n \n
| \n \n {item.status === 'pending' && (\n {LangPending} \n )}\n {item.status === 'approved' && (\n <>\n {displayDate(item.approved_at, 'DD MMM YYYY')}\n {displayDate(item.approved_at, '@ HH:mm')}\n \n )}\n {item.status === 'rejected' && (\n <>\n {LangLeaveRejected} \n {displayDate(item.rejected_at, 'DD MMM YYYY')} \n {displayDate(item.rejected_at, '@ HH:mm')}\n \n )}\n | \n
\n
\n \n \n
\n \n
\n \n { handleGroupChange(data) }}\n />\n
\n \n
\n
\n \n )\n}\n\nexport default connect(mapStateToProps)(ReimbursementExportEmployeeComponent)\n","import React, { useState } from 'react'\nimport { connect } from 'react-redux'\nimport { Close, LangProcess, LangRequestSuccess, SelectDivision } from '../../constant/languange'\nimport { axiosCompany, loadDivisionOptions, mapStateToProps } from '../../helpers/Common'\nimport { AsyncSelectInput } from '../../helpers/Input'\nimport { SpinnerButton } from '../../helpers/Spinner'\nimport { useParams } from 'react-router-dom'\n\nconst ReimbursementImportFormatEmployeeComponent = ({ redux, groupId, handleClose }) => {\n const params = useParams()\n // state\n const [form, setForm] = useState({ grub_id: groupId })\n const [control, setControl] = useState({ onSubmit: false })\n const [responseData, setResponseData] = useState({})\n\n const handleSubmit = (e) => {\n setControl(control => ({ ...control, onSubmit: true }))\n axiosCompany().post(`/reimbursements/${params.id}/format-import-excel`, form, { responseType: 'blob' })\n .then(res => {\n /**\n * pengaturan nama file\n */\n let namePrefix = ''\n if (form.group_id) {\n const group = redux.groups.find((item) => +item.id === +form.group_id)\n namePrefix += `-${group.name}`\n }\n\n const url = window.URL.createObjectURL(new window.Blob([res.data]))\n const link = document.createElement('a')\n link.href = url\n link.setAttribute('download', `claim-import-format-employees${namePrefix}.xlsx`)\n document.body.appendChild(link)\n link.click()\n\n setResponseData(currResponseData => ({ success: true }))\n setControl(control => ({ ...control, onSubmit: false }))\n })\n .catch(err => {\n setResponseData(currResponseData => err.response.data)\n })\n }\n\n const handleGroupChange = (payload) => {\n setForm(currForm => ({ ...currForm, group_id: payload?.value ?? '', target: payload }))\n }\n\n return (\n <>\n \n {responseData.message && }\n {responseData.success && }\n\n \n \n
\n {responseData.message}
{LangRequestSuccess}
\n \n
\n \n
\n \n { handleGroupChange(data) }}\n />\n
\n \n
\n
\n \n )\n}\n\nexport default connect(mapStateToProps)(ReimbursementImportFormatEmployeeComponent)\n","import React, { useState } from 'react'\nimport {\n connect,\n mapStateToProps,\n SpinnerButton,\n axiosCompany,\n objectToFormData\n} from '../../helpers/Common'\nimport {\n LangProcess,\n LangImportant,\n LangChooseFile,\n LangMaxSize,\n LangImportCancel,\n LangImportDone,\n LangImportShiftHelp4,\n LangImportShiftHelp5,\n LangImportShiftHelp6,\n LangImportClaimEmployeeHelp3\n} from '../../constant/languange'\nimport { useParams } from 'react-router-dom'\n\nconst ReimbursementImportEmployeeComponent = ({ redux, handleClose, handleDownloadFormat, onAfterImport }) => {\n const params = useParams()\n // state\n const [form, setForm] = useState({ file: '' })\n const [control, setControl] = useState({ onSubmit: false })\n const [responseData, setResponseData] = useState({})\n\n // handler\n const handleChangeFile = (e) => {\n if (e.target.files[0]) {\n setForm(currForm => ({ ...currForm, file: e.target.files[0] }))\n }\n }\n\n const handleSubmit = (e) => {\n e.preventDefault()\n\n setControl(currControl => ({ ...currControl, onSubmit: true }))\n\n const payload = objectToFormData(form)\n axiosCompany().post(`/reimbursements/${params.id}/import-excel`, payload)\n .then(res => {\n setResponseData(currResponseData => res.data)\n setControl(control => ({ ...control, onSubmit: false }))\n onAfterImport()\n }).catch(err => {\n setResponseData(currResponseData => err.response.data)\n setControl(control => ({ ...control, onSubmit: false }))\n })\n }\n\n return (\n \n {responseData.message && }\n {responseData.success && }\n\n \n \n
\n {responseData.message}
{LangRequestSuccess}
\n
\n\n )\n}\n\nexport default connect(mapStateToProps)(ReimbursementImportEmployeeComponent)\n","import { useState, useEffect } from 'react'\nimport { LangAction, LangDelete, LangExpiredIn, LangName, Edit, LangAdd, LangAssignEmployee, LangBalance, LangClaimHistories, SelectDivision, Search, LangImportExcel, LangExportExcel, LangYes, LangNo, LangImportExcelClaimEmployee, LangEmployeesApplied, LangClaimType, LangSetting, LangClaim } from '../../constant/languange'\nimport { PaginationDiv, SpinnerButton, SpinnerLoadFirst, axiosCompany, connect, cookies, loadDivisionOptions, mapDispatchToProps, mapStateToProps, toRupiah } from '../../helpers/Common'\n// import ReimbursementBreadcrumbs from '../../layout/breadcrumb/reimbursement'\nimport BreadcrumbsMenu from '../../layout/breadcrumb/breadcrumbMenu'\nimport { faFileDownload, faFileUpload, faHistory, faPencilAlt, faSearch, faTrash, faUsers } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport ReactTooltip from 'react-tooltip'\nimport { AsyncSelectInput, ModalApp } from '../../helpers/Input'\nimport ReimbursementClaimHistoriesComponent from './ReimbursementClaimHistoriesComponent'\nimport { useParams } from 'react-router-dom'\nimport PersonnelItemComponent from '../personnel/PersonnelItemComponent'\nimport ModalDelete from '../../helpers/Modal'\nimport ReimbursementAddEmployeeComponent from './ReimbursementAddEmployeeComponent'\nimport moment from 'moment'\nimport ReimbursementEditEmployeeComponent from './ReimbursementEditEmployeeComponent'\nimport ReimbursementExportEmployeeComponent from './ReimbursementExportEmployeeComponent'\nimport ReimbursementImportFormatEmployeeComponent from './ReimbursementImportFormatEmployeeComponent'\nimport ReimbursementImportEmployeeComponent from './ReimbursementImportEmployeeComponent'\n\nconst ReimbursementEmployeesComponent = ({ redux }) => {\n const params = useParams()\n // state\n const [control, setControl] = useState({ showModal: '', showLoad: false, onSubmitDelete: false })\n const [filter, setFilter] = useState({\n page: 1,\n group_id: '',\n keyword: ''\n })\n const [data, setData] = useState({})\n const [focusData, setFocusData] = useState({})\n const [reimbursementDetail, setReimbursementDetail] = useState({})\n\n // effect\n useEffect(() => {\n getListService()\n // eslint-disable-next-line\n }, [])\n\n // funtion\n const getListService = async() => {\n setControl(currControl => ({ ...currControl, showLoad: true }))\n await getReimbursementDetail()\n await axiosCompany().get(`/reimbursements/${params.id}/personnels`, { params: filter })\n .then((res) => {\n setData(curData => res.data)\n })\n .finally(() => {\n setControl(currControl => ({ ...currControl, showLoad: false }))\n })\n }\n\n const getReimbursementDetail = () => {\n axiosCompany().get(`/reimbursements/${params.id}`)\n .then((res) => {\n setReimbursementDetail(res.data)\n })\n }\n\n const openModal = (modal, data) => {\n setControl(control => ({ ...control, showModal: modal }))\n setFocusData(currFocusData => data)\n }\n\n // handler\n const handleDelete = () => {\n setControl(currControl => ({ ...currControl, onSubmitDelete: true }))\n axiosCompany().delete(`/reimbursements/${params.id}/personnels/${focusData.personnel_id}`)\n .then(res => {\n getListService()\n setControl(currControl => ({ ...currControl, onSubmitDelete: false, showModal: '' }))\n })\n .catch(err => {\n setControl(currControl => ({ ...currControl, onSubmitDelete: false }))\n })\n }\n\n const handlePage = (page) => {\n filter.page = page\n getListService()\n }\n\n const handleGroupChange = (payload) => {\n filter.page = 1\n filter.group_id = payload?.value ?? ''\n getListService()\n }\n\n const handleKeydown = (e) => {\n if (e.key === 'Enter') {\n filter.page = 1\n getListService()\n }\n }\n\n const handleSearch = () => {\n filter.page = 1\n getListService()\n }\n\n return (\n \n {LangImportant.toUpperCase()}!\n
\n\n \n - \n
- {LangImportClaimEmployeeHelp3}. {LangImportShiftHelp4}. \n
- {LangImportShiftHelp5}. \n
- {LangImportShiftHelp6}. \n
\n { setControl(control => ({ ...control, showModal: '' })) }}\n body={\n { setControl(control => ({ ...control, showModal: 'import-format' })) }}\n handleClose={() => { setControl(control => ({ ...control, showModal: '' })) }}\n onAfterImport={() => { getListService() }}\n />\n }\n />\n )}\n\n {(control.showModal === 'import-format') && (\n { setControl(control => ({ ...control, showModal: 'import' })) }}\n body={\n { setControl(control => ({ ...control, showModal: 'import' })) }}\n />\n }\n />\n )}\n\n {(control.showModal === 'export') && (\n { setControl(control => ({ ...control, showModal: '' })) }}\n body={\n { setControl(control => ({ ...control, showModal: '' })) }}\n />\n }\n />\n )}\n\n {(control.showModal === 'claim-histories') && (\n { setControl(control => ({ ...control, showModal: '' })) }}\n body={\n { setControl(control => ({ ...control, showModal: '' })) }}\n />\n }\n />\n )}\n\n {(control.showModal === 'add') && (\n { setControl(control => ({ ...control, showModal: '' })) }}\n body={\n {\n setControl(control => ({ ...control, showModal: '' }))\n getListService()\n }}\n handleClose={() => { setControl(control => ({ ...control, showModal: '' })) }}\n assignedData={data.data.map(i => ({ label: i.personnel.name + ((i.personnel.group) ? ` (${i.personnel.group.name})` : ''), value: i.personnel.id }))}\n />\n }\n />\n )}\n\n {(control.showModal === 'edit') && (\n { setControl(control => ({ ...control, showModal: '' })) }}\n body={\n { getListService() }}\n handleClose={() => { setControl(control => ({ ...control, showModal: '' })) }}\n />\n }\n />\n )}\n\n setControl(control => ({ ...control, showModal: '' }))}\n closeButton={() => setControl(control => ({ ...control, showModal: '' }))}\n btn={\n <>\n \n \n \n }\n />\n
\n\n )\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ReimbursementEmployeesComponent)\n","import React, { lazy } from 'react'\nimport { Route } from 'react-router'\nimport ReimbursementEmployeesComponent from '../components/reimbursement/ReimbursementEmployeesComponent'\n\nconst ReimbursementRequestComponent = lazy(() => import('../components/reimbursement/ReimbursementRequestComponent'))\nconst ReimbursementSettingComponent = lazy(() => import('../components/reimbursement/ReimbursementSettingComponent'))\n\nconst PersonnelRoute = () => {\n return (\n <>\n \n {/* {[LangSetting, LangClaimType, LangEmployeesApplied]} \n :\n {[LangClaim, LangClaimType, LangEmployeesApplied]} \n }\n
\n\n \n
\n\n {(control.showModal === 'import') && (\n \n
\n \n
\n \n
\n \n
\n <>\n {control.showLoad\n ? SpinnerLoadFirst\n : (\n {LangClaimType}: {reimbursementDetail?.name}
\n\n
\n \n \n
\n \n { handleGroupChange(data) }}\n />\n
\n \n
\n \n { setFilter(currFilter => ({ ...currFilter, keyword: e.target.value })) }} />\n \n
\n \n \n \n
\n \n \n \n
\n
)}\n \n | {LangName} | \n{LangExpiredIn} | \n{LangBalance} (Rp) | \n{LangAction} | \n
|---|---|---|---|
| {item.expired_in ? moment(item.expired_in, 'YYYY-MM-DD').format('DD MMM YYYY') : 'Unlimited'} | \n{toRupiah(item.balance ?? '')} | \n\n { openModal('edit', item) }}> | \n
\n
\n \n
\n )\n } else {\n return <>\n }\n})\n","import React, { lazy } from 'react'\nimport { Route } from 'react-router'\n\nconst GroupComponent = lazy(() => import('../components/group/GroupComponent'))\nconst GroupLatePunsihmentComponent = lazy(() => import('../components/group/GroupLatePunishmentListComponent'))\n\nconst GroupRoute = () => {\n return (\n <>\n \n
\n \n
\n \n
\n \n \n {(isLangEN) ? (\n
\n The number of employees you input exceeds the specified quota. Please remove the employee or contact the Kerjoo team for more information.
\n ) : (\nJumlah karyawan yang Anda input melebihi kuota yang ditentukan. Silakan hapus karyawan atau hubungi tim Kerjoo untuk informasi lebih lanjut.
\n )}\n\n
\n )\n}\n\nexport default Content\n","import React from 'react'\nimport { LangSteps11 } from '../../../constant/languange'\nimport Content from '../Content'\n\nconst First1 = (props) => {\n const data = {\n title: '',\n steps: [LangSteps11],\n button: 'Mulai Atur Divisi',\n nextStep: 2,\n skipTo: '/work/day',\n isDone: props.stats.groups_count\n // link: '/manage/group'\n }\n\n return \n
\n
\n \n 
\n {LangRosaFromKerjoo}\n
\n \n
\n
\n {props.data.title}
\n {props.data.steps.length === 1\n ? ({props.data.steps[0]}
)\n : (\n- \n {props.data.steps.map((step, i) =>
- {step} )}\n
\n
\n )}\n {/* */}\n \n `Step ${curr} ${LangOf} ${tot}`}\n showButtons\n nextButton={ closeTour()} currentStep={currentStep} paths={paths} />}\n getCurrentStep={(curr) => setCurrentStep(curr)}\n showNavigation={false}\n disableInteraction\n startAt={0}\n />\n
\n : ''\n }\n \n )\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TourProvider)\n","import React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst CustomModal = ({ content }) => {\n document.body.style.overflow = 'hidden'\n\n const modal = (\n \n
\n )\n\n return ReactDOM.createPortal(modal, document.getElementById('modal-custom-hook'))\n}\n\nexport default CustomModal\n","export default __webpack_public_path__ + \"static/media/welcome.8462d6b2.png\";","export default __webpack_public_path__ + \"static/media/hand.4d8fbe91.png\";","export default __webpack_public_path__ + \"static/media/clap.ceba0529.png\";","export default __webpack_public_path__ + \"static/media/finish.d594c425.png\";","import { LangTitleTour1, LangTitleTour2, LangTitleTour3, LangTitleTour4, LangTitleTour5, LangTitleTour6 } from '../constant/languange'\n\nconst tasklist = [\n {\n codeName: 'groups_count',\n name: LangTitleTour1,\n type: 'todo',\n link: '/manage/group'\n },\n {\n codeName: 'work_and_shift_patterns_count',\n name: LangTitleTour2,\n type: 'muted',\n link: '/work/day'\n },\n {\n codeName: 'personnels_count',\n name: LangTitleTour3,\n type: 'muted',\n link: '/personnels'\n },\n {\n codeName: 'work_and_shift_times_count',\n name: LangTitleTour4,\n type: 'muted',\n link: '/personnel/work/time'\n },\n {\n codeName: 'spots_count',\n name: LangTitleTour5,\n type: 'muted',\n link: '/attendance/spot'\n },\n {\n codeName: 'is_complete_profile',\n name: LangTitleTour6,\n type: 'muted',\n link: '/company/setting'\n }\n]\n\nexport default tasklist\n","import React from 'react'\nimport { useHistory } from 'react-router-dom'\n\nimport check from '../../assets/images/tour-guide/check.png'\nimport arrow from '../../assets/images/tour-guide/arrow.png'\nimport { connect, mapStateToProps, mapDispatchToProps, cookies } from '../../helpers/Common'\n\nconst TaskItem = (props) => {\n const history = useHistory()\n\n const doTask = () => {\n props.setState({ isTourOpen: true, openIndicator: false, tourName: props.task.codeName })\n cookies.set(`showAlertProgress-${props.redux.profile.id}`, 1)\n\n history.push(props.task.link)\n\n // cookies.set(`openTourIndicator-${props.redux.profile.id}`, 0)\n }\n\n if (props.task.type === 'done') {\n return (\n \n
\n {content}
\n {props.task.name}
\n{props.task.name}
\n{props.task.name}
\n- \n {stats && taskList ? taskList.map((task, i) =>
Loading...
\n\n \n\n {page === 'welcome' && (\n
\n )\n\n return (\n <>\n {redux.openIndicator && !redux.profile.supervisor_groups ? \n 
\n
\n )}\n\n {page === 'task' && (\n \n
\n {LangWelcomeToAdminPanel}
{LangFinishTheSteps2}
\n{LangFinishTheSteps4}
\n\n \n \n
\n \n
\n )}\n\n {page === 'finish' && (\n \n
\n\n {/* progress bar */}\n {LangTasklistTitleTR}
\n\n
\n\n {Math.ceil(progress / 6 * 100)}%
\n\n \n
\n {LangFinishTheSteps3}
\n\n {/* task list */}\n\n 
\n \n
\n )}\n {LangBasicDataComplete}
\n
\n {LangEnjoyKerjoo}
\n\n
\n )\n }\n}\n\nexport default connect(mapStateToProps)(ClientImportComponent)\n","import React from 'react'\nimport { AsyncSelectInput } from '../../helpers/Input'\nimport { connect, mapStateToProps, SpinnerButton, axiosCompany, loadPersonnelOptions } from '../../helpers/Common'\nimport { Division, Close, LangSpesificEmployee, Process, LangImportShiftHelp1 } from '../../constant/languange'\n\nclass ClientImportFormatComponent extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n personnels: [],\n groupId: '',\n errors: {},\n onSubmit: false,\n errorMessage: ''\n }\n }\n\n handleSubmit (e) {\n e.preventDefault()\n\n this.setState({ onSubmit: true, errors: {}, errorMessage: '' })\n\n const formData = new window.FormData()\n if (this.state.groupId) {\n formData.append('group_id', this.state.groupId)\n } else if (this.state.personnels.length) {\n this.state.personnels.forEach((item) => {\n formData.append('personnel_id[]', item.value)\n })\n }\n\n axiosCompany().post('client-visit-clients/format-import-excel', formData, { responseType: 'blob' }).then((result) => {\n const url = window.URL.createObjectURL(new window.Blob([result.data]))\n const link = document.createElement('a')\n link.href = url\n link.setAttribute('download', 'kerjoo-format-import-client.xlsx')\n document.body.appendChild(link)\n link.click()\n\n this.setState({\n onSubmit: false\n })\n }).catch((error) => {\n const reader = new window.FileReader()\n\n reader.addEventListener('loadend', (e) => {\n const text = e.srcElement.result\n const data = JSON.parse(text)\n\n if (data.errors) {\n this.setState({ errors: data.errors })\n }\n\n if (data.message) {\n this.setState({ errorMessage: data.message })\n }\n\n this.setState({ onSubmit: false })\n })\n\n reader.readAsText(error.response.data)\n })\n }\n\n render () {\n const s = this.state\n const p = this.props\n\n return (\n <>\n \n {LangImportant.toUpperCase()}!\n
\n\n \n - \n
- {LangImportClientHelp3}. this.handleDownloadFormat(e)}>{LangImportShiftHelp4}. \n
- {LangImportShiftHelp5}. \n
- {LangImportShiftHelp6}. \n
\n {LangImportShiftHelp1}\n
\n\n \n \n )\n }\n}\n\nexport default connect(mapStateToProps)(ClientImportFormatComponent)\n","import React, { useState } from 'react'\nimport { Action, AdditionalField, AddOption, ChooseType, Close, LangAdd, LangDeleteExistingFields, LangDeleteExistingFieldsTips, LangNo, LangRequired, LangTipCheckboxField, LangTipComboboxField, LangYes, Options, Process, Type } from '../../constant/languange'\nimport { axiosCompany, connect, mapStateToProps, SpinnerButton } from '../../helpers/Common'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faChevronDown, faChevronUp, faQuestionCircle, faTimes, faTrashAlt } from '@fortawesome/free-solid-svg-icons'\nimport ReactTooltip from 'react-tooltip'\nimport { Success } from '../../helpers/Message'\nimport './ClientApplyAdditionalFieldsComponent.css'\n\nconst ClientApplyAdditionalFieldsComponent = (props) => {\n // state\n const [control, setControl] = useState({ onSubmit: false })\n const [form, setForm] = useState({\n additional_fields: [],\n delete_old_field: 0\n })\n const [responseData, setResponseData] = useState(null)\n\n // function\n const preapareData = () => {\n const newAdditionalFields = form.additional_fields.map((field) => {\n if (field.type === 'checkbox' || field.type === 'combobox') {\n const newOptions = field.options.map((opt, idx) => {\n opt.value = idx + 1\n return opt\n })\n\n field.options = newOptions\n\n return field\n }\n return field\n })\n\n setForm(currForm => ({ ...currForm, additional_fields: newAdditionalFields }))\n }\n\n // handler\n const handleSubmit = (e) => {\n e.preventDefault()\n\n setControl({ ...control, onSubmit: true })\n preapareData()\n const submitForm = {\n additional_fields: form.additional_fields,\n delete_old_field: form.delete_old_field,\n client_id: props.selectedClient\n }\n axiosCompany().post('client-visit-clients/additional-fields', submitForm)\n .then((res) => {\n setControl({ ...control, onSubmit: false })\n res.data.success = true\n setResponseData(res.data)\n props.handleUpdate()\n setTimeout(() => {\n props.handleClose()\n }, 1000)\n })\n .catch((err) => {\n setControl({ ...control, onSubmit: false })\n setResponseData(err.response.data)\n })\n }\n\n const handleChooseType = (e) => {\n e.preventDefault()\n\n // preapare init data\n const additionalFieldItem = {\n type: e.target.name,\n label: '',\n required: 0,\n show_on_form: 3,\n placeholder: ''\n }\n if (e.target.name === 'checkbox' || e.target.name === 'combobox') {\n additionalFieldItem.options = []\n }\n\n setForm({ ...form, additional_fields: [...form.additional_fields, additionalFieldItem] })\n }\n\n const handleAdditional = (e, name, index) => {\n // select the item\n const additionalField = [...form.additional_fields]\n const additionalFieldItem = additionalField[+index]\n\n // change the value\n if (name === 'required' || name === 'show_on_form') {\n additionalFieldItem[name] = +e.target.value\n } else {\n additionalFieldItem[name] = e.target.value\n }\n\n setForm({ ...form, additional_fields: additionalField })\n }\n\n const handleAddOption = (e, index) => {\n e.preventDefault()\n\n // select the item\n const additionalField = [...form.additional_fields]\n const additionalFieldItem = additionalField[+index]\n\n // add the fields\n const options = { label: '', value: '' }\n additionalFieldItem.options.push(options)\n\n setForm({ ...form, additional_fields: additionalField })\n }\n\n const handleChangeOptions = (e, name, index1, index2) => {\n // select the item\n const additionalField = [...form.additional_fields]\n const additionalFieldItem = additionalField[+index1]\n\n // select option row and change the value\n const options = additionalFieldItem.options\n options[+index2][name] = e.target.value\n\n setForm({ ...form, additional_fields: additionalField })\n }\n\n const handleDeleteAdditionalItem = (e, i) => {\n e.preventDefault()\n\n const additionalField = [...form.additional_fields]\n const filteredAdditionalField = additionalField.filter((item, idx) => idx !== i)\n\n setForm({ ...form, additional_fields: filteredAdditionalField })\n }\n\n const handleDeleteOptionItem = (e, i, j) => {\n e.preventDefault()\n\n const additionalField = [...form.additional_fields]\n const additionalFieldItem = additionalField[+i]\n const additionalFieldItemOptions = additionalFieldItem.options\n const filteredAdditionalFieldItemOptions = additionalFieldItemOptions.filter((item, idx) => idx !== j)\n additionalFieldItem.options = filteredAdditionalFieldItemOptions\n\n setForm({ ...form, additional_fields: additionalField })\n }\n\n const handleMoveItem = (e, dir, i) => {\n e.preventDefault()\n\n const additionalField = [...form.additional_fields]\n\n // remove the element from the array at the given index\n const fromIndex = i\n const element = additionalField.splice(fromIndex, 1)[0]\n\n // insert the element into the array at the given index\n const toIndex = dir === 'up' ? i - 1 : i + 1\n additionalField.splice(toIndex, 0, element)\n\n // return the updated array\n setForm({ ...form, additional_fields: additionalField })\n }\n\n const handleCheckbox = () => {\n setForm(currForm => ({ ...currForm, delete_old_field: !currForm.delete_old_field }))\n }\n\n return (\n \n )\n}\n\nexport default connect(mapStateToProps)(ClientApplyAdditionalFieldsComponent)\n","import { faInfoCircle, faSearch, faTrash, faPencilAlt, faHistory, faMapMarkerAlt, faFileDownload, faPlus, faFileUpload, faMagic } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport React, { useEffect, useState } from 'react'\nimport { connect } from 'react-redux'\nimport ReactTooltip from 'react-tooltip'\nimport { Action, AddClient, AdditionalField, Address, ChangeHistories, Delete, Edit, EditClient, LangAdd, LangApplyAdditionalFields, LangAvailableFeatureInfo, LangClient, LangClientVisit, LangClientVisitMustOnSpot, LangConfirm, LangDeletePermanentConfirm, LangExportAllClient, LangExportExcel, LangExportSelectedClient, LangExportSelectedClientCount, LangImportExcel, LangImportExcelClientFormat, LangNo, LangSelectClientFirst, LangVisitHistory, LangYes, Name, Search } from '../../constant/languange'\nimport { axiosCompany, capitalizeFirstLetter, checkAuthorization, lang, Link, mapStateToProps, PaginationDiv, SpinnerButton, SpinnerLoadFirst } from '../../helpers/Common'\nimport ModalConfirmComponent from '../common/ModalConfirmComponent'\nimport BreadcrumbsMenu from '../../layout/breadcrumb/breadcrumbMenu'\nimport ClientAddClientComponent from './ClientAddClientComponent'\nimport { ModalApp } from '../../helpers/Input'\nimport ClientEditClientComponent from './ClientEditClientComponent'\nimport ModalAdminActivityLogsComponent from '../admin/ModalAdminActivityLogsComponent'\nimport ClientImportComponent from './ClientImportComponent'\nimport ClientImportFormatComponent from './ClientImportFormatComponent'\nimport ClientApplyAdditionalFieldsComponent from './ClientApplyAdditionalFieldsComponent'\n\nfunction ClientComponent({ redux }) {\n const [control, setControl] = useState({ showLoad: false, showModal: '', onExportResponse: {} })\n const [filter, setFilter] = useState({\n page: 1,\n keyword: ''\n })\n const [dataResponse, setDataResponse] = useState({\n data: [],\n meta: {\n total: 0\n }\n })\n const [currentData, setCurrentData] = useState({})\n const [errors, setError] = useState({ fields: [], message: '' })\n const [selectedClient, setSelectedClient] = useState([])\n const [currentPageIds, setCurrentPageIds] = useState([])\n\n useEffect(() => {\n getListService()\n // eslint-disable-next-line\n }, [])\n\n const getListService = () => {\n setControl(control => ({ ...control, showLoad: true }))\n\n axiosCompany().get('/client-visit-clients', { params: filter })\n .then(res => {\n setDataResponse({ ...res.data })\n setCurrentPageIds(res.data.data.map(item => item.id).sort())\n setControl(control => ({ ...control, showLoad: false }))\n }).catch(e => {\n setDataResponse(e.response.data)\n setControl(control => ({ ...control, showLoad: false }))\n })\n }\n\n const deleteDataService = () => {\n setControl(control => ({ ...control, showLoad: true }))\n\n axiosCompany().delete(`client-visit-clients/${currentData.id}`)\n .then(() => {\n setControl(control => ({ ...control, showLoad: false, showModal: '' }))\n getListService()\n }).catch(e => {\n setError(error => {\n error.fields = e.response.data.errors ? e.response.data.errors : { 0: [e.response.statusText] }\n error.message = e.response.data.message ? e.response.data.message : ''\n return { ...error }\n })\n setControl(control => ({ ...control, showLoad: false }))\n })\n }\n\n const handleSearch = () => {\n filter.page = 1\n getListService()\n }\n\n const handleKeydown = (e) => {\n if (e.key === 'Enter') {\n filter.page = 1\n getListService()\n }\n }\n\n const handlePageChange = (page) => {\n filter.page = page\n getListService()\n }\n\n const handleModalAction = (payload, type = '') => {\n setCurrentData({ ...payload })\n setControl(control => ({ ...control, showModal: type }))\n }\n\n const handleExportExcel = (type) => {\n setControl(currControl => ({ ...currControl, onExport: true }))\n const submitFilter = {}\n if (type === 'selected') {\n submitFilter.id = selectedClient\n }\n axiosCompany().post(`/client-visit-clients/export-excel`, submitFilter, {\n responseType: 'blob'\n }).then((result) => {\n const url = window.URL.createObjectURL(new window.Blob([result.data]))\n const link = document.createElement('a')\n link.href = url\n link.setAttribute('download', `${type === 'selected' ? 'kerjoo-export-selected-clients.xlsx' : 'kerjoo-export-all-clients.xlsx'}`)\n document.body.appendChild(link)\n link.click()\n }).catch(async (err) => {\n let errorMsg = err.response.data\n if (\n err.request.responseType === 'blob' &&\n err.response.data instanceof Blob &&\n err.response.data.type &&\n err.response.data.type.toLowerCase().indexOf('json') !== -1\n ) {\n errorMsg = JSON.parse(await err.response.data.text())\n }\n setControl(currControl => ({ ...currControl, onExport: false, onExportResponse: errorMsg }))\n setTimeout(() => {\n setControl(currControl => ({ ...currControl, onExportResponse: {} }))\n }, 2000)\n }).finally(() => {\n setControl(currControl => ({ ...currControl, onExport: false }))\n })\n }\n\n const checkSelectedCurrentPage = () => {\n if (currentPageIds.every(v => selectedClient.includes(v))) {\n return true\n } else {\n return false\n }\n }\n\n const handleSelectAll = (e) => {\n if (selectedClient.some(a => currentPageIds.includes(a))) {\n setSelectedClient(data => {\n const newData = [...data]\n return newData.filter(item => !currentPageIds.includes(item))\n })\n } else {\n setSelectedClient(data => {\n const newData = [...data]\n const selectData = dataResponse.data?.map(item => item.id)\n newData.push(...selectData)\n const uniq = [...new Set(newData)]\n return uniq\n })\n }\n }\n\n const handleSelectOne = (payload) => {\n setSelectedClient(data => {\n const newData = [...data]\n if (data.indexOf(payload) !== -1) {\n newData.splice(data.indexOf(payload), 1)\n } else {\n newData.push(payload)\n }\n return newData\n })\n }\n\n return (\n \n {[LangClientVisit, LangClient]} \n setControl(control => ({ ...control, showModal: '' }))}\n body={\n setControl(control => ({ ...control, showModal: '' }))}\n handleDownloadFormat={() => setControl(control => ({ ...control, showModal: 'import-format' }))}\n handleUpdate={getListService}\n />\n }\n />\n )}\n\n {(control.showModal === 'import-format') && (\n setControl(control => ({ ...control, showModal: 'import' }))}\n body={\n setControl(control => ({ ...control, showModal: 'import' }))}\n groups={redux.groups}\n />\n }\n />\n )}\n\n {(control.showModal === 'activity-log') && (\n setControl(control => ({ ...control, showModal: '' }))}\n body={ setControl(control => ({ ...control, showModal: '' }))}\n body={\n setControl(control => ({ ...control, showModal: '' }))}\n handleUpdate={() => getListService()}\n selectedClient={selectedClient}\n />\n }\n />\n )}\n\n {(control.showModal === 'add-client') && (\n setControl(control => ({ ...control, showModal: '' }))}\n body={\n setControl(control => ({ ...control, showModal: '' }))}\n handleUpdate={() => getListService()}\n />\n }\n />\n )}\n\n {(control.showModal === 'edit-client') && (\n setControl(control => ({ ...control, showModal: '' }))}\n body={\n setControl(control => ({ ...control, showModal: '' }))}\n handleUpdate={() => getListService()}\n currentData={currentData}\n />\n }\n />\n )}\n\n {(control.showModal === 'delete') && (\n { setControl({ ...control, showModal: '' }); setError({ fields: [], message: '' }) }}\n body={\n deleteDataService()}\n onClose={() => { setControl({ ...control, showModal: '' }); setError({ fields: [], message: '' }) }}\n />\n }\n />\n )}\n
\n\n )\n}\n\nexport default connect(mapStateToProps)(ClientComponent)\n","import React from 'react'\nimport { AsyncSelectInput, InputTimePicker } from '../../helpers/Input'\nimport {\n connect,\n mapStateToProps,\n SpinnerButton,\n axiosCompany\n} from '../../helpers/Common'\nimport {\n Close,\n Process,\n LangClient,\n LangTimeStart,\n LangTimeEnd,\n LangAction,\n SelectClient,\n LangAdd,\n LangClientVisitMustOnSpot\n} from '../../constant/languange'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faTimes } from '@fortawesome/free-solid-svg-icons'\nimport { Success } from '../../helpers/Message'\n\nclass VisitScheduleSelectClientComponent extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n clients: [],\n groupId: '',\n errors: {},\n onSubmit: false,\n errorMessage: '',\n responseData: {}\n }\n }\n\n componentDidMount() {\n const clients = this.props.currentData.filter(item => item.client).map((item) => ({\n client: {\n label: item.client.name,\n value: item.client_id,\n data: item.client\n },\n id: item.client_id,\n start_time: item.start_time,\n end_time: item.end_time,\n client_visit_must_on_spot: item.client_visit_must_on_spot === 1\n }))\n if (clients.length === 0) {\n this.setState({\n clients: [{\n client: null,\n id: null,\n start_time: null,\n end_time: null\n }]\n })\n } else {\n this.setState({ clients: clients })\n }\n }\n\n handleSubmit(e) {\n e.preventDefault()\n\n this.setState({ onSubmit: true, errors: {}, errorMessage: '' })\n\n const data = {\n date: this.props.focusDate.format('YYYY-MM-DD'),\n // client_ids: this.state.clients.map(item => item.value),\n clients: this.state.clients.map(item => ({\n id: item.id ?? '',\n start_time: item.start_time ?? '',\n end_time: item.end_time ?? '',\n client_visit_must_on_spot: item.client_visit_must_on_spot ? +item.client_visit_must_on_spot : 0\n }))\n }\n\n axiosCompany().put(`client-visit-schedules/${this.props.focusPersonnelId}`, data)\n .then((res) => {\n this.setState({ onSubmit: false, responseData: res.data })\n this.props.onUpdate()\n setTimeout(() => {\n this.props.handleClose()\n }, 2000)\n }).catch((err) => {\n this.setState({ errorMessage: err.response.data.message, errors: err.response.data.errors, onSubmit: false })\n // this.setState({ onSubmit: false })\n })\n }\n\n loadClientOptions = (inputValue) => {\n return new Promise((resolve) => {\n axiosCompany()\n .get(`client-visit-clients?page=null&keyword=${inputValue}`)\n .then((result) => {\n resolve(result.data.map((item) => {\n const label = item.name\n\n return { label, value: item.id, data: item }\n }))\n })\n })\n }\n\n onInputClientChange = (payload, i) => {\n this.setState(currState => {\n let newState = JSON.parse(JSON.stringify(currState))\n newState.clients[i] = {\n ...newState.clients[i],\n client: payload ? {\n label: payload?.label ?? '',\n value: payload?.value ?? '',\n data: payload?.data ?? ''\n } : null,\n id: payload?.value ?? '',\n client_visit_must_on_spot: payload?.data.client_visit_must_on_spot\n }\n return newState\n })\n }\n\n onInputTimeChange = (payload, i, type) => {\n this.setState(currState => {\n let newState = JSON.parse(JSON.stringify(currState))\n newState.clients[i] = {\n ...newState.clients[i],\n [type]: payload\n }\n return newState\n })\n }\n\n handleAddClient = (e) => {\n e.preventDefault()\n this.setState(currState => {\n let newState = JSON.parse(JSON.stringify(currState))\n newState.clients.push({\n client: null,\n id: null,\n start_time: null,\n end_time: null\n })\n return newState\n })\n }\n\n handleDeleteClient = (e, i) => {\n e.preventDefault()\n this.setState(currState => {\n let newState = JSON.parse(JSON.stringify(currState))\n newState.clients.splice(i, 1)\n return newState\n })\n }\n\n render() {\n const s = this.state\n const p = this.props\n\n return (\n \n )\n }\n}\n\nexport default connect(mapStateToProps)(VisitScheduleSelectClientComponent)\n","import React from 'react'\nimport {\n connect,\n mapStateToProps,\n SpinnerButton,\n axiosCompany\n} from '../../helpers/Common'\nimport {\n LangProcess,\n LangImportant,\n LangChooseFile,\n LangMaxSize,\n LangImportCancel,\n LangImportDone,\n LangImportErrorMsg1,\n LangImportShiftHelp4,\n LangImportShiftHelp5,\n LangImportShiftHelp6,\n // LangImportShiftHelp7,\n LangImportClientVisitHelp3\n} from '../../constant/languange'\n\nclass VisitScheduleImportComponent extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n file: '',\n replaceExisting: 0,\n errors: {},\n onSubmit: false,\n errorMessage: ''\n }\n\n this.handleSubmit = this.handleSubmit.bind(this)\n this.handleChangeFile = this.handleChangeFile.bind(this)\n }\n\n handleDownloadFormat (e) {\n e.preventDefault()\n this.props.handleDownloadFormat()\n }\n\n handleSubmit (e) {\n e.preventDefault()\n\n this.setState({ onSubmit: true, errors: {}, importResult: null, errorMessage: '' })\n\n const formData = new window.FormData()\n formData.append('file', this.state.file)\n // formData.append('replace_existing', (this.state.replaceExisting) ? '1' : '0')\n\n axiosCompany()\n .post('client-visit-schedules/import-excel', formData)\n .then((result) => {\n this.setState({\n onSubmit: false,\n errorMessage: '',\n importResult: result.data\n }, () => {\n if (result.data.success) {\n this.props.handleUpdate()\n }\n })\n }).catch((error) => {\n if (error.response.data.errors) {\n this.setState({ errors: error.response.data.errors })\n } else {\n this.setState({ errors: { 0: [error.response.statusText] } })\n }\n\n if (error.response.data.message) {\n this.setState({ errorMessage: error.response.data.message })\n }\n\n this.setState({ onSubmit: false })\n })\n }\n\n handleChangeFile (e) {\n if (e.target.files[0]) {\n this.setState({ file: e.target.files[0] })\n }\n }\n\n render () {\n const s = this.state\n const p = this.props\n\n return (\n \n
\n\n {(control.showModal === 'import') && (\n \n
\n \n
\n \n
\n \n {(redux.isTrial)\n ? (\n
\n {control?.onExportResponse?.message && \n
\n )\n : null}\n\n \n
\n \n
\n \n { setFilter({ ...filter, keyword: e.target.value }) }} style={{ maxWidth: 230 }} />\n \n
\n \n {checkAuthorization(redux, 'client-visit.client.update') && (\n \n )}\n {checkAuthorization(redux, 'client-visit.client.create') && (\n \n )}\n {checkAuthorization(redux, 'client-visit.client.import') && (\n \n )}\n {checkAuthorization(redux, 'client-visit.client.export') && (\n
\n \n \n
\n )}\n \n \n \n \n
\n {control?.onExportResponse?.message}
}\n {\n control.showLoad\n ? SpinnerLoadFirst\n : (\n \n \n \n
\n
\n )\n }\n | \n {(checkAuthorization(redux, 'client-visit.client.export') || checkAuthorization(redux, 'client-visit.client.update')) && (\n \n \n \n )}\n | \n {Name} | \n{Address} | \n{AdditionalField} | \nRadius (Meter) | \n{LangClientVisitMustOnSpot} | \n{Action} | \n
|---|---|---|---|---|---|---|
| (checkAuthorization(redux, 'client-visit.client.export') || checkAuthorization(redux, 'client-visit.client.update')) && handleSelectOne(item.id)}>\n {(checkAuthorization(redux, 'client-visit.client.export') || checkAuthorization(redux, 'client-visit.client.update')) && (\n \n \n \n )}\n | \n {item.name} | \n\n {\n address.map((addr, idx) => (\n {addr} \n ))\n }\n | \n {item.additional_fields_count} Field | \n{item.radius} | \n{item.client_visit_must_on_spot ? LangYes : LangNo} | \n\n {checkAuthorization(redux, 'client-visit.client.update') && (\n { e.preventDefault(); handleModalAction(item, 'edit-client') }}> | \n
\n
\n {dataResponse.message}
}\n \n
\n )\n }\n}\n\nexport default connect(mapStateToProps)(VisitScheduleImportComponent)\n","export default __webpack_public_path__ + \"static/media/import-client-visit-help.60fa48e3.png\";","import React from 'react'\nimport { AsyncSelectInput } from '../../helpers/Input'\nimport {\n connect,\n mapStateToProps,\n SpinnerButton,\n axiosCompany,\n loadPersonnelClientVisitOptions\n} from '../../helpers/Common'\nimport {\n Division,\n Close,\n LangSpesificEmployee,\n Process,\n LangImportShiftHelp2,\n LangImportShiftHelp1,\n LangImportClientVisitHelp8\n} from '../../constant/languange'\nimport ImageHelp from '../../assets/images/import-client-visit-help.png'\n\nclass VisitScheduleImportFormatComponent extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n personnels: [],\n groupId: '',\n errors: {},\n onSubmit: false,\n errorMessage: ''\n }\n }\n\n handleSubmit (e) {\n e.preventDefault()\n\n this.setState({ onSubmit: true, errors: {}, errorMessage: '' })\n\n const formData = new window.FormData()\n if (this.state.groupId) {\n formData.append('group_id', this.state.groupId)\n } else if (this.state.personnels.length) {\n this.state.personnels.forEach((item) => {\n formData.append('personnel_id[]', item.value)\n })\n }\n\n axiosCompany().post('client-visit-schedules/format-import-excel', formData, { responseType: 'blob' }).then((result) => {\n const url = window.URL.createObjectURL(new window.Blob([result.data]))\n const link = document.createElement('a')\n link.href = url\n link.setAttribute('download', 'kerjoo-format-import-client-visit-schedules.xlsx')\n document.body.appendChild(link)\n link.click()\n\n this.setState({\n onSubmit: false\n })\n\n // this.props.handleUpdate()\n }).catch((error) => {\n const reader = new window.FileReader()\n\n // This fires after the blob has been read/loaded.\n reader.addEventListener('loadend', (e) => {\n const text = e.srcElement.result\n const data = JSON.parse(text)\n\n if (data.errors) {\n this.setState({ errors: data.errors })\n }\n\n if (data.message) {\n this.setState({ errorMessage: data.message })\n }\n\n this.setState({ onSubmit: false })\n })\n\n reader.readAsText(error.response.data)\n })\n }\n\n render () {\n const s = this.state\n const p = this.props\n\n return (\n <>\n \n {LangImportant.toUpperCase()}!\n
\n\n \n - \n
- {LangImportClientVisitHelp3}. this.handleDownloadFormat(e)} href='#download-format'>{LangImportShiftHelp4}. \n
- {LangImportShiftHelp5}. \n
- {LangImportShiftHelp6}. \n
\n 
\n
\n\n {LangImportShiftHelp2}
\n{LangImportClientVisitHelp8}
\n\n {LangImportShiftHelp1}\n
\n\n \n \n )\n }\n}\n\nexport default connect(mapStateToProps)(VisitScheduleImportFormatComponent)\n","import React from 'react'\nimport {\n connect,\n mapStateToProps,\n SpinnerButton,\n SpinnerLoadFirst,\n moment,\n axiosCompany,\n toRupiah,\n getDivisionClientVisit\n} from '../../helpers/Common'\nimport {\n Division,\n Close,\n LangFilterGroup,\n LangTargetCount,\n LangEmployee,\n LangProcess,\n LangMonth\n} from '../../constant/languange'\nimport { Success } from '../../helpers/Message'\n\nclass VisitScheduleExportComponent extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n loadFirst: true,\n totalTarget: props.totalTarget || 0,\n groups: props.redux.groups,\n groupId: props.groupId || '',\n currentMonth: props.currentMonth,\n currentYear: props.currentYear,\n errors: {},\n success: false,\n errorMessage: null,\n onExportResponse: {}\n }\n }\n\n // subscribe props traditional react component\n static getDerivedStateFromProps (props, state) {\n const setState = {}\n if (props.totalTarget !== state.totalTarget) {\n setState.totalTarget = props.totalTarget\n }\n\n if (+props.groupId !== +state.groupId) {\n setState.groupId = props.groupId\n }\n\n if (props.currentMonth !== state.currentMonth) {\n setState.currentMonth = props.currentMonth\n }\n\n if (props.currentYear !== state.currentYear) {\n setState.currentYear = props.currentYear\n }\n\n return setState === {} ? null : setState\n }\n\n componentDidMount () {\n // this.setState({ loadFirst: false })\n getDivisionClientVisit()\n .then(data => this.setState({ loadFirst: false, groups: data }))\n .catch((err) => {\n this.setState({ loadFirst: false, groups: [] })\n })\n }\n\n handleSubmit (e) {\n e.preventDefault()\n\n this.setState({ onSubmit: true, errors: {}, errorMessage: null, onExportResponse: {} })\n\n const formData = new window.FormData()\n formData.append('group_id', this.state.groupId)\n formData.append('month', this.state.currentMonth)\n formData.append('year', this.state.currentYear)\n\n axiosCompany()\n .post('client-visit-schedules/export-excel', formData, { responseType: 'blob' })\n .then((result) => {\n /**\n * pengaturan nama file\n */\n let namePrefix = ''\n if (this.state.groupId) {\n const group = this.state.groups.find((item) => +item.id === +this.state.groupId)\n namePrefix += `${group.name}-`\n }\n namePrefix += `${this.state.currentMonth}-${this.state.currentYear}`\n\n const url = window.URL.createObjectURL(new window.Blob([result.data]))\n const link = document.createElement('a')\n link.href = url\n link.setAttribute('download', `visit-schedule-${namePrefix}.xlsx`)\n document.body.appendChild(link)\n link.click()\n\n this.setState({\n onSubmit: false,\n errors: {}\n })\n })\n .catch(async (error) => {\n if (error.response.data.errors) {\n this.setState({ errors: error.response.data.errors })\n } else {\n this.setState({ errors: { 0: [error.response.statusText] } })\n }\n if (error.response.data.message) {\n this.setState({ errorMessage: error.response.data.message })\n }\n if (\n error.request.responseType === 'blob' &&\n error.response.data instanceof Blob &&\n error.response.data.type &&\n error.response.data.type.toLowerCase().indexOf('json') !== -1\n ) {\n let errorMsg = error.response.data\n errorMsg = JSON.parse(await error.response.data.text())\n this.setState({ onExportResponse: errorMsg })\n }\n this.setState({ onSubmit: false })\n })\n }\n\n render () {\n const s = this.state\n\n if (s.loadFirst) return SpinnerLoadFirst\n\n return (\n \n )\n }\n}\n\nexport default connect(mapStateToProps)(VisitScheduleExportComponent)\n","import React from 'react'\nimport { ModalApp } from '../../helpers/Input'\nimport {\n connect,\n mapStateToProps,\n SpinnerButton,\n SpinnerLoadFirst,\n PaginationDiv,\n moment,\n axiosCompany,\n httpBuildQuery,\n mapDispatchToProps,\n MODULES_NAMES,\n isBeforeNow,\n displayDate,\n getDivisionClientVisit,\n checkAuthorization\n} from '../../helpers/Common'\nimport {\n EditSchedule,\n Name,\n Search,\n LangImportExcel,\n Division,\n LangVisitSchedule,\n LangClientVisit,\n LangImportExcelVisitSchedule,\n PrevWeek,\n NextWeek,\n LangExportExcel,\n LangClientDeletedAt,\n LangClientVisitMustOnSpot\n} from '../../constant/languange'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faFileDownload, faFileUpload, faPencilAlt, faSearch } from '@fortawesome/free-solid-svg-icons'\nimport ReactTooltip from 'react-tooltip'\nimport PersonnelItemComponent from '../personnel/PersonnelItemComponent'\nimport VisitScheduleSelectClientComponent from './VisitScheduleSelectClientComponent'\nimport BreadcrumbsMenu from '../../layout/breadcrumb/breadcrumbMenu'\nimport VisitScheduleImportComponent from './VisitScheduleImportComponent'\nimport VisitScheduleImportFormatComponent from './VisitScheduleImportFormatComponent'\nimport VisitScheduleExportComponent from './VisitScheduleExportComponent'\n\nclass VisitScheduleComponent extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n loadFirst: true,\n loadData: false,\n filterPersonnel: {\n page: 1,\n group_id: '',\n keyword: '',\n is_active_client_visit: 1\n },\n dataGroup: [],\n dataResponse: {\n data: [],\n meta: {\n total: 0\n }\n },\n filterSchedule: {\n date_from: '',\n date_to: ''\n },\n currentDate: moment(),\n currentMonth: moment().format('M'),\n currentYear: moment().format('YYYY'),\n daysWeek: [],\n showModal: '',\n focusPersonnelId: '',\n focusDate: '',\n newWorkPattern: null,\n filter: {\n page: 1,\n target: null,\n group_id: '',\n date_start: moment().startOf('month').format('YYYY-MM-DD'),\n date_end: moment().format('YYYY-MM-DD'),\n keyword: ''\n },\n showLoad: false,\n currentData: null\n }\n\n this.loadData = this.loadData.bind(this)\n this.loadDataWithSetDaysWeek = this.loadDataWithSetDaysWeek.bind(this)\n this.loadDataPersonnelSchedules = this.loadDataPersonnelSchedules.bind(this)\n this.handlePageChange = this.handlePageChange.bind(this)\n this.handleGroupChange = this.handleGroupChange.bind(this)\n this.handleKeyPress = this.handleKeyPress.bind(this)\n this.handleClickSearch = this.handleClickSearch.bind(this)\n this.handleMonthChange = this.handleMonthChange.bind(this)\n this.handleYearChange = this.handleYearChange.bind(this)\n this.handleNextWeek = this.handleNextWeek.bind(this)\n this.handlePrevWeek = this.handlePrevWeek.bind(this)\n this.handleSuccessUpdateItem = this.handleSuccessUpdateItem.bind(this)\n this.handleDateChange = this.handleDateChange.bind(this)\n }\n\n componentDidMount () {\n /**\n * load groups\n */\n if (this.props.redux?.groups) {\n // this.setState({\n // dataGroup: this.props.redux.groups\n // })\n getDivisionClientVisit().then(data => this.setState({ dataGroup: data }))\n }\n const promises = []\n\n promises.push(new Promise((resolve) => {\n this.loadDataWithSetDaysWeek(() => {\n resolve()\n })\n }))\n\n promises.push(new Promise((resolve, reject) => {\n axiosCompany()\n .get('shiftworkpatterns?page=null')\n .then((result) => {\n resolve(result.data)\n })\n .catch(() => {\n reject()\n })\n }))\n\n Promise.all(promises).then((result) => {\n this.setState({\n loadFirst: false\n })\n\n this.props.setStateModule(MODULES_NAMES.SHIFT_WORK_PATTERN, { patterns: result[1] })\n })\n .catch(() => {\n this.setState({\n loadFirst: false\n })\n })\n }\n\n loadDataWithSetDaysWeek (cb) {\n const currentDate = this.state.currentDate\n const weekStart = currentDate.clone().startOf('isoWeek')\n // const weekEnd = currentDate.clone().endOf('week')\n\n const days = []\n for (let i = 0; i <= 6; i++) {\n days.push(moment(weekStart).add(i, 'days'))\n }\n\n this.setState({\n currentDate,\n currentMonth: currentDate.format('M'),\n currentYear: currentDate.format('YYYY'),\n daysWeek: days,\n filterSchedule: Object.assign({}, {\n date_from: days[0].format('YYYY-MM-DD'),\n date_to: days[6].format('YYYY-MM-DD')\n })\n }, () => {\n this.loadData(cb)\n })\n }\n\n handleDateChange (value) {\n const filterSchedule = {\n date_from: value.startDate,\n date_to: value.endDate\n }\n\n this.setState(\n { filterSchedule: filterSchedule },\n () => {\n this.loadData()\n })\n }\n\n handleSuccessUpdateItem (personnelId, date) {\n this.setState({ showModal: '', newWorkPattern: null })\n this.loadDataPersonnelSchedules(personnelId)\n\n /**\n * cek perlu reload personnel gak?\n */\n const personnel = this.state.dataResponse.data.find((item) => +item.id === +personnelId)\n if (personnel.attr?.is_repeat_shift_schedule) {\n /**\n * cek tgl ada dalam daftar tidak\n */\n if (personnel.attr.repeat_shift_schedule.includes(date)) {\n this.refreshPersonnel(personnelId)\n }\n }\n }\n\n handlePrevWeek (e) {\n e.preventDefault()\n this.setState({\n currentDate: this.state.currentDate.subtract(1, 'week')\n }, () => {\n this.loadDataWithSetDaysWeek()\n })\n }\n\n handleNextWeek (e) {\n e.preventDefault()\n this.setState({\n currentDate: this.state.currentDate.add(1, 'week')\n }, () => {\n this.loadDataWithSetDaysWeek()\n })\n }\n\n handleYearChange (value) {\n this.setState({\n currentYear: value,\n currentDate: this.state.currentDate.set('year', value)\n }, () => {\n this.loadDataWithSetDaysWeek()\n })\n }\n\n handleMonthChange (value) {\n const currentDate = this.state.currentDate.set('month', +value - 1)\n\n this.setState({\n currentMonth: currentDate.format('M'),\n currentDate: currentDate\n }, () => {\n this.loadDataWithSetDaysWeek()\n })\n }\n\n handleClickSearch (e) {\n e.preventDefault()\n if (this.state.loadData) return true\n\n this.setState({\n filterPersonnel: { ...this.state.filterPersonnel, page: 1 }\n }, () => {\n this.loadData()\n })\n }\n\n handleKeyPress (e) {\n if (e.key === 'Enter') {\n if (this.state.loadData) return true\n\n this.setState({\n filterPersonnel: { ...this.state.filterPersonnel, page: 1 }\n }, () => {\n this.loadData()\n })\n }\n }\n\n handleGroupChange (groupId) {\n const filter = Object.assign({}, this.state.filterPersonnel)\n filter.page = 1\n filter.group_id = groupId\n\n this.setState({\n filterPersonnel: filter\n }, () => {\n this.loadData()\n })\n }\n\n handlePageChange (page) {\n const filter = Object.assign({}, this.state.filterPersonnel)\n filter.page = page\n\n this.setState({\n filterPersonnel: filter\n }, () => {\n this.loadData()\n })\n }\n\n refreshPersonnel (personnelId, cb) {\n axiosCompany()\n .get(`personnels/${personnelId}`)\n .then((result) => {\n const personnels = this.state.dataResponse.data.map((item) => {\n if (+item.id === +personnelId) {\n return result.data\n } else {\n return item\n }\n })\n\n const dataResponse = this.state.dataResponse\n dataResponse.data = personnels\n\n this.setState({ dataResponse }, () => {\n if (typeof cb === 'function') cb()\n })\n })\n }\n\n loadData (cb) {\n this.setState({ loadData: true })\n\n const filter = Object.assign({}, this.state.filterPersonnel)\n // console.log(filter)\n axiosCompany()\n .get('personnels?' + httpBuildQuery(filter))\n .then((result) => {\n this.setState({\n dataResponse: result.data,\n loadData: false,\n addedRepeatSchedule: result.data.data.filter((item) => (item.attr?.is_repeat_shift_schedule)).map(item => item.id)\n }, () => {\n /**\n * cari jadwal shift masing2 personnel\n */\n result.data.data.forEach((personnel) => {\n this.loadDataPersonnelSchedules(personnel.id)\n })\n\n if (typeof cb === 'function') cb()\n })\n })\n .catch(() => {\n this.setState({\n loadData: false\n })\n })\n }\n\n loadDataPersonnelSchedules (personnelId) {\n this.setState({\n [`dataSchedules${personnelId}`]: null\n })\n\n const filterSchedule = {\n date_from: this.state.filterSchedule.date_from,\n date_to: this.state.filterSchedule.date_to\n }\n\n if(checkAuthorization(this.props.redux, 'client-visit.schedule.index')) {\n axiosCompany()\n .get(`client-visit-schedules/${personnelId}?` + httpBuildQuery(filterSchedule))\n .then((resultSchedule) => {\n this.setState({\n [`dataSchedules${personnelId}`]: resultSchedule.data\n })\n })\n }\n }\n\n render () {\n const s = this.state\n const p = this.props\n\n const isNow = (date) => {\n return date.format('YYYY-MM-DD') === moment().format('YYYY-MM-DD')\n }\n\n const ScheduleList = (props) => {\n const date = moment(props.date).format('DD')\n const isDayBefore = isBeforeNow(props.date.format('YYYY-MM-DD'))\n\n const rowSchedule = s[`dataSchedules${props.personnelId}`]\n if (!rowSchedule) return \n
\n )\n }\n\n const PersonnelList = s.dataResponse?.data?.map((item, i) => {\n const oddColor = p.redux.darkModeOn ? '#2c323f' : 'white'\n const evenColor = p.redux.darkModeOn ? '#373c49' : 'rgba(245, 247, 250, 1)'\n\n return (\n \n
\n \n
\n - \n {colSchedule.map(item => (\n
- \n \n {item.client.name} {item.start_time && `(${item.start_time}`}{item.end_time && ` - ${item.end_time}`}{item.start_time && `)`} \n {item.client_visit_must_on_spot ? : ''}\n \n {item.client.deleted_at && (\n \n {LangClientDeletedAt}: {displayDate(item.client.deleted_at, 'DD MMM YYYY @ HH:mm')}\n \n )}\n \n ))}\n
\n \n
\n )}\n \n {[LangClientVisit, LangVisitSchedule]} \n this.setState({ showModal: '' })}\n body={\n this.handleGroupChange(groupId)}\n onChangeMonth={(value) => this.handleMonthChange(value)}\n onChangeYear={(value) => this.handleYearChange(value)}\n onUpdate={() => {\n this.loadData()\n }}\n onClose={() => this.setState({ showModal: '' })}\n />\n }\n />\n )\n : null}\n\n {(s.showModal === 'import') && (\n this.setState({ showModal: '' })}\n body={\n this.setState({ showModal: '' })}\n handleDownloadFormat={() => this.setState({ showModal: 'import-format' })}\n handleUpdate={() => this.loadData()}\n />\n }\n />\n )}\n\n {(s.showModal === 'import-format') && (\n this.setState({ showModal: 'import' })}\n body={\n this.setState({ showModal: 'import' })}\n groups={s.dataGroup}\n />\n }\n />\n )}\n\n {(s.showModal === 'edit') && (\n this.setState({ showModal: '' })}\n body={\n this.loadData()}\n handleClose={() => this.setState({ showModal: '' })}\n currentData={s.currentData}\n focusPersonnelId={s.focusPersonnelId}\n focusDate={s.focusDate}\n />\n }\n />\n )}\n
\n )\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(VisitScheduleComponent)\n","import React from 'react'\nimport {\n connect,\n mapStateToProps,\n SpinnerButton,\n axiosCompany,\n axiosDownloadFile\n} from '../../helpers/Common'\nimport {\n Division,\n LangRequestSuccess,\n DateLang,\n LangMaxRangeExport60Day,\n Process,\n Close,\n Search,\n LangKeyword\n} from '../../constant/languange'\nimport { InputRangeDatePicker } from '../../helpers/Input'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faSearch } from '@fortawesome/free-solid-svg-icons'\nimport moment from 'moment'\n\nclass ShiftChangeScheduleExportComponent extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n onSubmit: false,\n errors: {},\n errorMessage: ''\n }\n\n this.handleSubmit = this.handleSubmit.bind(this)\n }\n\n handleSubmit (e) {\n e.preventDefault()\n\n this.setState({ onSubmit: true, errors: {}, errorMessage: '', successMessage: '' })\n\n const formData = new window.FormData()\n formData.append('date_from', this.props.startDate)\n formData.append('date_to', this.props.endDate)\n if (this.props.groupId) {\n formData.append('group_id', this.props.groupId)\n }\n if (this.props.status) {\n formData.append('status', this.props.status)\n }\n if (this.props.search) {\n formData.append('keyword', this.props.search)\n }\n\n axiosCompany().post('switch-shifts/export', formData, { responseType: 'blob' })\n .then((res) => {\n const fileName = `export-recap-shift-schedule-${moment().format('YYYYMMDDHHmmss')}`\n axiosDownloadFile(res.data, fileName, 'xlsx')\n\n this.setState({\n onSubmit: false,\n successMessage: LangRequestSuccess\n })\n }).catch((error) => {\n if (error.response.data.errors) {\n this.setState({ errors: error.response.data.errors })\n } else {\n this.setState({ errors: { 0: [error.response.statusText] } })\n }\n\n if (error.response.data.message) {\n this.setState({ errorMessage: error.response.data.message })\n }\n\n this.setState({ onSubmit: false })\n })\n }\n\n handleStatus = (e) => {\n this.setState({ status: e })\n }\n\n render () {\n const s = this.state\n const p = this.props\n return (\n \n )\n }\n}\nexport default connect(mapStateToProps)(ShiftChangeScheduleExportComponent)\n","import React from 'react'\nimport {\n connect,\n mapStateToProps,\n PaginationDiv,\n SpinnerLoadFirst,\n SpinnerButton,\n httpBuildQuery,\n moment,\n axiosCompany,\n displayDate,\n checkFeatureLimitation,\n checkLimitationDate,\n checkAuthorization\n} from '../../helpers/Common'\nimport { Search, Division, LangPayrollDateRangeInfo, LangShiftChangeScheduleRecap, LangApplicantemployees, LangApplicantSchedule, LangTargetemployees, LangTargetSchedule, LangDateCreated, LangApprovedBy, LangRejectedBy, LangPending, LangLeaveApproved, ExportExcel, LangRejected, LangScheduleOff, LangAttendance, LangWorkPatternDeleted } from '../../constant/languange'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faFileDownload, faSearch, faThumbsDown, faThumbsUp } from '@fortawesome/free-solid-svg-icons'\nimport { InputRangeDatePicker, ModalApp } from '../../helpers/Input'\n// import Breadcrumbs from '../../layout/breadcrumb'\nimport BreadcrumbsMenu from '../../layout/breadcrumb/breadcrumbMenu'\nimport PersonnelItemComponent from '../personnel/PersonnelItemComponent'\nimport ShiftChangeScheduleExportComponent from './ShiftChangeScheduleExportComponent'\n\nclass ShiftChangeScheduleRecap extends React.Component {\n constructor (props) {\n super(props)\n this.state = {\n dataGroup: [],\n dataStatus: [{ name: LangPending, value: 'pending' }, { name: LangLeaveApproved, value: 'approve' }, { name: LangRejected, value: 'reject' }],\n startDate: moment().startOf('month').format('YYYY-MM-DD'),\n endDate: moment().format('YYYY-MM-DD'),\n showAlert: '',\n groupId: '',\n status: '',\n activePage: 1,\n search: '',\n loading: false,\n loading2: false,\n onExport: false,\n dataResponse: {\n data: [],\n meta: {\n total: 0\n }\n },\n modal: {\n show: false,\n title: '',\n body: ''\n },\n showModal: ''\n }\n\n this.handleDateChange = this.handleDateChange.bind(this)\n this.handleExportExcel = this.handleExportExcel.bind(this)\n this.handlePageChange = this.handlePageChange.bind(this)\n }\n\n componentDidMount () {\n this.loadData()\n\n if (this.props.redux?.groups) {\n this.setState({\n dataGroup: this.props.redux.groups\n })\n }\n }\n\n handlePageChange (pageNumber) {\n this.setState({ activePage: pageNumber }, () => {\n this.loadData()\n })\n }\n\n handleExportExcel () {\n this.setState({ onExport: true })\n\n /**\n * format date input ke UTC\n */\n const filter = {\n group_id: this.state.groupId,\n date_from: this.state.startDate,\n date_to: this.state.endDate,\n keyword: this.state.search\n }\n\n axiosCompany()\n .get('attendances/summaries-xlsx?' + httpBuildQuery(filter), {\n responseType: 'blob'\n })\n .then((result) => {\n const url = window.URL.createObjectURL(new window.Blob([result.data]))\n const link = document.createElement('a')\n link.href = url\n link.setAttribute('download', `attendance-summaries-${this.state.startDate}-to-${this.state.endDate}.xlsx`)\n document.body.appendChild(link)\n link.click()\n\n this.setState({ onExport: false })\n })\n }\n\n loadData = () => {\n this.setState({ loading: true })\n\n const filter = {\n page: this.state.activePage,\n group_id: this.state.groupId,\n keyword: this.state.search,\n date_from: this.state.startDate,\n date_to: this.state.endDate,\n status: this.state.status\n }\n\n axiosCompany().get('switch-shifts?' + httpBuildQuery(filter))\n .then((res) => {\n // console.log(res.data)\n this.setState({ dataResponse: res.data, loading: false, loading2: false })\n })\n .catch((err) => {\n this.setState({ dataResponse: err.response.data, loading: false, loading2: false })\n })\n }\n\n handleGroup = (e) => {\n this.setState({\n groupId: e,\n activePage: 1\n }, () => {\n this.loadData()\n })\n }\n\n handleStatus = (e) => {\n this.setState({\n status: e,\n activePage: 1\n }, () => {\n this.loadData()\n })\n }\n\n handleStartDate = (e) => {\n this.setState({\n startDate: e,\n activePage: 1\n }, () => {\n this.loadData()\n })\n }\n\n handleEndDate = (e) => {\n this.setState({\n endDate: e,\n activePage: 1\n }, () => {\n this.loadData()\n })\n }\n\n handleKeyDown = (e) => {\n if (e.key === 'Enter' && !this.state.loading) {\n this.setState({ loading2: true, activePage: 1 })\n this.loadData()\n }\n }\n\n handleDateChange (value) {\n /**\n * cek apakah lebih dari 60 hari, jika ya paksa maks 60 hari\n */\n let startDate = value.startDate\n let showAlert = ''\n const endDateSub = moment(value.endDate).subtract(2, 'month')\n if (moment(value.startDate).isBefore(endDateSub)) {\n startDate = endDateSub.format('YYYY-MM-DD')\n showAlert = 'date-range'\n }\n\n this.setState({\n showAlert,\n startDate,\n endDate: value.endDate,\n activePage: 1\n }, () => {\n this.loadData()\n })\n }\n\n handleViewDates (e, dataModal) {\n e.preventDefault()\n this.setState({ showModal: 'view-dates', dataModal })\n }\n\n showModalDescription (title, body) {\n this.setState({ modal: { show: true, title, body } })\n }\n\n render () {\n const p = this.props\n\n return (\n <>\n {/* \n
\n\n {(s.showModal === 'export')\n ? (\n \n
\n \n
\n \n
\n \n {/* top menu */}\n
\n {checkAuthorization(this.props.redux, 'client-visit.schedule.index') ? (\n <>\n {s.loadFirst\n ? SpinnerLoadFirst\n : (\n \n\n
\n\n \n
\n\n \n \n
\n\n \n
\n \n this.setState({ filterPersonnel: { ...s.filterPersonnel, keyword: e.target.value } })} disabled={s.loadData} type='search' className='form-control' placeholder={Search} onKeyPress={this.handleKeyPress} style={{ maxWidth: 200 }} />\n
\n {s.loadData ? SpinnerButton :
\n \n {checkAuthorization(p.redux, 'client-visit.schedule.import') && (\n \n )}\n {checkAuthorization(p.redux, 'client-visit.schedule.export') && (\n \n )}\n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n
\n \n \n \n
\n
\n )}\n \n ) : (\n | {Name} | \n {\n Array(7).fill('').map((item, i) => (\n{s.daysWeek[i].format('dddd, DD MMM YYYY')} | \n ))\n }\n||||||
|---|---|---|---|---|---|---|---|
| {SpinnerLoadFirst} | \n|||||||
This action is unauthorized.
\n )}\n \n
\n \n
\n\n {(this.state.showModal === 'export')\n ? (\n \n
\n \n
\n \n
\n \n
\n {this.state.loading\n ? SpinnerLoadFirst\n : (\n \n
\n \n
\n \n
\n {LangPayrollDateRangeInfo}
) : null}\n \n
\n \n \n
\n \n \n
\n \n
\n \n this.setState({ search: e.target.value })} aria-label='Search'\n aria-describedby='search-addon' style={{ maxWidth: 250 }}\n />\n
\n this.setState({ loading2: true }, () => this.loadData())}> {this.state.loading2 ? SpinnerButton :
\n \n {checkFeatureLimitation(p.redux, 'disable_export_summary_switch_shift') && checkAuthorization(p.redux, 'switch-shift-recap.export') && (\n \n )}\n
\n \n \n \n
\n
\n )}\n\n | {LangApplicantemployees} | \n{LangApplicantSchedule} | \n{LangTargetemployees} | \n{LangTargetSchedule} | \n{LangDateCreated} | \nStatus | \n
|---|---|---|---|---|---|
| \n | \n \n {moment(item.shift_work_time_id_from_data.date, 'YYYY-MM-DD').format('dddd, D MMMM YYYY')} \n {item.shift_work_time_id_from_data.is_day_off\n ? ({LangScheduleOff} )\n : ({item.shift_work_time_id_from_data?.shift_work_pattern?.name ?? {LangWorkPatternDeleted}} { item.shift_work_time_id_from_data?.shift_work_pattern ? `(${moment(item.shift_work_time_id_from_data?.shift_work_pattern?.time_in, 'HH:mm:ss').format('HH:mm')} - ${moment(item.shift_work_time_id_from_data?.shift_work_pattern?.time_out, 'HH:mm:ss').format('HH:mm')})` : ''} )}\n | \n \n | \n \n {moment(item.shift_work_time_id_to_data.date, 'YYYY-MM-DD').format('dddd, D MMMM YYYY')} \n {item.shift_work_time_id_to_data.is_day_off\n ? ({LangScheduleOff} )\n : ({item.shift_work_time_id_to_data?.shift_work_pattern?.name ?? {LangWorkPatternDeleted}} { item.shift_work_time_id_to_data?.shift_work_pattern ? `(${moment(item.shift_work_time_id_to_data?.shift_work_pattern?.time_in, 'HH:mm:ss').format('HH:mm')} - ${moment(item.shift_work_time_id_to_data?.shift_work_pattern?.time_out, 'HH:mm:ss').format('HH:mm')})` : ''} )}\n | \n {displayDate(item.created_at, 'dddd, DD MMM YYYY @ HH:mm')}, | \n \n {item.status === 'pending' && {LangPending} }\n {item.status === 'approve' && (\n\n \n )}\n {item.status === 'reject' && (\n {LangApprovedBy} {item.status_updated_by.name}, \n \n )}\n {LangRejectedBy} {item.status_updated_by.name}, | \n
\n
\n {this.state.dataResponse.message}
}\n \n
\n \n )\n}\n\nexport default connect(mapStateToProps)(VisitSummaryViewDatesComponent)\n","import React from 'react'\nimport {\n connect,\n mapStateToProps,\n PaginationDiv,\n SpinnerLoadFirst,\n SpinnerButton,\n httpBuildQuery,\n moment,\n axiosCompany,\n getDivisionClientVisit,\n checkAuthorization\n} from '../../helpers/Common'\nimport {\n Search, Division,\n ExportExcel,\n LangEmployee,\n LangPayrollDateRangeInfo,\n LangVisitSummary,\n LangClientVisit,\n LangVisitScheduleTotal,\n LangVisitTotal,\n LangVisitPercentage\n} from '../../constant/languange'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faSearch, faFileDownload } from '@fortawesome/free-solid-svg-icons'\nimport { InputRangeDatePicker, ModalApp } from '../../helpers/Input'\nimport BreadcrumbsMenu from '../../layout/breadcrumb/breadcrumbMenu'\nimport { Modal } from 'react-bootstrap'\nimport VisitSummaryExportComponent from './VisitSummaryExportComponent'\nimport PersonnelItemComponent from '../personnel/PersonnelItemComponent'\nimport VisitSummaryViewDatesComponent from './VisitSummaryViewDatesComponent'\n\nclass VisitSummaryComponent extends React.Component {\n constructor (props) {\n super(props)\n this.state = {\n dataGroup: [],\n startDate: moment().startOf('month').format('YYYY-MM-DD'),\n endDate: moment().format('YYYY-MM-DD'),\n showAlert: '',\n groupId: '',\n activePage: 1,\n search: '',\n loading: false,\n loading2: false,\n onExport: false,\n dataResponse: {\n data: [],\n meta: {\n total: 0\n }\n },\n modal: {\n show: false,\n title: '',\n body: ''\n },\n showModal: '',\n error: {}\n }\n\n this.handleDateChange = this.handleDateChange.bind(this)\n this.handleExportExcel = this.handleExportExcel.bind(this)\n this.handlePageChange = this.handlePageChange.bind(this)\n }\n\n componentDidMount () {\n this.loadData()\n\n if (this.props.redux?.groups) {\n // this.setState({\n // dataGroup: this.props.redux.groups\n // })\n getDivisionClientVisit().then(data => this.setState({ dataGroup: data }))\n }\n }\n\n handlePageChange (pageNumber) {\n this.setState({ activePage: pageNumber }, () => {\n this.loadData()\n })\n }\n\n handleExportExcel () {\n this.setState({ onExport: true })\n\n /**\n * format date input ke UTC\n */\n const filter = {\n group_id: this.state.groupId,\n date_from: this.state.startDate,\n date_to: this.state.endDate,\n keyword: this.state.search\n }\n\n axiosCompany()\n .get('attendances/summaries-xlsx?' + httpBuildQuery(filter), {\n responseType: 'blob'\n })\n .then((result) => {\n const url = window.URL.createObjectURL(new window.Blob([result.data]))\n const link = document.createElement('a')\n link.href = url\n link.setAttribute('download', `attendance-summaries-${this.state.startDate}-to-${this.state.endDate}.xlsx`)\n document.body.appendChild(link)\n link.click()\n\n this.setState({ onExport: false })\n })\n }\n\n loadData = () => {\n this.setState({ loading: true })\n\n const filter = {\n page: this.state.activePage,\n group_id: this.state.groupId,\n creation_date_end: this.state.endDate,\n keyword: this.state.search,\n order_by: 'name',\n order_direction: 'asc',\n with_trashed: '1',\n is_active_client_visit: 1\n }\n\n axiosCompany().get('personnels?' + httpBuildQuery(filter))\n .then((res) => {\n this.setState({\n dataResponse: res.data\n }, () => {\n this.state.dataResponse.data.forEach((obj) => {\n this.setState({ [`dataSummaries${obj.id}`]: null })\n axiosCompany().get(`client-visits/summaries/${obj.id}?date_from=${this.state.startDate}&date_to=${this.state.endDate}`)\n .then((res) => {\n this.setState({ [`dataSummaries${obj.id}`]: res.data })\n })\n .catch(err => {\n this.setState({ [`dataSummaries${obj.id}`]: err.response.data })\n })\n })\n })\n // this.setState({ dataResponse: { ...this.state.dataResponse, data: [...this.state.dataResponse.data.slice(0, 5)] } })\n // this.setState({ dataResponse: { ...this.state.dataResponse, data: [...this.state.dataResponse.data, ...this.state.dataResponse.data] } })\n this.setState({ loading: false, loading2: false })\n })\n .catch(err => {\n this.setState({ error: err.response.data, loading: false, loading2: false })\n })\n }\n\n handleGroup = (e) => {\n this.setState({\n groupId: e,\n activePage: 1\n }, () => {\n this.loadData()\n })\n }\n\n handleStartDate = (e) => {\n this.setState({\n startDate: e,\n activePage: 1\n }, () => {\n this.loadData()\n })\n }\n\n handleEndDate = (e) => {\n this.setState({\n endDate: e,\n activePage: 1\n }, () => {\n this.loadData()\n })\n }\n\n _handleKeyDown = (e) => {\n if (e.key === 'Enter' && !this.state.loading) {\n this.setState({ loading2: true, activePage: 1 })\n this.loadData()\n }\n }\n\n handleDateChange (value) {\n /**\n * cek apakah lebih dari 60 hari, jika ya paksa maks 60 hari\n */\n let startDate = value.startDate\n let showAlert = ''\n const endDateSub = moment(value.endDate).subtract(2, 'month')\n if (moment(value.startDate).isBefore(endDateSub)) {\n startDate = endDateSub.format('YYYY-MM-DD')\n showAlert = 'date-range'\n }\n\n this.setState({\n showAlert,\n startDate,\n endDate: value.endDate,\n activePage: 1\n }, () => {\n this.loadData()\n })\n }\n\n handleViewDates (e, dataModal) {\n e.preventDefault()\n this.setState({ showModal: 'view-dates', dataModal })\n }\n\n showModalDescription (title, body) {\n this.setState({ modal: { show: true, title, body } })\n }\n\n render () {\n const p = this.props\n\n return (\n <>\n - \n {formattedData.map((item, index) => (\n \n
\n
\n \n ))}\n {index + 1}.
\n \n {displayDate(item.date, 'ddd, DD MMM YYYY')}
\n {item.clients && item.clients.length > 0 && (\n
\n \n {item.clients && item.clients.length > 0 && (\n
\n \n
\n )}\n \n {item.clients.map((item, index) => (\n {item.client_name}\n ))}\n
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n \n
\n {this.state.loading\n ? SpinnerLoadFirst\n : (\n \n
\n \n
\n \n
\n {LangPayrollDateRangeInfo}
) : null}\n \n
\n \n \n
\n \n
\n \n this.setState({ search: e.target.value })} aria-label='Search'\n aria-describedby='search-addon' style={{ maxWidth: 250 }}\n />\n
\n this.setState({ loading2: true }, () => this.loadData())}> {this.state.loading2 ? SpinnerButton :
\n \n {checkAuthorization(p.redux, 'client-visit.summary.export') && (\n \n )}\n
\n \n \n \n
\n
\n )}\n\n | {LangEmployee} | \n{LangVisitScheduleTotal} | \n{LangVisitTotal} | \n{LangVisitPercentage} | \n|
|---|---|---|---|---|
| \n | \n {summary !== null && summary.message ? (\n {summary.message} | \n ) : (\n <>\n\n {(summary === null) ? \n SpinnerButton \n : \n checkAuthorization(p.redux, 'client-visit.index') ?\n this.handleViewDates(e, { title: LangVisitScheduleTotal, dates: summary.schedules, personnelId: item.id })}>{summary.schedules_total}\n :\n {summary.schedules_total}\n }\n | \n\n {(summary === null) ? \n SpinnerButton \n :\n checkAuthorization(p.redux, 'client-visit.index') ?\n this.handleViewDates(e, { title: LangVisitTotal, dates: summary.client_visited, personnelId: item.id })}>{summary.client_visited_total}\n :\n {summary.client_visited_total}\n }\n | \n{(summary === null) ? SpinnerButton : summary.client_visited_percentage} | \n \n )}\n
\n
\n {this.state.error?.message}
}\n \n \n
\n \n { setForm(currForm => ({ ...currForm, logo })) }}\n error={responseData?.errors?.logo?.[0]}\n accept='image/png,image/jpeg'\n />\n
\n \n {initData?.logo_url\n ? (\n
\n\n \n
\n {LangChangeFile}:\n
\n )\n : null}\n \n {LangChangeFile}:\n
\n \n
\n \n \n {responseData.errors?.name && (
\n {responseData.errors?.name}
)}\n \n \n
\n \n \n {responseData.errors?.address && (
\n {responseData.errors?.address}
)}\n \n \n
\n \n \n {responseData.errors?.phone && (
\n {responseData.errors?.phone}
)}\n \n \n
\n {/* field year khusus buat filter holidays */}\n \n \n {responseData.errors?.email && (
\n {responseData.errors?.email}
)}\n \n \n
\n \n \n {responseData.errors?.year && (
\n {responseData.errors?.year}
)}\n \n
\n
\n \n
{LangSocialMedia}
\n\n \n
\n \n \n {responseData.errors?.instagram && (
\n {responseData.errors?.instagram}
)}\n \n \n
\n \n \n {responseData.errors?.youtube && (
\n {responseData.errors?.youtube}
)}\n \n \n
\n \n \n {responseData.errors?.twitter && (
\n {responseData.errors?.twitter}
)}\n \n \n
\n \n \n {responseData.errors?.facebook && (
\n {responseData.errors?.facebook}
)}\n \n
\n
\n \n
{LangAppearance}
\n\n \n
\n {/* error message */}\n \n
\n \n \n
\n\n \n
\n \n
\n \n {/* bg header yang pernah diupload */}\n {uploadedHeaderBgUrl && (\n
\n \n
\n )}\n {/* bg header yang tersedia */}\n {providedHeaderBgOptions.map((item, i) => (\n \n \n \n
\n \n
\n ))}\n \n \n \n
\n \n
\n \n { setForm(currForm => ({ ...currForm, image_header: image })) }}\n error={responseData?.errors?.image_header?.[0]}\n accept='image/png,image/jpeg'\n />\n
\n \n {initData?.image_header_url\n ? (\n
\n\n \n
\n {LangChangeFile}:\n
\n )\n : null}\n \n {LangChangeFile}:\n
\n
\n \n {responseData.message && (\n
\n \n {responseData.message}\n
\n )}\n \n
\n
\n \n )\n}\n\nexport default EditInfoPrintComponent\n","export default __webpack_public_path__ + \"static/media/instagram-icon.cfd9e3ce.svg\";","export default __webpack_public_path__ + \"static/media/twitter-icon.62310280.svg\";","export default __webpack_public_path__ + \"static/media/facebook-icon.97df0e90.svg\";","export default __webpack_public_path__ + \"static/media/youtube-icon.8154a56b.svg\";","export default __webpack_public_path__ + \"static/media/whatsapp-icon.36ee7021.svg\";","export default __webpack_public_path__ + \"static/media/email-icon.33a4f0d8.svg\";","import React, { useState, useEffect } from 'react'\nimport styles from './Calendar.module.css'\nimport moment from 'moment'\nimport { displayDate } from '../../helpers/Common'\nimport { April, August, December, February, Friday, January, July, June, March, May, Monday, November, October, Saturday, September, Sunday, Thrusday, Tuesday, Wednesday } from '../../constant/languange'\n\nconst months = [January, February, March, April, May, June, July, August, September, October, November, December]\nconst daysOfWeek = [Monday.substring(0, 3).toUpperCase(), Tuesday.substring(0, 3).toUpperCase(), Wednesday.substring(0, 3).toUpperCase(), Thrusday.substring(0, 3).toUpperCase(), Friday.substring(0, 3).toUpperCase(), Saturday.substring(0, 3).toUpperCase(), Sunday.substring(0, 3).toUpperCase()]\n\nconst Month = ({ year, month, holiday }) => {\n // empty cells\n const [emptyCells, setEmptyCells] = useState([])\n // days data\n const [daysInMonth, setDaysInMonth] = useState([])\n // holidays data\n const [holidayData, setHolidayData] = useState({ dates: [], details: [] })\n\n useEffect(() => {\n // update days\n const dayInAMonth = []\n const amountDaysInMonth = new Date(year, month + 1, 0).getDate()\n for (let day = 1; day <= amountDaysInMonth; day++) {\n dayInAMonth.push(day)\n }\n setDaysInMonth(currDaysInMonth => dayInAMonth)\n\n // update empty cells\n const emptyCellsInAMonth = []\n const startingDay = new Date(year, month, 0).getDay()\n for (let i = 0; i < startingDay; i++) {\n emptyCellsInAMonth.push('')\n }\n setEmptyCells(currEmptyCells => emptyCellsInAMonth)\n // eslint-disable-next-line\n }, [year])\n\n // filter holiday only for this month\n useEffect(() => {\n setHolidayData(() => {\n const holidayInThisMonth = holiday.filter(hdy => (month + 1) === (moment(hdy.date, 'YYYY-MM-DD').month() + 1))\n const holidayDates = holidayInThisMonth.map(hdym => moment(hdym.date, 'YYYY-MM-DD').date())\n\n const holidayInThisMonthSorted = holidayInThisMonth.sort((a, b) => (new Date(a.date) - new Date(b.date)))\n const holidayDatesSorted = holidayDates.sort((a, b) => (a - b))\n\n return { dates: holidayDatesSorted, details: holidayInThisMonthSorted }\n })\n // eslint-disable-next-line\n }, [holiday])\n\n return (\n \n \n \n }\n onBeforeGetContent={() => {\n const saveAndPrint = async (resolve, reject) => {\n const success = await handleSubmit(onSave, 'savePrint')\n setTimeout(() => {\n if (success) {\n resolve()\n } else {\n reject()\n }\n }, 1200)\n }\n\n return new Promise((resolve, reject) => {\n saveAndPrint(resolve, reject)\n })\n }}\n content={() => calenderComponentRef.current}\n />\n
\n \n
\n )\n}\n\nconst Calendar = ({ holiday, currentYear }) => {\n return (\n \n \n {holidayData?.details.map((detailHd, idx) => (\n
\n
\n {months[month]}
\n \n {daysOfWeek.map((dayName, idx) => (\n
\n {dayName}
\n ))}\n {emptyCells.map((emptyCell, idx) => (\n {emptyCell}
\n ))}\n {daysInMonth.map((day, idx) => {\n const isHoliday = holidayData?.dates.includes(day)\n return (\n {day}
\n )\n })}\n | {displayDate(detailHd.date, 'D MMMM YYYY')} | : | {detailHd.description} | \n
\n {months.map((month, idx) =>
\n )\n}\n\nexport default Calendar\n","import { connect, mapStateToProps, ShowImage, SpinnerLoadFirst } from '../../helpers/Common'\nimport IgIcon from '../../assets/images/calendar/instagram-icon.svg'\nimport TwIcon from '../../assets/images/calendar/twitter-icon.svg'\nimport FbIcon from '../../assets/images/calendar/facebook-icon.svg'\nimport YtIcon from '../../assets/images/calendar/youtube-icon.svg'\nimport WaIcon from '../../assets/images/calendar/whatsapp-icon.svg'\nimport EmailIcon from '../../assets/images/calendar/email-icon.svg'\nimport Calendar from './Calendar'\nimport LogoDark from '../../assets/images/logo/dark.svg'\nimport { useEffect, useState } from 'react'\nimport headerBg1 from '../../assets/images/calendar/header-bg-kalendar-1.jpg'\nimport headerBg2 from '../../assets/images/calendar/header-bg-kalendar-2.jpg'\nimport headerBg3 from '../../assets/images/calendar/header-bg-kalendar-3.jpg'\nimport headerBg4 from '../../assets/images/calendar/header-bg-kalendar-4.jpg'\n\nconst sosialMedia = [\n {\n name: 'instagram',\n icon: IgIcon\n },\n {\n name: 'twitter',\n icon: TwIcon\n },\n {\n name: 'facebook',\n icon: FbIcon\n },\n {\n name: 'youtube',\n icon: YtIcon\n },\n {\n name: 'phone',\n icon: WaIcon\n },\n {\n name: 'email',\n icon: EmailIcon\n }\n]\n\nconst providedHeaderBgSrcs = {\n l1: `url(\"${headerBg1}\") center/cover no-repeat`,\n l2: `url(\"${headerBg2}\") center/cover no-repeat`,\n l3: `url(\"${headerBg3}\") center/cover no-repeat`,\n l4: `url(\"${headerBg4}\") center/cover no-repeat`\n}\n\nconst CalendarPaperComponent = ({ redux, control, holiday, currentYear, uploadedHeaderBgUrl, currentHeaderBgId, data }) => {\n const [bgProperties, setBgProperties] = useState({\n height: 370,\n background: currentHeaderBgId\n ? currentHeaderBgId === 'u1'\n ? `url(\"${uploadedHeaderBgUrl}\") center/cover no-repeat` // use uploaded image\n : providedHeaderBgSrcs[currentHeaderBgId] // use lokal image\n : providedHeaderBgSrcs.l2, // l2/headerBg2 is default\n position: 'relative'\n })\n\n useEffect(() => {\n setBgProperties(currBgProperties => ({\n height: 370,\n background: currentHeaderBgId\n ? currentHeaderBgId === 'u1'\n ? `url(\"${uploadedHeaderBgUrl}\") center/cover no-repeat` // use uploaded image\n : providedHeaderBgSrcs[currentHeaderBgId] // use lokal image\n : providedHeaderBgSrcs.l2, // l2/headerBg2 is default\n position: 'relative'\n }))\n }, [currentHeaderBgId, uploadedHeaderBgUrl])\n\n return (\n \n
\n \n \n )\n}\n\nexport default connect(mapStateToProps)(CalendarPaperComponent)\n","import { faPencilAlt } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport React, { useEffect, useRef, useState } from 'react'\nimport { EditData, LangPrint } from '../../constant/languange'\nimport { axiosCompany, connect, cookies, getImageSrc, mapStateToProps, SpinnerButton, SpinnerLoadFirst } from '../../helpers/Common'\nimport { ModalApp } from '../../helpers/Input'\nimport ReactToPrint from 'react-to-print'\nimport EditInfoPrintComponent from './EditInfoPrintComponent'\nimport CalendarPaperComponent from './CalendarPaperComponent'\n\nfunction CalendarPrintComponent({ redux, ...props }) {\n const calenderComponentRef = useRef()\n\n const [control, setControl] = useState({ showLoad: false, showModal: '' })\n const [data, setData] = useState({})\n const [holiday, setHoliday] = useState([])\n const [currentYear, setCurrentYear] = useState(+cookies.get('calendar-year') || 2024) // change this state for another year calender\n const [currentHeaderBgId, setCurrentHeaderBgId] = useState(cookies.get('calendar-header-bg-id') || 'l2')\n const [uploadedHeaderBgUrl, setUploadedHeaderBgUrl] = useState('')\n\n // effect\n useEffect(() => {\n getDataService()\n }, [])\n\n useEffect(() => {\n getHolidays()\n // eslint-disable-next-line\n }, [currentYear])\n\n useEffect(() => {\n if (data?.image_header_url) {\n getUploadedHeaderImage(data.image_header_url.l)\n }\n }, [data])\n\n // handler\n const handleUpdateData = (updatedData, print = false) => {\n setControl(control => ({ ...control, showModal: '' }))\n setData(updatedData)\n print && window.print()\n }\n\n // function\n const getUploadedHeaderImage = async (url) => {\n const src = await getImageSrc(url)\n setUploadedHeaderBgUrl(src)\n }\n\n const getHolidays = () => {\n axiosCompany().get(`holidays?year=${currentYear}&page=null`)\n .then(res => {\n setHoliday(currHoliday => res.data)\n }\n )\n }\n\n const getDataService = async () => {\n setControl(control => ({ ...control, showLoad: true }))\n const defaultLogoUrl = redux?.company?.logo_url ? {\n s: redux?.company?.logo_url,\n m: redux?.company?.logo_url_m,\n l: redux?.company?.logo_url_l\n } : {}\n try {\n const res = await axiosCompany().get('company/calendar-setting')\n let initData = {\n ...res.data,\n logo: res.data.logo ?? redux?.company?.logo,\n logo_url: res.data.logo_url ?? defaultLogoUrl,\n name: res.data.name ?? redux?.company?.name,\n address: res.data.address ?? redux?.company?.address,\n phone: res.data.phone ?? redux?.company?.phone,\n email: res.data.email ?? redux?.company?.email\n }\n setData(initData)\n setControl(control => ({ ...control, showLoad: false }))\n } catch (e) {\n setControl(control => ({ ...control, showLoad: false }))\n }\n }\n\n return (\n <>\n \n
\n \n
\n \n
\n\n \n {control.showLoad && (\n
\n \n {SpinnerLoadFirst}\n
\n )}\n\n \n \n {/* company id */}\n \n
\n {/* year */}\n \n
\n {/* social media */}\n \n
\n \n
\n {data?.name}
\n {data?.address}\n\n {sosialMedia.map((sm, idx) => {\n if (!data[sm.name]) return null\n\n return (\n
\n \n 
\n {data[sm.name]}\n
\n )\n })}\n \n
\n {currentYear}
\n \n
\n \n
\n\n \n \n {' '} - Aplikasi Absensi Online\n
\n \n
\n\n {control.showModal === 'edit' && (\n \n
\n \n
\n \n
\n \n
\n \n }\n content={() => calenderComponentRef.current}\n />\n \n
\n \n {control.showLoad\n ? SpinnerLoadFirst\n :
\n \n
\n )}\n \n )\n}\n\nexport default connect(mapStateToProps)(OvertimeCalculationComponent)\n","import React, { lazy } from 'react'\nimport { Route } from 'react-router'\n\nconst PositionComponent = lazy(() => import('../components/position/PositionComponent'))\nconst PositionVisualizationComponent = lazy(() => import('../components/position/PositionVisualizationComponent'))\nconst PositionPrintComponent = lazy(() => import('../components/position/PositionPrintComponent'))\n\nconst PositionRoute = () => {\n return (\n <>\n \n
\n \n
\n \n
\n \n
\n
\n \n
\n {LangWageRates}
\n \n
\n \n \n \n
\n
\n | {LangOvertimeHours} | \n{WorkDay} | \n{LangH5WorkingDays} | \n{LangH6WorkingDays} | \n
|---|---|---|---|
| {item.hours} {Hours.toLowerCase()} | \n\n \n handleChangeText(e, idx)} />\n \n \n x\n \n \n {responseData?.errors?.[`overtime_settings.${idx}.work_day`]}\n \n | \n \n \n handleChangeText(e, idx)} />\n \n \n x\n \n \n {responseData?.errors?.[`overtime_settings.${idx}.work_day_5`]}\n \n | \n \n \n handleChangeText(e, idx)} />\n \n \n x\n \n \n {responseData?.errors?.[`overtime_settings.${idx}.work_day_6`]}\n \n | \n
\n
\n {LangNumberShiftWorkingDays}
\n \n
\n \n \n
\n \n
\n {LangEnableOvertimeCalculation}
\n \n
\n \n \n \n
\n \n \n \n
\n \n
\n
\n \n {data?.message &&
\n {data.message}
}\n {responseData.success && {LangRequestSuccess}
}\n {responseData.message && {responseData.message}
}\n {checkAuthorization(redux, 'overtime-wage-rule.update') && (\n \n )}\n \n
\n )\n\n return !redux.isTrial && showModal && \n 
\n
\n {LangExpiresModal(timeRemaining, moment(redux.expiredAt, 'YYYY-MM-DD HH:mm:ss').format('dddd, D MMMM YYYY'))}
\n\n \n \n
\n \n
\n )\n\n return showModal && !cookies.get(`notFirstLogin-${redux.profile.id}`) && redux.isTemporary && redux.profile.supervisor_groups === null && \n \n
\n \n
\n {LangWelcomeToAdminPanel}
\n {LangDefaultDataTrial1}\n
\n{LangDefaultDataTrial2}
\n\n \n \n
\n \n \n \n
\n )\n}\n\nexport default connect(mapStateToProps)(WhatsappOverlayComponent)\n","import React from 'react'\nimport { connect, mapStateToProps } from '../../../helpers/Common'\nimport WhatsappOverlayComponent from './WhatsappOverlayComponent'\n\nfunction WhatsappOverlay({ redux }) {\n return (\n <>\n {!redux.profile.supervisor_groups ? \n
\n \n
\n \n {/*
\n \n
\n)\n\nconst NotifUpdate = connect(mapStateToProps)(({ redux }) => {\n const [showNotif, setShowNotif] = useState(false)\n\n useEffect(() => {\n if (!showNotif && redux.serviceWorkerUpdated) {\n setShowNotif(true)\n }\n }, [showNotif, redux.serviceWorkerUpdated])\n\n useEffect(() => {\n /**\n * ini untuk interval cek versi terbaru\n */\n const intervalId = setInterval(() => {\n axios.get('/metadata.json').then((result) => {\n if (result.data?.build > BUILD_NUMBER) {\n setShowNotif(true)\n clearInterval(intervalId)\n }\n })\n }, 1000 * 60 * 2) // 2 menit\n }, [])\n\n if (showNotif) {\n setShowNotif(false)\n\n toast({LangNewVersionAvaiable}.
\n \n \n {control.showLoad\n ? (
\n )\n}\n\nexport default connect(mapStateToProps)(ModalAdminActivityLogsComponent)\n","export default __webpack_public_path__ + \"static/media/dark.688acde2.svg\";","/* eslint-disable no-sequences */\nimport React from 'react'\nimport { Form, Modal } from 'react-bootstrap'\nimport { axios, apiUrl, moment, cookies, formatBytes, mapStateToProps, connect, ShowImage } from './Common'\nimport {\n City, Province, District, Villages, TimeZone, Employe, BussinessFields, PhoneCC,\n TypeKeyword,\n NoOptions,\n PleaseWait,\n Hours,\n LangIdentity,\n LangWorkStatus,\n LangMaritalStatus,\n LangReligion,\n LangBloodType,\n LangEducationLevel,\n LangFileType,\n Gender,\n Delete\n} from '../constant/languange'\nimport DatePicker, { registerLocale } from 'react-datepicker'\nimport AsyncSelect from 'react-select/async'\nimport 'react-datepicker/dist/react-datepicker.css'\nimport { addDays } from 'date-fns'\nimport { id } from 'date-fns/locale'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faFileAlt } from '@fortawesome/free-solid-svg-icons'\nimport './Input.css'\nregisterLocale('id', id)\n\nexport class InputFileNew extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n preview: '',\n file: null\n }\n\n this.handleChange = this.handleChange.bind(this)\n this.handleReset = this.handleReset.bind(this)\n this.ref = React.createRef()\n }\n\n componentDidUpdate () {\n if (!this.props.value) {\n this.ref.current.value = ''\n }\n }\n\n static getDerivedStateFromProps (props) {\n if (!props.value) {\n return { preview: '', file: null }\n }\n return null\n }\n\n handleChange (e) {\n if (e.target.files[0]) {\n const file = e.target.files[0]\n this.setState({ file: file })\n this.props.onChange(file)\n\n /**\n * if images\n */\n if (file.type.indexOf('image/') !== -1) {\n const reader = new window.FileReader()\n reader.onloadend = () => {\n this.setState({\n preview: reader.result\n })\n }\n\n reader.readAsDataURL(file)\n } else {\n this.setState({ preview: '' })\n }\n }\n }\n\n handleReset (e) {\n e.preventDefault()\n this.setState({\n preview: '',\n file: null\n }, () => {\n this.props.onChange('')\n this.ref.current.value = ''\n })\n }\n\n render () {\n let preview = ''\n if (this.state.file) {\n preview = (\n {SpinnerLoadFirst}
)\n : (\n <>\n \n \n \n
\n
\n \n )}\n | User | \n{LangActivity} | \n
|---|---|
| \n \n \n \n \n {item.user ? item?.user?.name : 'System'} \n\n {displayDate(item.created_at, 'DD MMM YYYY @ HH:mm')}\n \n{actLabel ?? '-'} \n | \n \n \n \n {subject?.component && React.cloneElement(subject?.component, { data: { ...getLogsValue(item), subject: subject }, ...addtionalProps })}\n \n {subject?.title} ID: {item?.subject_id}\n \n | \n
\n
\n \n
\n )\n }\n\n return (\n \n
\n {Delete}\n \n {\n (this.state.file.type.indexOf('image/') !== -1)\n ? (
)\n : (\n
\n \n
\n )\n }\n \n
{this.state.file.name}
\n({formatBytes(this.state.file.size)})
\n \n\n \n {(this.props.help) ? {this.props.help} : null}\n {preview}\n {(this.props.error)\n ?
\n )\n }\n}\n\nexport class InputFileImage extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n preview: '',\n file: null\n }\n\n this.handleChange = this.handleChange.bind(this)\n this.handleReset = this.handleReset.bind(this)\n this.ref = React.createRef()\n }\n\n componentDidUpdate () {\n if (!this.props.value) {\n this.ref.current.value = ''\n }\n }\n\n static getDerivedStateFromProps (props) {\n if (!props.value) {\n return { preview: '', file: null }\n }\n return null\n }\n\n handleChange (e) {\n if (e.target.files[0]) {\n const file = e.target.files[0]\n this.setState({ file: file })\n this.props.onChange(file)\n\n /**\n * if images\n */\n if (file.type.indexOf('image/') !== -1) {\n const reader = new window.FileReader()\n reader.onloadend = () => {\n this.setState({\n preview: reader.result\n })\n }\n\n reader.readAsDataURL(file)\n } else {\n this.setState({ preview: '' })\n }\n }\n }\n\n handleReset (e) {\n e.preventDefault()\n this.setState({\n preview: '',\n file: null\n }, () => {\n this.props.onChange('')\n this.ref.current.value = ''\n })\n }\n\n inputClicked (e) {\n e.preventDefault()\n this.ref.current.click();\n }\n\n render () {\n const inputProfilePic = {\n position: \"relative\",\n display: \"flex\",\n flexDirection: \"column\",\n }\n\n const editImgBtn = {\n border: \"3px solid #FFF\",\n width: \"48px\",\n height: \"48px\",\n borderRadius: \"50%\",\n backgroundColor: \"#7366ff\",\n color: \"#FFF\",\n position: \"relative\",\n alignSelf: \"flex-end\",\n top: \"-50px\",\n right: \"-10px\"\n }\n\n return (\n {this.props.error}
\n : null}\n \n
\n )\n }\n}\n\nclass AsyncSelectInputComponent extends React.Component {\n render () {\n const p = this.props\n\n const defaultBorderColor = p.redux.darkModeOn ? '#1d1e26' : '#ddd'\n\n const baseStyle = {\n control: (base, state) => ({\n ...base,\n borderColor: state.isFocused ? defaultBorderColor : !this.props.error ? defaultBorderColor : 'red',\n background: p.redux.darkModeOn ? '#1d1e26' : null,\n '&:hover': {\n borderColor: state.isFocused ? defaultBorderColor : !this.props.error ? defaultBorderColor : 'red'\n }\n }),\n menu: (base, state) => ({\n ...base,\n zIndex: 2,\n background: p.redux.darkModeOn ? '#1d1e26' : null,\n color: p.redux.darkModeOn ? '#bbb' : null\n }),\n input: base => ({\n ...base,\n color: p.redux.darkModeOn ? '#bbb' : null\n }),\n option: base => ({\n ...base,\n background: p.redux.darkModeOn ? '#1d1e26' : null,\n '&:hover': {\n background: p.redux.darkModeOn ? '#262932' : null\n }\n }),\n multiValueRemove: base => ({\n ...base,\n color: p.redux.darkModeOn ? '#535353' : null\n }),\n singleValue: base => ({\n ...base,\n color: p.redux.darkModeOn ? '#bbb' : null\n })\n }\n const customStyles = {\n control: (base, state) => ({\n ...base,\n minHeight: 30,\n borderColor: state.isFocused ? defaultBorderColor : !this.props.error ? defaultBorderColor : 'red',\n background: p.redux.darkModeOn ? '#1d1e26' : null,\n '&:hover': {\n borderColor: state.isFocused ? defaultBorderColor : !this.props.error ? defaultBorderColor : 'red'\n }\n }),\n menu: (base, state) => ({\n ...base,\n background: p.redux.darkModeOn ? '#1d1e26' : null\n }),\n dropdownIndicator: base => ({\n ...base,\n padding: 4\n }),\n clearIndicator: base => ({\n ...base,\n padding: 4\n }),\n // multiValue: base => ({\n // ...base,\n // backgroundColor: variables.colorPrimaryLighter\n // }),\n valueContainer: base => ({\n ...base,\n padding: '0px 6px'\n }),\n input: base => ({\n ...base,\n margin: 0,\n padding: 0,\n color: p.redux.darkModeOn ? '#bbb' : null\n }),\n option: base => ({\n ...base,\n background: p.redux.darkModeOn ? '#1d1e26' : null,\n '&:hover': {\n background: p.redux.darkModeOn ? '#262932' : null\n }\n }),\n multiValueRemove: base => ({\n ...base,\n color: p.redux.darkModeOn ? '#535353' : null\n }),\n singleValue: base => ({\n ...base,\n color: p.redux.darkModeOn ? '#bbb' : null\n })\n }\n\n return (\n \n
\n {\n this.props.error && !this.props.preview &&\n \n {this.props.error}\n
\n }\n\n
\n )\n }\n}\n\nexport class InputRangeYearMonthPicker extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n startDate: '',\n endDate: ''\n }\n\n this.handleChangeStartDate = this.handleChangeStartDate.bind(this)\n this.handleChangeEndDate = this.handleChangeEndDate.bind(this)\n }\n\n handleChangeEndDate (date) {\n this.setState({\n endDate: date\n }, () => {\n this.props.onChange({\n startDate: (this.state.startDate) ? moment(this.state.startDate).format('YYYY-MM-DD') : '',\n endDate: (this.state.endDate) ? moment(this.state.endDate).format('YYYY-MM-DD') : ''\n })\n })\n }\n\n handleChangeStartDate (date) {\n this.setState({\n startDate: date\n }, () => {\n this.props.onChange({\n startDate: (this.state.startDate) ? moment(this.state.startDate).format('YYYY-MM-DD') : '',\n endDate: (this.state.endDate) ? moment(this.state.endDate).format('YYYY-MM-DD') : ''\n })\n })\n }\n\n componentDidMount () {\n this.setState({\n startDate: (this.props.startDate) ? moment(this.props.startDate).toDate() : this.props.startDate,\n endDate: (this.props.endDate) ? moment(this.props.endDate).toDate() : this.props.endDate\n })\n }\n\n componentDidUpdate (prevProps) {\n if (this.props.startDate !== prevProps.startDate || this.props.endDate !== prevProps.endDate) {\n this.setState({\n startDate: (this.props.startDate) ? moment(this.props.startDate).toDate() : this.props.startDate,\n endDate: (this.props.endDate) ? moment(this.props.endDate).toDate() : this.props.endDate\n })\n }\n }\n\n render () {\n return (\n \n
\n -
\n \n
\n \n
\n )\n }\n}\n\nexport class InputYearPicker extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n selectedYear: '',\n }\n\n this.handleChangeYear = this.handleChangeYear.bind(this)\n }\n\n handleChangeYear (date) {\n this.setState({\n selectedYear: date\n }, () => {\n this.props.onChange({\n selectedYear: (this.state.selectedYear) ? moment(this.state.selectedYear).format('YYYY') : '',\n })\n })\n }\n\n componentDidMount () {\n this.setState({\n selectedYear: (this.props.year) ? moment(this.props.year).toDate() : this.props.year,\n })\n }\n\n // componentDidUpdate (prevProps) {\n // if (this.props.year !== prevProps.selectedYear) {\n // this.setState({\n // selectedYear: (this.props.year) ? moment(this.props.year).toDate() : this.props.year,\n // })\n // }\n // }\n\n render () {\n return (\n \n
\n {/* -
\n \n
*/}\n \n
\n )\n }\n}\n\nexport class InputDatePicker extends React.Component {\n render () {\n return (\n \n
\n \n {val ? ReactHtmlParser(val) : ''}\n
\n )\n}\n\nexport default connect(mapStateToProps)(Message)\n","import { connect, mapStateToProps, toRupiah } from '../../../../helpers/Common'\n\nconst Incomes = ({ redux, val }) => {\n return (\n \n \n \n
\n
\n )\n}\n\nexport default connect(mapStateToProps)(Incomes)\n","import { connect, mapStateToProps, toRupiah } from '../../../../helpers/Common'\n\nconst Deductions = ({ redux, val }) => {\n return (\n | Label | \nNominal | \n
|---|---|
| {item?.label} | \n{toRupiah(item?.value)} | \n
\n \n \n
\n
\n )\n}\n\nexport default connect(mapStateToProps)(Deductions)\n","import { AfterBreak, Break, Day, LangAttendIn, LangAttendOut, LangEmpty, Type, maxBreak } from '../../../../constant/languange'\nimport { connect, mapStateToProps } from '../../../../helpers/Common'\n\nconst Schedules = ({ redux, val }) => {\n return (\n | Label | \nNominal | \n
|---|---|
| {item?.label} | \n{toRupiah(item?.value)} | \n
\n \n \n
\n
\n )\n}\n\nexport default connect(mapStateToProps)(Schedules)\n","import { Name, PhoneNumber } from '../../../../constant/languange'\nimport { connect, mapStateToProps } from '../../../../helpers/Common'\n\nconst EmergencyContacts = ({ redux, val }) => {\n return (\n | {Day} | \n{Type} | \n{LangAttendIn} | \n{LangAttendOut} | \n{Break} | \n{AfterBreak} | \n{maxBreak} | \n
|---|---|---|---|---|---|---|
| {item?.day} | \n{item?.type_name || LangEmpty} | \n{item?.time_in || LangEmpty} | \n{item?.time_out || LangEmpty} | \n{item?.break_range_start || LangEmpty} | \n{item?.break_range_end || LangEmpty} | \n{item?.break_max_minutes || LangEmpty} | \n
\n \n \n
\n
\n )\n}\n\nexport default connect(mapStateToProps)(EmergencyContacts)\n","import { LangActive, LangAdded, LangAutomaticRenewalPeriod, LangDeleted, LangMonth, LangNo, LangRemainingLeave, LangYes } from '../../../../constant/languange'\nimport { connect, mapStateToProps } from '../../../../helpers/Common'\n\nconst AutoReloadAnnualLeave = ({ redux, val }) => {\n return (\n | {Name} | \n{PhoneNumber} | \n
|---|---|
| {item?.name} | \n{item?.phone_no} | \n
\n \n \n
\n
\n )\n}\n\nexport default connect(mapStateToProps)(AutoReloadAnnualLeave)\n","import { LangPerattendance, LangPermonth, LangSalaryType, Name } from '../../../../constant/languange'\nimport { connect, mapStateToProps } from '../../../../helpers/Common'\n\nconst Components = ({ redux, val }) => {\n return (\n | {LangActive} | \n{LangAutomaticRenewalPeriod} | \n{LangRemainingLeave} | \n
|---|---|---|
| {val.enabled === 1 ? LangYes : LangNo} | \n{val.period_month} {LangMonth} | \n{val.previous_annual_leave === 'add' ? LangAdded : LangDeleted} | \n
\n \n \n
\n
\n )\n}\n\nexport default connect(mapStateToProps)(Components)\n","import { Name } from '../../../../constant/languange'\nimport { connect, mapStateToProps } from '../../../../helpers/Common'\n\nconst Personnels = ({ redux, val }) => {\n return (\n | {Name} | \nNominal | \n{LangSalaryType} | \n
|---|---|---|
| {item?.name} | \n{item?.nominal} | \n{item?.period === 1 ? LangPermonth : item?.period === 2 ? LangPerattendance : ''} | \n
\n \n \n
\n
\n )\n}\n\nexport default connect(mapStateToProps)(Personnels)\n","import { Name } from '../../../../constant/languange'\nimport { connect, mapStateToProps } from '../../../../helpers/Common'\n\nconst Groups = ({ redux, val }) => {\n return (\n | {Name} | \n
|---|
| {item?.name} | \n
\n \n \n
\n
\n )\n}\n\nexport default connect(mapStateToProps)(Groups)\n","import { connect } from 'react-redux'\nimport { mapStateToProps } from '../../../../helpers/Common'\nimport { LangEmpty, LangNo, LangRequired, LangYes, Options } from '../../../../constant/languange'\n\nconst additionalFields = ({ redux, val }) => {\n const showOnForm = ['Datang', 'Pulang', 'Datang dan Pulang']\n return (\n | {Name} | \n
|---|
| {item?.name} | \n
\n \n \n
\n
\n )\n}\n\nexport default connect(mapStateToProps)(additionalFields)\n","import { LangApprovalLevel, LangApproved, LangBy, LangEmployeeDivisionSpv, LangPending, LangRejected, LangReviewer, LangStatus, LangUpdated } from '../../../../constant/languange'\nimport { connect, displayApproverName, mapStateToProps } from '../../../../helpers/Common'\n\nconst ApprovalSteps = ({ redux, val }) => {\n return (\n | Label | \nPlaceholder | \n{LangRequired} | \nForm | \n{Options} | \n
|---|---|---|---|---|
| {item?.label || LangEmpty} | \n{item?.placeholder || LangEmpty} | \n{item?.required ? LangYes : LangNo} | \n{item?.show_on_form ? showOnForm[+item.show_on_form - 1] : LangEmpty} | \n{item?.options?.length > 0\n ?
| \n
\n \n \n
\n
\n )\n}\n\nexport default connect(mapStateToProps)(ApprovalSteps)\n","import { LangApprovalLevel, LangApprovalRules, LangEmployeeDivisionSpv } from '../../../../constant/languange'\nimport { connect, mapStateToProps } from '../../../../helpers/Common'\n\nconst ApprovalRulesStep = ({ redux, val }) => {\n\n const displayApprovalStepDetail = (type, data) => {\n let text = []\n if (type === 'specific_position') {\n let manipulated = JSON.parse(JSON.stringify(data))\n const output = Object.values(manipulated.reduce((acc, ar) => {\n if (acc[ar.position])\n acc[ar.position].name += ' / ' + ar.name\n else\n acc[ar.position] = {...ar}\n return acc\n },{}))\n output?.forEach(item => {\n let temp = ''\n if(typeof item.name === 'string'){\n let nameArr = item.name.split(' / ')\n nameArr = nameArr.slice(0, 5)\n temp += ` (${nameArr.join(' / ')})`\n } else {\n temp += ` (${item.name})`\n }\n text.push(`${item.position} ${temp}`)\n })\n } else if (type === 'spv_of_employee' || type === 'specific_employee') {\n data?.forEach(item => {\n text.push(`${item.name}`)\n })\n }\n return text.join(' / ')\n }\n\n return (\n | {LangApprovalLevel} | \n{LangStatus} | \n{LangReviewer} | \n{LangUpdated} {LangBy} | \n
|---|---|---|---|
| {item?.order} | \n\n {\n item.status === 'pending' && {LangPending}\n }\n {\n item.status === 'approve' && {LangApproved}\n }\n {\n item.status === 'reject' && {LangRejected}\n }\n | \n{displayApproverName(item, LangEmployeeDivisionSpv)} | \n\n {\n item?.updated_by !== null &&\n item?.approver_type === 'spv_of_employee' ?\n `${LangEmployeeDivisionSpv} ${item?.updated_by?.name ? `(${item?.updated_by?.name})` : ''}`\n :\n item?.approver_type === 'spesific_position' ?\n item?.updated_by?.personnel?.position ? `${item?.updated_by?.personnel?.position.name} (${item?.updated_by?.name})` : `${item?.updated_by?.name}`\n :\n item?.updated_by?.name\n }\n | \n
\n \n \n
\n
\n )\n}\n\nexport default connect(mapStateToProps)(ApprovalRulesStep)\n","import { LangApplicableTo, LangSpesificDivision, LangSpesificEmployee2, LangSpesificPosition, LangTargetType } from '../../../../constant/languange'\nimport { connect, mapStateToProps } from '../../../../helpers/Common'\n\nconst ApprovalRulesTarget = ({ redux, val }) => {\n\n const displayType = (item) => {\n switch (true) {\n case item === 'specific_group': return LangSpesificDivision\n case item === 'specific_position': return LangSpesificPosition\n case item === 'specific_employee': return LangSpesificEmployee2\n }\n }\n return (\n | {LangApprovalLevel} | \n{LangApprovalRules} | \n
|---|---|
| {item?.order} | \n\n {\n item?.approver_type !== 'spv_of_employee' ?\n {displayApprovalStepDetail(item?.approver_type, item?.approver_details)}\n :\n {LangEmployeeDivisionSpv} {item?.approver_details && item?.approver_details.length !== 0 && `(${displayApprovalStepDetail(item?.approver_type, item?.approver_details)})`}\n }\n | \n
\n \n \n
\n
\n )\n}\n\nexport default connect(mapStateToProps)(ApprovalRulesTarget)\n","import { LangAdditionalFamilyMembers, LangBPJSKesehatanNumber, LangBPJSKetenagakerjaanNumber, LangEmpty, LangFamilyMembers, LangParticipationDate, LangRegisteredSalary } from '../../../../constant/languange'\nimport { connect, mapStateToProps, toRupiah } from '../../../../helpers/Common'\n\nconst BPJSConfig = ({ redux, val }) => {\n return (\n | {LangTargetType} | \n{LangApplicableTo} | \n
|---|---|
| {displayType(item?.type)} | \n\n {item?.value_details?.group?.length !== 0 && item?.value_details?.group?.join(', ')}\n {item?.value_details?.position?.length !== 0 && item?.value_details?.position?.join(', ')}\n {item?.value_details?.name?.length !== 0 && item?.value_details?.name?.join(', ')}\n | \n
\n
\n )\n}\n\nexport default connect(mapStateToProps)(BPJSConfig)\n","import { LangPositionAttendanceTargets, Spot } from '../../../../constant/languange'\nimport { connect, mapStateToProps } from '../../../../helpers/Common'\n\nconst PositionAttendanceTarget = ({ redux, val }) => {\n return (\n BPJS Ketenagakerjaan
\n - \n
- \n \n \n\n\n {val.bpjs_tk_date ? val.bpjs_tk_date : LangEmpty}\n\n \n
- \n \n \n\n\n {val.bpjs_tk_number ? val.bpjs_tk_number : LangEmpty}\n\n \n
- \n \n \n\n\n {val.bpjs_tk_wages ? `Rp${toRupiah(val?.bpjs_tk_wages)}` : LangEmpty}\n\n \n
BPJS Kesehatan
\n - \n
- \n \n \n\n\n {val.bpjs_kesehatan_date ? val.bpjs_kesehatan_date : LangEmpty}\n\n \n
- \n \n \n\n\n {val.bpjs_kesehatan_number ? val.bpjs_kesehatan_number : LangEmpty}\n\n \n
- \n \n \n\n\n {val.bpjs_kesehatan_wages ? `Rp${toRupiah(val?.bpjs_kesehatan_wages)}` : LangEmpty}\n\n \n
- \n \n \n\n\n {val.bpjs_kesehatan_family_member ? val?.bpjs_kesehatan_family_member : LangEmpty}\n\n \n
- \n \n \n\n\n {val.bpjs_kesehatan_additional_family ? val?.bpjs_kesehatan_additional_family : LangEmpty}\n\n \n
\n \n \n
\n
\n )\n}\n\nexport default connect(mapStateToProps)(PositionAttendanceTarget)\n","import { connect, displayDate, durationFromSeconds, formatFieldValue, mapDispatchToProps, mapStateToProps, moment, toRupiah } from '../../helpers/Common'\nimport { groupFieldKeysArray, personnelFieldKeysArray } from '../../constant/HistoryFieldLanguageConstant'\nimport { Day, Hours, LangActive, LangAutomatic, LangContinuedOtherDay, LangCutiTahunan, LangDay, LangDayOff, LangDays, LangDone, LangEmpty, LangInReview, LangLeaveApproved, LangLeaveRejected, LangManual, LangMaxApprovalBefore, LangMaxApprovalH, LangMonth, LangNo, LangNonActive, LangNotActive, LangNotSetYet, LangNotStarted, LangOnProcess, LangPending2, LangReminderDayInfo, LangSpecialLeave, LangTimes, LangUnpaidLeave, LangYes, Minutes, Seconds, WorkingDay } from '../../constant/languange'\nimport { overtimeType, salaryType } from '../../constant/PayrollConstants'\nimport { genderType } from '../../constant/PersonnelConstant'\nimport { statusName } from '../../constant/CommonConstant'\nimport { categoryReciver, statusBroadcast } from '../../constant/BroadcastConstant'\nimport Message from './history-component/broadcast/Message'\nimport Incomes from './history-component/payroll/Incomes'\nimport Deductions from './history-component/payroll/Deductions'\nimport Schedules from './history-component/work-pattern/Schedules'\nimport EmergencyContacts from './history-component/personnel/EmergencyContacts'\nimport AutoReloadAnnualLeave from './history-component/personnel/AutoReloadAnnualLeave'\nimport Components from './history-component/personnel/Components'\nimport Personnels from './history-component/spot/Personnels'\nimport Groups from './history-component/spot/Groups'\nimport AdditionalFields from './history-component/client/additionalFields'\nimport ApprovalSteps from './history-component/leave-request/ApprovalSteps'\nimport ApprovalRulesStep from './history-component/approval-rules/ApprovalRulesStep'\nimport ApprovalRulesTarget from './history-component/approval-rules/ApprovalRulesTarget'\nimport BPJSConfig from './history-component/personnel/BPJSConfig'\nimport PositionAttendanceTarget from './history-component/position/PositionAttendanceTarget'\n\nconst activationFormat = (data, key) => {\n return formatFieldValue(data[key], (val) => { return +val ? LangActive : LangNonActive })\n}\n\nconst currencyFormat = (data, key) => {\n return formatFieldValue(data[key], (val) => { return `Rp${toRupiah(val)}` })\n}\n\nconst dateFormat = (data, key, format) => {\n return formatFieldValue(data[key], (val) => { return val ? displayDate(val, format ?? 'DD MMM YYYY') : null })\n}\n\nconst dateTimeFormat = (data, key, format) => {\n return formatFieldValue(data[key], (val) => { return val ? displayDate(val, format ?? 'DD MMM YYYY @ HH:mm') : null })\n}\n\nconst durationFormat = (data, key, format) => {\n return formatFieldValue(data[key], (val) => { \n let formatted = ''\n if (val === 0) {\n formatted = 0\n } else {\n formatted = moment.utc(val * 1000).format(`HH [${Hours}] mm [${Minutes}] ss [${Seconds}]`)\n }\n return val !== null ? formatted : null \n })\n}\n\nconst minuteFormat = (data, key) => {\n return formatFieldValue(data[key], (val) => { return `${val} min` })\n}\n\nconst hourStringFormat = (data, key, currentFormat, newFormat) => {\n return formatFieldValue(data[key], (val) => { return val ? moment(val, currentFormat ?? 'HH:mm:ss').format(newFormat ?? 'HH:mm') : null })\n}\n\nexport const fileIdentityFormat = (data, key) => {\n return formatFieldValue(data[key], (val) => { return val })\n}\n\n/**\n * Personnel Document Format\n * ---------------------------------------------------------------------------------------------------------------------------------------------------------\n */\nexport const personnelDocumentFormat = (data, key) => {\n const formatData = {\n expired_at: () => { return dateFormat(data, key) },\n reminder_days: () => {\n return formatFieldValue(data[key], (val) => `${val} ${LangReminderDayInfo}`)\n },\n is_enable_reminder: () => {\n return formatFieldValue(data[key], (val) => `${val ? LangYes : LangNo}`)\n }\n }\n\n return formatData[key] ? formatData[key]() : data[key]\n}\n\n/**\n * payroll bonus Format\n * ---------------------------------------------------------------------------------------------------------------------------------------------------------\n */\nexport const payrollFieldFormat = (data, key) => {\n const formatData = {\n incomes: () => {\n return formatFieldValue(data[key], (val) => {\n return (\n <>\n {val?.length > 0\n ? (| {Spot} | \n{LangPositionAttendanceTargets} (%) | \n
|---|---|
| {item?.spot} | \n{item?.attendance_target} | \n
\n \n \n {val.length !== 0 ? (val.map((item, i) => (\n
\n
\n )\n })\n },\n approval_steps: () => {\n return formatFieldValue(data[key], (val) => {\n return (\n <>\n {val?.length > 0\n ? (| {displayDate(item, 'DD MMM YYYY')} | \n
- \n {val.map((item, idx) => (\n
- \n {item.name} \n
Rp{toRupiah(item.nominal ?? '')}\n \n ))}\n
\n {item.value\n ? (\n
\n )\n}\n\nexport default HistoryItemChangeFieldComponent\n","import React from 'react'\nimport { LangEmpty, LangNotSetYet } from '../../constant/languange'\n\nfunction HistoryItemFieldComponent ({ item, ...props }) {\n const itemValue = (value, children) => {\n return value == null || typeof value === 'string' || typeof value === 'number'\n ? {children}\n : {children}\n }\n\n return (\n \n {LangChanged} {item?.label}: \n {itemValue(\n item?.value?.before,\n <>\n {item.value\n ? item?.value?.before !== undefined\n // ? item?.value?.before ? typeof item?.value?.before === 'object' ? payrollDeduction[item?.value?.before?.is_exclude_deduction] : item?.value?.before : LangEmpty\n ? item?.value?.before ?? LangEmpty\n : LangNotSetYet\n : LangNotSetYet}\n \n )}\n
\n {item.value\n ? (\n
\n )\n}\n\nexport default HistoryItemFieldComponent\n","export const getAdditionalFieldsValues = (data) => {\n const before = data?.before ?? null\n const after = data?.after ?? null\n\n if (after && before) {\n let result = {}\n const afterResult = []\n const beforeResult = []\n after.forEach((item, i) => {\n if ((item?.label !== before[i]?.label || item?.placeholder !== before[i]?.placeholder || item?.required !== before[i]?.required || item?.show_on_form !== before[i]?.show_on_form || item?.options !== before[i]?.options)) {\n afterResult.push({ ...item })\n beforeResult.push({ ...before[i] })\n }\n })\n result = { after: afterResult, before: beforeResult }\n return result\n } else {\n const result = data.map((item, i) => {\n return item\n })\n return result\n }\n}\n","import { checkAttributesEqualityArrayOfObject, checkAttributesEqualityObject } from './helper'\n\nexport function checkAttrValue (data, attrName, formData) {\n if (data?.data?.attr?.after[attrName] && data?.data?.attr?.before[attrName]) {\n const afterData = data?.data?.attr?.after[attrName]\n const beforeData = data?.data?.attr?.before[attrName]\n\n if (formData === 'arrayofobject') {\n if (checkAttributesEqualityArrayOfObject(afterData, beforeData)) {\n delete data.data[attrName]\n }\n }\n\n if (formData === 'object') {\n if (checkAttributesEqualityObject(afterData, beforeData)) {\n delete data.data.auto_reload_annual_leave\n }\n }\n }\n}\n","export function checkAttributesEqualityArrayOfObject (arr1, arr2) {\n if (arr1.length !== arr2.length) {\n return false // Arrays have different lengths\n }\n\n for (let i = 0; i < arr1.length; i++) {\n const obj1 = arr1[i]\n const obj2 = arr2[i]\n\n for (const key in obj1) {\n if (obj1[key] !== obj2[key]) {\n return false // Attribute values are different\n }\n }\n }\n\n return true // All attributes are equal\n}\n\nexport const checkAttributesEqualityObject = (obj1, obj2) => {\n for (const key in obj1) {\n if (obj1.hasOwnProperty(key) && obj2.hasOwnProperty(key)) {\n if (obj1[key] !== obj2[key]) {\n return false\n }\n } else {\n return false\n }\n }\n return true\n}\n","import React, { useEffect, useState } from 'react'\nimport { getScheduleValues } from '../../constant/WorkPatternsConstant'\nimport { destructuringObjectFields } from '../../helpers/Common'\nimport HistoryItemChangeFieldComponent from '../common/HistoryItemChangeFieldComponent'\nimport HistoryItemFieldComponent from './HistoryItemFieldComponent'\nimport { getAdditionalFieldsValues } from '../../constant/ClientVisitClientConstant'\nimport { checkAttrValue } from './CheckAttrActivityLog/checker'\nimport { LangNo, LangYes } from '../../constant/languange'\n\nexport const HistoryItemComponent = ({ data, ...props }) => {\n // check attr value equality\n if (data.action_name === 'modify') {\n checkAttrValue(data, 'emergency_contacts', 'arrayofobject') // personnel/emergency contact\n checkAttrValue(data, 'auto_reload_annual_leave', 'object') // personnel/auto reload cuti\n checkAttrValue(data, 'approval_steps', 'arrayofobject') // leave-request/approval steps\n }\n\n const {\n // name = null,\n attr = null\n } = data.data\n const { subject = {} } = data\n\n const [dataChange, setDataChange] = useState([])\n\n useEffect(() => {\n handleDataChanging()\n // eslint-disable-next-line\n }, [data.data])\n\n const handleDataChanging = () => {\n // checking if attr fields exist\n // if exists fields inside of attr will destructuring into history format\n const attrChangingFields = (data?.action_name === 'modify' && attr && subject?.obj_attr_fields) ? destructuringObjectFields(attr, subject?.obj_attr_fields ?? {}) : null\n\n const fieldValue = { ...data.data, ...attrChangingFields, ...handleCertainData() }\n const fields = Object.keys(subject?.changing_fields ?? {}).map((key, i) => {\n return ({\n label: subject?.changing_fields ? subject?.changing_fields[key] || '' : '',\n value: fieldValue[key] ? subject?.formated_fields ? subject?.formated_fields(fieldValue, key) : fieldValue[key] : null\n })\n })\n\n setDataChange([...fields])\n }\n\n const handleCertainData = () => {\n if (subject?.value === 'WorkPattern') {\n if (data.data.schedules != null) {\n return { schedules: getScheduleValues(data.data.schedules) }\n }\n }\n\n if (subject?.value === 'ClientVisitClient') {\n if (data.data.additional_fields != null) {\n return { additional_fields: getAdditionalFieldsValues(data.data.additional_fields) }\n }\n }\n\n if (subject?.value === 'Permit') {\n if (data.action_name === 'add') {\n const payrollDeduction = [LangYes, LangNo]\n return { is_exclude_deduction: data.data.is_exclude_deduction !== null ? payrollDeduction[data.data.is_exclude_deduction] : null }\n }\n }\n\n if (subject?.value === 'Personnel') {\n if(data.action_name === 'delete') {\n return { auto_reload_annual_leave: '', bpjs_config: '' }\n }\n }\n }\n\n return (\n <>\n \n {item?.label}: \n {itemValue(\n item?.value,\n <>\n {/* {item?.label === AdditionalField\n ? <>{item?.label === AdditionalField && item?.value ? item.value : LangNotSetYet}\n : <>{item?.value !== undefined\n ? item?.value ? typeof item?.value !== 'object' ? item?.value : LangNotSetYet : LangEmpty\n : LangNotSetYet} */}\n {item.value\n ? item?.value !== undefined\n ? item?.value ?? LangEmpty\n : LangNotSetYet\n : LangNotSetYet}\n \n )}\n
\n )\n : null}\n\n {dataChange.map((item, i) => {\n return (\n \n {data.action_name === 'modify'\n ? ( \n )\n })}\n
\n \n )\n}\n\nexport default HistoryItemComponent\n","import React from 'react'\nimport { AttendanceSpot, DailyAttendance, Group, LangApprovalRules, LangAttendanceApproval, LangAttendanceRevision, LangClaimRequest, LangClaimType, LangClient, LangClientVisit, LangClientVisitSchedule, LangCreated, LangDeduction, LangDeleted, LangDeviceApproval, LangDocuments, LangEdited, LangEmployee, LangEmployeeIdentityFile, LangHolidayCalendar, LangJob, LangLateCharge, LangLeave, LangLeaveHourRequest, LangOvertimeSchedule, LangPayroll, LangPayrollBulkAction7, LangPermit, LangPersonnelClaim, LangPintuKerjooAttendanceApproval2, LangPosition, LangProfilePhotoApproval, LangProject, LangSpecialLeave, Shift, ShiftWorkTime, WorkDay, WorkPattern, WorkTime } from './languange'\nimport { approvalFields, attendanceAttrFields, attendanceEditRequestFields, attendanceFields, broadcastFields, clientVisitFields, deviceApprovalFields, groupAttrFields, groupFields, groupLateFields, holidayFields, leaveRequestHourFields, payrollDeductionFields, permitLeaveFields, personnelAttrFields, personnelFields, shiftPatternFields, spotFields, workPatternFields, workShiftFields, workTimeFields, payrollBonusFields, clientFields, payrollFields, fileIdentityFields, personnelDocumentFields, reimbursementFields, reimbursementPersonnelFields, reimbursementRequestFields, specialLeaveFields, timesheetActivityFields, timesheetProjectFields, overtimeScheduleFields, approvalRuleFields, personnelProfilePictureRequestFields, pintuKerjooApprovalRequestFields, positionFields, clientVisitScheduleFields, leaveRequestDateFields } from './HistoryFieldLanguageConstant'\nimport { approvalFieldFormat, attendanceEditRequestFieldFormat, attendanceFieldFormat, broadcastFieldFormat, clientVisitFieldFormat, deviceApprovalFieldFormat, groupFieldFormat, groupLateFieldFormat, holidayFieldFormat, leaveRequestHourFieldFormat, payrollDeductionFieldFormat, payrollBonusFieldFormat, permitLeaveFieldFormat, personnelFieldFormat, shiftPatternFieldFormat, spotFieldFormat, workPatternFieldFormat, workShiftFieldFormat, workTimeFieldFormat, clientFieldFormat, payrollFieldFormat, fileIdentityFormat, personnelDocumentFormat, reimbursementFieldFormat, reimbursementPersonnelFieldFormat, reimbursementRequestFieldFormat, specialLeaveFieldFormat, timesheetActivityFieldFormat, timesheetProjectFieldFormat, overtimeScheduleFieldFormat, approvalRuleFieldFormat, personnelProfilePictureRequestFieldFormat, pintuKerjooApprovalRequestFieldsFormat, positionFieldFormat, clientVisitScheduleFieldFormat, leaveRequestDateFieldFormat } from '../components/common/HistoryItemFieldFormat'\nimport HistoryItemComponent from '../components/common/HistoryItemComponent'\n\n/**\n *\n * activity histories item property for each loggable data\n * attributes contain\n * title: title that display on ui\n * value: name of modules\n * component: history item component item\n * changing_fields: list of fields from api that want to display to ui\n * obj_attr_fields: list of fields inside attribute index api,\n * formated_fields: formatted fileds; ex: dates, currency, table\n *\n */\n\nexport const activityLogsItem = {\n 'App\\\\TenantModels\\\\ClientVisitClient': {\n title: `${LangClient}`,\n color: '#93DA3F',\n value: 'ClientVisitClient',\n component: - \n {\n routes.map((item, i) => (\n {item.title}\n ))\n }\n
\n \n \n { history.push('/dashboard') }}>{Home} \n { setControl({ ...control, showModal: true }) }}>{ManageEmployees} \n {subRoute !== ''\n ? (\n {subRoute} \n )\n : (\n subRoutes.map((item, i) => {\n const data = route[routeType][item]\n return (\n { (subRoutes.length !== (i + 1)) && history.push({ pathname: data.link, state: { filter: JSON.parse(localStorage.getItem('filterPersonnel')) || '' } }) }} active={subRoutes.length === (i + 1)}>\n {data.name}\n \n )\n })\n )}\n \n \n
\n
\n {title}
\n\n
\n {errorMessage !== '' && (
\n )\n}\n\nexport default connect(mapStateToProps)(ModalConfirmComponent)\n","import React from 'react'\nimport { isLangEN } from '../../constant/languange'\n\nconst OrderAgreement = () => {\n return isLangEN\n ? (\n {caption ?? LangActionConfirm}
\n\n {errorMessage !== '' && (
{errorMessage}
)}\n {successMessage && ({successMessage}
)}\n {!successMessage && (\n <>\n \n \n \n )}\n \n By continuing, you agree to Kerjoo's Terms & Conditions of Service and Privacy .\n
\n )\n : (\n\n Dengan melanjutkan, Anda menyetujui S&K Layanan dan Privasi Kerjoo.\n
\n )\n}\n\nexport default OrderAgreement\n","import React from 'react'\nimport { Container, Row, Col, Breadcrumb, BreadcrumbItem } from 'reactstrap'\nimport { Home } from '../../constant/languange'\nimport { Link } from 'react-router-dom'\n\nconst Breadcrumbs = (props) => {\n return (\n <>\n\n \n \n {Home} \n {props.child} \n {props.subChild ? {props.title} : null}\n \n \n
\n
\n {props.title}
\n{errors.message}
: SpinnerLoadFirst}\n\n // return (\n // \n //
\n // )\n}\n\nexport default connect(mapStateToProps)(OrderSummaryComponent)\n","import React, { useState, useEffect } from 'react'\nimport { connect } from 'react-redux'\nimport { Close, LangAutoAddToday, LangAutoAdded, LangAutomaticRenewalPeriod, LangFirstGetAnnualLeave, LangFirstThing, LangImportCancel, LangMonth, LangNo, LangNoPrevSettings, LangOnWhen, LangPlease, LangProcess, LangRemainingLeave, LangSetWorkStartDate, LangStartSetup, LangStartWorkOn, LangSuccess, LangTurnOnSettings, LangYes } from '../../constant/languange'\nimport { axiosCompany, checkAuthorization, displayDate, mapDispatchToProps, mapStateToProps, SpinnerLoadFirst } from '../../helpers/Common'\nimport { SpinnerButton } from '../../helpers/Spinner'\nimport moment from 'moment'\n\nfunction PersonnelLeaveUpdateComponent ({ redux, setState, currentData, getPersonnelsService, ...props }) {\n const initData = { period_month: 12, previous_annual_leave: 'add', enabled: 1 }\n\n const [errors, setError] = useState({ fields: [], message: '' })\n const [control, setControl] = useState({ showLoad: false })\n const [data, setData] = useState(initData)\n const [loadData, setLoadData] = useState(false)\n const [notSettingYet, setNotSettingYet] = useState(false)\n const [autoReloadDate, setAutoReloadDate] = useState({ next_period: null })\n\n useEffect(() => {\n getDataService()\n // eslint-disable-next-line\n }, [])\n\n useEffect(() => {\n getAutoReloadDate()\n // eslint-disable-next-line\n }, [data.period_month])\n\n const getDataService = () => {\n setLoadData(true)\n axiosCompany().get(`/personnels/${currentData.id}/auto-reload-annual-leave`)\n .then(res => {\n if (Array.isArray(res.data) && res.data.length === 0) setNotSettingYet(true)\n setLoadData(false)\n setData({ ...data, ...res.data })\n })\n .catch(() => {\n setLoadData(false)\n })\n }\n\n const getAutoReloadDate = () => {\n axiosCompany().get(`/personnels/${currentData.id}/auto-reload-annual-leave-check-next-period`, { params: { period_month_setting: data.period_month } })\n .then(res => {\n setAutoReloadDate(res.data)\n })\n }\n\n const postDataService = (e) => {\n e.preventDefault()\n\n setControl({ ...control, showLoad: true, success: false })\n axiosCompany().post(`/personnels/${currentData.id}/auto-reload-annual-leave`, { ...data, id: currentData.id })\n .then(res => {\n setError({ fields: [], message: '' })\n setControl({ ...control, showLoad: false, success: true })\n if (typeof getPersonnelsService === 'function') getPersonnelsService()\n }).catch(e => {\n setError(error => {\n error.fields = e.response.data.errors ? e.response.data.errors : { 0: [e.response.statusText] }\n error.message = e.response.data.message ? e.response.data.message : ''\n return { ...error }\n })\n setControl({ ...control, showLoad: false })\n })\n }\n\n return (\n <>\n {loadData\n ? SpinnerLoadFirst\n : (\n <>\n {!currentData.start_work\n ? (\n {errors.message}
\n
\n )\n : (\n <>\n {notSettingYet\n ? (\n {LangPlease} {LangFirstThing}
\n{LangNoPrevSettings} {checkAuthorization(redux, 'employee.update') && ()}
\n )\n : (\n <>\n \n Info\n
\n\n \n \n )}\n \n\n )}\n \n\n )}\n \n\n )\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(PersonnelLeaveUpdateComponent)\n","import React, { useState, useEffect } from 'react'\nimport { connect } from 'react-redux'\nimport { axiosCompany, displayDate, mapDispatchToProps, mapStateToProps, SpinnerLoadFirst } from '../../helpers/Common'\nimport { LangAmountReqLeave, LangBalanceReqLeave, LangDataEmpty, LangDescription, LangTransactionDate } from '../../constant/languange'\n\nfunction PersonnelLeaveHistoryComponent ({ redux, currentData }) {\n const initData = { data: [], links: {}, meta: {} }\n const [data, setData] = useState(initData)\n const [loadData, setLoadData] = useState(false)\n\n useEffect(() => {\n getDataService()\n // eslint-disable-next-line\n }, [])\n\n const getDataService = () => {\n setLoadData(true)\n axiosCompany().get(`/personnels/${currentData.id}/annual-leave-transactions`)\n .then(res => {\n setLoadData(false)\n setData({ ...res.data })\n })\n .catch(() => {\n setLoadData(false)\n })\n }\n\n return (\n <>\n {loadData\n ? SpinnerLoadFirst\n : (\n <>\n {LangStartWorkOn} {displayDate(currentData.start_work, 'DD MMM YYYY')}, {LangFirstGetAnnualLeave} {displayDate(moment(currentData.start_work).add(1, 'years').format('YYYY-MM-DD'), 'DD MMM YYYY')}.
\n\n\n \n \n
\n
\n \n )}\n \n\n )\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(PersonnelLeaveHistoryComponent)\n","import React, { useState, useEffect } from 'react'\nimport axios from 'axios'\nimport {\n Link,\n HashRouter,\n Switch,\n Route,\n Redirect,\n useParams,\n useHistory,\n useLocation\n} from 'react-router-dom'\nimport { createStore } from 'redux'\nimport { Provider, connect } from 'react-redux'\nimport Cookies from 'universal-cookie'\nimport {\n SpinnerDiv,\n SpinnerButton,\n SpinnerLoadFirst,\n SpinnerLoadPages\n} from './Spinner'\nimport Pagination from 'react-js-pagination'\nimport httpBuildQuery from 'http-build-query'\nimport moment from 'moment-timezone'\nimport 'moment/locale/id'\nimport defaultPicture from '../assets/images/default/profile.png'\nimport logoDark from '../assets/images/logo/dark.svg'\nimport logoLight from '../assets/images/logo/light.svg'\nimport fileDownload from 'js-file-download'\n\nconst cookies = new Cookies()\nconst myStorage = window.sessionStorage\n\nconst apiUrl = process.env.REACT_APP_API_URL\n\nfunction toRupiah(angka) {\n let rupiah = ''\n const angkarev = angka.toString().split('').reverse().join('')\n for (let i = 0; i < angkarev.length; i++) if (i % 3 === 0) rupiah += angkarev.substr(i, 3) + '.'\n return rupiah.split('', rupiah.length - 1).reverse().join('')\n}\n\n/**\n * setup moment locale\n */\nmoment.locale((cookies.get('lang') === 'EN') ? 'en' : 'id')\n\n/**\n * setup redux\n */\n\nconst mapStateToProps = (state) => {\n return {\n redux: state,\n getStateModule\n }\n\n function getStateModule(module, key) {\n if (state.modules && state.modules[module]) {\n // jika ada key, returnkan sesuai key\n if (key) {\n return state.modules[module][key] || null\n } else {\n return state.modules[module]\n }\n } else {\n return null\n }\n }\n}\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n setState: (change) => dispatch({ type: 'SET_STATE', change }),\n setStateModule: (module, change) => dispatch({ type: 'SET_STATE_MODULE', module, change })\n }\n}\n\nconst initialState = {\n authed: false,\n serviceWorkerUpdated: false,\n annualLeave: '',\n profile: {},\n company: {},\n modules: {},\n notifications: {},\n isTourOpen: false, // state untuk component reacttour\n openIndicator: false, // state modal tasklist tour guide\n tourName: '', // nama task tour guide yang sedang dikerjakan\n isUpdateStats: 0,\n stats: null,\n isStopTour: false, // fitur tour guide enable atau tidak\n notFirstLogin: 0,\n featureLimitation: {},\n mainMenu: []\n}\n\n/**\n * create store redux\n */\nconst store = createStore((state = initialState, action) => {\n let stateModule = null\n\n switch (action.type) {\n case 'SET_STATE':\n return Object.assign({}, state, action.change)\n\n case 'SET_STATE_MODULE':\n stateModule = Object.assign({}, state.modules)\n if (stateModule[action.module]) {\n if (action.change === null) {\n delete stateModule[action.module]\n } else {\n stateModule[action.module] = Object.assign({}, stateModule[action.module], action.change)\n }\n } else {\n stateModule[action.module] = action.change\n }\n\n return Object.assign({}, state, { modules: stateModule })\n\n default:\n return state\n }\n}, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())\n\n/**\n * setup instance axios yang sudah ke url company dan auth token cookie\n */\nconst axiosCompany = () => {\n return axios.create({\n baseURL: store.getState().profile.company_api_url,\n headers: {\n Authorization: `Bearer ${cookies.cookies.token}`\n }\n })\n}\n\nexport const axiosCompanyFile = () => {\n return axios.create({\n baseURL: store.getState().profile.company_api_url,\n headers: {\n Authorization: `Bearer ${cookies.cookies.token}`\n },\n responseType: 'blob'\n })\n}\n\n/**\n * displayDate untuk menampilkan tgl dari UTC ke timezone user\n *\n * @param sring dateUTC Y-m-d, atau Y-m-d H:i:s\n * @param string displayFormat https://momentjs.com/docs/#/displaying/format/\n */\nfunction displayDate(dateUTC, displayFormat) {\n return moment.tz(dateUTC, 'UTC').tz(store.getState().profile.timeZone).format(displayFormat || 'DD MM YYYY')\n}\n\nfunction displayScheduleTime(strTime) {\n const a = strTime.split(':')\n return `${a[0]}:${a[1]}`\n}\n\nfunction isBeforeNow(strDate) {\n return moment(strDate).isBefore(moment(), 'day')\n}\n\n/**\n * sendDate untuk mengirim tgl local dan diformat ke UTC\n *\n * @param string dateLocal Y-m-d\n */\nfunction sendDate(dateLocal) {\n const dateParam = moment(dateLocal + ' ' + moment().format('HH:mm:ss'), 'YYYY-MM-DD HH:mm:ss')\n\n /**\n * konversi ke utc\n */\n return dateParam.tz('UTC').format('YYYY-MM-DD')\n}\n\nclass PaginationComponent extends React.Component {\n render() {\n return (\n <>\n | {LangTransactionDate} | \n{LangDescription} | \n{LangAmountReqLeave} | \n{LangBalanceReqLeave} | \n
|---|---|---|---|
| {displayDate(item.created_at, 'DD MMM YYYY @ HH:mm')} | \n{item.resource} | \n{item.amount >= 0 ? '+' : null}{item.amount} | \n{item.saldo} | \n
| {LangDataEmpty} |
\n
\n :\n \n
\n \n
\n }\n \n\n\n // \n {(cookies.get('lang') === 'EN')\n ? (\n Showing {toRupiah(data.data.length)} from {toRupiah(data.meta.total)} entries\n )\n : (\n Menampilkan {toRupiah(data.data.length)} dari {toRupiah(data.meta.total)} total data\n )}\n
\n \n
\n \n //
\n )\n}\n\nexport const supervisorCanView = (item, checkField) => {\n let group = null\n const isSupervisor = store.getState().profile.supervisor_groups\n if (isSupervisor) group = store.getState().groups.find(group => group.id === item.personnel.group_id)\n\n switch (checkField) {\n case 'spv_can_view_map':\n return isSupervisor ? +group.attr.spv_can_view_map : true\n case 'spv_can_view_selfie':\n return isSupervisor ? (item?.attr?.selfie && +group.attr.spv_can_view_selfie) : item?.attr?.selfie\n case 'spv_can_view_device_info':\n return isSupervisor ? (item?.attr?.device_info && +group.attr.spv_can_view_device_info) : item?.attr?.device_info\n case 'spv_can_edit_attendance':\n return isSupervisor ? +group.attr.spv_can_edit_attendance : true\n case 'spv_can_edit_document':\n return isSupervisor ? +group.attr.spv_can_edit_document : true\n default:\n return true\n }\n}\n\nexport const setAnnualLeaveLabel = (input, lang = 'id') => {\n const key = lang === 'id' ? 'annual_label_id' : 'annual_label_en'\n const annualLang = lang === 'id' ? 'Cuti' : 'Annual Leave'\n cookies.set(key, input || annualLang)\n}\n\nconst axiosDownloadFile = (blobData, fileName = '', fileType = '') => {\n const url = window.URL.createObjectURL(new window.Blob([blobData]))\n const link = document.createElement('a')\n link.href = url\n link.setAttribute('download', `${fileName}.${fileType}`)\n document.body.appendChild(link)\n link.click()\n}\n\nconst ShowImageSpesific = ({ picture, size = 's', ...props }) => {\n const [url, setUrl] = useState(null)\n const [control, setControl] = useState({ showLoad: false })\n\n const getImage = (path) => {\n setControl({ ...control, showLoad: true })\n axios.get(path, {\n headers: {\n Authorization: `Bearer ${cookies.cookies.token}`\n },\n responseType: 'blob'\n }).then((res) => {\n const blob = new window.Blob([res.data], {\n type: res.headers['content-type']\n })\n const objectURL = URL.createObjectURL(blob)\n setUrl(objectURL)\n }).finally(() => {\n setControl({ ...control, showLoad: false })\n })\n }\n\n useEffect(() => {\n Object.keys(picture).length !== 0 ? getImage(picture[size]) : setUrl(defaultPicture)\n // eslint-disable-next-line\n }, [picture])\n\n return (\n control.showLoad\n ? \n // {(cookies.get('lang') === 'EN')\n // ? (\n // Showing {toRupiah(data.data.length)} from {toRupiah(data.meta.total)} entries\n // )\n // : (\n // Menampilkan {toRupiah(data.data.length)} dari {toRupiah(data.meta.total)} total data\n // )}\n //
\n // \n //
\n // \n //
\n // \n //
\n // \n \n
\n \n \n
\n \n \n
\n \n {data.target_count} {LangEmployee}\n
\n \n
\n
\n \n\n )\n}\n\nexport default connect(mapStateToProps)(PersonnelExportComponent)\n","import { faMoneyCheck, faUserEdit, faUserPlus } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport React from 'react'\nimport { connect } from 'react-redux'\nimport { LangAddEmployee, LangBPJSEmployee, LangOutOfQuota, LangOutOfQuotaMessage, LangSubscriptionSetting, LangUpdateEmployee } from '../../constant/languange'\nimport { checkAuthorization, Link, mapStateToProps } from '../../helpers/Common'\nimport { PopoverBody, PopoverHeader, UncontrolledPopover } from 'reactstrap'\n\nfunction PersonnelImportComponent({ redux, setControl, canAdd }) {\n return (\n <>\n \n {errors.message ? : null}\n\n \n \n\n
\n {errors.message}
\n \n {!canAdd && (\n \n \n {LangOutOfQuota}\n \n \n \n \n )}\n \n \n
\n \n )\n}\n\nexport default connect(mapStateToProps)(PersonnelImportComponent)\n","import React, { useState } from 'react'\nimport { connect } from 'react-redux'\nimport { categoryReciver } from '../../constant/BroadcastConstant'\nimport { Action, Close, Division, LangActionSuccessMessage, LangActiveMonth, LangAdd, LangAddeddValue, LangBulkActionWarning, LangDeletedReason, LangDivision, LangEmployeeCanReplacePermitHour, LangExceptionReceiver, LangLeaveExpiredAt, LangLeaveRemainingDay, LangMonth, LangNo, LangProcess, LangReceiver, LangApplyPermitHourDeductionSetting, LangSpesificReceiver, LangSubstract, LangSubstractionValue, LangYes, LangApplyLatePenaltySetting } from '../../constant/languange'\nimport { addAnnualLeaveAction, bulkActions, changeGroupAction, leaveInHourRequestSetAction, massDeleteAction, setAnunalLeaveAction, substractAnnualLeaveAction } from '../../constant/PersonnelConstant'\nimport { axiosCompany, checkAuthorization, loadDivisionOptions, loadPersonnelOptions, mapStateToProps, SpinnerButton, takeOptionsValue } from '../../helpers/Common'\nimport { AsyncSelectInput, InputDatePicker } from '../../helpers/Input'\n\nfunction PersonnelBulkActionComponent({ redux, onClose, ...props }) {\n const initData = {\n action: '',\n target_type: '',\n target: null,\n target_id: [],\n except: null,\n exclude_id: []\n }\n const [data, setData] = useState(initData)\n const [errors, setError] = useState({ fields: [], message: '' })\n const [control, setControl] = useState({ showSuccessAlert: false, showLoad: false })\n\n const postBulkActionService = async () => {\n setControl(control => ({ ...control, showLoad: true }))\n formData()\n try {\n // eslint-disable-next-line\n const res = await axiosCompany().post('personnels/bulk-action', data)\n setError({ fields: [], message: '' })\n setControl(control => ({ ...control, showSuccessAlert: true, showLoad: false }))\n } catch (e) {\n setError(error => {\n error.fields = e.response.data.errors ? e.response.data.errors : { 0: [e.response.statusText] }\n error.message = e.response.data.message ? e.response.data.message : ''\n return { ...error }\n })\n setControl(control => ({ ...control, showLoad: false }))\n }\n }\n\n const formData = () => {\n data.target_id = data.target ? takeOptionsValue(data.target) : []\n data.exclude_id = data.except ? takeOptionsValue(data.except) : []\n }\n\n const handleInputChange = (e) => {\n const { name, value } = e.target\n setData(data => {\n data[name] = value\n return { ...data }\n })\n }\n\n const handleReceiverSelect = (e) => {\n const { name, value } = e.target\n setData(data => {\n data[name] = value\n data.target = null\n data.except = null\n data.exclude_id = []\n data.target_id = []\n return { ...data }\n })\n }\n\n const handleActionSelect = (e) => {\n const { name, value } = e.target\n setData(data => {\n const actionData = {\n annual_leave_set: setAnunalLeaveAction,\n annual_leave_substract: substractAnnualLeaveAction,\n annual_leave_add: addAnnualLeaveAction,\n change_group: changeGroupAction,\n mass_delete: massDeleteAction,\n leave_in_hour_request_set: leaveInHourRequestSetAction\n }[value]\n\n return {\n [name]: value,\n target_type: data.target_type,\n target: data.target,\n except: data.except,\n exclude_id: data.exclude_id,\n target_id: data.target_id,\n ...actionData\n }\n })\n }\n\n const onSubmit = () => {\n postBulkActionService()\n }\n\n const loadPersonnelGroupFilterOptions = (inputValue) => {\n return new Promise((resolve) => {\n axiosCompany()\n .get(`personnels?page=null&group_id=${data.target ? takeOptionsValue(data.target) : ''}&keyword=${inputValue}`)\n .then((result) => {\n resolve(result.data.map((item) => {\n let label = item.name\n if (item.group) {\n label += ' - ' + item.group.name\n }\n \n return { label, value: item.id }\n }))\n })\n })\n }\n\n return (\n <>\n \n {LangOutOfQuotaMessage} {checkAuthorization(redux, 'employee.buy-quota') && ({LangSubscriptionSetting.toLowerCase()})}.\n
\n\n \n
\n \n \n {errors.fields.target_type ? (
\n {errors.fields.target_type[0]}
) : (null)}\n {(data.target_type !== '') && (\n <>\n {\n (data.target_type !== 'all') && (\n \n \n
\n )\n }\n {(data.target_type !== 'personnels') && (\n \n {\n data.target_type === 'groups' && (\n { setData({ ...data, target: value }) }}\n />\n )\n }\n {\n (data.target_type === 'personnels' || data.target_type === 'all') && (\n { setData({ ...data, target: value }) }}\n />\n )\n }\n {errors.fields.target_id ? (
\n {errors.fields.target_id[0]}
) : (null)}\n \n \n
\n )}\n \n )}\n \n {\n (data.target_type === 'all') && (\n { setData({ ...data, except: value }) }}\n />\n )\n }\n {\n (data.target_type === 'groups') && (\n { setData({ ...data, except: value }) }}\n />\n )\n }\n
\n \n \n
\n \n \n {errors.fields.action ? (
\n {errors.fields.action[0]}
) : (null)}\n {data?.action && {LangBulkActionWarning}
}\n \n \n
\n \n {\n {\n annual_leave_set: (\n <>\n
\n \n \n
\n \n { handleInputChange(e) }} />\n {errors.fields.set_value ? (
\n {errors.fields.set_value[0]}
) : (null)}\n \n \n
\n \n ),\n annual_leave_add: (\n <>\n \n { setData({ ...data, set_expired_at: value }) }} />\n {errors.fields.set_expired_at ? (
\n {errors.fields.set_expired_at[0]}
) : (null)}\n \n \n
\n \n { handleInputChange(e) }} />\n {errors.fields.add_value ? (
\n {errors.fields.add_value[0]}
) : (null)}\n \n \n
\n \n ),\n annual_leave_subtract: (\n <>\n \n
\n \n
\n {errors.fields.add_expired_month ? (\n { handleInputChange(e) }} />\n
\n {LangMonth}
\n {errors.fields.add_expired_month[0]}
) : (null)}\n \n \n
\n \n { handleInputChange(e) }} />\n {errors.fields.subtract_value ? (
\n {errors.fields.subtract_value[0]}
) : (null)}\n \n \n
\n \n ),\n change_group: (\n <>\n \n
\n \n
\n {errors.fields.subtract_expired_month ? (\n { handleInputChange(e) }} />\n
\n {LangMonth}
\n {errors.fields.subtract_expired_month[0]}
) : (null)}\n \n \n
\n \n ),\n mass_delete: (\n \n \n {errors.fields.change_group_value ? (
\n {errors.fields.change_group_value[0]}
) : (null)}\n \n \n
\n ),\n leave_in_hour_request_set: (\n <>\n \n { handleInputChange(e) }} />\n {errors.fields.deleted_reason ? (
\n {errors.fields.deleted_reason[0]}
) : (null)}\n \n \n
\n \n
\n \n setData({ ...data, can_replace: 1 })} />\n \n
\n \n setData({ ...data, can_replace: 0 })} />\n \n
\n {errors.fields.can_replace && ({errors.fields.can_replace}
)}\n \n \n
\n \n
\n \n setData({ ...data, is_apply_deduction: 1 })} />\n \n
\n \n setData({ ...data, is_apply_deduction: 0 })} />\n \n
\n {errors.fields.is_apply_deduction && ({errors.fields.is_apply_deduction}
)}\n \n \n
\n \n )\n }[data.action]\n }\n \n
\n \n setData({ ...data, apply_late_penalty: 1 })} />\n \n
\n \n setData({ ...data, apply_late_penalty: 0 })} />\n \n
\n {errors.fields.apply_late_penalty && ({errors.fields.apply_late_penalty}
)}\n \n
\n
\n \n )\n}\n\nexport default connect(mapStateToProps)(PersonnelBulkActionComponent)\n","import React, { useState } from 'react'\nimport { connect } from 'react-redux'\nimport { Delete, LangDeleteEmployeeConfirm, LangDeleteEmployeeConfirm1, LangDeleteEmployeeConfirm2, LangDeleteEmployeeConfirm3, LangExample, LangImportCancel, LangNotNow, LangReason, LangResetDataFirst, LangResign, LangWrongInput, LangYesSure } from '../../constant/languange'\nimport { axiosCompany, mapDispatchToProps, mapStateToProps } from '../../helpers/Common'\nimport { SpinnerButton } from '../../helpers/Spinner'\nimport ReactTooltip from 'react-tooltip'\nimport { ModalApp } from '../../helpers/Input'\nimport { faInfoCircle } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\nfunction PersonnelDeleteComponent({ redux, setState, currentData, getPersonnelsService, ...props }) {\n const [control, setControl] = useState({ showLoad: false })\n const [data, setData] = useState({ deleted_reason: '' })\n\n // function\n const deletePersonnelService = (e) => {\n e.preventDefault()\n if (redux.isTemporary) return\n\n const formData = new window.FormData()\n formData.append('deleted_reason', data.deleted_reason)\n formData.append('_method', 'delete')\n\n setControl(control => ({ ...control, showLoad: true }))\n axiosCompany().post(`personnels/${currentData.id}`, formData)\n .then(() => {\n getPersonnelsService()\n setControl(control => ({ ...control, showLoad: false }))\n props.handleClose()\n\n if (redux.stats.personnels_count > 0) {\n setState({ isUpdateStats: redux.isUpdateStats + 1 })\n }\n }).catch(e => {\n setControl(control => ({ ...control, showLoad: false }))\n })\n }\n\n // handler\n const handleTextChange = (e) => {\n setData(currData => ({ ...currData, [e.target.name]: e.target.value }))\n }\n\n return (\n <>\n \n \n {control.showModal === 'confirm' && (\n \n {errors.message ?
\n {errors.message}
: null}\n {control.showSuccessAlert ? {LangActionSuccessMessage}
: null}\n \n \n\n {LangDeleteEmployeeConfirm1} {currentData.name} {LangDeleteEmployeeConfirm2} \"{data.deleted_reason}\"?
\n ) : (\n{LangDeleteEmployeeConfirm1} {currentData.name}?
\n )}\n\n
\n \n
\n \n \n
\n \n }\n />\n )}\n \n\n )\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(PersonnelDeleteComponent)\n","import { useState } from 'react'\nimport { SpinnerButton, axiosCompany, toRupiah } from '../../helpers/Common'\nimport { Close, LangBalance, LangExpiredIn, LangSuccessSaveData, Save } from '../../constant/languange'\nimport { InputDateTimePicker } from '../../helpers/Input'\nimport { useParams } from 'react-router-dom'\n\nconst ReimbursementEditEmployeeComponent = ({ handleClose, onAfterEdit, currentData, isPersonnelDetail }) => {\n const params = useParams()\n // state\n const [control, setControl] = useState({ onSubmit: false })\n const [form, setForm] = useState({\n _method: 'PUT',\n balance: currentData.balance ? toRupiah(currentData.balance) : '',\n expired_in: currentData.expired_in || ''\n })\n const [responseData, setResponseData] = useState({})\n\n // handler\n const handleChangeText = (e) => {\n if(e.target.name === 'balance'){\n let val = e.target.value.replace(/[^0-9]*/g,'')\n setForm(currForm => ({ ...currForm, [e.target.name]: toRupiah(val) }))\n } else {\n setForm(currForm => ({ ...currForm, [e.target.name]: e.target.value }))\n }\n }\n\n const handleSubmit = (e) => {\n const submitForm = {\n ...form,\n balance: form.balance.replaceAll(/\\./g, \"\")\n }\n setControl(currControl => ({ ...currControl, onSubmit: true }))\n let apiUrl = `/reimbursements/${params.id}/personnels/${currentData.personnel_id}`\n if(isPersonnelDetail) {\n apiUrl = `/reimbursements/${currentData.id}/personnels/${currentData.personnel_id}`\n }\n axiosCompany(apiUrl).post(apiUrl, submitForm)\n .then(res => {\n setResponseData(curResponseData => ({ ...res.data, success: true }))\n setControl(currControl => ({ ...currControl, onSubmit: false }))\n onAfterEdit()\n })\n .catch(err => {\n setResponseData(curResponseData => err.response.data)\n setControl(currControl => ({ ...currControl, onSubmit: false }))\n })\n }\n\n return (\n \n )\n}\n\nexport default ReimbursementEditEmployeeComponent\n","import React, { useState, useEffect } from 'react'\n\nimport { connect, mapStateToProps, mapDispatchToProps, cookies } from '../../helpers/Common'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faClipboardList, faPlay } from '@fortawesome/free-solid-svg-icons'\nimport { useLocation } from 'react-router-dom'\nimport { LangAlertTR, LangAlertTR2, LangStart, LangViewStatus, LangFillIn } from '../../constant/languange'\n\nconst TourGuideAlert = ({ redux, setState, type = 'common' }) => {\n const location = useLocation()\n\n // state\n const [progress, setProgress] = useState(0)\n const [showAlert, setShowAlert] = useState(false)\n\n // effect\n useEffect(() => {\n setTimeout(() => {\n setShowAlert(!redux.isStopTour)\n }, 2000)\n }, [redux.isStopTour])\n\n useEffect(() => {\n if (redux.stats) {\n const statValues = Object.values(redux.stats)\n\n // progress bar\n setProgress(statValues.filter(value => value > 0).length)\n }\n }, [redux.stats])\n\n // handler\n const setOpenIndicator = () => {\n setState({ openIndicator: true })\n }\n\n return (\n <>\n {showAlert && !redux.profile.supervisor_groups && !+cookies.get(`clickFinish-${redux.profile.id}`)\n ? (\n <>\n {type === 'common' && location.pathname !== '/dashboard' && !!+cookies.get(`showAlertProgress-${redux.profile.id}`) && !redux.isTemporary && (\n \n
\n )}\n\n {type === 'dashboard' && progress < 6 && !redux.isTemporary && redux.profile.role_id !== 4 && (\n \n
\n {LangAlertTR2} {Math.ceil(progress / 6 * 100)}%
\n \n\n
\n )}\n \n )\n : ''}\n \n )\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TourGuideAlert)\n","import React from 'react'\nimport { EmployeID, EmployeIdentityID, EmployeIDFile, Female, Gender, Group, LangChanged, LangCreatedBy, LangDeletedBy, LangEditedBy, LangEmployee, LangEmpty, LangFrom, LangLeaveExpiredAt, LangLeaveRemainingDay, LangPosition, LangTo, Male, Name, Password, PhoneNumber, ProfilePicture, StartWork, TimeZone } from '../../constant/languange'\nimport { displayDate } from '../../helpers/Common'\n\nexport const PersonnelHistoryItemComponent = ({ data, personnelId = [], ...props }) => {\n const {\n name = null,\n gender = null,\n group = null,\n position = null,\n leave_expired_at = null,\n leave_remaining_day = null,\n phone_no = null,\n picture = null,\n pid_file = null,\n pid = null,\n pid_identity_id = null,\n start_work = null,\n user = null\n } = data.data\n\n const genderName = (gender) => {\n return gender === 'male' ? Male : Female\n }\n\n const personnelIdName = (id) => {\n return personnelId.find(item => item.id === +id).name\n }\n\n return (\n <>\n {data.action_name === 'modify' && (\n \n
\n \n
\n \n \n \n
\n \n {LangAlertTR}\n
\n\n {name && (\n
\n )}\n {data.action_name === 'add' && (\n <>\n \n {LangChanged} {Name} {LangFrom.toLowerCase()} {name?.before} {LangTo.toLowerCase()} {name?.after}\n
\n )}\n {gender && (\n\n {LangChanged} {Gender} {LangFrom.toLowerCase()} {genderName(gender?.before)} {LangTo.toLowerCase()} {genderName(gender?.after)}\n
\n )}\n {phone_no && (\n\n {LangChanged} {PhoneNumber} {LangFrom.toLowerCase()} {phone_no?.before} {LangTo.toLowerCase()} {phone_no?.after}\n
\n )}\n {group && (\n\n {LangChanged} {Group} {LangFrom.toLowerCase()} {group?.before ? group.before.name : LangEmpty} {LangTo.toLowerCase()} {group?.after ? group.after.name : LangEmpty}\n
\n )}\n {position && (\n\n {LangChanged} {LangPosition} {LangFrom.toLowerCase()} {position?.before ? position.before : LangEmpty} {LangTo.toLowerCase()} {position?.after ? position.after : LangEmpty}\n
\n )}\n {user?.attr && (\n\n {LangChanged} {TimeZone} {LangFrom.toLowerCase()} {user?.attr.before.timezone} {LangTo.toLowerCase()} {user?.attr.after.timezone}\n
\n )}\n {pid_identity_id && (\n\n {LangChanged} {EmployeIdentityID} {LangFrom.toLowerCase()} {pid_identity_id?.before ? personnelIdName(pid_identity_id?.before) : LangEmpty} {LangTo.toLowerCase()} {pid_identity_id?.after ? personnelIdName(pid_identity_id?.after) : LangEmpty}\n
\n )}\n {pid && (\n\n {LangChanged} {EmployeID} {LangFrom.toLowerCase()} {pid?.before ? pid.before : LangEmpty} {LangTo.toLowerCase()} {pid?.after ? pid.after : LangEmpty}\n
\n )}\n {start_work && (\n\n {LangChanged} {StartWork} {LangFrom.toLowerCase()} {start_work?.before ? displayDate(start_work.before, 'DD MMM YYYY') : LangEmpty} {LangTo.toLowerCase()} {start_work?.after ? displayDate(start_work.after, 'DD MMM YYYY') : LangEmpty}\n
\n )}\n {leave_remaining_day && (\n\n {LangChanged} {LangLeaveRemainingDay} {LangFrom.toLowerCase()} {leave_remaining_day?.before ? leave_remaining_day.before : LangEmpty} {LangTo.toLowerCase()} {leave_remaining_day?.after ? leave_remaining_day.after : LangEmpty}\n
\n )}\n {leave_expired_at && (\n\n {LangChanged} {LangLeaveExpiredAt} {LangFrom.toLowerCase()} {leave_expired_at?.before ? displayDate(leave_expired_at?.before, 'DD MMM YYYY') : LangEmpty} {LangTo.toLowerCase()} {leave_expired_at?.after ? displayDate(leave_expired_at?.after, 'DD MMM YYYY') : LangEmpty}\n
\n )}\n {user?.email && (\n\n {LangChanged} Email {LangFrom.toLowerCase()} {user?.email.before} {LangTo.toLowerCase()} {user?.email.after}\n
\n )}\n {user?.password && (\n\n {LangChanged} {Password}\n
\n )}\n {picture && (\n\n {LangChanged} {ProfilePicture}\n
\n )}\n {pid_file && (\n\n {LangChanged} {EmployeIDFile}\n
\n )}\n{LangEditedBy} {data?.by_user?.name}
\n{LangEmployee} {name}
\n{LangCreatedBy} {data?.by_user?.name}
\n \n )}\n {data.action_name === 'delete' && (\n\n
\n )}\n \n )\n}\n\nexport default PersonnelHistoryItemComponent\n","import React, { useEffect, useState } from 'react'\nimport { DateChangeHistories, DescChangeHistories } from '../../constant/languange'\nimport { apiUrl, axiosCompany, displayDate, PaginationDiv, SpinnerLoadFirst, axios, moment } from '../../helpers/Common'\nimport { InputRangeDatePicker } from '../../helpers/Input'\nimport PersonnelHistoryItemComponent from './PersonnelHistoryItemComponent'\n\nfunction PersonnelHistoryComponent ({ id, ...props }) {\n const [control, setControl] = useState({ showLoad: false })\n const [personnelId, setPersonnelId] = useState([])\n const [filter] = useState({\n page: 1,\n date_from: moment().subtract(1, 'month').format('YYYY-MM-DD'),\n date_to: moment().format('YYYY-MM-DD')\n })\n\n const [data, setData] = useState({\n data: [],\n meta: {\n total: 0\n }\n })\n\n useEffect(() => {\n getHistoryService()\n getPersonnelId()\n // eslint-disable-next-line\n }, [])\n\n const getHistoryService = () => {\n setControl({ ...control, showLoad: true })\n axiosCompany().get(`personnels/${id}/logs`, { params: filter }).then((ress) => {\n setData({ ...data, ...ress.data })\n setControl({ showLoad: false })\n }).catch(e => {\n setControl({ ...control, showLoad: false })\n })\n }\n\n const getPersonnelId = () => {\n axios.get(apiUrl + '/reference/personnel_identities')\n .then((result) => {\n setPersonnelId([...result.data])\n })\n }\n\n const handleDateChange = (value) => {\n filter.date_from = value.startDate\n filter.date_to = value.endDate\n getHistoryService()\n }\n\n const handlePage = (page) => {\n filter.page = page\n getHistoryService()\n }\n\n return (\n <>\n {\n control.showLoad\n ? ({LangEmployee} {name}
\n{LangDeletedBy} {data?.by_user?.name}
\n{SpinnerLoadFirst}
)\n : (\n <>\n \n
\n\n \n \n \n
\n
\n \n )\n }\n | {DateChangeHistories} | \n{DescChangeHistories} | \n
|---|---|
| {displayDate(item.created_at, 'DD MMM YYYY @ HH:mm')} | \n
\n
\n \n )\n}\n\nexport default PersonnelHistoryComponent\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"WhatsappOverlay_container__1VKXB\"};","import React from 'react'\n\n/**\n * Spinner\n */\nconst SpinnerDiv = Loading...
\nconst SpinnerButton = \nconst SpinnerLoadFirst = \nexport const Spinner9 = ({ color = 'light', size = 13, ...props }) => (\n
\n \n
\n)\n\nexport {\n SpinnerDiv,\n SpinnerButton,\n SpinnerLoadFirst,\n SpinnerLoadPages\n}\n","import { LangAll, LangCanceled, LangCertainDivision, LangCertainEmployee, LangDone, LangPaused, LangQuotaRunsOut, LangSending, LangSetup } from './languange'\n\nexport const categoryReciver = [\n { value: 'all', label: LangAll },\n { value: 'groups', label: LangCertainDivision },\n { value: 'personnels', label: LangCertainEmployee }\n]\n\nexport const statusBroadcast = {\n all: {\n name: LangAll,\n color: 'light',\n value: ''\n },\n setup: {\n name: LangSetup,\n color: 'warning',\n value: 'setup'\n },\n sending: {\n name: LangSending,\n color: 'primary',\n value: 'sending'\n },\n canceled: {\n name: LangCanceled,\n color: 'danger',\n value: 'canceled'\n },\n quota_runs_out: {\n name: LangQuotaRunsOut,\n color: 'danger',\n value: 'quota_runs_out'\n },\n paused: {\n name: LangPaused,\n color: 'info',\n value: 'paused'\n },\n done: {\n name: LangDone,\n color: 'success',\n value: 'done'\n }\n}\n\nexport const broadcastQuotaPrice = [\n { price: 25000, label: 500, value: 500 },\n { price: 50000, label: 1000, value: 1000 },\n { price: 250000, label: 5000, value: 5000 }\n]\n\nexport const broadcastDataDummy = [\n {\n title: 'Some Title',\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',\n target: 'Semua',\n created_by: 'Some Admin',\n created_at: '31 Nov 2021',\n status: {\n name: 'Selesai',\n color: 'success'\n }\n },\n {\n title: 'Some Title',\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',\n target: 'Divisi Tertentu',\n created_by: 'Some Admin',\n created_at: '31 Nov 2021',\n status: {\n name: 'Kuota Habis',\n color: 'danger'\n }\n },\n {\n title: 'Some Title',\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',\n target: 'Divisi Tertentu',\n created_by: 'Some Admin',\n created_at: '31 Nov 2021',\n status: {\n name: 'Tertunda',\n color: 'warning'\n }\n },\n {\n title: 'Some Title',\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',\n target: 'Karyawan Tertentu',\n created_by: 'Some Admin',\n created_at: '31 Nov 2021',\n status: {\n name: 'Mengirim',\n color: 'primary'\n }\n },\n {\n title: 'Some Title',\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',\n target: 'Divisi Tertentu',\n created_by: 'Some Admin',\n created_at: '31 Nov 2021',\n status: {\n name: 'Konsep',\n color: 'warning'\n }\n },\n {\n title: 'Some Title',\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',\n target: 'Semua',\n created_by: 'Some Admin',\n created_at: '31 Nov 2021',\n status: {\n name: 'Batal',\n color: 'danger'\n }\n }\n]\n","import React, { useState, useEffect } from 'react'\nimport {\n connect,\n mapStateToProps\n} from '../../helpers/Common'\n\nexport default connect(mapStateToProps)(({ redux }) => {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n setCount(redux.notifications.unlock_limit_attenance_request)\n }, [redux.notifications.unlock_limit_attenance_request])\n\n if (count <= 0) return <>\n\n return (\n \n )\n})\n","import React, { useState, useEffect } from 'react'\nimport {\n checkAuthorization,\n connect,\n mapStateToProps\n} from '../../helpers/Common'\n\nexport default connect(mapStateToProps)(({ redux }) => {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n if (Object.keys(redux.notifications).length) {\n let filteredCount = 0\n if (checkAuthorization(redux, 'attendance-approval.index')) {\n filteredCount += (redux.notifications.unlock_limit_attenance_request ?? 0)\n }\n if (checkAuthorization(redux, 'attendance-revision.index')) {\n filteredCount += (redux.notifications.attendance_edit_request ?? 0)\n }\n if (checkAuthorization(redux, 'device-approval.index')) {\n filteredCount += (redux.notifications.whitelist_device ?? 0)\n }\n if (checkAuthorization(redux, 'pintu-kerjoo.approval')) {\n filteredCount += (redux.notifications.pintu_kerjoo_sync_error ?? 0)\n }\n if (checkAuthorization(redux, 'picture-approval.index')) {\n filteredCount += (redux.notifications.update_profile_picture ?? 0)\n }\n setCount(filteredCount)\n }\n // eslint-disable-next-line\n }, [redux.notifications.unlock_limit_attenance_request, redux.notifications.attendance_edit_request, redux.notifications.whitelist_device, redux.notifications.pintu_kerjoo_sync_error, redux.notifications.update_profile_picture])\n\n if (count <= 0) return <>\n\n return (\n \n )\n})\n","import React, { useState, useEffect } from 'react'\nimport {\n connect,\n mapStateToProps\n} from '../../helpers/Common'\n\nexport default connect(mapStateToProps)(({ redux }) => {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n setCount(redux.notifications.attendance_review)\n }, [redux.notifications.attendance_review])\n\n if (count <= 0) return <>\n\n return (\n \n )\n})\n","import React, { useState, useEffect } from 'react'\nimport {\n connect,\n mapStateToProps\n} from '../../helpers/Common'\n\nexport default connect(mapStateToProps)(({ redux }) => {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n setCount(redux.notifications.attendance_edit_request)\n }, [redux.notifications.attendance_edit_request])\n\n if (count <= 0) return <>\n\n return (\n \n )\n})\n","import React, { useState, useEffect } from 'react'\nimport {\n connect,\n mapStateToProps\n} from '../../helpers/Common'\n\nexport default connect(mapStateToProps)(({ redux }) => {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n setCount(redux.notifications.whitelist_device)\n }, [redux.notifications.whitelist_device])\n\n if (count <= 0) return <>\n\n return (\n \n )\n})\n","import React, { useState, useEffect } from 'react'\nimport {\n connect,\n mapStateToProps\n} from '../../helpers/Common'\n\nexport default connect(mapStateToProps)(({ redux }) => {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n setCount(redux.notifications.leave_request)\n }, [redux.notifications.leave_request])\n\n if (count <= 0) return <>\n\n return (\n \n )\n})\n","import React, { useState, useEffect } from 'react'\nimport {\n checkAuthorization,\n connect,\n mapStateToProps\n} from '../../helpers/Common'\n\nexport default connect(mapStateToProps)(({ redux }) => {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n if (checkAuthorization(redux, 'unpaid-leave.day.index')) {\n setCount(redux.notifications.permit_request)\n }\n }, [redux.notifications.permit_request])\n\n if (count <= 0) return <>\n\n return (\n \n )\n})\n","import React, { useEffect, useState } from 'react'\nimport { LangNew } from '../../constant/languange'\nimport { Spinner9 } from '../../helpers/Spinner'\nimport { moment } from '../../helpers/Common'\n\n/**\n *\n * @param releaseDate date:'YYYY-MM-DD'\n * @param DefaultBadge component\n * @returns component\n */\nfunction Badges ({ type = 'link', releaseDate = '', DefaultBadge = null, ...props }) {\n const [control, setControl] = useState({ newBadgeExpired: true })\n useEffect(() => {\n setControl({ ...control, newBadgeExpired: releaseDate !== '' ? moment().isSameOrAfter(moment(releaseDate).add(1, 'month'), 'day') : true })\n // eslint-disable-next-line\n }, [])\n\n return (\n <>\n {!control.newBadgeExpired\n ? {Spinner9({ size: 9 })} {LangNew.toUpperCase()}
\n : DefaultBadge}\n \n )\n}\n\nexport default Badges\n","import React, { useState, useEffect } from 'react'\nimport {\n checkAuthorization,\n connect,\n mapStateToProps\n} from '../../helpers/Common'\n\nexport default connect(mapStateToProps)(({ redux }) => {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n if (checkAuthorization(redux, 'claim.request.index')) {\n setCount(redux.notifications.claim_request)\n }\n }, [redux.notifications.claim_request])\n\n if (count <= 0) return <>\n\n return (\n \n )\n})\n","import React, { useState, useEffect } from 'react'\nimport {\n checkAuthorization,\n connect,\n mapStateToProps\n} from '../../helpers/Common'\n\nexport default connect(mapStateToProps)(({ redux }) => {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n if (checkAuthorization(redux, 'pintu-kerjoo.approval')) {\n setCount(redux.notifications.pintu_kerjoo_sync_error)\n }\n }, [redux.notifications.pintu_kerjoo_sync_error])\n\n if (count <= 0) return <>\n\n return (\n \n )\n})\n","import React, { useState, useEffect } from 'react'\nimport {\n connect,\n mapStateToProps\n} from '../../helpers/Common'\n\nexport default connect(mapStateToProps)(({ redux }) => {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n if (Object.keys(redux.notifications).length) {\n setCount(redux.notifications.attendance_review)\n }\n // eslint-disable-next-line\n }, [redux.notifications.attendance_review])\n\n if (count <= 0) return <>\n\n return (\n \n )\n})\n","import React, { useEffect, useState } from 'react'\nimport { LangNew } from '../../constant/languange'\nimport { Spinner9 } from '../../helpers/Spinner'\nimport { checkAuthorization, connect, mapStateToProps, moment } from '../../helpers/Common'\n\n/**\n *\n * @param releaseDate date:'YYYY-MM-DD'\n * @param DefaultBadge component\n * @returns component\n */\nfunction BadgesParent({ type = 'link', releaseDate = '', DefaultBadge = null, redux, ...props }) {\n const [control, setControl] = useState({ newBadgeExpired: true, show: true })\n\n useEffect(() => {\n setControl({ ...control, newBadgeExpired: releaseDate !== '' ? moment().isSameOrAfter(moment(releaseDate).add(1, 'month'), 'day') : true })\n if (props.limitation) {\n if (props.limitation.length !== 0) {\n props.limitation.forEach(item => {\n if (redux.hasOwnProperty(item)) {\n if (redux[item] === false) setControl({ ...control, show: false })\n }\n })\n }\n }\n if (props.checkAuthorization) {\n if (props.checkAuthorization.length !== 0) {\n props.checkAuthorization.forEach(item => {\n if (!checkAuthorization(redux, item)) {\n setControl({ ...control, show: false })\n }\n })\n }\n }\n if (props.checkRoleAuthorization) {\n if (redux.profile.role_id !== props.checkRoleAuthorization) {\n setControl({ ...control, show: false })\n }\n }\n // eslint-disable-next-line\n }, [])\n\n return (\n <>\n {!control.newBadgeExpired && control.show\n ? {Spinner9({ size: 9 })} {LangNew.toUpperCase()}
\n : DefaultBadge}\n \n )\n}\n\nexport default connect(mapStateToProps)(BadgesParent)\n","import React, { useState, useEffect } from 'react'\nimport {\n connect,\n mapStateToProps\n} from '../../helpers/Common'\n\nexport default connect(mapStateToProps)(({ redux }) => {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n setCount(redux.notifications.update_profile_picture)\n }, [redux.notifications.update_profile_picture])\n\n if (count <= 0) return <>\n\n return (\n \n )\n})\n","import React, { useState, useEffect } from 'react'\nimport {\n checkAuthorization,\n connect,\n mapStateToProps\n} from '../../helpers/Common'\n\nexport default connect(mapStateToProps)(({ redux }) => {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n if (Object.keys(redux.notifications).length) {\n let filteredCount = 0\n if (checkAuthorization(redux, 'attendance-approval.index')) {\n filteredCount += (redux.notifications.unlock_limit_attenance_request ?? 0)\n }\n if (checkAuthorization(redux, 'attendance-review.index')) {\n filteredCount += (redux.notifications.attendance_review ?? 0)\n }\n if (checkAuthorization(redux, 'attendance-revision.index')) {\n filteredCount += (redux.notifications.attendance_edit_request ?? 0)\n }\n if (checkAuthorization(redux, 'device-approval.index')) {\n filteredCount += (redux.notifications.whitelist_device ?? 0)\n }\n if (checkAuthorization(redux, 'picture-approval.index')) {\n filteredCount += (redux.notifications.update_profile_picture ?? 0)\n }\n setCount(filteredCount)\n }\n // eslint-disable-next-line\n }, [redux.notifications.unlock_limit_attenance_request, redux.notifications.attendance_review, redux.notifications.attendance_edit_request, redux.notifications.whitelist_device, redux.notifications.update_profile_picture])\n\n if (count <= 0) return <>\n\n return (\n \n )\n})\n","import React from 'react'\nimport {\n Home,\n Settings,\n Unlock,\n Radio,\n Clock,\n User,\n File,\n Users,\n Info,\n PauseCircle,\n Tablet,\n Code,\n Rss,\n Briefcase,\n DollarSign,\n Star,\n MapPin,\n Smartphone,\n Trash2\n} from 'react-feather'\nimport {\n Dashboard, CompanySetting, ManageAdmin, AttendanceSpot, WorkPattern, ManageEmployees, DataEmployees,\n ShiftWorkTime, WorkTime, ShiftDay, WorkDay, DailyAttendance, AttendenceSummary, ManageDivision,\n AttendanceReview,\n LangMenuLeaveRequest,\n LangSetting,\n LangMenuSubscribeInfo,\n LangDeveloper,\n MobileAplication,\n LangHolidayCalendar,\n LangAttendanceRevision,\n LangOvertimeReview,\n LangPermitHourReview,\n LangAttendanceApproval,\n LangDeviceApproval,\n LangClientVisit,\n LangCalculate,\n LangPaid,\n LangPayroll,\n LangPremiumFeatures,\n LangAttendance,\n LangOvertimeSalary,\n LangVisit,\n LangClient,\n LangVisitSchedule,\n LangShiftChangeScheduleRecap,\n LangVisitSummary,\n LangAccPintuKerjoo,\n LangOvertimeCalculation,\n LangUsageGuide,\n LangManagePosition,\n LangSpecialLeave,\n LangUnpaidLeave,\n LangLeaveDay,\n LangClaim,\n LangClaimType,\n LangClaimRequest,\n LangReview,\n LangSubscription,\n LangUserAdmin,\n LangOvertime,\n LangPermitHours,\n LangPintuKerjooAttendance,\n Employe,\n LangApprovalRules,\n LangTimesheet,\n LangActivity,\n LangProject,\n LangResetData,\n LangOvertimeSchedule,\n LangClientVisitVisualization,\n LangProfilePhotoApproval,\n LangProfileApproval,\n LangBPJS,\n LangUserSubAdmin,\n LangAttendanceSyncData,\n LangAttendanceSyncDataShort,\n LangSalaryPaidStatistics,\n LangAdminNotification,\n LangHalfDayLeave\n} from '../../constant/languange'\nimport BadgeAttendanceApproval from './BadgeAttendanceApproval'\nimport BadgeAttendanceParentMenu from './BadgeAttendanceParentMenu'\nimport BadgeAttendanceReview from './BadgeAttendanceReview'\nimport BadgeAttendanceRevision from './BadgeAttendanceRevision'\nimport BadgeDeviceApproval from './BadgeDeviceApproval'\nimport BadgeLeaveRequest from './BadgeLeaveRequest'\nimport BadgePermitRequest from './BadgePermitRequest'\nimport Badges from './Badges'\nimport { faBookOpen, faBusinessTime, faClipboardCheck, faFilePdf, faHandHoldingUsd, faHandPaper, faRocket, faStreetView, faUserCheck, faUserCog, faUserFriends, faUsers } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport BadgeClaimRequest from './BadgeClaimRequest'\nimport BadgePintuKerjoo from './BadgePintuKerjoo'\nimport BadgeReview from './BadgeReview'\nimport BadgesParent from './BadgesParent'\nimport BadgeAttendancePhotoProfileApproval from './BadgeAttendancePhotoProfileApproval'\nimport BadgeAttendanceParentMenuV1 from './BadgeAttendanceParentMenuV1'\nimport moment from 'moment'\nimport { cookies } from '../../helpers/Common'\n\nconst activeLang = cookies.get('lang') ? cookies.get('lang').toLowerCase() : 'id'\n\nexport const NEWMENUITEMS = [\n {\n menucontent: 'Dashboard',\n category: 'analytics',\n Items: [\n {\n title: Dashboard, icon: Home, path: `${process.env.PUBLIC_URL}/dashboard`, type: 'link', active: !!(window.location.hash === '#/dashboard' || window.location.hash === ''), key: 'dashboard.index'\n }\n ]\n },\n {\n menucontent: 'Attendance',\n category: 'analytics',\n Items: [\n {\n title: LangAttendance,\n icon: \n {menus.map((menu, i) => (\n {menu[1]}\n ))}\n
\n \n )\n}\n\nconst BreadcrumbsMenu = (props) => {\n const [menus, setMenus] = useState([])\n const [showModal, setShowModal] = useState()\n const loc = useLocation()\n const history = useHistory()\n\n useEffect(() => {\n setMenus([])\n getDataMenus()\n // eslint-disable-next-line\n }, [])\n\n const getDataMenus = () => {\n const dataMenu = cookies.get('menu-version') === '2' ? NEWMENUITEMS : MENUITEMS\n dataMenu?.map(menus => {\n menus?.Items[0]?.children?.map(item => {\n if (item.path === loc.pathname) {\n menus.Items[0].children.map(menu => setMenus(state => [...state, [menu.path, menu.title]]))\n } else {\n if (item.hasOwnProperty('childs')) {\n if (loc.pathname.replace(/[0-9]/g, ':id').includes(item.childs[0])) {\n menus.Items[0].children.map(menu => setMenus(state => [...state, [menu.path, menu.title]]))\n }\n }\n }\n })\n })\n }\n\n const handleClickMenu = () => {\n if (props.children.length < 2) {\n return (\n <>\n {props.children.map((menu, i) => {\n return \n \n \n {Home} \n {handleClickMenu()}\n \n \n
\n
\n {props.title}
\nData Saved Successfully! Login information sent to email {this.props.RegEmail}
Data Berhasil Disimpan! Informasi login dikirim ke email {this.props.RegEmail}
Data Saved Successfully!
Data Berhasil Disimpan!
\n
\n )\n }\n}\n\nconst RegisterSuccess = connect(mapStateToProps, mapDispatchToProps)(RegSuccess)\n\nexport {\n Success,\n ModalHeader,\n AdminSuccess,\n RegisterSuccess\n}\n","import { faUserSlash } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport React, { useEffect, useState } from 'react'\nimport { LangEmployeeDeletedAt, LangPosition, LangDivision, LangGenBabyBoomers, LangGenX, LangGenY, LangGenAlpha, LangGenZ, LangEmailVerified, LangEmailVerificationRequired } from '../../constant/languange'\nimport { checkAuthorization, connect, displayDate, displayTimezone, mapStateToProps, ShowImage } from '../../helpers/Common'\nimport ReactTooltip from 'react-tooltip'\nimport { useHistory } from 'react-router-dom'\n\nfunction PersonnelItemComponent ({ data, childrenMediaBody = null, listType, redux, ...props }) {\n const history = useHistory()\n const [timezone, setTimezone] = useState('');\n\n useEffect(() => {\n if(data) {\n setTimezone(data.attr?.user?.timezone || data.timezone)\n }\n }, [])\n \n\n const gen = (birthYear) => {\n let badge = ''\n switch (true) {\n case (birthYear >= 1946 && birthYear <= 1964): {\n badge = LangGenBabyBoomers\n break\n }\n case (birthYear >= 1965 && birthYear <= 1976): {\n badge = LangGenX\n break\n }\n case (birthYear >= 1977 && birthYear <= 1994): {\n badge = LangGenY\n break\n }\n case (birthYear >= 1995 && birthYear <= 2010): {\n badge = LangGenZ\n break\n }\n case (birthYear >= 2011 && birthYear <= 2025): {\n badge = LangGenAlpha\n break\n }\n default: {\n badge = ''\n }\n }\n return badge\n }\n\n const styleOverflow = {\n fontSize: '.8rem',\n maxWidth: '110px', \n whiteSpace: 'nowrap', \n overflow: 'hidden', \n textOverflow: 'ellipsis'\n }\n\n const linkToPersonnelDetail = () => {\n if (!checkAuthorization(redux, 'employee.index')) {\n return\n }\n if (props.origin === 'personnelList' && data?.user) {\n if (data?.user?.email_verified_at) {\n history.push(`/personnels/${data.id}/detail`)\n } else {\n history.push(`/personnels/${data.id}/detail#email`)\n }\n } else {\n history.push(`/personnels/${data.id}/detail`)\n }\n }\n\n return (\n \n {LangHello(this.props.lang)} {this.props.redux.register.name}, {LangThankYouRegister(this.props.lang)}\n{LangPleaseActivate(this.props.lang)} {this.props.redux.register.email}. {LangPleaseActivate2(this.props.lang)}:\n
\n\n \n
\n )\n}\n\nexport default connect(mapStateToProps)(PersonnelItemComponent)\n","import { Female, LangBulkAction1, LangBulkAction2, LangBulkAction3, LangBulkAction4, LangBulkAction5, LangBulkAction6, LangBulkAction7, Male } from './languange'\n\nexport const bulkActions = [\n { name: LangBulkAction1, val: 'annual_leave_set' },\n { name: LangBulkAction3, val: 'annual_leave_add' },\n { name: LangBulkAction2, val: 'annual_leave_subtract' },\n { name: LangBulkAction7, val: 'leave_in_hour_request_set' },\n { name: LangBulkAction4, val: 'change_group' },\n { name: LangBulkAction6, val: 'send_verification_email' },\n { name: LangBulkAction5, val: 'mass_delete' }\n]\n\nexport const leaveInHourRequestSetAction = {\n can_replace: 1,\n is_apply_deduction: 1,\n apply_late_penalty: 0\n}\n\nexport const massDeleteAction = {\n deleted_reason: ''\n}\n\nexport const changeGroupAction = {\n change_group_value: ''\n}\n\nexport const setAnunalLeaveAction = {\n set_value: '',\n set_expired_at: ''\n}\n\nexport const addAnnualLeaveAction = {\n add_value: '',\n add_expired_month: ''\n}\n\nexport const substractAnnualLeaveAction = {\n subtract_value: '',\n subtract_expired_month: ''\n\n}\n\nexport const genderType = {\n male: Male,\n female: Female\n}\n"],"sourceRoot":""}\n { { checkAuthorization(redux, 'employee.index') && history.push(`/personnels/${data.id}/detail`) } }} className='mr-3 img-50 rounded-circle' url={data?.picture_url?.s ? data?.picture_url?.s : null} defaultpictureonload={1} />\n
\n \n \n {data?.name ?? ''}\n {\n props.origin === 'personnelList' && data?.user ?\n data?.user?.email_verified_at ?\n \n \n \n :\n \n \n \n : ''\n }\n \n {/*
\n {data?.group ? (<>{data?.group?.name}
) : ''} {data?.position ? {data.position} : ''}
{data?.group?.name}
}\n {data?.position &&{data.position}
} */}\n\n {\n data?.position ?\n typeof data?.position === 'string' ?\n \n :\n \n :\n ''\n }\n {\n data?.group && data?.position && \n }\n {\n data?.group ?\n typeof data?.group === 'string' ?\n \n :\n \n :\n ''\n }\n
\n\n {\n timezone && \n }\n {\n timezone && data?.birth_date && \n }\n {\n data?.birth_date && \n }\n
\n {(data?.deleted_at) ?