update purchase order

package-lock.json

@@ -53,7 +53,8 @@
         "fs-extra": "11.2.0",
         "html2canvas": "^1.4.1",
         "input-otp": "1.4.1",
-        "jspdf": "^3.0.1",
+        "jspdf": "^3.0.3",
+        "jspdf-autotable": "^5.0.2",
         "keen-slider": "6.8.6",
         "lucide-react": "^0.544.0",
         "mapbox-gl": "3.9.0",
@@ -83,6 +84,7 @@
         "@iconify/types": "2.0.0",
         "@iconify/utils": "2.2.1",
         "@types/fs-extra": "^11.0.4",
+        "@types/jspdf": "^1.3.3",
         "@types/mapbox-gl": "^3.4.1",
         "@types/negotiator": "^0.6.3",
         "@types/node": "^22.10.2",
@@ -3508,6 +3510,13 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/jspdf": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@types/jspdf/-/jspdf-1.3.3.tgz",
+      "integrity": "sha512-DqwyAKpVuv+7DniCp2Deq1xGvfdnKSNgl9Agun2w6dFvR5UKamiv4VfYUgcypd8S9ojUyARFIlZqBrYrBMQlew==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/linkify-it": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
@@ -3573,6 +3582,12 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -4281,18 +4296,6 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
-    "node_modules/atob": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "license": "(MIT OR Apache-2.0)",
-      "bin": {
-        "atob": "bin/atob.js"
-      },
-      "engines": {
-        "node": ">= 4.5.0"
-      }
-    },
     "node_modules/attr-accept": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
@@ -4510,18 +4513,6 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/btoa": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
-      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
-      "license": "(MIT OR Apache-2.0)",
-      "bin": {
-        "btoa": "bin/btoa.js"
-      },
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
     "node_modules/buffer-crc32": {
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
@@ -6642,6 +6633,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
     "node_modules/fast-shallow-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
@@ -7683,6 +7685,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -8304,14 +8312,13 @@
       }
     },
     "node_modules/jspdf": {
-      "version": "3.0.1",
+      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.3.tgz",
-      "integrity": "sha512-qaGIxqxetdoNnFQQXxTKUD9/Z7AloLaw94fFsOiJMxbfYdBbrBuhWmbzI8TVjrw7s3jBY1PFHofBKMV/wZPapg==",
+      "integrity": "sha512-eURjAyz5iX1H8BOYAfzvdPfIKK53V7mCpBTe7Kb16PaM8JSXEcUQNBQaiWMI8wY5RvNOPj4GccMjTlfwRBd+oQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.26.7",
+        "@babel/runtime": "^7.26.9",
-        "atob": "^2.1.2",
+        "fast-png": "^6.2.0",
-        "btoa": "^1.2.1",
         "fflate": "^0.8.1"
       },
       "optionalDependencies": {
@@ -8321,6 +8328,15 @@
         "html2canvas": "^1.0.0-rc.5"
       }
     },
+    "node_modules/jspdf-autotable": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-5.0.2.tgz",
+      "integrity": "sha512-YNKeB7qmx3pxOLcNeoqAv3qTS7KuvVwkFe5AduCawpop3NOkBUtqDToxNc225MlNecxT4kP2Zy3z/y/yvGdXUQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "jspdf": "^2 || ^3"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -9196,6 +9212,12 @@
         "quansync": "^0.2.7"
       }
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",

package.json

@@ -59,7 +59,8 @@
     "fs-extra": "11.2.0",
     "html2canvas": "^1.4.1",
     "input-otp": "1.4.1",
-    "jspdf": "^3.0.1",
+    "jspdf": "^3.0.3",
+    "jspdf-autotable": "^5.0.2",
     "keen-slider": "6.8.6",
     "lucide-react": "^0.544.0",
     "mapbox-gl": "3.9.0",
@@ -89,6 +90,7 @@
     "@iconify/types": "2.0.0",
     "@iconify/utils": "2.2.1",
     "@types/fs-extra": "^11.0.4",
+    "@types/jspdf": "^1.3.3",
     "@types/mapbox-gl": "^3.4.1",
     "@types/negotiator": "^0.6.3",
     "@types/node": "^22.10.2",

src/services/mutations/purchaseOrder.ts

@@ -26,7 +26,7 @@ export const usePurchaseOrdersMutation = () => {
       return response.data
     },
     onSuccess: () => {
-      toast.success('Purchase Order created successfully!')
+      toast.success('Purchase Order Payment successfully!')
       queryClient.invalidateQueries({ queryKey: ['purchase-orders'] })
     },
     onError: (error: any) => {
@@ -34,5 +34,19 @@ export const usePurchaseOrdersMutation = () => {
     }
   })
 
-  return { createPurchaseOrder, sendPaymentPurchaseOrder }
+  const updateStatus = useMutation({
+    mutationFn: async ({ id, payload }: { id: string; payload: 'approved' | 'rejected' }) => {
+      const response = await api.put(`/purchase-orders/${id}`, { status: payload })
+      return response.data
+    },
+    onSuccess: () => {
+      toast.success('Purchase Order Status successfully!')
+      queryClient.invalidateQueries({ queryKey: ['purchase-orders'] })
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.errors?.[0]?.cause || 'Create failed')
+    }
+  })
+
+  return { createPurchaseOrder, sendPaymentPurchaseOrder, updateStatus }
 }

src/views/apps/purchase/purchase-detail/PurchaseDetailInformation.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React from 'react'
+import React, { useState } from 'react'
 import {
   Card,
   CardHeader,
@@ -14,10 +14,19 @@ import {
   TableRow,
   Box,
   Button,
-  IconButton
+  IconButton,
+  Menu,
+  MenuItem,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  CircularProgress
 } from '@mui/material'
 import Grid from '@mui/material/Grid2'
-import { PurchaseOrder } from '@/types/services/purchaseOrder'
+import { PurchaseOrder, SendPaymentPurchaseOrderRequest } from '@/types/services/purchaseOrder'
+import { usePurchaseOrdersMutation } from '@/services/mutations/purchaseOrder'
 
 interface Props {
   data?: PurchaseOrder
@@ -26,6 +35,88 @@ interface Props {
 const PurchaseDetailInformation = ({ data }: Props) => {
   const purchaseOrder = data
 
+  // State for menu and dialog
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [confirmDialog, setConfirmDialog] = useState<{
+    open: boolean
+    type: 'approve' | 'reject' | null
+    title: string
+    message: string
+  }>({
+    open: false,
+    type: null,
+    title: '',
+    message: ''
+  })
+
+  const { updateStatus } = usePurchaseOrdersMutation()
+
+  const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleMenuClose = () => {
+    setAnchorEl(null)
+  }
+
+  const handleApproveClick = () => {
+    setConfirmDialog({
+      open: true,
+      type: 'approve',
+      title: 'Konfirmasi Persetujuan',
+      message: 'Apakah Anda yakin ingin menyetujui purchase order ini?'
+    })
+    handleMenuClose()
+  }
+
+  const handleRejectClick = () => {
+    setConfirmDialog({
+      open: true,
+      type: 'reject',
+      title: 'Konfirmasi Penolakan',
+      message: 'Apakah Anda yakin ingin menolak purchase order ini?'
+    })
+    handleMenuClose()
+  }
+
+  const handleConfirmAction = async () => {
+    if (!purchaseOrder?.id) return
+
+    setIsSubmitting(true)
+
+    try {
+      const status = confirmDialog.type === 'approve' ? 'approved' : 'rejected'
+
+      updateStatus.mutate({
+        id: purchaseOrder.id,
+        payload: status
+      })
+
+      // Close dialog after successful submission
+      setConfirmDialog({
+        open: false,
+        type: null,
+        title: '',
+        message: ''
+      })
+    } catch (error) {
+      console.error('Error updating status:', error)
+      // Handle error (you might want to show a toast or error message)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleCancelAction = () => {
+    setConfirmDialog({
+      open: false,
+      type: null,
+      title: '',
+      message: ''
+    })
+  }
+
   // Helper functions
   const formatDate = (dateString: string): string => {
     const date = new Date(dateString)
@@ -46,7 +137,8 @@ const PurchaseDetailInformation = ({ data }: Props) => {
       sent: 'Dikirim',
       approved: 'Disetujui',
       received: 'Diterima',
-      cancelled: 'Dibatalkan'
+      cancelled: 'Dibatalkan',
+      rejected: 'Ditolak'
     }
     return statusMap[status] || status
   }
@@ -57,7 +149,8 @@ const PurchaseDetailInformation = ({ data }: Props) => {
       sent: 'warning',
       approved: 'success',
       received: 'info',
-      cancelled: 'error'
+      cancelled: 'error',
+      rejected: 'error'
     }
     return colorMap[status] || 'info'
   }
@@ -66,7 +159,11 @@ const PurchaseDetailInformation = ({ data }: Props) => {
   const totalQuantity = (purchaseOrder?.items ?? []).reduce((sum, item) => sum + (item?.quantity ?? 0), 0)
   const total = (purchaseOrder?.items ?? []).reduce((sum, item) => sum + (item?.amount ?? 0) * item?.quantity, 0)
 
+  // Check if actions should be available (only for certain statuses)
+  const canApproveOrReject = purchaseOrder?.status === 'received'
+
   return (
+    <>
       <Card sx={{ width: '100%' }}>
         <CardHeader
           title={
@@ -81,7 +178,7 @@ const PurchaseDetailInformation = ({ data }: Props) => {
                 <Button startIcon={<i className='tabler-printer' />} variant='outlined' size='small' sx={{ mr: 1 }}>
                   Print
                 </Button>
-              <IconButton>
+                <IconButton onClick={handleMenuClick}>
                   <i className='tabler-dots-vertical' />
                 </IconButton>
               </Box>
@@ -168,6 +265,7 @@ const PurchaseDetailInformation = ({ data }: Props) => {
                   </TableCell>
                   <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
                   <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
+                  <TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
                 </TableRow>
               </TableBody>
             </Table>
@@ -204,6 +302,71 @@ const PurchaseDetailInformation = ({ data }: Props) => {
           </Box>
         </CardContent>
       </Card>
+
+      {/* Menu */}
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleMenuClose}
+        PaperProps={{
+          sx: {
+            minWidth: 160
+          }
+        }}
+      >
+        <MenuItem
+          onClick={handleApproveClick}
+          disabled={!canApproveOrReject}
+          sx={{
+            color: 'success.main',
+            '&:hover': {
+              backgroundColor: 'success.light',
+              color: 'success.dark'
+            }
+          }}
+        >
+          <i className='tabler-check' style={{ marginRight: 8 }} />
+          Disetujui
+        </MenuItem>
+        <MenuItem
+          onClick={handleRejectClick}
+          disabled={!canApproveOrReject}
+          sx={{
+            color: 'error.main',
+            '&:hover': {
+              backgroundColor: 'error.light',
+              color: 'error.dark'
+            }
+          }}
+        >
+          <i className='tabler-x' style={{ marginRight: 8 }} />
+          Ditolak
+        </MenuItem>
+      </Menu>
+
+      {/* Confirmation Dialog */}
+      <Dialog open={confirmDialog.open} onClose={handleCancelAction} maxWidth='sm' fullWidth>
+        <DialogTitle>{confirmDialog.title}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>{confirmDialog.message}</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCancelAction} color='inherit' disabled={isSubmitting}>
+            Batal
+          </Button>
+          <Button
+            onClick={handleConfirmAction}
+            variant='contained'
+            color={confirmDialog.type === 'approve' ? 'success' : 'error'}
+            disabled={isSubmitting}
+            startIcon={isSubmitting ? <CircularProgress size={16} /> : null}
+            autoFocus
+          >
+            {isSubmitting ? 'Memproses...' : confirmDialog.type === 'approve' ? 'Setujui' : 'Tolak'}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
   )
 }