diff --git a/src/views/SimproV2/Presence/index.js b/src/views/SimproV2/Presence/index.js
index 2791d6f..3b4c1d4 100644
--- a/src/views/SimproV2/Presence/index.js
+++ b/src/views/SimproV2/Presence/index.js
@@ -1,339 +1,349 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
-import { Button } from 'reactstrap';
-import axios from 'axios';
-import * as XLSX from 'xlsx';
-import { NotificationContainer, NotificationManager } from 'react-notifications';
-import { Pagination, Tooltip, Table, DatePicker } from 'antd';
-import moment from 'moment';
-import { PRESENCE_SEARCH, IMAGE_GET_BY_ID } from '../../../const/ApiConst.js';
-import DialogFoto from './DialogFoto';
-import { useTranslation } from 'react-i18next';
-const { RangePicker } = DatePicker;
-const token = window.localStorage.getItem('token');
-
-
-const Index = ({ params }) => {
- const [dataTable, setDatatable] = useState([])
- const [search, setSearch] = useState('')
- const [currentPage, setCurrentPage] = useState(1)
- const [totalPage, setTotalPage] = useState(0)
- const [rowsPerPage, setRowsPerPage] = useState(10)
- const [dataExport, setDataExport] = useState([])
- const [startDate, setStartDate] = useState(moment(moment().format("YYYY-M-D")))
- const [endDate, setEndDate] = useState(moment(moment().format("YYYY-M-D")))
- const [currentDay, setCurrentDay] = useState("today")
- const [dataImage, setDataImage] = useState(null)
- const [openImage, setOpenImage] = useState(false)
- const { t } = useTranslation()
- const pageName = params.name;
-
- const config = {
- headers:
- {
- Authorization: `Bearer ${token}`,
- "Content-type": `application/json`
- }
- };
-
- useEffect(() => {
- getDataPresence();
- }, [search, currentPage, rowsPerPage, startDate, endDate])
-
- useEffect(() => {
- const cekData = dataExport || []
- if (cekData.length > 0) {
- exportExcel()
- }
- }, [dataExport])
-
- const handleSearch = e => {
- const value = e.target.value
- setSearch(value);
- setCurrentPage(1)
- };
-
- const getDataPresence = async () => {
-
-
- let start = 0;
-
- if (currentPage !== 1 && currentPage > 1) {
- start = (currentPage * rowsPerPage) - rowsPerPage
- }
-
- let dateStart = moment(startDate).format("YYYY-MM-DD 00:00:00");
- let dateEnd = moment(endDate).format("YYYY-MM-DD 23:59:59");
-
- const payload = {
- "paging": { "start": start, "length": rowsPerPage },
- "columns": [
- { "name": "name", "logic_operator": "ilike", "value": search, "table_name": "m_users" },
- { "name": "clock_in", "logic_operator": "range", "value": dateStart, "value1": dateEnd },
- ],
- "joins": [{
- "name": "m_users",
- "column_join": "user_id",
- "column_results": [
- "name",
- "ktp_number"
- ]
- }],
- "orders": { "columns": ["id"], "ascending": false }
- }
-
-
-
- const result = await axios
- .post(PRESENCE_SEARCH, payload, config)
- .then(res => res)
- .catch((error) => error.response);
-
-
- if (result && result.data && result.data.code == 200) {
- setDatatable(result.data.data);
- setTotalPage(result.data.totalRecord);
- } else {
- NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
- }
- }
-
- const handleImage = async (id, name) => {
-
- let url = IMAGE_GET_BY_ID(id, "presensi");
-
- const result = await axios
- .get(url, config)
- .then(res => res)
- .catch((error) => error.response);
- if (result && result.data.code == 200) {
- let dataRes = result.data.data
- let dataImage = {
- name,
- url: dataRes.image
- }
- await setDataImage(dataImage)
- setOpenImage(true)
- } else {
- NotificationManager.error('Data image tidak ditemukan!', 'Failed');
- }
- }
-
- const closeDialogImage = () => {
- setOpenImage(false)
- setDataImage(null)
- }
-
- const toggleDialogImage = () => {
- if (openImage) {
- setDataImage(null)
- }
- setOpenImage(!openImage)
- }
-
- const onShowSizeChange = (current, pageSize) => {
- setRowsPerPage(pageSize)
- }
-
- const onPagination = (current, pageSize) => {
- setCurrentPage(current)
- }
-
- const renderDurasiKerja = (jamMasuk, jamKeluar) => {
- if (jamMasuk && jamKeluar) {
- let start = moment(jamMasuk),
- end = moment(jamKeluar);
-
- let diff = end.diff(start);
- let result = moment.utc(diff).format('HH:mm:ss');
-
- if (result) {
- return result;
- } else {
- return "-"
- }
-
- } else {
- return "-"
- }
- }
-
- const handleExportExcel = async () => {
-
- let dateStart = moment(startDate).format("YYYY-MM-DD 00:00:00");
- let dateEnd = moment(endDate).format("YYYY-MM-DD 23:59:59");
-
- const payload = {
- "paging": { "start": 0, "length": -1 },
- "columns": [
- { "name": "name", "logic_operator": "ilike", "value": search, "table_name": "m_users" },
- { "name": "clock_in", "logic_operator": "range", "value": dateStart, "value1": dateEnd },
- ],
- "joins": [{
- "name": "m_users",
- "column_join": "user_id",
- "column_results": [
- "name",
- "ktp_number"
- ]
- }],
- "orders": { "columns": ["id"], "ascending": false }
- }
-
-
-
- const result = await axios
- .post(PRESENCE_SEARCH, payload, config)
- .then(res => res)
- .catch((error) => error.response);
-
-
- if (result && result.data && result.data.code == 200) {
- let resData = result.data.data;
- const excelData = [];
- resData.map((val, index) => {
- let dataRow = {
- "NIK/ID Card": val.join_first_ktp_number ? val.join_first_ktp_number : '-',
- "Nama Human Resource": val.join_first_name ? val.join_first_name : '',
- "Jam Masuk": val.clock_in ? moment(val.clock_in).format("D-M-YYYY HH:mm:ss") : '-',
- "Jam Keluar": val.clock_out ? moment(val.clock_out).format("D-M-YYYY HH:mm:ss") : '-',
- "Durasi Kerja": renderDurasiKerja(val.clock_in, val.clock_out),
- "Lokasi Masuk": val.clock_in_loc && val.clock_in_loc !== '' ? val.clock_in_loc : '-',
- "Lokasi Pulang": val.clock_out_loc && val.clock_out_loc !== '' ? val.clock_out_loc : '-',
- "Area Kerja In": val.clock_in_boundary ? "Sesuai" : "Tidak Sesuai",
- "Area Kerja Out": val.clock_out_boundary == null ? "-" : val.clock_out_boundary ? "Sesuai" : "Tidak Sesuai",
- }
- excelData.push(dataRow)
- })
- await setDataExport(excelData);
- } else {
- NotificationManager.error('Gagal Export Data!!', 'Failed');
- }
- }
-
-
- const exportExcel = () => {
- const dataExcel = dataExport || [];
- const fileName = `Data ${pageName}.xlsx`;
- const ws = XLSX.utils.json_to_sheet(dataExcel);
- const wb = XLSX.utils.book_new();
- XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`);
-
- XLSX.writeFile(wb, fileName);
- setDataExport([])
- }
- const renderTable = useMemo(() => {
- const columns = [
- {
- title: 'Action',
- dataIndex: '',
- key: 'x',
- render: (text, record) => <>
-
- handleImage(text.id, text.join_first_name)}>
-
- ,
- },
- { title: t('nik'), dataIndex: 'join_first_ktp_number', key: 'join_first_ktp_number' },
- { title: t('nameHR'), dataIndex: 'join_first_name', key: 'join_first_name' },
- { title: t('presenceIn'), dataIndex: 'clock_in', key: 'clock_in', render: (text, record) => ({text ? moment(text).format("D-M-YYYY HH:mm:ss") : "-"}
) },
- { title: t('presenceOut'), dataIndex: 'clock_out', key: 'clock_out', render: (text, record) => ({text ? moment(text).format("D-M-YYYY HH:mm:ss") : "-"}
) },
- { title: t('workDuration'), render: (text, record) => ({renderDurasiKerja(record.clock_in, record.clock_out)}
) },
- { title: t('locIn'), dataIndex: 'clock_in_loc', key: 'clock_in_loc', render: (text, record) => <>{text && text !== '' ? text : '-'} },
- { title: t('locOut'), dataIndex: 'clock_out_loc', key: 'clock_out_loc', render: (text, record) => <>{text && text !== '' ? text : '-'} },
- { title: t('workAreaIn'), dataIndex: 'clock_out_loc', key: 'clock_out_loc', render: (text, record) => ({record.clock_in_boundary ? : }
) },
- { title: t('workAreaOut'), dataIndex: 'clock_out_loc', key: 'clock_out_loc', render: (text, record) => ({record.clock_out_boundary == null ? : record.clock_out_boundary ? : }
) },
- ];
- return (
-
- )
- }, [dataTable])
-
- const handleDatePicker = (date, dateString) => {
- setStartDate(date[0])
- setEndDate(date[1])
- }
-
- const handleChangeDay = (e) => {
- const val = e.target.value;
- setCurrentDay(val)
- if (val === "today") {
- setStartDate(moment(moment().format("YYYY-M-D")))
- setEndDate(moment(moment().format("YYYY-M-D")))
- setCurrentPage(1)
- } else if (val === "3 day") {
- setStartDate(moment(moment().subtract(3, "days").format("YYYY-M-D")))
- setEndDate(moment(moment().format("YYYY-M-D")))
- setCurrentPage(1)
- } else if (val === "7 day") {
- setStartDate(moment(moment().subtract(7, "days").format("YYYY-M-D")))
- setEndDate(moment(moment().format("YYYY-M-D")))
- setCurrentPage(1)
- } else {
- setStartDate(moment(moment().format("YYYY-M-D")))
- setEndDate(moment(moment().format("YYYY-M-D")))
- setCurrentPage(1)
- }
- }
-
- return (
-
-
-
-
-
- {pageName}
-
-
-
-
-
-
-
-
-
-
-
-
- handleChangeDay(e)} defaultValue={currentDay}>
-
-
-
-
-
-
- {' '}
-
-
-
-
-
-
{text ? moment(text).format("D-M-YYYY HH:mm:ss") : "-"}
) },
+ { title: t('presenceOut'), dataIndex: 'clock_out', key: 'clock_out', render: (text, record) => ({text ? moment(text).format("D-M-YYYY HH:mm:ss") : "-"}
) },
+ { title: t('workDuration'), render: (text, record) => ({renderDurasiKerja(record.clock_in, record.clock_out)}
) },
+ { title: t('locIn'), dataIndex: 'clock_in_loc', key: 'clock_in_loc', render: (text, record) => <>{text && text !== '' ? text : '-'} },
+ { title: t('locOut'), dataIndex: 'clock_out_loc', key: 'clock_out_loc', render: (text, record) => <>{text && text !== '' ? text : '-'} },
+ { title: t('workAreaIn'), dataIndex: 'clock_out_loc', key: 'clock_out_loc', render: (text, record) => ({record.clock_in_boundary ? : }
) },
+ { title: t('workAreaOut'), dataIndex: 'clock_out_loc', key: 'clock_out_loc', render: (text, record) => ({record.clock_out_boundary == null ? : record.clock_out_boundary ? : }
) },
+ ];
+ return (
+
+ )
+ }, [dataTable])
+
+ const handleDatePicker = (date, dateString) => {
+ setStartDate(date[0])
+ setEndDate(date[1])
+ }
+
+ const handleChangeDay = (e) => {
+ const val = e.target.value;
+ setCurrentDay(val)
+ if (val === "today") {
+ setStartDate(moment(moment().format("YYYY-M-D")))
+ setEndDate(moment(moment().format("YYYY-M-D")))
+ setCurrentPage(1)
+ } else if (val === "3 day") {
+ setStartDate(moment(moment().subtract(3, "days").format("YYYY-M-D")))
+ setEndDate(moment(moment().format("YYYY-M-D")))
+ setCurrentPage(1)
+ } else if (val === "7 day") {
+ setStartDate(moment(moment().subtract(7, "days").format("YYYY-M-D")))
+ setEndDate(moment(moment().format("YYYY-M-D")))
+ setCurrentPage(1)
+ } else {
+ setStartDate(moment(moment().format("YYYY-M-D")))
+ setEndDate(moment(moment().format("YYYY-M-D")))
+ setCurrentPage(1)
+ }
+ }
+
+ return (
+
+
+
+
+
+ {pageName}
+
+
+
+
+
+
+
+
+
+
+
+
+ handleChangeDay(e)} defaultValue={currentDay}>
+
+
+
+
+
+
+ {' '}
+
+
+
+
+
+