chore(FE-40): add delete button and delete confirmation modal

src/components/pages/master-data/uom/form/UomForm.tsx

@@ -8,6 +8,8 @@ import { toast } from 'react-hot-toast';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
 
 import {
   UomFormSchema,
@@ -21,6 +23,7 @@ import {
   UpdateUomPayload,
 } from '@/types/api/master-data/uom';
 import { UomApi } from '@/services/api/master-data';
+import { cn } from '@/lib/helper';
 
 interface UomFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -29,8 +32,10 @@ interface UomFormProps {
 
 const UomForm = ({ type = 'add', initialValues }: UomFormProps) => {
   const router = useRouter();
+  const deleteModal = useModal();
 
   const [uomFormErrorMessage, setUomFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const createUomHandler = useCallback(
     async (payload: CreateUomPayload) => {
@@ -93,11 +98,27 @@ const UomForm = ({ type = 'add', initialValues }: UomFormProps) => {
 
   const { setValues: formikSetValues } = formik;
 
+  const deleteUomClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await UomApi.delete(initialValues?.id as number);
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete UOM!');
+    setIsDeleteLoading(false);
+    router.push('/master-data/uom');
+  };
+
   useEffect(() => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
 
   return (
+    <>
       <section className='w-full max-w-xl'>
         <header className='flex flex-col gap-4'>
           <Button
@@ -136,10 +157,33 @@ const UomForm = ({ type = 'add', initialValues }: UomFormProps) => {
             />
           </div>
 
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {type !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={deleteUomClickHandler}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+              </div>
+            )}
+
             {type !== 'detail' && (
-          <>
-            <div className='flex flex-row justify-end gap-2'>
-              <Button type='reset' color='error' className='px-4'>
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': type === 'add',
+                })}
+              >
+                <Button type='reset' color='warning' className='px-4'>
                   Reset
                 </Button>
 
@@ -153,6 +197,8 @@ const UomForm = ({ type = 'add', initialValues }: UomFormProps) => {
                   Submit
                 </Button>
               </div>
+            )}
+          </div>
 
           {uomFormErrorMessage && (
             <div role='alert' className='alert alert-error'>
@@ -164,10 +210,26 @@ const UomForm = ({ type = 'add', initialValues }: UomFormProps) => {
               <span>{uomFormErrorMessage}</span>
             </div>
           )}
-          </>
-        )}
         </form>
       </section>
+
+      {type !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus data UOM ini (${initialValues?.name})?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            isLoading: isDeleteLoading,
+            onClick: confirmationModalDeleteClickHandler,
+          }}
+        />
+      )}
+    </>
   );
 };