fix: sale and purchase master

app/Http/Controllers/PurchaseController.php

@@ -142,6 +142,7 @@ class PurchaseController extends Controller
             "id" => $purchase->id,
             "number" => $purchase->number,
             "ppn" => Ppn::first()->ppn,
+            "status" => $purchase->status,
             "productNumber" => "PDK" . now()->format("YmdHis"),
             "ppnChecked" => $purchase->ppn ? true : false,
             "supplier" => $purchase->supplier,
@@ -212,6 +213,7 @@ class PurchaseController extends Controller
                 if ($request->status == "success") {
                     $validated = [
                         "purchase_number" => $purchase->number,
+                        "price" => $product["price"],
                         "qty" => $product["qty"],
                         "product_number" => $product["number"],
                     ];

app/Http/Controllers/SalesController.php

@@ -2,15 +2,17 @@
 
 namespace App\Http\Controllers;
 
-use App\Http\Requests\Sales\StoreSaleRequest;
-use App\Http\Requests\Sales\UpdateSaleRequest;
-use App\Models\Customer;
 use App\Models\Ppn;
 use App\Models\Sale;
+use Inertia\Inertia;
+use App\Models\Customer;
+use App\Models\SaleDetail;
 use App\Models\StockProduct;
-use Illuminate\Database\QueryException;
+use App\Services\HelperService;
 use Illuminate\Support\Facades\DB;
-use Inertia\Inertia;
+use Illuminate\Database\QueryException;
+use App\Http\Requests\Sales\StoreSaleRequest;
+use App\Http\Requests\Sales\UpdateSaleRequest;
 
 class SalesController extends Controller
 {
@@ -36,13 +38,13 @@ class SalesController extends Controller
                     fn($sale) => [
                         "id" => $sale->id,
                         "updatedAt" => $sale->updated_at,
-                        "number" => $sale->number,
+                        "name" => $sale->customer->name,
+                        "phone" => $sale->customer->phone,
+                        "email" => $sale->customer->email,
+                        "price" => HelperService::setRupiahFormat(
+                            SaleDetail::totalPrice($sale)
+                        ),
                         "status" => $sale->status,
-                        "price" => $sale->saleDetail->price,
-                        "ppn" => $sale->saleDetail->ppn,
-                        "qty" => $sale->saleDetail->qty,
-                        "productName" => $sale->product->name,
-                        "productNumber" => $sale->product->number,
                     ]
                 ),
         ]);
@@ -58,9 +60,6 @@ class SalesController extends Controller
         return inertia("Sales/Create", [
             "number" => "PJN" . now()->format("YmdHis"),
             "ppn" => Ppn::first()->ppn,
-            "productNumber" => Inertia::lazy(
-                fn() => "PDK" . now()->format("YmdHis")
-            ),
             "customers" => Inertia::lazy(
                 fn() => Customer::filter([
                     "search" => request("customer"),
@@ -75,6 +74,7 @@ class SalesController extends Controller
                         fn($stockProduct) => [
                             "number" => $stockProduct->product_number,
                             "name" => $stockProduct->product->name,
+                            "price" => $stockProduct->price,
                             "qty" => $stockProduct->qty,
                             "unit" => $stockProduct->product->unit,
                         ]
@@ -91,20 +91,43 @@ class SalesController extends Controller
      */
     public function store(StoreSaleRequest $request)
     {
+        dd($request->validated());
+
         DB::beginTransaction();
 
         try {
+            $ppn = Ppn::first()->ppn;
+
             $validated = $request
                 ->safe()
                 ->merge([
                     "user_id" => auth()->user()->id,
-                    "ppn" => Ppn::first()->ppn,
+                    "ppn" => $request->ppn ? $ppn : 0,
                 ])
                 ->all();
 
             $sale = Sale::create($validated);
 
-            $sale->saleDetail()->create($validated);
+            foreach ($request->products as $product) {
+                $validated = [
+                    "product_number" => $product["number"],
+                    "price" => $product["price"],
+                    "qty" => $product["qty"],
+                ];
+
+                $sale->saleDetail()->create($validated);
+
+                if ($request->status == "success") {
+                    $validated = [
+                        "sale_number" => $sale->number,
+                        "price" => $product["price"],
+                        "qty" => $product["qty"],
+                        "product_number" => $product["number"],
+                    ];
+
+                    StockProduct::create($validated);
+                }
+            }
 
             DB::commit();
 
@@ -136,16 +159,38 @@ class SalesController extends Controller
     public function edit(Sale $sale)
     {
         return inertia("Sales/Edit", [
-            "sale" => [
-                "id" => $sale->id,
-                "number" => $sale->number,
-                "status" => $sale->status,
-                "price" => $sale->saleDetail->price,
-                "qty" => $sale->saleDetail->qty,
-                "ppn" => $sale->saleDetail->ppn,
-                "customer" => $sale->customer,
-                "product" => $sale->product,
-            ],
+            "id" => $sale->id,
+            "number" => $sale->number,
+            "ppn" => Ppn::first()->ppn,
+            "status" => $sale->status,
+            "ppnChecked" => $sale->ppn ? true : false,
+            "customer" => $sale->customer,
+            "stockProducts" => Inertia::lazy(
+                fn() => StockProduct::filter([
+                    "search" => request("stockProduct"),
+                ])
+                    ->get()
+                    ->transform(
+                        fn($stockProduct) => [
+                            "number" => $stockProduct->product_number,
+                            "name" => $stockProduct->product->name,
+                            "price" => $stockProduct->price,
+                            "qty" => $stockProduct->qty,
+                            "unit" => $stockProduct->product->unit,
+                            "profit" => $stockProduct->product->profit,
+                        ]
+                    )
+            ),
+            "saleDetail" => $sale->saleDetail->transform(
+                fn($sale) => [
+                    "id" => $sale->id,
+                    "number" => $sale->product_number,
+                    "name" => $sale->product->name,
+                    "price" => $sale->price,
+                    "qty" => $sale->qty,
+                    "unit" => $sale->product->unit,
+                ]
+            ),
         ]);
     }
 
@@ -159,19 +204,54 @@ class SalesController extends Controller
     public function update(UpdateSaleRequest $request, Sale $sale)
     {
         dd($sale);
+
         DB::beginTransaction();
 
         try {
-            $sale->update($request->validated());
+            $ppn = Ppn::first()->ppn;
+
+            $validated = $request
+                ->safe()
+                ->merge([
+                    "ppn" => $request->ppn ? $ppn : 0,
+                ])
+                ->all();
+
+            $sale->update($validated);
+
+            foreach ($request->products as $product) {
+                $validated = [
+                    "product_number" => $product["number"],
+                    "price" => $product["price"],
+                    "qty" => $product["qty"],
+                ];
+
+                if (!empty($product["label"])) {
+                    if ($product["label"] == "add") {
+                        $sale->saleDetail()->create($validated);
+                    }
+
+                    if ($product["label"] == "edit") {
+                        $sale->saleDetail
+                            ->find($product["id"])
+                            ->update($validated);
+                    }
+
+                    if ($product["label"] == "delete") {
+                        $sale->saleDetail->find($product["id"])->delete();
+                    }
+                }
 
-            $sale->saleDetail()->update($request->safe()->except("status"));
+                if ($request->status == "success") {
+                    $validated = [
+                        "sale_number" => $sale->number,
+                        "price" => $product["price"],
+                        "qty" => $product["qty"],
+                        "product_number" => $product["number"],
+                    ];
 
-            if ($request->status == "success") {
-                StockProduct::create([
-                    "sale_number" => $sale->number,
-                    "qty" => -$request->qty,
-                    "product_number" => $sale->saleDetail->product_number,
-                ]);
+                    StockProduct::create($validated);
+                }
             }
 
             DB::commit();

app/Http/Requests/Purchase/StorePurchaseRequest.php

@@ -26,9 +26,9 @@ class StorePurchaseRequest extends FormRequest
         return [
             "number" => "required|string|unique:sales,number",
             "status" => "required|string",
+            "ppn" => "required|boolean",
             "supplier_id" => "required|numeric",
             "products" => "required",
-            "ppn" => "required|boolean",
         ];
     }
 }

app/Http/Requests/Sales/StoreSaleRequest.php

@@ -26,9 +26,9 @@ class StoreSaleRequest extends FormRequest
         return [
             "number" => "required|string|unique:sales,number",
             "status" => "required|string",
+            "ppn" => "required|boolean",
             "customer_id" => "required|numeric",
             "products" => "required",
-            "ppn" => "required|boolean",
         ];
     }
 }

app/Http/Requests/Sales/UpdateSaleRequest.php

@@ -25,8 +25,8 @@ class UpdateSaleRequest extends FormRequest
     {
         return [
             "status" => "required|string",
-            "price" => "required|numeric",
-            "qty" => "required|numeric",
+            "products" => "required",
+            "ppn" => "required|boolean",
         ];
     }
 }

app/Models/Sale.php

@@ -24,7 +24,7 @@ class Sale extends Model
 
     public function saleDetail()
     {
-        return $this->hasOne(SaleDetail::class, "sale_number", "number");
+        return $this->hasMany(SaleDetail::class, "sale_number", "number");
     }
 
     public function customer()

app/Models/StockProduct.php

@@ -2,6 +2,8 @@
 
 namespace App\Models;
 
+use App\Services\HelperService;
+use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 
@@ -12,10 +14,20 @@ class StockProduct extends Model
     protected $fillable = [
         "purchase_number",
         "sale_number",
+        "price",
         "qty",
         "product_number",
     ];
 
+    protected function price(): Attribute
+    {
+        $ppn = Purchase::where("number", $this->purchase_number)->first()->ppn;
+
+        return Attribute::make(
+            get: fn($value) => HelperService::addPPN($value, $ppn)
+        );
+    }
+
     public function product()
     {
         return $this->belongsTo(Product::class, "product_number", "number");

app/Services/HelperService.php

@@ -35,4 +35,9 @@ class HelperService
             }
         }
     }
+
+    public static function addPPN(int $price, int $ppn)
+    {
+        return $price + $price * ($ppn / 100);
+    }
 }

app/Services/PurchaseService.php

@@ -14,7 +14,7 @@ class PurchaseService
             $ppn = Ppn::first()->ppn;
 
             return $purchase->ppn
-                ? $purchaseDetail->price + $purchaseDetail->price * ($ppn / 100)
+                ? HelperService::addPPN($purchaseDetail->price, $ppn)
                 : $purchaseDetail->price;
         });
     }

app/Services/SaleService.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\Ppn;
+use App\Models\Sale;
+use App\Services\HelperService;
+
+class SaleService
+{
+    public static function totalPrice(Sale $sale)
+    {
+        return $sale->saleDetail->sum(function ($saleDetail) use ($sale) {
+            $ppn = Ppn::first()->ppn;
+
+            return $sale->ppn
+                ? HelperService::addPPN($saleDetail->price, $ppn)
+                : $saleDetail->price;
+        });
+    }
+}

database/migrations/2022_06_16_092657_create_stock_products_table.php

@@ -22,6 +22,7 @@ return new class extends Migration {
                 ->string("sale_number")
                 ->nullable()
                 ->default(null);
+            $table->unsignedInteger("price");
             $table->integer("qty");
             $table->string("product_number");
             $table

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

@@ -61,6 +61,7 @@ defineProps({
         </div>
 
         <Divider type="dashed" />
+
         <div class="col-12">
           <div class="grid">
             <div v-if="price" class="col">

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

@@ -48,10 +48,16 @@ export function useProductCart(form, initialProducts = []) {
     productCart.splice(index, 1)
   }
 
-  const onClearProduct = () => {
+  const onClearProductCart = () => {
     productCart.splice(0)
   }
 
+  const onClearProductCartDelete = () => {
+    productCartDeleted.splice(0)
+
+    console.info('this is running')
+  }
+
   const totalProductPrice = () => {
     const productPrices = productCart.map((product) => {
       if (form.checkedPpn) {
@@ -76,10 +82,11 @@ export function useProductCart(form, initialProducts = []) {
   return {
     productCart,
     productCartDeleted,
+    onClearProductCart,
+    onClearProductCartDelete,
     onAddProduct,
     onDeleteProduct,
     onEditProduct,
-    onClearProduct,
     totalProductPrice,
   }
 }

resources/js/pages/Purchases/Create.vue

@@ -11,6 +11,7 @@ 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 { computed } from '@vue/reactivity'
 
 const props = defineProps({
   number: String,
@@ -53,6 +54,10 @@ const onSubmit = () => {
     })
 }
 
+const dropdownStatus = computed(() => {
+  return optionStatus.filter((val) => val.value != 'success')
+})
+
 const {
   productCart,
   onAddProduct,
@@ -74,14 +79,14 @@ const { onShowCreateProduct, onShowCreateSupplier } = onShowDialog()
         <div class="grid">
           <div class="col-12">
             <Card>
-              <template #title> Pembeli </template>
+              <template #title> Penjual </template>
               <template #content>
                 <div class="grid">
                   <div class="col-12 md:col-6">
                     <AppDropdown
                       label="Status"
                       placeholder="status"
-                      :options="optionStatus"
+                      :options="dropdownStatus"
                       :error="form.errors.status"
                       v-model="form.status"
                     />
@@ -102,7 +107,7 @@ const { onShowCreateProduct, onShowCreateSupplier } = onShowDialog()
                         <template v-if="slotProps.item">
                           <div class="flex flex-column">
                             <span>{{ slotProps.item.name }}</span>
-                            <span>{{ slotProps.item.npwp }}</span>
+                            <span>{{ slotProps.item.phone }}</span>
                           </div>
                         </template>
                       </template>
@@ -137,7 +142,7 @@ const { onShowCreateProduct, onShowCreateSupplier } = onShowDialog()
                       field="name"
                       refresh-data="products"
                       v-model="form.product"
-                      :error="form.errors.product"
+                      :error="form.errors.products"
                       :suggestions="products"
                     >
                       <template #item="slotProps">
@@ -161,7 +166,7 @@ const { onShowCreateProduct, onShowCreateSupplier } = onShowDialog()
                     </AppAutoComplete>
                   </div>
 
-                  <div v-if="form.product?.unit" class="col-12 md:col-6">
+                  <div v-if="form.product?.number" class="col-12 md:col-6">
                     <AppInputText
                       disabled
                       label="Satuan"

resources/js/pages/Purchases/Edit.vue

@@ -16,6 +16,7 @@ const props = defineProps({
   id: Number,
   number: String,
   ppn: Number,
+  status: String,
   ppnChecked: Boolean,
   supplier: Object,
   products: {
@@ -26,7 +27,7 @@ const props = defineProps({
 })
 
 const form = useForm({
-  status: 'pending',
+  status: props.status,
   price: null,
   qty: null,
   supplier: props.supplier,
@@ -42,12 +43,15 @@ const onSubmit = () => {
       ppn: data.checkedPpn,
       products: [...productCart, ...productCartDeleted],
     }))
-    .put(route('purchases.update', props.id))
+    .put(route('purchases.update', props.id), {
+      onSuccess: () => onClearProductCartDelete(),
+    })
 }
 
 const {
   productCart,
   productCartDeleted,
+  onClearProductCartDelete,
   onAddProduct,
   onDeleteProduct,
   onEditProduct,
@@ -66,7 +70,7 @@ const { onShowCreateProduct } = onShowDialog()
         <div class="grid">
           <div class="col-12">
             <Card>
-              <template #title> Pembeli </template>
+              <template #title> Penjual </template>
               <template #content>
                 <div class="grid">
                   <div class="col-12 md:col-6">
@@ -106,7 +110,7 @@ const { onShowCreateProduct } = onShowDialog()
                       field="name"
                       refresh-data="products"
                       v-model="form.product"
-                      :error="form.errors.product"
+                      :error="form.errors.products"
                       :suggestions="products"
                     >
                       <template #item="slotProps">
@@ -130,7 +134,7 @@ const { onShowCreateProduct } = onShowDialog()
                     </AppAutoComplete>
                   </div>
 
-                  <div v-if="form.product?.unit" class="col-12 md:col-6">
+                  <div v-if="form.product?.number" class="col-12 md:col-6">
                     <AppInputText
                       disabled
                       label="Satuan"

resources/js/pages/Purchases/Index.vue

@@ -58,7 +58,7 @@ defineProps({
           <AppButtonLink
             icon="pi pi-pencil"
             class="p-button-icon-only p-button-rounded p-button-text"
-            v-tooltip.bottom="'Ubah Penjualan'"
+            v-tooltip.bottom="'Ubah Pembelian'"
             :href="route('purchases.edit', data.id)"
           />
         </template>

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

@@ -1,38 +1,43 @@
 <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,
   },
-  valueTable: {
+  productCart: {
     required: true,
     type: Array,
   },
   checkedPpn: Boolean,
 })
+
+const editingRows = ref([])
 </script>
 
 <template>
   <DataTable
     responsiveLayout="scroll"
     columnResizeMode="expand"
-    :value="valueTable"
+    edit-mode="row"
+    data-key="number"
+    :value="productCart"
     :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"
@@ -45,9 +50,9 @@ defineProps({
 
     <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'">
@@ -56,8 +61,27 @@ defineProps({
 
         <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/Sales/Components/Details.vue

@@ -23,12 +23,12 @@ defineProps({
         <div class="col-12">
           <div class="grid">
             <div class="col">
-              <h3 class="text-base">Nomor Penjualan</h3>
+              <h3 class="text-base">Nomor Pembelian</h3>
               <span>{{ number }}</span>
             </div>
 
             <div class="col">
-              <h3 class="text-base">Status Penjualan</h3>
+              <h3 class="text-base">Status Pembelian</h3>
               <span>{{ status }}</span>
             </div>
 
@@ -61,10 +61,11 @@ defineProps({
         </div>
 
         <Divider type="dashed" />
+
         <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/Sales/Composables/useProductCart.js

@@ -1,8 +1,10 @@
-import FormValidationError from '@/utils/FormValidationError'
 import { reactive } from 'vue'
+import FormValidationError from '@/utils/FormValidationError'
+
+export function useProductCart(form, initialProducts = []) {
+  const productCart = reactive(initialProducts)
 
-export function useProductCart(form) {
-  const productCart = reactive([])
+  const productCartDeleted = reactive([])
 
   const productValidation = () => {
     const existProduct = productCart.find(
@@ -21,6 +23,7 @@ export function useProductCart(form) {
       productValidation()
 
       productCart.push({
+        label: 'add',
         number: form.product.number,
         name: form.product.name,
         price: form.price,
@@ -35,6 +38,13 @@ export function useProductCart(form) {
   }
 
   const onDeleteProduct = (index) => {
+    if (productCart[index]?.id) {
+      productCartDeleted.push({
+        ...productCart[index],
+        label: 'delete',
+      })
+    }
+
     productCart.splice(index, 1)
   }
 
@@ -54,10 +64,21 @@ export function useProductCart(form) {
     return productPrices.reduce((prev, current) => prev + current, 0)
   }
 
+  const onEditProduct = (event) => {
+    const { newData, index } = event
+
+    productCart[index] = {
+      ...newData,
+      label: 'edit',
+    }
+  }
+
   return {
     productCart,
+    productCartDeleted,
     onAddProduct,
     onDeleteProduct,
+    onEditProduct,
     onClearProduct,
     totalProductPrice,
   }

resources/js/pages/Sales/Create.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { Inertia } from '@inertiajs/inertia'
 import { optionStatus } from './config'
 import { cartTable } from './config'
 import Details from './Components/Details.vue'
@@ -45,13 +44,11 @@ const onSubmit = () => {
       customer_id: data.customer.id,
       products: productCart,
     }))
-    .post(route('purchases.store'), {
+    .post(route('sales.store'), {
       onSuccess: () => {
         form.reset()
 
         onClearProduct()
-
-        Inertia.reload({ only: ['number'] })
       },
     })
 }
@@ -60,6 +57,7 @@ const {
   productCart,
   onAddProduct,
   onDeleteProduct,
+  onEditProduct,
   onClearProduct,
   totalProductPrice,
 } = useProductCart(form)
@@ -76,7 +74,7 @@ const { onShowCustomerCreate } = onShowDialog()
         <div class="grid">
           <div class="col-12">
             <Card>
-              <template #title> Penjual </template>
+              <template #title> Pembeli </template>
               <template #content>
                 <div class="grid">
                   <div class="col-12 md:col-6">
@@ -104,7 +102,7 @@ const { onShowCustomerCreate } = onShowDialog()
                         <template v-if="slotProps.item">
                           <div class="flex flex-column">
                             <span>{{ slotProps.item.name }}</span>
-                            <span>{{ slotProps.item.npwp }}</span>
+                            <span>{{ slotProps.item.phone }}</span>
                           </div>
                         </template>
                       </template>
@@ -139,7 +137,7 @@ const { onShowCustomerCreate } = onShowDialog()
                       field="name"
                       refresh-data="stockProducts"
                       v-model="form.product"
-                      :error="form.errors.product"
+                      :error="form.errors.products"
                       :suggestions="stockProducts"
                     >
                       <template #item="slotProps">
@@ -150,35 +148,52 @@ const { onShowCustomerCreate } = onShowDialog()
                           </div>
                         </template>
                       </template>
-
-                      <template #empty>
-                        <span
-                          class="cursor-pointer"
-                          style="color: var(--primary-color)"
-                          @click="onShowCreateProduct"
-                        >
-                          Tambah Produk
-                        </span>
-                      </template>
                     </AppAutoComplete>
                   </div>
 
-                  <div v-if="form.product?.unit" class="col-12 md:col-6">
-                    <AppInputText
-                      disabled
-                      label="Satuan"
-                      placeholder="satuan"
-                      v-model="form.product.unit"
-                    />
-                  </div>
+                  <template v-if="form.product?.number">
+                    <div class="col-12 md:col-6">
+                      <AppInputText
+                        disabled
+                        label="Satuan"
+                        placeholder="satuan"
+                        v-model="form.product.unit"
+                      />
+                    </div>
+
+                    <div class="col-12 md:col-6">
+                      <AppInputNumber
+                        disabled
+                        label="Harga Beli"
+                        placeholder="harga beli produk"
+                        v-model="form.product.price"
+                      />
+                    </div>
+
+                    <div class="col-12 md:col-6">
+                      <AppInputText
+                        disabled
+                        label="Stok Tersedia"
+                        placeholder="stok tersedia"
+                        type="number"
+                        v-model="form.product.qty"
+                      />
+                    </div>
+                  </template>
+
+                  <Divider type="dashed" />
 
                   <div class="col-12 md:col-6">
                     <AppInputNumber
+                      class="m-0"
                       :disabled="!form.customer?.id"
-                      label="Harga"
-                      placeholder="harga"
+                      label="Harga Jual"
+                      placeholder="harga jual"
                       v-model="form.price"
                     />
+                    <span v-if="form.product?.number" class="text-xs">
+                      Sudah termasuk profit 30%
+                    </span>
                   </div>
 
                   <div class="col-12 md:col-6">
@@ -211,11 +226,11 @@ const { onShowCustomerCreate } = onShowDialog()
           <div class="col-12">
             <Cart
               title="Keranjang Produk"
-              :ppn="ppn"
-              :value-table="productCart"
+              :product-cart="productCart"
               :header-table="cartTable"
               v-model:checked-ppn="form.checkedPpn"
               @delete="onDeleteProduct"
+              @edit="onEditProduct"
             />
           </div>
         </div>
@@ -223,7 +238,7 @@ const { onShowCustomerCreate } = onShowDialog()
 
       <div class="col-12 md:col-4">
         <Details
-          title="Detail Pembelian"
+          title="Detail Penjualan"
           message="Pastikan semua produk sudah benar"
           :number="number"
           :status="form.status"

resources/js/pages/Sales/Edit.vue

@@ -1,90 +1,224 @@
 <script setup>
-import { useForm } from '@/composables/useForm'
 import { optionStatus } from './config'
-import AppDropdown from '@/components/AppDropdown.vue'
-import AppInputNumber from '@/components/AppInputNumber.vue'
-import AppInputText from '@/components/AppInputText.vue'
+import { cartTable } from './config'
 import Details from './Components/Details.vue'
+import Cart from './Components/Cart.vue'
+import { useProductCart } from './Composables/useProductCart'
+import { useForm } from '@/composables/useForm'
+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'
 
 const props = defineProps({
-  sale: Object,
+  id: Number,
+  number: String,
+  ppn: Number,
+  status: String,
+  ppnChecked: Boolean,
+  customer: Object,
+  stockProducts: {
+    type: Array,
+    default: [],
+  },
+  saleDetail: Array,
 })
 
 const form = useForm({
-  status: props.sale.status,
-  price: props.sale.price,
-  qty: props.sale.qty,
+  status: props.status,
+  price: null,
+  qty: null,
+  customer: props.customer,
+  product: null,
+  ppn: props.ppn,
+  checkedPpn: props.ppnChecked,
 })
 
 const onSubmit = () => {
-  form.put(route('sales.update', props.sale.id))
+  form
+    .transform((data) => ({
+      status: data.status,
+      ppn: data.checkedPpn,
+      products: [...productCart, ...productCartDeleted],
+    }))
+    .post(route('sales.store'), {
+      onSuccess: () => {
+        form.reset()
+
+        onClearProduct()
+      },
+    })
 }
+
+const {
+  productCart,
+  productCartDeleted,
+  onAddProduct,
+  onDeleteProduct,
+  onEditProduct,
+  totalProductPrice,
+} = useProductCart(form, props.saleDetail)
 </script>
 
 <template>
   <DashboardLayout title="Ubah Penjualan">
+    <DynamicDialog />
+
     <div class="grid">
-      <div class="col-12 lg:col-8">
-        <Card>
-          <template #title> Ubah Penjualan </template>
-          <template #content>
-            <div class="grid">
-              <div class="col-12 md:col-6">
-                <AppDropdown
-                  label="Status"
-                  placeholder="status"
-                  :options="optionStatus"
-                  :error="form.errors.status"
-                  v-model="form.status"
-                />
-              </div>
-
-              <div class="col-12 md:col-6">
-                <AppInputNumber
-                  label="Harga"
-                  placeholder="harga"
-                  :error="form.errors.price"
-                  v-model="form.price"
-                />
-              </div>
-
-              <div class="col-12 md:col-6">
-                <AppInputText
-                  label="Kuantitas"
-                  placeholder="kuantitas"
-                  type="number"
-                  :error="form.errors.qty"
-                  v-model="form.qty"
-                />
-              </div>
-            </div>
-          </template>
-
-          <template #footer>
-            <div class="flex flex-column md:flex-row justify-content-end">
-              <Button
-                label="Simpan"
-                icon="pi pi-check"
-                class="p-button-outlined"
-                :disabled="form.processing"
-                @click="onSubmit"
-              />
-            </div>
-          </template>
-        </Card>
+      <div class="col-12 md:col-8">
+        <div class="grid">
+          <div class="col-12">
+            <Card>
+              <template #title> Pembeli </template>
+              <template #content>
+                <div class="grid">
+                  <div class="col-12 md:col-6">
+                    <AppDropdown
+                      label="Status"
+                      placeholder="status"
+                      :options="optionStatus"
+                      :error="form.errors.status"
+                      v-model="form.status"
+                    />
+                  </div>
+
+                  <div class="col-12 md:col-6">
+                    <AppInputText
+                      disabled
+                      label="Customer"
+                      placeholder="customer"
+                      v-model="customer.name"
+                    />
+                  </div>
+                </div>
+              </template>
+            </Card>
+          </div>
+
+          <div class="col-12">
+            <Card>
+              <template #title>Produk</template>
+              <template #content>
+                <div class="grid">
+                  <div class="col-12 md:col-6">
+                    <AppAutoComplete
+                      :disabled="!form.customer?.id"
+                      empty
+                      label="Produk"
+                      placeholder="produk"
+                      field="name"
+                      refresh-data="stockProducts"
+                      v-model="form.product"
+                      :error="form.errors.products"
+                      :suggestions="stockProducts"
+                    >
+                      <template #item="slotProps">
+                        <template v-if="slotProps.item">
+                          <div class="flex flex-column">
+                            <span>{{ slotProps.item.number }}</span>
+                            <span>{{ slotProps.item.name }}</span>
+                          </div>
+                        </template>
+                      </template>
+                    </AppAutoComplete>
+                  </div>
+
+                  <div class="col-12 md:col-6">
+                    <AppInputText
+                      disabled
+                      label="Satuan"
+                      placeholder="satuan"
+                      :value="form.product?.unit"
+                    />
+                  </div>
+
+                  <div class="col-12 md:col-6">
+                    <AppInputNumber
+                      disabled
+                      label="Harga Beli"
+                      placeholder="harga beli produk"
+                      :value="form.product?.price"
+                    />
+                  </div>
+
+                  <div class="col-12 md:col-6">
+                    <AppInputText
+                      disabled
+                      label="Stok Tersedia"
+                      placeholder="stok tersedia"
+                      type="number"
+                      :value="form.product?.qty"
+                    />
+                  </div>
+
+                  <Divider type="dashed" />
+
+                  <div class="col-12 md:col-6">
+                    <AppInputNumber
+                      :disabled="!form.customer?.id"
+                      label="Harga Jual"
+                      placeholder="harga jual"
+                      v-model="form.price"
+                    />
+                  </div>
+
+                  <div class="col-12 md:col-6">
+                    <AppInputText
+                      :disabled="!form.customer?.id"
+                      label="Kuantitas"
+                      placeholder="kuantitas"
+                      type="number"
+                      v-model="form.qty"
+                    />
+                  </div>
+                </div>
+              </template>
+              <template #footer>
+                <div class="flex flex-column md:flex-row justify-content-end">
+                  <Button
+                    label="Tambah Produk"
+                    icon="pi pi-check"
+                    class="p-button-outlined"
+                    :disabled="
+                      !form.price || !form.qty || !form.product?.number
+                    "
+                    @click="onAddProduct"
+                  />
+                </div>
+              </template>
+            </Card>
+          </div>
+
+          <div class="col-12">
+            <Cart
+              title="Keranjang Produk"
+              :product-cart="productCart"
+              :header-table="cartTable"
+              v-model:checked-ppn="form.checkedPpn"
+              @delete="onDeleteProduct"
+              @edit="onEditProduct"
+            />
+          </div>
+        </div>
       </div>
 
-      <div class="col-12 lg:col-4">
+      <div class="col-12 md:col-4">
         <Details
           title="Detail Penjualan"
-          :number="sale.number"
-          :price="form.price"
-          :qty="form.qty"
-          :ppn="sale.ppn"
+          message="Pastikan semua produk sudah benar"
+          :number="number"
           :status="form.status"
-          :person="sale.customer"
-          :product="sale.product"
+          :person="form.customer"
+          :product="form.product"
+          :price="totalProductPrice()"
+          :disabled="
+            form.processing ||
+            !form.status ||
+            !form.customer?.id ||
+            productCart.length === 0
+          "
+          @submit="onSubmit"
         />
       </div>
     </div>

resources/js/pages/Sales/config.js

@@ -13,6 +13,7 @@ export const indexTable = [
   { field: 'updatedAt', header: 'Tanggal' },
   { field: 'name', header: 'Nama Pelanggan' },
   { field: 'phone', header: 'No HP Pelanggan' },
+  { field: 'email', header: 'Email Pelanggan' },
   { field: 'price', header: 'Total Harga' },
   { field: 'status', header: 'Status' },
 ]