fix: purchase master

app/Http/Controllers/PurchaseController.php

                     "unit" => $purchase->product->unit,
                 ]
             ),
-            "historyProductPurchase" => Inertia::lazy(
+            "productPurchase" => Inertia::lazy(
                 fn() => PurchaseDetail::historyProductPurchase(
                     request()->only("productNumber", "supplierId")
                 )
                     ->get()
                     ->transform(
                         fn($purchaseDetail) => [
-                            "id" => $purchaseDetail->id,
+                            "number" => $purchaseDetail->product_number,
                             "price" => $purchaseDetail->price,
                             "qty" => $purchaseDetail->qty,
                             "ppn" => $purchaseDetail->purchase->ppn,

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

+<script setup>
+import { watchEffect, watch, computed, inject } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
+import AppInputText from '@/components/AppInputText.vue'
+import AppInputNumber from '@/components/AppInputNumber.vue'
+
+const props = defineProps({
+  productPurchase: Object,
+})
+
+const form = inject('form')
+
+watchEffect(() => {
+  if (props.productPurchase?.number) {
+    form.price = props.productPurchase.price
+
+    form.qty = props.productPurchase.qty
+  } else {
+    form.price = null
+  }
+})
+
+watch(
+  () => form.product,
+  () => {
+    if (form.product?.number) {
+      Inertia.reload({
+        data: {
+          productNumber: form.product.number,
+          supplierId: form.supplier.id,
+        },
+        only: ['productPurchase'],
+      })
+    }
+  }
+)
+
+const productPurchasePrice = computed(() => props.productPurchase?.price)
+
+const productPurchasePpn = computed(() => props.productPurchase?.ppn)
+
+const productPurchaseQty = computed(() => props.productPurchase?.qty)
+</script>
+
+<template>
+  <div class="col-12">
+    <h3 class="text-lg">Riwayat Produk Sebelumnya</h3>
+  </div>
+
+  <div class="col-12 md:col-6">
+    <AppInputNumber
+      disabled
+      class="mb-0"
+      label="Harga "
+      placeholder="harga"
+      v-model="productPurchasePrice"
+    />
+
+    <span v-if="productPurchasePpn" class="text-xs">
+      Harga sudah termasuk PPN {{ ppn }} %
+    </span>
+  </div>
+
+  <div class="col-12 md:col-6">
+    <AppInputText
+      disabled
+      label="Kuantitas"
+      placeholder="kuantitas"
+      type="number"
+      v-model="productPurchaseQty"
+    />
+  </div>
+</template>

resources/js/pages/Purchases/Create.vue

 <script setup>
-import { computed, watch, watchEffect } from 'vue'
-import { Inertia } from '@inertiajs/inertia'
+import { computed, provide } from 'vue'
 import { optionStatus } from './config'
 import { cartTable } from './config'
 import Details from './Components/Details.vue'
 import { useProductCart } from './Composables/useProductCart'
 import { useDialog } from './Composables/useDialog'
 import { useForm } from '@/composables/useForm'
+import HistoryProduct from './Components/HistoryProduct.vue'
 import AppInputText from '@/components/AppInputText.vue'
 import AppInputNumber from '@/components/AppInputNumber.vue'
 import AppDropdown from '@/components/AppDropdown.vue'
     })
 }
 
-watchEffect(() => {
-  if (props.productPurchase?.number) {
-    form.price = props.productPurchase.price
-
-    form.qty = props.productPurchase.qty
-  } else {
-    form.price = null
-  }
-})
-
-watch(
-  () => form.product,
-  () => {
-    if (form.product?.number) {
-      Inertia.reload({
-        data: {
-          productNumber: form.product.number,
-          supplierId: form.supplier.id,
-        },
-        only: ['productPurchase'],
-      })
-    }
-  }
-)
+provide('form', form)
 
 const productUnit = computed(() => form.product?.unit)
 
-const productPurchasePrice = computed(() => props.productPurchase?.price)
-
-const productPurchasePpn = computed(() => props.productPurchase?.ppn)
-
-const productPurchaseQty = computed(() => props.productPurchase?.qty)
-
 const dropdownStatus = computed(() => {
   return optionStatus.filter((val) => val.value != 'success')
 })
 
                   <Divider type="dashed" />
 
-                  <div class="col-12">
-                    <h3 class="text-lg">Riwayat Produk Sebelumnya</h3>
-                  </div>
-
-                  <div class="col-12 md:col-6">
-                    <AppInputNumber
-                      disabled
-                      class="mb-0"
-                      label="Harga "
-                      placeholder="harga"
-                      v-model="productPurchasePrice"
-                    />
-
-                    <span v-if="productPurchasePpn" class="text-xs">
-                      Harga sudah termasuk PPN {{ ppn }} %
-                    </span>
-                  </div>
-
-                  <div class="col-12 md:col-6">
-                    <AppInputText
-                      disabled
-                      label="Kuantitas"
-                      placeholder="kuantitas"
-                      type="number"
-                      v-model="productPurchaseQty"
-                    />
-                  </div>
+                  <HistoryProduct :product-purchase="productPurchase" />
 
                   <Divider type="dashed" />
 

resources/js/pages/Purchases/Edit.vue

 <script setup>
+import { computed } from 'vue'
 import { optionStatus } from './config'
 import { cartTable } from './config'
 import Details from './Components/Details.vue'
 import Cart from './Components/Cart.vue'
-import HistoryProduct from './Components/HistoryProduct.vue'
 import { useProductCart } from './Composables/useProductCart'
-import { onShowDialog } from './Composables/onShowDialog'
+import { useDialog } from './Composables/useDialog'
 import { useForm } from '@/composables/useForm'
+import HistoryProduct from './Components/HistoryProduct.vue'
 import AppInputText from '@/components/AppInputText.vue'
 import AppInputNumber from '@/components/AppInputNumber.vue'
 import AppDropdown from '@/components/AppDropdown.vue'
 import AppAutoComplete from '@/components/AppAutoComplete.vue'
 import DashboardLayout from '@/layouts/Dashboard/DashboardLayout.vue'
+import { provide } from 'vue'
 
 const props = defineProps({
   id: Number,
     default: [],
   },
   purchaseDetail: Array,
-  historyProductPurchase: Object,
+  productPurchase: Object,
 })
 
 const form = useForm({
     })
 }
 
+provide('form', form)
+
+const productUnit = computed(() => form.product?.unit)
+
 const {
   productCart,
   productCartDeleted,
   totalProductPrice,
 } = useProductCart(form, props.purchaseDetail)
 
-const { onShowCreateProduct } = onShowDialog()
+const { onShowCreateProduct } = useDialog()
 </script>
 
 <template>
                       field="name"
                       refresh-data="products"
                       v-model="form.product"
-                      :error="form.errors.products"
+                      :error="form.errors.product"
                       :suggestions="products"
                     >
                       <template #item="slotProps">
                       disabled
                       label="Satuan"
                       placeholder="satuan"
-                      v-model="form.product.unit"
+                      v-model="productUnit"
                     />
                   </div>
 
-                  <HistoryProduct
-                    :product="form.product"
-                    :supplier="form.supplier"
-                  />
+                  <Divider type="dashed" />
+
+                  <HistoryProduct :product-purchase="productPurchase" />
 
                   <Divider type="dashed" />
 
                   <div class="col-12 md:col-6">
                     <AppInputNumber
-                      :disabled="!form.supplier?.id"
+                      :disabled="!form.product?.id"
                       label="Harga"
                       placeholder="harga"
                       v-model="form.price"
 
                   <div class="col-12 md:col-6">
                     <AppInputText
-                      :disabled="!form.supplier?.id"
+                      :disabled="!form.product?.id"
                       label="Kuantitas"
                       placeholder="kuantitas"
                       type="number"