@ -12,7 +12,7 @@ const { RangePicker } = DatePicker;
const token = window . localStorage . getItem ( 'token' ) ; const token = window . localStorage . getItem ( 'token' ) ;
const Index = ( { params } ) => { const Index = ( { params } ) => {
const [ dataTable , setDatatable ] = useState ( [ ] ) const [ dataTable , setDatatable ] = useState ( [ ] )
const [ search , setSearch ] = useState ( '' ) const [ search , setSearch ] = useState ( '' )
const [ currentPage , setCurrentPage ] = useState ( 1 ) const [ currentPage , setCurrentPage ] = useState ( 1 )
@ -27,23 +27,23 @@ const Index = ({params}) => {
const pageName = params . name ; const pageName = params . name ;
const config = { const config = {
headers :
headers :
{
{
Authorization : ` Bearer ${ token } ` , Authorization : ` Bearer ${ token } ` ,
"Content-type" : ` application/json ` "Content-type" : ` application/json `
} }
} ; } ;
useEffect ( ( ) => { useEffect ( ( ) => {
getDataPresence ( ) ; getDataPresence ( ) ;
} , [ search , currentPage , rowsPerPage , startDate , endDate ] ) } , [ search , currentPage , rowsPerPage , startDate , endDate ] )
useEffect ( ( ) => { useEffect ( ( ) => {
const cekData = dataExport || [ ] const cekData = dataExport || [ ]
if ( cekData . length > 0 ) { if ( cekData . length > 0 ) {
exportExcel ( ) exportExcel ( )
} }
} , [ dataExport ] ) } , [ dataExport ] )
const handleSearch = e => { const handleSearch = e => {
const value = e . target . value const value = e . target . value
@ -64,35 +64,35 @@ const Index = ({params}) => {
let dateEnd = moment ( endDate ) . format ( "YYYY-MM-DD 23:59:59" ) ; let dateEnd = moment ( endDate ) . format ( "YYYY-MM-DD 23:59:59" ) ;
const payload = { const payload = {
"paging" : { "start" : start , "length" : rowsPerPage } , "paging" : { "start" : start , "length" : rowsPerPage } ,
"columns" : [ "columns" : [
{ "name" : "name" , "logic_operator" : "ilike" , "value" : search , "table_name" : "m_users" } , { "name" : "name" , "logic_operator" : "ilike" , "value" : search , "table_name" : "m_users" } ,
{ "name" : "clock_in" , "logic_operator" : "range" , "value" : dateStart , "value1" : dateEnd } , { "name" : "clock_in" , "logic_operator" : "range" , "value" : dateStart , "value1" : dateEnd } ,
] , ] ,
"joins" : [ { "joins" : [ {
"name" : "m_users" , "name" : "m_users" ,
"column_join" : "user_id" , "column_join" : "user_id" ,
"column_results" : [ "column_results" : [
"name" , "name" ,
"ktp_number" "ktp_number"
] ]
} ] , } ] ,
"orders" : { "columns" : [ "id" ] , "ascending" : false } "orders" : { "columns" : [ "id" ] , "ascending" : false }
} }
const result = await axios const result = await axios
. post ( PRESENCE _SEARCH , payload , config ) . post ( PRESENCE _SEARCH , payload , config )
. then ( res => res ) . then ( res => res )
. catch ( ( error ) => error . response ) ; . catch ( ( error ) => error . response ) ;
if ( result && result . data && result . data . code == 200 ) { if ( result && result . data && result . data . code == 200 ) {
setDatatable ( result . data . data ) ; setDatatable ( result . data . data ) ;
console . log ( "resdata" , result . data . data ) console . log ( "resdata" , result . data . data )
setTotalPage ( result . data . totalRecord ) ; setTotalPage ( result . data . totalRecord ) ;
} else { } else {
NotificationManager . error ( 'Gagal Mengambil Data!!' , 'Failed' ) ; NotificationManager . error ( 'Gagal Mengambil Data!!' , 'Failed' ) ;
} }
} }
@ -105,17 +105,17 @@ const Index = ({params}) => {
. get ( url , config ) . get ( url , config )
. then ( res => res ) . then ( res => res )
. catch ( ( error ) => error . response ) ; . catch ( ( error ) => error . response ) ;
if ( result && result . data . code == 200 ) { if ( result && result . data . code == 200 ) {
let dataRes = result . data . data let dataRes = result . data . data
let dataImage = { let dataImage = {
name , name ,
url : dataRes . image url : dataRes . image
} }
console . log ( "dataImage" , dataImage ) console . log ( "dataImage" , dataImage )
await setDataImage ( dataImage ) await setDataImage ( dataImage )
setOpenImage ( true ) setOpenImage ( true )
} else { } else {
NotificationManager . error ( 'Data image tidak ditemukan!' , 'Failed' ) ; NotificationManager . error ( 'Data image tidak ditemukan!' , 'Failed' ) ;
} }
} }
@ -125,8 +125,8 @@ const Index = ({params}) => {
} }
const toggleDialogImage = ( ) => { const toggleDialogImage = ( ) => {
if ( openImage ) { if ( openImage ) {
setDataImage ( null ) setDataImage ( null )
} }
setOpenImage ( ! openImage ) setOpenImage ( ! openImage )
} }
@ -140,20 +140,20 @@ const Index = ({params}) => {
} }
const renderDurasiKerja = ( jamMasuk , jamKeluar ) => { const renderDurasiKerja = ( jamMasuk , jamKeluar ) => {
if ( jamMasuk && jamKeluar ) { if ( jamMasuk && jamKeluar ) {
let start = moment ( jamMasuk ) , let start = moment ( jamMasuk ) ,
end = moment ( jamKeluar ) ; end = moment ( jamKeluar ) ;
let diff = end . diff ( start ) ; let diff = end . diff ( start ) ;
let result = moment . utc ( diff ) . format ( 'HH:mm:ss' ) ; let result = moment . utc ( diff ) . format ( 'HH:mm:ss' ) ;
if ( result ) { if ( result ) {
return result ; return result ;
} else { } else {
return "-" return "-"
} }
} else { } else {
return "-" return "-"
} }
} }
@ -164,51 +164,51 @@ const Index = ({params}) => {
let dateEnd = moment ( endDate ) . format ( "YYYY-MM-DD 23:59:59" ) ; let dateEnd = moment ( endDate ) . format ( "YYYY-MM-DD 23:59:59" ) ;
const payload = { const payload = {
"paging" : { "start" : 0 , "length" : - 1 } , "paging" : { "start" : 0 , "length" : - 1 } ,
"columns" : [ "columns" : [
{ "name" : "name" , "logic_operator" : "ilike" , "value" : search , "table_name" : "m_users" } , { "name" : "name" , "logic_operator" : "ilike" , "value" : search , "table_name" : "m_users" } ,
{ "name" : "clock_in" , "logic_operator" : "range" , "value" : dateStart , "value1" : dateEnd } , { "name" : "clock_in" , "logic_operator" : "range" , "value" : dateStart , "value1" : dateEnd } ,
] , ] ,
"joins" : [ { "joins" : [ {
"name" : "m_users" , "name" : "m_users" ,
"column_join" : "user_id" , "column_join" : "user_id" ,
"column_results" : [ "column_results" : [
"name" , "name" ,
"ktp_number" "ktp_number"
] ]
} ] , } ] ,
"orders" : { "columns" : [ "id" ] , "ascending" : false } "orders" : { "columns" : [ "id" ] , "ascending" : false }
} }
const result = await axios const result = await axios
. post ( PRESENCE _SEARCH , payload , config ) . post ( PRESENCE _SEARCH , payload , config )
. then ( res => res ) . then ( res => res )
. catch ( ( error ) => error . response ) ; . 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 ; let resData = result . data . data ;
console . log ( "resdata" , resData ) console . log ( "resdata" , resData )
const excelData = [ ] ; const excelData = [ ] ;
resData . map ( ( val , index ) => { resData . map ( ( val , index ) => {
let dataRow = { let dataRow = {
"NIK/ID Card" : val . join _first _ktp _number ? val . join _first _ktp _number : '-' , "NIK/ID Card" : val . join _first _ktp _number ? val . join _first _ktp _number : '-' ,
"Nama Human Resource" : val . join _first _name ? val . join _first _name : '' , "Nama Human Resource" : val . join _first _name ? val . join _first _name : '' ,
"Tanggal Kehadiran" : val . date _presence ? moment ( val . date _presence ) . format ( "D-M-YYYY" ) : '-' , "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 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" ) : '-' , "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 ) , "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-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 : '-' "Clock-out Location" : val . clock _out _loc && val . clock _out _loc !== '' ? val . clock _out _loc : '-'
} }
excelData . push ( dataRow ) excelData . push ( dataRow )
} ) } )
await setDataExport ( excelData ) ; await setDataExport ( excelData ) ;
} else { } else {
NotificationManager . error ( 'Gagal Export Data!!' , 'Failed' ) ; NotificationManager . error ( 'Gagal Export Data!!' , 'Failed' ) ;
}
}
} }
@ -216,10 +216,10 @@ const Index = ({params}) => {
const dataExcel = dataExport || [ ] ; const dataExcel = dataExport || [ ] ;
const fileName = ` Data ${ pageName } .xlsx ` ; const fileName = ` Data ${ pageName } .xlsx ` ;
const ws = XLSX . utils . json _to _sheet ( dataExcel ) ; const ws = XLSX . utils . json _to _sheet ( dataExcel ) ;
const wb = XLSX . utils . book _new ( ) ; const wb = XLSX . utils . book _new ( ) ;
XLSX . utils . book _append _sheet ( wb , ws , ` Data ${ pageName } ` ) ; XLSX . utils . book _append _sheet ( wb , ws , ` Data ${ pageName } ` ) ;
XLSX . writeFile ( wb , fileName ) ; XLSX . writeFile ( wb , fileName ) ;
setDataExport ( [ ] ) setDataExport ( [ ] )
} }
const renderTable = useMemo ( ( ) => { 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 : '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 : 'Nama HR' , 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 : '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 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 : '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 : '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 : 'Lokasi Masuk' , 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 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 ( return (
< Table < Table
@ -261,72 +263,72 @@ const Index = ({params}) => {
} , [ dataTable ] ) } , [ dataTable ] )
const handleDatePicker = ( date , dateString ) => { const handleDatePicker = ( date , dateString ) => {
setStartDate ( date [ 0 ] ) setStartDate ( date [ 0 ] )
setEndDate ( date [ 1 ] ) setEndDate ( date [ 1 ] )
} }
const handleChangeDay = ( e ) => { const handleChangeDay = ( e ) => {
const val = e . target . value ; const val = e . target . value ;
setCurrentDay ( val ) 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" ) ) ) setStartDate ( moment ( moment ( ) . format ( "YYYY-M-D" ) ) )
setEndDate ( moment ( moment ( ) . format ( "YYYY-M-D" ) ) ) setEndDate ( moment ( moment ( ) . format ( "YYYY-M-D" ) ) )
setCurrentPage ( 1 ) 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 ( return (
< div > < div >
< NotificationContainer / > < NotificationContainer / >
< DialogFoto < DialogFoto
openDialog = { openImage } openDialog = { openImage }
closeDialog = { closeDialogImage } closeDialog = { closeDialogImage }
toggleDialog = { toggleDialogImage } toggleDialog = { toggleDialogImage }
dataImage = { dataImage } dataImage = { dataImage }
/ > / >
< Card > < Card >
< CardHeader style = { { display : "flex" , justifyContent : "space-between" } } > < CardHeader style = { { display : "flex" , justifyContent : "space-between" } } >
< h4 className = "capitalize" > { pageName } < / h 4 > < h4 className = "capitalize" > { pageName } < / h 4 >
< Row > < Row >
< Col > < Col >
< Tooltip title = "Export Excel" > < 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 > < / T o o l t i p >
< / C o l > < / C o l >
< / R o w > < / R o w >
< / C a r d H e a d e r > < / C a r d H e a d e r >
< CardBody > < CardBody >
< div style = { { display : "flex" , justifyContent : "space-between" } } > < div style = { { display : "flex" , justifyContent : "space-between" } } >
< div style = { { width : "100%" , display : "flex" , alignItems : "center" } } > < div style = { { width : "100%" , display : "flex" , alignItems : "center" } } >
< div style = { { width : "100%" , marginRight : "10px" , maxWidth : "200px" } } > < div style = { { width : "100%" , marginRight : "10px" , maxWidth : "200px" } } >
< Input type = "select" onChange = { ( e ) => handleChangeDay ( e ) } defaultValue = { currentDay } > < Input type = "select" onChange = { ( e ) => handleChangeDay ( e ) } defaultValue = { currentDay } >
< option value = "today" > Hari Ini < / o p t i o n > < 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 = "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 = "7 day" > 7 Hari yang lalu < / o p t i o n >
< / I n p u t > < / I n p u t >
< / d i v > < / d i v >
< div style = { { width : "50%" , marginTop : "3px" } } > < div style = { { width : "50%" , marginTop : "3px" } } >
< RangePicker size = "default" allowClear = { false } value = { [ startDate , endDate ] } onChange = { handleDatePicker } / > { ' ' } < 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 ( ) } > Cari < / B u t t o n >
< / d i v > < / 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 > < / 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 } { renderTable }
< Pagination < Pagination
style = { { marginTop : "25px" } } style = { { marginTop : "25px" } }
showSizeChanger showSizeChanger
onShowSizeChange = { onShowSizeChange } onShowSizeChange = { onShowSizeChange }
onChange = { onPagination } onChange = { onPagination }
