\n \n
\n \n \n );\n}\n\n\nexport const CompanyRegulationModal = (props) => {\n const { width, title = \"\" } = props\n return (\n \n } onClick={() => props.prevCurrent()}>Prev\n } onClick={() => props.nextCurrent()}>Next\n
\n \n );\n}\n\nexport const RedirectModal = (props) => {\n const { width = \"80%\", ref } = props\n return (\n \n \n Karajo is better on the app\n \n \n Open this in the Karajo app to get the full experience\n \n \n
\n
\n \n );\n}\n","import React, { useState } from 'react'\nimport { Upload, Button, message } from 'antd'\nimport { UploadOutlined, InboxOutlined } from '@ant-design/icons'\nimport { decrypt } from '../helpers/helpers'\n\nconst { Dragger } = Upload\nconst token = localStorage.getItem('accessToken') ? JSON.parse(decrypt(localStorage.getItem('accessToken'))) : []\n\nexport const Uploader = (props) => {\n const [files, setFiles] = useState([])\n\n const { title = 'Click to Upload', accept = '.jpg,.jpeg,.png', dragger = false, multiple = false } = props\n\n const removeFile = (v) => {\n // props.isRemove(true)\n\n if (v.status === 'error') {\n props.isRemove(false)\n } else {\n props.isRemove(false)\n }\n\n props.isRemove(false)\n }\n\n const handleChange = info => {\n let fileList = [...info.fileList];\n fileList = fileList.slice(-1);\n props.isUploading(true)\n // if (info.file.status !== 'uploading') {\n // }\n\n if (info.file.status === 'done') {\n message.success(`${info.file.name} file uploaded successfully`);\n props.isUploading(false)\n props.onUploaded(info.file.response)\n // removeFile()\n } else if (info.file.status === 'error') {\n message.error(`${info.file.name} file upload failed.`);\n setTimeout(() => {\n message.error(info.file.response.msg)\n }, 1000);\n props.isUploading(false)\n }\n setFiles(fileList)\n }\n\n const uploadHandler = {\n name: 'attachment',\n multiple: multiple ? true : false,\n action: `${process.env.REACT_APP_API_URL}/upload`,\n headers: {\n 'authorization': `Bearer ${token}`,\n 'client-id': `${process.env.REACT_APP_CLIENT_ID}`,\n 'client-secret': `${process.env.REACT_APP_CLIENT_SECRET}`\n },\n accept: accept,\n onChange: handleChange,\n onRemove: removeFile\n };\n\n return (\n \n {\n dragger ?\n \n \n :\n \n }>{title}\n \n }\n
\n );\n}\n\nexport const ImportXlsx = (props) => {\n const [files, setFiles] = useState([])\n\n const { title = 'Click to Upload', accept = '.xlsx', dragger = false, multiple = false } = props\n\n const removeFile = (v) => {\n // props.isRemove(true)\n\n if (v.status === 'error') {\n props.isRemove(false)\n } else {\n props.isRemove(false)\n }\n\n props.isRemove(false)\n }\n\n const handleChange = info => {\n let fileList = [...info.fileList];\n fileList = fileList.slice(-1);\n props.isUploading(true)\n // if (info.file.status !== 'uploading') {\n // }\n\n if (info.file.status === 'done') {\n message.success(`${info.file.name} file uploaded successfully`);\n props.isUploading(false)\n props.onUploaded(info.file.response)\n // removeFile()\n } else if (info.file.status === 'error') {\n message.error(`${info.file.name} file upload failed.`);\n setTimeout(() => {\n message.error(info.file.response.msg)\n }, 1000);\n props.isUploading(false)\n }\n setFiles(fileList)\n }\n\n const uploadHandler = {\n name: 'files',\n multiple: multiple ? true : false,\n action: `${process.env.REACT_APP_API_URL}/upload-xlsx`,\n headers: {\n 'client-id': `${process.env.REACT_APP_CLIENT_ID}`,\n 'client-secret': `${process.env.REACT_APP_CLIENT_SECRET}`\n },\n accept: accept,\n onChange: handleChange,\n };\n\n return (\n \n
Click or drag file to this area for upload
\n\n {\n dragger ?\n \n \n :\n \n }>{title}\n \n }\n
\n );\n}\n","import axios from 'axios';\nimport { decrypt, encrypt } from '../helpers/helpers'\nimport { message } from 'antd'\nrequire('dotenv').config();\n\nconst token = localStorage.getItem('accessToken') ? JSON.parse(decrypt(localStorage.getItem('accessToken'))) : []\n\naxios.defaults.baseURL = process.env.REACT_APP_API_URL;\naxios.defaults.headers.common['client-id'] = process.env.REACT_APP_CLIENT_ID;\naxios.defaults.headers.common['client-secret'] = process.env.REACT_APP_CLIENT_SECRET;\naxios.defaults.headers.common['authorization'] = `Bearer ${token}`;\naxios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';\n\nexport const api = async (method, path, payload) => {\n return axios({\n method: method,\n\t\turl: method == 'GET' && payload ? `${path}?` + new URLSearchParams(payload) : `${path}`,\n data: payload\n }).then((response) => {\n\n // auth login\n if(path == 'auth/login' && response?.data?.meta?.success){\n var data = response?.data?.data\n localStorage.setItem('accessToken', encrypt(JSON.stringify(data?.access_token)));\n localStorage.setItem('currentUser', encrypt(JSON.stringify(data)));\n localStorage.setItem('roleAccess', encrypt(JSON.stringify(data?.role?.role_access)))\n \n message.destroy()\n message.success('Successfully authenticated', 2)\n setTimeout(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const redirectUri = urlParams.get('redirect_to');\n if (redirectUri) {\n window.location.href = redirectUri\n } else {\n window.location.href = '/'\n }\n }, 1000);\n }\n\n // success\n if (response?.data?.meta?.success) return response?.data?.data\n else return response?.data?.meta?.message\n }).catch((error) => {\n\n // session timeout\n if(error?.response?.status == 401) {\n message.error(error.response?.data?.meta?.message)\n\n setTimeout(() => {\n localStorage.clear();\n const urlParams = new URLSearchParams(window.location.search);\n const redirectUri = urlParams.get('redirect_to');\n if (redirectUri) {\n window.location.href = redirectUri\n } else {\n window.location.href = '/login'\n }\n }, 1000);\n\n } else {\n message.error(error.response?.data?.meta?.message)\n }\n });\n}\n\nexport const logout = (redirect = '') => {\n localStorage.clear();\n \n if (redirect) window.location.href = \"/login?redirect_to=\" + redirect\n else window.location.href = '/login'\n}\n\nexport const currentUser = localStorage.getItem('currentUser') ? JSON.parse(decrypt(localStorage.getItem('currentUser'))) : {}","import React, { useState, useEffect } from 'react';\nimport { Affix, Card, Avatar, Row, Col, message } from 'antd';\nimport Text from 'antd/lib/typography/Text';\nimport { api, currentUser } from '../../services/api'\n\nimport { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';\nimport { Doughnut } from 'react-chartjs-2';\n\nChartJS.register(ArcElement, Tooltip, Legend);\n\nconst fileUrl = process.env.REACT_APP_FILE_URL\n\nconst ProfileBox = ({ departments }) => {\n const [loaded, setLoaded] = useState(false)\n const [user, setUser] = useState(null)\n const [avatar, setAvatar] = useState([])\n\n const backgroundColor = [\n \"#a870fe\", \"#fe895f\", \"#5968fd\", \"#2ee1ad\",\n \"#48c3fe\", \"#eea4a3\", \"#ffb119\", \"#8879f0\",\n \"#557aaa\", \"#405c80\", \"#cfd9e6\", \"#306ebf\"\n ];\n const borderColor = [\n \"#a870fe\", \"#fe895f\", \"#5968fd\", \"#2ee1ad\",\n \"#48c3fe\", \"#eea4a3\", \"#ffb119\", \"#8879f0\",\n \"#557aaa\", \"#405c80\", \"#cfd9e6\", \"#306ebf\"\n ];\n\n var departmentNames = []\n var departmentCounts = []\n departments?.map((item, i) => {\n departmentNames.push(item.name)\n })\n departments?.map((item, i) => {\n departmentCounts.push(item.total)\n })\n\n const chartStatus = {\n labels: departmentNames,\n datasets: [\n {\n label: '# of Votes',\n data: departmentCounts,\n backgroundColor: backgroundColor,\n borderColor: borderColor,\n borderWidth: 1,\n },\n ],\n }\n\n return (\n <>\n \n
Click or drag file to this area for upload
\n\n \n \n \n Welcome Back,
Camp Management - SPIERIT Dashboard\n \n \n {(currentUser?.name.substring(0, 2)).toUpperCase()} \n }\n \n
\n\n \n {currentUser?.name} \n
\n{currentUser?.department?.name} - {currentUser?.position?.name} \n \n
\n \n
\n\n \n \n
\n \n \n
\n \n );\n}\n\nexport default ProfileBox;\n","import { Card } from 'antd';\nimport React from 'react';\n\nconst DashboardItem = (props) => {\n return (\n Camp Management - SPIERIT Dashboard\n
\n
\n
\n
\n \n
\n \n {props.title}\n
\n \n {props.children}\n
\n \n \n {countTickets?.map((item, i) => (\n \n \n \n ))}\n
\n \n \n Monthly Tickets\n
\n } height={400}>\n
\n \n );\n}\n\nexport default DataTicket;\n","import React from 'react';\nimport { Row, Col } from 'antd';\nimport DashboardItem from './DashboardItem';\n\nimport {\n Chart as ChartJS,\n CategoryScale,\n LinearScale,\n BarElement,\n Title,\n Tooltip,\n Legend,\n} from 'chart.js';\nimport { Bar } from 'react-chartjs-2';\n\nChartJS.register(\n CategoryScale,\n LinearScale,\n BarElement,\n Title,\n Tooltip,\n Legend\n);\n\nconst DataKPI = ({ monthlyKPI }) => {\n\n var outstanding = []\n var achievement = []\n var assignment = []\n var score = []\n monthlyKPI?.map((item, i) => {\n outstanding.push(item.data.outstanding)\n achievement.push(item.data.closed)\n assignment.push(item.data.assignment)\n score.push(item.data.valueKpi)\n })\n\n const data = {\n labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n datasets: [\n {\n label: 'Outstanding',\n data: outstanding,\n backgroundColor: 'rgb(220, 53, 69)',\n borderColor: 'rgb(220, 53, 69)',\n borderWidth: 1\n },\n {\n label: 'Achievement',\n data: achievement,\n backgroundColor: 'rgb(255, 193, 7)',\n borderColor: 'rgb(255, 193, 7)',\n borderWidth: 1\n },\n {\n label: 'Assignment',\n data: assignment,\n backgroundColor: 'rgb(23, 162, 184)',\n borderColor: 'rgb(23, 162, 184)',\n borderWidth: 1\n },\n {\n label: 'KPI Score',\n data: score,\n backgroundColor: 'rgb(39, 174, 96)',\n borderColor: 'rgb(39, 174, 96)',\n borderWidth: 1\n }\n ]\n }\n\n return (\n <>\n \n {item.status} \n
\n \n \n \n Monthly KPI\n
\n } height={400}>\n
\n \n );\n}\n\nexport default DataKPI;\n","import React from 'react';\nimport { Row, Col } from 'antd';\nimport DashboardItem from './DashboardItem';\n\nimport {\n Chart as ChartJS,\n CategoryScale,\n LinearScale,\n BarElement,\n Title,\n Tooltip,\n Legend,\n} from 'chart.js';\nimport { Bar } from 'react-chartjs-2';\n\nChartJS.register(\n CategoryScale,\n LinearScale,\n BarElement,\n Title,\n Tooltip,\n Legend\n);\n\nconst DataKPI2 = ({ monthlyKPI }) => {\n\n var target_high = []\n var target_medium = []\n var target_low = []\n var achievement_high = []\n var achievement_medium = []\n var achievement_low = []\n var star = []\n var score = []\n\n monthlyKPI?.map((item, i) => {\n target_high.push(item.data.target_high)\n target_medium.push(item.data.target_medium)\n target_low.push(item.data.target_low)\n achievement_high.push(item.data.achievement_high)\n achievement_medium.push(item.data.achievement_medium)\n achievement_low.push(item.data.achievement_low)\n star.push(item.data.star)\n score.push(item.data.valueKpi)\n })\n\n const data = {\n labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n datasets: [\n {\n label: 'HIGH',\n data: target_high,\n backgroundColor: 'rgb(220, 53, 69)',\n borderColor: 'rgb(220, 53, 69)',\n borderWidth: 1\n },\n {\n label: 'MEDIUM',\n data: target_medium,\n backgroundColor: 'rgb(255, 193, 7)',\n borderColor: 'rgb(255, 193, 7)',\n borderWidth: 1\n },\n {\n label: 'LOW',\n data: target_low,\n backgroundColor: 'rgb(23, 162, 184)',\n borderColor: 'rgb(23, 162, 184)',\n borderWidth: 1\n },\n {\n label: 'KPI Score',\n data: score,\n backgroundColor: 'rgb(39, 174, 96)',\n borderColor: 'rgb(39, 174, 96)',\n borderWidth: 1\n }\n ]\n }\n\n const data2 = {\n labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n datasets: [\n {\n label: 'HIGH',\n data: achievement_high,\n backgroundColor: 'rgb(220, 53, 69)',\n borderColor: 'rgb(220, 53, 69)',\n borderWidth: 1\n },\n {\n label: 'MEDIUM',\n data: achievement_medium,\n backgroundColor: 'rgb(255, 193, 7)',\n borderColor: 'rgb(255, 193, 7)',\n borderWidth: 1\n },\n {\n label: 'LOW',\n data: achievement_low,\n backgroundColor: 'rgb(23, 162, 184)',\n borderColor: 'rgb(23, 162, 184)',\n borderWidth: 1\n },\n {\n label: 'STAR',\n data: score,\n backgroundColor: 'rgb(39, 174, 96)',\n borderColor: 'rgb(39, 174, 96)',\n borderWidth: 1\n }\n ]\n }\n\n return (\n <>\n \n \n \n Monthly KPI - Target Completion\n
\n } height={400}>\n
\n\n \n \n \n Monthly KPI - Achievement\n
\n } height={400}>\n
\n \n );\n}\n\nexport default DataKPI2;\n","import React from 'react';\nimport { Table, Row, Col } from 'antd';\nimport DashboardItem from './DashboardItem';\nimport moment from 'moment'\n\nconst DataTechnician = ({ technician }) => {\n\n let columns = [{\n title: '',\n children: [\n {\n title: 'Name',\n dataIndex: 'name',\n key: `name`,\n width: 200,\n },\n ],\n }], data = []\n technician.map((item, i) => {\n\n if(i == 0) {\n item.data?.map((dt) => {\n columns.push({\n title: moment(['2023', dt.month-1]).format('MMM'),\n children: [\n {\n title: LOW
MEDIUM
HIGH
\n \n \n Ticket Technician\n
\n } height={400}>\n\n \n \n \n \n \n \n );\n}\n\nexport default DataTechnician;\n","import React from 'react';\nimport { Statistic, Card, Row, Col } from 'antd';\nimport { FileDoneOutlined } from '@ant-design/icons';\nimport Text from 'antd/lib/typography/Text';\nimport DashboardItem from './DashboardItem';\n\nimport {\n Chart as ChartJS,\n CategoryScale,\n LinearScale,\n BarElement,\n Title,\n Tooltip,\n Legend,\n} from 'chart.js';\nimport { Bar } from 'react-chartjs-2';\n\nChartJS.register(\n CategoryScale,\n LinearScale,\n BarElement,\n Title,\n Tooltip\n);\n\nconst DataTicketByType = ({ ticketType }) => {\n var label = []\n var dataTicket = []\n\n ticketType.map((el) => {\n label.push(el.type)\n dataTicket.push(el.total)\n })\n\n const data = {\n labels: label,\n datasets: [\n {\n data: dataTicket,\n backgroundColor: '#273C75',\n borderColor: '#273C75',\n borderWidth: 1\n },\n ]\n }\n\n return (\n <>\n