133 lines
4.9 KiB
TypeScript
133 lines
4.9 KiB
TypeScript
import React, { ReactElement, useState } from 'react';
|
|
import Head from 'next/head';
|
|
import { Formik, Form, Field } from 'formik';
|
|
import axios from 'axios';
|
|
import { mdiBookOpenPageVariant, mdiCheck } from '@mdi/js';
|
|
import CardBox from '../../components/CardBox';
|
|
import LayoutAuthenticated from '../../layouts/Authenticated';
|
|
import SectionMain from '../../components/SectionMain';
|
|
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
|
|
import BaseButton from '../../components/BaseButton';
|
|
import BaseButtons from '../../components/BaseButtons';
|
|
import FormField from '../../components/FormField';
|
|
import { getPageTitle } from '../../config';
|
|
import { SelectFieldMany } from '../../components/SelectFieldMany';
|
|
import SelectField from '../../components/SelectField';
|
|
|
|
const BulkAdjustPage = () => {
|
|
const initialValues = {
|
|
userIds: [],
|
|
entry_type: 'debit_manual_adjustment',
|
|
leave_bucket: 'regular_pto',
|
|
amount_hours: 0,
|
|
amount_days: 0,
|
|
memo: '',
|
|
};
|
|
|
|
const handleSubmit = async (values, { resetForm }) => {
|
|
try {
|
|
await axios.post('/pto_journal_entries/bulk-adjust', { data: values });
|
|
alert('Bulk adjustment applied successfully');
|
|
resetForm();
|
|
} catch (error) {
|
|
console.error('Failed to apply adjustment:', error);
|
|
alert('Failed to apply adjustment');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{getPageTitle('Bulk Balance Adjustment')}</title>
|
|
</Head>
|
|
<SectionMain>
|
|
<SectionTitleLineWithButton icon={mdiBookOpenPageVariant} title="Bulk Balance Adjustment" main>
|
|
</SectionTitleLineWithButton>
|
|
|
|
<CardBox>
|
|
<Formik
|
|
initialValues={initialValues}
|
|
onSubmit={handleSubmit}
|
|
>
|
|
{({ values, setFieldValue }) => (
|
|
<Form>
|
|
<FormField label="Employees">
|
|
<SelectFieldMany
|
|
field={{ name: 'userIds', value: values.userIds }}
|
|
form={{ setFieldValue }}
|
|
itemRef="users"
|
|
showField="email"
|
|
options={[]}
|
|
/>
|
|
</FormField>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<FormField label="Entry Type">
|
|
<Field name="entry_type" as="select" className="px-2 py-1 w-full border border-gray-300 rounded h-10">
|
|
<option value="debit_manual_adjustment">Debit (Reduce Balance)</option>
|
|
<option value="credit_manual_adjustment">Credit (Increase Balance)</option>
|
|
<option value="credit_accrual">Credit Accrual</option>
|
|
<option value="debit_time_off">Debit Time Off</option>
|
|
</Field>
|
|
</FormField>
|
|
|
|
<FormField label="Leave Bucket">
|
|
<Field name="leave_bucket" as="select" className="px-2 py-1 w-full border border-gray-300 rounded h-10">
|
|
<option value="regular_pto">Regular PTO</option>
|
|
<option value="medical_leave">Medical Leave</option>
|
|
<option value="bereavement">Bereavement</option>
|
|
<option value="vacation_pay">Vacation Pay</option>
|
|
</Field>
|
|
</FormField>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<FormField label="Amount (Days)">
|
|
<Field
|
|
name="amount_days"
|
|
type="number"
|
|
step="0.1"
|
|
className="px-2 py-1 w-full border border-gray-300 rounded h-10"
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField label="Amount (Hours)">
|
|
<Field
|
|
name="amount_hours"
|
|
type="number"
|
|
step="0.1"
|
|
className="px-2 py-1 w-full border border-gray-300 rounded h-10"
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
|
|
<FormField label="Reason / Memo">
|
|
<Field
|
|
name="memo"
|
|
as="textarea"
|
|
className="px-2 py-1 w-full border border-gray-300 rounded h-24"
|
|
/>
|
|
</FormField>
|
|
|
|
<BaseDivider />
|
|
|
|
<BaseButtons>
|
|
<BaseButton type="submit" color="info" label="Apply Adjustment" icon={mdiCheck} />
|
|
</BaseButtons>
|
|
</Form>
|
|
)}
|
|
</Formik>
|
|
</CardBox>
|
|
</SectionMain>
|
|
</>
|
|
);
|
|
};
|
|
|
|
BulkAdjustPage.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
|
|
};
|
|
|
|
const BaseDivider = () => <hr className="my-6 -mx-6 border-gray-100 dark:border-gray-700" />;
|
|
|
|
export default BulkAdjustPage;
|