fix: master

package-lock.json

       }
     },
     "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.8.tgz",
-      "integrity": "sha512-YK5G9LaddzGbcucK4c8h5tWFmMPBvRZ/uyWmN1/SbBdIvqGUdWGkJ5BAaccgs6XbzVLsqbPJrBSFwKv3kT9i7w==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
       "dev": true,
       "peer": true,
       "engines": {
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001361",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001361.tgz",
-      "integrity": "sha512-ybhCrjNtkFji1/Wto6SSJKkWk6kZgVQsDq5QI83SafsF6FXv2JB4df9eEdH6g8sdGgqTXrFLjAxqBGgYoU3azQ==",
+      "version": "1.0.30001363",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001363.tgz",
+      "integrity": "sha512-HpQhpzTGGPVMnCjIomjt+jvyUu8vNFo3TaDiZ/RcoTrlOq/5+tC8zHdsbgFB6MxmaY+jCpsH09aD80Bb4Ow3Sg==",
       "dev": true,
       "funding": [
         {
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.176",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.176.tgz",
-      "integrity": "sha512-92JdgyRlcNDwuy75MjuFSb3clt6DGJ2IXSpg0MCjKd3JV9eSmuUAIyWiGAp/EtT0z2D4rqbYqThQLV90maH3Zw==",
+      "version": "1.4.180",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.180.tgz",
+      "integrity": "sha512-7at5ash3FD9U5gPa3/wPr6OdiZd/zBjvDZaaHBpcqFOFUhZiWnb7stkqk8xUFL9H9nk7Yok5vCCNK8wyC/+f8A==",
       "dev": true,
       "peer": true
     },
       }
     },
     "@jridgewell/resolve-uri": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.8.tgz",
-      "integrity": "sha512-YK5G9LaddzGbcucK4c8h5tWFmMPBvRZ/uyWmN1/SbBdIvqGUdWGkJ5BAaccgs6XbzVLsqbPJrBSFwKv3kT9i7w==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
       "dev": true,
       "peer": true
     },
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001361",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001361.tgz",
-      "integrity": "sha512-ybhCrjNtkFji1/Wto6SSJKkWk6kZgVQsDq5QI83SafsF6FXv2JB4df9eEdH6g8sdGgqTXrFLjAxqBGgYoU3azQ==",
+      "version": "1.0.30001363",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001363.tgz",
+      "integrity": "sha512-HpQhpzTGGPVMnCjIomjt+jvyUu8vNFo3TaDiZ/RcoTrlOq/5+tC8zHdsbgFB6MxmaY+jCpsH09aD80Bb4Ow3Sg==",
       "dev": true,
       "peer": true
     },
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.176",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.176.tgz",
-      "integrity": "sha512-92JdgyRlcNDwuy75MjuFSb3clt6DGJ2IXSpg0MCjKd3JV9eSmuUAIyWiGAp/EtT0z2D4rqbYqThQLV90maH3Zw==",
+      "version": "1.4.180",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.180.tgz",
+      "integrity": "sha512-7at5ash3FD9U5gPa3/wPr6OdiZd/zBjvDZaaHBpcqFOFUhZiWnb7stkqk8xUFL9H9nk7Yok5vCCNK8wyC/+f8A==",
       "dev": true,
       "peer": true
     },

resources/js/pages/Purchases/Components/Cart.vue

 <script setup>
+import { ref } from 'vue'
 import { IDRCurrencyFormat } from '@/utils/currencyFormat'
+import AppInputNumber from '@/components/AppInputNumber.vue'
+import AppInputText from '@/components/AppInputText.vue'
 
 defineProps({
   title: String,
-  ppn: {
-    required: true,
-    type: Number,
-  },
   headerTable: {
     required: true,
     type: Array,
   },
   checkedPpn: Boolean,
 })
+
+const editingRows = ref([])
 </script>
 
 <template>
   <DataTable
     responsiveLayout="scroll"
     columnResizeMode="expand"
+    edit-mode="row"
+    data-key="number"
     :value="valueTable"
     :rowHover="true"
     :stripedRows="true"
+    v-model:editing-rows="editingRows"
+    @row-edit-save="$emit('edit', $event)"
   >
     <template #header>
       <h2 class="text-2xl font-bold">{{ title }}</h2>
 
       <div class="field-checkbox flex justify-content-end gap-2">
         <label class="text-sm" for="ppn">
-          Semua produk dikenakan PPN {{ ppn }}%
+          Semua produk dikenakan PPN {{ $page.props.ppn }}%
         </label>
         <input
           type="checkbox"
 
     <Column
       v-for="value in headerTable"
+      :key="value.field"
       :field="value.field"
       :header="value.header"
-      :key="value.field"
     >
       <template #body="{ data, field }">
         <template v-if="field === 'price'">
 
         <template v-else> {{ data[field] }} </template>
       </template>
+
+      <template #editor="{ data, field }">
+        <AppInputNumber
+          v-if="field === 'price'"
+          label="Harga"
+          placeholder="harga"
+          v-model="data[field]"
+        />
+
+        <AppInputText
+          v-if="field === 'qty'"
+          label="Kuantitas"
+          placeholder="kuantitas"
+          type="number"
+          v-model="data[field]"
+        />
+      </template>
     </Column>
 
+    <Column :row-editor="true" />
+
     <Column>
       <template #body="{ index }">
         <Button

resources/js/pages/Purchases/Components/Details.vue

         <div class="col-12">
           <div class="grid">
             <div v-if="price" class="col">
-              <h3 class="text-base">Harga</h3>
+              <h3 class="text-base">Total Harga</h3>
               <span>{{ IDRCurrencyFormat(price) }}</span>
             </div>
           </div>

resources/js/pages/Purchases/Composables/useProductCart.js

 import FormValidationError from '@/utils/FormValidationError'
 import { reactive } from 'vue'
 
-export function useProductCart(form) {
+export function useProductCart(form, initialProducts) {
   const productCart = reactive([])
 
   const productValidation = () => {
     return productPrices.reduce((prev, current) => prev + current, 0)
   }
 
+  const onEditProduct = (event) => {
+    const { newData, index } = event
+
+    productCart[index] = newData
+  }
+
   return {
     productCart,
     onAddProduct,
     onDeleteProduct,
+    onEditProduct,
     onClearProduct,
     totalProductPrice,
   }

resources/js/pages/Purchases/Create.vue

   productCart,
   onAddProduct,
   onDeleteProduct,
+  onEditProduct,
   onClearProduct,
   totalProductPrice,
 } = useProductCart(form)
           <div class="col-12">
             <Cart
               title="Keranjang Produk"
-              :ppn="ppn"
               :value-table="productCart"
               :header-table="cartTable"
               v-model:checked-ppn="form.checkedPpn"
               @delete="onDeleteProduct"
+              @edit="onEditProduct"
             />
           </div>
         </div>

resources/js/vue.js

 import './bootstrap'
-import '../css/app.scss'
 import { createApp, h } from 'vue'
 import { createInertiaApp } from '@inertiajs/inertia-vue3'
 import { InertiaProgress } from '@inertiajs/progress'
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
 
+import 'primeflex/primeflex.css'
 import 'primevue/resources/themes/mdc-light-indigo/theme.css'
 import 'primevue/resources/primevue.min.css'
-import 'primeflex/primeflex.css'
 import 'primeicons/primeicons.css'
+import '../css/app.scss'
 import PrimeVue from 'primevue/config'
 import StyleClass from 'primevue/styleclass'
 import AutoComplete from 'primevue/autocomplete'
 import Card from 'primevue/card'
 import Chart from 'primevue/chart'
 import Column from 'primevue/column'
+import ColumnGroup from 'primevue/columngroup'
 import ConfirmationService from 'primevue/confirmationservice'
 import ConfirmDialog from 'primevue/confirmdialog'
 import DataTable from 'primevue/datatable'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import Password from 'primevue/password'
+import Row from 'primevue/row'
 import TabView from 'primevue/tabview'
 import TabPanel from 'primevue/tabpanel'
 import Tooltip from 'primevue/tooltip'
     ),
   setup({ el, App, props, plugin }) {
     createApp({ render: () => h(App, props) })
+      .mixin({ methods: { route } })
       .use(plugin)
       .use(PrimeVue, {
         ripple: true,
       })
       .use(ConfirmationService)
       .use(DialogService)
-      .mixin({ methods: { route } })
       .directive('styleclass', StyleClass)
       .directive('tooltip', Tooltip)
       .component('AutoComplete', AutoComplete)
       .component('Calendar', Calendar)
       .component('Chart', Chart)
       .component('Column', Column)
+      .component('ColumnGroup', ColumnGroup)
       .component('ConfirmDialog', ConfirmDialog)
       .component('DataTable', DataTable)
       .component('Divider', Divider)
       .component('InputText', InputText)
       .component('Message', Message)
       .component('Password', Password)
+      .component('Row', Row)
       .component('TabView', TabView)
       .component('TabPanel', TabPanel)
       .mount(el)