feat: dialog out-transaction

app/Http/Controllers/TransactionController.php

                 'id' => $transactionOut->id,
                 'entryCar' => $transactionOut->entryTransaction->created_at,
                 'outCar' => $transactionOut->created_at,
-                'totalTimeParking' => Carbon::parse(
-                    $transactionOut->getRawOriginal('created_at')
-                )->diffForHumans(
-                    $transactionOut->entryTransaction->getRawOriginal('created_at')
+                'totalTimeParking' => ParkingFeeService::totalTimeParkingHuman(
+                    $transactionOut->entry_transaction_id
+                ),
+                'totalPriceParking' => ParkingFeeService::totalPriceParkingString(
+                    $transactionOut->entry_transaction_id
                 ),
-                'totalPriceParking' => ParkingFeeService::totalPriceParkingString($transactionOut->entry_transaction_id),
                 'platNumber' => $transactionOut->plat_number,
-                'entryTransactionId' => $transactionOut->entry_transaction_id
+                'entryTransactionId' => $transactionOut->entry_transaction_id,
             ]);
 
         $typeVehicles = function () {
             if ($vehicle) {
                 return [[
                     'value' => $vehicle->typeVehicle->id,
-                    'label' => $vehicle->typeVehicle->type
+                    'label' => $vehicle->typeVehicle->type,
                 ]];
             } else {
                 return TypeVehicle::get()->transform(fn($typeVehicle) => [
                     'value' => $typeVehicle->id,
-                    'label' => $typeVehicle->type
+                    'label' => $typeVehicle->type,
                 ]);
             }
         };
 
+        $detailOutTransaction = function () {
+            if (request('transaction_number')) {
+                return [
+                    'totalTimeParking' => ParkingFeeService::totalTimeParkingHuman(
+                        request('transaction_number')
+                    ),
+                    'totalPriceParking' => ParkingFeeService::totalPriceParkingString(
+                        request('transaction_number')
+                    ),
+                ];
+            }
+        };
+
         return inertia('transaction/Create.vue', compact([
             'outTransactions',
-            'typeVehicles'
+            'typeVehicles',
+            'detailOutTransaction',
         ]));
     }
 
                 'plat_number' => $request->plat_number,
                 'entry_transaction_id' => $request->entry_transaction_id,
                 'type_vehicle_id' => $vehicle->type_vehicle_id,
-                'user_id' => auth()->user()->id
+                'user_id' => auth()->user()->id,
             ]);
 
             return back()->with('success', __('messages.success.store.transaction'));
                     'plat_number' => $request->plat_number,
                     'entry_transaction_id' => $request->entry_transaction_id,
                     'type_vehicle_id' => $request->type_vehicle_id,
-                    'user_id' => auth()->user()->id
+                    'user_id' => auth()->user()->id,
                 ]);
 
                 $outTransaction->mutation()->create([
                     'type' => 1,
-                    'amount' => ParkingFeeService::totalPriceParking($request->entry_transaction_id)
+                    'amount' => ParkingFeeService::totalPriceParking($request->entry_transaction_id),
                 ]);
 
                 DB::commit();

app/Services/ParkingFeeService.php

 
 class ParkingFeeService
 {
-    private static function parkingFee()
-    {
-        return ParkingFee::get();
-    }
-
     private static function parkingPrice()
     {
-        return HelperService::addPrevValue(self::parkingFee()
+        return HelperService::addPrevValue(ParkingFee::get()
                 ->pluck('price')->toArray());
     }
 
     private static function parkingTime()
     {
-        return HelperService::addPrevValue(self::parkingFee()
+        return HelperService::addPrevValue(ParkingFee::get()
                 ->pluck('time_period')->toArray());
     }
 
     public static function totalTimeParkingPerDay($entryTransactionId)
     {
         return self::totalTimeParkingPerToday($entryTransactionId) > 24
-            ? ceil(self::totalTimeParkingPerToday($entryTransactionId) / 24)
-            : 0;
+        ? ceil(self::totalTimeParkingPerToday($entryTransactionId) / 24)
+        : 0;
     }
 
     public static function totalPriceParkingPerDay($entryTransactionId)
     public static function totalTimeParking($entryTransactionId)
     {
         return self::totalTimeParkingPerDay($entryTransactionId)
-            ? self::totalTimeParkingPerDay($entryTransactionId) . ' Hari'
-            : self::totalTimeParkingPerToday($entryTransactionId) . ' Jam';
+        ? self::totalTimeParkingPerDay($entryTransactionId) . ' Hari'
+        : self::totalTimeParkingPerToday($entryTransactionId) . ' Jam';
+    }
 
+    public static function totalTimeParkingHuman($entryTransactionId)
+    {
+        $entryTransaction = EntryTransaction::where('transaction_number',
+            $entryTransactionId)->first();
+
+        return Carbon::parse(
+            now()
+        )->diffForHumans(
+            $entryTransaction->getRawOriginal('created_at')
+        );
     }
 
     public static function totalPriceParking($entryTransactionId)
     {
         return self::totalTimeParkingPerDay($entryTransactionId)
-            ? self::totalPriceParkingPerDay($entryTransactionId)
-            : self::totalPriceParkingPerToday($entryTransactionId);
+        ? self::totalPriceParkingPerDay($entryTransactionId)
+        : self::totalPriceParkingPerToday($entryTransactionId);
     }
 
     public static function totalPriceParkingString($entryTransactionId)

public/js/vue.js

 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"10c6b388645ceb22","resources_js_pages_auth_ForgotPassword_vue":"85a497d97d470da0","resources_js_pages_auth_Login_vue":"2cfdf492d60f9521","resources_js_pages_auth_ResetPassword_vue":"9bc29d6465cc0c53","resources_js_pages_auth_VerifyEmail_vue":"f88499b46d5f110c","resources_js_pages_expense_Create_vue":"dd6a278391b58d69","resources_js_pages_expense_Index_vue":"d493dbc863eb491e","resources_js_pages_expense_Show_vue":"222f3f11259e1d74","resources_js_pages_expense_tableHeader_js":"5b2c3a80fb697fff","resources_js_pages_home_Index_vue":"bc20b7148bfb6da0","resources_js_pages_member_Create_vue":"46e5d529878a5a3c","resources_js_pages_member_Edit_vue":"1853671dabd902a7","resources_js_pages_member_Index_vue":"bafaa294b3e6bf60","resources_js_pages_member_tableHeader_js":"61877f698532418e","resources_js_pages_member_useVehicle_js":"8edc972eb134efdf","resources_js_pages_mutation_Report_vue":"f6383687408a3025","resources_js_pages_mutation_tableHeader_js":"2c25ede9c3d1ff83","resources_js_pages_outtransaction_Show_vue":"08d24b9b33538ef7","resources_js_pages_outtransaction_tableHeader_js":"28e044bd873db9aa","resources_js_pages_parkingfee_Create_vue":"a63c4b9f335fb0bf","resources_js_pages_test-transaction_Create_vue":"26c3d63a20969164","resources_js_pages_test-transaction_TableHeader_js":"41de407b819e132e","resources_js_pages_topup_Create_vue":"55f0a1d108219169","resources_js_pages_topup_Index_vue":"36286758cf72350a","resources_js_pages_topup_Show_vue":"8f745baefb670bb6","resources_js_pages_topup_tableHeader_js":"8a585c07bb26d0e7","resources_js_pages_transaction_Create_vue":"8cec47c9a6097cdc","resources_js_pages_transaction_TableHeader_js":"68379a290810960e","resources_js_pages_typemember_Create_vue":"3f3c554a28b716b3","resources_js_pages_typemember_Edit_vue":"51915bbcb5376a36","resources_js_pages_typemember_Index_vue":"6c256e816bd7c375","resources_js_pages_typemember_tableHeader_js":"02f8a6c57093a7fe","resources_js_pages_typemember_useVehicle_js":"9bcdb75c62376835","resources_js_pages_typevehicle_Create_vue":"7d5c9e455cd166ff","resources_js_pages_typevehicle_Edit_vue":"1ab23f2ba50fc7fa","resources_js_pages_typevehicle_Index_vue":"77925b0dddb8b112","resources_js_pages_typevehicle_tableHeader_js":"9616b18c4a750c3f","resources_js_pages_user_Create_vue":"3ee29346cc8b4c3a","resources_js_pages_user_Edit_vue":"3366451aa8c56dcc","resources_js_pages_user_Index_vue":"b2d89eac3119ef58","resources_js_pages_user_Show_vue":"cacd644a884cd355","resources_js_pages_user_tableHeader_js":"78beeea0dcacb81b"}[chunkId] + "";
+/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"10c6b388645ceb22","resources_js_pages_auth_ForgotPassword_vue":"85a497d97d470da0","resources_js_pages_auth_Login_vue":"2cfdf492d60f9521","resources_js_pages_auth_ResetPassword_vue":"9bc29d6465cc0c53","resources_js_pages_auth_VerifyEmail_vue":"f88499b46d5f110c","resources_js_pages_expense_Create_vue":"dd6a278391b58d69","resources_js_pages_expense_Index_vue":"d493dbc863eb491e","resources_js_pages_expense_Show_vue":"222f3f11259e1d74","resources_js_pages_expense_tableHeader_js":"5b2c3a80fb697fff","resources_js_pages_home_Index_vue":"bc20b7148bfb6da0","resources_js_pages_member_Create_vue":"46e5d529878a5a3c","resources_js_pages_member_Edit_vue":"1853671dabd902a7","resources_js_pages_member_Index_vue":"bafaa294b3e6bf60","resources_js_pages_member_tableHeader_js":"61877f698532418e","resources_js_pages_member_useVehicle_js":"8edc972eb134efdf","resources_js_pages_mutation_Report_vue":"f6383687408a3025","resources_js_pages_mutation_tableHeader_js":"2c25ede9c3d1ff83","resources_js_pages_outtransaction_Show_vue":"08d24b9b33538ef7","resources_js_pages_outtransaction_tableHeader_js":"28e044bd873db9aa","resources_js_pages_parkingfee_Create_vue":"a63c4b9f335fb0bf","resources_js_pages_test-transaction_Create_vue":"26c3d63a20969164","resources_js_pages_test-transaction_TableHeader_js":"41de407b819e132e","resources_js_pages_topup_Create_vue":"55f0a1d108219169","resources_js_pages_topup_Index_vue":"36286758cf72350a","resources_js_pages_topup_Show_vue":"8f745baefb670bb6","resources_js_pages_topup_tableHeader_js":"8a585c07bb26d0e7","resources_js_pages_transaction_Create_vue":"747202830d1a42a1","resources_js_pages_transaction_TableHeader_js":"68379a290810960e","resources_js_pages_typemember_Create_vue":"3f3c554a28b716b3","resources_js_pages_typemember_Edit_vue":"51915bbcb5376a36","resources_js_pages_typemember_Index_vue":"6c256e816bd7c375","resources_js_pages_typemember_tableHeader_js":"02f8a6c57093a7fe","resources_js_pages_typemember_useVehicle_js":"9bcdb75c62376835","resources_js_pages_typevehicle_Create_vue":"7d5c9e455cd166ff","resources_js_pages_typevehicle_Edit_vue":"1ab23f2ba50fc7fa","resources_js_pages_typevehicle_Index_vue":"77925b0dddb8b112","resources_js_pages_typevehicle_tableHeader_js":"9616b18c4a750c3f","resources_js_pages_user_Create_vue":"3ee29346cc8b4c3a","resources_js_pages_user_Edit_vue":"3366451aa8c56dcc","resources_js_pages_user_Index_vue":"b2d89eac3119ef58","resources_js_pages_user_Show_vue":"cacd644a884cd355","resources_js_pages_user_tableHeader_js":"78beeea0dcacb81b"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/pages/transaction/Create.vue

 <script setup>
 import { watch } from 'vue'
 import { Inertia } from '@inertiajs/inertia'
-import { useForm } from '@inertiajs/inertia-vue3'
+import { useForm, Head } from '@inertiajs/inertia-vue3'
+import { useConfirm } from 'primevue/useconfirm'
+import FormValidationError from '@/utils/formValidationError'
 import { useFormErrorReset } from '@/components/useFormErrorReset'
-import { throttle } from 'lodash'
 import AppInputText from '@/components/AppInputText.vue'
 import AppDropdown from '@/components/AppDropdown.vue'
 import DashboardLayout from '@/layouts/DashboardLayout.vue'
 import IndexTable from './TableHeader'
 
-defineProps({
+const props = defineProps({
   outTransactions: Object,
   typeVehicles: Object,
+  detailOutTransaction: Object,
 })
 
 const form = useForm({
   }
 )
 
+const confirm = useConfirm()
+
+const submitValidation = () => {
+  form.clearErrors()
+
+  const fieldError = []
+
+  if (!form.plat_number) {
+    fieldError.push('plat_number')
+  }
+
+  if (!form.entry_transaction_id) {
+    fieldError.push('entry_transaction_id')
+  }
+
+  if (!form.type_vehicle_id) {
+    fieldError.push('type_vehicle_id')
+  }
+
+  if (fieldError.length > 0) {
+    throw new FormValidationError('Nilai tidak boleh kosong', fieldError)
+  }
+}
+
 const submit = () => {
-  form.post(route('transactions.store'), { onSuccess: () => form.reset() })
+  try {
+    submitValidation()
+
+    Inertia.reload({
+      only: ['detailOutTransaction'],
+      data: { transaction_number: form.entry_transaction_id },
+    })
+
+    confirm.require({
+      message: `
+      Lama parkir ${props.detailOutTransaction.totalTimeParking},
+      biaya yang dikenakan ${props.detailOutTransaction.totalPriceParking}
+    `,
+      header: 'Tagihan',
+      acceptLabel: 'Bayar dan simpan',
+      rejectLabel: 'Batalkan',
+      accept: () => {
+        form.post(route('transactions.store'), {
+          onSuccess: () => form.reset(),
+        })
+      },
+      reject: () => {
+        confirm.close()
+      },
+    })
+  } catch ($e) {
+    if ($e.field) {
+      $e.field.forEach((field) => form.setError(field, $e.message))
+    }
+  }
 }
 </script>
 <template>
+  <Head title="Transaksi Keluar" />
+
   <DashboardLayout>
+    <ConfirmDialog></ConfirmDialog>
+
     <div class="grid">
       <div class="col-12">
         <Card>
               :stripedRows="true"
             >
               <template #header>
-                <span style="color: var(--red-600)">
-                  Maksimal ditampilkan :
-                </span>
+                <span style="color: var(--red-600)"> Maksimal ditampilkan : </span>
                 10
                 <br />
                 <span style="color: var(--red-600)">Ditampilkan :</span>
                 {{ Object.keys(outTransactions).length }}
               </template>
 
-              <Column
-                v-for="value in IndexTable"
-                :field="value.field"
-                :header="value.header"
-                :key="value.field"
-              />
+              <Column v-for="value in IndexTable" :field="value.field" :header="value.header" :key="value.field" />
             </DataTable>
           </template>
         </Card>