feat(FE): Add success modal and state management for ProjectFlock

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

@@ -33,6 +33,9 @@ import RequirePermission from '@/components/helper/RequirePermission';
 import StatusBadge from '@/components/helper/StatusBadge';
 import PopoverButton from '@/components/popover/PopoverButton';
 import PopoverContent from '@/components/popover/PopoverContent';
+import ProjectFlockConfirmationModal from './ProjectFlockConfirmationModal';
+import { useProjectFlockStore } from '@/stores/project-flock/project-flock.store';
+import { ProjectFlockFormValues } from './form/ProjectFlockForm.schema';
 
 const RowOptionsMenu = ({
   props,
@@ -137,6 +140,15 @@ const RowOptionsMenu = ({
 };
 
 const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
+  const isSuccess = useProjectFlockStore((s) => s.isSuccess);
+  const setIsSuccess = useProjectFlockStore((s) => s.setIsSuccess);
+  const createdProjectFlock = useProjectFlockStore(
+    (s) => s.createdProjectFlock
+  );
+  const setCreatedProjectFlock = useProjectFlockStore(
+    (s) => s.setCreatedProjectFlock
+  );
+
   const {
     state: tableFilterState,
     updateFilter,
@@ -180,6 +192,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
   const [sorting, setSorting] = useState<SortingState>([]);
   const deleteModal = useModal();
   const confirmModal = useModal();
+  const successModal = useModal();
   const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
     'APPROVED'
   );
@@ -275,6 +288,64 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
     refreshProjectFlocks();
   }, [refresh]);
 
+  useEffect(() => {
+    if (isSuccess) {
+      successModal.openModal();
+    }
+  }, [isSuccess, successModal]);
+
+  const handleSuccessModalClose = () => {
+    successModal.closeModal();
+    setIsSuccess(false);
+    setCreatedProjectFlock(null);
+  };
+
+  const projectFlockFormValues = useMemo(() => {
+    if (!createdProjectFlock) return undefined;
+
+    return {
+      flock: {
+        value: 0,
+        label: createdProjectFlock.flock_name || '',
+      },
+      flock_name: createdProjectFlock.flock_name || '',
+      area: {
+        value: createdProjectFlock.area_id,
+        label: createdProjectFlock.area?.name || '',
+      },
+      area_id: createdProjectFlock.area_id,
+      category_option: {
+        value: createdProjectFlock.category,
+        label: createdProjectFlock.category,
+      },
+      category: createdProjectFlock.category,
+      production_standard: {
+        value: createdProjectFlock.production_standard_id,
+        label: createdProjectFlock.production_standard?.name || '',
+      },
+      production_standard_id: createdProjectFlock.production_standard_id,
+      location: {
+        value: createdProjectFlock.location_id,
+        label: createdProjectFlock.location?.name || '',
+      },
+      location_id: createdProjectFlock.location_id,
+      kandang_ids: createdProjectFlock.kandangs?.map((k) => k.id) || [],
+      project_budgets:
+        createdProjectFlock.project_budgets?.map((budget) => ({
+          nonstock: budget.nonstock
+            ? {
+                value: budget.nonstock_id,
+                label: budget.nonstock.name || '',
+              }
+            : null,
+          nonstock_id: budget.nonstock_id,
+          qty: budget.qty,
+          price: budget.price,
+          total_price: budget.qty * budget.price,
+        })) || [],
+    } as ProjectFlockFormValues;
+  }, [createdProjectFlock]);
+
   // ====== MEMO ======
   const selectedSingleRow: ProjectFlock | null | undefined = useMemo(() => {
     return selectedRowIds.length === 1
@@ -873,6 +944,16 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
           isLoading: isApproveLoading,
         }}
       />
+
+      <ProjectFlockConfirmationModal
+        ref={successModal.ref}
+        type='success'
+        text='Data Berhasil Ditambahkan'
+        subtitleText='Data project flock telah berhasil disimpan.'
+        projectFlockForm={projectFlockFormValues}
+        onClose={handleSuccessModalClose}
+        secondaryButton={undefined}
+      />
     </>
   );
 };

src/components/pages/production/project-flock/form/ProjectFlockForm.tsx

@@ -52,7 +52,7 @@ import Table from '@/components/Table';
 import { ColumnDef } from '@tanstack/react-table';
 import StatusBadge from '@/components/helper/StatusBadge';
 import { getUniqueFormikErrors } from '@/lib/formik-helper';
-import ProjectFlockConfirmationModal from '../ProjectFlockConfirmationModal';
+import { useProjectFlockStore } from '@/stores/project-flock/project-flock.store';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -213,6 +213,10 @@ const ProjectFlockForm = ({
 }: ProjectFlockFormProps) => {
   // State
   const router = useRouter();
+  const setIsSuccess = useProjectFlockStore((s) => s.setIsSuccess);
+  const setCreatedProjectFlock = useProjectFlockStore(
+    (s) => s.setCreatedProjectFlock
+  );
 
   const [formStep, setFormStep] = useState<'form' | 'confirmation'>('form');
 
@@ -239,7 +243,6 @@ const ProjectFlockForm = ({
   const subscribeValidate = useUiStore((s) => s.subscribeValidate);
   const setIsValid = useUiStore((s) => s.setIsValid);
 
-  const successModal = useModal();
   const deleteModal = useModal();
 
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
@@ -262,6 +265,8 @@ const ProjectFlockForm = ({
     loadMore: loadMoreFlock,
   } = useSelect(FlockApi.basePath, 'id', 'name', '', {
     project_category: selectedCategory,
+    location_id: selectedLocation,
+    area_id: selectedArea,
   });
 
   const {
@@ -431,7 +436,9 @@ const ProjectFlockForm = ({
     if (isResponseSuccess(createProjectFlockRes)) {
       toast.success(createProjectFlockRes?.message as string);
       handleReset();
-      successModal.openModal();
+      setCreatedProjectFlock(createProjectFlockRes?.data ?? null);
+      setIsSuccess(true);
+      router.push('/production/project-flock');
     }
     if (isResponseError(createProjectFlockRes)) {
       setProjectFlockFormErrorMessage(createProjectFlockRes?.message as string);
@@ -449,7 +456,9 @@ const ProjectFlockForm = ({
     if (isResponseSuccess(updateProjectFlockRes)) {
       toast.success(updateProjectFlockRes?.message as string);
       handleReset();
-      successModal.openModal();
+      setCreatedProjectFlock(updateProjectFlockRes?.data ?? null);
+      setIsSuccess(true);
+      router.push('/production/project-flock');
     }
     if (isResponseError(updateProjectFlockRes)) {
       setProjectFlockFormErrorMessage(updateProjectFlockRes?.message as string);
@@ -1388,19 +1397,6 @@ const ProjectFlockForm = ({
         </div>
       </form>
 
-      <ProjectFlockConfirmationModal
-        ref={successModal.ref}
-        type='success'
-        text='Data Berhasil Ditambahkan'
-        subtitleText='Data project flock telah berhasil disimpan.'
-        projectFlockForm={formikLastValues}
-        onClose={() => {
-          router.push('/production/project-flock');
-          setFormikLastValues(undefined);
-        }}
-        secondaryButton={undefined}
-      />
-
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'