fix: master transaction

app/Http/Controllers/TestTransactionController.php

@@ -6,10 +6,9 @@ use App\Http\Controllers\Controller;
 use App\Http\Requests\TestTransaction\StoreTestTransactionRequest;
 use App\Models\EntryTransaction;
 use App\Models\OutTransaction;
-use App\Models\ParkingFee;
 use App\Models\TypeVehicle;
 use App\Models\Vehicle;
-use App\Services\Helper;
+use App\Services\ParkingFeeService;
 use Carbon\Carbon;
 use Illuminate\Database\QueryException;
 use Illuminate\Http\Request;
@@ -38,22 +37,12 @@ class TestTransactionController extends Controller
     {
         $entryTransactions = EntryTransaction::whereNotIn('transaction_number', OutTransaction::pluck('entry_transaction_id'))
             ->latest()
-            ->paginate(5)
+            ->paginate(10)
             ->withQueryString()
             ->through(fn($transactionIn) => [
                 'id' => $transactionIn->id,
-                'createdAt' => $transactionIn->created_at,
-                'transactionNumber' => $transactionIn->transaction_number,
-            ]);
-
-        $outTransactions = OutTransaction::latest()
-            ->paginate(5)
-            ->withQueryString()
-            ->through(fn($transactionOut) => [
-                'id' => $transactionOut->id,
-                'createdAt' => $transactionOut->created_at,
-                'platNumber' => $transactionOut->plat_number,
-                'entryTransactionId' => $transactionOut->entry_transaction_id,
+                'entryCar' => $transactionIn->created_at,
+                'transactionNumber' => $transactionIn->transaction_number
             ]);
 
         $typeVehicles = function () {
@@ -62,20 +51,19 @@ class TestTransactionController extends Controller
             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
                 ]);
             }
         };
 
         return inertia('test-transaction/Create.vue', compact([
             'entryTransactions',
-            'outTransactions',
-            'typeVehicles',
+            'typeVehicles'
         ]));
     }
 
@@ -106,12 +94,12 @@ class TestTransactionController extends Controller
                     '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'));
             } else {
-                /**
+                /*
                  * Pseudo code
                  *
                  * waktu_kendaraan_masuk
@@ -132,32 +120,6 @@ class TestTransactionController extends Controller
                  *
                  */
 
-                $parkingFee = ParkingFee::get();
-
-                $parkingTime = Helper::addPrevValue($parkingFee->pluck('time_period')->toArray());
-
-                $parkingPrice = Helper::addPrevValue($parkingFee->pluck('price')->toArray());
-
-                $entryTransaction = EntryTransaction::where('transaction_number', $request->entry_transaction_id)->first();
-
-                $vehicleEntryTime = $entryTransaction->getRawOriginal('created_at');
-
-                $longParkingPerHour = ceil(Carbon::parse($vehicleEntryTime)->floatDiffInRealHours(now()));
-
-                $totalParkingPerDay = $longParkingPerHour > 24 ? ceil($longParkingPerHour / 24) : 0;
-
-                $totalPriceParkingPerDay = $totalParkingPerDay * end($parkingPrice);
-
-                $totalPriceParkingToday = 0;
-
-                foreach ($parkingTime as $index => $time) {
-                    if ($time >= $longParkingPerHour) {
-                        $totalPriceParkingToday = $parkingPrice[$index];
-
-                        break;
-                    }
-                }
-
                 DB::beginTransaction();
 
                 try {
@@ -165,12 +127,12 @@ class TestTransactionController extends Controller
                         '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' => $totalParkingPerDay ? $totalPriceParkingPerDay : $totalPriceParkingToday,
+                        'amount' => ParkingFeeService::totalPriceParking($request->entry_transaction_id)
                     ]);
 
                     DB::commit();
@@ -184,7 +146,7 @@ class TestTransactionController extends Controller
             }
         } else {
             EntryTransaction::create([
-                'transaction_number' => Str::uuid(),
+                'transaction_number' => Str::uuid()
             ]);
 
             return back()->with('success', __('messages.success.store.transaction'));

app/Http/Controllers/TransactionController.php

@@ -3,12 +3,10 @@
 namespace App\Http\Controllers;
 
 use App\Http\Requests\Transaction\StoreTransactionRequest;
-use App\Models\EntryTransaction;
 use App\Models\OutTransaction;
-use App\Models\ParkingFee;
 use App\Models\TypeVehicle;
 use App\Models\Vehicle;
-use App\Services\Helper;
+use App\Services\ParkingFeeService;
 use Carbon\Carbon;
 use Illuminate\Database\QueryException;
 use Illuminate\Http\Request;
@@ -33,24 +31,21 @@ class TransactionController extends Controller
      */
     public function create()
     {
-        $entryTransactions = EntryTransaction::whereNotIn('transaction_number', OutTransaction::pluck('entry_transaction_id'))
-            ->latest()
-            ->get()
-            ->take(10)
-            ->transform(fn($transactionIn) => [
-                'id' => $transactionIn->id,
-                'createdAt' => $transactionIn->created_at,
-                'transactionNumber' => $transactionIn->transaction_number,
-            ]);
-
         $outTransactions = OutTransaction::latest()
             ->get()
             ->take(10)
             ->transform(fn($transactionOut) => [
                 'id' => $transactionOut->id,
-                'createdAt' => $transactionOut->created_at,
+                'entryCar' => $transactionOut->entryTransaction->created_at,
+                'outCar' => $transactionOut->created_at,
+                'totalTimeParking' => Carbon::parse(
+                    $transactionOut->getRawOriginal('created_at')
+                )->diffForHumans(
+                    $transactionOut->entryTransaction->getRawOriginal('created_at')
+                ),
+                'totalPriceParking' => ParkingFeeService::totalPriceParkingString($transactionOut->entry_transaction_id),
                 'platNumber' => $transactionOut->plat_number,
-                'entryTransactionId' => $transactionOut->entry_transaction_id,
+                'entryTransactionId' => $transactionOut->entry_transaction_id
             ]);
 
         $typeVehicles = function () {
@@ -59,20 +54,19 @@ class TransactionController extends Controller
             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
                 ]);
             }
         };
 
         return inertia('transaction/Create.vue', compact([
-            'entryTransactions',
             'outTransactions',
-            'typeVehicles',
+            'typeVehicles'
         ]));
     }
 
@@ -99,37 +93,11 @@ class TransactionController extends Controller
                 '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'));
         } else {
-            $parkingFee = ParkingFee::get();
-
-            $parkingTime = Helper::addPrevValue($parkingFee->pluck('time_period')->toArray());
-
-            $parkingPrice = Helper::addPrevValue($parkingFee->pluck('price')->toArray());
-
-            $entryTransaction = EntryTransaction::where('transaction_number', $request->entry_transaction_id)->first();
-
-            $vehicleEntryTime = $entryTransaction->getRawOriginal('created_at');
-
-            $longParkingPerHour = ceil(Carbon::parse($vehicleEntryTime)->floatDiffInRealHours(now()));
-
-            $totalParkingPerDay = $longParkingPerHour > 24 ? ceil($longParkingPerHour / 24) : 0;
-
-            $totalPriceParkingPerDay = $totalParkingPerDay * end($parkingPrice);
-
-            $totalPriceParkingToday = 0;
-
-            foreach ($parkingTime as $index => $time) {
-                if ($time >= $longParkingPerHour) {
-                    $totalPriceParkingToday = $parkingPrice[$index];
-
-                    break;
-                }
-            }
-
             DB::beginTransaction();
 
             try {
@@ -137,12 +105,12 @@ class TransactionController extends Controller
                     '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' => $totalParkingPerDay ? $totalPriceParkingPerDay : $totalPriceParkingToday,
+                    'amount' => ParkingFeeService::totalPriceParking($request->entry_transaction_id)
                 ]);
 
                 DB::commit();

app/Models/EntryTransaction.php

@@ -13,13 +13,13 @@ class EntryTransaction extends Model
 
     protected $fillable = [
         'capture_vehicle',
-        'transaction_number',
+        'transaction_number'
     ];
 
     protected function createdAt(): Attribute
     {
         return Attribute::make(
-            get:fn($value) => Carbon::parse($value)->translatedFormat('l d/m/Y')
+            get:fn($value) => Carbon::parse($value)->translatedFormat('l d/m/Y H:i:s')
         );
     }
 

app/Models/OutTransaction.php

@@ -17,13 +17,13 @@ class OutTransaction extends Model
         'price',
         'entry_transaction_id',
         'type_vehicle_id',
-        'user_id',
+        'user_id'
     ];
 
     protected function createdAt(): Attribute
     {
         return Attribute::make(
-            get:fn($value) => Carbon::parse($value)->translatedFormat('l d/m/Y')
+            get:fn($value) => Carbon::parse($value)->translatedFormat('l d/m/Y H:i:s')
         );
     }
 
@@ -38,4 +38,9 @@ class OutTransaction extends Model
     {
         return $this->hasOne(Mutation::class);
     }
+
+    public function entryTransaction()
+    {
+        return $this->belongsTo(EntryTransaction::class, 'entry_transaction_id', 'transaction_number');
+    }
 }

app/Services/Helper.php

@@ -1,21 +0,0 @@
-<?php
-
-namespace App\Services;
-
-class Helper
-{
-    public static function addPrevValue(array $h): array
-    {
-        $i = [];
-
-        for ($j = 0; $j <= count($h) - 1; $j++) {
-            if ($j === 0) {
-                array_push($i, $h[$j]);
-            } else {
-                array_push($i, $i[$j - 1] + $h[$j]);
-            }
-        }
-
-        return $i;
-    }
-}

app/Services/HelperService.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Services;
+
+class HelperService
+{
+    public static function addPrevValue($array)
+    {
+        $i = [];
+
+        for ($j = 0; $j <= count($array) - 1; $j++) {
+            if ($j === 0) {
+                array_push($i, $array[$j]);
+            } else {
+                array_push($i, $i[$j - 1] + $array[$j]);
+            }
+        }
+
+        return $i;
+    }
+
+    public static function setRupiahFormat($num, $sign = false)
+    {
+        if ($sign) {
+            if ($num < 0) {
+                return '-Rp' . number_format(abs($num), 0, ',', '.');
+            } else {
+                return 'Rp' . number_format($num, 0, ',', '.');
+            }
+        } else {
+            if ($num < 0) {
+                return '-' . number_format(abs($num), 0, ',', '.');
+            } else {
+                return number_format($num, 0, ',', '.');
+            }
+        }
+    }
+}

app/Services/ParkingFeeService.php

@@ -0,0 +1,90 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\EntryTransaction;
+use App\Models\ParkingFee;
+use App\Services\HelperService;
+use Carbon\Carbon;
+
+class ParkingFeeService
+{
+    private static function parkingFee()
+    {
+        return ParkingFee::get();
+    }
+
+    private static function parkingPrice()
+    {
+        return HelperService::addPrevValue(self::parkingFee()
+                ->pluck('price')->toArray());
+    }
+
+    private static function parkingTime()
+    {
+        return HelperService::addPrevValue(self::parkingFee()
+                ->pluck('time_period')->toArray());
+    }
+
+    public static function totalTimeParkingPerToday($entryTransactionId)
+    {
+        $entryTransaction = EntryTransaction::where('transaction_number',
+            $entryTransactionId)->first();
+
+        $vehicleEntryTime = $entryTransaction->getRawOriginal('created_at');
+
+        return ceil(Carbon::parse($vehicleEntryTime)->floatDiffInRealHours(
+            now()
+        ));
+    }
+
+    public static function totalTimeParkingPerDay($entryTransactionId)
+    {
+        return self::totalTimeParkingPerToday($entryTransactionId) > 24
+            ? ceil(self::totalTimeParkingPerToday($entryTransactionId) / 24)
+            : 0;
+    }
+
+    public static function totalPriceParkingPerDay($entryTransactionId)
+    {
+        $parkingPrice = self::parkingPrice();
+
+        return self::totalTimeParkingPerDay($entryTransactionId) *
+        end($parkingPrice);
+    }
+
+    public static function totalPriceParkingPerToday($entryTransactionId)
+    {
+        $totalPriceParkingToday = 0;
+
+        foreach (self::parkingTime() as $index => $time) {
+            if ($time >= self::totalTimeParkingPerToday($entryTransactionId)) {
+                $totalPriceParkingToday = self::parkingPrice()[$index];
+
+                break;
+            }
+        }
+
+        return $totalPriceParkingToday;
+    }
+
+    public static function totalTimeParking($entryTransactionId)
+    {
+        return self::totalTimeParkingPerDay($entryTransactionId)
+            ? self::totalTimeParkingPerDay($entryTransactionId) . ' Hari'
+            : self::totalTimeParkingPerToday($entryTransactionId) . ' Jam';
+
+    }
+
+    public static function totalPriceParking($entryTransactionId)
+    {
+        return self::totalTimeParkingPerDay($entryTransactionId)
+            ? self::totalPriceParkingPerDay($entryTransactionId)
+            : self::totalPriceParkingPerToday($entryTransactionId);
+    }
+
+    public static function totalPriceParkingString($entryTransactionId)
+    {
+        return HelperService::setRupiahFormat(self::totalPriceParking($entryTransactionId), true);
+    }
+}

public/js/resources_js_pages_test-transaction_Entry_vue.js

@@ -247,26 +247,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "InTable": () => (/* binding */ InTable),
-/* harmony export */   "OutTable": () => (/* binding */ OutTable)
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-var InTable = [{
-  field: 'createdAt',
-  header: 'In'
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([{
+  field: 'entryCar',
+  header: 'Kendaraan Masuk'
 }, {
   field: 'transactionNumber',
-  header: 'Parking ID'
-}];
-var OutTable = [{
-  field: 'createdAt',
-  header: 'Out'
-}, {
-  field: 'platNumber',
-  header: 'Plat Kendaraan'
-}, {
-  field: 'entryTransactionId',
-  header: 'Parking ID'
-}];
+  header: 'Nomor Transaksi'
+}]);
 
 /***/ }),
 

public/js/resources_js_pages_test-transaction_Out_vue.js

@@ -743,26 +743,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "InTable": () => (/* binding */ InTable),
-/* harmony export */   "OutTable": () => (/* binding */ OutTable)
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-var InTable = [{
-  field: 'createdAt',
-  header: 'In'
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([{
+  field: 'entryCar',
+  header: 'Kendaraan Masuk'
 }, {
   field: 'transactionNumber',
-  header: 'Parking ID'
-}];
-var OutTable = [{
-  field: 'createdAt',
-  header: 'Out'
-}, {
-  field: 'platNumber',
-  header: 'Plat Kendaraan'
-}, {
-  field: 'entryTransactionId',
-  header: 'Parking ID'
-}];
+  header: 'Nomor Transaksi'
+}]);
 
 /***/ }),
 

public/js/resources_js_pages_test-transaction_TableHeader_js.js

@@ -9,26 +9,15 @@
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "InTable": () => (/* binding */ InTable),
-/* harmony export */   "OutTable": () => (/* binding */ OutTable)
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-var InTable = [{
-  field: 'createdAt',
-  header: 'In'
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([{
+  field: 'entryCar',
+  header: 'Kendaraan Masuk'
 }, {
   field: 'transactionNumber',
-  header: 'Parking ID'
-}];
-var OutTable = [{
-  field: 'createdAt',
-  header: 'Out'
-}, {
-  field: 'platNumber',
-  header: 'Plat Kendaraan'
-}, {
-  field: 'entryTransactionId',
-  header: 'Parking ID'
-}];
+  header: 'Nomor Transaksi'
+}]);
 
 /***/ })
 

public/js/resources_js_pages_transaction_TableHeader_js.js

@@ -9,26 +9,27 @@
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "InTable": () => (/* binding */ InTable),
-/* harmony export */   "OutTable": () => (/* binding */ OutTable)
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-var InTable = [{
-  field: 'createdAt',
-  header: 'In'
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([{
+  field: 'entryCar',
+  header: 'Kendaraan Masuk'
 }, {
-  field: 'transactionNumber',
-  header: 'Parking ID'
-}];
-var OutTable = [{
-  field: 'createdAt',
-  header: 'Out'
+  field: 'outCar',
+  header: 'Kendaraan Keluar'
+}, {
+  field: 'totalTimeParking',
+  header: 'Lama Parkir'
+}, {
+  field: 'totalPriceParking',
+  header: 'Biaya Parkir'
 }, {
   field: 'platNumber',
   header: 'Plat Kendaraan'
 }, {
   field: 'entryTransactionId',
-  header: 'Parking ID'
-}];
+  header: 'Nomor Transaksi'
+}]);
 
 /***/ })
 

public/js/vue.js

@@ -21476,7 +21476,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, "/*\n  Default style\n*/\n* {\n  box-sizing: border-box;\n}\n\nhtml {\n  height: 100%;\n  font-size: 14px;\n}\n\nbody {\n  font-family: var(--font-family);\n  color: var(--text-color);\n  background-color: var(--surface-ground);\n  margin: 0;\n  padding: 0;\n  min-height: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.layout-topbar-menu-tooltip.p-tooltip {\n  position: absolute;\n  z-index: 997;\n  display: none;\n  padding: 0.25em 0.5rem;\n  max-width: 12.5rem;\n}\n\n/*\n  Typography\n*/\na {\n  text-decoration: none;\n  color: var(--primary-color);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin: 0.5rem 0 0.5rem 0;\n  font-family: inherit;\n  font-weight: 500;\n  line-height: 1.2;\n  color: inherit;\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\nh1 {\n  font-size: 2.5rem;\n}\n\nh2 {\n  font-size: 2rem;\n}\n\nh3 {\n  font-size: 1.75rem;\n}\n\nh4 {\n  font-size: 1.5rem;\n}\n\nh5 {\n  font-size: 1.25rem;\n}\n\nh6 {\n  font-size: 1rem;\n}\n\nmark {\n  background: #fff8e1;\n  padding: 0.25rem 0.4rem;\n  border-radius: 12px;\n  font-family: monospace;\n}\n\nblockquote {\n  margin: 1rem 0;\n  padding: 0 2rem;\n  border-left: 4px solid #90a4ae;\n}\n\nhr {\n  border-top: solid var(--surface-border);\n  border-width: 1px 0 0 0;\n  margin: 1rem 0;\n}\n\np {\n  margin: 0 0 1rem 0;\n  line-height: 1.5;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, "/*\n  Default style\n*/\n* {\n  box-sizing: border-box;\n}\n\nhtml {\n  height: 100%;\n  font-size: 14px;\n}\n\nbody {\n  font-family: var(--font-family);\n  color: var(--text-color);\n  background-color: var(--surface-ground);\n  margin: 0;\n  padding: 0;\n  min-height: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.layout-topbar-menu-tooltip.p-tooltip {\n  position: absolute;\n  z-index: 997;\n  display: none;\n  padding: 0.25em 0.5rem;\n  max-width: 12.5rem;\n}\n\n/*\n  Typography\n*/\na {\n  text-decoration: none;\n  color: var(--primary-color);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin: 0.5rem 0 0.5rem 0;\n  font-family: inherit;\n  font-weight: 500;\n  line-height: 1.2;\n  color: inherit;\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\nh1 {\n  font-size: 2.5rem;\n}\n\nh2 {\n  font-size: 2rem;\n}\n\nh3 {\n  font-size: 1.75rem;\n}\n\nh4 {\n  font-size: 1.5rem;\n}\n\nh5 {\n  font-size: 1.25rem;\n}\n\nh6 {\n  font-size: 1rem;\n}\n\nmark {\n  background: #fff8e1;\n  padding: 0.25rem 0.4rem;\n  border-radius: 12px;\n  font-family: monospace;\n}\n\nblockquote {\n  margin: 1rem 0;\n  padding: 0 2rem;\n  border-left: 4px solid #90a4ae;\n}\n\nhr {\n  border-top: solid var(--surface-border);\n  border-width: 1px 0 0 0;\n  margin: 1rem 0;\n}\n\np {\n  margin: 0 0 1rem 0;\n  line-height: 1.5;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n.p-message {\n  margin-top: 0px;\n}\n", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -58213,22 +58213,6 @@ var map = {
 		"./resources/js/pages/test-transaction/Create.vue",
 		"resources_js_pages_test-transaction_Create_vue"
 	],
-	"./test-transaction/Entry": [
-		"./resources/js/pages/test-transaction/Entry.vue",
-		"resources_js_pages_test-transaction_Entry_vue"
-	],
-	"./test-transaction/Entry.vue": [
-		"./resources/js/pages/test-transaction/Entry.vue",
-		"resources_js_pages_test-transaction_Entry_vue"
-	],
-	"./test-transaction/Out": [
-		"./resources/js/pages/test-transaction/Out.vue",
-		"resources_js_pages_test-transaction_Out_vue"
-	],
-	"./test-transaction/Out.vue": [
-		"./resources/js/pages/test-transaction/Out.vue",
-		"resources_js_pages_test-transaction_Out_vue"
-	],
 	"./test-transaction/TableHeader": [
 		"./resources/js/pages/test-transaction/TableHeader.js",
 		"resources_js_pages_test-transaction_TableHeader_js"
@@ -58514,7 +58498,7 @@ module.exports = JSON.parse('{"name":"axios","version":"0.21.4","description":"P
 /******/ 		// 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":"1757456faf4c3181","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_parkingfee_Create_vue":"a63c4b9f335fb0bf","resources_js_pages_test-transaction_Create_vue":"74dce466e27dba59","resources_js_pages_test-transaction_Entry_vue":"a950457a89c8b7c8","resources_js_pages_test-transaction_Out_vue":"4051ca6620a7adad","resources_js_pages_test-transaction_TableHeader_js":"61b09c7914d5ddac","resources_js_pages_topup_Create_vue":"55f0a1d108219169","resources_js_pages_topup_Index_vue":"04db86d01aba75e6","resources_js_pages_topup_Show_vue":"92555b7c31076f4b","resources_js_pages_topup_tableHeader_js":"187746378ee18327","resources_js_pages_transaction_Create_vue":"afa86117f9ab8dc7","resources_js_pages_transaction_TableHeader_js":"6e5b985a7a8dc257","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":"1757456faf4c3181","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_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":"04db86d01aba75e6","resources_js_pages_topup_Show_vue":"92555b7c31076f4b","resources_js_pages_topup_tableHeader_js":"187746378ee18327","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] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/assets/styles/sass/global.scss

@@ -105,3 +105,7 @@ p {
     margin-bottom: 0;
   }
 }
+
+.p-message {
+  margin-top: 0px;
+}

resources/js/pages/test-transaction/Create.vue

@@ -1,30 +1,67 @@
 <script setup>
-import Entry from './Entry.vue'
-import Out from './Out.vue'
+import { useForm } from '@inertiajs/inertia-vue3'
+import TableHeader from './TableHeader'
+import AppPagination from '@/components/AppPagination.vue'
 import DashboardLayout from '@/layouts/DashboardLayout.vue'
+import { onMounted } from 'vue'
 
 defineProps({
   entryTransactions: Object,
-  entryTransactionCount: Number,
-  outTransactions: Object,
-  outTransactionCount: Number,
   typeVehicles: Object,
 })
+
+const form = useForm({})
+
+const submit = () => {
+  form.post(route('test-transactions.store'))
+}
 </script>
 <template>
   <DashboardLayout>
     <div class="grid">
       <div class="col-12 md:col-6">
-        <Entry :data="entryTransactions" :data-count="entryTransactionCount" />
-      </div>
-      <div class="col-12 md:col-6">
-        <Out
-          :data="outTransactions"
-          :data-count="outTransactionCount"
-          :type-vehicles="typeVehicles"
-          :entry-transaction-data="entryTransactions"
-          :entry-transaction-count="entryTransactionCount"
-        />
+        <Card>
+          <template #title> <h1>Entry</h1> </template>
+          <template #content>
+            <DataTable
+              responsiveLayout="scroll"
+              columnResizeMode="expand"
+              :value="entryTransactions.data"
+              :rowHover="true"
+              :stripedRows="true"
+            >
+              <template #header>
+                <span style="color: var(--primary-color)">
+                  Maksimal ditampilkan :
+                </span>
+                {{ entryTransactions.per_page }}
+                <br />
+                <span style="color: var(--primary-color)">Ditampilkan :</span>
+                {{ Object.keys(entryTransactions.data).length }}
+              </template>
+
+              <Column
+                v-for="value in TableHeader"
+                :field="value.field"
+                :header="value.header"
+                :key="value.field"
+              />
+            </DataTable>
+
+            <AppPagination :links="entryTransactions.links" />
+          </template>
+          <template #footer>
+            <div class="flex flex-column md:flex-row justify-content-end">
+              <Button
+                label="Car Entry"
+                icon="pi pi-check"
+                class="p-button-outlined"
+                :disabled="form.processing"
+                @click="submit"
+              />
+            </div>
+          </template>
+        </Card>
       </div>
     </div>
   </DashboardLayout>

resources/js/pages/test-transaction/Entry.vue

@@ -1,52 +0,0 @@
-<script setup>
-import { useForm } from '@inertiajs/inertia-vue3'
-import AppPagination from '@/components/AppPagination.vue'
-
-import { InTable } from './TableHeader'
-
-defineProps({
-  data: Object,
-})
-
-const form = useForm({})
-
-const submit = () => {
-  form.post(route('test-transactions.store'))
-}
-</script>
-<template>
-  <Card>
-    <template #title> <h1>Entry</h1> </template>
-    <template #content>
-      <DataTable
-        responsiveLayout="scroll"
-        columnResizeMode="expand"
-        :value="data.data"
-        :rowHover="true"
-        :stripedRows="true"
-      >
-        <template #header>
-          <span style="color: var(--primary-color)">Maksimal ditampilkan :</span> 5
-          <br />
-          <span style="color: var(--primary-color)">Ditampilkan :</span>
-          {{ Object.keys(data.data).length }}
-        </template>
-
-        <Column v-for="inTable in InTable" :field="inTable.field" :header="inTable.header" :key="inTable.field" />
-      </DataTable>
-
-      <AppPagination :links="data.links" />
-    </template>
-    <template #footer>
-      <div class="flex flex-column md:flex-row justify-content-end">
-        <Button
-          label="Car Entry"
-          icon="pi pi-check"
-          class="p-button-outlined"
-          :disabled="form.processing"
-          @click="submit"
-        />
-      </div>
-    </template>
-  </Card>
-</template>

resources/js/pages/test-transaction/Out.vue

@@ -1,160 +0,0 @@
-<script setup>
-import { reactive, watch, onMounted } from 'vue'
-import { Inertia } from '@inertiajs/inertia'
-import { useForm } from '@inertiajs/inertia-vue3'
-import AppInputText from '@/components/AppInputText.vue'
-import AppDropdown from '@/components/AppDropdown.vue'
-import AppPagination from '@/components/AppPagination.vue'
-
-import { InTable, OutTable } from './TableHeader'
-
-const props = defineProps({
-  data: Object,
-  typeVehicles: Object,
-  entryTransactionData: Object,
-  entryTransactionCount: Number,
-})
-
-watch(
-  () => props.entryTransactionData,
-  () => {
-    setLocalEntryTransaction()
-
-    form.reset()
-  }
-)
-
-onMounted(() => {
-  setLocalEntryTransaction()
-})
-
-const localEntryTransactions = reactive([])
-
-const setLocalEntryTransaction = () => {
-  localEntryTransactions.splice(0)
-  localEntryTransactions.push(...props.entryTransactionData.data)
-}
-
-const copy = (data) => {
-  form.entry_transaction_id = data.transactionNumber
-
-  const filterLocalEntryTransactions = props.entryTransactionData.data.filter(
-    (val) => val.transactionNumber !== data.transactionNumber
-  )
-
-  localEntryTransactions.splice(0)
-  localEntryTransactions.push(...filterLocalEntryTransactions)
-}
-
-const form = useForm({
-  id: 2,
-  plat_number: null,
-  entry_transaction_id: null,
-  type_vehicle_id: null,
-})
-
-watch(
-  () => form.plat_number,
-  () => {
-    Inertia.reload({ only: ['typeVehicles'], data: { plat_number: form.plat_number } })
-  }
-)
-
-const submit = () => {
-  form.post(route('test-transactions.store'))
-}
-</script>
-<template>
-  <Card>
-    <template #title> <h1>Out</h1> </template>
-    <template #content>
-      <DataTable
-        responsiveLayout="scroll"
-        columnResizeMode="expand"
-        :value="localEntryTransactions"
-        :rowHover="true"
-        :stripedRows="true"
-      >
-        <template #header>
-          <span style="color: var(--primary-color)">Maksimal ditampilkan :</span> 5
-          <br />
-          <span style="color: var(--primary-color)">Ditampilkan :</span>
-          {{ Object.keys(data.data).length }}
-        </template>
-
-        <Column v-for="inTable in InTable" :field="inTable.field" :header="inTable.header" :key="inTable.field" />
-
-        <Column>
-          <template #body="{ data }">
-            <Button icon="pi pi-copy" class="p-button-rounded p-button-text" @click="copy(data)" />
-          </template>
-        </Column>
-      </DataTable>
-
-      <AppPagination :links="entryTransactionData.links" />
-
-      <Divider type="dashed" />
-
-      <div class="grid">
-        <div class="col-12 md:col-6">
-          <AppInputText
-            v-model="form.plat_number"
-            label="Vehicle Plate"
-            placeholder="vehicle plate"
-            :error="form.errors.plat_number"
-          />
-        </div>
-        <div class="col-12 md:col-6">
-          <AppInputText
-            disabled
-            v-model="form.entry_transaction_id"
-            label="Transaction number"
-            placeholder="transaction number"
-            :error="form.errors.entry_transaction_id"
-          />
-        </div>
-        <div class="col-12 md:col-6">
-          <AppDropdown
-            v-model="form.type_vehicle_id"
-            label="Type Vehicle"
-            placeholder="type vehicle"
-            :options="typeVehicles"
-            :error="form.errors.type_vehicle_id"
-          />
-        </div>
-      </div>
-
-      <Divider type="dashed" />
-
-      <DataTable
-        responsiveLayout="scroll"
-        columnResizeMode="expand"
-        :value="data.data"
-        :rowHover="true"
-        :stripedRows="true"
-      >
-        <template #header>
-          <span style="color: var(--red-600)">Maksimal ditampilkan :</span> 5
-          <br />
-          <span style="color: var(--red-600)">Ditampilkan :</span>
-          {{ Object.keys(data.data).length }}
-        </template>
-
-        <Column v-for="outTable in OutTable" :field="outTable.field" :header="outTable.header" :key="outTable.field" />
-      </DataTable>
-
-      <AppPagination :links="data.links" />
-    </template>
-    <template #footer>
-      <div class="flex flex-column md:flex-row justify-content-end">
-        <Button
-          label="Car Out"
-          icon="pi pi-check"
-          class="p-button-outlined"
-          :disabled="form.processing"
-          @click="submit"
-        />
-      </div>
-    </template>
-  </Card>
-</template>

resources/js/pages/test-transaction/TableHeader.js

@@ -1,10 +1,4 @@
-export const InTable = [
-  { field: 'createdAt', header: 'In' },
-  { field: 'transactionNumber', header: 'Parking ID' },
-]
-
-export const OutTable = [
-  { field: 'createdAt', header: 'Out' },
-  { field: 'platNumber', header: 'Plat Kendaraan' },
-  { field: 'entryTransactionId', header: 'Parking ID' },
+export default [
+  { field: 'entryCar', header: 'Kendaraan Masuk' },
+  { field: 'transactionNumber', header: 'Nomor Transaksi' },
 ]

resources/js/pages/transaction/Create.vue

@@ -3,13 +3,13 @@ import { watch } from 'vue'
 import { Inertia } from '@inertiajs/inertia'
 import { useForm } from '@inertiajs/inertia-vue3'
 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 { InTable, OutTable } from './TableHeader'
+import IndexTable from './TableHeader'
 
 defineProps({
-  entryTransactions: Object,
   outTransactions: Object,
   typeVehicles: Object,
 })
@@ -25,7 +25,10 @@ useFormErrorReset(form)
 watch(
   () => form.plat_number,
   () => {
-    Inertia.reload({ only: ['typeVehicles'], data: { plat_number: form.plat_number } })
+    Inertia.reload({
+      only: ['typeVehicles'],
+      data: { plat_number: form.plat_number },
+    })
   }
 )
 
@@ -36,7 +39,7 @@ const submit = () => {
 <template>
   <DashboardLayout>
     <div class="grid">
-      <div class="col-12 md:col-6">
+      <div class="col-12">
         <Card>
           <template #title> Tambah Transaksi Keluar </template>
           <template #content>
@@ -81,65 +84,36 @@ const submit = () => {
           </template>
         </Card>
       </div>
-      <div class="col-12 md:col-6">
-        <div class="grid">
-          <div class="col-12">
-            <Card>
-              <template #title> Kendaraan Masuk </template>
-              <template #content>
-                <DataTable
-                  responsiveLayout="scroll"
-                  columnResizeMode="expand"
-                  :value="entryTransactions"
-                  :rowHover="true"
-                  :stripedRows="true"
-                >
-                  <template #header>
-                    <span style="color: var(--primary-color)">Maksimal ditampilkan :</span> 10
-                    <br />
-                    <span style="color: var(--primary-color)">Ditampilkan :</span>
-                    {{ Object.keys(entryTransactions).length }}
-                  </template>
-
-                  <Column
-                    v-for="inTable in InTable"
-                    :field="inTable.field"
-                    :header="inTable.header"
-                    :key="inTable.field"
-                  />
-                </DataTable>
+      <div class="col-12">
+        <Card>
+          <template #title> Kendaraan Keluar </template>
+          <template #content>
+            <DataTable
+              responsiveLayout="scroll"
+              columnResizeMode="expand"
+              :value="outTransactions"
+              :rowHover="true"
+              :stripedRows="true"
+            >
+              <template #header>
+                <span style="color: var(--red-600)">
+                  Maksimal ditampilkan :
+                </span>
+                10
+                <br />
+                <span style="color: var(--red-600)">Ditampilkan :</span>
+                {{ Object.keys(outTransactions).length }}
               </template>
-            </Card>
-          </div>
-          <div class="col-12">
-            <Card>
-              <template #title> Kendaraan Keluar </template>
-              <template #content>
-                <DataTable
-                  responsiveLayout="scroll"
-                  columnResizeMode="expand"
-                  :value="outTransactions"
-                  :rowHover="true"
-                  :stripedRows="true"
-                >
-                  <template #header>
-                    <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="outTable in OutTable"
-                    :field="outTable.field"
-                    :header="outTable.header"
-                    :key="outTable.field"
-                  />
-                </DataTable>
-              </template>
-            </Card>
-          </div>
-        </div>
+              <Column
+                v-for="value in IndexTable"
+                :field="value.field"
+                :header="value.header"
+                :key="value.field"
+              />
+            </DataTable>
+          </template>
+        </Card>
       </div>
     </div>
   </DashboardLayout>

resources/js/pages/transaction/TableHeader.js

@@ -1,10 +1,8 @@
-export const InTable = [
-  { field: 'createdAt', header: 'In' },
-  { field: 'transactionNumber', header: 'Parking ID' },
-]
-
-export const OutTable = [
-  { field: 'createdAt', header: 'Out' },
+export default [
+  { field: 'entryCar', header: 'Kendaraan Masuk' },
+  { field: 'outCar', header: 'Kendaraan Keluar' },
+  { field: 'totalTimeParking', header: 'Lama Parkir' },
+  { field: 'totalPriceParking', header: 'Biaya Parkir' },
   { field: 'platNumber', header: 'Plat Kendaraan' },
-  { field: 'entryTransactionId', header: 'Parking ID' },
+  { field: 'entryTransactionId', header: 'Nomor Transaksi' },
 ]