diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index e5dbbfb9..50c5b584 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -141,6 +141,7 @@ const PurchaseOrderStaffApprovalForm = ({
 
       if (type === 'add') {
         const createPayload: CreateStaffApprovalRequestPayload = {
+          action: 'APPROVED',
           notes: values.notes || '',
           items: purchaseItems.map((purchaseItem, idx) => {
             const formItem = values.items?.[idx];
@@ -163,6 +164,7 @@ const PurchaseOrderStaffApprovalForm = ({
         await createStaffApprovalHandler(createPayload);
       } else if (type === 'edit') {
         const updatePayload: UpdateStaffApprovalRequestPayload = {
+          action: 'APPROVED',
           notes: values.notes || null,
           items: purchaseItems.map((purchaseItem, idx) => {
             const formItem = values.items?.[idx];
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 82f389c1..993c84c3 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -23,6 +23,7 @@ import PurchaseOrderInvoice from '@/components/pages/purchase/order/PurchaseOrde
 import Card from '@/components/Card';
 import {
   CreateManagerApprovalRequestPayload,
+  CreateStaffApprovalRequestPayload,
   Purchase,
   PurchaseItem,
 } from '@/types/api/purchase/purchase';
@@ -78,6 +79,7 @@ const PurchaseOrderDetail = ({
   const searchParams = useSearchParams();
   const confirmationModalWithNotes = useModal();
   const staffApprovalModal = useModal();
+  const staffRejectionModal = useModal();
   const acceptApprovalModal = useModal();
   const editModal = useModal();
   const penerimaanBarangModal = useModal();
@@ -172,6 +174,18 @@ const PurchaseOrderDetail = ({
     }
   };
 
+  const handleRejectionClick = () => {
+    if (!approvalStep) return;
+
+    switch (approvalStep) {
+      case 1:
+        staffRejectionModal.openModal();
+        break;
+      default:
+        break;
+    }
+  };
+
   useMemo(() => {
     if (!initialValues?.approval) return false;
 
@@ -216,6 +230,32 @@ const PurchaseOrderDetail = ({
   }, [purchaseOrderItems]);
 
   // ===== SUBMISSION HANDLER =====
+  const createStaffApprovalHandler = useCallback(
+    async (payload: CreateStaffApprovalRequestPayload) => {
+      const purchaseRequestId = searchParams.get('purchaseId')
+        ? parseInt(searchParams.get('purchaseId')!)
+        : initialValues?.id || 1;
+
+      if (!purchaseRequestId) {
+        toast.error('Purchase Request ID is required');
+        return;
+      }
+
+      const res = await PurchaseApi.staffApproval.create(
+        purchaseRequestId,
+        payload
+      );
+
+      if (isResponseError(res)) {
+        toast.error(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      refreshApprovals();
+    },
+    [initialValues?.id, searchParams, refreshApprovals]
+  );
+
   const createManagerApprovalHandler = useCallback(
     async (payload: CreateManagerApprovalRequestPayload) => {
       const purchaseRequestId = searchParams.get('purchaseId')
@@ -541,7 +581,12 @@ const PurchaseOrderDetail = ({
               Approve
             </Button>
 
-            <Button variant='outline' color='error' className='w-full sm:w-fit'>
+            <Button
+              variant='outline'
+              color='error'
+              className='w-full sm:w-fit'
+              onClick={handleRejectionClick}
+            >
               <Icon icon='material-symbols:close' width={24} height={24} />
               Reject
             </Button>
@@ -934,6 +979,33 @@ const PurchaseOrderDetail = ({
         />
       </Modal>
 
+      {/* Staff Rejection Modal */}
+      <ConfirmationModalWithNotes
+        ref={staffRejectionModal.ref}
+        type='error'
+        text='Apakah Anda yakin ingin menolak (reject) permintaan pembelian ini?'
+        placeholder='(Opsional) Masukkan alasan penolakan...'
+        rows={4}
+        closeOnBackdrop
+        primaryButton={{
+          text: 'Ya, Tolak',
+          color: 'error',
+          onClick: async (notes) => {
+            const payload: CreateStaffApprovalRequestPayload = {
+              action: 'REJECTED',
+              notes: notes || null,
+              items: [],
+            };
+
+            await createStaffApprovalHandler(payload);
+            staffRejectionModal.closeModal();
+          },
+        }}
+        secondaryButton={{
+          text: 'Batal',
+        }}
+      />
+
       {/* Delete Confirmation Modal */}
       <ConfirmationModal
         ref={deleteModal.ref}
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 17059ad9..866ebf76 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -79,6 +79,7 @@ export type CreatePurchaseRequestPayload = {
 };
 
 export type CreateStaffApprovalRequestPayload = {
+  action: 'APPROVED' | 'REJECTED';
   notes?: string | null;
   items: {
     product_id: number;
@@ -90,6 +91,7 @@ export type CreateStaffApprovalRequestPayload = {
 };
 
 export type UpdateStaffApprovalRequestPayload = {
+  action: 'APPROVED' | 'REJECTED';
   notes?: string | null;
   items: {
     purchase_item_id: number;