wahyun
11 months ago
4 changed files with 551 additions and 444 deletions
@ -1,339 +1,349 @@ |
|||||||
import React, { useState, useEffect, useMemo } from 'react'; |
import React, { useState, useEffect, useMemo } from 'react'; |
||||||
import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap'; |
import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap'; |
||||||
import { Button } from 'reactstrap'; |
import { Button } from 'reactstrap'; |
||||||
import axios from 'axios'; |
import axios from 'axios'; |
||||||
import * as XLSX from 'xlsx'; |
import * as XLSX from 'xlsx'; |
||||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||||
import { Pagination, Tooltip, Table, DatePicker } from 'antd'; |
import { Pagination, Tooltip, Table, DatePicker } from 'antd'; |
||||||
import moment from 'moment'; |
import moment from 'moment'; |
||||||
import { PRESENCE_SEARCH, IMAGE_GET_BY_ID } from '../../../const/ApiConst.js'; |
import { PRESENCE_SEARCH, IMAGE_GET_BY_ID } from '../../../const/ApiConst.js'; |
||||||
import DialogFoto from './DialogFoto'; |
import DialogFoto from './DialogFoto'; |
||||||
import { useTranslation } from 'react-i18next'; |
import { useTranslation } from 'react-i18next'; |
||||||
const { RangePicker } = DatePicker; |
const { RangePicker } = DatePicker; |
||||||
const token = window.localStorage.getItem('token'); |
|
||||||
|
const Index = ({ params,...props }) => { |
||||||
|
let role_id = 0, user_id = 0, isLogin = false, token = '', company_id = 0, all_project = null, role_name='', hierarchy=[], user_name=''; |
||||||
const Index = ({ params }) => { |
if (props && props.role_id && props.user_id) { |
||||||
const [dataTable, setDatatable] = useState([]) |
role_id = props.role_id; |
||||||
const [search, setSearch] = useState('') |
user_id = props.user_id; |
||||||
const [currentPage, setCurrentPage] = useState(1) |
token = props.token; |
||||||
const [totalPage, setTotalPage] = useState(0) |
isLogin = props.isLogin; |
||||||
const [rowsPerPage, setRowsPerPage] = useState(10) |
company_id = props.company_id; |
||||||
const [dataExport, setDataExport] = useState([]) |
all_project = props.all_project; |
||||||
const [startDate, setStartDate] = useState(moment(moment().format("YYYY-M-D"))) |
role_name = props.role_name; |
||||||
const [endDate, setEndDate] = useState(moment(moment().format("YYYY-M-D"))) |
isLogin = props.isLogin; |
||||||
const [currentDay, setCurrentDay] = useState("today") |
hierarchy = props.hierarchy; |
||||||
const [dataImage, setDataImage] = useState(null) |
user_name = props.user_name; |
||||||
const [openImage, setOpenImage] = useState(false) |
} |
||||||
const { t } = useTranslation() |
|
||||||
const pageName = params.name; |
const [dataTable, setDatatable] = useState([]) |
||||||
|
const [search, setSearch] = useState('') |
||||||
const config = { |
const [currentPage, setCurrentPage] = useState(1) |
||||||
headers: |
const [totalPage, setTotalPage] = useState(0) |
||||||
{ |
const [rowsPerPage, setRowsPerPage] = useState(10) |
||||||
Authorization: `Bearer ${token}`, |
const [dataExport, setDataExport] = useState([]) |
||||||
"Content-type": `application/json` |
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) |
||||||
useEffect(() => { |
const [openImage, setOpenImage] = useState(false) |
||||||
getDataPresence(); |
const { t } = useTranslation() |
||||||
}, [search, currentPage, rowsPerPage, startDate, endDate]) |
const pageName = params.name; |
||||||
|
|
||||||
useEffect(() => { |
const config = { |
||||||
const cekData = dataExport || [] |
headers: |
||||||
if (cekData.length > 0) { |
{ |
||||||
exportExcel() |
Authorization: `Bearer ${token}`, |
||||||
} |
"Content-type": `application/json` |
||||||
}, [dataExport]) |
} |
||||||
|
}; |
||||||
const handleSearch = e => { |
|
||||||
const value = e.target.value |
useEffect(() => { |
||||||
setSearch(value); |
getDataPresence(); |
||||||
setCurrentPage(1) |
}, [search, currentPage, rowsPerPage, startDate, endDate]) |
||||||
}; |
|
||||||
|
useEffect(() => { |
||||||
const getDataPresence = async () => { |
const cekData = dataExport || [] |
||||||
|
if (cekData.length > 0) { |
||||||
|
exportExcel() |
||||||
let start = 0; |
} |
||||||
|
}, [dataExport]) |
||||||
if (currentPage !== 1 && currentPage > 1) { |
|
||||||
start = (currentPage * rowsPerPage) - rowsPerPage |
const handleSearch = e => { |
||||||
} |
const value = e.target.value |
||||||
|
setSearch(value); |
||||||
let dateStart = moment(startDate).format("YYYY-MM-DD 00:00:00"); |
setCurrentPage(1) |
||||||
let dateEnd = moment(endDate).format("YYYY-MM-DD 23:59:59"); |
}; |
||||||
|
|
||||||
const payload = { |
const getDataPresence = async () => { |
||||||
"paging": { "start": start, "length": rowsPerPage }, |
let start = 0; |
||||||
"columns": [ |
|
||||||
{ "name": "name", "logic_operator": "ilike", "value": search, "table_name": "m_users" }, |
if (currentPage !== 1 && currentPage > 1) { |
||||||
{ "name": "clock_in", "logic_operator": "range", "value": dateStart, "value1": dateEnd }, |
start = (currentPage * rowsPerPage) - rowsPerPage |
||||||
], |
} |
||||||
"joins": [{ |
|
||||||
"name": "m_users", |
let dateStart = moment(startDate).format("YYYY-MM-DD 00:00:00"); |
||||||
"column_join": "user_id", |
let dateEnd = moment(endDate).format("YYYY-MM-DD 23:59:59"); |
||||||
"column_results": [ |
|
||||||
"name", |
const payload = { |
||||||
"ktp_number" |
"paging": { "start": start, "length": rowsPerPage }, |
||||||
] |
"columns": [ |
||||||
}], |
{ "name": "name", "logic_operator": "ilike", "value": search, "table_name": "m_users" }, |
||||||
"orders": { "columns": ["id"], "ascending": false } |
{ "name": "clock_in", "logic_operator": "range", "value": dateStart, "value1": dateEnd }, |
||||||
} |
], |
||||||
|
"joins": [{ |
||||||
|
"name": "m_users", |
||||||
|
"column_join": "user_id", |
||||||
const result = await axios |
"column_results": [ |
||||||
.post(PRESENCE_SEARCH, payload, config) |
"name", |
||||||
.then(res => res) |
"ktp_number" |
||||||
.catch((error) => error.response); |
] |
||||||
|
}], |
||||||
|
"orders": { "columns": ["id"], "ascending": false } |
||||||
if (result && result.data && result.data.code == 200) { |
} |
||||||
setDatatable(result.data.data); |
|
||||||
setTotalPage(result.data.totalRecord); |
|
||||||
} else { |
|
||||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
const result = await axios |
||||||
} |
.post(PRESENCE_SEARCH, payload, config) |
||||||
} |
.then(res => res) |
||||||
|
.catch((error) => error.response); |
||||||
const handleImage = async (id, name) => { |
|
||||||
|
|
||||||
let url = IMAGE_GET_BY_ID(id, "presensi"); |
if (result && result.data && result.data.code == 200) { |
||||||
|
setDatatable(result.data.data); |
||||||
const result = await axios |
setTotalPage(result.data.totalRecord); |
||||||
.get(url, config) |
} else { |
||||||
.then(res => res) |
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||||
.catch((error) => error.response); |
} |
||||||
if (result && result.data.code == 200) { |
} |
||||||
let dataRes = result.data.data |
|
||||||
let dataImage = { |
const handleImage = async (id, name) => { |
||||||
name, |
|
||||||
url: dataRes.image |
let url = IMAGE_GET_BY_ID(id, "presensi"); |
||||||
} |
|
||||||
await setDataImage(dataImage) |
const result = await axios |
||||||
setOpenImage(true) |
.get(url, config) |
||||||
} else { |
.then(res => res) |
||||||
NotificationManager.error('Data image tidak ditemukan!', 'Failed'); |
.catch((error) => error.response); |
||||||
} |
if (result && result.data.code == 200) { |
||||||
} |
let dataRes = result.data.data |
||||||
|
let dataImage = { |
||||||
const closeDialogImage = () => { |
name, |
||||||
setOpenImage(false) |
url: dataRes.image |
||||||
setDataImage(null) |
} |
||||||
} |
await setDataImage(dataImage) |
||||||
|
setOpenImage(true) |
||||||
const toggleDialogImage = () => { |
} else { |
||||||
if (openImage) { |
NotificationManager.error('Data image tidak ditemukan!', 'Failed'); |
||||||
setDataImage(null) |
} |
||||||
} |
} |
||||||
setOpenImage(!openImage) |
|
||||||
} |
const closeDialogImage = () => { |
||||||
|
setOpenImage(false) |
||||||
const onShowSizeChange = (current, pageSize) => { |
setDataImage(null) |
||||||
setRowsPerPage(pageSize) |
} |
||||||
} |
|
||||||
|
const toggleDialogImage = () => { |
||||||
const onPagination = (current, pageSize) => { |
if (openImage) { |
||||||
setCurrentPage(current) |
setDataImage(null) |
||||||
} |
} |
||||||
|
setOpenImage(!openImage) |
||||||
const renderDurasiKerja = (jamMasuk, jamKeluar) => { |
} |
||||||
if (jamMasuk && jamKeluar) { |
|
||||||
let start = moment(jamMasuk), |
const onShowSizeChange = (current, pageSize) => { |
||||||
end = moment(jamKeluar); |
setRowsPerPage(pageSize) |
||||||
|
} |
||||||
let diff = end.diff(start); |
|
||||||
let result = moment.utc(diff).format('HH:mm:ss'); |
const onPagination = (current, pageSize) => { |
||||||
|
setCurrentPage(current) |
||||||
if (result) { |
} |
||||||
return result; |
|
||||||
} else { |
const renderDurasiKerja = (jamMasuk, jamKeluar) => { |
||||||
return "-" |
if (jamMasuk && jamKeluar) { |
||||||
} |
let start = moment(jamMasuk), |
||||||
|
end = moment(jamKeluar); |
||||||
} else { |
|
||||||
return "-" |
let diff = end.diff(start); |
||||||
} |
let result = moment.utc(diff).format('HH:mm:ss'); |
||||||
} |
|
||||||
|
if (result) { |
||||||
const handleExportExcel = async () => { |
return result; |
||||||
|
} else { |
||||||
let dateStart = moment(startDate).format("YYYY-MM-DD 00:00:00"); |
return "-" |
||||||
let dateEnd = moment(endDate).format("YYYY-MM-DD 23:59:59"); |
} |
||||||
|
|
||||||
const payload = { |
} else { |
||||||
"paging": { "start": 0, "length": -1 }, |
return "-" |
||||||
"columns": [ |
} |
||||||
{ "name": "name", "logic_operator": "ilike", "value": search, "table_name": "m_users" }, |
} |
||||||
{ "name": "clock_in", "logic_operator": "range", "value": dateStart, "value1": dateEnd }, |
|
||||||
], |
const handleExportExcel = async () => { |
||||||
"joins": [{ |
|
||||||
"name": "m_users", |
let dateStart = moment(startDate).format("YYYY-MM-DD 00:00:00"); |
||||||
"column_join": "user_id", |
let dateEnd = moment(endDate).format("YYYY-MM-DD 23:59:59"); |
||||||
"column_results": [ |
|
||||||
"name", |
const payload = { |
||||||
"ktp_number" |
"paging": { "start": 0, "length": -1 }, |
||||||
] |
"columns": [ |
||||||
}], |
{ "name": "name", "logic_operator": "ilike", "value": search, "table_name": "m_users" }, |
||||||
"orders": { "columns": ["id"], "ascending": false } |
{ "name": "clock_in", "logic_operator": "range", "value": dateStart, "value1": dateEnd }, |
||||||
} |
], |
||||||
|
"joins": [{ |
||||||
|
"name": "m_users", |
||||||
|
"column_join": "user_id", |
||||||
const result = await axios |
"column_results": [ |
||||||
.post(PRESENCE_SEARCH, payload, config) |
"name", |
||||||
.then(res => res) |
"ktp_number" |
||||||
.catch((error) => error.response); |
] |
||||||
|
}], |
||||||
|
"orders": { "columns": ["id"], "ascending": false } |
||||||
if (result && result.data && result.data.code == 200) { |
} |
||||||
let resData = result.data.data; |
|
||||||
const excelData = []; |
|
||||||
resData.map((val, index) => { |
|
||||||
let dataRow = { |
const result = await axios |
||||||
"NIK/ID Card": val.join_first_ktp_number ? val.join_first_ktp_number : '-', |
.post(PRESENCE_SEARCH, payload, config) |
||||||
"Nama Human Resource": val.join_first_name ? val.join_first_name : '', |
.then(res => res) |
||||||
"Jam Masuk": val.clock_in ? moment(val.clock_in).format("D-M-YYYY HH:mm:ss") : '-', |
.catch((error) => error.response); |
||||||
"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 : '-', |
if (result && result.data && result.data.code == 200) { |
||||||
"Lokasi Pulang": val.clock_out_loc && val.clock_out_loc !== '' ? val.clock_out_loc : '-', |
let resData = result.data.data; |
||||||
"Area Kerja In": val.clock_in_boundary ? "Sesuai" : "Tidak Sesuai", |
const excelData = []; |
||||||
"Area Kerja Out": val.clock_out_boundary == null ? "-" : val.clock_out_boundary ? "Sesuai" : "Tidak Sesuai", |
resData.map((val, index) => { |
||||||
} |
let dataRow = { |
||||||
excelData.push(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 : '', |
||||||
await setDataExport(excelData); |
"Jam Masuk": val.clock_in ? moment(val.clock_in).format("D-M-YYYY HH:mm:ss") : '-', |
||||||
} else { |
"Jam Keluar": val.clock_out ? moment(val.clock_out).format("D-M-YYYY HH:mm:ss") : '-', |
||||||
NotificationManager.error('Gagal Export Data!!', 'Failed'); |
"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", |
||||||
const exportExcel = () => { |
} |
||||||
const dataExcel = dataExport || []; |
excelData.push(dataRow) |
||||||
const fileName = `Data ${pageName}.xlsx`; |
}) |
||||||
const ws = XLSX.utils.json_to_sheet(dataExcel); |
await setDataExport(excelData); |
||||||
const wb = XLSX.utils.book_new(); |
} else { |
||||||
XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`); |
NotificationManager.error('Gagal Export Data!!', 'Failed'); |
||||||
|
} |
||||||
XLSX.writeFile(wb, fileName); |
} |
||||||
setDataExport([]) |
|
||||||
} |
|
||||||
const renderTable = useMemo(() => { |
const exportExcel = () => { |
||||||
const columns = [ |
const dataExcel = dataExport || []; |
||||||
{ |
const fileName = `Data ${pageName}.xlsx`; |
||||||
title: 'Action', |
const ws = XLSX.utils.json_to_sheet(dataExcel); |
||||||
dataIndex: '', |
const wb = XLSX.utils.book_new(); |
||||||
key: 'x', |
XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`); |
||||||
render: (text, record) => <> |
|
||||||
<Tooltip title={t('image')}> |
XLSX.writeFile(wb, fileName); |
||||||
<i id="TooltipEdit" className="fa fa-image" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleImage(text.id, text.join_first_name)}></i> |
setDataExport([]) |
||||||
</Tooltip> |
} |
||||||
</>, |
const renderTable = useMemo(() => { |
||||||
}, |
const columns = [ |
||||||
{ 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: 'Action', |
||||||
{ title: t('presenceIn'), dataIndex: 'clock_in', key: 'clock_in', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY HH:mm:ss") : "-"}</div>) }, |
dataIndex: '', |
||||||
{ title: t('presenceOut'), dataIndex: 'clock_out', key: 'clock_out', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY HH:mm:ss") : "-"}</div>) }, |
key: 'x', |
||||||
{ title: t('workDuration'), render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{renderDurasiKerja(record.clock_in, record.clock_out)}</div>) }, |
render: (text, record) => <> |
||||||
{ title: t('locIn'), dataIndex: 'clock_in_loc', key: 'clock_in_loc', render: (text, record) => <>{text && text !== '' ? text : '-'}</> }, |
<Tooltip title={t('image')}> |
||||||
{ title: t('locOut'), dataIndex: 'clock_out_loc', key: 'clock_out_loc', render: (text, record) => <>{text && text !== '' ? text : '-'}</> }, |
<i id="TooltipEdit" className="fa fa-image" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleImage(text.id, text.join_first_name)}></i> |
||||||
{ title: t('workAreaIn'), dataIndex: 'clock_out_loc', key: 'clock_out_loc', render: (text, record) => (<div style={{ whiteSpace: "nowrap", textAlign: "center" }}>{record.clock_in_boundary ? <i className="fa fa-check-circle fa-lg" style={{ color: 'green' }}></i> : <i className="fa fa-times-circle fa-lg" style={{ color: 'red' }}></i>}</div>) }, |
</Tooltip> |
||||||
{ title: t('workAreaOut'), dataIndex: 'clock_out_loc', key: 'clock_out_loc', render: (text, record) => (<div style={{ whiteSpace: "nowrap", textAlign: "center" }}>{record.clock_out_boundary == null ? <i class="fa fa-window-minimize fa-lg" style={{ color: 'orange' }}></i> : record.clock_out_boundary ? <i className="fa fa-check-circle fa-lg" style={{ color: 'green' }}></i> : <i className="fa fa-times-circle fa-lg" style={{ color: 'red' }}></i>}</div>) }, |
</>, |
||||||
]; |
}, |
||||||
return ( |
{ title: t('nik'), dataIndex: 'join_first_ktp_number', key: 'join_first_ktp_number' }, |
||||||
<Table |
{ title: t('nameHR'), dataIndex: 'join_first_name', key: 'join_first_name' }, |
||||||
rowKey="id" |
{ title: t('presenceIn'), dataIndex: 'clock_in', key: 'clock_in', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY HH:mm:ss") : "-"}</div>) }, |
||||||
size="small" |
{ title: t('presenceOut'), dataIndex: 'clock_out', key: 'clock_out', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{text ? moment(text).format("D-M-YYYY HH:mm:ss") : "-"}</div>) }, |
||||||
columns={columns} |
{ title: t('workDuration'), render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{renderDurasiKerja(record.clock_in, record.clock_out)}</div>) }, |
||||||
dataSource={dataTable} |
{ title: t('locIn'), dataIndex: 'clock_in_loc', key: 'clock_in_loc', render: (text, record) => <>{text && text !== '' ? text : '-'}</> }, |
||||||
pagination={false} |
{ 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) => (<div style={{ whiteSpace: "nowrap", textAlign: "center" }}>{record.clock_in_boundary ? <i className="fa fa-check-circle fa-lg" style={{ color: 'green' }}></i> : <i className="fa fa-times-circle fa-lg" style={{ color: 'red' }}></i>}</div>) }, |
||||||
) |
{ title: t('workAreaOut'), dataIndex: 'clock_out_loc', key: 'clock_out_loc', render: (text, record) => (<div style={{ whiteSpace: "nowrap", textAlign: "center" }}>{record.clock_out_boundary == null ? <i class="fa fa-window-minimize fa-lg" style={{ color: 'orange' }}></i> : record.clock_out_boundary ? <i className="fa fa-check-circle fa-lg" style={{ color: 'green' }}></i> : <i className="fa fa-times-circle fa-lg" style={{ color: 'red' }}></i>}</div>) }, |
||||||
}, [dataTable]) |
]; |
||||||
|
return ( |
||||||
const handleDatePicker = (date, dateString) => { |
<Table |
||||||
setStartDate(date[0]) |
rowKey="id" |
||||||
setEndDate(date[1]) |
size="small" |
||||||
} |
columns={columns} |
||||||
|
dataSource={dataTable} |
||||||
const handleChangeDay = (e) => { |
pagination={false} |
||||||
const val = e.target.value; |
/> |
||||||
setCurrentDay(val) |
) |
||||||
if (val === "today") { |
}, [dataTable]) |
||||||
setStartDate(moment(moment().format("YYYY-M-D"))) |
|
||||||
setEndDate(moment(moment().format("YYYY-M-D"))) |
const handleDatePicker = (date, dateString) => { |
||||||
setCurrentPage(1) |
setStartDate(date[0]) |
||||||
} else if (val === "3 day") { |
setEndDate(date[1]) |
||||||
setStartDate(moment(moment().subtract(3, "days").format("YYYY-M-D"))) |
} |
||||||
setEndDate(moment(moment().format("YYYY-M-D"))) |
|
||||||
setCurrentPage(1) |
const handleChangeDay = (e) => { |
||||||
} else if (val === "7 day") { |
const val = e.target.value; |
||||||
setStartDate(moment(moment().subtract(7, "days").format("YYYY-M-D"))) |
setCurrentDay(val) |
||||||
setEndDate(moment(moment().format("YYYY-M-D"))) |
if (val === "today") { |
||||||
setCurrentPage(1) |
setStartDate(moment(moment().format("YYYY-M-D"))) |
||||||
} else { |
setEndDate(moment(moment().format("YYYY-M-D"))) |
||||||
setStartDate(moment(moment().format("YYYY-M-D"))) |
setCurrentPage(1) |
||||||
setEndDate(moment(moment().format("YYYY-M-D"))) |
} else if (val === "3 day") { |
||||||
setCurrentPage(1) |
setStartDate(moment(moment().subtract(3, "days").format("YYYY-M-D"))) |
||||||
} |
setEndDate(moment(moment().format("YYYY-M-D"))) |
||||||
} |
setCurrentPage(1) |
||||||
|
} else if (val === "7 day") { |
||||||
return ( |
setStartDate(moment(moment().subtract(7, "days").format("YYYY-M-D"))) |
||||||
<div> |
setEndDate(moment(moment().format("YYYY-M-D"))) |
||||||
<NotificationContainer /> |
setCurrentPage(1) |
||||||
<DialogFoto |
} else { |
||||||
openDialog={openImage} |
setStartDate(moment(moment().format("YYYY-M-D"))) |
||||||
closeDialog={closeDialogImage} |
setEndDate(moment(moment().format("YYYY-M-D"))) |
||||||
toggleDialog={toggleDialogImage} |
setCurrentPage(1) |
||||||
dataImage={dataImage} |
} |
||||||
/> |
} |
||||||
<Card> |
|
||||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
return ( |
||||||
<h4 className="capitalize">{pageName}</h4> |
<div> |
||||||
<Row> |
<NotificationContainer /> |
||||||
<Col> |
<DialogFoto |
||||||
<Tooltip title={t('exportExcel')}> |
openDialog={openImage} |
||||||
<Button style={{ marginLeft: "5px" }} id="TooltipExport" color="primary" onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button> |
closeDialog={closeDialogImage} |
||||||
</Tooltip> |
toggleDialog={toggleDialogImage} |
||||||
</Col> |
dataImage={dataImage} |
||||||
</Row> |
/> |
||||||
</CardHeader> |
<Card> |
||||||
<CardBody> |
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
||||||
<div style={{ display: "flex", justifyContent: "space-between" }}> |
<h4 className="capitalize">{pageName}</h4> |
||||||
<div style={{ width: "100%", display: "flex", alignItems: "center" }}> |
<Row> |
||||||
<div style={{ width: "100%", marginRight: "10px", maxWidth: "200px" }}> |
<Col> |
||||||
<Input type="select" onChange={(e) => handleChangeDay(e)} defaultValue={currentDay}> |
<Tooltip title={t('exportExcel')}> |
||||||
<option value="today">{t('today')}</option> |
<Button style={{ marginLeft: "5px" }} id="TooltipExport" color="primary" onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button> |
||||||
<option value="3 day">{t('3days')}</option> |
</Tooltip> |
||||||
<option value="7 day">{t('7days')}</option> |
</Col> |
||||||
</Input> |
</Row> |
||||||
</div> |
</CardHeader> |
||||||
<div style={{ width: "50%", marginTop: "3px" }}> |
<CardBody> |
||||||
<RangePicker format="DD-MM-YYYY" size="default" allowClear={false} value={[startDate, endDate]} onChange={handleDatePicker} />{' '} |
<div style={{ display: "flex", justifyContent: "space-between" }}> |
||||||
<Button color="primary" onClick={() => getDataPresence()}>{t('search')}</Button> |
<div style={{ width: "100%", display: "flex", alignItems: "center" }}> |
||||||
</div> |
<div style={{ width: "100%", marginRight: "10px", maxWidth: "200px" }}> |
||||||
</div> |
<Input type="select" onChange={(e) => handleChangeDay(e)} defaultValue={currentDay}> |
||||||
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={t('searchHR')} style={{ maxWidth: "200px", marginBottom: "20px" }} /> |
<option value="today">{t('today')}</option> |
||||||
</div> |
<option value="3 day">{t('3days')}</option> |
||||||
{renderTable} |
<option value="7 day">{t('7days')}</option> |
||||||
<Pagination |
</Input> |
||||||
style={{ marginTop: "25px" }} |
</div> |
||||||
showSizeChanger |
<div style={{ width: "50%", marginTop: "3px" }}> |
||||||
onShowSizeChange={onShowSizeChange} |
<RangePicker format="DD-MM-YYYY" size="default" allowClear={false} value={[startDate, endDate]} onChange={handleDatePicker} />{' '} |
||||||
onChange={onPagination} |
<Button color="primary" onClick={() => getDataPresence()}>{t('search')}</Button> |
||||||
current={currentPage} |
</div> |
||||||
pageSize={rowsPerPage} |
</div> |
||||||
total={totalPage} |
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={t('searchHR')} style={{ maxWidth: "200px", marginBottom: "20px" }} /> |
||||||
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
</div> |
||||||
/> |
{renderTable} |
||||||
</CardBody> |
<Pagination |
||||||
</Card> |
style={{ marginTop: "25px" }} |
||||||
</div> |
showSizeChanger |
||||||
) |
onShowSizeChange={onShowSizeChange} |
||||||
} |
onChange={onPagination} |
||||||
|
current={currentPage} |
||||||
export default Index; |
pageSize={rowsPerPage} |
||||||
|
total={totalPage} |
||||||
|
pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]} |
||||||
|
/> |
||||||
|
</CardBody> |
||||||
|
</Card> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default Index; |
||||||
|
|||||||
Loading…
Reference in new issue