feat(FE-316): Add tooltip and remove control to file upload

src/components/pages/uniformity/form/UniformityForm.tsx

@@ -43,6 +43,7 @@ import UniformityResultForm from '@/components/pages/uniformity/form/UniformityR
 import { generateUniformityTemplate } from '@/components/pages/uniformity/export/UniformityTemplate';
 import useSWR from 'swr';
 import { cn, formatNumber } from '@/lib/helper';
+import Tooltip from '@/components/Tooltip';
 
 interface UniformityFormProps {
   formType?: 'add' | 'edit';
@@ -364,7 +365,10 @@ const UniformityForm = ({
   );
 
   const handleRemoveFile = useCallback(() => {
-    formik.setFieldValue('files', undefined);
+    formik.setFieldValue('file', undefined);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
   }, [formik]);
 
   const handleDownloadTemplate = useCallback(() => {
@@ -521,15 +525,45 @@ const UniformityForm = ({
             />
 
             <div>
-              <label
-                htmlFor='file-upload-input'
-                className={cn(
-                  "w-full text-sm font-normal leading-5 after:content-['*'] after:ml-0.5 after:text-red-500",
-                  formik.touched.file && formik.errors.file && 'text-red-500'
-                )}
-              >
-                Upload File
-              </label>
+              <div className='flex items-center justify-between'>
+                <label
+                  htmlFor='file-upload-input'
+                  className={cn(
+                    "w-full text-sm font-normal leading-5 after:content-['*'] after:ml-0.5 after:text-red-500",
+                    formik.touched.file && formik.errors.file && 'text-red-500'
+                  )}
+                >
+                  Upload File
+                </label>
+                {formik.values.file && !isNextStep ? (
+                  <button
+                    onClick={handleRemoveFile}
+                    className='cursor-pointer'
+                    type='button'
+                  >
+                    <Icon
+                      icon='heroicons-solid:trash'
+                      width={20}
+                      height={20}
+                      className='text-gray-400 hover:text-gray-600'
+                    />
+                  </button>
+                ) : !formik.values.file && !isNextStep ? (
+                  <button className='cursor-pointer' type='button'>
+                    <Tooltip
+                      position='left'
+                      content='Pastikan file yang diunggah sesuai dengan template yang disediakan, template akan menyesuaikan dengan jumlah populasi pada kandang yang dipilih.'
+                    >
+                      <Icon
+                        icon='heroicons:information-circle'
+                        width={20}
+                        height={20}
+                        className='text-gray-400 hover:text-gray-600'
+                      />
+                    </Tooltip>
+                  </button>
+                ) : null}
+              </div>
 
               <section
                 className={cn(