From 1843a47d5966e12cd0bcd698285625b4eeac607d Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 26 Dec 2025 21:50:59 +0700
Subject: [PATCH] refactor(FE-438): Replace FileInput with custom file upload
 UI

---
 .../pages/uniformity/form/UniformityForm.tsx  | 142 ++++++++++++------
 1 file changed, 99 insertions(+), 43 deletions(-)

diff --git a/src/components/pages/uniformity/form/UniformityForm.tsx b/src/components/pages/uniformity/form/UniformityForm.tsx
index fab49ba5..919b28ff 100644
--- a/src/components/pages/uniformity/form/UniformityForm.tsx
+++ b/src/components/pages/uniformity/form/UniformityForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
 import { Icon } from '@iconify/react';
@@ -14,7 +14,6 @@ import SelectInput, {
   OptionType,
   useSelect,
 } from '@/components/input/SelectInput';
-import FileInput from '@/components/input/FileInput';
 
 import {
   UniformityFormSchema,
@@ -57,6 +56,8 @@ const UniformityForm = ({
   const [uniformityFormErrorMessage, setUniformityFormErrorMessage] =
     useState('');
 
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
   // ===== SELECT INPUT DATA =====
   const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
     null
@@ -451,50 +452,105 @@ const UniformityForm = ({
             />
 
             <div>
-              <FileInput
-                required
-                name='files'
-                label='Upload File'
-                onChange={handleFileChange}
-                accept='application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv'
-                isError={formik.touched.files && Boolean(formik.errors.files)}
-                errorMessage={formik.errors.files as string}
-                className={{ wrapper: 'w-full' }}
-              />
-
-              {formik.values.files && (
-                <div className='mt-4 flex flex-col gap-2'>
-                  <label className='text-sm font-semibold'>
-                    File yang dipilih:
-                  </label>
-                  <div className='flex items-center justify-between gap-4 p-3 bg-base-200 rounded-lg'>
-                    <div className='flex items-center gap-2'>
-                      <Icon
-                        icon='material-symbols:attach-file'
-                        width={20}
-                        height={20}
-                      />
-                      <span className='text-sm'>
-                        {formik.values.files.name}
+              <label
+                htmlFor='file-upload-input'
+                className="w-full text-sm font-normal leading-5 after:content-['*'] after:ml-0.5 after:text-red-500"
+              >
+                Upload File
+              </label>
+              <section
+                className='h-full w-full border border-gray-300 rounded-2xl border-dashed cursor-pointer mt-2'
+                onClick={() =>
+                  document.getElementById('file-upload-input')?.click()
+                }
+              >
+                {formik.values.files ? (
+                  <div className='flex flex-col items-center justify-center gap-2 my-10'>
+                    <div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center'>
+                      <Button
+                        type='button'
+                        className='rounded-2xl border border-sky-500 bg-[#0069E0]  text-white'
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          document.getElementById('file-upload-input')?.click();
+                        }}
+                      >
+                        <Icon
+                          icon={'heroicons:document-text'}
+                          className='text-2xl text-white'
+                        />
+                      </Button>
+                    </div>
+                    <span className='text-md font-semibold text-black line-clamp-2 text-center max-w-xs break-all'>
+                      {formik.values.files.name}
+                    </span>
+                  </div>
+                ) : (
+                  <>
+                    <div className='flex flex-col items-center justify-center gap-2 my-10 mb-0!'>
+                      <div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center'>
+                        <Button
+                          type='button'
+                          className='rounded-2xl border border-sky-500 bg-[#0069E0]  text-white'
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            document
+                              .getElementById('file-upload-input')
+                              ?.click();
+                          }}
+                        >
+                          <Icon
+                            icon={'heroicons-solid:arrow-up-tray'}
+                            className='text-2xl text-white'
+                          />
+                        </Button>
+                      </div>
+                      <span className='text-md font-semibold text-[#18181B80]'>
+                        Drag file to this area to upload
                       </span>
-                      <span className='text-xs text-base-content/60'>
-                        ({(formik.values.files.size / 1024).toFixed(2)} KB)
+                      <span className='text-xs font-light text-[#18181B80] text-center max-w-xs px-4'>
+                        Upload data file (*.csv)
                       </span>
                     </div>
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={handleRemoveFile}
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={18}
-                        height={18}
-                      />
-                    </Button>
-                  </div>
-                </div>
-              )}
+
+                    <div className='flex items-center justify-center gap-2 py-4'>
+                      <div className='h-px bg-[#18181B33] w-8'></div>
+                      <span className='text-[#18181B33] text-xs'>
+                        Templates
+                      </span>
+                      <div className='h-px bg-[#18181B33] w-8'></div>
+                    </div>
+
+                    <div className='flex items-center justify-center mb-10'>
+                      <Button
+                        type='button'
+                        variant='outline'
+                        className='btn-sm rounded-2xl shadow-md border border-base-300'
+                        href='https://www.timestored.com/data/sample/chickweight.csv'
+                        target='_blank'
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <Icon
+                          icon='heroicons:arrow-down-tray'
+                          width={18}
+                          height={18}
+                        />
+                        Template CSV
+                      </Button>
+                    </div>
+                  </>
+                )}
+              </section>
+
+              <input
+                ref={fileInputRef}
+                type='file'
+                id='file-upload-input'
+                name='files'
+                accept='application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv'
+                onChange={handleFileChange}
+                className='hidden'
+              />
             </div>
 
             <Button