fix(FE-169-177): Allow Drafted Marketing to be rejected

2026-05-20 13:32:00 +00:00 · 2025-11-21 13:33:40 +07:00
parent 70521330e4
commit b7c3b9313c
4 changed files with 57 additions and 55 deletions
@@ -213,7 +213,7 @@ const DateInput = ({

      <div
        className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded transition-all duration-200 flex items-center border',
+          'input h-12 bg-inherit px-4 py-2 text-base font-normal leading-6 w-full rounded transition-all duration-200 flex items-center border',
          {
            'border-error': finalIsError,
            'border-success': externalValid && !finalIsError,
@@ -183,14 +183,18 @@ const MarketingTable = () => {
  );

  const hasApprovable = selectedRowsData.some(
-    (row) => row.latest_approval.step_number === 1
+    (row) =>
+      row.latest_approval.step_number === 1 &&
+      row.latest_approval.action !== 'REJECTED'
  );
  const hasRejectable = selectedRowsData.some(
-    (row) => row.latest_approval.step_number === 2
+    (row) =>
+      row.latest_approval.step_number === 1 &&
+      row.latest_approval.action !== 'REJECTED'
  );

-  const disableApprove = !hasApprovable || hasRejectable;
-  // const disableReject = !hasRejectable || hasApprovable;
+  const disableApprove = !hasApprovable;
+  const disableReject = !hasRejectable;

  const idsToProcess =
    approveAction === 'APPROVED'
@@ -204,15 +208,9 @@ const MarketingTable = () => {
  const approveMarketingHandler = async (notes: string) => {
    let idsToProcess: number[] = [];

-    if (approveAction === 'APPROVED') {
    idsToProcess = selectedRowsData
      .filter((row) => row.latest_approval.step_number === 1)
      .map((row) => row.id);
-    } else if (approveAction === 'REJECTED') {
-      idsToProcess = selectedRowsData
-        .filter((row) => row.latest_approval.step_number === 2)
-        .map((row) => row.id);
-    }

    if (idsToProcess.length === 0) {
      toast.error(`Tidak ada data yang valid untuk di ${approveAction}.`);
@@ -263,8 +261,8 @@ const MarketingTable = () => {
  });

  const getRowCanSelect = (row: Row<Marketing>): boolean => {
-    const step = row.original.latest_approval?.step_number;
-    return step === 1;
+    const approval = row.original.latest_approval;
+    return approval?.step_number === 1 && approval?.action !== 'REJECTED';
  };

  return (
@@ -298,7 +296,7 @@ const MarketingTable = () => {
              Approve
            </Button>

-            {/* <Button
+            <Button
              color='error'
              onClick={rejectClickHandler}
              className='justify-start text-sm'
@@ -306,7 +304,7 @@ const MarketingTable = () => {
            >
              <Icon icon='material-symbols:close' width={24} height={24} />
              Reject
-            </Button> */}
+            </Button>
          </div>
        </div>
        <Table
@@ -71,10 +71,10 @@ const MarketingDetail = ({
    confirmationModal.openModal();
  };

-  // const rejectClickHandler = () => {
-  //   setApprovalAction('REJECTED');
-  //   confirmationModal.openModal();
-  // };
+  const rejectClickHandler = () => {
+    setApprovalAction('REJECTED');
+    confirmationModal.openModal();
+  };

  const deliveryClickHandler = () => {
    deliveryModal.openModal();
@@ -87,10 +87,11 @@ const MarketingDetail = ({
  const confirmationModalDeleteClickHandler = async () => {
    setIsLoading(true);
    const res = await MarketingApi.delete(initialValues?.id as number);
-    setIsLoading(false);
    deleteModal.closeModal();
+    router.push('/marketing');
    toast.success(res?.message as string);
    refresh?.();
+    setIsLoading(false);
  };

  const confirmationModalApproveClickHandler = async (notes: string) => {
@@ -131,24 +132,30 @@ const MarketingDetail = ({
          <ApprovalSteps approvals={approvals} />
        )}
        <div className='flex-row flex gap-3'>
-          {initialValues?.latest_approval?.step_number != 3 && (
+          {initialValues?.latest_approval?.step_number == 1 && (
            <>
              <Button
                color='success'
                onClick={approveClickHandler}
-                disabled={initialValues?.latest_approval?.step_number != 1}
+                disabled={
+                  initialValues?.latest_approval?.step_number == 1 &&
+                  initialValues?.latest_approval?.action == 'REJECTED'
+                }
              >
                <Icon icon='mdi:check' width={24} height={24} />
                Approve
              </Button>
-              {/* <Button
+              <Button
                color='error'
                onClick={rejectClickHandler}
-                disabled={initialValues?.latest_approval?.step_number != 2}
+                disabled={
+                  initialValues?.latest_approval?.step_number == 1 &&
+                  initialValues?.latest_approval?.action == 'REJECTED'
+                }
              >
                <Icon icon='mdi:close' width={24} height={24} />
                Reject
-              </Button> */}
+              </Button>
            </>
          )}
          {initialValues?.latest_approval?.step_number == 2 && (
@@ -162,7 +162,6 @@ const MarketingForm = ({
    useState<SalesOrderProductFormValues | null>(null);
  const [selectedDeliveryProduct, setSelectedDeliveryProduct] =
    useState<DeliveryOrderProductFormValues | null>(null);
-
  const [deliveryOrderValues, setDeliveryOrderValues] = useState<
    DeliveryOrderProductFormValues[]
  >(
@@ -174,7 +173,7 @@ const MarketingForm = ({
    )
  );

-  // Repeater Props
+  // ================== REPEATER ==================
  const addSOModal = useModal();
  const addDOModal = useModal();
  const [rowSOSelection, setRowSOSelection] = useState<Record<string, boolean>>(
@@ -190,12 +189,13 @@ const MarketingForm = ({
    parseInt(item)
  );

-  // End Repeater Props
+  // ================== FETCH OPTIONS ==================
  const {
    options: customerOptions,
    isLoadingOptions: isLoadingCustomerOptions,
  } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');

+  // ================== SETUP FORMIK ==================
  const formikInitialValues = useMemo<
    SalesOrderFormValues & DeliveryOrderFormValues
  >(() => {
@@ -222,7 +222,6 @@ const MarketingForm = ({
      ),
    };
  }, [initialValues]);
-
  const formik = useFormik<SalesOrderFormValues & DeliveryOrderFormValues>({
    enableReinitialize: true,
    initialValues: formikInitialValues,
@@ -296,7 +295,6 @@ const MarketingForm = ({
      afterSubmit?.();
    },
  });
-
  const grandTotal = useMemo(() => {
    return formik.values.sales_order.reduce(
      (total, product) =>
@@ -305,6 +303,7 @@ const MarketingForm = ({
    );
  }, [formik.values.sales_order]);

+  // ================== FORM REPEATER HANDLER ==================
  const createMarketingHandler = async (values: CreateSalesOrderPayload) => {
    setIsLoading(true);
    console.log(values);
@@ -334,7 +333,6 @@ const MarketingForm = ({
    }
    setIsLoading(false);
  };
-
  const createDeliveryHandler = async (values: CreateDeliveryOrderPayload) => {
    setIsLoading(true);
    console.log(initialValues?.id);
@@ -350,9 +348,7 @@ const MarketingForm = ({
          )
        ) ?? []
      );
-      router.push(
-        `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
-      );
+      router.push(`/marketing/detail?marketingId=${initialValues?.id}`);
    }
    if (isResponseError(createDeliveryRes)) {
      console.log(createDeliveryRes);
@@ -360,7 +356,6 @@ const MarketingForm = ({
    }
    setIsLoading(false);
  };
-
  const updateDeliveryHandler = async (values: UpdateDeliveryOrderPayload) => {
    setIsLoading(true);
    console.log(initialValues?.id);
@@ -388,6 +383,7 @@ const MarketingForm = ({
    setIsLoading(false);
  };

+  // ================== MARKETING HANDLER ==================
  const deleteMarketingHandler = async () => {
    setIsLoading(true);
    console.log(initialValues?.id);
@@ -404,9 +400,8 @@ const MarketingForm = ({
    }
    setIsLoading(false);
    deleteModal.closeModal();
-    router.push('/marketing/sales-orders');
+    router.push('/marketing');
  };
-
  const handleChangeCustomer = useCallback(
    (val: OptionType | OptionType[] | null) => {
      formik.setFieldValue('customer_id', (val as OptionType)?.value);
@@ -414,8 +409,11 @@ const MarketingForm = ({
    },
    [formik]
  );
+  const handleDelete = useCallback(() => {
+    deleteModal.openModal();
+  }, [deleteModal]);

-  // Repeater Handle
+  // ================== SALES ORDER HANDLER ==================
  const handleDeleteSO = useCallback(
    (id: number) => {
      const currentProducts = formik.values.sales_order;
@@ -436,9 +434,6 @@ const MarketingForm = ({
    );
    setRowSOSelection({});
  }, [formik, selectedRowSOIds]);
-  const handleDelete = useCallback(() => {
-    deleteModal.openModal();
-  }, [deleteModal]);
  const handleAddSOClick = useCallback(() => {
    setSelectedMarketingProduct(null);
    addSOModal.openModal();
@@ -458,6 +453,7 @@ const MarketingForm = ({
    [formik, addSOModal]
  );

+  // ================== DELIVERY ORDER HANDLER ==================
  const handleDeleteDO = useCallback(
    (id: number) => {
      const currentProducts = formik.values.delivery_order;
@@ -482,12 +478,10 @@ const MarketingForm = ({

    setRowDOSelection({});
  }, [formik, selectedRowDOIds]);
-
  const handleAddDOClick = useCallback(() => {
    setSelectedDeliveryProduct(null);
    addDOModal.openModal();
  }, [addDOModal]);
-
  const handleAddSubmitDO = useCallback(
    async (values: DeliveryOrderProductFormValues) => {
      const newValues = {
@@ -526,7 +520,6 @@ const MarketingForm = ({
    },
    [formik, addDOModal]
  );
-  // End Repeater Handle

  const memoSalesOrder = formik.values.sales_order;

@@ -545,6 +538,7 @@ const MarketingForm = ({
          title={`${formType == 'add' || formType == 'add_deliver' ? 'Tambah' : 'Edit'} ${formType === 'add_deliver' || formType === 'edit_deliver' ? 'Delivery' : 'Sales'} Order`}
          backUrl='/marketing'
        />
+        {/* Input Cutomer And Date  */}
        <Card
          title='Informasi Order'
          className={{
@@ -580,6 +574,8 @@ const MarketingForm = ({
            />
          </div>
        </Card>
+
+        {/* Input Table Repeater Sales Order */}
        {(formType == 'add' || formType == 'edit') && (
          <Card
            title='Informasi Produk'
@@ -587,9 +583,6 @@ const MarketingForm = ({
              wrapper: 'bg-white w-full',
            }}
          >
-            {/* <div className='text-blue-500'>{JSON.stringify(initialValues)}</div>
-          <div className='text-green-500'>{JSON.stringify(formik.values)}</div>
-          <div className='text-red-500'>{JSON.stringify(formik.errors)}</div> */}
            <MemoizedSalesOrderProductTable
              formType={formType}
              data={memoSalesOrder}
@@ -602,6 +595,8 @@ const MarketingForm = ({
            />
          </Card>
        )}
+
+        {/* Input Table Repeater Delivery Order */}
        {(formType == 'add_deliver' || formType == 'edit_deliver') &&
          initialValues?.sales_order &&
          initialValues?.sales_order.length > 0 && (
@@ -611,11 +606,6 @@ const MarketingForm = ({
                wrapper: 'bg-white w-full',
              }}
            >
-              {/* {JSON.stringify(memoSalesOrder)} */}
-              {/* <small>{JSON.stringify(memoDeliveryOrder)}</small> */}
-              {/* <small className='block text-error'>
-                {JSON.stringify(formik.errors)}
-              </small> */}
              <MemoizedDeliveryOrderProductTable
                formType={formType}
                data={deliveryOrderValues}
@@ -632,6 +622,7 @@ const MarketingForm = ({
            </Card>
          )}

+        {/* Input Notes */}
        <div className='grid grid-cols-2 gap-3'>
          <TextArea
            required
@@ -652,6 +643,8 @@ const MarketingForm = ({
            </span>
          </div>
        </div>
+
+        {/* Form Actions */}
        <div className='flex flex-row items-start justify-center gap-2 mt-4'>
          <Button type='reset' color='warning' disabled={formik.isSubmitting}>
            Reset
@@ -665,6 +658,8 @@ const MarketingForm = ({
          </Button>
        </div>
      </form>
+
+      {/* Actions button */}
      {formType == 'edit' && (
        <div className='flex flex-row justify-start'>
          <Button
@@ -678,6 +673,8 @@ const MarketingForm = ({
          </Button>
        </div>
      )}
+
+      {/* Modals */}
      <Modal
        ref={addSOModal.ref}
        closeOnBackdrop