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}
+      />
     </>
   );
 };