Merge pull request 'refactor(usermanagement): streamline UsersSeeder by utilizing RolesSeeder and improving user creation logic' (#1) from new_adk into master

Reviewed-on: #1

app/Http/Controllers/PermissionsController.php

@@ -276,9 +276,7 @@
             // Apply search filter if provided
             if ($request->has('search') && !empty($request->get('search'))) {
                 $search = $request->get('search');
-                $query->where(function ($q) use ($search) {
-                    $q->whereRaw('LOWER(name) LIKE ?', ['%' . strtolower($search) . '%']);
-                });
+                $query->where('name', 'like', '%' . $search . '%');
             }
 
             // Apply sorting if provided
@@ -303,14 +301,11 @@
             // Get the filtered count of records
             $filteredRecords = $query->count();
 
-
             // Get the data for the current page
-            $permissions = $query->get();
+            $data = $query->get();
 
-
-            $permissions = $permissions->map(function ($permission) {
+            $data = $data->map(function ($permission) {
                 $permission->roles = $permission->roles($permission);
-
                 return $permission;
             });
 
@@ -328,7 +323,7 @@
                 'pageCount'       => $pageCount,
                 'page'            => $currentPage,
                 'totalCount'      => $totalRecords,
-                'data'            => $permissions,
+                'data'            => $data,
             ]);
         }
 

app/Http/Controllers/PositionsController.php

@@ -223,11 +223,7 @@
             // Apply search filter if provided
             if ($request->has('search') && !empty($request->get('search'))) {
                 $search = $request->get('search');
-                $query->where(function ($q) use ($search) {
-                    $q->whereRaw('LOWER(code) LIKE ?', ['%' . strtolower($search) . '%'])
-                      ->orWhereRaw('LOWER(name) LIKE ?', ['%' . strtolower($search) . '%'])
-                      ->orWhereRaw('CAST(level AS TEXT) LIKE ?', ['%' . $search . '%']);
-                });
+                $query->whereAny(['code', 'name', 'level'], 'like', '%' . $search . '%');
             }
 
             // Apply sorting if provided
@@ -253,7 +249,7 @@
             $filteredRecords = $query->count();
 
             // Get the data for the current page
-            $positions = $query->get();
+            $data = $query->get();
 
             // Calculate the page count
             $size = $request->get('size', 10); // Default to 10 if not set
@@ -270,7 +266,7 @@
                 'pageCount'       => $pageCount,
                 'page'            => $currentPage,
                 'totalCount'      => $totalRecords,
-                'data'            => $positions,
+                'data'            => $data,
             ]);
         }
 

app/Http/Controllers/RolesController.php

@@ -273,14 +273,17 @@
             // Retrieve data from the database
             $query = Role::query();
 
+            if(!$this->user->hasRole('administrator')){
+                $query->where('name', '!=', 'administrator');
+            }
+
             // Apply search filter if provided
             if ($request->has('search') && !empty($request->get('search'))) {
                 $search = $request->get('search');
                 $query->where(function ($q) use ($search) {
-                    $q->whereRaw('LOWER(name) LIKE ?', ['%' . strtolower($search) . '%'])
+                    $q->where('name', 'like', '%' . $search . '%')
                       ->orWhereHas('position', function ($query) use ($search) {
-                          $query->whereRaw('LOWER(name) LIKE ?', ['%' . strtolower($search) . '%'])
-                                ->orWhereRaw('CAST(level AS TEXT) LIKE ?', ['%' . $search . '%']);
+                          $query->whereAny(['name', 'level'], 'like','%'.$search.'%');
                       });
                 });
             }
@@ -290,19 +293,17 @@
                 $order  = $request->get('sortOrder');
                 $column = $request->get('sortField');
 
-                // Handle sorting for position-related columns
                 if ($column === 'position_name') {
                     $query->leftJoin('positions', 'roles.position_id', '=', 'positions.id')
-                          ->orderByRaw('LOWER(positions.name) ' . $order)
+                          ->orderBy('positions.name', $order)
                           ->select('roles.*'); // Select only from roles table to avoid column conflicts
                 } else if ($column === 'level') {
                     $query->leftJoin('positions', 'roles.position_id', '=', 'positions.id')
                           ->orderBy('positions.level', $order)
                           ->select('roles.*'); // Select only from roles table to avoid column conflicts
                 } else {
-                    // Make sorting case-insensitive for string columns
                     if ($column === 'name') {
-                        $query->orderByRaw('LOWER(roles.name) ' . $order);
+                        $query->orderBy('roles.name', $order);
                     } else {
                         $query->orderBy($column, $order);
                     }
@@ -328,7 +329,7 @@
             $filteredRecords = $countQuery->distinct()->count('roles.id');
 
             // Get the data for the current page
-            $roles = $query->with('position')->get();
+            $data = $query->with('position')->get();
 
             // Calculate the page count - ensure we don't divide by zero
             $pageSize = $request->get('size', 10); // Default to 10 if not provided
@@ -345,7 +346,7 @@
                 'pageCount'       => $pageCount,
                 'page'            => $currentPage,
                 'totalCount'      => $totalRecords,
-                'data'            => $roles,
+                'data'            => $data,
             ]);
         }
 

app/Http/Controllers/UsersController.php

@@ -79,10 +79,16 @@
             // Retrieve data from the database
             $query = User::query();
 
+            if(!$this->user->hasRole('administrator')){
+                $query->whereHas('roles', function($q){
+                    $q->where('name', '!=', 'administrator');
+                });
+            }
+
             // Apply search filter if provided
             if ($request->has('search') && !empty($request->get('search'))) {
                 $search = $request->get('search');
-                $query->whereAny(['name','email'],'like','%'.$search.'%');
+                $query->whereAny(['name', 'email'], 'like', '%'.$search.'%');
             }
 
             // Apply sorting if provided
@@ -108,7 +114,7 @@
             $filteredRecords = $query->count();
 
             // Get the data for the current page
-            $users = $query->with(['branch', 'roles'])->get();
+            $data = $query->with(['branch', 'roles'])->get();
 
             // Calculate the page count
             $pageCount = ceil($totalRecords / $request->get('size'));
@@ -124,7 +130,7 @@
                 'pageCount'       => $pageCount,
                 'page'            => $currentPage,
                 'totalCount'      => $totalRecords,
-                'data'            => $users,
+                'data'            => $data,
             ]);
         }
 
@@ -144,6 +150,9 @@
 
             $user     = User::find($id);
             $roles    = Role::all();
+            if(!$this->user->hasRole('administrator')){
+                $roles = $roles->where('name', '!=', 'administrator');
+            }
             $branches = Branch::all();
             return view('usermanagement::users.create', compact('user', 'roles', 'branches'));
         }
@@ -234,6 +243,9 @@
             }
 
             $roles    = Role::all();
+            if(!$this->user->hasRole('administrator')){
+                $roles = $roles->where('name', '!=', 'administrator');
+            }
             $branches = Branch::all();
             return view('usermanagement::users.create', compact('roles', 'branches'));
         }

app/Models/User.php

@@ -1,94 +1,105 @@
 <?php
 
-    namespace Modules\Usermanagement\Models;
+namespace Modules\Usermanagement\Models;
 
-    use Illuminate\Database\Eloquent\Factories\HasFactory;
-    use Illuminate\Database\Eloquent\SoftDeletes;
-    use Illuminate\Foundation\Auth\User as Authenticatable;
-    use Illuminate\Notifications\Notifiable;
-    use Modules\Basicdata\Models\Branch;
-    use Spatie\Permission\Traits\HasRoles;
-    use Mattiverse\Userstamps\Traits\Userstamps;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Foundation\Auth\User as Authenticatable;
+use Illuminate\Notifications\Notifiable;
+use Modules\Basicdata\Models\Branch;
+use Modules\Adk\Models\Appointment;
+use Spatie\Permission\Traits\HasRoles;
+use Mattiverse\Userstamps\Traits\Userstamps;
+
+/**
+ * Class User
+ *
+ * This class extends the Laravel's Authenticatable class and represents a User in the application.
+ * It includes traits for using factories, notifications, API tokens, and UUIDs.
+ *
+ * @property string $name           The name of the user.
+ * @property string $email          The email of the user.
+ * @property string $password       The hashed password of the user.
+ * @property string $remember_token The token used for "remember me" functionality.
+ *
+ * @package App\Models
+ */
+class User extends Authenticatable
+{
+    use HasFactory, Notifiable, Userstamps, HasRoles, softDeletes;
+
+    protected $guard_name = ['web'];
 
     /**
-     * Class User
+     * The attributes that are mass assignable.
      *
-     * This class extends the Laravel's Authenticatable class and represents a User in the application.
-     * It includes traits for using factories, notifications, API tokens, and UUIDs.
+     * These are the attributes that can be set in bulk during a create or update operation.
      *
-     * @property string $name           The name of the user.
-     * @property string $email          The email of the user.
-     * @property string $password       The hashed password of the user.
-     * @property string $remember_token The token used for "remember me" functionality.
-     *
-     * @package App\Models
+     * @var array<int, string>
      */
-    class User extends Authenticatable
+    protected $fillable = [
+        'name',
+        'email',
+        'password',
+        'nik',
+        'branch_id',
+        'profile_photo_path',
+        'last_login_at',
+        'last_login_ip',
+        'sign'
+    ];
+
+    /**
+     * The attributes that should be hidden for serialization.
+     *
+     * These are the attributes that will be hidden when the model is converted to an array or JSON.
+     *
+     * @var array<int, string>
+     */
+    protected $hidden = [
+        'password',
+        'remember_token',
+    ];
+
+    /**
+     * Get the attributes that should be cast.
+     *
+     * This method defines how the attributes should be cast when accessed.
+     * In this case, 'email_verified_at' is cast to 'datetime', 'password' is cast to 'hashed', and 'id' is cast to 'string'.
+     *
+     * @return array<string, string>
+     */
+    protected function casts(): array
     {
-        use HasFactory, Notifiable, Userstamps, HasRoles, softDeletes;
-
-        protected $guard_name = ['web'];
-
-        /**
-         * The attributes that are mass assignable.
-         *
-         * These are the attributes that can be set in bulk during a create or update operation.
-         *
-         * @var array<int, string>
-         */
-        protected $fillable = [
-            'name',
-            'email',
-            'password',
-            'nik',
-            'branch_id',
-            'profile_photo_path',
-            'last_login_at',
-            'last_login_ip',
-            'sign'
+        return [
+            'email_verified_at' => 'datetime',
+            'password'          => 'hashed',
+            'id'                => 'string',
         ];
-
-        /**
-         * The attributes that should be hidden for serialization.
-         *
-         * These are the attributes that will be hidden when the model is converted to an array or JSON.
-         *
-         * @var array<int, string>
-         */
-        protected $hidden = [
-            'password',
-            'remember_token',
-        ];
-
-        /**
-         * Get the attributes that should be cast.
-         *
-         * This method defines how the attributes should be cast when accessed.
-         * In this case, 'email_verified_at' is cast to 'datetime', 'password' is cast to 'hashed', and 'id' is cast to 'string'.
-         *
-         * @return array<string, string>
-         */
-        protected function casts()
-        : array
-        {
-            return [
-                'email_verified_at' => 'datetime',
-                'password'          => 'hashed',
-                'id'                => 'string',
-            ];
-        }
-
-        public function branch(){
-            return $this->belongsTo(Branch::class);
-        }
-
-        /**
-         * Create a new factory instance for the model.
-         *
-         * @return \Illuminate\Database\Eloquent\Factories\Factory
-         */
-        protected static function newFactory()
-        {
-            return \Modules\Usermanagement\Database\Factories\UserFactory::new();
-        }
     }
+
+    public function branch()
+    {
+        return $this->belongsTo(Branch::class);
+    }
+
+    /**
+     * Create a new factory instance for the model.
+     *
+     * @return \Illuminate\Database\Eloquent\Factories\Factory
+     */
+    protected static function newFactory()
+    {
+        return \Modules\Usermanagement\Database\Factories\UserFactory::new();
+    }
+
+    /**
+     * Get all of the appointments for the User
+     *
+     * @return \Illuminate\Database\Eloquent\Relations\HasMany
+     */
+    public function appointments()
+    {
+        return $this->hasMany(Appointment::class, 'admin_id');
+    }
+}

database/seeders/UsersSeeder.php

@@ -1,35 +1,42 @@
 <?php
 
-    namespace Modules\Usermanagement\Database\Seeders;
+namespace Modules\Usermanagement\Database\Seeders;
 
-    use Faker\Generator;
-    use Illuminate\Database\Seeder;
-    use Illuminate\Support\Facades\Hash;
-    use Modules\Usermanagement\Models\User;
-    use Spatie\Permission\Models\Role;
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\Hash;
+use Modules\Usermanagement\Models\User;
+use Modules\Usermanagement\Database\Seeders\RolesSeeder;
 
-    class UsersSeeder extends Seeder
+class UsersSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
     {
-        /**
-         * Run the database seeds.
-         *
-         * @return void
-         */
-        public function run(Generator $faker)
-        {
-            $roles = Role::all();
+        $roleSeeder = new RolesSeeder();
+        $rolesData = $roleSeeder->data();
 
-            foreach ($roles as $role) {
-                $user = User::create([
-                    'name'              => $role->name,
-                    'email'             => $role->name . '@ag.co.id',
-                    'password'          => Hash::make('bagbag'),
-                    'branch_id'         => 1,
-                    'nik'               => '000000',
-                    'email_verified_at' => now(),
-                ]);
+        foreach ($rolesData as $roleData) {
+            if ($roleData['name'] === 'administrator') {
+                $user = User::firstOrCreate(
+                    ['email' => $roleData['name'] . '@ag.co.id'],
+                    [
+                        'name' => $roleData['name'],
+                        'password' => Hash::make('bagbag'),
+                        'branch_id' => 1,
+                        'nik' => '000000',
+                        'email_verified_at' => now(),
+                    ]
+                );
+
+                $role = \Spatie\Permission\Models\Role::firstOrCreate(
+                    ['name' => $roleData['name']],
+                    ['guard_name' => 'web']
+                );
 
                 $user->assignRole($role);
             }
         }
     }
+}

resources/views/permissions/index.blade.php

@@ -7,8 +7,10 @@
 @section('content')
     <div class="container-fluid">
         <div class="grid">
-            <div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="true" id="permissions-table" data-api-url="{{ route('users.permissions.datatables') }}">
-                <div class="card-header py-5 flex-wrap">
+            <div class="min-w-full card card-grid" data-datatable="false" data-datatable-page-size="5"
+                data-datatable-state-save="true" id="permissions-table"
+                data-api-url="{{ route('users.permissions.datatables') }}">
+                <div class="flex-wrap py-5 card-header">
                     <h3 class="card-title">
                         List of Permissions
                     </h3>
@@ -21,38 +23,43 @@
                         </div>
                         <div class="flex flex-wrap gap-2.5 lg:gap-5">
                             <div class="h-[24px] border border-r-gray-200"> </div>
-                            <a class="btn btn-sm btn-light" href="{{ route('users.permissions.export') }}"> Export to Excel </a>
-                            <a class="btn btn-sm btn-primary" href="{{ route('users.permissions.create') }}"> Add Permission </a>
+                            <a class="btn btn-sm btn-light" href="{{ route('users.permissions.export') }}"> Export to Excel
+                            </a>
+                            <a class="btn btn-sm btn-primary" href="{{ route('users.permissions.create') }}"> Add Permission
+                            </a>
                         </div>
                     </div>
                 </div>
                 <div class="card-body">
                     <div class="scrollable-x-auto">
-                        <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
+                        <table class="table text-sm font-medium text-gray-700 align-middle table-auto table-border"
+                            data-datatable-table="true">
                             <thead>
-                            <tr>
-                                <th class="w-14">
-                                    <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
-                                </th>
-                                <th class="min-w-[250px]" data-datatable-column="name">
-                                    <span class="sort"> <span class="sort-label"> Permission </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[250px]" data-datatable-column="roles">
-                                    <span class="sort"> <span class="sort-label"> Roles </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
-                            </tr>
+                                <tr>
+                                    <th class="w-14">
+                                        <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox" />
+                                    </th>
+                                    <th class="min-w-[250px]" data-datatable-column="name">
+                                        <span class="sort"> <span class="sort-label"> Permission </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[250px]" data-datatable-column="roles">
+                                        <span class="sort"> <span class="sort-label"> Roles </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
+                                </tr>
                             </thead>
                         </table>
                     </div>
-                    <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
-                        <div class="flex items-center gap-2">
+                    <div
+                        class="flex-col gap-3 justify-center font-medium text-gray-600 card-footer md:justify-between md:flex-row text-2sm">
+                        <div class="flex gap-2 items-center">
                             Show
-                            <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
+                            <select class="w-16 select select-sm" data-datatable-size="true" name="perpage"> </select> per
+                            page
                         </div>
-                        <div class="flex items-center gap-4">
+                        <div class="flex gap-4 items-center">
                             <span data-datatable-info="true"> </span>
                             <div class="pagination" data-datatable-pagination="true">
                             </div>
@@ -70,7 +77,7 @@
         function deleteData(data) {
             Swal.fire({
                 title: 'Are you sure?',
-                text: "You won't be able to revert this!" ,
+                text: "You won't be able to revert this!",
                 icon: 'warning',
                 showCancelButton: true,
                 confirmButtonColor: '#3085d6',
@@ -80,14 +87,14 @@
                 if (result.isConfirmed) {
                     $.ajaxSetup({
                         headers: {
-                            'X-CSRF-TOKEN': '{{ csrf_token()  }}'
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                         }
                     });
 
                     $.ajax(`permissions/${data}`, {
                         type: 'DELETE'
                     }).then((response) => {
-                        swal.fire('Deleted!', 'User has been deleted.','success').then(() => {
+                        swal.fire('Deleted!', 'User has been deleted.', 'success').then(() => {
                             window.location.reload();
                         });
                     }).catch((error) => {
@@ -102,7 +109,7 @@
         const element = document.querySelector('#permissions-table');
         const searchInput = document.getElementById('search');
         const apiUrl = element.getAttribute('data-api-url');
-        const colors = ['','badge-primary', 'badge-success', 'badge-info', 'badge-danger', 'badge-warning', 'badge-dark'];
+        const colors = ['', 'badge-primary', 'badge-success', 'badge-info', 'badge-danger', 'badge-warning', 'badge-dark'];
 
 
         const dataTableOptions = {
@@ -125,12 +132,12 @@
                 roles: {
                     title: 'Roles',
                     render: (item, data) => {
-                         const _render = data.roles.map((role) =>{
+                        const _render = data.roles.map((role) => {
                             const randomColor = colors[Math.floor(Math.random() * colors.length)];
                             return `<span class="badge ${randomColor} badge-sm">${role.name}</span>`;
-                         });
+                        });
 
-                         return _render.join(' ');
+                        return _render.join(' ');
                     }
                 },
                 actions: {
@@ -151,10 +158,10 @@
 
         let dataTable = new KTDataTable(element, dataTableOptions);
         // Custom search functionality
-        searchInput.addEventListener('input', function () {
+        searchInput.addEventListener('input', function() {
             const searchValue = this.value.trim();
             dataTable.search(searchValue, true);
+            dataTable.goPage(1);
         });
     </script>
 @endpush
-

resources/views/positions/index.blade.php

@@ -7,8 +7,9 @@
 @section('content')
     <div class="container-fluid">
         <div class="grid">
-            <div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="true" id="positions-table" data-api-url="{{ route('users.positions.datatables') }}">
-                <div class="card-header py-5 flex-wrap">
+            <div class="min-w-full card card-grid" data-datatable="false" data-datatable-page-size="5"
+                data-datatable-state-save="true" id="positions-table" data-api-url="{{ route('users.positions.datatables') }}">
+                <div class="flex-wrap py-5 card-header">
                     <h3 class="card-title">
                         List of Positions
                     </h3>
@@ -20,42 +21,47 @@
                         </div>
                         <div class="flex flex-wrap gap-2.5 lg:gap-5">
                             <div class="h-[100%] border border-r-gray-200"> </div>
-                            <a class="btn btn-sm btn-light" id="export-btn" href="{{ route('users.positions.export') }}"> Export to Excel </a>
-                            <a class="btn btn-sm btn-primary" href="{{ route('users.positions.create') }}"> Add Position </a>
+                            <a class="btn btn-sm btn-light" id="export-btn" href="{{ route('users.positions.export') }}">
+                                Export to Excel </a>
+                            <a class="btn btn-sm btn-primary" href="{{ route('users.positions.create') }}"> Add Position
+                            </a>
                         </div>
                     </div>
                 </div>
                 <div class="card-body">
                     <div class="scrollable-x-auto">
-                        <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
+                        <table class="table text-sm font-medium text-gray-700 align-middle table-auto table-border"
+                            data-datatable-table="true">
                             <thead>
-                            <tr>
-                                <th class="w-14">
-                                    <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
-                                </th>
-                                <th class="min-w-[150px]" data-datatable-column="code">
-                                    <span class="sort"> <span class="sort-label"> Code </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[250px]" data-datatable-column="name">
-                                    <span class="sort"> <span class="sort-label"> Name </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[100px]" data-datatable-column="level">
-                                    <span class="sort"> <span class="sort-label"> Tingkat Jabatan </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
-                            </tr>
+                                <tr>
+                                    <th class="w-14">
+                                        <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox" />
+                                    </th>
+                                    <th class="min-w-[150px]" data-datatable-column="code">
+                                        <span class="sort"> <span class="sort-label"> Code </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[250px]" data-datatable-column="name">
+                                        <span class="sort"> <span class="sort-label"> Name </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[100px]" data-datatable-column="level">
+                                        <span class="sort"> <span class="sort-label"> Tingkat Jabatan </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
+                                </tr>
                             </thead>
                         </table>
                     </div>
-                    <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
-                        <div class="flex items-center gap-2">
+                    <div
+                        class="flex-col gap-3 justify-center font-medium text-gray-600 card-footer md:justify-between md:flex-row text-2sm">
+                        <div class="flex gap-2 items-center">
                             Show
-                            <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
+                            <select class="w-16 select select-sm" data-datatable-size="true" name="perpage"> </select> per
+                            page
                         </div>
-                        <div class="flex items-center gap-4">
+                        <div class="flex gap-4 items-center">
                             <span data-datatable-info="true"> </span>
                             <div class="pagination" data-datatable-pagination="true">
                             </div>
@@ -73,7 +79,7 @@
         function deleteData(data) {
             Swal.fire({
                 title: 'Are you sure?',
-                text: "You won't be able to revert this!" ,
+                text: "You won't be able to revert this!",
                 icon: 'warning',
                 showCancelButton: true,
                 confirmButtonColor: '#3085d6',
@@ -83,14 +89,14 @@
                 if (result.isConfirmed) {
                     $.ajaxSetup({
                         headers: {
-                            'X-CSRF-TOKEN': '{{ csrf_token()  }}'
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                         }
                     });
 
                     $.ajax(`positions/${data}`, {
                         type: 'DELETE'
                     }).then((response) => {
-                        swal.fire('Deleted!', 'Position has been deleted.','success').then(() => {
+                        swal.fire('Deleted!', 'Position has been deleted.', 'success').then(() => {
                             window.location.reload();
                         });
                     }).catch((error) => {
@@ -150,9 +156,10 @@
         const baseExportUrl = exportBtn.getAttribute('href');
 
         // Custom search functionality
-        searchInput.addEventListener('input', function () {
+        searchInput.addEventListener('input', function() {
             const searchValue = this.value.trim();
             dataTable.search(searchValue, true);
+            dataTable.goPage(1);
 
             // Update export URL with search parameter
             if (searchValue) {

resources/views/roles/index.blade.php

@@ -7,8 +7,9 @@
 @section('content')
     <div class="container-fluid">
         <div class="grid">
-            <div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="true" id="roles-table" data-api-url="{{ route('users.roles.datatables') }}">
-                <div class="card-header py-5 flex-wrap">
+            <div class="min-w-full card card-grid" data-datatable="false" data-datatable-page-size="5"
+                data-datatable-state-save="true" id="roles-table" data-api-url="{{ route('users.roles.datatables') }}">
+                <div class="flex-wrap py-5 card-header">
                     <h3 class="card-title">
                         List of Roles
                     </h3>
@@ -28,35 +29,38 @@
                 </div>
                 <div class="card-body">
                     <div class="scrollable-x-auto">
-                        <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
+                        <table class="table text-sm font-medium text-gray-700 align-middle table-auto table-border"
+                            data-datatable-table="true">
                             <thead>
-                            <tr>
-                                <th class="w-14">
-                                    <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
-                                </th>
-                                <th class="min-w-[250px]" data-datatable-column="name">
-                                    <span class="sort"> <span class="sort-label"> Role </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[200px]" data-datatable-column="position_name">
-                                    <span class="sort"> <span class="sort-label"> Position </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[100px]" data-datatable-column="level">
-                                    <span class="sort"> <span class="sort-label"> Tingkat Jabatan </span>
-                                        <span class="sort-icon"> </span> </span>
-                                </th>
-                                <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
-                            </tr>
+                                <tr>
+                                    <th class="w-14">
+                                        <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox" />
+                                    </th>
+                                    <th class="min-w-[250px]" data-datatable-column="name">
+                                        <span class="sort"> <span class="sort-label"> Role </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[200px]" data-datatable-column="position_name">
+                                        <span class="sort"> <span class="sort-label"> Position </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[100px]" data-datatable-column="level">
+                                        <span class="sort"> <span class="sort-label"> Tingkat Jabatan </span>
+                                            <span class="sort-icon"> </span> </span>
+                                    </th>
+                                    <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
+                                </tr>
                             </thead>
                         </table>
                     </div>
-                    <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
-                        <div class="flex items-center gap-2">
+                    <div
+                        class="flex-col gap-3 justify-center font-medium text-gray-600 card-footer md:justify-between md:flex-row text-2sm">
+                        <div class="flex gap-2 items-center">
                             Show
-                            <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
+                            <select class="w-16 select select-sm" data-datatable-size="true" name="perpage"> </select> per
+                            page
                         </div>
-                        <div class="flex items-center gap-4">
+                        <div class="flex gap-4 items-center">
                             <span data-datatable-info="true"> </span>
                             <div class="pagination" data-datatable-pagination="true">
                             </div>
@@ -74,7 +78,7 @@
         function deleteData(data) {
             Swal.fire({
                 title: 'Are you sure?',
-                text: "You won't be able to revert this!" ,
+                text: "You won't be able to revert this!",
                 icon: 'warning',
                 showCancelButton: true,
                 confirmButtonColor: '#3085d6',
@@ -84,14 +88,14 @@
                 if (result.isConfirmed) {
                     $.ajaxSetup({
                         headers: {
-                            'X-CSRF-TOKEN': '{{ csrf_token()  }}'
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                         }
                     });
 
                     $.ajax(`roles/${data}`, {
                         type: 'DELETE'
                     }).then((response) => {
-                        swal.fire('Deleted!', 'User has been deleted.','success').then(() => {
+                        swal.fire('Deleted!', 'User has been deleted.', 'success').then(() => {
                             window.location.reload();
                         });
                     }).catch((error) => {
@@ -156,9 +160,10 @@
 
         let dataTable = new KTDataTable(element, dataTableOptions);
         // Custom search functionality
-        searchInput.addEventListener('input', function () {
+        searchInput.addEventListener('input', function() {
             const searchValue = this.value.trim();
             dataTable.search(searchValue, true);
+            dataTable.goPage(1);
         });
     </script>
 @endpush