hamid zarghami
162 lines
7.3 KiB
TypeScript
162 lines
7.3 KiB
TypeScript
import { FC } from 'react'
|
||
import Button from '../../components/Button'
|
||
import { TickCircle } from 'iconsax-react'
|
||
import Input from '../../components/Input'
|
||
import CreateSidebar from './components/CreateSidebar'
|
||
import { useTranslation } from 'react-i18next'
|
||
import { useFormik } from 'formik'
|
||
import * as Yup from 'yup'
|
||
|
||
const CreateCompany: FC = () => {
|
||
const { t } = useTranslation('global')
|
||
|
||
const formik = useFormik({
|
||
initialValues: {
|
||
name: '',
|
||
ceoFirstName: '',
|
||
ceoLastName: '',
|
||
phoneNumber: '',
|
||
email: '',
|
||
nationalId: '',
|
||
establishmentDate: '',
|
||
address: '',
|
||
mapLink: '',
|
||
shortDescription: ''
|
||
},
|
||
validationSchema: Yup.object({
|
||
name: Yup.string().required(t('errors.required')),
|
||
ceoFirstName: Yup.string().required(t('errors.required')),
|
||
ceoLastName: Yup.string().required(t('errors.required')),
|
||
phoneNumber: Yup.string().required(t('errors.required')),
|
||
email: Yup.string().email(t('errors.invalid_email')).required(t('errors.required')),
|
||
nationalId: Yup.string().required(t('errors.required')),
|
||
establishmentDate: Yup.string().required(t('errors.required')),
|
||
address: Yup.string().required(t('errors.required')),
|
||
mapLink: Yup.string().url(t('errors.invalid_url')),
|
||
shortDescription: Yup.string().required(t('errors.required'))
|
||
}),
|
||
onSubmit: (values) => {
|
||
console.log(values)
|
||
}
|
||
})
|
||
|
||
return (
|
||
<div className='mt-4'>
|
||
<div className='flex justify-between items-center'>
|
||
<div>
|
||
افزودن شرکت
|
||
</div>
|
||
|
||
<Button
|
||
className='w-fit px-4'
|
||
onClick={() => formik.handleSubmit()}
|
||
>
|
||
<div className='flex items-center gap-2'>
|
||
<TickCircle size={20} color='white' />
|
||
<div>ثبت شرکت</div>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
|
||
<div className='flex gap-6'>
|
||
<div className='flex-1'>
|
||
<div className='flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
|
||
<div>اطلاعات شرکت</div>
|
||
|
||
<div className='rowTwoInput mt-6'>
|
||
<Input
|
||
label={t('company.company_name')}
|
||
name='name'
|
||
value={formik.values.name}
|
||
onChange={formik.handleChange}
|
||
error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
|
||
/>
|
||
<Input
|
||
label={t('company.ceo_first_name')}
|
||
name='ceoFirstName'
|
||
value={formik.values.ceoFirstName}
|
||
onChange={formik.handleChange}
|
||
error_text={formik.touched.ceoFirstName && formik.errors.ceoFirstName ? formik.errors.ceoFirstName : ''}
|
||
/>
|
||
</div>
|
||
|
||
<div className='rowTwoInput mt-6'>
|
||
<Input
|
||
label={t('company.ceo_last_name')}
|
||
name='ceoLastName'
|
||
value={formik.values.ceoLastName}
|
||
onChange={formik.handleChange}
|
||
error_text={formik.touched.ceoLastName && formik.errors.ceoLastName ? formik.errors.ceoLastName : ''}
|
||
/>
|
||
<Input
|
||
label={t('company.phone_number')}
|
||
name='phoneNumber'
|
||
value={formik.values.phoneNumber}
|
||
onChange={formik.handleChange}
|
||
error_text={formik.touched.phoneNumber && formik.errors.phoneNumber ? formik.errors.phoneNumber : ''}
|
||
/>
|
||
</div>
|
||
|
||
<div className='rowTwoInput mt-6'>
|
||
<Input
|
||
label={t('company.email')}
|
||
name='email'
|
||
value={formik.values.email}
|
||
onChange={formik.handleChange}
|
||
error_text={formik.touched.email && formik.errors.email ? formik.errors.email : ''}
|
||
/>
|
||
<Input
|
||
label={t('company.national_id')}
|
||
name='nationalId'
|
||
value={formik.values.nationalId}
|
||
onChange={formik.handleChange}
|
||
error_text={formik.touched.nationalId && formik.errors.nationalId ? formik.errors.nationalId : ''}
|
||
/>
|
||
</div>
|
||
|
||
<div className='rowTwoInput mt-6'>
|
||
<Input
|
||
label={t('company.establishment_date')}
|
||
name='establishmentDate'
|
||
value={formik.values.establishmentDate}
|
||
onChange={formik.handleChange}
|
||
error_text={formik.touched.establishmentDate && formik.errors.establishmentDate ? formik.errors.establishmentDate : ''}
|
||
/>
|
||
<Input
|
||
label={t('company.map_link')}
|
||
name='mapLink'
|
||
value={formik.values.mapLink}
|
||
onChange={formik.handleChange}
|
||
error_text={formik.touched.mapLink && formik.errors.mapLink ? formik.errors.mapLink : ''}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-6'>
|
||
<Input
|
||
label={t('company.address')}
|
||
name='address'
|
||
value={formik.values.address}
|
||
onChange={formik.handleChange}
|
||
error_text={formik.touched.address && formik.errors.address ? formik.errors.address : ''}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-6'>
|
||
<Input
|
||
label={t('company.short_description')}
|
||
name='shortDescription'
|
||
value={formik.values.shortDescription}
|
||
onChange={formik.handleChange}
|
||
error_text={formik.touched.shortDescription && formik.errors.shortDescription ? formik.errors.shortDescription : ''}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<CreateSidebar />
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default CreateCompany |