feat: master expense

app/Http/Controllers/ExpenseController.php

@@ -0,0 +1,135 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\Expense\StoreExpenseRequest;
+use App\Models\Expense;
+use Illuminate\Database\QueryException;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Inertia\Inertia;
+
+class ExpenseController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Inertia\Response
+     */
+    public function index()
+    {
+        return inertia('expense/Index', [
+            'filters' => request()->all('startDate', 'endDate', 'outlet'),
+            'expenses' => Expense::filter(request()->only('startDate', 'endDate', 'outlet'))
+                ->latest()
+                ->paginate(10)
+                ->withQueryString()
+                ->through(fn($expense) => [
+                    'id' => $expense->id,
+                    'createdAt' => $expense->created_at,
+                    'amount' => $expense->amount,
+                    'user' => $expense->user->name,
+                ]),
+        ]);
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function create()
+    {
+        return inertia('expense/Create');
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function store(StoreExpenseRequest $request)
+    {
+        DB::beginTransaction();
+
+        try {
+            $expense = Expense::create([
+                'description' => $request->description,
+                'amount' => $request->amount,
+                'user_id' => $request->user()->id,
+            ]);
+
+            $expense->mutation()->create([
+                'type' => 2,
+                'amount' => $expense->getRawOriginal('amount'),
+            ]);
+
+            DB::commit();
+
+            return back()->with('success', __('messages.success.store.expense'));
+        } catch (QueryException $e) {
+
+            DB::rollBack();
+
+            return back()->with('error', __('messages.error.store.expense'));
+        }
+    }
+
+    /**
+     * Display the specified resource.
+     *
+     * @param  Expense  $expense
+     * @return \Inertia\Response
+     */
+    public function show(Expense $expense)
+    {
+        return inertia('expense/Show', [
+            'expense' => [
+                'created_at' => $expense->created_at,
+                'amount' => $expense->amount,
+                'description' => $expense->description,
+                'user' => [
+                    'name' => $expense->user->name,
+                    'phone' => $expense->user->phone,
+                    'email' => $expense->user->email,
+                ],
+            ],
+        ]);
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function edit($id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function update(Request $request, $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy($id)
+    {
+        //
+    }
+}

app/Http/Requests/Expense/StoreExpenseRequest.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Requests\Expense;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreExpenseRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'description' => 'required',
+            'amount' => 'required|numeric',
+        ];
+    }
+}

app/Models/Expense.php

@@ -2,6 +2,9 @@
 
 namespace App\Models;
 
+use App\Services\CurrencyFormatService;
+use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 
@@ -14,4 +17,37 @@ class Expense extends Model
         'amount',
         'user_id',
     ];
+
+    protected function createdAt(): Attribute
+    {
+        return Attribute::make(
+            get:fn($value) => Carbon::parse($value)->translatedFormat('l d/m/Y')
+        );
+    }
+
+    protected function amount(): Attribute
+    {
+        return Attribute::make(
+            get:fn($value) => (new CurrencyFormatService)->setRupiahFormat($value, true)
+        );
+    }
+
+    public function user()
+    {
+        return $this->belongsTo(User::class);
+    }
+
+    public function mutation()
+    {
+        return $this->hasOne(Mutation::class);
+    }
+
+    public function scopeFilter($query, array $filters)
+    {
+        $query->when($filters['startDate'] ?? null, function ($query, $date) {
+            $query->whereDate('created_at', '>=', $date);
+        })->when($filters['endDate'] ?? null, function ($query, $date) {
+            $query->whereDate('created_at', '<=', $date);
+        });
+    }
 }

app/Services/CurrencyFormatService.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Services;
+
+class CurrencyFormatService
+{
+    public function setRupiahFormat(int $number, bool $sign = false)
+    {
+        if ($sign) {
+            if ($number < 0) {
+                return '-Rp' . number_format(abs($number), 0, ',', '.');
+            } else {
+                return 'Rp' . number_format($number, 0, ',', '.');
+            }
+        } else {
+            if ($number < 0) {
+                return '-' . number_format(abs($number), 0, ',', '.');
+            } else {
+                return number_format($number, 0, ',', '.');
+            }
+        }
+    }
+}

package-lock.json

@@ -20,6 +20,7 @@
         "primeflex": "^3.1.3",
         "primeicons": "^5.0.0",
         "primevue": "^3.12.1",
+        "quill": "^1.3.7",
         "resolve-url-loader": "^5.0.0",
         "sass": "^1.49.8",
         "sass-loader": "^12.1.0",
@@ -3112,6 +3113,15 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/clone-deep": {
       "version": "4.0.1",
       "dev": true,
@@ -3682,6 +3692,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/deep-equal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
+      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "dev": true,
+      "dependencies": {
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.1",
+        "is-regex": "^1.0.4",
+        "object-is": "^1.0.1",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/deepmerge": {
       "version": "4.2.2",
       "dev": true,
@@ -4118,6 +4145,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=",
+      "dev": true
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "dev": true,
@@ -4275,11 +4308,23 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==",
+      "dev": true
+    },
     "node_modules/fast-glob": {
       "version": "3.2.11",
       "dev": true,
@@ -4503,6 +4548,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "dev": true,
@@ -4665,6 +4719,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/hash-base": {
       "version": "3.1.0",
       "dev": true,
@@ -5099,6 +5168,22 @@
         "node": ">= 10"
       }
     },
+    "node_modules/is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "dev": true,
@@ -5131,6 +5216,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-docker": {
       "version": "2.2.1",
       "dev": true,
@@ -5210,6 +5310,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-stream": {
       "version": "2.0.1",
       "dev": true,
@@ -6048,6 +6164,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object-is": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "dev": true,
@@ -6234,6 +6366,12 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
+      "dev": true
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "dev": true,
@@ -7094,6 +7232,34 @@
       ],
       "license": "MIT"
     },
+    "node_modules/quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "dev": true,
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "dev": true,
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "dev": true,
@@ -7247,6 +7413,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/regexpu-core": {
       "version": "5.0.1",
       "dev": true,
@@ -11206,6 +11389,12 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+      "dev": true
+    },
     "clone-deep": {
       "version": "4.0.1",
       "dev": true,
@@ -11602,6 +11791,20 @@
         }
       }
     },
+    "deep-equal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
+      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "dev": true,
+      "requires": {
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.1",
+        "is-regex": "^1.0.4",
+        "object-is": "^1.0.1",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.2.0"
+      }
+    },
     "deepmerge": {
       "version": "4.2.2",
       "dev": true
@@ -11889,6 +12092,12 @@
       "version": "1.8.1",
       "dev": true
     },
+    "eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=",
+      "dev": true
+    },
     "events": {
       "version": "3.3.0",
       "dev": true
@@ -12013,10 +12222,22 @@
         }
       }
     },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "dev": true
     },
+    "fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "3.2.11",
       "dev": true,
@@ -12155,6 +12376,12 @@
       "version": "1.1.1",
       "dev": true
     },
+    "functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "dev": true
@@ -12255,6 +12482,15 @@
       "version": "1.0.3",
       "dev": true
     },
+    "has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
     "hash-base": {
       "version": "3.1.0",
       "dev": true,
@@ -12535,6 +12771,16 @@
       "version": "2.0.1",
       "dev": true
     },
+    "is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "dev": true
@@ -12557,6 +12803,15 @@
         "has": "^1.0.3"
       }
     },
+    "is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-docker": {
       "version": "2.2.1",
       "dev": true
@@ -12598,6 +12853,16 @@
         "isobject": "^3.0.1"
       }
     },
+    "is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-stream": {
       "version": "2.0.1",
       "dev": true
@@ -13154,6 +13419,16 @@
       "version": "1.12.0",
       "dev": true
     },
+    "object-is": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
     "object-keys": {
       "version": "1.1.1",
       "dev": true
@@ -13269,6 +13544,12 @@
         "tslib": "^2.0.3"
       }
     },
+    "parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
+      "dev": true
+    },
     "parent-module": {
       "version": "1.0.1",
       "dev": true,
@@ -13750,6 +14031,31 @@
       "version": "1.2.3",
       "dev": true
     },
+    "quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "dev": true,
+      "requires": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "dev": true,
@@ -13866,6 +14172,17 @@
       "version": "2.2.11",
       "dev": true
     },
+    "regexp.prototype.flags": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
+      }
+    },
     "regexpu-core": {
       "version": "5.0.1",
       "dev": true,

package.json

@@ -25,6 +25,7 @@
     "primeflex": "^3.1.3",
     "primeicons": "^5.0.0",
     "primevue": "^3.12.1",
+    "quill": "^1.3.7",
     "resolve-url-loader": "^5.0.0",
     "sass": "^1.49.8",
     "sass-loader": "^12.1.0",

public/js/resources_js_pages_expense_TableHeader_js.js

@@ -0,0 +1,27 @@
+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_expense_TableHeader_js"],{
+
+/***/ "./resources/js/pages/expense/TableHeader.js":
+/*!***************************************************!*\
+  !*** ./resources/js/pages/expense/TableHeader.js ***!
+  \***************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([{
+  field: 'createdAt',
+  header: 'Tanggal'
+}, {
+  field: 'amount',
+  header: 'Pengeluaran'
+}, {
+  field: 'user',
+  header: 'User'
+}]);
+
+/***/ })
+
+}]);

public/js/resources_js_pages_home_Index_vue.js

@@ -901,6 +901,14 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }]
   }, {
     label: 'Master',
     items: [{
@@ -919,6 +927,14 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }]
   }],
   // Operator
   3: [{

public/js/resources_js_pages_user_Create_vue.js

@@ -1203,11 +1203,11 @@ var _hoisted_1 = {
 var _hoisted_2 = {
   "class": "col-12 lg:col-8"
 };
-var _hoisted_3 = {
-  "class": "grid"
-};
+
+var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Tambah User ");
+
 var _hoisted_4 = {
-  "class": "col-12 md:col-6"
+  "class": "grid"
 };
 var _hoisted_5 = {
   "class": "col-12 md:col-6"
@@ -1219,6 +1219,9 @@ var _hoisted_7 = {
   "class": "col-12 md:col-6"
 };
 var _hoisted_8 = {
+  "class": "col-12 md:col-6"
+};
+var _hoisted_9 = {
   "class": "flex flex-column md:flex-row justify-content-end"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -1231,8 +1234,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppLayout"], null, {
     "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
       return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
+        title: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+          return [_hoisted_3];
+        }),
         content: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppInputText"], {
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppInputText"], {
             label: "Nama",
             placeholder: "nama",
             error: $setup.form.errors.name,
@@ -1242,7 +1248,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             })
           }, null, 8
           /* PROPS */
-          , ["error", "modelValue"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppInputText"], {
+          , ["error", "modelValue"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppInputText"], {
             label: "Nomor HP",
             placeholder: "nomor hp",
             error: $setup.form.errors.phone,
@@ -1252,7 +1258,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             })
           }, null, 8
           /* PROPS */
-          , ["error", "modelValue"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppInputText"], {
+          , ["error", "modelValue"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppInputText"], {
             label: "Email",
             placeholder: "email",
             error: $setup.form.errors.email,
@@ -1262,7 +1268,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             })
           }, null, 8
           /* PROPS */
-          , ["error", "modelValue"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppDropdown"], {
+          , ["error", "modelValue"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppDropdown"], {
             label: "Hak Akses",
             placeholder: "pilih satu",
             modelValue: $setup.form.role_id,
@@ -1276,7 +1282,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           , ["modelValue", "options", "error"])])])];
         }),
         footer: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
             label: "Simpan",
             icon: "pi pi-check",
             "class": "p-button-outlined",
@@ -1321,6 +1327,14 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }]
   }, {
     label: 'Master',
     items: [{
@@ -1339,6 +1353,14 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }]
   }],
   // Operator
   3: [{

public/js/resources_js_pages_user_Edit_vue.js

@@ -1459,11 +1459,11 @@ var _hoisted_1 = {
 var _hoisted_2 = {
   "class": "col-12 lg:col-8"
 };
-var _hoisted_3 = {
-  "class": "grid"
-};
+
+var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Edit User ");
+
 var _hoisted_4 = {
-  "class": "col-12 md:col-6"
+  "class": "grid"
 };
 var _hoisted_5 = {
   "class": "col-12 md:col-6"
@@ -1472,16 +1472,19 @@ var _hoisted_6 = {
   "class": "col-12 md:col-6"
 };
 var _hoisted_7 = {
-  key: 0,
   "class": "col-12 md:col-6"
 };
 var _hoisted_8 = {
-  "class": "grid"
+  key: 0,
+  "class": "col-12 md:col-6"
 };
 var _hoisted_9 = {
-  "class": "col-12 md:col-6 flex flex-column md:flex-row justify-content-center md:justify-content-start"
+  "class": "grid"
 };
 var _hoisted_10 = {
+  "class": "col-12 md:col-6 flex flex-column md:flex-row justify-content-center md:justify-content-start"
+};
+var _hoisted_11 = {
   "class": "col-12 md:col-6 flex flex-column md:flex-row justify-content-center md:justify-content-end"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -1494,8 +1497,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppLayout"], null, {
     "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
       return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Card, null, {
+        title: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
+          return [_hoisted_3];
+        }),
         content: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppInputText"], {
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppInputText"], {
             label: "Nama",
             placeholder: "nama",
             disabled: $props.user.role_id !== 1,
@@ -1506,7 +1512,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             })
           }, null, 8
           /* PROPS */
-          , ["disabled", "error", "modelValue"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppInputText"], {
+          , ["disabled", "error", "modelValue"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppInputText"], {
             label: "Nomor HP",
             placeholder: "nomor hp",
             disabled: $props.user.role_id !== 1,
@@ -1517,7 +1523,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             })
           }, null, 8
           /* PROPS */
-          , ["disabled", "error", "modelValue"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppInputText"], {
+          , ["disabled", "error", "modelValue"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppInputText"], {
             label: "Email",
             placeholder: "email",
             disabled: $props.user.role_id !== 1,
@@ -1528,7 +1534,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             })
           }, null, 8
           /* PROPS */
-          , ["disabled", "error", "modelValue"])]), $props.user.role_id !== 1 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppDropdown"], {
+          , ["disabled", "error", "modelValue"])]), $props.user.role_id !== 1 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppDropdown"], {
             label: "Hak Akses",
             placeholder: "Pilih satu",
             modelValue: $setup.form.role_id,
@@ -1542,7 +1548,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           , ["modelValue", "options", "error"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])];
         }),
         footer: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppDialog"], {
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppDialog"], {
             message: "Yakin akan menghapus data ini?",
             visible: $setup.visibleDialog,
             "onUpdate:visible": _cache[4] || (_cache[4] = function ($event) {
@@ -1560,7 +1566,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             icon: "pi pi-trash",
             "class": "p-button-outlined p-button-danger",
             onClick: $setup.confirmDialog
-          })) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppButton"], {
+          })) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppButton"], {
             label: "Blokir",
             icon: "pi pi-ban",
             method: "delete",
@@ -1613,6 +1619,14 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }]
   }, {
     label: 'Master',
     items: [{
@@ -1631,6 +1645,14 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }]
   }],
   // Operator
   3: [{

public/js/resources_js_pages_user_Index_vue.js

@@ -1263,6 +1263,14 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }]
   }, {
     label: 'Master',
     items: [{
@@ -1281,6 +1289,14 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }]
   }],
   // Operator
   3: [{

public/js/resources_js_pages_user_Show_vue.js

@@ -1347,6 +1347,14 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }]
   }, {
     label: 'Master',
     items: [{
@@ -1365,6 +1373,14 @@ __webpack_require__.r(__webpack_exports__);
       to: '/dashboards',
       component: 'home/Index'
     }]
+  }, {
+    label: 'Menu',
+    items: [{
+      label: 'Pengeluaran',
+      icon: 'pi pi-wallet',
+      to: '/expenses',
+      component: 'expense/Index'
+    }]
   }],
   // Operator
   3: [{

resources/js/components/AppInputNumber.vue

@@ -0,0 +1,138 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  mode: {
+    type: String,
+    default: 'decimal',
+  },
+  incrementButtonClass: {
+    type: String,
+    default: null,
+  },
+  decrementButtonClass: {
+    type: String,
+    default: null,
+  },
+  incrementButtonIcon: {
+    type: String,
+    default: 'pi pi-angle-up',
+  },
+  decrementButtonIcon: {
+    type: String,
+    default: 'pi pi-angle-down',
+  },
+  showButtons: {
+    type: Boolean,
+    default: false,
+  },
+  buttonLayout: {
+    type: String,
+    default: 'stacked',
+  },
+  min: {
+    type: Number,
+    default: null,
+  },
+  max: {
+    type: Number,
+    default: null,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+  prefix: {
+    type: String,
+    default: null,
+  },
+  suffix: {
+    type: String,
+    default: null,
+  },
+  placeholder: {
+    type: String,
+    required: true,
+  },
+  useGrouping: {
+    type: Boolean,
+    default: true,
+  },
+  currency: {
+    type: String,
+    default: undefined,
+  },
+  locale: {
+    type: String,
+    default: undefined,
+  },
+  error: {
+    type: String,
+    default: null,
+  },
+  currencyDisplay: {
+    type: String,
+    default: undefined,
+  },
+  modelValue: null,
+})
+
+defineEmits(['update:modelValue'])
+
+const isError = computed(() => (props.error ? true : false))
+
+const forLabel = computed(() => props.label.toLowerCase().replace(/\s+/g, '-'))
+
+const ariaDescribedbyLabel = computed(() => props.label.toLowerCase().replace(/\s+/g, '-') + '-help')
+</script>
+
+<template>
+  <div class="field">
+    <label :for="forLabel">{{ label }}</label>
+
+    <InputNumber
+      class="w-full"
+      input-class="w-full"
+      :currency="currency"
+      :currency-display="currencyDisplay"
+      :locale="locale"
+      :class="{ 'p-invalid': isError }"
+      :id="forLabel"
+      :aria-describedby="ariaDescribedbyLabel"
+      :type="type"
+      :placeholder="placeholder"
+      :model-value="modelValue"
+      :disabled="disabled"
+      :prefix="prefix"
+      :suffix="suffix"
+      :step="step"
+      :min="min"
+      :max="max"
+      :mode="mode"
+      :use-grouping="useGrouping"
+      :show-buttons="showButtons"
+      :button-layout="buttonLayout"
+      :increment-button-class="incrementButtonClass"
+      :decrement-button-class="decrementButtonClass"
+      :increment-button-icon="incrementButtonIcon"
+      :decrement-button-icon="decrementButtonIcon"
+      @input="$emit('update:modelValue', $event.value)"
+    />
+
+    <small v-if="error" :id="ariaDescribedbyLabel" :class="{ 'p-error': isError }">
+      {{ error }}
+    </small>
+  </div>
+</template>

resources/js/pages/expense/Create.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { computed, watch } from 'vue'
+import { useForm, usePage } from '@inertiajs/inertia-vue3'
+import AppLayout from '@/layouts/AppLayout.vue'
+import AppInputNumber from '@/components/AppInputNumber.vue'
+import AppEditor from '@/components/AppEditor.vue'
+
+const errors = computed(() => usePage().props.value.errors)
+
+watch(errors, () => {
+  form.clearErrors()
+})
+
+const form = useForm({
+  description: null,
+  amount: null,
+})
+
+const submit = () => {
+  form.post(route('expenses.store'), { onSuccess: () => form.reset() })
+}
+</script>
+
+<template>
+  <AppLayout>
+    <div class="grid">
+      <div class="col-12 md:col-8">
+        <Card>
+          <template #title> Tambah Pengeluaran </template>
+          <template #content>
+            <AppInputNumber
+              v-model="form.amount"
+              class="md:w-16rem"
+              label="Pengeluaran"
+              placeholder="jumlah pengeluaran"
+              :error="form.errors.amount"
+            />
+
+            <AppEditor
+              label="Keterangan"
+              v-model="form.description"
+              editor-style="height: 320px"
+              placeholder="tulis keterangan disini"
+              :error="form.errors.description"
+            >
+              <template #toolbar>
+                <span class="q-formats">
+                  <button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
+                  <button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
+                  <button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
+                </span>
+                <span class="ql-formats">
+                  <button class="ql-list" value="ordered" v-tooltip.bottom="'Ordered'"></button>
+                  <button class="ql-list" value="bullet" v-tooltip.bottom="'Bullet'"></button>
+                </span>
+              </template>
+            </AppEditor>
+          </template>
+
+          <template #footer>
+            <div class="flex flex-column md:flex-row justify-content-end">
+              <Button
+                label="Simpan"
+                icon="pi pi-check"
+                class="p-button-outlined"
+                :disabled="form.processing"
+                @click="submit"
+              />
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </AppLayout>
+</template>

resources/js/pages/expense/Index.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { Inertia } from '@inertiajs/inertia'
+import { watch, onMounted } from 'vue'
+import { Head, useForm } from '@inertiajs/inertia-vue3'
+import dayjs from 'dayjs'
+import pickBy from 'lodash/pickBy'
+import AppLayout from '@/layouts/AppLayout.vue'
+import AppPagination from '@/components/AppPagination.vue'
+import AppButton from '@/components/AppButton.vue'
+
+import TableHeader from './TableHeader'
+
+const props = defineProps({
+  expenses: Object,
+  filters: Object,
+})
+
+const filterForm = useForm({
+  dates: null,
+  startDate: props.filters.startDate,
+  endDate: props.filters.endDate,
+})
+
+onMounted(() => {
+  if (props.filters.startDate || props.filters.endDate) {
+    if (props.filters.endDate) {
+      filterForm.dates = [new Date(props.filters.startDate), new Date(props.filters.endDate)]
+    } else {
+      filterForm.dates = [new Date(props.filters.startDate), null]
+    }
+  }
+})
+
+watch(filterForm, () => {
+  if (filterForm.dates) {
+    if (filterForm.dates[1]) {
+      filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
+      filterForm.endDate = dayjs(filterForm.dates[1]).format('YYYY-MM-DD')
+    } else {
+      filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
+      filterForm.endDate = null
+    }
+  } else {
+    filterForm.endDate = null
+    filterForm.startDate = null
+  }
+
+  Inertia.get(
+    '/expenses',
+    pickBy({
+      startDate: filterForm.startDate,
+      endDate: filterForm.endDate,
+    }),
+    {
+      preserveState: true,
+    }
+  )
+})
+
+const filterReset = () => {
+  Inertia.get('/expenses')
+}
+</script>
+
+<template>
+  <Head title="Pengeluaran" />
+
+  <AppLayout>
+    <DataTable
+      responsive-layout="scroll"
+      column-resize-mode="expand"
+      :value="expenses.data"
+      :row-hover="true"
+      :striped-rows="true"
+    >
+      <template #header>
+        <h1>Pengeluaran</h1>
+
+        <div class="grid">
+          <div class="col-12 md:col-8">
+            <div class="grid">
+              <div class="col-12 md:col-4">
+                <Calendar
+                  class="w-full"
+                  v-model="filterForm.dates"
+                  selection-mode="range"
+                  placeholder="filter waktu..."
+                  date-format="dd/mm/yy"
+                  :manual-input="false"
+                />
+              </div>
+              <div class="col-auto mt-2 ml-2">
+                <Button label="reset" class="p-button-link" @click="filterReset" />
+              </div>
+            </div>
+          </div>
+          <div class="col-12 md:col-4 flex flex-column md:flex-row justify-content-end">
+            <AppButton
+              label="Tambah Pengeluaran"
+              class="p-button-outlined"
+              icon="pi pi-pencil"
+              :href="route('expenses.create')"
+            />
+          </div>
+        </div>
+      </template>
+
+      <Column
+        v-for="tableHeader in TableHeader"
+        :field="tableHeader.field"
+        :header="tableHeader.header"
+        :key="tableHeader.field"
+      />
+
+      <Column>
+        <template #body="{ data }">
+          <AppButton
+            icon="pi pi-angle-double-right"
+            class="p-button-text p-button-icon-only p-button-rounded p-button-text"
+            :href="route('expenses.show', data.id)"
+          />
+        </template>
+      </Column>
+    </DataTable>
+
+    <AppPagination :links="expenses.links" />
+  </AppLayout>
+</template>

resources/js/pages/expense/Show.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { Head } from '@inertiajs/inertia-vue3'
+import AppLayout from '@/layouts/AppLayout.vue'
+
+defineProps({
+  expense: Object,
+})
+</script>
+
+<template>
+  <Head title="Detail Pengeluaran" />
+  <AppLayout>
+    <h1 class="text-2xl font-bold">Detail Pengeluaran</h1>
+
+    <div class="grid px-2">
+      <div class="col-auto mr-7">
+        <h2>
+          <span class="text-base"> <i class="pi pi-user" /> User</span>
+
+          <br />
+
+          <span class="text-lg">{{ expense.user.name }}</span>
+        </h2>
+      </div>
+
+      <div class="col-auto mr-7">
+        <h2>
+          <span class="text-base"> <i class="pi pi-mobile" /> No HP</span>
+
+          <br />
+
+          <span class="text-lg">{{ expense.user.phone }}</span>
+        </h2>
+      </div>
+
+      <div class="col-auto mr-7">
+        <h2>
+          <span class="text-base"> <i class="pi pi-at" /> Email</span>
+
+          <br />
+
+          <span class="text-lg">{{ expense.user.email }}</span>
+        </h2>
+      </div>
+
+      <div class="col-auto">
+        <h2 class="mb-4">
+          <span class="text-base">
+            <i class="pi pi-wallet red-700" />
+            Pengeluaran
+          </span>
+
+          <br />
+
+          <span class="text-lg">{{ expense.amount }}</span>
+        </h2>
+      </div>
+    </div>
+
+    <div class="grid">
+      <div class="col-12 md:col-8">
+        <Card>
+          <template #content>
+            <h5>Keterangan</h5>
+            <p v-html="expense.description"></p>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </AppLayout>
+</template>

resources/js/pages/expense/TableHeader.js

@@ -0,0 +1,5 @@
+export default [
+  { field: 'createdAt', header: 'Tanggal' },
+  { field: 'amount', header: 'Pengeluaran' },
+  { field: 'user', header: 'User' },
+]

resources/js/pages/user/Create.vue

@@ -34,6 +34,7 @@ const submit = () => {
     <div class="grid">
       <div class="col-12 lg:col-8">
         <Card>
+          <template #title> Tambah User </template>
           <template #content>
             <div class="grid">
               <div class="col-12 md:col-6">

resources/js/pages/user/Edit.vue

@@ -48,6 +48,7 @@ watch(errors, () => {
     <div class="grid">
       <div class="col-12 lg:col-8">
         <Card>
+          <template #title> Edit User </template>
           <template #content>
             <div class="grid">
               <div class="col-12 md:col-6">

resources/js/utils/menu.js

@@ -5,6 +5,10 @@ export default {
       label: 'Home',
       items: [{ label: 'Dashboard', icon: 'pi pi-home', to: '/dashboards', component: 'home/Index' }],
     },
+    {
+      label: 'Menu',
+      items: [{ label: 'Pengeluaran', icon: 'pi pi-wallet', to: '/expenses', component: 'expense/Index' }],
+    },
     {
       label: 'Master',
       items: [{ label: 'User', icon: 'pi pi-user', to: '/users', component: 'user/Index' }],
@@ -17,6 +21,10 @@ export default {
       label: 'Home',
       items: [{ label: 'Dashboard', icon: 'pi pi-home', to: '/dashboards', component: 'home/Index' }],
     },
+    {
+      label: 'Menu',
+      items: [{ label: 'Pengeluaran', icon: 'pi pi-wallet', to: '/expenses', component: 'expense/Index' }],
+    },
   ],
 
   // Operator

resources/js/vue.js

@@ -20,6 +20,7 @@ import DataTable from 'primevue/datatable'
 import Dialog from 'primevue/dialog'
 import Divider from 'primevue/divider'
 import Dropdown from 'primevue/dropdown'
+import Editor from 'primevue/editor'
 import InputNumber from 'primevue/inputnumber'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
@@ -53,6 +54,7 @@ createInertiaApp({
       .component('Dialog', Dialog)
       .component('Divider', Divider)
       .component('Dropdown', Dropdown)
+      .component('Editor', Editor)
       .component('InputNumber', InputNumber)
       .component('InputText', InputText)
       .component('Message', Message)

routes/web.php

@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\DashboardController;
+use App\Http\Controllers\ExpenseController;
 use App\Http\Controllers\UserController;
 use Illuminate\Support\Facades\Route;
 
@@ -23,6 +24,8 @@ Route::middleware(['auth', 'verified'])->group(function () {
     Route::delete('/users/block/{user}', [UserController::class, 'block'])->name('users.block');
     Route::post('/users/change-password/{user}', [UserController::class, 'changePassword'])->name('users.change-password');
     Route::resource('/users', UserController::class);
+
+    Route::resource('/expenses', ExpenseController::class);
 });
 
 require __DIR__ . '/auth.php';