85 lines
3.0 KiB
JavaScript
85 lines
3.0 KiB
JavaScript
import { useState } from 'react';
|
|
import { useLocation } from 'react-router-dom';
|
|
import FormBox from '../components/FormBox';
|
|
import Button from '../components/Button';
|
|
import Notification from '../components/Notification';
|
|
import { lockerService } from '../services/locker.service';
|
|
import { useToast } from '../hooks/useToast';
|
|
import { useLoading } from '../hooks/useLoading';
|
|
|
|
function CheckInOutLog() {
|
|
const [time, setTime] = useState(null);
|
|
const [checkType, setCheckType] = useState('');
|
|
const [notification, setNotification] = useState({ message: '', type: '' });
|
|
|
|
const location = useLocation();
|
|
const showToast = useToast();
|
|
const { setIsLoading } = useLoading();
|
|
const accountNumber = location.state?.accountNumber;
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
if (time === null || checkType === '') {
|
|
showToast('Please fill in all fields', 'error');
|
|
return;
|
|
}
|
|
// Add your logic here
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await lockerService.checkInOut(accountNumber, time, checkType);
|
|
if (response.status === 200) {
|
|
setNotification({ message: response.data.message, type: 'success' });
|
|
} else {
|
|
console.log(response);
|
|
setNotification({ message: response.data.message, type: 'error' });
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
setNotification({ message: error.message, type: 'error' });
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
{notification.message !== '' && <Notification {...notification} />}
|
|
<FormBox title="Check In/Out Log">
|
|
<div className="px-4 pt-7 text-2xl font-display font-bold text-primary dark:text-primary-dark">
|
|
{accountNumber}
|
|
</div>
|
|
<div className="p-2 pt-7 flex flex-col gap-4">
|
|
<div className="flex">
|
|
<label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">Time</label>
|
|
<input
|
|
type="time"
|
|
className="w-1/5 h-10 px-2 rounded-full dark:bg-grey dark:text-primary-dark border-2 focus:outline-grey border-grey text-black"
|
|
onChange={(e) => setTime(e.target.value)}
|
|
value={time}
|
|
/>
|
|
</div>
|
|
<div className="flex">
|
|
<label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
|
|
Check Type
|
|
</label>
|
|
<select
|
|
className="w-1/5 h-10 px-2 rounded-full dark:bg-grey dark:text-primary-dark border-2 focus:outline-grey border-grey"
|
|
onChange={(e) => setCheckType(e.target.value)}
|
|
value={checkType}
|
|
>
|
|
<option value="" disabled>
|
|
Select
|
|
</option>
|
|
<option value="check-in">Check In</option>
|
|
<option value="check-out">Check Out</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<Button text="Submit" onClick={handleSubmit} />
|
|
</FormBox>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CheckInOutLog;
|