import { mdiPencil } from '@mdi/js'; import Head from 'next/head'; import React, { ReactElement, useEffect, useState } from 'react'; import CardBox from '../components/CardBox'; import LayoutAuthenticated from '../layouts/Authenticated'; import SectionMain from '../components/SectionMain'; import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'; import JobLogPayPreview from '../components/JobLogPayPreview'; import { getPageTitle } from '../config'; import { Field, Form, Formik } from 'formik'; import FormField from '../components/FormField'; import BaseDivider from '../components/BaseDivider'; import BaseButtons from '../components/BaseButtons'; import BaseButton from '../components/BaseButton'; import { SelectField } from '../components/SelectField'; import { useRouter } from 'next/router'; import { create } from '../stores/job_logs/job_logsSlice'; import { useAppDispatch, useAppSelector } from '../stores/hooks'; import axios from 'axios'; const LogWorkPage = () => { const router = useRouter(); const dispatch = useAppDispatch(); const currentUser = useAppSelector((state) => state.auth.currentUser); const [assignedPayTypes, setAssignedPayTypes] = useState([]); useEffect(() => { if (currentUser?.id) { axios .get(`/employee_pay_types?employee=${currentUser.id}&active=true`) .then((res) => { if (res.data && res.data.rows) { const payTypes = res.data.rows .map((row: any) => row.pay_type) .filter(Boolean); setAssignedPayTypes(payTypes); } }) .catch((err) => console.error('Failed to fetch assigned pay types:', err)); } }, [currentUser]); const initialValues = { work_date: new Date().toISOString().slice(0, 10), employee: currentUser?.id || '', customer: '', hours_conducted: '', client_paid: '', workersCompClass: '', pay_type: '', vehicle: '', status: 'submitted', notes_to_admin: '', }; const handleSubmit = async (data: any) => { await dispatch(create(data)); await router.push('/my-logs'); }; return ( <> {getPageTitle('Log Work')} {''} handleSubmit(values)}> {() => (
{assignedPayTypes.map((pt) => ( ))} )}
); }; LogWorkPage.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default LogWorkPage;