feat: master user

app/Http/Controllers/UserController.php

@@ -0,0 +1,190 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\User\ChangePasswordRequest;
+use App\Http\Requests\User\StoreUserRequest;
+use App\Http\Requests\User\UpdateUserRequest;
+use App\Models\Role;
+use App\Models\User;
+use Illuminate\Support\Facades\Hash;
+
+class UserController extends Controller
+{
+    /**
+     * Create the controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {}
+
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Inertia\Response
+     */
+    public function index()
+    {
+        return inertia('user/Index', [
+            'filters' => request()->all('search'),
+            'users' => User::filter(request()->only('search'))
+                ->latest()
+                ->paginate(10)
+                ->withQueryString()
+                ->through(fn($user) => [
+                    'id' => $user->id,
+                    'name' => $user->name,
+                    'phone' => $user->phone,
+                    'email' => $user->email,
+                    'role' => $user->role->name,
+                    'status' => $user->status,
+                ]),
+        ]);
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Inertia\Response
+     */
+    public function create()
+    {
+        return inertia('user/Create', [
+            'roles' => Role::whereNotIn('id', [1])
+                ->get()
+                ->transform(fn($role) => [
+                    'label' => $role->name,
+                    'value' => $role->id,
+                ]),
+        ]);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function store(StoreUserRequest $request)
+    {
+        User::create($request->validated());
+
+        return back()->with('success', __('messages.success.store.user'));
+    }
+
+    /**
+     * Display the specified resource.
+     *
+     * @param  User  $user
+     * @return \Inertia\Response
+     */
+    public function show(User $user)
+    {
+        return inertia('user/Show', [
+            'user' => [
+                'id' => $user->id,
+                'name' => $user->name,
+                'phone' => $user->phone,
+                'email' => $user->email,
+                'role_id' => $user->role_id,
+            ],
+            'roles' => Role::whereNotIn('id', [1])
+                ->get()
+                ->transform(fn($role) => [
+                    'label' => $role->name,
+                    'value' => $role->id,
+                ]),
+        ]);
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     *
+     * @param  User  $user
+     * @return \Inertia\Response
+     */
+    public function edit(User $user)
+    {
+        return inertia('user/Edit', [
+            'user' => [
+                'id' => $user->id,
+                'name' => $user->name,
+                'phone' => $user->phone,
+                'email' => $user->email,
+                'role_id' => $user->role_id,
+            ],
+            'roles' => Role::whereNotIn('id', [1])
+                ->get()
+                ->transform(fn($role) => [
+                    'label' => $role->name,
+                    'value' => $role->id,
+                ]),
+        ]);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  User  $user
+     * @return \Illuminate\Http\Response
+     */
+    public function update(UpdateUserRequest $request, User $user)
+    {
+        $user->update($request->validated());
+
+        return back()->with('success', __('messages.success.update.user'));
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  User  $user
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy(User $user)
+    {
+        $user->delete();
+
+        return to_route('users.index')->with('success', __('messages.success.destroy.user'));
+    }
+
+    /**
+     * Block user
+     *
+     * @param User $user
+     * @return \Illuminate\Http\Response
+     */
+    public function block(User $user)
+    {
+        $user->status = !$user->getRawOriginal('status');
+        $user->update();
+
+        if ($user->getRawOriginal('status')) {
+            $msg = __('messages.user.active_user');
+        } else {
+            $msg = __('messages.user.no_active_user');
+        }
+
+        return back()->with('success', $msg);
+    }
+
+    /**
+     * Change Password
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function changePassword(ChangePasswordRequest $request)
+    {
+        if (!Hash::check($request->old_password, $request->user()->password)) {
+            return back()->with('error', __('messages.error.store.change-password'));
+        }
+
+        $request->user()->update(['password' => bcrypt($request->new_password)]);
+
+        return back()->with('success', __('messages.success.update.change-password'));
+    }
+}

app/Http/Requests/User/ChangePasswordRequest.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Requests\User;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rules\Password;
+
+class ChangePasswordRequest 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 [
+            'old_password' => 'required',
+            'new_password' => ['required', 'confirmed', Password::defaults()],
+        ];
+    }
+}

app/Http/Requests/User/StoreUserRequest.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Requests\User;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreUserRequest 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 [
+            'name' => 'required|string|max:50',
+            'phone' => 'required|numeric|min:12|unique:users,phone',
+            'email' => 'required|email|unique:users,email',
+            'role_id' => 'required|numeric',
+        ];
+    }
+}

app/Http/Requests/User/UpdateUserRequest.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Requests\User;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateUserRequest 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 [
+            'name' => 'required|string|max:50',
+            'phone' => 'required|numeric|min:12|unique:users,phone,' . $this->user->id,
+            'email' => 'required|email|unique:users,email,' . $this->user->id,
+            'role_id' => 'required|numeric',
+        ];
+    }
+}

app/Models/User.php

@@ -24,9 +24,7 @@ class User extends Authenticatable implements MustVerifyEmail
         'email',
         'status',
         'password',
-        'gender_id',
         'role_id',
-        'outlet_id',
     ];
 
     /**
@@ -47,4 +45,27 @@ class User extends Authenticatable implements MustVerifyEmail
     protected $casts = [
         'email_verified_at' => 'datetime',
     ];
+
+    protected function status(): Attribute
+    {
+        return Attribute::make(
+            get:fn($value) => $value ? __('words.active') : __('words.not_active'),
+        );
+    }
+
+    public function role()
+    {
+        return $this->belongsTo(Role::class);
+    }
+
+    public function scopeFilter($query, array $filters)
+    {
+        $query->when($filters['search'] ?? null, function ($query, $search) {
+            $query->where(function ($query) use ($search) {
+                $query->where('name', 'like', '%' . $search . '%')
+                    ->orWhere('phone', 'like', '%' . $search . '%')
+                    ->orWhere('email', 'like', '%' . $search . '%');
+            });
+        });
+    }
 }

public/js/resources_js_pages_home_Index_vue.js

@@ -769,6 +769,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }]]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("ul", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_11, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(_ctx.$page.props.auth.user.name), 1
   /* TEXT */
   )]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["Link"], {
+    href: _ctx.route('users.show', _ctx.$page.props.auth.user.id),
     "class": "p-link layout-topbar-button"
   }, {
     "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
@@ -777,7 +778,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
     /* STABLE */
 
-  })]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["Link"], {
+  }, 8
+  /* PROPS */
+  , ["href"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["Link"], {
     href: _ctx.route('logout'),
     as: "button",
     method: "post",
@@ -899,14 +902,12 @@ __webpack_require__.r(__webpack_exports__);
       component: 'home/Index'
     }]
   }, {
-    label: 'Menu',
+    label: 'Master',
     items: [{
-      label: 'Submenu 1',
-      icon: 'pi pi-bookmark',
-      items: [{
-        label: 'Submenu 1.1',
-        icon: 'pi pi-bookmark'
-      }]
+      label: 'User',
+      icon: 'pi pi-user',
+      to: '/users',
+      component: 'user/Index'
     }]
   }],
   // Supervisor

public/js/resources_js_pages_user_TableHeader_js.js

@@ -0,0 +1,33 @@
+"use strict";
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_pages_user_TableHeader_js"],{
+
+/***/ "./resources/js/pages/user/TableHeader.js":
+/*!************************************************!*\
+  !*** ./resources/js/pages/user/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: 'name',
+  header: 'Nama'
+}, {
+  field: 'phone',
+  header: 'No HP'
+}, {
+  field: 'email',
+  header: 'Email'
+}, {
+  field: 'role',
+  header: 'Hak Akses'
+}, {
+  field: 'status',
+  header: 'Status'
+}]);
+
+/***/ })
+
+}]);

public/js/vue.js

@@ -43810,6 +43810,46 @@ var map = {
 	"./home/Index.vue": [
 		"./resources/js/pages/home/Index.vue",
 		"resources_js_pages_home_Index_vue"
+	],
+	"./user/Create": [
+		"./resources/js/pages/user/Create.vue",
+		"resources_js_pages_user_Create_vue"
+	],
+	"./user/Create.vue": [
+		"./resources/js/pages/user/Create.vue",
+		"resources_js_pages_user_Create_vue"
+	],
+	"./user/Edit": [
+		"./resources/js/pages/user/Edit.vue",
+		"resources_js_pages_user_Edit_vue"
+	],
+	"./user/Edit.vue": [
+		"./resources/js/pages/user/Edit.vue",
+		"resources_js_pages_user_Edit_vue"
+	],
+	"./user/Index": [
+		"./resources/js/pages/user/Index.vue",
+		"resources_js_pages_user_Index_vue"
+	],
+	"./user/Index.vue": [
+		"./resources/js/pages/user/Index.vue",
+		"resources_js_pages_user_Index_vue"
+	],
+	"./user/Show": [
+		"./resources/js/pages/user/Show.vue",
+		"resources_js_pages_user_Show_vue"
+	],
+	"./user/Show.vue": [
+		"./resources/js/pages/user/Show.vue",
+		"resources_js_pages_user_Show_vue"
+	],
+	"./user/TableHeader": [
+		"./resources/js/pages/user/TableHeader.js",
+		"resources_js_pages_user_TableHeader_js"
+	],
+	"./user/TableHeader.js": [
+		"./resources/js/pages/user/TableHeader.js",
+		"resources_js_pages_user_TableHeader_js"
 	]
 };
 function webpackAsyncContext(req) {
@@ -43928,7 +43968,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":"5b9f0529bda25a9b","resources_js_pages_auth_Login_vue":"61b9c9ae1ae9da32","resources_js_pages_auth_ResetPassword_vue":"b091193a1e114ce8","resources_js_pages_auth_VerifyEmail_vue":"a7b9a99e5a331088","resources_js_pages_home_Index_vue":"ac979b71a6556fb9"}[chunkId] + "";
+/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"10c6b388645ceb22","resources_js_pages_auth_ForgotPassword_vue":"5b9f0529bda25a9b","resources_js_pages_auth_Login_vue":"61b9c9ae1ae9da32","resources_js_pages_auth_ResetPassword_vue":"b091193a1e114ce8","resources_js_pages_auth_VerifyEmail_vue":"a7b9a99e5a331088","resources_js_pages_home_Index_vue":"a357d4139a5256e8","resources_js_pages_user_Create_vue":"bd11fb7ccd86dc6e","resources_js_pages_user_Edit_vue":"0b47a99f15339c5f","resources_js_pages_user_Index_vue":"170f708e9932b04b","resources_js_pages_user_Show_vue":"ee8e5d4cb9d97c90","resources_js_pages_user_TableHeader_js":"0d87fd422fe40491"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/components/AppAutocompleteBasic.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  field: {
+    type: String,
+    required: true,
+  },
+  suggestions: {
+    type: Array,
+    required: true,
+  },
+  empty: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  dropdown: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    required: true,
+  },
+  error: {
+    type: String,
+    default: null,
+  },
+  modelValue: null,
+})
+
+defineEmits(['complete', 'itemSelect', '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>
+
+    <AutoComplete
+      class="w-full"
+      inputClass="w-full"
+      :model-value="modelValue"
+      :aria-describedby="ariaDescribedbyLabel"
+      :id="forLabel"
+      :class="{ 'p-invalid': isError }"
+      :field="field"
+      :placeholder="placeholder"
+      :suggestions="suggestions"
+      :auto-highlight="true"
+      :dropdown="dropdown"
+      @input="$emit('update:modelValue', $event.target.value)"
+      @item-select="$emit('itemSelect', $event)"
+      @complete="$emit('complete', $event)"
+    >
+      <template #item="slotProps">
+        <slot name="item" :item="slotProps.item" />
+      </template>
+    </AutoComplete>
+
+    <div class="flex flex-column">
+      <small
+        v-if="error"
+        class="mt-1"
+        :class="{ 'mb-2': suggestions.length === 0 || (modelValue.length === 0 && empty), 'p-error': isError }"
+        :id="ariaDescribedbyLabel"
+      >
+        {{ error }}
+      </small>
+
+      <small v-if="suggestions.length === 0 || (modelValue.length === 0 && empty)" class="mt-1">
+        <slot v-if="empty" name="empty" />
+      </small>
+    </div>
+  </div>
+</template>

resources/js/components/AppDialog.vue

@@ -0,0 +1,37 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    default: null,
+  },
+  header: {
+    type: String,
+    default: 'Peringatan',
+  },
+  cancelLabel: {
+    type: String,
+    default: 'Tidak',
+  },
+  agreeLabel: {
+    type: String,
+    default: 'Ya',
+  },
+})
+
+defineEmits(['cancel', 'agree'])
+</script>
+
+<template>
+  <Dialog :header="header" :style="{ width: '450px' }" :modal="true" :breakpoints="{ '960px': '75vw' }">
+    <div class="flex align-items-center justify-content-center">
+      <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
+      <p v-if="message">{{ message }}</p>
+    </div>
+
+    <template #footer>
+      <Button :label="cancelLabel" icon="pi pi-times" class="p-button-text" @click="$emit('cancel')" />
+
+      <Button :label="agreeLabel" icon="pi pi-check" class="p-button-text" @click="$emit('agree')" />
+    </template>
+  </Dialog>
+</template>

resources/js/components/AppDropdown.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  optionLabel: {
+    type: String,
+    default: 'label',
+  },
+  optionValue: {
+    type: String,
+    default: 'value',
+  },
+  optionDisabled: {
+    type: String,
+    default: 'disabled',
+  },
+  options: {
+    type: Array,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: String,
+    default: null,
+  },
+  modelValue: null,
+})
+
+defineEmits(['update:modelValue'])
+
+const isError = computed(() => (props.error ? true : false))
+
+const forLabel = computed(() => (props.label ? props.label.toLowerCase().replace(/\s+/g, '-') : null))
+
+const ariaDescribedbyLabel = computed(() =>
+  props.label ? props.label.toLowerCase().replace(/\s+/g, '-') + '-help' : null
+)
+
+const selectedDropdownLabel = (value) => {
+  const result = props.options.find((option) => option[props.optionValue] == value)
+  if (result) {
+    return result[props.optionLabel]
+  }
+}
+</script>
+
+<template>
+  <div class="field">
+    <label v-if="label" :for="forLabel">{{ label }}</label>
+
+    <Dropdown
+      class="w-full"
+      :class="{ 'p-invalid': isError }"
+      :id="forLabel"
+      :aria-describedby="ariaDescribedbyLabel"
+      :option-disabled="optionDisabled"
+      :option-label="optionLabel"
+      :option-value="optionValue"
+      :placeholder="placeholder"
+      :options="options"
+      :model-value="modelValue"
+      :disabled="disabled"
+      @change="$emit('update:modelValue', $event.value)"
+    >
+      <template #value="slotProps">
+        <div v-if="slotProps.value">
+          {{ selectedDropdownLabel(slotProps.value) }}
+        </div>
+
+        <div v-else>
+          {{ slotProps.placeholder }}
+        </div>
+      </template>
+
+      <template #option="{ option, index }">
+        <slot name="option" :option="option" :index="index" />
+      </template>
+    </Dropdown>
+
+    <small v-if="error" :id="ariaDescribedbyLabel" :class="{ 'p-error': isError }">
+      {{ error }}
+    </small>
+  </div>
+</template>

resources/js/components/AppEditor.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    required: true,
+  },
+  readOnly: {
+    type: Boolean,
+    required: false,
+  },
+  error: {
+    type: String,
+    default: null,
+  },
+  editorStyle: null,
+  modelValue: null,
+})
+
+defineEmits(['update:modelValue'])
+
+const isError = computed(() => (props.error ? true : false))
+
+const forLabel = computed(() => (props.label ? props.label.toLowerCase().replace(/\s+/g, '-') : null))
+
+const ariaDescribedbyLabel = computed(() =>
+  props.label ? props.label.toLowerCase().replace(/\s+/g, '-') + '-help' : null
+)
+</script>
+
+<template>
+  <div class="field">
+    <label v-if="label" :for="forLabel">{{ label }}</label>
+
+    <Editor
+      :read-only="readOnly"
+      :model-value="modelValue"
+      :editor-style="editorStyle"
+      :placeholder="placeholder"
+      @text-change="$emit('update:modelValue', $event.htmlValue)"
+    >
+      <template #toolbar>
+        <slot name="toolbar" />
+      </template>
+    </Editor>
+
+    <small v-if="error" :id="ariaDescribedbyLabel" :class="{ 'p-error': isError }">
+      {{ error }}
+    </small>
+  </div>
+</template>

resources/js/components/AppInputText.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'text',
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    required: true,
+  },
+  error: {
+    type: String,
+    default: null,
+  },
+  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>
+
+    <InputText
+      class="w-full"
+      :class="{ 'p-invalid': isError }"
+      :id="forLabel"
+      :aria-describedby="ariaDescribedbyLabel"
+      :model-value="modelValue"
+      :type="type"
+      :placeholder="placeholder"
+      :value="modelValue"
+      :disabled="disabled"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+
+    <small v-if="error" :id="ariaDescribedbyLabel" :class="{ 'p-error': isError }">
+      {{ error }}
+    </small>
+  </div>
+</template>

resources/js/components/AppMenu.vue

@@ -0,0 +1,275 @@
+<script>
+import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue/utils'
+import OverlayEventBus from 'primevue/overlayeventbus'
+import Menuitem from './AppMenuItem.vue'
+export default {
+  name: 'Menu',
+  emits: ['show', 'hide'],
+  inheritAttrs: false,
+  props: {
+    popup: {
+      type: Boolean,
+      default: false,
+    },
+    model: {
+      type: Array,
+      default: null,
+    },
+    appendTo: {
+      type: String,
+      default: 'body',
+    },
+    autoZIndex: {
+      type: Boolean,
+      default: true,
+    },
+    baseZIndex: {
+      type: Number,
+      default: 0,
+    },
+    exact: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      overlayVisible: false,
+    }
+  },
+  target: null,
+  outsideClickListener: null,
+  scrollHandler: null,
+  resizeListener: null,
+  container: null,
+  beforeUnmount() {
+    this.unbindResizeListener()
+    this.unbindOutsideClickListener()
+    if (this.scrollHandler) {
+      this.scrollHandler.destroy()
+      this.scrollHandler = null
+    }
+    this.target = null
+    if (this.container && this.autoZIndex) {
+      ZIndexUtils.clear(this.container)
+    }
+    this.container = null
+  },
+  methods: {
+    itemClick(event) {
+      const item = event.item
+      if (item.disabled) {
+        return
+      }
+      if (item.command) {
+        item.command(event)
+      }
+      if (item.to && event.navigate) {
+        event.navigate(event.originalEvent)
+      }
+      this.hide()
+    },
+    toggle(event) {
+      if (this.overlayVisible) this.hide()
+      else this.show(event)
+    },
+    show(event) {
+      this.overlayVisible = true
+      this.target = event.currentTarget
+    },
+    hide() {
+      this.overlayVisible = false
+      this.target = null
+    },
+    onEnter(el) {
+      this.alignOverlay()
+      this.bindOutsideClickListener()
+      this.bindResizeListener()
+      this.bindScrollListener()
+      if (this.autoZIndex) {
+        ZIndexUtils.set('menu', el, this.baseZIndex + this.$primevue.config.zIndex.menu)
+      }
+      this.$emit('show')
+    },
+    onLeave() {
+      this.unbindOutsideClickListener()
+      this.unbindResizeListener()
+      this.unbindScrollListener()
+      this.$emit('hide')
+    },
+    onAfterLeave(el) {
+      if (this.autoZIndex) {
+        ZIndexUtils.clear(el)
+      }
+    },
+    alignOverlay() {
+      DomHandler.absolutePosition(this.container, this.target)
+      this.container.style.minWidth = DomHandler.getOuterWidth(this.target) + 'px'
+    },
+    bindOutsideClickListener() {
+      if (!this.outsideClickListener) {
+        this.outsideClickListener = (event) => {
+          if (
+            this.overlayVisible &&
+            this.container &&
+            !this.container.contains(event.target) &&
+            !this.isTargetClicked(event)
+          ) {
+            this.hide()
+          }
+        }
+        document.addEventListener('click', this.outsideClickListener)
+      }
+    },
+    unbindOutsideClickListener() {
+      if (this.outsideClickListener) {
+        document.removeEventListener('click', this.outsideClickListener)
+        this.outsideClickListener = null
+      }
+    },
+    bindScrollListener() {
+      if (!this.scrollHandler) {
+        this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
+          if (this.overlayVisible) {
+            this.hide()
+          }
+        })
+      }
+      this.scrollHandler.bindScrollListener()
+    },
+    unbindScrollListener() {
+      if (this.scrollHandler) {
+        this.scrollHandler.unbindScrollListener()
+      }
+    },
+    bindResizeListener() {
+      if (!this.resizeListener) {
+        this.resizeListener = () => {
+          if (this.overlayVisible) {
+            this.hide()
+          }
+        }
+        window.addEventListener('resize', this.resizeListener)
+      }
+    },
+    unbindResizeListener() {
+      if (this.resizeListener) {
+        window.removeEventListener('resize', this.resizeListener)
+        this.resizeListener = null
+      }
+    },
+    isTargetClicked(event) {
+      return this.target && (this.target === event.target || this.target.contains(event.target))
+    },
+    visible(item) {
+      return typeof item.visible === 'function' ? item.visible() : item.visible !== false
+    },
+    label(item) {
+      return typeof item.label === 'function' ? item.label() : item.label
+    },
+    containerRef(el) {
+      this.container = el
+    },
+    onOverlayClick(event) {
+      OverlayEventBus.emit('overlay-click', {
+        originalEvent: event,
+        target: this.target,
+      })
+    },
+  },
+  computed: {
+    containerClass() {
+      return [
+        'p-menu p-component',
+        {
+          'p-menu-overlay': this.popup,
+          'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+          'p-ripple-disabled': this.$primevue.config.ripple === false,
+        },
+      ]
+    },
+  },
+  components: {
+    Menuitem: Menuitem,
+  },
+}
+</script>
+
+<template>
+  <Teleport :to="appendTo" :disabled="!popup">
+    <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
+      <div
+        :ref="containerRef"
+        :class="containerClass"
+        v-if="popup ? overlayVisible : true"
+        v-bind="$attrs"
+        @click="onOverlayClick"
+      >
+        <ul class="p-menu-list p-reset" role="menu">
+          <template v-for="(item, i) of model" :key="label(item) + i.toString()">
+            <template v-if="item.items && visible(item) && !item.separator">
+              <li class="p-submenu-header" v-if="item.items">
+                <slot name="item" :item="item">{{ label(item) }}</slot>
+              </li>
+              <template v-for="(child, j) of item.items" :key="child.label + i + j">
+                <Menuitem
+                  v-if="visible(child) && !child.separator"
+                  :item="child"
+                  @click="itemClick"
+                  :template="$slots.item"
+                  :exact="exact"
+                />
+                <li
+                  v-else-if="visible(child) && child.separator"
+                  :class="['p-menu-separator', child.class]"
+                  :style="child.style"
+                  :key="'separator' + i + j"
+                  role="separator"
+                ></li>
+              </template>
+            </template>
+            <li
+              v-else-if="visible(item) && item.separator"
+              :class="['p-menu-separator', item.class]"
+              :style="item.style"
+              :key="'separator' + i.toString()"
+              role="separator"
+            ></li>
+            <Menuitem
+              v-else
+              :key="label(item) + i.toString()"
+              :item="item"
+              @click="itemClick"
+              :template="$slots.item"
+              :exact="exact"
+            />
+          </template>
+        </ul>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<style>
+.p-menu-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.p-menu ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.p-menu .p-menuitem-link {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  overflow: hidden;
+  position: relative;
+}
+.p-menu .p-menuitem-text {
+  line-height: 1;
+}
+</style>

resources/js/components/AppMenuItem.vue

@@ -0,0 +1,83 @@
+<script>
+import Ripple from 'primevue/ripple'
+import { Link } from '@inertiajs/inertia-vue3'
+export default {
+  name: 'Menuitem',
+  inheritAttrs: false,
+  components: {
+    Link,
+  },
+  emits: ['click'],
+  props: {
+    item: null,
+    template: null,
+    exact: null,
+  },
+  methods: {
+    onClick(event, navigate) {
+      this.$emit('click', {
+        originalEvent: event,
+        item: this.item,
+        navigate: navigate,
+      })
+    },
+    linkClass(item) {
+      return [
+        'p-menuitem-link',
+        {
+          'p-disabled': this.disabled(item),
+        },
+      ]
+    },
+    visible() {
+      return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false
+    },
+    disabled(item) {
+      return typeof item.disabled === 'function' ? item.disabled() : item.disabled
+    },
+    label() {
+      return typeof this.item.label === 'function' ? this.item.label() : this.item.label
+    },
+  },
+  computed: {
+    containerClass() {
+      return ['p-menuitem', this.item.class]
+    },
+  },
+  directives: {
+    ripple: Ripple,
+  },
+}
+</script>
+
+<template>
+  <li :class="containerClass" role="none" :style="item.style" v-if="visible()">
+    <template v-if="!template">
+      <Link
+        v-if="item.to && !disabled(item)"
+        v-ripple
+        role="menuitem"
+        :href="item.to"
+        :class="linkClass(item)"
+        @click="onClick($event, navigate)"
+      >
+        <span :class="['p-menuitem-icon', item.icon]"></span>
+        <span class="p-menuitem-text">{{ label() }}</span>
+      </Link>
+      <a
+        v-else
+        :href="item.url"
+        :class="linkClass(item)"
+        @click="onClick"
+        :target="item.target"
+        role="menuitem"
+        :tabindex="disabled(item) ? null : '0'"
+        v-ripple
+      >
+        <span :class="['p-menuitem-icon', item.icon]"></span>
+        <span class="p-menuitem-text">{{ label() }}</span>
+      </a>
+    </template>
+    <component v-else :is="template" :item="item"></component>
+  </li>
+</template>

resources/js/components/AppPagination.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { Link } from '@inertiajs/inertia-vue3'
+
+defineProps({
+  links: Array,
+})
+</script>
+
+<template>
+  <nav v-if="links.length > 3" class="p-paginator p-component flex justify-content-start">
+    <div class="p-paginator-pages">
+      <template v-for="(link, key) in links">
+        <div
+          v-if="link.url === null"
+          :key="`link-${key}`"
+          class="p-paginator-page p-paginator-element p-link"
+          :class="{ 'p-disabled': link }"
+          v-html="link.label"
+        />
+
+        <Link
+          v-if="link.url !== null"
+          :key="`link-${key}`"
+          :href="link.url"
+          :class="{ 'p-highlight': link.active }"
+          class="p-paginator-page p-paginator-element p-link"
+          v-html="link.label"
+        />
+      </template>
+    </div>
+  </nav>
+</template>

resources/js/components/AppPassword.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    required: true,
+  },
+  error: {
+    type: String,
+    default: null,
+  },
+  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>
+
+    <Password
+      class="w-full"
+      input-class="w-full"
+      :id="forLabel"
+      :placeholder="placeholder"
+      :aria-describedby="ariaDescribedbyLabel"
+      :toggleMask="true"
+      :value="modelValue"
+      :model-value="modelValue"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+
+    <small v-if="error" :id="ariaDescribedbyLabel" :class="{ 'p-error': isError }">
+      {{ error }}
+    </small>
+  </div>
+</template>

resources/js/components/AppTopBar.vue

@@ -32,7 +32,7 @@ defineEmits(['menu-toggle'])
         <span class="hidden lg:inline">{{ $page.props.auth.user.name }}</span>
       </li>
       <li>
-        <Link class="p-link layout-topbar-button">
+        <Link :href="route('users.show', $page.props.auth.user.id)" class="p-link layout-topbar-button">
           <i class="pi pi-user"></i>
           <span>Profil Saya</span>
         </Link>

resources/js/pages/user/Create.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { computed, watch } from 'vue'
+import { useForm, Head, usePage } from '@inertiajs/inertia-vue3'
+import AppInputText from '@/components/AppInputText.vue'
+import AppDropdown from '@/components/AppDropdown.vue'
+import AppLayout from '@/layouts/AppLayout.vue'
+
+defineProps({
+  roles: Array,
+})
+
+const errors = computed(() => usePage().props.value.errors)
+
+watch(errors, () => {
+  form.clearErrors()
+})
+
+const form = useForm({
+  name: '',
+  phone: '',
+  email: '',
+  role_id: '',
+})
+
+const submit = () => {
+  form.post(route('users.store'), { onSuccess: () => form.reset() })
+}
+</script>
+
+<template>
+  <Head title="Tambah User" />
+
+  <AppLayout>
+    <div class="grid">
+      <div class="col-12 lg:col-8">
+        <Card>
+          <template #content>
+            <div class="grid">
+              <div class="col-12 md:col-6">
+                <AppInputText label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText label="Nomor HP" placeholder="nomor hp" :error="form.errors.phone" v-model="form.phone" />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText label="Email" placeholder="email" :error="form.errors.email" v-model="form.email" />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppDropdown
+                  label="Hak Akses"
+                  placeholder="pilih satu"
+                  v-model="form.role_id"
+                  :options="roles"
+                  :error="form.errors.role_id"
+                />
+              </div>
+            </div>
+          </template>
+
+          <template #footer>
+            <div class="flex flex-column md:flex-row justify-content-end">
+              <Button
+                label="Simpan"
+                icon="pi pi-check"
+                class="p-button-outlined"
+                :disabled="form.processing"
+                @click="submit"
+              />
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </AppLayout>
+</template>

resources/js/pages/user/Edit.vue

@@ -0,0 +1,137 @@
+<script setup>
+import { ref, watch, computed } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
+import { useForm, Head, usePage } from '@inertiajs/inertia-vue3'
+import AppInputText from '@/components/AppInputText.vue'
+import AppDropdown from '@/components/AppDropdown.vue'
+import AppButton from '@/components/AppButton.vue'
+import AppDialog from '@/components/AppDialog.vue'
+import AppLayout from '@/layouts/AppLayout.vue'
+
+const props = defineProps({
+  user: Object,
+  roles: Array,
+})
+
+const form = useForm({
+  name: props.user.name,
+  phone: props.user.phone,
+  email: props.user.email,
+  role_id: props.user.role_id,
+})
+
+const submit = () => {
+  form.put(route('users.update', props.user.id))
+}
+
+const visibleDialog = ref(false)
+
+const confirmDialog = () => {
+  visibleDialog.value = true
+}
+
+const onAgree = (id) => Inertia.delete(route('users.destroy', id))
+
+const onCancel = () => (visibleDialog.value = false)
+
+const errors = computed(() => usePage().props.value.errors)
+
+watch(errors, () => {
+  form.clearErrors()
+})
+</script>
+
+<template>
+  <Head title="Ubah User" />
+
+  <AppLayout>
+    <div class="grid">
+      <div class="col-12 lg:col-8">
+        <Card>
+          <template #content>
+            <div class="grid">
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="Nama"
+                  placeholder="nama"
+                  :disabled="user.role_id !== 1"
+                  :error="form.errors.name"
+                  v-model="form.name"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="Nomor HP"
+                  placeholder="nomor hp"
+                  :disabled="user.role_id !== 1"
+                  :error="form.errors.phone"
+                  v-model="form.phone"
+                />
+              </div>
+
+              <div class="col-12 md:col-6">
+                <AppInputText
+                  label="Email"
+                  placeholder="email"
+                  :disabled="user.role_id !== 1"
+                  :error="form.errors.email"
+                  v-model="form.email"
+                />
+              </div>
+
+              <div v-if="user.role_id !== 1" class="col-12 md:col-6">
+                <AppDropdown
+                  label="Hak Akses"
+                  placeholder="Pilih satu"
+                  v-model="form.role_id"
+                  :options="roles"
+                  :error="form.errors.role_id"
+                />
+              </div>
+            </div>
+          </template>
+
+          <template #footer>
+            <div class="grid">
+              <div class="col-12 md:col-6 flex flex-column md:flex-row justify-content-center md:justify-content-start">
+                <AppDialog
+                  message="Yakin akan menghapus data ini?"
+                  v-model:visible="visibleDialog"
+                  @agree="onAgree(user.id)"
+                  @cancel="onCancel"
+                />
+
+                <Button
+                  v-if="$page.props.auth.user.role_id !== user.role_id"
+                  label="Hapus"
+                  icon="pi pi-trash"
+                  class="p-button-outlined p-button-danger"
+                  @click="confirmDialog"
+                />
+              </div>
+
+              <div class="col-12 md:col-6 flex flex-column md:flex-row justify-content-center md:justify-content-end">
+                <AppButton
+                  label="Blokir"
+                  icon="pi pi-ban"
+                  method="delete"
+                  class="p-button-outlined p-button-danger md:mr-3 mb-3 md:mb-0"
+                  :href="route('users.block', user.id)"
+                />
+
+                <Button
+                  label="Simpan"
+                  class="p-button-outlined"
+                  icon="pi pi-check"
+                  :disabled="form.processing"
+                  @click="submit"
+                />
+              </div>
+            </div>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </AppLayout>
+</template>

resources/js/pages/user/Index.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { watch } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
+import { Head, useForm } from '@inertiajs/inertia-vue3'
+import throttle from 'lodash/throttle'
+import pickBy from 'lodash/pickBy'
+import AppLayout from '@/layouts/AppLayout.vue'
+import AppButton from '@/components/AppButton.vue'
+import AppPagination from '@/components/AppPagination.vue'
+
+import TableHeader from './TableHeader'
+
+const props = defineProps({
+  users: Object,
+  filters: Object,
+})
+
+const filterForm = useForm({
+  search: props.filters.search,
+})
+
+watch(
+  filterForm,
+  throttle(() => {
+    Inertia.get('/users', pickBy({ search: filterForm.search }), { preserveState: true })
+  }, 300)
+)
+</script>
+
+<template>
+  <Head title="Daftar User" />
+
+  <AppLayout>
+    <DataTable
+      responsiveLayout="scroll"
+      columnResizeMode="expand"
+      :value="users.data"
+      :rowHover="true"
+      :stripedRows="true"
+    >
+      <template #header>
+        <h1>User</h1>
+
+        <div class="grid">
+          <div class="col-12 md:col-8">
+            <div class="flex align-items-center">
+              <InputText class="w-full md:w-27rem" placeholder="cari..." v-model="filterForm.search" />
+            </div>
+          </div>
+
+          <div class="col-12 md:col-4 flex flex-column md:flex-row justify-content-end">
+            <AppButton
+              label="Tambah User"
+              icon="pi pi-pencil"
+              class="p-button-outlined"
+              :href="route('users.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-icon-only p-button-rounded p-button-text"
+            :href="route('users.edit', data.id)"
+          />
+        </template>
+      </Column>
+    </DataTable>
+
+    <AppPagination :links="users.links" />
+  </AppLayout>
+</template>

resources/js/pages/user/Show.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { computed, watch } from 'vue'
+import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
+import AppLayout from '@/layouts/AppLayout.vue'
+import AppInputText from '@/components/AppInputText.vue'
+import AppPassword from '@/components/AppPassword.vue'
+
+const props = defineProps({
+  user: Object,
+  roles: Array,
+})
+
+const errors = computed(() => usePage().props.value.errors)
+
+watch(errors, () => {
+  form.clearErrors()
+  formChangePassword.clearErrors()
+})
+
+const form = useForm({
+  name: props.user.name,
+  phone: props.user.phone,
+  email: props.user.email,
+  role_id: props.user.role_id,
+})
+
+const submit = () => {
+  form.put(route('users.update', props.user.id))
+}
+
+const formChangePassword = useForm({
+  old_password: '',
+  new_password: '',
+  new_password_confirmation: '',
+})
+
+const changePassword = () => {
+  formChangePassword.post(route('users.change-password', props.user.id), {
+    onSuccess: () => formChangePassword.reset(),
+  })
+}
+</script>
+
+<template>
+  <Head title="Profil Saya" />
+
+  <AppLayout>
+    <div class="grid">
+      <div class="col-12 md:col-8">
+        <Card>
+          <template #title>Profil Saya</template>
+
+          <template #content>
+            <TabView lazy>
+              <TabPanel header="Ubah Profil">
+                <div class="grid">
+                  <div class="col-12 md:col-6">
+                    <AppInputText label="Nama" placeholder="nama" :error="form.errors.name" v-model="form.name" />
+                  </div>
+
+                  <div class="col-12 md:col-6">
+                    <AppInputText
+                      label="Nomor HP"
+                      placeholder="nomor hp"
+                      :error="form.errors.phone"
+                      v-model="form.phone"
+                    />
+                  </div>
+
+                  <div class="col-12 md:col-6">
+                    <AppInputText label="Email" placeholder="email" :error="form.errors.email" v-model="form.email" />
+                  </div>
+
+                  <div class="col-12 flex justify-content-end">
+                    <Button
+                      label="Simpan"
+                      icon="pi pi-check"
+                      class="p-button-outlined"
+                      :disabled="form.processing"
+                      @click="submit"
+                    />
+                  </div>
+                </div>
+              </TabPanel>
+              <TabPanel header="Ubah Password">
+                <div class="grid">
+                  <div class="col-12">
+                    <AppPassword
+                      label="Password Lama"
+                      placeholder="password lama"
+                      :error="formChangePassword.errors.old_password"
+                      v-model="formChangePassword.old_password"
+                    />
+                  </div>
+
+                  <div class="col-12">
+                    <AppPassword
+                      label="Password Baru"
+                      placeholder="password baru"
+                      :error="formChangePassword.errors.new_password"
+                      v-model="formChangePassword.new_password"
+                    />
+                  </div>
+
+                  <div class="col-12">
+                    <AppPassword
+                      label="Konfirmasi Password"
+                      placeholder="konfirmasi password"
+                      v-model="formChangePassword.new_password_confirmation"
+                    />
+                  </div>
+
+                  <div class="col-12 flex justify-content-end">
+                    <Button
+                      label="Simpan"
+                      icon="pi pi-check"
+                      class="p-button-outlined"
+                      :disabled="formChangePassword.processing"
+                      @click="changePassword"
+                    />
+                  </div>
+                </div>
+              </TabPanel>
+            </TabView>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </AppLayout>
+</template>

resources/js/pages/user/TableHeader.js

@@ -0,0 +1,7 @@
+export default [
+  { field: 'name', header: 'Nama' },
+  { field: 'phone', header: 'No HP' },
+  { field: 'email', header: 'Email' },
+  { field: 'role', header: 'Hak Akses' },
+  { field: 'status', header: 'Status' },
+]

resources/js/utils/menu.js

@@ -6,14 +6,8 @@ export default {
       items: [{ label: 'Dashboard', icon: 'pi pi-home', to: '/dashboards', component: 'home/Index' }],
     },
     {
-      label: 'Menu',
-      items: [
-        {
-          label: 'Submenu 1',
-          icon: 'pi pi-bookmark',
-          items: [{ label: 'Submenu 1.1', icon: 'pi pi-bookmark' }],
-        },
-      ],
+      label: 'Master',
+      items: [{ label: 'User', icon: 'pi pi-user', to: '/users', component: 'user/Index' }],
     },
   ],
 

routes/web.php

@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\DashboardController;
+use App\Http\Controllers\UserController;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -18,6 +19,10 @@ Route::middleware(['auth', 'verified'])->group(function () {
     Route::get('/', DashboardController::class);
 
     Route::get('/dashboards', DashboardController::class);
+
+    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);
 });
 
 require __DIR__ . '/auth.php';