32686/frontend/src/pages/inventory/inventory-new.tsx
2025-07-08 04:53:44 +00:00

137 lines
3.4 KiB
TypeScript

import { mdiChartTimelineVariant } from '@mdi/js'
import Head from 'next/head'
import React, { ReactElement } from 'react'
import CardBox from '../../components/CardBox'
import LayoutAuthenticated from '../../layouts/Authenticated'
import SectionMain from '../../components/SectionMain'
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
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 FormCheckRadio from '../../components/FormCheckRadio'
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
import { SwitchField } from '../../components/SwitchField'
import { SelectField } from '../../components/SelectField'
import {RichTextField} from "../../components/RichTextField";
import { create } from '../../stores/inventory/inventorySlice'
import { useAppDispatch } from '../../stores/hooks'
import { useRouter } from 'next/router'
const initialValues = {
product_name: '',
available_quantity: '',
reserved_quantity: '',
returned_quantity: '',
picture: '',
}
const InventoryNew = () => {
const router = useRouter()
const dispatch = useAppDispatch()
const handleSubmit = async (data) => {
await dispatch(create(data))
await router.push('/inventory/inventory-list')
}
return (
<>
<Head>
<title>{getPageTitle('New Item')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Item" main>
{''}
</SectionTitleLineWithButton>
<CardBox>
<Formik
initialValues={
initialValues
}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField
label="ProductName"
>
<Field
name="product_name"
placeholder="ProductName"
/>
</FormField>
<FormField
label="AvailableQuantity"
>
<Field
type="number"
name="available_quantity"
placeholder="AvailableQuantity"
/>
</FormField>
<FormField
label="ReservedQuantity"
>
<Field
type="number"
name="reserved_quantity"
placeholder="ReservedQuantity"
/>
</FormField>
<FormField
label="ReturnedQuantity"
>
<Field
type="number"
name="returned_quantity"
placeholder="ReturnedQuantity"
/>
</FormField>
<FormField
label="Picture"
>
<Field
name="picture"
placeholder="Picture"
/>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type="submit" color="info" label="Submit" />
<BaseButton type="reset" color="info" outline label="Reset" />
<BaseButton type='reset' color='danger' outline label='Cancel' onClick={() => router.push('/inventory/inventory-list')}/>
</BaseButtons>
</Form>
</Formik>
</CardBox>
</SectionMain>
</>
)
}
InventoryNew.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated>
{page}
</LayoutAuthenticated>
)
}
export default InventoryNew