1 files changed, 54 insertions, 10 deletions

diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx
index cebb15b0..6100e626 100644
--- a/src/lib/auth/components/CompanyProfile.jsx
+++ b/src/lib/auth/components/CompanyProfile.jsx
@@ -7,23 +7,25 @@ import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as Yup from 'yup';
 
 const CompanyProfile = () => {
   const [changeConfirmation, setChangeConfirmation] = useState(false);
   const auth = useAuth();
   const [isOpen, setIsOpen] = useState(false);
   const toggle = () => setIsOpen(!isOpen);
-  const { register, setValue, control, handleSubmit } = useForm({
-    defaultValues: {
-      industry: '',
-      companyType: '',
-      name: '',
-      taxName: '',
-      npwp: '',
-      alamat_wajib_pajak: '',
-      alamat_bisnis: '',
-    },
+  const {
+    register,
+    formState: { errors },
+    setValue,
+    control,
+    handleSubmit,
+  } = useForm({
+    resolver: yupResolver(validationSchema),
+    defaultValues,
   });
+
   const [industries, setIndustries] = useState([]);
   useEffect(() => {
     const loadIndustries = async () => {
@@ -156,6 +158,9 @@ const CompanyProfile = () => {
                   <HookFormSelect {...props} options={industries} />
                 )}
               />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.industry?.message}
+              </div>
             </div>
             <div className='flex flex-wrap'>
               <div className='w-full mb-3'>Badan Usaha</div>
@@ -167,6 +172,9 @@ const CompanyProfile = () => {
                     <HookFormSelect {...props} options={companyTypes} />
                   )}
                 />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.companyType?.message}
+                </div>
               </div>
               <div className='w-9/12 pl-1'>
                 <input
@@ -175,6 +183,9 @@ const CompanyProfile = () => {
                   className='form-input'
                   placeholder='Cth: Indoteknik Dotcom Gemilang'
                 />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.name?.message}
+                </div>
               </div>
             </div>
             <div>
@@ -184,6 +195,9 @@ const CompanyProfile = () => {
                 type='text'
                 className='form-input mt-3'
               />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.taxName?.message}
+              </div>
             </div>
             <div>
               <label>Alamat Wajib Pajak</label>
@@ -192,6 +206,9 @@ const CompanyProfile = () => {
                 type='text'
                 className='form-input mt-3'
               />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.alamat_wajib_pajak?.message}
+              </div>
             </div>
             <div>
               <label>Alamat Bisnis</label>
@@ -200,6 +217,9 @@ const CompanyProfile = () => {
                 type='text'
                 className='form-input mt-3'
               />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.alamat_bisnis?.message}
+              </div>
             </div>
             <div>
               <label>Nomor NPWP</label>
@@ -207,7 +227,11 @@ const CompanyProfile = () => {
                 {...register('npwp')}
                 type='text'
                 className='form-input mt-3'
+                maxLength={16}
               />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.npwp?.message}
+              </div>
             </div>
           </div>
           <button type='submit' className='btn-yellow w-full mt-6'>
@@ -220,3 +244,23 @@ const CompanyProfile = () => {
 };
 
 export default CompanyProfile;
+
+const validationSchema = Yup.object().shape({
+  alamat_bisnis: Yup.string().required('Harus di-isi'),
+  alamat_wajib_pajak: Yup.string().required('Harus di-isi'),
+  taxName: Yup.string().required('Harus di-isi'),
+  npwp: Yup.string().required('Harus di-isi'),
+  name: Yup.string().required('Harus di-isi'),
+  industry: Yup.string().required('Harus di-pilih'),
+  companyType: Yup.string().required('Harus di-pilih'),
+});
+
+const defaultValues = {
+  industry: '',
+  companyType: '',
+  name: '',
+  taxName: '',
+  npwp: '',
+  alamat_wajib_pajak: '',
+  alamat_bisnis: '',
+};