feat(fileUpload): added file upload input + download button

src/app/setup-new-configuration/page.tsx

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import { outfit } from '@/components/FontFamily';
 import SubNavbar from '@/components/navbar/SubNavbar';
 import ButtonFill from '@/components/uiComponents/ButtonFill';
+import ButtonOutline from '@/components/uiComponents/ButtonOutline';
 import CommonModal from '@/components/uiComponents/CommonModal';
 import SetupConfigurationForm from '@/components/wpcasOverView/SetupConfigurationForm';
 import SurveyTable from '@/components/wpcasOverView/SurveyTable';
@@ -18,14 +19,31 @@ const SetupNewSurvey = () => {
       </CommonModal>
       <div className='h-[80vh] w-[58vw]  rounded-sm bg-white px-5'>
         <SubNavbar />
-        <div className='my-4 flex justify-end'>
+        <div className='my-4 flex justify-end gap-3'>
+          <ButtonOutline
+            onClick={() => setIsOpen(true)}
+            classes='border-[#385B8B] text-[#385B8B]'
+          >
+            Download User List
+          </ButtonOutline>
+          <ButtonOutline
+            onClick={() => setIsOpen(true)}
+            classes='border-[#385B8B] text-[#385B8B]'
+          >
+            Download Assesses File Template
+          </ButtonOutline>
           <ButtonFill onClick={() => setIsOpen(true)} classes='bg-[#385B8B]'>
             Setup New Configuration
           </ButtonFill>
         </div>
         <SurveyTable
           userSurveyDate={[
-            { department: '', startDate: new Date(), endDate: new Date() },
+            {
+              department: '',
+              startDate: new Date(),
+              endDate: new Date(),
+              assessesFile: '',
+            },
           ]}
         />
       </div>

src/components/wpcasOverView/SetupConfigurationForm.tsx

@@ -10,10 +10,13 @@ import DatePickerComponent from '@/components/uiComponents/DatePickerComponent';
 import Label from '@/components/uiComponents/Label';
 import SelectTag from '@/components/uiComponents/SelectTag';
 
+import UploadFileInput from './UploadFileInput';
+
 export type SurveyDataType = {
   department: string;
   startDate: Date;
   endDate: Date;
+  assessesFile: File | string;
 };
 
 type PropType = {
@@ -26,6 +29,7 @@ export const getEmptySurveyData = () => {
     department: '',
     startDate: new Date(),
     endDate: new Date(),
+    assessesFile: '',
   };
 };
 
@@ -34,14 +38,16 @@ const initialError = () => {
     department: '',
     startDate: '',
     endDate: '',
+    assessesFile: '',
   };
 };
 
 const SetupConfigurationForm = ({ onClose, data = null }: PropType) => {
   const [formData, setFormData] = useState(data ?? getEmptySurveyData());
   const [error, setError] = useState(initialError());
 
-  const handleChange = (key: string, value: string | Date) => {
+  // will set values and set error to empty string
+  const handleChange = (key: string, value: string | Date | File) => {
     if (key === 'department' && error.department) {
       setError((prev) => {
         return {
@@ -66,6 +72,14 @@ const SetupConfigurationForm = ({ onClose, data = null }: PropType) => {
         };
       });
     }
+    if (key === 'assessesFile' && error.assessesFile) {
+      setError((prev) => {
+        return {
+          ...prev,
+          [key]: '',
+        };
+      });
+    }
     setFormData((prev) => {
       return {
         ...prev,
@@ -74,16 +88,18 @@ const SetupConfigurationForm = ({ onClose, data = null }: PropType) => {
     });
   };
 
+  // will check for all data and set error
   const isValidData = (data: SurveyDataType): boolean => {
     setError(initialError());
+    let flag = true;
     if (!data.department) {
       setError((pre) => {
         return {
           ...pre,
           department: 'department is required!',
         };
       });
-      return false;
+      flag = false;
     }
     if (!data.startDate) {
       setError((pre) => {
@@ -92,7 +108,7 @@ const SetupConfigurationForm = ({ onClose, data = null }: PropType) => {
           startDate: 'start date is required!',
         };
       });
-      return false;
+      flag = false;
     }
     if (!data.endDate) {
       setError((pre) => {
@@ -101,9 +117,18 @@ const SetupConfigurationForm = ({ onClose, data = null }: PropType) => {
           startDate: 'start date is required!',
         };
       });
-      return false;
+      flag = false;
     }
-    return true;
+    if (!data?.assessesFile) {
+      setError((pre) => {
+        return {
+          ...pre,
+          assessesFile: 'assesses file is required!',
+        };
+      });
+      flag = false;
+    }
+    return flag;
   };
 
   const handleCreate = () => {
@@ -135,6 +160,21 @@ const SetupConfigurationForm = ({ onClose, data = null }: PropType) => {
           </div>
           <div></div>
         </div>
+
+        <div className='-mx-3 mb-6 md:flex'>
+          <div className='flex flex-wrap items-center justify-start gap-3 px-3 md:w-full'>
+            <Label text='Upload Assesses file' />
+            <UploadFileInput
+              onChange={(updatedValue) =>
+                handleChange('assessesFile', updatedValue)
+              }
+              value={formData?.assessesFile}
+              errorMessage={error?.assessesFile}
+            />
+          </div>
+          <div></div>
+        </div>
+
         <div className='-mx-3 mb-6 md:flex'>
           <div className='mb-6 px-3 md:mb-0 md:w-1/2'>
             <Label text='Start Date' />

src/components/wpcasOverView/UploadFileInput.tsx

@@ -0,0 +1,72 @@
+import React, { MutableRefObject, useRef } from 'react';
+import { AiOutlineCloudUpload } from 'react-icons/ai';
+
+type PropType = {
+  value: string | File;
+  onChange: (arg: File) => void;
+  errorMessage: string;
+};
+
+const UploadFileInput = ({ value, onChange, errorMessage }: PropType) => {
+  const fileInputRef: MutableRefObject<HTMLInputElement | null> = useRef(null);
+
+  const handleLabelClick = () => {
+    fileInputRef?.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      const selectedFile = e.target.files[0];
+      if (selectedFile) {
+        onChange(selectedFile);
+      }
+    }
+  };
+
+  return (
+    <>
+      <div
+        className={`relative border ${
+          errorMessage ? 'border-red-600' : 'border-[#4ACB5F]'
+        }  min-w-[200px] rounded-md border-solid`}
+      >
+        <label
+          title='Click to upload'
+          className='flex cursor-pointer items-center gap-4 px-4 py-[10px]   before:absolute  '
+          onClick={handleLabelClick}
+        >
+          <div className='relative w-max'>
+            <AiOutlineCloudUpload
+              size={28}
+              className={`${errorMessage ? 'text-red-600' : 'text-[#4ACB5F]'}`}
+            />
+          </div>
+          <div className='relative flex gap-3'>
+            <span
+              className={`relative block text-base font-semibold ${
+                errorMessage ? 'text-red-600' : 'text-[#4ACB5F]'
+              } `}
+            >
+              {value ? 'File Selected' : 'Upload a file'}
+            </span>
+          </div>
+        </label>
+        <input
+          className='hidden'
+          onChange={handleFileChange}
+          ref={fileInputRef}
+          type='file'
+        />
+      </div>
+      {value && typeof value !== 'string' && <span>{value?.name}</span>}
+
+      {errorMessage && (
+        <p className='mt-2 w-full text-sm text-red-600 dark:text-red-500'>
+          {errorMessage}
+        </p>
+      )}
+    </>
+  );
+};
+
+export default UploadFileInput;