fix: purchase master

app/Http/Controllers/PurchaseController.php

@@ -5,6 +5,7 @@ namespace App\Http\Controllers;
 use App\Http\Requests\Purchase\StorePurchaseRequest;
 use App\Http\Requests\Purchase\UpdatePurchaseRequest;
 use App\Models\Ppn;
+use App\Models\Price;
 use App\Models\Product;
 use App\Models\Purchase;
 use App\Models\StockProduct;
@@ -36,13 +37,11 @@ class PurchaseController extends Controller
                 ->through(fn($purchase) => [
                     'id' => $purchase->id,
                     'updatedAt' => $purchase->updated_at,
-                    'number' => $purchase->number,
-                    'status' => $purchase->status,
-                    'price' => $purchase->purchaseDetail->price,
-                    'ppn' => $purchase->purchaseDetail->ppn,
-                    'qty' => $purchase->purchaseDetail->qty,
-                    'productName' => $purchase->product->name,
-                    'productNumber' => $purchase->product->number
+                    'email' => $purchase->supplier->email,
+                    'name' => $purchase->supplier->name,
+                    'phone' => $purchase->supplier->phone,
+                    'price' => $purchase->totalPrice,
+                    'status' => $purchase->status
                 ])
         ]);
     }
@@ -82,14 +81,32 @@ class PurchaseController extends Controller
         DB::beginTransaction();
 
         try {
+            $ppn = Ppn::first()->getRawOriginal('ppn');
+
             $validated = $request->safe()->merge([
-                'user_id' => auth()->user()->id,
-                'ppn' => Ppn::first()->getRawOriginal('ppn')
+                'user_id' => auth()->user()->id
             ])->all();
 
             $purchase = Purchase::create($validated);
 
-            $purchase->purchaseDetail()->create($validated);
+            foreach ($request->products as $product) {
+                $validated = $request->safe()->merge([
+                    'product_number' => $product['number'],
+                    'name' => $product['name'],
+                    'price' => $product['price'],
+                    'qty' => $product['qty'],
+                    'ppn' => $ppn
+                ])->all();
+
+                $purchase->purchaseDetail()->create($validated);
+
+                $validated = $request->safe()->merge([
+                    'product_number' => $product['number'],
+                    'price' => $product['price'] + $product['price'] * ($ppn / 100)
+                ])->all();
+
+                Price::create($validated);
+            }
 
             DB::commit();
 

app/Http/Requests/Purchase/StorePurchaseRequest.php

@@ -26,10 +26,8 @@ class StorePurchaseRequest extends FormRequest
         return [
             'number' => 'required|string|unique:sales,number',
             'status' => 'required|string',
-            'price' => 'required|numeric',
-            'qty' => 'required|numeric',
             'supplier_id' => 'required|numeric',
-            'product_number' => 'required|string'
+            'products' => 'required'
         ];
     }
 }

app/Models/Purchase.php

@@ -27,7 +27,7 @@ class Purchase extends Model
 
     public function purchaseDetail()
     {
-        return $this->hasOne(PurchaseDetail::class, 'purchase_number', 'number');
+        return $this->hasMany(PurchaseDetail::class, 'purchase_number', 'number');
     }
 
     public function product()
@@ -51,9 +51,16 @@ class Purchase extends Model
     {
         $query->when($filters['search'] ?? null, function ($query, $search) {
             $query->where(function ($query) use ($search) {
-                $query->where('number', 'like', '%' . $search . '%')
+                $query->where('name', 'like', '%' . $search . '%')
+                    ->orWhere('phone', 'like', '%' . $search . '%')
+                    ->orWhere('email', 'like', '%' . $search . '%')
                     ->orWhere('status', 'like', '%' . $search . '%');
             });
         });
     }
+
+    public function totalPrice()
+    {
+        return $this->purchaseDetail();
+    }
 }

designs/diagrams/database.puml

@@ -122,7 +122,7 @@ Customer ||--|{ Sale
 Customer ||--|| Price
 Sale ||--|| SaleDetail
 Sale ||--|| Price
-Purchase ||--|| PurchaseDetail
+Purchase }|--|| PurchaseDetail
 Purchase ||--|| Price
 Purchase ||--|{ StockProduct
 SaleDetail ||--|{ Product

designs/diagrams/database/Database.svg

@@ -20,14 +20,14 @@ link Customer to Sale--><g id="link_Customer_Sale"><path codeLine="120" d="M171.
 link Customer to Price--><g id="link_Customer_Price"><path codeLine="121" d="M127.01,154.51 C81.44,287.23 6,578.11 142.68,757 C182.72,809.4 250.84,842.97 302.95,862.36 " fill="none" id="Customer-Price" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="307.1648" x2="304.406" y1="859.626" y2="867.1352"/><line style="stroke:#181818;stroke-width:1.0;" x1="304.3488" x2="301.59" y1="858.5914" y2="866.1006"/><line style="stroke:#181818;stroke-width:1.0;" x1="302.0307" x2="309.54" y1="862.0012" y2="864.76"/><line style="stroke:#181818;stroke-width:1.0;" x1="124.3429" x2="131.9041" y1="150.0141" y2="152.6271"/><line style="stroke:#181818;stroke-width:1.0;" x1="123.363" x2="130.9243" y1="152.8496" y2="155.4626"/><line style="stroke:#181818;stroke-width:1.0;" x1="126.817" x2="129.43" y1="155.1012" y2="147.54"/></g><!--MD5=[1b8181cc673ea47d6cea814c6d86a94d]
 link Sale to SaleDetail--><g id="link_Sale_SaleDetail"><path codeLine="122" d="M203.68,363.39 C203.68,378.07 203.68,393.56 203.68,408.5 " fill="none" id="Sale-SaleDetail" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="207.68" x2="199.68" y1="411.79" y2="411.79"/><line style="stroke:#181818;stroke-width:1.0;" x1="207.68" x2="199.68" y1="408.79" y2="408.79"/><line style="stroke:#181818;stroke-width:1.0;" x1="203.68" x2="203.68" y1="407.79" y2="415.79"/><line style="stroke:#181818;stroke-width:1.0;" x1="199.68" x2="207.68" y1="360.15" y2="360.15"/><line style="stroke:#181818;stroke-width:1.0;" x1="199.68" x2="207.68" y1="363.15" y2="363.15"/><line style="stroke:#181818;stroke-width:1.0;" x1="203.68" x2="203.68" y1="364.15" y2="356.15"/></g><!--MD5=[fd58fb4015992d940e1d5ff8549f8c35]
 link Sale to Price--><g id="link_Sale_Price"><path codeLine="123" d="M148.25,358.24 C136.93,376.07 126.66,395.93 120.68,416 C101.28,481.17 98.05,504.88 120.68,569 C156.96,671.77 242.55,765.67 304.36,823.7 " fill="none" id="Sale-Price" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="309.3239" x2="303.8665" y1="822.8565" y2="828.7061"/><line style="stroke:#181818;stroke-width:1.0;" x1="307.1304" x2="301.673" y1="820.81" y2="826.6596"/><line style="stroke:#181818;stroke-width:1.0;" x1="303.6705" x2="309.52" y1="823.0526" y2="828.51"/><line style="stroke:#181818;stroke-width:1.0;" x1="146.5966" x2="153.3052" y1="353.4452" y2="357.8034"/><line style="stroke:#181818;stroke-width:1.0;" x1="144.9623" x2="151.6709" y1="355.961" y2="360.3192"/><line style="stroke:#181818;stroke-width:1.0;" x1="147.7718" x2="152.13" y1="358.9787" y2="352.27"/></g><!--MD5=[c0e5a52b16fbcef22495159b374d909e]
-link Purchase to PurchaseDetail--><g id="link_Purchase_PurchaseDetail"><path codeLine="124" d="M550.68,363.39 C550.68,378.07 550.68,393.56 550.68,408.5 " fill="none" id="Purchase-PurchaseDetail" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="554.68" x2="546.68" y1="411.79" y2="411.79"/><line style="stroke:#181818;stroke-width:1.0;" x1="554.68" x2="546.68" y1="408.79" y2="408.79"/><line style="stroke:#181818;stroke-width:1.0;" x1="550.68" x2="550.68" y1="407.79" y2="415.79"/><line style="stroke:#181818;stroke-width:1.0;" x1="546.68" x2="554.68" y1="360.15" y2="360.15"/><line style="stroke:#181818;stroke-width:1.0;" x1="546.68" x2="554.68" y1="363.15" y2="363.15"/><line style="stroke:#181818;stroke-width:1.0;" x1="550.68" x2="550.68" y1="364.15" y2="356.15"/></g><!--MD5=[9aab0b89b89995cf669aab5ed34799da]
+link Purchase to PurchaseDetail--><g id="link_Purchase_PurchaseDetail"><path codeLine="124" d="M550.68,364.31 C550.68,378.37 550.68,393.14 550.68,407.43 " fill="none" id="Purchase-PurchaseDetail" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="554.68" x2="546.68" y1="411.79" y2="411.79"/><line style="stroke:#181818;stroke-width:1.0;" x1="554.68" x2="546.68" y1="408.79" y2="408.79"/><line style="stroke:#181818;stroke-width:1.0;" x1="550.68" x2="550.68" y1="407.79" y2="415.79"/><line style="stroke:#181818;stroke-width:1.0;" x1="550.68" x2="544.68" y1="364.15" y2="356.15"/><line style="stroke:#181818;stroke-width:1.0;" x1="550.68" x2="556.68" y1="364.15" y2="356.15"/><line style="stroke:#181818;stroke-width:1.0;" x1="550.68" x2="550.68" y1="364.15" y2="356.15"/><line style="stroke:#181818;stroke-width:1.0;" x1="546.68" x2="554.68" y1="366.15" y2="366.15"/></g><!--MD5=[9aab0b89b89995cf669aab5ed34799da]
 link Purchase to Price--><g id="link_Purchase_Price"><path codeLine="125" d="M602.67,348.16 C617.24,368.32 631.15,391.88 638.68,416 C658.97,480.9 661.92,505.09 638.68,569 C600.38,674.34 509.68,769.01 445.31,826.44 " fill="none" id="Purchase-Price" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="445.5965" x2="440.2927" y1="831.5327" y2="825.5435"/><line style="stroke:#181818;stroke-width:1.0;" x1="447.8424" x2="442.5386" y1="829.5438" y2="823.5546"/><line style="stroke:#181818;stroke-width:1.0;" x1="445.9392" x2="439.95" y1="825.8862" y2="831.19"/><line style="stroke:#181818;stroke-width:1.0;" x1="597.4989" x2="603.934" y1="347.894" y2="343.1411"/><line style="stroke:#181818;stroke-width:1.0;" x1="599.2812" x2="605.7163" y1="350.3071" y2="345.5543"/><line style="stroke:#181818;stroke-width:1.0;" x1="603.0928" x2="598.34" y1="348.7351" y2="342.3"/></g><!--MD5=[d9346253e56b18202ac3beab23dddd24]
 link Purchase to StockProduct--><g id="link_Purchase_StockProduct"><path codeLine="126" d="M497.67,350 C479.03,371.45 457.89,395.77 438.46,418.12 " fill="none" id="Purchase-StockProduct" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="438.2727" x2="437.562" y1="418.3273" y2="428.302"/><line style="stroke:#181818;stroke-width:1.0;" x1="438.2727" x2="428.498" y1="418.3273" y2="420.438"/><line style="stroke:#181818;stroke-width:1.0;" x1="438.2727" x2="433.03" y1="418.3273" y2="424.37"/><line style="stroke:#181818;stroke-width:1.0;" x1="442.6047" x2="436.562" y1="419.438" y2="414.1953"/><line style="stroke:#181818;stroke-width:1.0;" x1="497.4168" x2="503.4534" y1="344.1934" y2="349.4432"/><line style="stroke:#181818;stroke-width:1.0;" x1="495.4482" x2="501.4847" y1="346.4571" y2="351.7069"/><line style="stroke:#181818;stroke-width:1.0;" x1="497.8102" x2="503.06" y1="349.8365" y2="343.8"/></g><!--MD5=[cc8c2cf61c441007fd82fc98c1838a15]
 link SaleDetail to Product--><g id="link_SaleDetail_Product"><path codeLine="127" d="M274.24,575.41 C292.6,596.72 311.91,619.13 328.64,638.55 " fill="none" id="SaleDetail-Product" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="328.7678" x2="338.5318" y1="638.681" y2="640.8408"/><line style="stroke:#181818;stroke-width:1.0;" x1="328.7678" x2="329.4282" y1="638.681" y2="648.6592"/><line style="stroke:#181818;stroke-width:1.0;" x1="328.7678" x2="333.98" y1="638.681" y2="644.75"/><line style="stroke:#181818;stroke-width:1.0;" x1="330.4992" x2="324.4302" y1="634.5576" y2="639.7698"/><line style="stroke:#181818;stroke-width:1.0;" x1="268.4058" x2="274.4617" y1="574.7517" y2="569.5242"/><line style="stroke:#181818;stroke-width:1.0;" x1="270.3661" x2="276.422" y1="577.0226" y2="571.7951"/><line style="stroke:#181818;stroke-width:1.0;" x1="274.0475" x2="268.82" y1="575.1659" y2="569.11"/></g><!--MD5=[5a75ef0720b826a25eafd7a682d30a1b]
 link Sale to StockProduct--><g id="link_Sale_StockProduct"><path codeLine="128" d="M260.62,356.42 C277.31,376.19 295.65,397.91 312.65,418.04 " fill="none" id="Sale-StockProduct" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="312.7221" x2="322.4664" y1="418.1148" y2="420.3616"/><line style="stroke:#181818;stroke-width:1.0;" x1="312.7221" x2="313.2936" y1="418.1148" y2="428.0984"/><line style="stroke:#181818;stroke-width:1.0;" x1="312.7221" x2="317.88" y1="418.1148" y2="424.23"/><line style="stroke:#181818;stroke-width:1.0;" x1="314.4902" x2="308.375" y1="414.007" y2="419.1649"/><line style="stroke:#181818;stroke-width:1.0;" x1="254.7414" x2="260.8566" y1="355.6666" y2="350.5086"/><line style="stroke:#181818;stroke-width:1.0;" x1="256.6756" x2="262.7908" y1="357.9598" y2="352.8018"/><line style="stroke:#181818;stroke-width:1.0;" x1="260.3779" x2="255.22" y1="356.1452" y2="350.03"/></g><!--MD5=[636c4cbf2bb40ce634cacaf01a62e11c]
 link PurchaseDetail to Product--><g id="link_PurchaseDetail_Product"><path codeLine="129" d="M478.21,575.23 C458.75,597.19 438.24,620.32 420.65,640.16 " fill="none" id="PurchaseDetail-Product" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="420.5934" x2="419.7821" y1="640.2105" y2="650.1775"/><line style="stroke:#181818;stroke-width:1.0;" x1="420.5934" x2="410.7979" y1="640.2105" y2="642.2225"/><line style="stroke:#181818;stroke-width:1.0;" x1="420.5934" x2="415.29" y1="640.2105" y2="646.2"/><line style="stroke:#181818;stroke-width:1.0;" x1="424.914" x2="418.9244" y1="641.3648" y2="636.0614"/><line style="stroke:#181818;stroke-width:1.0;" x1="477.9936" x2="483.9831" y1="569.4531" y2="574.7564"/><line style="stroke:#181818;stroke-width:1.0;" x1="476.0048" x2="481.9943" y1="571.6991" y2="577.0025"/><line style="stroke:#181818;stroke-width:1.0;" x1="478.3366" x2="483.64" y1="575.0995" y2="569.11"/></g><!--MD5=[469537f6e6fbfad22558102ade648a2e]
 link StockProduct to Product--><g id="link_StockProduct_Product"><path codeLine="130" d="M374.68,568.81 C374.68,585.83 374.68,603.86 374.68,620.72 " fill="none" id="StockProduct-Product" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="374.68" x2="380.68" y1="620.89" y2="628.89"/><line style="stroke:#181818;stroke-width:1.0;" x1="374.68" x2="368.68" y1="620.89" y2="628.89"/><line style="stroke:#181818;stroke-width:1.0;" x1="374.68" x2="374.68" y1="620.89" y2="628.89"/><line style="stroke:#181818;stroke-width:1.0;" x1="378.68" x2="370.68" y1="618.89" y2="618.89"/><line style="stroke:#181818;stroke-width:1.0;" x1="370.68" x2="378.68" y1="564.7" y2="564.7"/><line style="stroke:#181818;stroke-width:1.0;" x1="370.68" x2="378.68" y1="567.7" y2="567.7"/><line style="stroke:#181818;stroke-width:1.0;" x1="374.68" x2="374.68" y1="568.7" y2="560.7"/></g><!--MD5=[5fa2e163e1a5922a0d0ebcb119c05bb7]
-link Product to Price--><g id="link_Product_Price"><path codeLine="131" d="M374.68,764.3 C374.68,779.09 374.68,794.73 374.68,809.66 " fill="none" id="Product-Price" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="378.68" x2="370.68" y1="812.93" y2="812.93"/><line style="stroke:#181818;stroke-width:1.0;" x1="378.68" x2="370.68" y1="809.93" y2="809.93"/><line style="stroke:#181818;stroke-width:1.0;" x1="374.68" x2="374.68" y1="808.93" y2="816.93"/><line style="stroke:#181818;stroke-width:1.0;" x1="370.68" x2="378.68" y1="761" y2="761"/><line style="stroke:#181818;stroke-width:1.0;" x1="370.68" x2="378.68" y1="764" y2="764"/><line style="stroke:#181818;stroke-width:1.0;" x1="374.68" x2="374.68" y1="765" y2="757"/></g><!--MD5=[64b2795114cf89c88947b63cdc960ebf]
+link Product to Price--><g id="link_Product_Price"><path codeLine="131" d="M374.68,764.3 C374.68,779.09 374.68,794.73 374.68,809.66 " fill="none" id="Product-Price" style="stroke:#181818;stroke-width:1.0;"/><line style="stroke:#181818;stroke-width:1.0;" x1="378.68" x2="370.68" y1="812.93" y2="812.93"/><line style="stroke:#181818;stroke-width:1.0;" x1="378.68" x2="370.68" y1="809.93" y2="809.93"/><line style="stroke:#181818;stroke-width:1.0;" x1="374.68" x2="374.68" y1="808.93" y2="816.93"/><line style="stroke:#181818;stroke-width:1.0;" x1="370.68" x2="378.68" y1="761" y2="761"/><line style="stroke:#181818;stroke-width:1.0;" x1="370.68" x2="378.68" y1="764" y2="764"/><line style="stroke:#181818;stroke-width:1.0;" x1="374.68" x2="374.68" y1="765" y2="757"/></g><!--MD5=[6ccd130684db3a325492519a433f01fa]
 @startuml Database
 
 entity User {
@@ -152,7 +152,7 @@ Customer ||- -|{ Sale
 Customer ||- -|| Price
 Sale ||- -|| SaleDetail
 Sale ||- -|| Price
-Purchase ||- -|| PurchaseDetail
+Purchase }|- -|| PurchaseDetail
 Purchase ||- -|| Price
 Purchase ||- -|{ StockProduct
 SaleDetail ||- -|{ Product

resources/js/components/AppAutoComplete.vue

@@ -23,6 +23,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  empty: {
+    type: Boolean,
+    default: false,
+  },
   refreshData: {
     type: String,
     required: true,
@@ -87,7 +91,7 @@ const onSelect = (event) => {
         v-if="error"
         class="mt-1"
         :class="{
-          'mb-2': suggestions.length === 0 || modelValue.length === 0,
+          'mb-2': empty,
           'p-error': isError,
         }"
         :id="ariaDescribedbyLabel"
@@ -95,10 +99,7 @@ const onSelect = (event) => {
         {{ error }}
       </small>
 
-      <small
-        v-if="suggestions.length === 0 || modelValue.length === 0"
-        class="mt-1"
-      >
+      <small v-if="empty" class="mt-1">
         <slot name="empty" />
       </small>
     </div>

resources/js/components/AppSearch.vue

@@ -23,5 +23,8 @@ watch(search, () => {
 </script>
 
 <template>
-  <InputText v-model="search" />
+  <div class="flex align-items-center gap-3">
+    <InputText v-bind="$attrs" v-model="search" />
+    <i class="pi pi-search" />
+  </div>
 </template>

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

@@ -1,4 +1,6 @@
 <script setup>
+import { IDRCurrencyFormat } from '@/utils/currencyFormat'
+
 defineProps({
   title: String,
   headerTable: {
@@ -29,7 +31,17 @@ defineProps({
       :field="value.field"
       :header="value.header"
       :key="value.field"
-    />
+    >
+      <template #body="{ data, field }">
+        <template v-if="field === 'price'">
+          {{ IDRCurrencyFormat(data[field]) }}
+        </template>
+
+        <template v-else-if="field === 'ppn'"> {{ data[field] }}% </template>
+
+        <template v-else> {{ data[field] }} </template>
+      </template>
+    </Column>
 
     <Column>
       <template #body="{ index }">

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

@@ -5,16 +5,16 @@ defineProps({
   title: String,
   number: String,
   price: Number,
-  qty: String,
   ppn: Number,
   status: String,
-  person: Object,
+  person: null,
+  message: String,
   disabled: Boolean,
 })
 </script>
 
 <template>
-  <Card>
+  <Card class="bg-primary">
     <template #title>
       <h2 class="text-2xl font-bold">{{ title }}</h2>
     </template>
@@ -36,14 +36,7 @@ defineProps({
           </div>
         </div>
 
-        <div
-          v-if="
-            person !== null &&
-            typeof person === 'object' &&
-            Object.keys(person).length
-          "
-          class="col-12"
-        >
+        <div v-if="person?.id" class="col-12">
           <div class="grid">
             <div class="col">
               <h3 class="text-base">Nama</h3>
@@ -70,19 +63,9 @@ defineProps({
         <Divider type="dashed" />
         <div class="col-12">
           <div class="grid">
-            <div class="col">
+            <div v-if="price" class="col">
               <h3 class="text-base">Harga</h3>
-              <span v-if="price">{{ IDRCurrencyFormat(price) }}</span>
-            </div>
-
-            <div class="col">
-              <h3 class="text-base">Kuantitas</h3>
-              <span>{{ qty }}</span>
-            </div>
-
-            <div class="col">
-              <h3 class="text-base">PPN</h3>
-              <span>{{ ppn }} %</span>
+              <span>{{ IDRCurrencyFormat(price) }}</span>
             </div>
           </div>
         </div>
@@ -90,13 +73,17 @@ defineProps({
     </template>
 
     <template #footer>
-      <div class="flex flex-column md:flex-row justify-content-end">
+      <div
+        class="flex flex-column md:flex-row gap-2 md:gap-0 md:justify-content-between md:align-items-center"
+      >
+        <small>{{ message }}</small>
+
         <Button
           label="Simpan"
           icon="pi pi-check"
-          class="p-button-outlined"
+          class="p-button-outlined bg-primary-reverse"
           :disabled="disabled"
-          @click="$emit('click')"
+          @click="$emit('submit')"
         />
       </div>
     </template>

resources/js/pages/Purchases/Composables/onShowDialog.js

@@ -0,0 +1,41 @@
+import { useDialog } from 'primevue/usedialog'
+import SupplierCreate from '../Components/SupplierCreate.vue'
+import ProductCreate from '../Components/ProductCreate.vue'
+
+export function onShowDialog() {
+  const dialog = useDialog()
+
+  const dialogStyle = {
+    style: {
+      width: '50vw',
+    },
+    breakpoints: {
+      '960px': '75vw',
+      '640px': '90vw',
+    },
+    modal: true,
+  }
+
+  const onShowCreateSupplier = () => {
+    dialog.open(SupplierCreate, {
+      props: {
+        header: 'Tambah Supplier',
+        ...dialogStyle,
+      },
+    })
+  }
+
+  const onShowCreateProduct = () => {
+    dialog.open(ProductCreate, {
+      props: {
+        header: 'Tambah Produk',
+        ...dialogStyle,
+      },
+    })
+  }
+
+  return {
+    onShowCreateProduct,
+    onShowCreateSupplier,
+  }
+}

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

@@ -1,46 +1,61 @@
-import { reactive } from 'vue'
 import FormValidationError from '@/utils/FormValidationError'
+import { reactive } from 'vue'
 
 export function useProductCart(form) {
-  const cartProduct = reactive([])
-
-  const productAddValidation = () => {
-    if (form.price) {
-      throw new FormValidationError('Nilai tidak boleh kosong', 'price')
-    } else if (form.qty) {
-      throw new FormValidationError('Nilai tidak boleh kosong', 'qty')
-    } else if (form.product) {
-      throw new FormValidationError('Nilai tidak boleh kosong', 'product')
+  const productCart = reactive([])
+
+  const productValidation = () => {
+    const existProduct = productCart.find(
+      (product) => product.number === form.product.number
+    )
+
+    if (existProduct) {
+      throw new FormValidationError('Produk sudah ada dikeranjang', 'product')
     }
   }
 
   const onAddProduct = () => {
     try {
-      form.clearErrors(['price', 'qty', 'product'])
+      form.clearErrors('product', 'price', 'qty')
 
-      productAddValidation()
+      productValidation()
 
-      cartProduct.push({
+      productCart.push({
         number: form.product.number,
         name: form.product.name,
         price: form.price,
         qty: form.qty,
+        unit: form.product.unit,
+        ppn: form.ppn,
       })
+
+      form.reset('product', 'price', 'qty')
     } catch (e) {
       form.setError(e.field, e.message)
     }
   }
 
   const onDeleteProduct = (index) => {
-    cartProduct.splice(index)
+    productCart.splice(index, 1)
   }
 
-  const onClearProduct = () => {}
+  const onClearProduct = () => {
+    productCart.splice(0)
+  }
+
+  const totalProductPrice = () => {
+    const productPrices = productCart.map(
+      (product) => product.price + product.price * (form.ppn / 100)
+    )
+
+    return productPrices.reduce((prev, current) => prev + current, 0)
+  }
 
   return {
-    cartProduct,
+    productCart,
     onAddProduct,
     onDeleteProduct,
     onClearProduct,
+    totalProductPrice,
   }
 }

resources/js/pages/Purchases/Create.vue

@@ -1,12 +1,10 @@
 <script setup>
-import { useDialog } from 'primevue/usedialog'
-import { optionStatus, dialogStyle } from './config'
+import { optionStatus } from './config'
 import { cartTable } from './config'
-import SupplierCreate from './Components/SupplierCreate.vue'
-import ProductCreate from './Components/ProductCreate.vue'
 import Details from './Components/Details.vue'
 import Cart from './Components/Cart.vue'
 import { useProductCart } from './Composables/useProductCart'
+import { onShowDialog } from './Composables/onShowDialog'
 import { useForm } from '@/composables/useForm'
 import AppInputText from '@/components/AppInputText.vue'
 import AppInputNumber from '@/components/AppInputNumber.vue'
@@ -34,6 +32,7 @@ const form = useForm({
   qty: null,
   supplier: null,
   product: null,
+  ppn: props.ppn,
 })
 
 const onSubmit = () => {
@@ -41,38 +40,27 @@ const onSubmit = () => {
     .transform((data) => ({
       number: data.number,
       status: data.status,
-      price: data.price,
-      qty: data.qty,
       supplier_id: data.supplier.id,
-      product_number: data.product.number,
+      products: productCart,
     }))
     .post(route('purchases.store'), {
-      onSuccess: () => form.reset(),
+      onSuccess: () => {
+        form.reset()
+
+        onClearProduct()
+      },
     })
 }
 
-const { cartProduct, onAddProduct, onDeleteProduct, onClearProduct } =
-  useProductCart(form)
-
-const dialog = useDialog()
-
-const onShowCreateSupplier = () => {
-  dialog.open(SupplierCreate, {
-    props: {
-      header: 'Tambah Supplier',
-      ...dialogStyle,
-    },
-  })
-}
+const {
+  productCart,
+  onAddProduct,
+  onDeleteProduct,
+  onClearProduct,
+  totalProductPrice,
+} = useProductCart(form)
 
-const onShowCreateProduct = () => {
-  dialog.open(ProductCreate, {
-    props: {
-      header: 'Tambah Produk',
-      ...dialogStyle,
-    },
-  })
-}
+const { onShowCreateProduct, onShowCreateSupplier } = onShowDialog()
 </script>
 
 <template>
@@ -80,156 +68,179 @@ const onShowCreateProduct = () => {
     <DynamicDialog />
 
     <div class="grid">
-      <div class="col-12 md:col-8 flex-order-1 md:flex-order-0">
-        <Card>
-          <template #title> Pembeli </template>
-          <template #content>
-            <div class="grid">
-              <div class="col-12 md:col-6">
-                <AppInputText
-                  disabled
-                  label="Nomor Pembelian"
-                  placeholder="nomor pembelian"
-                  :error="form.errors.number"
-                  v-model="form.number"
-                />
-              </div>
-
-              <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">
-                <AppAutoComplete
-                  label="Supplier"
-                  placeholder="supplier"
-                  field="name"
-                  refresh-data="suppliers"
-                  v-model="form.supplier"
-                  :error="form.errors.suppliers_id"
-                  :suggestions="suppliers"
-                >
-                  <template #item="slotProps">
-                    <template v-if="slotProps.item">
-                      <div class="flex flex-column">
-                        <span>{{ slotProps.item.name }}</span>
-                        <span>{{ slotProps.item.npwp }}</span>
-                      </div>
-                    </template>
-                  </template>
-
-                  <template #empty>
-                    <span
-                      class="cursor-pointer"
-                      style="color: var(--primary-color)"
-                      @click="onShowCreateSupplier"
+      <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">
+                    <AppInputText
+                      disabled
+                      label="Nomor Pembelian"
+                      placeholder="nomor pembelian"
+                      :error="form.errors.number"
+                      v-model="form.number"
+                    />
+                  </div>
+
+                  <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">
+                    <AppAutoComplete
+                      empty
+                      label="Supplier"
+                      placeholder="supplier"
+                      field="name"
+                      refresh-data="suppliers"
+                      v-model="form.supplier"
+                      :error="form.errors.suppliers_id"
+                      :suggestions="suppliers"
+                    >
+                      <template #item="slotProps">
+                        <template v-if="slotProps.item">
+                          <div class="flex flex-column">
+                            <span>{{ slotProps.item.name }}</span>
+                            <span>{{ slotProps.item.npwp }}</span>
+                          </div>
+                        </template>
+                      </template>
+
+                      <template #empty>
+                        <span
+                          class="cursor-pointer"
+                          style="color: var(--primary-color)"
+                          @click="onShowCreateSupplier"
+                        >
+                          Tambah Supplier
+                        </span>
+                      </template>
+                    </AppAutoComplete>
+                  </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.supplier?.id"
+                      empty
+                      label="Produk"
+                      placeholder="produk"
+                      field="name"
+                      refresh-data="products"
+                      v-model="form.product"
+                      :error="form.errors.product"
+                      :suggestions="products"
                     >
-                      Tambah Supplier
-                    </span>
-                  </template>
-                </AppAutoComplete>
-              </div>
-            </div>
-          </template>
-        </Card>
+                      <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>
+
+                      <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>
+
+                  <div class="col-12 md:col-6">
+                    <AppInputNumber
+                      :disabled="!form.supplier?.id"
+                      label="Harga"
+                      placeholder="harga"
+                      v-model="form.price"
+                    />
+                  </div>
+
+                  <div class="col-12 md:col-6">
+                    <AppInputText
+                      :disabled="!form.supplier?.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"
+              :header-table="cartTable"
+              :value="productCart"
+              @delete="onDeleteProduct"
+            />
+          </div>
+        </div>
       </div>
 
-      <div class="col-12 md:col-4 flex-order-4 md:flex-order-0">
+      <div class="col-12 md:col-4">
         <Details
           title="Detail Pembelian"
+          message="Pastikan semua produk sudah benar"
           :number="number"
-          :ppn="ppn"
           :status="form.status"
           :person="form.supplier"
           :product="form.product"
-          :disabled="form.processing"
-          @click="onSubmit"
-        />
-      </div>
-
-      <div class="col-12 md:col-8 flex-order-2 md:flex-order-0">
-        <Card>
-          <template #title>Produk</template>
-          <template #content>
-            <div class="grid">
-              <div class="col-12 md:col-6">
-                <AppAutoComplete
-                  label="Produk"
-                  placeholder="produk"
-                  field="name"
-                  refresh-data="products"
-                  v-model="form.product"
-                  :error="form.errors.product_number"
-                  :suggestions="products"
-                >
-                  <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>
-
-                  <template #empty>
-                    <span
-                      class="cursor-pointer"
-                      style="color: var(--primary-color)"
-                      @click="onShowCreateProduct"
-                    >
-                      Tambah Produk
-                    </span>
-                  </template>
-                </AppAutoComplete>
-              </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="Tambah Produk"
-                icon="pi pi-check"
-                class="p-button-outlined"
-                :disabled="form.processing"
-                @click="onAddProduct"
-              />
-            </div>
-          </template>
-        </Card>
-      </div>
-
-      <div class="col-12 md:col-8 flex-order-3 md:flex-order-0">
-        <Cart
-          title="Keranjang Produk"
-          :header-table="cartTable"
-          :form="form"
-          :value="cartProduct"
-          @delete="onDeleteProduct"
+          :price="totalProductPrice()"
+          :disabled="
+            form.processing ||
+            !form.status ||
+            !form.supplier?.id ||
+            productCart.length === 0
+          "
+          @submit="onSubmit"
         />
       </div>
     </div>

resources/js/pages/Purchases/Index.vue

@@ -25,14 +25,12 @@ defineProps({
 
         <div class="grid">
           <div class="col-12 md:col-8">
-            <div class="flex align-items-center">
-              <AppSearch
-                class="w-full md:w-27rem"
-                placeholder="cari, contoh: PBNxx, Pending, Success"
-                url="/purchases"
-                :initial-search="initialSearch"
-              />
-            </div>
+            <AppSearch
+              class="w-full md:w-27rem"
+              placeholder="nama, email, phone, status"
+              url="/purchases"
+              :initial-search="initialSearch"
+            />
           </div>
 
           <div

resources/js/pages/Purchases/config.js

@@ -11,29 +11,18 @@ export const optionStatus = [
 
 export const indexTable = [
   { field: 'updatedAt', header: 'Tanggal' },
-  { field: 'number', header: 'Nomor Penjualan' },
+  { field: 'name', header: 'Nama Supplier' },
+  { field: 'phone', header: 'No HP Supplier' },
+  { field: 'email', header: 'Email Supplier' },
+  { field: 'price', header: 'Total Harga' },
   { field: 'status', header: 'Status' },
-  { field: 'price', header: 'Harga' },
-  { field: 'qty', header: 'Kuantitas' },
-  { field: 'ppn', header: 'PPN' },
-  { field: 'productName', header: 'Nama Produk' },
-  { field: 'productNumber', header: 'Nomor Produk' },
 ]
 
 export const cartTable = [
   { field: 'number', header: 'Nomor Produk' },
   { field: 'name', header: 'Produk' },
+  { field: 'ppn', header: 'PPN' },
   { field: 'price', header: 'Harga' },
-  { field: 'quantity', header: 'Kuantitas' },
+  { field: 'qty', header: 'Kuantitas' },
+  { field: 'unit', header: 'Satuan' },
 ]
-
-export const dialogStyle = {
-  style: {
-    width: '50vw',
-  },
-  breakpoints: {
-    '960px': '75vw',
-    '640px': '90vw',
-  },
-  modal: true,
-}