|
|
|
|
@ -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) |
|
|
|
|
@ -29,21 +29,21 @@ const Index = ({params}) => {
|
|
|
|
|
const config = { |
|
|
|
|
headers: |
|
|
|
|
{ |
|
|
|
|
Authorization : `Bearer ${token}`, |
|
|
|
|
"Content-type" : `application/json` |
|
|
|
|
Authorization: `Bearer ${token}`, |
|
|
|
|
"Content-type": `application/json` |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
useEffect(()=> { |
|
|
|
|
useEffect(() => { |
|
|
|
|
getDataPresence(); |
|
|
|
|
},[search,currentPage,rowsPerPage, startDate, endDate]) |
|
|
|
|
}, [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,20 +64,20 @@ 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": "m_users", |
|
|
|
|
"column_join": "user_id", |
|
|
|
|
"column_results": [ |
|
|
|
|
"name", |
|
|
|
|
"ktp_number" |
|
|
|
|
] |
|
|
|
|
}], |
|
|
|
|
"orders": {"columns": ["id"], "ascending": false} |
|
|
|
|
"orders": { "columns": ["id"], "ascending": false } |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -88,11 +88,11 @@ const Index = ({params}) => {
|
|
|
|
|
.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,16 +105,16 @@ const Index = ({params}) => {
|
|
|
|
|
.get(url, config) |
|
|
|
|
.then(res => res) |
|
|
|
|
.catch((error) => error.response); |
|
|
|
|
if(result && result.data.code==200){ |
|
|
|
|
if (result && result.data.code == 200) { |
|
|
|
|
let dataRes = result.data.data |
|
|
|
|
let dataImage = { |
|
|
|
|
name, |
|
|
|
|
url:dataRes.image |
|
|
|
|
url: dataRes.image |
|
|
|
|
} |
|
|
|
|
console.log("dataImage", dataImage) |
|
|
|
|
await setDataImage(dataImage) |
|
|
|
|
setOpenImage(true) |
|
|
|
|
}else{ |
|
|
|
|
} else { |
|
|
|
|
NotificationManager.error('Data image tidak ditemukan!', 'Failed'); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -125,7 +125,7 @@ const Index = ({params}) => {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const toggleDialogImage = () => { |
|
|
|
|
if(openImage){ |
|
|
|
|
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,20 +164,20 @@ 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": "m_users", |
|
|
|
|
"column_join": "user_id", |
|
|
|
|
"column_results": [ |
|
|
|
|
"name", |
|
|
|
|
"ktp_number" |
|
|
|
|
] |
|
|
|
|
}], |
|
|
|
|
"orders": {"columns": ["id"], "ascending": false} |
|
|
|
|
"orders": { "columns": ["id"], "ascending": false } |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -188,7 +188,7 @@ const Index = ({params}) => {
|
|
|
|
|
.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 = []; |
|
|
|
|
@ -196,17 +196,17 @@ 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") : '-', |
|
|
|
|
"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), |
|
|
|
|
"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'); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -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") : "-"}</div>) }, |
|
|
|
|
{ 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") : "-"}</div>) }, |
|
|
|
|
{ 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") : "-"}</div>) }, |
|
|
|
|
{ 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") : "-"}</div>) }, |
|
|
|
|
{ title: 'Durasi Kerja', render: (text, record) => (<div style={{ whiteSpace: "nowrap" }}>{renderDurasiKerja(record.clock_in, record.clock_out)}</div>) }, |
|
|
|
|
{ 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 |
|
|
|
|
@ -268,19 +270,19 @@ const Index = ({params}) => {
|
|
|
|
|
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"){ |
|
|
|
|
} 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"){ |
|
|
|
|
} 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{ |
|
|
|
|
} else { |
|
|
|
|
setStartDate(moment(moment().format("YYYY-M-D"))) |
|
|
|
|
setEndDate(moment(moment().format("YYYY-M-D"))) |
|
|
|
|
setCurrentPage(1) |
|
|
|
|
@ -302,23 +304,23 @@ const Index = ({params}) => {
|
|
|
|
|
<Row> |
|
|
|
|
<Col> |
|
|
|
|
<Tooltip title="Export Excel"> |
|
|
|
|
<Button style={{marginLeft:"5px"}} id="TooltipExport" color="primary" onClick={()=> handleExportExcel()}><i className="fa fa-print"></i></Button> |
|
|
|
|
<Button style={{ marginLeft: "5px" }} id="TooltipExport" color="primary" onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button> |
|
|
|
|
</Tooltip> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</CardHeader> |
|
|
|
|
<CardBody> |
|
|
|
|
<div style={{ display: "flex", justifyContent: "space-between" }}> |
|
|
|
|
<div style={{ width:"100%",display:"flex",alignItems:"center" }}> |
|
|
|
|
<div style={{ width:"100%",marginRight:"10px",maxWidth:"200px" }}> |
|
|
|
|
<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</option> |
|
|
|
|
<option value="3 day">3 Hari yang lalu</option> |
|
|
|
|
<option value="7 day">7 Hari yang lalu</option> |
|
|
|
|
</Input> |
|
|
|
|
</div> |
|
|
|
|
<div style={{ width:"50%",marginTop:"3px" }}> |
|
|
|
|
<RangePicker size="default" allowClear={false} value={[startDate, endDate]} onChange={handleDatePicker}/>{' '} |
|
|
|
|
<div style={{ width: "50%", marginTop: "3px" }}> |
|
|
|
|
<RangePicker size="default" allowClear={false} value={[startDate, endDate]} onChange={handleDatePicker} />{' '} |
|
|
|
|
<Button color="primary" onClick={() => getDataPresence()}>Cari</Button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -326,7 +328,7 @@ const Index = ({params}) => {
|
|
|
|
|
</div> |
|
|
|
|
{renderTable} |
|
|
|
|
<Pagination |
|
|
|
|
style={{marginTop:"25px"}} |
|
|
|
|
style={{ marginTop: "25px" }} |
|
|
|
|
showSizeChanger |
|
|
|
|
onShowSizeChange={onShowSizeChange} |
|
|
|
|
onChange={onPagination} |
|
|
|
|
|
