|
|
@ -1,8 +1,8 @@ |
|
|
|
|
|
|
|
|
|
|
|
import * as React from 'react'; |
|
|
|
import * as React from 'react'; |
|
|
|
import { useState } from 'react'; |
|
|
|
import { useState } from 'react'; |
|
|
|
import { Button, Card, Form, Col, Row, ToastHeader, } from 'react-bootstrap'; |
|
|
|
import { Button, Card, Form, Col, Row, ToastHeader, Modal, Alert, FormGroup, FormLabel, } from 'react-bootstrap'; |
|
|
|
import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs' |
|
|
|
import { BsSearch, BsFileEarmarkExcel, BsFillPencilFill } from 'react-icons/bs' |
|
|
|
import ExelServices from '../../../Utils/ExelFiles/Exel.services'; |
|
|
|
import ExelServices from '../../../Utils/ExelFiles/Exel.services'; |
|
|
|
import { FiSend } from "react-icons/fi"; |
|
|
|
import { FiSend } from "react-icons/fi"; |
|
|
|
import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'; |
|
|
|
import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'; |
|
|
@ -10,6 +10,9 @@ import * as XLSX from 'xlsx'; |
|
|
|
import DataTable from 'react-data-table-component'; |
|
|
|
import DataTable from 'react-data-table-component'; |
|
|
|
import { DTOWorkingHours } from '../../../DTO/DTOWorkingHours'; |
|
|
|
import { DTOWorkingHours } from '../../../DTO/DTOWorkingHours'; |
|
|
|
import reportesServices from '../../../Services/Reportes/reportes.services'; |
|
|
|
import reportesServices from '../../../Services/Reportes/reportes.services'; |
|
|
|
|
|
|
|
import { IconContext } from 'react-icons'; |
|
|
|
|
|
|
|
import { date } from 'yup'; |
|
|
|
|
|
|
|
import { DTOClocks } from '../../../DTO/Reportes/DTOClocks'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function FileUploadExel() { |
|
|
|
export default function FileUploadExel() { |
|
|
@ -26,8 +29,21 @@ export default function FileUploadExel() { |
|
|
|
const [filteredData, setFilteredData] = useState<Array<DTOWorkingHours>>( |
|
|
|
const [filteredData, setFilteredData] = useState<Array<DTOWorkingHours>>( |
|
|
|
[] |
|
|
|
[] |
|
|
|
) |
|
|
|
) |
|
|
|
|
|
|
|
const [ModalEdit, setModalEdit ] = useState(false) |
|
|
|
|
|
|
|
const [EmpNo, setEmpNo] = useState('') |
|
|
|
|
|
|
|
const [Datee, setDate] = useState('') |
|
|
|
|
|
|
|
const [ClockIn1 , setClockIn1] = useState ('') |
|
|
|
|
|
|
|
const [ClockOut1, setClockOut1] = useState('') |
|
|
|
|
|
|
|
const [ClockIn2 , setClockIn2] = useState ('') |
|
|
|
|
|
|
|
const [ClockOut2, setClockOut2] = useState('') |
|
|
|
|
|
|
|
const [ClockIn3 , setClockIn3] = useState ('') |
|
|
|
|
|
|
|
const [ClockOut3, setClockOut3] = useState('') |
|
|
|
|
|
|
|
const [ClockIn4 , setClockIn4] = useState ('') |
|
|
|
|
|
|
|
const [ClockOut4, setClockOut4] = useState('') |
|
|
|
|
|
|
|
const [ClockIn5 , setClockIn5] = useState ('') |
|
|
|
|
|
|
|
const [ClockOut5, setClockOut5] = useState('') |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => { |
|
|
|
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => { |
|
|
@ -165,20 +181,110 @@ export default function FileUploadExel() { |
|
|
|
|
|
|
|
|
|
|
|
{ |
|
|
|
{ |
|
|
|
name: 'TotalHoursWorked',
|
|
|
|
name: 'TotalHoursWorked',
|
|
|
|
width: '130px',
|
|
|
|
width: '150px',
|
|
|
|
selector : (row : DTOWorkingHours) => row.totalHoursWorked,
|
|
|
|
selector : (row : DTOWorkingHours) => row.totalHoursWorked,
|
|
|
|
sortable : true,
|
|
|
|
sortable : true,
|
|
|
|
filter : true
|
|
|
|
filter : true
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: 'Edita', |
|
|
|
|
|
|
|
width: '60px', |
|
|
|
|
|
|
|
cell: (row: DTOWorkingHours) => ( |
|
|
|
|
|
|
|
<Button |
|
|
|
|
|
|
|
size="sm" |
|
|
|
|
|
|
|
variant="light" |
|
|
|
|
|
|
|
style={{ textAlign: 'right' }} |
|
|
|
|
|
|
|
onClick={() => handleEdit(row)} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<IconContext.Provider value={{ color: 'blue', size: '15px' }}> |
|
|
|
|
|
|
|
<BsFillPencilFill /> |
|
|
|
|
|
|
|
</IconContext.Provider>{' '} |
|
|
|
|
|
|
|
</Button> |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
] |
|
|
|
] |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleEdit = (row: DTOWorkingHours) => { |
|
|
|
|
|
|
|
setEmpNo(row.empNo); |
|
|
|
|
|
|
|
setDate(row.date); |
|
|
|
|
|
|
|
setClockIn1(row.clockIn1); |
|
|
|
|
|
|
|
setClockOut1(row.clockOut1); |
|
|
|
|
|
|
|
setClockIn2(row.clockIn2); |
|
|
|
|
|
|
|
setClockOut2(row.clockOut2); |
|
|
|
|
|
|
|
setClockIn3(row.clockIn3); |
|
|
|
|
|
|
|
setClockOut3(row.clockOut3); |
|
|
|
|
|
|
|
setClockIn4(row.clockIn4); |
|
|
|
|
|
|
|
setClockOut4(row.clockOut4); |
|
|
|
|
|
|
|
setClockIn5(row.clockIn5); |
|
|
|
|
|
|
|
setClockOut5(row.clockOut5); |
|
|
|
|
|
|
|
setModalEdit(true); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const haveSaveChanges = () => { |
|
|
|
|
|
|
|
const data: DTOWorkingHours = { |
|
|
|
|
|
|
|
empNo: EmpNo, |
|
|
|
|
|
|
|
date: Datee, |
|
|
|
|
|
|
|
clockIn1: ClockIn1, |
|
|
|
|
|
|
|
clockOut1: ClockOut1, |
|
|
|
|
|
|
|
clockIn2: ClockIn2, |
|
|
|
|
|
|
|
clockOut2: ClockOut2, |
|
|
|
|
|
|
|
clockIn3: ClockIn3, |
|
|
|
|
|
|
|
clockOut3: ClockOut3, |
|
|
|
|
|
|
|
clockIn4: ClockIn4, |
|
|
|
|
|
|
|
clockOut4: ClockOut4, |
|
|
|
|
|
|
|
clockIn5: ClockIn5, |
|
|
|
|
|
|
|
clockOut5: ClockOut5, |
|
|
|
|
|
|
|
acNo: '', |
|
|
|
|
|
|
|
no: '', |
|
|
|
|
|
|
|
name: '', |
|
|
|
|
|
|
|
totalInTime: '', |
|
|
|
|
|
|
|
totalHoursWorked: '' |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
reportesServices.PostTotalHours(data) |
|
|
|
|
|
|
|
.then((response ) => { |
|
|
|
|
|
|
|
setToastMsg('Se actualizó el campo'); |
|
|
|
|
|
|
|
setToastHeader('Informativo'); |
|
|
|
|
|
|
|
setToastColor('Success'); |
|
|
|
|
|
|
|
setShowMsg(true); |
|
|
|
|
|
|
|
generarReporte() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
.catch((e: Error) => { |
|
|
|
|
|
|
|
setToastMsg('No se ha podido actualizar los datos'); |
|
|
|
|
|
|
|
setToastHeader('Error'); |
|
|
|
|
|
|
|
setToastColor('danger'); |
|
|
|
|
|
|
|
setShowToast(true); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function currentDate (): string { |
|
|
|
function currentDate (): string { |
|
|
|
var today = new Date() |
|
|
|
var today = new Date() |
|
|
|
var dd = String(today.getDate()).padEnd(2,'0') |
|
|
|
var dd = String(today.getDate()).padEnd(2,'0') |
|
|
@ -208,18 +314,18 @@ export default function FileUploadExel() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} ) |
|
|
|
} ) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const donwloadExel = () => { |
|
|
|
const donwloadExel = () => { |
|
|
|
exportExcel(filteredData, 'Reportes de Horas Trabajadas') |
|
|
|
exportExcel(filteredData, 'Reportes de Horas Trabajadas') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const filtraReporte = (e: any ) => { |
|
|
|
const filtraReporte = (e: any ) => { |
|
|
|
const searchText = e.target.value.toLowerCase();
|
|
|
|
const searchText = e.target.value.toLowerCase();
|
|
|
@ -285,11 +391,6 @@ export default function FileUploadExel() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleSendFiles = async () => { |
|
|
|
const handleSendFiles = async () => { |
|
|
|
if (!WorkingHoursFile) { |
|
|
|
if (!WorkingHoursFile) { |
|
|
|
setToastMsg('No hay archivos para enviar'); |
|
|
|
setToastMsg('No hay archivos para enviar'); |
|
|
@ -326,6 +427,26 @@ export default function FileUploadExel() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const horas = Array.from({ length: 24 }, (_, i) => i); |
|
|
|
|
|
|
|
const minutos = Array.from({ length: 60 }, (_, i) => i); |
|
|
|
|
|
|
|
const formatHora = (hora: any, minuto: any) => { |
|
|
|
|
|
|
|
const suffix = hora < 12 ? 'AM' : 'PM'; |
|
|
|
|
|
|
|
hora = hora % 12 || 12; |
|
|
|
|
|
|
|
return `${hora}:${minuto.toString().padStart(2, '0')}:00 ${suffix}`; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className="mt-2"> |
|
|
|
<div className="mt-2"> |
|
|
|
<Card> |
|
|
|
<Card> |
|
|
@ -450,6 +571,405 @@ return ( |
|
|
|
</Card.Body> |
|
|
|
</Card.Body> |
|
|
|
</Card> |
|
|
|
</Card> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* <Modal show={ModalEdit} onHide={() => setModalEdit(false)}> |
|
|
|
|
|
|
|
<Modal.Header closeButton> |
|
|
|
|
|
|
|
<Modal.Title>Editar Registro</Modal.Title> |
|
|
|
|
|
|
|
</Modal.Header> |
|
|
|
|
|
|
|
<Modal.Body> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Form> |
|
|
|
|
|
|
|
<Row> |
|
|
|
|
|
|
|
<Col md={6}> |
|
|
|
|
|
|
|
<Form.Group> |
|
|
|
|
|
|
|
<Form.Label>EmpNo</Form.Label> |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
value={EmpNo} |
|
|
|
|
|
|
|
onChange={(e) => setEmpNo(e.target.value)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
<Col md={6}> |
|
|
|
|
|
|
|
<Form.Group> |
|
|
|
|
|
|
|
<Form.Label>Date</Form.Label> |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
value={Datee} |
|
|
|
|
|
|
|
onChange={(e) => setDate(e.target.value)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
</Row> |
|
|
|
|
|
|
|
<Row> |
|
|
|
|
|
|
|
<Col md={6}> |
|
|
|
|
|
|
|
<Form.Group> |
|
|
|
|
|
|
|
<Form.Label>ClockIn1</Form.Label> |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
value={ClockIn1} |
|
|
|
|
|
|
|
onChange={(e) => setClockIn1(e.target.value)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
<Col md={6}> |
|
|
|
|
|
|
|
<Form.Group> |
|
|
|
|
|
|
|
<Form.Label>ClockOut1</Form.Label> |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
value={ClockOut1} |
|
|
|
|
|
|
|
onChange={(e) => setClockOut1(e.target.value)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
</Row> |
|
|
|
|
|
|
|
<Row> |
|
|
|
|
|
|
|
<Col md={6}> |
|
|
|
|
|
|
|
<Form.Group> |
|
|
|
|
|
|
|
<Form.Label>ClockIn2</Form.Label> |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
value={ClockIn2} |
|
|
|
|
|
|
|
onChange={(e) => setClockIn2(e.target.value)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
<Col md={6}> |
|
|
|
|
|
|
|
<Form.Group> |
|
|
|
|
|
|
|
<Form.Label>ClockOut2</Form.Label> |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
value={ClockOut2} |
|
|
|
|
|
|
|
onChange={(e) => setClockOut2(e.target.value)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
</Row> |
|
|
|
|
|
|
|
<Row> |
|
|
|
|
|
|
|
<Col md={6}> |
|
|
|
|
|
|
|
<Form.Group> |
|
|
|
|
|
|
|
<Form.Label>ClockIn3</Form.Label> |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
value={ClockIn3} |
|
|
|
|
|
|
|
onChange={(e) => setClockIn3(e.target.value)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
<Col md={6}> |
|
|
|
|
|
|
|
<Form.Group> |
|
|
|
|
|
|
|
<Form.Label>ClockOut3</Form.Label> |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
value={ClockOut3} |
|
|
|
|
|
|
|
onChange={(e) => setClockOut3(e.target.value)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
</Row> |
|
|
|
|
|
|
|
<Row> |
|
|
|
|
|
|
|
<Col md={6}> |
|
|
|
|
|
|
|
<Form.Group> |
|
|
|
|
|
|
|
<Form.Label>ClockIn4</Form.Label> |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
value={ClockIn4} |
|
|
|
|
|
|
|
onChange={(e) => setClockIn4(e.target.value)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
<Col md={6}> |
|
|
|
|
|
|
|
<Form.Group> |
|
|
|
|
|
|
|
<Form.Label>ClockOut4</Form.Label> |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
value={ClockOut4} |
|
|
|
|
|
|
|
onChange={(e) => setClockOut4(e.target.value)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
</Row> |
|
|
|
|
|
|
|
<Row> |
|
|
|
|
|
|
|
<Col md={6}> |
|
|
|
|
|
|
|
<Form.Group> |
|
|
|
|
|
|
|
<Form.Label>ClockIn5</Form.Label> |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
value={ClockIn5} |
|
|
|
|
|
|
|
onChange={(e) => setClockIn5(e.target.value)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
<Col md={6}> |
|
|
|
|
|
|
|
<Form.Group> |
|
|
|
|
|
|
|
<Form.Label>ClockOut5</Form.Label> |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
value={ClockOut5} |
|
|
|
|
|
|
|
onChange={(e) => setClockOut5(e.target.value)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
</Row> |
|
|
|
|
|
|
|
</Form> |
|
|
|
|
|
|
|
</Modal.Body> |
|
|
|
|
|
|
|
<Modal.Footer> |
|
|
|
|
|
|
|
<Button variant="secondary" onClick={() => setModalEdit(false)}> |
|
|
|
|
|
|
|
Cerrar |
|
|
|
|
|
|
|
</Button> |
|
|
|
|
|
|
|
<Button variant="primary" onClick={ haveSaveChanges }> |
|
|
|
|
|
|
|
Guardar Cambios |
|
|
|
|
|
|
|
</Button> |
|
|
|
|
|
|
|
</Modal.Footer> |
|
|
|
|
|
|
|
</Modal> */} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Modal show={ModalEdit} onHide={() => setModalEdit(false)}> |
|
|
|
|
|
|
|
<Modal.Header closeButton> |
|
|
|
|
|
|
|
<Modal.Title>Editar Registro</Modal.Title> |
|
|
|
|
|
|
|
</Modal.Header> |
|
|
|
|
|
|
|
<Modal.Body> |
|
|
|
|
|
|
|
<Form> |
|
|
|
|
|
|
|
<Row> |
|
|
|
|
|
|
|
<Col md={6}> |
|
|
|
|
|
|
|
<Form.Group> |
|
|
|
|
|
|
|
<Form.Label>EmpNo</Form.Label> |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
value={EmpNo} |
|
|
|
|
|
|
|
onChange={(e) => setEmpNo(e.target.value)}
|
|
|
|
|
|
|
|
disabled={EmpNo !== ""} // Deshabilita el campo si ya tiene valor
|
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
<Col md={6}> |
|
|
|
|
|
|
|
<Form.Group> |
|
|
|
|
|
|
|
<Form.Label>Date</Form.Label> |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
|
|
|
|
type="text" |
|
|
|
|
|
|
|
value={Datee} |
|
|
|
|
|
|
|
onChange={(e) => setDate(e.target.value)} |
|
|
|
|
|
|
|
disabled={Datee !== ""} // Deshabilita el campo si ya tiene valor
|
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
</Row> |
|
|
|
|
|
|
|
<Row> |
|
|
|
|
|
|
|
<Col md={6}> |
|
|
|
|
|
|
|
<Form.Group> |
|
|
|
|
|
|
|
<Form.Label>ClockIn1</Form.Label> |
|
|
|
|
|
|
|
<Form.Select value={ClockIn1} onChange={(e) => setClockIn1(e.target.value)}
|
|
|
|
|
|
|
|
disabled={ClockIn1 !== ""}> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<option value="">Seleccione hora</option> |
|
|
|
|
|
|
|
{horas.map((hora) => |
|
|
|
|
|
|
|
minutos.map((minuto) => ( |
|
|
|
|
|
|
|
<option key={`${hora}-${minuto}`} value={formatHora(hora, minuto)}> |
|
|
|
|
|
|
|
{formatHora(hora, minuto)} |
|
|
|
|
|
|
|
</option> |
|
|
|
|
|
|
|
)) |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Form.Select> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
<Col md={6}> |
|
|
|
|
|
|
|
<Form.Group> |
|
|
|
|
|
|
|
<Form.Label>ClockOut1</Form.Label> |
|
|
|
|
|
|
|
<Form.Select value={ClockOut1} onChange={(e) => setClockOut1(e.target.value)} disabled={ClockOut1 !== ""} > |
|
|
|
|
|
|
|
<option value="">Seleccione hora</option> |
|
|
|
|
|
|
|
{horas.map((hora) => |
|
|
|
|
|
|
|
minutos.map((minuto) => ( |
|
|
|
|
|
|
|
<option key={`${hora}-${minuto}`} value={formatHora(hora, minuto)}> |
|
|
|
|
|
|
|
{formatHora(hora, minuto)} |
|
|
|
|
|
|
|
</option> |
|
|
|
|
|
|
|
)) |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</Form.Select> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
</Row> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Row> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Col md = {6}>
|
|
|
|
|
|
|
|
<Form.Group>
|
|
|
|
|
|
|
|
<FormLabel>ClockIn2</FormLabel> |
|
|
|
|
|
|
|
<Form.Select value={ClockIn2} onChange={ (e) => setClockIn2(e.target.value) } >
|
|
|
|
|
|
|
|
<option value="">Seleccione hora</option> |
|
|
|
|
|
|
|
{horas.map((hora) => |
|
|
|
|
|
|
|
minutos.map((minuto) => ( |
|
|
|
|
|
|
|
<option key={`${hora}-${minuto}`} value={formatHora(hora, minuto)}> |
|
|
|
|
|
|
|
{formatHora(hora, minuto)} |
|
|
|
|
|
|
|
</option> |
|
|
|
|
|
|
|
)) |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</Form.Select> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Col md = {6}>
|
|
|
|
|
|
|
|
<Form.Group>
|
|
|
|
|
|
|
|
<FormLabel>ClockOut2</FormLabel> |
|
|
|
|
|
|
|
<Form.Select value={ClockOut2} onChange={ (e) => setClockOut2(e.target.value) } >
|
|
|
|
|
|
|
|
<option value="">Seleccione hora</option> |
|
|
|
|
|
|
|
{horas.map((hora) => |
|
|
|
|
|
|
|
minutos.map((minuto) => ( |
|
|
|
|
|
|
|
<option key={`${hora}-${minuto}`} value={formatHora(hora, minuto)}> |
|
|
|
|
|
|
|
{formatHora(hora, minuto)} |
|
|
|
|
|
|
|
</option> |
|
|
|
|
|
|
|
)) |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</Form.Select> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
</Row> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Row> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Col md = {6}>
|
|
|
|
|
|
|
|
<Form.Group>
|
|
|
|
|
|
|
|
<FormLabel>ClockIn3</FormLabel> |
|
|
|
|
|
|
|
<Form.Select value={ClockIn3} onChange={ (e) => setClockIn3(e.target.value) } >
|
|
|
|
|
|
|
|
<option value="">Seleccione hora</option> |
|
|
|
|
|
|
|
{horas.map((hora) => |
|
|
|
|
|
|
|
minutos.map((minuto) => ( |
|
|
|
|
|
|
|
<option key={`${hora}-${minuto}`} value={formatHora(hora, minuto)}> |
|
|
|
|
|
|
|
{formatHora(hora, minuto)} |
|
|
|
|
|
|
|
</option> |
|
|
|
|
|
|
|
)) |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</Form.Select> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Col md = {6}>
|
|
|
|
|
|
|
|
<Form.Group>
|
|
|
|
|
|
|
|
<FormLabel>ClockOut3</FormLabel> |
|
|
|
|
|
|
|
<Form.Select value={ClockOut3} onChange={ (e) => setClockOut3(e.target.value) }>
|
|
|
|
|
|
|
|
<option value="">Seleccione hora</option> |
|
|
|
|
|
|
|
{horas.map((hora) => |
|
|
|
|
|
|
|
minutos.map((minuto) => ( |
|
|
|
|
|
|
|
<option key={`${hora}-${minuto}`} value={formatHora(hora, minuto)}> |
|
|
|
|
|
|
|
{formatHora(hora, minuto)} |
|
|
|
|
|
|
|
</option> |
|
|
|
|
|
|
|
)) |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</Form.Select> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Row> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Row> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Col md = {6}>
|
|
|
|
|
|
|
|
<Form.Group>
|
|
|
|
|
|
|
|
<FormLabel>ClockIn4</FormLabel> |
|
|
|
|
|
|
|
<Form.Select value={ClockIn4} onChange={ (e) => setClockIn4(e.target.value) }>
|
|
|
|
|
|
|
|
<option value="">Seleccione hora</option> |
|
|
|
|
|
|
|
{horas.map((hora) => |
|
|
|
|
|
|
|
minutos.map((minuto) => ( |
|
|
|
|
|
|
|
<option key={`${hora}-${minuto}`} value={formatHora(hora, minuto)}> |
|
|
|
|
|
|
|
{formatHora(hora, minuto)} |
|
|
|
|
|
|
|
</option> |
|
|
|
|
|
|
|
)) |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</Form.Select> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Col md = {6}>
|
|
|
|
|
|
|
|
<Form.Group>
|
|
|
|
|
|
|
|
<FormLabel>ClockOut4</FormLabel> |
|
|
|
|
|
|
|
<Form.Select value={ClockOut4} onChange={ (e) => setClockOut4(e.target.value) } >
|
|
|
|
|
|
|
|
<option value="">Seleccione hora</option> |
|
|
|
|
|
|
|
{horas.map((hora) => |
|
|
|
|
|
|
|
minutos.map((minuto) => ( |
|
|
|
|
|
|
|
<option key={`${hora}-${minuto}`} value={formatHora(hora, minuto)}> |
|
|
|
|
|
|
|
{formatHora(hora, minuto)} |
|
|
|
|
|
|
|
</option> |
|
|
|
|
|
|
|
)) |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</Form.Select> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Row> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Row> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Col md = {6}>
|
|
|
|
|
|
|
|
<Form.Group>
|
|
|
|
|
|
|
|
<FormLabel>ClockIn5</FormLabel> |
|
|
|
|
|
|
|
<Form.Select value={ClockIn5} onChange={ (e) => setClockIn5(e.target.value) } >
|
|
|
|
|
|
|
|
<option value="">Seleccione hora</option> |
|
|
|
|
|
|
|
{horas.map((hora) => |
|
|
|
|
|
|
|
minutos.map((minuto) => ( |
|
|
|
|
|
|
|
<option key={`${hora}-${minuto}`} value={formatHora(hora, minuto)}> |
|
|
|
|
|
|
|
{formatHora(hora, minuto)} |
|
|
|
|
|
|
|
</option> |
|
|
|
|
|
|
|
)) |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</Form.Select> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Col md = {6}>
|
|
|
|
|
|
|
|
<Form.Group>
|
|
|
|
|
|
|
|
<FormLabel>ClockOut5</FormLabel> |
|
|
|
|
|
|
|
<Form.Select value={ClockOut5} onChange={ (e) => setClockOut5(e.target.value) } >
|
|
|
|
|
|
|
|
<option value="">Seleccione hora</option> |
|
|
|
|
|
|
|
{horas.map((hora) => |
|
|
|
|
|
|
|
minutos.map((minuto) => ( |
|
|
|
|
|
|
|
<option key={`${hora}-${minuto}`} value={formatHora(hora, minuto)}> |
|
|
|
|
|
|
|
{formatHora(hora, minuto)} |
|
|
|
|
|
|
|
</option> |
|
|
|
|
|
|
|
)) |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</Form.Select> |
|
|
|
|
|
|
|
</Form.Group> |
|
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Row> |
|
|
|
|
|
|
|
</Form> |
|
|
|
|
|
|
|
</Modal.Body> |
|
|
|
|
|
|
|
<Modal.Footer> |
|
|
|
|
|
|
|
<Button variant="secondary" onClick={() => setModalEdit(false)}> |
|
|
|
|
|
|
|
Cerrar |
|
|
|
|
|
|
|
</Button> |
|
|
|
|
|
|
|
<Button variant="primary" onClick={haveSaveChanges}> |
|
|
|
|
|
|
|
Guardar Cambios |
|
|
|
|
|
|
|
</Button> |
|
|
|
|
|
|
|
</Modal.Footer> |
|
|
|
|
|
|
|
</Modal> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Card className="mt-3"> |
|
|
|
<Card className="mt-3"> |
|
|
|
<Card.Body> |
|
|
|
<Card.Body> |
|
|
|
<div className="ag-theme-alpine" style={{ height: 500, width: '100%' }}> |
|
|
|
<div className="ag-theme-alpine" style={{ height: 500, width: '100%' }}> |
|
|
@ -472,3 +992,86 @@ return ( |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// return (
|
|
|
|
|
|
|
|
// <Modal show={ModalEdit} onHide={() => setModalEdit(false)}>
|
|
|
|
|
|
|
|
// <Modal.Header closeButton>
|
|
|
|
|
|
|
|
// <Modal.Title>Editar Registro</Modal.Title>
|
|
|
|
|
|
|
|
// </Modal.Header>
|
|
|
|
|
|
|
|
// <Modal.Body>
|
|
|
|
|
|
|
|
// <Form>
|
|
|
|
|
|
|
|
// <Row>
|
|
|
|
|
|
|
|
// <Col md={6}>
|
|
|
|
|
|
|
|
// <Form.Group>
|
|
|
|
|
|
|
|
// <Form.Label>EmpNo</Form.Label>
|
|
|
|
|
|
|
|
// <Form.Control
|
|
|
|
|
|
|
|
// type="text"
|
|
|
|
|
|
|
|
// value={EmpNo}
|
|
|
|
|
|
|
|
// onChange={(e) => setEmpNo(e.target.value)}
|
|
|
|
|
|
|
|
// />
|
|
|
|
|
|
|
|
// </Form.Group>
|
|
|
|
|
|
|
|
// </Col>
|
|
|
|
|
|
|
|
// <Col md={6}>
|
|
|
|
|
|
|
|
// <Form.Group>
|
|
|
|
|
|
|
|
// <Form.Label>Date</Form.Label>
|
|
|
|
|
|
|
|
// <Form.Control
|
|
|
|
|
|
|
|
// type="text"
|
|
|
|
|
|
|
|
// value={Datee}
|
|
|
|
|
|
|
|
// onChange={(e) => setDate(e.target.value)}
|
|
|
|
|
|
|
|
// />
|
|
|
|
|
|
|
|
// </Form.Group>
|
|
|
|
|
|
|
|
// </Col>
|
|
|
|
|
|
|
|
// </Row>
|
|
|
|
|
|
|
|
// <Row>
|
|
|
|
|
|
|
|
// <Col md={6}>
|
|
|
|
|
|
|
|
// <Form.Group>
|
|
|
|
|
|
|
|
// <Form.Label>ClockIn1</Form.Label>
|
|
|
|
|
|
|
|
// <Form.Select value={ClockIn1} onChange={(e) => setClockIn1(e.target.value)}>
|
|
|
|
|
|
|
|
// <option value="">Seleccione hora</option>
|
|
|
|
|
|
|
|
// {horas.map((hora) =>
|
|
|
|
|
|
|
|
// minutos.map((minuto) => (
|
|
|
|
|
|
|
|
// <option key={`${hora}-${minuto}`} value={formatHora(hora, minuto)}>
|
|
|
|
|
|
|
|
// {formatHora(hora, minuto)}
|
|
|
|
|
|
|
|
// </option>
|
|
|
|
|
|
|
|
// ))
|
|
|
|
|
|
|
|
// )}
|
|
|
|
|
|
|
|
// </Form.Select>
|
|
|
|
|
|
|
|
// </Form.Group>
|
|
|
|
|
|
|
|
// </Col>
|
|
|
|
|
|
|
|
// <Col md={6}>
|
|
|
|
|
|
|
|
// <Form.Group>
|
|
|
|
|
|
|
|
// <Form.Label>ClockOut1</Form.Label>
|
|
|
|
|
|
|
|
// <Form.Select value={ClockOut1} onChange={(e) => setClockOut1(e.target.value)}>
|
|
|
|
|
|
|
|
// <option value="">Seleccione hora</option>
|
|
|
|
|
|
|
|
// {horas.map((hora) =>
|
|
|
|
|
|
|
|
// minutos.map((minuto) => (
|
|
|
|
|
|
|
|
// <option key={`${hora}-${minuto}`} value={formatHora(hora, minuto)}>
|
|
|
|
|
|
|
|
// {formatHora(hora, minuto)}
|
|
|
|
|
|
|
|
// </option>
|
|
|
|
|
|
|
|
// ))
|
|
|
|
|
|
|
|
// )}
|
|
|
|
|
|
|
|
// </Form.Select>
|
|
|
|
|
|
|
|
// </Form.Group>
|
|
|
|
|
|
|
|
// </Col>
|
|
|
|
|
|
|
|
// </Row>
|
|
|
|
|
|
|
|
// {/* Repetir para ClockIn2, ClockOut2, etc. */}
|
|
|
|
|
|
|
|
// </Form>
|
|
|
|
|
|
|
|
// </Modal.Body>
|
|
|
|
|
|
|
|
// <Modal.Footer>
|
|
|
|
|
|
|
|
// <Button variant="secondary" onClick={() => setModalEdit(false)}>
|
|
|
|
|
|
|
|
// Cerrar
|
|
|
|
|
|
|
|
// </Button>
|
|
|
|
|
|
|
|
// <Button variant="primary" onClick={haveSaveChanges}>
|
|
|
|
|
|
|
|
// Guardar Cambios
|
|
|
|
|
|
|
|
// </Button>
|
|
|
|
|
|
|
|
// </Modal.Footer>
|
|
|
|
|
|
|
|
// </Modal>
|
|
|
|
|
|
|
|
// );
|
|
|
|
|
|
|
|
// };
|