Merge branch 'fix/production' into 'development'

[FIX/FE] Production

See merge request mbugroup/lti-web-client!460

src/components/pages/production/project-flock/ProjectFlockTable.tsx

@@ -11,7 +11,6 @@ import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import Table from '@/components/Table';
-import Dropdown from '@/components/Dropdown';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { cn, formatDate } from '@/lib/helper';
 import { AreaApi, KandangApi, LocationApi } from '@/services/api/master-data';
@@ -44,6 +43,7 @@ import {
 import Modal from '@/components/Modal';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
 import ButtonFilter from '@/components/helper/ButtonFilter';
+import NumberInput from '@/components/input/NumberInput';
 
 const RowOptionsMenu = ({
   props,
@@ -211,8 +211,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
   );
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
-  const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
+
-    useState(false);
   const {
     isChickinApproveModalOpen,
     isChickinApproveLoading,
@@ -327,14 +326,6 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
     []
   );
 
-  const periodOptions = useMemo(
-    () => [
-      { value: '1', label: 'Periode 1' },
-      { value: '2', label: 'Periode 2' },
-    ],
-    []
-  );
-
   // ===== FILTER HELPERS =====
   const areaValue = useMemo(() => {
     if (!formik.values.area_id) return null;
@@ -393,13 +384,6 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
     );
   }, [formik.values.category, categoryOptions]);
 
-  const periodValue = useMemo(() => {
-    if (!formik.values.period) return null;
-    return (
-      periodOptions.find((opt) => opt.value === formik.values.period) || null
-    );
-  }, [formik.values.period, periodOptions]);
-
   // ===== FILTER DEPENDENCY HANDLERS =====
   const handleFilterAreaChange = (area: OptionType | null) => {
     const areaId = area?.value ? String(area.value) : undefined;
@@ -813,14 +797,6 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
     []
   );
 
-  const exportToExcelHandler = async () => {
-    setIsLoadingExportingToExcel(true);
-
-    toast.error('Not implemented yet!');
-
-    setIsLoadingExportingToExcel(false);
-  };
-
   const bulkApproveClickHandler = () => {
     setApprovalAction('APPROVED');
     confirmModal.openModal();
@@ -1020,51 +996,6 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
                 onClick={handleFilterModalOpen}
                 className='px-3 py-2.5'
               />
-
-              <Dropdown
-                align='end'
-                direction='bottom'
-                className={{
-                  content:
-                    'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
-                }}
-                trigger={
-                  <Button
-                    variant='outline'
-                    color='none'
-                    className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
-                  >
-                    <div className='flex flex-row items-center gap-1.5'>
-                      <Icon
-                        icon='heroicons:cloud-arrow-down'
-                        width={20}
-                        height={20}
-                      />
-
-                      <span>Export</span>
-
-                      <div className='w-px self-stretch bg-base-content/10' />
-
-                      <Icon
-                        icon='heroicons:chevron-down'
-                        width={14}
-                        height={14}
-                      />
-                    </div>
-                  </Button>
-                }
-              >
-                <Button
-                  variant='ghost'
-                  color='none'
-                  onClick={exportToExcelHandler}
-                  isLoading={isLoadingExportingToExcel}
-                  className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
-                >
-                  <Icon icon='heroicons:table-cells' width={20} height={20} />
-                  Export to Excel
-                </Button>
-              </Dropdown>
             </div>
           </div>
 
@@ -1393,18 +1324,14 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
               isClearable={true}
             />
 
-            <SelectInputRadio
+            <NumberInput
               label='Periode'
-              placeholder='Pilih Periode'
+              name='period'
-              options={periodOptions}
+              placeholder='Masukkan Periode'
-              value={periodValue}
+              value={formik.values.period ?? ''}
-              onChange={(val) => {
+              onChange={formik.handleChange}
-                if (!Array.isArray(val)) {
+              onBlur={formik.handleBlur}
-                  formik.setFieldValue('period', val?.value || null);
-                }
-              }}
               className={{ wrapper: 'w-full' }}
-              isClearable
             />
           </div>
 

src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx

@@ -223,6 +223,8 @@ const TransferToLayingFormModal = () => {
     },
   });
 
+  const { flockSource: formikFlockSource } = formik.values;
+
   const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
   const [selectedFlockSourceRawData, setSelectedFlockSourceRawData] = useState<
@@ -455,13 +457,13 @@ const TransferToLayingFormModal = () => {
 
   useEffect(() => {
     if (isResponseSuccess(flockSourceRawData)) {
-      const selectedFlockSourceRawData = flockSourceRawData.data.find(
+      const currentSelectedFlockSourceRawData = flockSourceRawData.data.find(
         (item) => item.id === formik.values.flockSource?.value
       );
 
-      setSelectedFlockSourceRawData(selectedFlockSourceRawData);
+      setSelectedFlockSourceRawData(currentSelectedFlockSourceRawData);
     }
-  }, [flockSourceRawData]);
+  }, [flockSourceRawData, formikFlockSource]);
 
   useEffect(() => {
     formik.setFieldValue('totalQuantity', totalTransferedChicken);
@@ -625,6 +627,7 @@ const TransferToLayingFormModal = () => {
                           >
                             <div className='flex flex-row items-center gap-3'>
                               <input
+                                id={`flock-source-kandang-${item.project_flock_kandang_id}`}
                                 type='radio'
                                 name='flockSourceKandang'
                                 value={item.project_flock_kandang_id}
@@ -637,13 +640,14 @@ const TransferToLayingFormModal = () => {
                               />
 
                               <label
+                                htmlFor={`flock-source-kandang-${item.project_flock_kandang_id}`}
                                 className={cn('text-sm text-base-content/50', {
                                   'cursor-pointer': isAvailable,
                                   'cursor-not-allowed opacity-50': !isAvailable,
                                 })}
                               >
                                 {item.kandang_name}{' '}
-                                <span className='text-base-content/20'>{`(Max: ${item.available_qty})`}</span>
+                                <span className='text-base-content/20'>{`(Max: ${item.available_qty ?? '-'})`}</span>
                               </label>
                             </div>