@ -8,6 +8,7 @@ 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' ) ;
@ -24,6 +25,7 @@ const Index = ({ params }) => {
const [ currentDay , setCurrentDay ] = useState ( "today" )
const [ dataImage , setDataImage ] = useState ( null )
const [ openImage , setOpenImage ] = useState ( false )
const { t } = useTranslation ( )
const pageName = params . name ;
const config = {
@ -196,12 +198,13 @@ const Index = ({ params }) => {
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 : '' ,
"Tanggal Kehadiran" : val . date _presence ? moment ( val . date _presence ) . format ( "D-M-YYYY" ) : '-' ,
"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 ) ,
"Clock-in Location" : val . clock _in _loc && val . clock _in _loc !== '' ? val . clock _in _loc : '-' ,
"Clock-out Location" : val . clock _out _loc && val . clock _out _loc !== '' ? val . clock _out _loc : '-'
"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 )
} )
@ -229,26 +232,20 @@ const Index = ({ params }) => {
dataIndex : '' ,
key : 'x' ,
render : ( text , record ) => < >
{ / * < T o o l t i p t i t l e = " D e l e t e " >
< i id = "TooltipDelete" className = "fa fa-trash" style = { { color : 'red' , marginRight : '10px' , cursor : "pointer" } } onClick = { ( ) => handleDelete ( text . id ) } > < / i >
< / T o o l t i p >
< Tooltip title = "Edit" >
< i id = "TooltipEdit" className = "fa fa-edit" style = { { color : 'green' , cursor : "pointer" } } onClick = { ( ) => handleEdit ( text ) } > < / i >
< /Tooltip> */ }
< Tooltip title = "Image" >
< Tooltip title = { t ( 'image' ) } >
< i id = "TooltipEdit" className = "fa fa-image" style = { { color : 'green' , cursor : "pointer" } } onClick = { ( ) => handleImage ( text . id , text . join _first _name ) } > < / i >
< / T o o l t i p >
< / > ,
} ,
{ title : 'NIK/ID Card' , dataIndex : 'join_first_ktp_number' , key : 'join_first_ktp_number' } ,
{ title : 'Nama HR' , dataIndex : 'join_first_name' , key : 'join_first_name' } ,
{ title : 'Waktu Masuk' , dataIndex : 'clock_in' , key : 'clock_in' , render : ( text , record ) => ( < div style = { { whiteSpace : "nowrap" } } > { text ? moment ( text ) . format ( "D-M-YYYY HH:mm:ss" ) : "-" } < / d i v > ) } ,
{ title : 'Waktu Keluar' , dataIndex : 'clock_out' , key : 'clock_out' , render : ( text , record ) => ( < div style = { { whiteSpace : "nowrap" } } > { text ? moment ( text ) . format ( "D-M-YYYY HH:mm:ss" ) : "-" } < / d i v > ) } ,
{ title : 'Durasi Kerja' , render : ( text , record ) => ( < div style = { { whiteSpace : "nowrap" } } > { renderDurasiKerja ( record . clock _in , record . clock _out ) } < / d i v > ) } ,
{ title : 'Lokasi Masuk' , dataIndex : 'clock_in_loc' , key : 'clock_in_loc' , render : ( text , record ) => < > { text && text !== '' ? text : '-' } < / > } ,
{ title : 'Lokasi Pulang' , dataIndex : 'clock_out_loc' , key : 'clock_out_loc' , render : ( text , record ) => < > { text && text !== '' ? text : '-' } < / > } ,
{ title : Kerja In', 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 > } < / d i v > ) } ,
{ title : Kerja Out', 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 > } < / d i v > ) } ,
{ 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 ) => ( < div style = { { whiteSpace : "nowrap" } } > { text ? moment ( text ) . format ( "D-M-YYYY HH:mm:ss" ) : "-" } < / d i v > ) } ,
{ 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" ) : "-" } < / d i v > ) } ,
{ title : t ( 'workDuration' ) , render : ( text , record ) => ( < div style = { { whiteSpace : "nowrap" } } > { renderDurasiKerja ( record . clock _in , record . clock _out ) } < / d i v > ) } ,
{ 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 ( work AreaIn') , 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 > } < / d i v > ) } ,
{ title : t ( work AreaOut') , 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 > } < / d i v > ) } ,
] ;
return (
< Table
@ -302,7 +299,7 @@ const Index = ({ params }) => {
< h4 className = "capitalize" > { pageName } < / h 4 >
< Row >
< Col >
< Tooltip title = "Export Excel" >
< Tooltip title = { t ( 'exportExcel' ) } >
< Button style = { { marginLeft : "5px" } } id = "TooltipExport" color = "primary" onClick = { ( ) => handleExportExcel ( ) } > < i className = "fa fa-print" > < / i > < / B u t t o n >
< / T o o l t i p >
< / C o l >
@ -313,17 +310,17 @@ const Index = ({ params }) => {
< div style = { { width : "100%" , display : "flex" , alignItems : "center" } } >
< div style = { { width : "100%" , marginRight : "10px" , maxWidth : "200px" } } >
< Input type = "select" onChange = { ( e ) => handleChangeDay ( e ) } defaultValue = { currentDay } >
< option value = "today" > Hari Ini < / o p t i o n >
< option value = "3 day" > 3 Hari yang lalu < / o p t i o n >
< option value = "7 day" > 7 Hari yang lalu < / o p t i o n >
< option value = "today" > { t ( 'today' ) } < / o p t i o n >
< option value = "3 day" > { t ( '3days' ) } < / o p t i o n >
< option value = "7 day" > { t ( '7days' ) } < / o p t i o n >
< / I n p u t >
< / d i v >
< div style = { { width : "50%" , marginTop : "3px" } } >
< RangePicker size = "default" allowClear = { false } value = { [ startDate , endDate ] } onChange = { handleDatePicker } / > { ' ' }
< Button color = "primary" onClick = { ( ) => getDataPresence ( ) } > Cari < / B u t t o n >
< Button color = "primary" onClick = { ( ) => getDataPresence ( ) } > { t ( 'search' ) } < / B u t t o n >
< / d i v >
< / d i v >
< Input onChange = { handleSearch } value = { search } type = "text" name = "search" id = "search" placeholder = "Cari nama human resource" style = { { maxWidth : "200px" , marginBottom : "20px" } } / >
< Input onChange = { handleSearch } value = { search } type = "text" name = "search" id = "search" placeholder = { t ( 'searchHR' ) } style = { { maxWidth : "200px" , marginBottom : "20px" } } / >
< / d i v >
{ renderTable }
< Pagination
ardhi
2 years ago