@ -12,7 +12,7 @@ const { RangePicker } = DatePicker;
const token = window . localStorage . getItem ( 'token' ) ;
const Index = ( { params } ) => {
const Index = ( { params } ) => {
const [ dataTable , setDatatable ] = useState ( [ ] )
const [ search , setSearch ] = useState ( '' )
const [ currentPage , setCurrentPage ] = useState ( 1 )
@ -27,23 +27,23 @@ const Index = ({params}) => {
const pageName = params . name ;
const config = {
headers :
{
Authorization : ` Bearer ${ token } ` ,
"Content-type" : ` application/json `
headers :
{
Authorization : ` Bearer ${ token } ` ,
"Content-type" : ` application/json `
}
} ;
useEffect ( ( ) => {
getDataPresence ( ) ;
} , [ search , currentPage , rowsPerPage , startDate , endDate ] )
useEffect ( ( ) => {
getDataPresence ( ) ;
} , [ search , currentPage , rowsPerPage , startDate , endDate ] )
useEffect ( ( ) => {
useEffect ( ( ) => {
const cekData = dataExport || [ ]
if ( cekData . length > 0 ) {
if ( cekData . length > 0 ) {
exportExcel ( )
}
} , [ dataExport ] )
} , [ dataExport ] )
const handleSearch = e => {
const value = e . target . value
@ -64,35 +64,35 @@ const Index = ({params}) => {
let dateEnd = moment ( endDate ) . format ( "YYYY-MM-DD 23:59:59" ) ;
const payload = {
"paging" : { "start" : start , "length" : rowsPerPage } ,
"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 } ,
{ "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 }
"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 ) {
if ( result && result . data && result . data . code == 200 ) {
setDatatable ( result . data . data ) ;
console . log ( "resdata" , result . data . data )
setTotalPage ( result . data . totalRecord ) ;
} else {
} else {
NotificationManager . error ( 'Gagal Mengambil Data!!' , 'Failed' ) ;
}
}
@ -105,17 +105,17 @@ const Index = ({params}) => {
. 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
}
console . log ( "dataImage" , dataImage )
await setDataImage ( dataImage )
setOpenImage ( true )
} else {
NotificationManager . error ( 'Data image tidak ditemukan!' , 'Failed' ) ;
if ( result && result . data . code == 200 ) {
let dataRes = result . data . data
let dataImage = {
name ,
url : dataRes . image
}
console . log ( "dataImage" , dataImage )
await setDataImage ( dataImage )
setOpenImage ( true )
} else {
NotificationManager . error ( 'Data image tidak ditemukan!' , 'Failed' ) ;
}
}
@ -125,8 +125,8 @@ const Index = ({params}) => {
}
const toggleDialogImage = ( ) => {
if ( openImage ) {
setDataImage ( null )
if ( openImage ) {
setDataImage ( null )
}
setOpenImage ( ! openImage )
}
@ -140,20 +140,20 @@ const Index = ({params}) => {
}
const renderDurasiKerja = ( jamMasuk , jamKeluar ) => {
if ( 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 ) {
if ( result ) {
return result ;
} else {
} else {
return "-"
}
} else {
} else {
return "-"
}
}
@ -164,51 +164,51 @@ const Index = ({params}) => {
let dateEnd = moment ( endDate ) . format ( "YYYY-MM-DD 23:59:59" ) ;
const payload = {
"paging" : { "start" : 0 , "length" : - 1 } ,
"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 } ,
{ "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 }
"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 ) {
if ( result && result . data && result . data . code == 200 ) {
let resData = result . data . data ;
console . log ( "resdata" , resData )
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 : '' ,
"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 : '-'
"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 : '-'
}
excelData . push ( dataRow )
} )
await setDataExport ( excelData ) ;
} else {
} else {
NotificationManager . error ( 'Gagal Export Data!!' , 'Failed' ) ;
}
}
}
@ -216,10 +216,10 @@ const Index = ({params}) => {
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 } ` ) ;
const wb = XLSX . utils . book _new ( ) ;
XLSX . utils . book _append _sheet ( wb , ws , ` Data ${ pageName } ` ) ;
XLSX . writeFile ( wb , fileName ) ;
XLSX . writeFile ( wb , fileName ) ;
setDataExport ( [ ] )
}
const renderTable = useMemo ( ( ) => {
@ -241,13 +241,15 @@ const Index = ({params}) => {
< / > ,
} ,
{ title : 'NIK/ID Card' , dataIndex : 'join_first_ktp_number' , key : 'join_first_ktp_number' } ,
{ title : 'Nama Human Resource ' , dataIndex : 'join_first_name' , key : 'join_first_name' } ,
{ title : 'Tanggal Kehadiran ' , dataIndex : 'date_presence' , key : 'date_presence' , render : ( text , record ) => ( < div style = { { whiteSpace : "nowrap" } } > { text ? moment ( text ) . format ( "D-M-YYYY" ) : "-" } < / d i v > ) } ,
{ title : 'Nama HR' , dataIndex : 'join_first_name' , key : 'join_first_name' } ,
{ title : 'Tanggal' , dataIndex : 'date_presence' , key : 'date_presence' , render : ( text , record ) => ( < div style = { { whiteSpace : "nowrap" } } > { text ? moment ( text ) . format ( "D-M-YYYY" ) : "-" } < / d i v > ) } ,
{ title : 'Jam 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 : 'Jam 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 : 'Clock-in Location' , dataIndex : 'clock_in_loc' , key : 'clock_in_loc' , render : ( text , record ) => < > { text && text !== '' ? text : '-' } < / > } ,
{ title : 'Clock-out Location' , dataIndex : 'clock_out_loc' , key : 'clock_out_loc' , render : ( text , record ) => < > { text && text !== '' ? text : '-' } < / > } ,
{ 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 : 'Area Kerja In' , dataIndex : 'clock_out_loc' , key : 'clock_out_loc' , render : ( text , record ) => < > { text && text !== '' ? text : '-' } < / > } ,
{ title : 'Area Kerja Out' , dataIndex : 'clock_out_loc' , key : 'clock_out_loc' , render : ( text , record ) => < > { text && text !== '' ? text : '-' } < / > } ,
] ;
return (
< Table
@ -261,72 +263,72 @@ const Index = ({params}) => {
} , [ dataTable ] )
const handleDatePicker = ( date , dateString ) => {
setStartDate ( date [ 0 ] )
setEndDate ( date [ 1 ] )
setStartDate ( date [ 0 ] )
setEndDate ( date [ 1 ] )
}
const handleChangeDay = ( e ) => {
const val = e . target . value ;
setCurrentDay ( val )
if ( val === "today" ) {
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 )
} 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 (
< div >
< NotificationContainer / >
< DialogFoto
openDialog = { openImage }
closeDialog = { closeDialogImage }
toggleDialog = { toggleDialogImage }
dataImage = { dataImage }
/ >
openDialog = { openImage }
closeDialog = { closeDialogImage }
toggleDialog = { toggleDialogImage }
dataImage = { dataImage }
/ >
< Card >
< CardHeader style = { { display : "flex" , justifyContent : "space-between" } } >
< h4 className = "capitalize" > { pageName } < / h 4 >
< Row >
< Col >
< Tooltip title = "Export Excel" >
< Button style = { { marginLeft : "5px" } } id = "TooltipExport" color = "primary" onClick = { ( ) => handleExportExcel ( ) } > < i className = "fa fa-print" > < / i > < / B u t t o n >
< 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 >
< / R o w >
< / C a r d H e a d e r >
< CardBody >
< div style = { { display : "flex" , justifyContent : "space-between" } } >
< 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 >
< / 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 >
< / 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" } } / >
< div style = { { display : "flex" , justifyContent : "space-between" } } >
< 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 >
< / 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 >
< / 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" } } / >
< / d i v >
{ renderTable }
< Pagination
style = { { marginTop : "25px" } }
style = { { marginTop : "25px" } }
showSizeChanger
onShowSizeChange = { onShowSizeChange }
onChange = { onPagination }
