User access dan user role dinamis

Modules/Internal/Http/Controllers/Api/NavigationController.php

@@ -0,0 +1,125 @@
+<?php
+
+namespace Modules\Internal\Http\Controllers\Api;
+
+use App\Models\Navigations;
+use Illuminate\Contracts\Support\Renderable;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+
+class NavigationController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     * @return Renderable
+     */
+    public function index(Request $request)
+    {
+        // Ambil semua navigasi dari tabel dan ubah menjadi array
+        $navigations = Navigations::all()->toArray();
+        $navigationMaster = [];
+
+        if ($navigations) {
+            // Buat array untuk menyimpan menu utama
+            foreach ($navigations as $navigation) {
+                if ($navigation['parent_id'] == 0) {
+                    // Tambahkan menu utama ke $navigationMaster
+                    $navigation['children'] = []; // Siapkan array untuk children
+                    $navigationMaster[$navigation['id']] = $navigation;
+                }
+            }
+
+            // Tambahkan submenu ke menu utama yang sesuai
+            foreach ($navigations as $navigation) {
+                if ($navigation['parent_id'] != 0 && isset($navigationMaster[$navigation['parent_id']])) {
+                    $navigationMaster[$navigation['parent_id']]['children'][] = $navigation;
+                }
+            }
+        }
+
+        // Ubah array menjadi list tanpa indeks id
+        $navigationMaster = array_values($navigationMaster);
+
+        // Transformasi data untuk sesuai dengan format yang diinginkan
+        $formattedNavigation = [
+            'items' => array_map(function ($navItem) {
+                return [
+                    'title' => $navItem['title'],
+                    'path' => $navItem['path'],
+                    'children' => array_map(function ($child) {
+                        return [
+                            'title' => $child['title'],
+                            'path' => $child['path'],
+                            'icon' => $child['icon'], // Asumsikan Anda memiliki field 'icon' di tabel navigasi
+                            'permission' => $child['permission'],
+                        ];
+                    }, $navItem['children']),
+                    'permission' => $navItem['permission'],
+                ];
+            }, $navigationMaster)
+        ];
+
+        return response()->json($formattedNavigation);
+    }
+
+
+    /**
+     * Show the form for creating a new resource.
+     * @return Renderable
+     */
+    public function create()
+    {
+        return view('internal::create');
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     * @param Request $request
+     * @return Renderable
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Show the specified resource.
+     * @param int $id
+     * @return Renderable
+     */
+    public function show($id)
+    {
+        return view('internal::show');
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     * @param int $id
+     * @return Renderable
+     */
+    public function edit($id)
+    {
+        return view('internal::edit');
+    }
+
+    /**
+     * Update the specified resource in storage.
+     * @param Request $request
+     * @param int $id
+     * @return Renderable
+     */
+    public function update(Request $request, $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     * @param int $id
+     * @return Renderable
+     */
+    public function destroy($id)
+    {
+        //
+    }
+}

Modules/Internal/Http/Controllers/Api/UserManagementController.php

@@ -6,12 +6,159 @@ use App\Helpers\Helper;
 use Illuminate\Contracts\Support\Renderable;
 use Illuminate\Http\Request;
 use Illuminate\Routing\Controller;
+use Spatie\Permission\Models\Role;
+use Illuminate\Support\Facades\Hash;
+use Spatie\Permission\Models\Permission;
 use App\Models\User;
+use App\Models\Person;
+use Crypt;
 
-class UserManagemet extends Controller
+class UserManagementController extends Controller
 {
-    public function index(Request $request){
+    public function index(Request $request)
-        $user = User::all();
+    {
-        return Helper::responseJson(data: $user);
+        $query = Role::query();
+        if ($request->has('search')) {
+            $search = $request->get('search');
+            $query->where('name', 'like', "%{$search}%");
+        }
+        $userRole = $query->paginate(10);
+        return Helper::paginateResources($userRole);
+    }
+
+    public function permission_list(Request $request)
+    {
+        $permissions = Permission::all();
+        return response()->json($permissions);
+    }
+
+    public function store(Request $request)
+    {
+        $validated = $request->validate([
+            'name' => 'required|string|max:255',
+            'guard_name' => 'required|string|max:255', // Pastikan setiap permission ada di tabel permissions
+        ]);
+
+        $newRole = Role::create([
+            'name' => $validated['name'],
+            'guard_name' => $validated['guard_name'],
+        ]);
+
+        if (isset($request->permission_check)) {
+            $newRole->syncPermissions($request->permission_check);
+        }
+
+        return response()->json($newRole, 201);
+    }
+
+    public function edit($id)
+    {
+        $role = Role::with('permissions')->findOrFail($id);
+        return response()->json($role);
+    }
+
+    public function update(Request $request, $id)
+    {
+        $role =  Role::with('permissions')->findOrFail($id);
+        $validated = $request->validate([
+            'name' => 'required|string|max:255',
+            'guard_name' => 'required|string|max:255',
+            'permission_check' => 'nullable|array',
+            'permission_check.*' => 'exists:permissions,id', // Pastikan setiap permission ada di tabel permissions
+        ]);
+
+        $role->update([
+            'name' => $validated['name'],
+            'guard_name' => $validated['guard_name'],
+        ]);
+
+        if (isset($validated['permission_check'])) {
+            
+            $permissions = Permission::whereIn('id', $validated['permission_check'])
+                ->where('guard_name', $validated['guard_name'])
+                ->get();
+            if ($permissions->count() !== count($validated['permission_check'])) {
+                return response()->json(['error' => 'One or more permissions are invalid for the specified guard.'], 422);
+            }
+            $role->syncPermissions($permissions);
+        }
+
+        return response()->json($role);
+    }
+
+    public function list_role(Request $request)
+    {
+        $query = Role::all();
+        $data = [
+            'data' => $query
+        ];
+        return response()->json($data);
+    }
+
+    public function store_access(Request $request){
+        $user = User::create([
+            'email' => $request->email,
+            'username' => $request->username,
+            'role_id' => $request->roles,
+            'password' => Hash::make($request->password),
+        ]);
+
+        $person = Person::updateOrCreate(
+            [
+                'id' => $user->person_id
+            ],
+            [
+                'name' => $request->name ?? null
+            ]
+        );
+        $user->person_id = $person->id;
+        $user->save();
+        return response()->json($user);
+    }
+
+    // List Access
+    public function list_access(Request $request){
+        $userAccess = User::query();
+        if ($request->has('search')) {
+            $search = $request->get('search');
+            $userAccess->where('name', 'like', "%{$search}%");
+        }
+        $userAccess = $userAccess->paginate(10);
+        return Helper::paginateResources($userAccess);
+    }
+
+    public function edit_access($id){
+        $userAccess = User::findOrFail($id);
+        return response()->json($userAccess);
+    }
+
+    public function update_access(Request $request, $id){
+        $userAccess = User::findOrFail($id);
+
+        if (!$userAccess) {
+            return response()->json(['error' => 'User Not found.'], 404);
+        }
+
+        $userAccess->email = $request->email;
+        $userAccess->username = $request->username;
+        $userAccess->role_id = $request->roles;
+
+        if ($request->password){
+            $userAccess->password = Hash::make($request->password);
+        } 
+
+        $person = Person::updateOrCreate(
+            [
+                'id' => $userAccess->person_id
+            ],
+            [
+                'name' => $request->name ?? null
+            ]
+        );
+
+        $userAccess->person_id = $person->id;
+        $userAccess->save();
+
+        return response()->json($userAccess);
     }
 }

Modules/Internal/Routes/api.php

@@ -39,10 +39,12 @@ use Modules\Internal\Http\Controllers\Api\ServiceController;
 use Modules\Internal\Http\Controllers\Api\PrescriptionController;
 use Modules\Internal\Http\Controllers\Api\SpecialityController;
 use Modules\Internal\Http\Controllers\Api\VillageController;
+use Modules\Internal\Http\Controllers\Api\NavigationController;
 use Modules\Internal\Http\Controllers\Api\AuditTrailController;
 use Modules\Internal\Http\Controllers\Api\DailyMonitoringController;
 use Modules\Internal\Http\Controllers\Api\LaboratoriumResultController;
 use Modules\Internal\Http\Controllers\Api\CorporateManageController;
+use Modules\Internal\Http\Controllers\Api\UserManagementController;
 use Modules\Internal\Http\Controllers\ClaimEncounterController;
 
 // Report
@@ -354,6 +356,23 @@ Route::prefix('internal')->group(function () {
             });
         });
 
+        // User Management Role
+        Route::get('user/role', [UserManagementController::class, 'index']);
+        Route::post('user/role', [UserManagementController::class, 'store']);
+        Route::get('user/role/{id}', [UserManagementController::class, 'edit']);
+        Route::put('user/role/{id}', [UserManagementController::class, 'update']);
+        Route::get('permission_list', [UserManagementController::class, 'permission_list']);
+
+        // User Role Access
+        Route::get('user/access', [UserManagementController::class, 'list_access']);
+        Route::post('user/access', [UserManagementController::class, 'store_access']);
+        Route::get('user/access/{id}', [UserManagementController::class, 'edit_access']);
+        Route::put('user/access/{id}', [UserManagementController::class, 'update_access']);
+        Route::get('role-list', [UserManagementController::class, 'list_role']);
+
+        // Navigation
+        Route::get('navigations', [NavigationController::class, 'index']);
+
     });
 
     Route::get('province', [ProvinceController::class, 'index']);

app/Http/Kernel.php

@@ -67,5 +67,11 @@ class Kernel extends HttpKernel
         'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
         'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
         'linksehat.old.auth' => \App\Http\Middleware\LinksehatOldAuthMiddleware::class,
+
+        // Role
+        'role' => \Spatie\Permission\Middlewares\RoleMiddleware::class,
+        'permission' => \Spatie\Permission\Middlewares\PermissionMiddleware::class,
+        'role_or_permission' => \Spatie\Permission\Middlewares\RoleOrPermissionMiddleware::class,
+        
     ];
 }

app/Models/Navigations.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Navigations extends Model
+{
+    use HasFactory;
+    protected $fillable = [
+        'title',
+        'path',
+        'icon',
+        'name',
+        'parent_id',
+        'permission'
+    ];
+}

app/Models/User.php

@@ -8,6 +8,10 @@ use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
 use Laravel\Sanctum\HasApiTokens;
 use Spatie\Permission\Traits\HasRoles;
+use Spatie\Permission\Models\Role;
+use Spatie\Permission\Models\Permission;
+use Illuminate\Support\Facades\DB;
+
 
 class User extends Authenticatable
 {
@@ -29,6 +33,7 @@ class User extends Authenticatable
         'phone',
         'otp',
         'otp_created_at',
+        'role_id'
     ];
 
     /**
@@ -53,13 +58,15 @@ class User extends Authenticatable
 
     public $with = [
         'metas',
-        'person'
+        'person',
+        'role',
     ];
 
     public $appends = [
         'meta',
         'avatar_url',
-        'full_name'
+        'full_name',
+        'permissions'
     ];
 
     public function getAvatarUrlAttribute()
@@ -82,6 +89,24 @@ class User extends Authenticatable
         return (object) $orgMeta;
     }
 
+    public function getPermissionsAttribute()
+    {
+        $roleId = $this->role_id;
+
+        if (!$roleId) {
+            return [];
+        }
+
+        // Ambil permissions dari role_has_permissions dan permissions tabel
+        $permissions = DB::table('role_has_permissions')
+            ->join('permissions', 'role_has_permissions.permission_id', '=', 'permissions.id')
+            ->where('role_has_permissions.role_id', $roleId)
+            ->select('permissions.id', 'permissions.name', 'permissions.guard_name', 'permissions.path')
+            ->get();
+
+        return $permissions;
+    }
+
     public function managedCorporates()
     {
         return $this->belongsToMany(Corporate::class, 'corporate_manager', 'user_id', 'corporate_id');
@@ -97,7 +122,12 @@ class User extends Authenticatable
         return $this->belongsTo(Person::class, 'person_id');
     }
 
-    public function ownedPersons()
+    public function role()
+    {
+        return $this->belongsTo(Role::class, 'role_id');
+    }
+
+        public function ownedPersons()
     {
         return $this->hasMany(Person::class, 'owner_user_id');
     }

database/migrations/2024_06_08_113357_create_navigation_table.php

@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('navigations', function (Blueprint $table) {
+            $table->id();
+            $table->string('title');
+            $table->string('path');
+            $table->string('icon');
+            $table->string('permission');
+            $table->foreignId('parent_id');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('navigations');
+    }
+};

database/seeders/NavigationSeeder.php

@@ -0,0 +1,247 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+use App\Models\Navigations;
+
+class NavigationSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        $menuItems = [
+            // DOCTORS & HOSPITALS
+            [
+                'title' => 'Dashboard',
+                'path' => '/dashboard',
+                'permission' => 'dashboard'
+            ],
+            // DOCTORS & HOSPITALS
+            [
+                'title' => 'DOCTORS & HOSPITALS',
+                'children' => [
+                    [
+                        'title' => 'Doctors', 
+                        'path' => '/master/doctors', 
+                        'permission' => 'doctor-list'
+                    ],
+                    [
+                        'title' => 'Hospitals', 
+                        'path' => '/master/hospitals',
+                        'permission' => 'hospital-list'
+                    ],
+                ],
+                'permission' => null
+            ],
+            // PHARMACY & DELIVERY MANAGEMENT
+            [
+                'title' => 'PHARMACY & DELIVERY MANAGEMENT',
+                'children' => [
+                    [
+                        'title' => 'Drug', 
+                        'path' => '/master/drugs',
+                        'permission' => 'drug-list'
+                    ],
+                    [
+                        'title' => 'Inventory', 
+                        'path' => '/inventory',
+                        'permission' => null
+                    ],
+                    [
+                        'title' => 'Delivery Services', 
+                        'path' => '/delivery',
+                        'permission' => null
+                    ],
+                ],
+                'permission' => null
+            ],
+            // STATION BENEFIT & MEMBERSHIP
+            [
+                'title' => 'STATION BENEFIT & MEMBERSHIP',
+                'openWhen' => ['/corporates', '/formularium', '/diagnosis', '/hospitals'],
+                'children' => [
+                    [
+                        'title' => 'Corporate', 
+                        'path' => '/corporates',
+                        'permission' => 'corporate-list',
+                    ],
+                    // ['title' => 'Corporate Create', 'path' => '/corporates/create'],
+                    [
+                        'title' => 'Formularium', 
+                        'path' => '/master/formularium-template-v2',
+                        'permission' => 'formularium-list',
+                    ],
+                    [
+                        'title' => 'Master ICD-10 Diagnosis', 
+                        'path' => '/master/diagnosis',
+                        'permission' => 'diagnosis-list',
+                    ],
+                    [
+                        'title' => 'Hospitals', 
+                        'path' => '/hospitals',
+                        'permission' => null,
+                    ],
+                ],
+                'permission' => null
+            ],
+            // CLAIM REQUEST
+            [
+                'title' => 'CLAIM REQUEST', 
+                'path' => '/claim-requests',
+                'permission' => 'claim-request-list'
+            ],
+            // CLAIM MANAGEMENT
+            [
+                'title' => 'CLAIM MANAGEMENT', 
+                'path' => '/claims',
+                'permission' => 'claim-management-list'
+            ],
+            // CASE MANAGEMENT
+            [
+                'title' => 'CASE MANAGEMENT',
+                'children' => [
+                    [
+                        'title' => 'Daily Monitoring', 
+                        'path' => '/case_management/daily_monitoring',
+                        'permission' => 'daily-monitoring-list'
+                    ],
+                    // ['title' => 'Laboratorium Result', 'path' => '/case_management/laboratorium_result'],
+                    [
+                        'title' => 'Inpatient Monitoring', 
+                        'path' => '/case_management/inpatient_monitoring',
+                        'permission' => 'final-log-list'
+                    ],
+                ],
+                'permission' => null
+            ],
+            // CUSTOMER SERVICES
+            [
+                'title' => 'CUSTOMER SERVICES',
+                'children' => [
+                    [
+                        'title' => 'Request', 
+                        'path' => '/custormer-service/request',
+                        'permission' => 'request-log-list'
+                    ],
+                    // ['title' => 'Membership', 'path' => '/cs-membership'],
+                    [
+                        'title' => 'Final LOG', 
+                        'path' => '/custormer-service/final-log',
+                        'permission' => 'final-log-list'
+                    ],
+                ],
+                'permission' => null
+            ],
+            // REPORT
+            [
+                'title' => 'REPORT',
+                'children' => [
+                    [
+                        'title' => 'Files Provider', 
+                        'path' => 'report/files-provider',
+                        'permission' => 'report-files-provider-list'
+                    ],
+                    [
+                        'title' => 'Letter of Guarantee', 
+                        'path' => '/report/logs',
+                        'permission' => 'report-log-list'
+                    ],
+                    [
+                        'title' => 'Appointment', 
+                        'path' => '/report/appointments',
+                        'permission' => 'report-appointment-list'
+                    ],
+                    [
+                        'title' => 'Live Chat', 
+                        'path' => '/report/live-chat',
+                        'permission' => 'report-livechat-list'
+                    ],
+                    [
+                        'title' => 'Linksehat Payment', 
+                        'path' => '/report/linksehat-payments',
+                        'permission' => 'report-livechat-payment'
+                    ],
+                    // ['title' => 'Prescription', 'path' => '/report/prescription'],
+                    [
+                        'title' => 'Doctor Rating', 
+                        'path' => '/report/doctorrating',
+                        'permission' => 'report-doctor-rating'
+                    ],
+                ],
+                'permission' => null
+            ],
+            // MASTER
+            [
+                'title' => 'MASTER',
+                'children' => [
+                    [
+                        'title' => 'Diagnosis', 
+                        'path' => '/master/diagnosis',
+                        'permission' => 'diagnosis-list'
+                    ],
+                ],
+                'permission' => null
+            ],
+            // USER MANAGEMENT
+            [
+                'title' => 'USER MANAGEMENT',
+                'children' => [
+                    [
+                        'title' => 'User Role', 
+                        'path' => '/user-role',
+                        'permission' => 'user-role-list'
+                    ],
+                    [
+                        'title' => 'User Access', 
+                        'path' => '/user-access',
+                        'permission' => 'user-role-access'
+                    ],
+                ],
+                'permission' => null
+            ],
+            // LINKING TOOLS
+            [
+                'title' => 'LINKING TOOLS', 
+                'path' => '/linking',
+                'permission' => 'linkking-list'
+            ],
+            // E-PRESCRIPTION
+            [
+                'title' => 'E-PRESCRIPTION', 
+                'path' => '/e-prescription/live-chat',
+                'permission' => 'prescription-list'
+            ],
+        ];
+
+        foreach ($menuItems as $menuItemData) {
+            $menuItem = Navigations::updateOrCreate([
+                'title' => $menuItemData['title']
+            ],
+            [
+                'title' => $menuItemData['title'],
+                'path' => $menuItemData['path'] ?? null,
+                'permission' => $menuItemData['permission']
+            ]);
+
+            if (isset($menuItemData['children'])) {
+                foreach ($menuItemData['children'] as $childData) {
+                    $menuItemChildren = Navigations::updateOrCreate([
+                        'title' => $childData['title']
+                    ],
+                    [
+                        'title' => $childData['title'],
+                        'path' => $childData['path'] ?? null,
+                        'parent_id' =>   $menuItem->id,
+                        'permission' => $childData['permission']
+                    ]);
+                }
+            }
+        }
+    }
+}

database/seeders/PermissionTableSeeder.php

@@ -0,0 +1,81 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+use Spatie\Permission\Models\Permission;
+
+
+class PermissionTableSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        $permissions = [
+            'dashboard',
+            'doctor-list',
+            'doctor-create',
+            'doctor-edit',
+            'doctor-delete',
+            'hospital-list',
+            'hospital-create',
+            'hospital-edit',
+            'hospital-delete',
+            'drug-list',
+            'drug-create',
+            'drug-edit',
+            'drug-delete',
+            'corporate-list',
+            'corporate-create',
+            'corporate-edit',
+            'corporate-delete',
+            'formularium-list',
+            'formularium-create',
+            'formularium-edit',
+            'formularium-delete',
+            'diagnosis-list',
+            'diagnosis-create',
+            'diagnosis-edit',
+            'diagnosis-delete',
+            'claim-request-list',
+            'claim-request-create',
+            'claim-request-edit',
+            'claim-request-delete',
+            'claim-management-list',
+            'claim-management-create',
+            'claim-management-edit',
+            'claim-management-delete',
+            'daily-monitoring-list',
+            'request-log-list',
+            'request-log-create',
+            'request-log-edit',
+            'request-log-delete',
+            'final-log-list',
+            'final-log-create',
+            'final-log-edit',
+            'final-log-delete',
+            'report-files-provider-list',
+            'report-letter-of-guarante-list',
+            'report-log-list',
+            'report-appointment-list',
+            'report-livechat-list',
+            'report-livechat-payment',
+            'report-doctor-rating',
+            'user-role-list',
+            'user-access-list'
+        ];
+
+        foreach ($permissions as $permission) {
+            Permission::updateOrCreate(['name' => $permission],
+            [
+                'name' => $permission,
+                'guard_name' => 'web'
+            ]);
+        }
+    }
+}

frontend/dashboard/src/@types/user.ts

@@ -126,3 +126,29 @@ export type UserPost = {
     message: string;
   }[];
 };
+
+export type Role = {
+  id: number;
+  name: string;
+  guard_name: string;
+  permissions: number[]
+};
+
+export type Permisions = {
+  name: string;
+  guard_name: string;
+  id: number
+}[]
+
+export type UserAccess = {
+  id: number;
+  username: string;
+  email: string;
+  person: Person;
+  role: Role;
+}
+
+export type Person = {
+  name: string;
+}
+

frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx

@@ -1,5 +1,8 @@
+import React, { useEffect, useState } from 'react';
+
 // components
 import SvgIconStyle from '../../../components/SvgIconStyle';
+import axios from '@/utils/axios';
 
 // ----------------------------------------------------------------------
 
@@ -19,8 +22,6 @@ export const accessGroup = {
   admin: ["/report/logs"]
 }
 
-
-
 const navConfig = [
   // GENERAL
   // ----------------------------------------------------------------------
@@ -117,8 +118,8 @@ const navConfig = [
       {
         title: 'USER MANAGEMENT',
         children: [
-          { title: 'User Access', path: '/master/diagnosis' },
+          { title: 'User Role', path: '/user-role' },
-          { title: 'User Role', path: '/master/diagnosis' },
+          { title: 'User Access', path: '/user-access' },
         ],
       },
       {

frontend/dashboard/src/layouts/dashboard/navbar/NavbarVertical.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 // @mui
 import { styled, useTheme } from '@mui/material/styles';
@@ -15,11 +15,12 @@ import Logo from '../../../components/Logo';
 import Scrollbar from '../../../components/Scrollbar';
 import { NavSectionVertical } from '../../../components/nav-section';
 //
-import navConfig from './NavConfig';
+// import navConfig from './NavConfig';
 import NavbarDocs from './NavbarDocs';
 import NavbarAccount from './NavbarAccount';
 import CollapseButton from './CollapseButton';
 import useAuth from '@/hooks/useAuth';
+import axios from '@/utils/axios';
 
 // ----------------------------------------------------------------------
 
@@ -48,7 +49,49 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
   const isDesktop = useResponsive('up', 'lg');
 
   const { isCollapse, collapseClick, collapseHover, onToggleCollapse, onHoverEnter, onHoverLeave } =
-    useCollapseDrawer();
+  useCollapseDrawer();
+
+  const [navConfig, setNavConfig] = useState([]);
+  useEffect(() => {
+    const fetchNavConfig = async () => {
+      try {
+        const response = await axios.get('/navigations');
+        const data = response.data.items;
+        // Ambil data izin pengguna dari user state atau API
+        const userPermissions = user.permissions.map(permission => permission.name);
+        
+        // Fungsi untuk memeriksa apakah pengguna memiliki izin untuk item tertentu
+        const hasPermission = (permission) => {
+          return userPermissions.includes(permission);
+        };
+      // Filter data berdasarkan izin pengguna
+      const filteredNavConfig = data.map(section => {
+        if (section.children && section.children.length > 0) {
+          // Cek apakah ada satu atau lebih children yang memiliki izin
+          const filteredChildren = section.children.filter(child => hasPermission(child.permission));
+          
+          if (filteredChildren.length > 0) {
+            return {
+              ...section,
+              children: filteredChildren
+            };
+          } else {
+            return null; // Skip sections where no children have permissions
+          }
+        }
+        // Jika tidak ada children, cek izin untuk section itu sendiri
+        return hasPermission(section.permission) ? section : null;
+      }).filter(section => section !== null);
+
+      setNavConfig([{ items: filteredNavConfig }]);
+      } catch (error) {
+        console.error('Failed to fetch nav config:', error);
+      }
+    };
+  
+    fetchNavConfig();
+  }, [user]);
+  
 
   useEffect(() => {
     if (isOpenSidebar) {
@@ -57,15 +100,15 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pathname]);
 
-  const filteredItems = navConfig.filter(section => {
+  // const filteredItems = navConfig.filter(section => {
-      return section.items.some(item => {
+  //     return section.items.some(item => {
-          return item.title === 'E-PRESCRIPTION';
+  //         return item.title === 'E-PRESCRIPTION';
-      });
+  //     });
-  });
+  // });
 
-  const filteredData = filteredItems.map(section => ({
+  // const filteredData = filteredItems.map(section => ({
-      items: section.items.filter(item => item.title === "E-PRESCRIPTION")
+  //     items: section.items.filter(item => item.title === "E-PRESCRIPTION")
-  }));
+  // }));
 
   const renderContent = (
     <Scrollbar
@@ -101,7 +144,7 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
         <NavbarAccount isCollapse={isCollapse} />
       </Stack>
 
-      <NavSectionVertical navConfig={user.role_id == 5 ? filteredData : navConfig} isCollapse={isCollapse} />
+      <NavSectionVertical navConfig={navConfig} isCollapse={isCollapse} />
 
       <Box sx={{ flexGrow: 1 }} />
 

frontend/dashboard/src/pages/UserManagement/UserAccess/CreateUpdate.tsx

@@ -0,0 +1,63 @@
+
+import { useNavigate, useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import {useContext, useEffect, useMemo, useState } from 'react';
+import axios from '../../../utils/axios';
+import UserAccessForm from './Form';
+import { Role, UserAccess } from '../../../@types/user';
+
+
+
+export default function UserAccessCreate() {
+  const { id } = useParams();
+  const [ currentUserAccess, setCurrentUserAccess ] = useState<UserAccess>();
+  const [ roles, setRole ] = useState<any>();
+
+
+  const navigate = useNavigate();
+
+  const isEdit = !!id;
+
+  useEffect(() => {
+    if (isEdit) {
+      axios.get('/user/access/'+id)
+        .then((res) => {
+          setCurrentUserAccess(res.data);
+        })
+        .catch((err) => {
+          if (err.response.status === 404) {
+            navigate('/404');
+          }
+        })
+    }
+    axios.get('/role-list')
+      .then((res)=> {
+        setRole(res.data)
+      })
+      .catch((err) => {
+        if (err.response.status === 404) {
+          navigate('/404');
+        }
+      })
+
+  }, [id]);
+
+
+  return (
+    <Page title= "User Access">
+      <HeaderBreadcrumbs
+        sx={{ px: 2 }}
+        heading={'User Access'}
+        links={[
+          {
+            name: 'User Access',
+            href: '/user-access',
+          },
+        ]}
+      />
+
+      <UserAccessForm isEdit={isEdit} currentUserAccess={currentUserAccess} roles={roles}/>
+    </Page>
+  );
+}

frontend/dashboard/src/pages/UserManagement/UserAccess/Form.tsx

@@ -0,0 +1,147 @@
+import * as Yup from 'yup';
+import { LoadingButton } from "@mui/lab";
+import { Box, Card, Grid, Stack, Typography } from "@mui/material";
+import { Role, UserAccess } from "../../../@types/user";
+import { FormProvider, RHFSelect, RHFSwitch, RHFTextField } from "../../../components/hook-form";
+import { useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useSnackbar } from 'notistack';
+import { useNavigate, useParams } from 'react-router-dom';
+import axios from '../../../utils/axios';
+import palette from '@/theme/palette';
+
+type Props = {
+  isEdit: boolean;
+  currentUserAccess?: UserAccess;
+  roles: Role 
+};
+
+export default function AccsessForm({ isEdit, currentUserAccess, roles }: Props) {
+
+  const { enqueueSnackbar } = useSnackbar();
+  const navigate = useNavigate();
+  const { id } = useParams();
+
+  const NewCorporatePlanSchema = Yup.object().shape({
+    name: Yup.string().required('Name is required'),
+  });
+
+  console.log(currentUserAccess, 'test')
+  const defaultValues = useMemo(
+    () => ({
+      name: currentUserAccess?.person?.name || '',
+      username:  currentUserAccess?.username || '',
+      email: currentUserAccess?.email || '',
+      roles: currentUserAccess?.role?.id || [],
+      password: '',
+    }),
+    [currentUserAccess]
+  );
+
+  useEffect(() => {
+    if (isEdit && currentUserAccess) {
+      reset(defaultValues);
+    }
+    if (!isEdit) {
+      reset(defaultValues);
+    }
+  }, [isEdit, currentUserAccess]);
+
+  const methods = useForm({
+    resolver: yupResolver(NewCorporatePlanSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    watch,
+    control,
+    setValue,
+    getValues,
+    setError,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+
+  const onSubmit = async (data: any) => {
+
+    console.log(data);
+    if (!isEdit) {
+      await axios
+      .post('/user/access', data)
+      .then((res) => {
+        enqueueSnackbar('User created successfully', { variant: 'success' });
+      })
+      .then((res) => {
+        navigate('/user-access',  { replace: true });
+      })
+      .catch(({ response }) => {
+        if (response.status === 422) {
+          for (const [key, value] of Object.entries(response.data.errors)) {
+            setError(key, { message: value[0] });
+            enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
+          }
+        }
+        else {
+          enqueueSnackbar('Create Failed : '+ response.data.message, { variant: 'error' });
+        }
+      });
+    } else {
+      await axios
+        .put('/user/access/' + currentUserAccess?.id, data)
+        .then((res) => {
+          enqueueSnackbar('User updated successfully', { variant: 'success' });
+        })
+        .then((res) => {
+          navigate('/user-access' ,  { replace: true });
+        })
+        .catch(({ response }) => {
+          enqueueSnackbar('Update Failed : '+ response.data.message, { variant: 'error' });
+        });
+    }
+  };
+
+  const optionsRoles = roles?.data?.map(item => ({
+    value: item.id,
+    label: item.name
+  })) ?? [];
+  
+  if (optionsRoles.length > 0) {
+    optionsRoles.unshift({ value: '', label: '' });
+  }
+
+  return (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+        <Box sx={{ px: 2 }}>
+            <Grid container spacing={2}>
+              <Grid item xs={12} sm={12}>
+                    <Card sx={{ px: 3, py: 4 }}>
+                        <Stack spacing={2}>
+                          <Typography variant="h6" color={palette.light.primary.main}>User Access</Typography>
+                          <RHFTextField name="name" label="Name" />
+                          <RHFTextField name="username" label="Username"  />
+                          <RHFTextField type="email" name="email" label="Email" />
+                          <RHFTextField type="password" name="password" label="Password" />
+                          <RHFSelect name="roles" label="Roles">
+                            {optionsRoles.map((option, index) => (
+                              <option key={index} value={option.value}>
+                                {option.label}
+                              </option>
+                            ))}
+                          </RHFSelect>
+
+
+                          <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
+                              { isEdit? 'Update' : 'Create' }
+                          </LoadingButton>
+
+                        </Stack>
+                    </Card>
+                </Grid>
+            </Grid>
+        </Box>
+      </FormProvider>
+  );
+}

frontend/dashboard/src/pages/UserManagement/UserAccess/History.tsx

@@ -0,0 +1,218 @@
+// @mui
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  Container,
+  FormControl,
+  Grid,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Badge,
+  Stack,
+} from '@mui/material';
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import { styled } from '@mui/material/styles';
+import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
+import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
+import { useContext, useEffect, useState } from 'react';
+import MuiAccordionSummary, {
+  AccordionSummaryProps,
+} from '@mui/material/AccordionSummary';
+import useSettings from '../../../hooks/useSettings';
+import axios from '../../../utils/axios';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
+import { Corporate } from '@/@types/corporates';
+import { fDate, fDateTime } from '@/utils/formatTime';
+
+const Accordion = styled((props: AccordionProps) => (
+  <MuiAccordion disableGutters elevation={0} square {...props} />
+))(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  '&:not(:last-child)': {
+    borderBottom: 0,
+  },
+  '&:before': {
+    display: 'none',
+  },
+}));
+
+const AccordionSummary = styled((props: AccordionSummaryProps) => (
+  <MuiAccordionSummary
+    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
+    {...props}
+  />
+))(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark'
+      ? 'rgba(255, 255, 255, .05)'
+      : 'rgba(0, 0, 0, .03)',
+  flexDirection: 'row-reverse',
+  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+    transform: 'rotate(90deg)',
+  },
+  '& .MuiAccordionSummary-content': {
+    marginLeft: theme.spacing(1),
+  },
+}));
+
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+  padding: theme.spacing(2),
+  borderTop: '1px solid rgba(0, 0, 0, .125)',
+}));
+
+export default function CustomizedAccordions() {
+  const [expanded, setExpanded] = React.useState<string | false>('panel1');
+
+  const handleChange =
+    (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+      setExpanded(newExpanded ? panel : false);
+    };
+  const pageTitle = 'Diagnosis Template History';
+  
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  const [corporate, setCorporate] = useState<Corporate | null>();
+  const [ currentCorporate, setCurrentCorporate ] = useState<Corporate>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+    const model = 'App\\Models\\IcdTemplate';
+    const url = `/audittrail/${id}?model=${model}`;
+    axios.get(url)
+      .then((res) => {
+        setCurrentCorporate(res.data);
+      })
+      .catch((error) => {
+        console.error('Terjadi kesalahan:', error);
+      });
+
+  }, [configuredCorporateContext]);
+
+  return (
+    <div>
+      <HeaderBreadcrumbs
+        heading={pageTitle}
+        links={[
+          {
+            name: 'Master',
+            href: '/master/diagnosis-template',
+          },
+          {
+            name: 'Diagnosis Template',
+            href: '/master/diagnosis-template',
+          },
+          // {
+          //   name: 'Audittrail ICD',
+          //   href: '/corporate/' + id + '/plans',
+          // },
+        ]}
+      />
+    {currentCorporate?.data.map((item, index) => (
+      <Accordion
+        key={index}
+        expanded={expanded === `panel${index}`}
+        onChange={handleChange(`panel${index}`)}
+      >
+        <AccordionSummary
+          aria-controls={`panel${index}d-content`}
+          id={`panel${index}d-header`}
+        >
+        <Typography>{`Data has ${item.action} by ${item.user_id} on ${fDateTime(item.updated_at)}`}</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+        <TableHead>
+          <TableRow>
+            <TableCell align="center">Field</TableCell>
+            <TableCell align="center">Old Value</TableCell>
+            <TableCell align="center">New Values</TableCell>
+          </TableRow>
+       </TableHead>
+       <TableBody>
+       {Object.entries(item.old_values).map(([key, value]) => {
+          let renderedValue;
+          if (key === 'deleted_by' || 
+              key === 'deleted_at' || 
+              key === 'created_by' || 
+              key === 'created_at' || 
+              key === 'updated_by' ||
+              key === 'description' 
+            ) {
+            return null; // Melewati iterasi saat key adalah 'deleted_by'
+          }
+          switch (key) {
+          case 'welcome_message':
+            renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
+            value = value.replace(/<[^>]*>/g, '');
+            break;
+          case 'help_text':
+            renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
+            value = value.replace(/<[^>]*>/g, '');
+            break;
+          case 'active':
+            renderedValue = item.new_values[key] == 1 ? 'Active' : 'Inactive';
+            value = value == 1 ? 'Active' : 'Inactive';
+            break;
+          case 'created_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          case 'updated_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          case 'updated_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          case 'delete_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          default:
+            renderedValue = item.new_values[key];
+            break;
+          }
+
+          const field = key.charAt(0).toUpperCase() + key.slice(1);
+          if (value == renderedValue) {
+            return null
+          } else {
+            return (
+            <TableRow key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+              <TableCell>{`${field}`}</TableCell>
+              <TableCell align="center">{`${value}`}</TableCell>
+              <TableCell align="center">{renderedValue}</TableCell>
+            </TableRow>
+            );
+          }
+          })}
+
+      </TableBody>
+        </AccordionDetails>
+      </Accordion>
+    ))}
+    </div>
+  );
+}

frontend/dashboard/src/pages/UserManagement/UserAccess/Index.tsx

@@ -0,0 +1,33 @@
+import { Card, Grid } from "@mui/material";
+import { useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import List from "./List";
+
+
+
+export default function Divisions() {
+  const { themeStretch } = useSettings();
+
+  const { corporate_id } = useParams();
+
+  const pageTitle = 'User Access';
+  return (
+    <Page title={ pageTitle }>
+
+      <HeaderBreadcrumbs
+        sx={{ px: 2 }}
+        heading={ pageTitle }
+        links={[
+          {
+            name: 'User Access',
+            href: '/user-access',
+          },
+        ]}
+      />
+
+        <List />
+    </Page>
+  );
+}

frontend/dashboard/src/pages/UserManagement/UserAccess/List.tsx

@@ -0,0 +1,443 @@
+// @mui
+import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination, Grid, Autocomplete, DialogActions } from '@mui/material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import AddIcon from '@mui/icons-material/Add';
+import UploadIcon from '@mui/icons-material/Upload';
+import CancelIcon from '@mui/icons-material/Cancel';
+import HistoryIcon from '@mui/icons-material/History';
+// hooks
+import { Link, NavLink as RouterLink, useNavigate } from 'react-router-dom';
+import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import useSettings from '../../../hooks/useSettings';
+import { useParams, useSearchParams } from 'react-router-dom';
+// components
+import axios from '../../../utils/axios';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import { UserAccess } from '../../../@types/user';
+import BasePagination from '../../../components/BasePagination';
+import { enqueueSnackbar } from 'notistack';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import { Delete, EditOutlined, FindInPageOutlined } from '@mui/icons-material';
+import MuiDialog from '@/components/MuiDialog';
+
+export default function List() {
+    const navigate = useNavigate();
+    const { themeStretch } = useSettings();
+    const { corporate_id } = useParams();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [importResult, setImportResult] = useState(null);
+
+  function SearchInput(props: any) {
+     // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState("");
+
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? ''
+      setSearchText(newSearchText);
+    }
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    }
+
+    useEffect(() =>  { // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+    }, [searchParams])
+
+    return (
+      <form onSubmit={handleSearchSubmit} style={{ width: '90%' }}>
+        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+      </form>
+    );
+  }
+
+  function ImportForm(props: any) {
+    // IMPORT
+    // Create Button Menu
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const createMenu = Boolean(anchorEl);
+    const importForm = useRef<HTMLInputElement>(null)
+    const [currentImportFileName, setCurrentImportFileName] = useState(null)
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+
+    const handleImportButton = () => {
+      if (importForm?.current) {
+        handleClose();
+        importForm.current ? importForm.current.click() : console.log('No File selected');
+      } else {
+        alert('No file selected')
+      }
+    }
+
+    const handleICDList = async (appliedFilter = null) => {
+      axios.get('master/diagnosis/list').then((response) => {
+        const link = document.createElement('a');
+        link.href = response.data.data.file_url;
+        link.setAttribute('download', response.data.data.file_name);
+        document.body.appendChild(link);
+        link.click();
+        handleClose();
+      });
+  }
+
+    const handleCancelImportButton = () => {
+      importForm.current.value = "";
+      importForm.current.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+
+    const handleImportChange = (event: any) => {
+      if (event.target.files[0]) {
+        setCurrentImportFileName(event.target.files[0].name)
+      } else {
+        setCurrentImportFileName(null);
+      }
+    }
+
+    const handleUpload = () => {
+      if (importForm.current?.files.length) {
+        const formData = new FormData();
+        formData.append("file", importForm.current?.files[0])
+        axios.post(`master/diagnosis/import`, formData )
+          .then(response => {
+            handleCancelImportButton();
+            loadDataTableData();
+            setImportResult(response.data)
+            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
+          })
+          .catch(response => {
+            enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
+          })
+      } else {
+        enqueueSnackbar('No File Selected', { variant: 'warning' })
+      }
+    }
+
+    const handleGetTemplate = (type :string) => {
+      axios.get('corporates/import-document-example/' + type)
+        .then((response) => {
+          const link = document.createElement('a');
+          link.href = response.data.data.file_url;
+          link.setAttribute('download', response.data.data.file_name);
+          document.body.appendChild(link);
+          link.click();
+          handleClose();
+        })
+    }
+
+
+
+    return (
+      <div>
+        <input type='file' id='file' ref={importForm} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
+        {( !currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+          <SearchInput onSearch={applyFilter}/>
+          {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
+          <Button
+                id="import-button"
+                variant='contained'
+                startIcon={<AddIcon />} sx={{ p: 1.8, width: '200px' }}
+                aria-controls={createMenu ? 'basic-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={createMenu ? 'true' : undefined}
+                onClick={() => navigate(`/user-access/create`)}
+            >
+                Create
+            </Button>
+            <Menu
+              id="import-button"
+              anchorEl={anchorEl}
+              open={createMenu}
+              onClose={handleClose}
+              MenuListProps={{
+                'aria-labelledby': 'basic-button',
+              }}
+            >
+              <MenuItem>
+
+              </MenuItem>
+            </Menu>
+        </Stack>
+        )}
+      </div>
+    );
+  }
+
+  // Called on every row to map the data to the columns
+  function createData( userAccess: UserAccess ): UserAccess {
+    return {
+      ...userAccess,
+    }
+  }
+
+  // Generate the every row of the table
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(false);
+
+    const handleActivate = (model: any, status: string) => {
+      axios
+        .put(`/master/diagnosis-template/${row.id}/activation`, {
+          // service_code: service.service_code,
+          active: status == 'active',
+        })
+        .then((res) => {
+          setDataTableData({
+            ...dataTableData,
+            data: dataTableData.data.map((model) => {
+              let updatedModel = model;
+              if (row.id == model.id) {
+                updatedModel.active = res.data.icd.active;
+              }
+              return updatedModel;
+            }),
+          });
+        })
+        .catch((error) => {
+          // console.log('asdasd', error.response.data.message)
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    };
+
+    return (
+      <React.Fragment>
+        <TableRow sx={{ '& > *': { borderBottom: '1' } }}>
+            <TableCell align="left"/>
+            <TableCell align="left">{row.person?.name ?? '-'}</TableCell>
+            <TableCell align="left">{row.email ?? '-'}</TableCell>
+            <TableCell align="left">{row.role?.name ?? '-'}</TableCell>
+            <TableCell align="center">
+                <Stack direction="row" justifyContent="flex-end" spacing={1}>
+                    <TableMoreMenu actions={
+                        <>
+                            {/* <MenuItem onClick={() => navigate(`/master/diagnosis/${row.id}`)}>
+                                <FindInPageOutlined />
+                                Detail
+                            </MenuItem> */}
+                            <MenuItem onClick={() => navigate(`/user/access/${row.id}/edit`)} >
+                                <EditOutlined />
+                                Edit
+                            </MenuItem>
+                            <MenuItem onClick={() => setOpenDialogDelete(true)}>
+                                <Delete color='error'/>
+                                Delete
+                            </MenuItem>
+                        </>
+                    } />
+                </Stack>
+            </TableCell>
+        </TableRow>
+      </React.Fragment>
+    );
+  }
+  // Delete
+  const reasons = [
+    { value: 'agreement', label: 'Agreement changed' },
+    { value: 'endorsement', label: 'Endorsement' },
+    { value: 'renewal', label: 'Renewal' },
+    { value: 'wrong_setting', label: 'Wrong Setting' },
+    // Add more options as needed
+  ];
+
+  const [isReasonSelected, setIsReasonSelected] = useState(false);
+  const [formData, setFormData] = useState({
+    reason: null
+  });
+
+  const marginBottom2 = {
+    marginBottom: 2,
+  }
+
+  const style1 = {
+    color: '#919EAB',
+    width: '30%'
+  }
+
+  const handleCloseDialog = () => {
+      setOpenDialogDelete(false);
+      resetForm();
+  }
+
+  const resetForm = () => {
+      setFormData({
+          reason: null 
+      });
+  };
+  const handleChange = (field, value) => {
+      setFormData((prevData) => ({
+          ...prevData,
+          [field]: value,
+      }));
+      if (field === 'reason') {
+          setIsReasonSelected(!!value);
+      }
+  }
+
+  const handleSubmit = () => {
+    if (isReasonSelected && formData.reason !== '') {
+      alert('zsd.');
+    } else {
+        setIsReasonSelected(false);
+    }
+    
+  }
+
+   // Dialog
+   const getContent = () => (
+    <Stack spacing={1} marginTop={2}>
+        <Typography variant="subtitle2">Are you sure to delete this User?</Typography>
+        <Grid item xs={12} md={12} marginTop={4}>
+            <Card sx={{padding:2, marginTop:2}}  >
+                <Stack direction='row' spacing={2} sx={marginBottom2}>
+                    <Typography variant='subtitle2' sx={style1} gutterBottom>Reason*</Typography>
+                    <Autocomplete
+                        options={reasons}
+                        getOptionLabel={(option) => option.label}
+                        fullWidth
+                        value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
+                        onChange={(e, newValue) => handleChange('reason', newValue?.value)}
+                        renderInput={(params) => (
+                            <TextField
+                                {...params}
+                                label="Reason"
+                                variant="outlined"
+                                required
+                                error={!isReasonSelected} // Menandai input sebagai salah jika opsi tidak dipilih
+                                helperText={!isReasonSelected ? 'Alasan harus dipilih' : ''}
+
+                            />
+                        )}
+                    />
+                </Stack>
+            </Card>
+        </Grid>
+        
+        <DialogActions>
+            <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
+            <Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
+        </DialogActions>
+    </Stack>
+  );
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
+  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
+  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: "",
+    first_page_url: "",
+    last_page: 1,
+    last_page_url: "",
+    next_page_url: "",
+    prev_page_url: "",
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0
+  });
+  const [dataTablePage, setDataTablePage] = useState(5);
+
+  const loadDataTableData = async (appliedFilter : any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/user/access', { params: filter });
+    console.log(response.data);
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+  }
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  const applyFilter = async (searchFilter: string) => {
+    await loadDataTableData({ "search" : searchFilter });
+    setSearchParams({ "search" : searchFilter });
+  }
+
+  const handlePageChange = (event : ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  }
+
+  const [openDialogDelete, setOpenDialogDelete] = React.useState(false);
+
+  useEffect(() => {
+    loadDataTableData();
+  }, [])
+
+  return (
+    <Stack>
+        <ImportForm />
+
+        {/* The Main Table */}
+        <TableContainer component={Paper} sx={{ px: 1, mt: 3 }}>
+          <Table aria-label="collapsible table">
+            <colgroup>
+                <col width="20" />
+                <col width="250" />
+                <col width="*" />
+                <col width="50" />
+            </colgroup>
+
+            <TableHead>
+              <TableRow>
+                <TableCell align="left" />
+                <TableCell style={headStyle} align="left">Name</TableCell>
+                <TableCell style={headStyle} align="left">Email</TableCell>
+                <TableCell style={headStyle} align="left">Role Access</TableCell>
+                <TableCell style={headStyle} align="right"></TableCell>
+              </TableRow>
+            </TableHead>
+            {dataTableIsLoading ?
+              (
+                <TableBody>
+                  <TableRow>
+                    <TableCell colSpan={3} align="center">Loading</TableCell>
+                  </TableRow>
+                </TableBody>
+              ) : (
+                dataTableData.data.length == 0 ?
+                (
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={3} align="center">No Data</TableCell>
+                    </TableRow>
+                  </TableBody>
+                ) : (
+                  <TableBody>
+                    {dataTableData.data.map(row => (
+                      <Row key={row.id} row={row} />
+                    ))}
+                  </TableBody>
+                )
+            )}
+          </Table>
+        </TableContainer>
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
+        <MuiDialog
+            title={{name: "Delete User Access"}}
+            openDialog={openDialogDelete}
+            setOpenDialog={setOpenDialogDelete}
+            content={getContent()}
+            maxWidth="xs"
+        />
+    </Stack>
+  );
+}

frontend/dashboard/src/pages/UserManagement/UserRole/CreateUpdate.tsx

@@ -0,0 +1,81 @@
+
+import { useNavigate, useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import {useContext, useEffect, useMemo, useState } from 'react';
+import axios from '../../../utils/axios';
+import { useSnackbar } from 'notistack';
+import UserRoleForm from './Form';
+import { Role } from '../../../@types/user';
+import { Corporate } from "@/@types/corporates";
+import { ConfiguredCorporateContext } from "@/contexts/ConfiguredCorporateContext";
+
+
+
+export default function PlanCreate() {
+  const { themeStretch } = useSettings();
+  const { corporate_id, id } = useParams();
+  const [corporate, setCorporate] = useState<Corporate|null>();
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [configuredCorporateContext])
+
+  const [ currentUserRole, setCurrentUserRole ] = useState<Role>();
+
+
+  const navigate = useNavigate();
+
+  const isEdit = !!id;
+
+  const [permissions, setPermissions] = useState([]);
+
+  useEffect(() => {
+    if (isEdit) {
+      axios.get('/user/role/'+id)
+        .then((res) => {
+          setCurrentUserRole(res.data);
+        })
+        .catch((err) => {
+          if (err.response.status === 404) {
+            navigate('/404');
+          }
+        })
+    }
+    axios.get('/permission_list')
+      .then((res) => {
+        setPermissions(res.data);
+      })
+      .catch((err) => {
+        if (err.response && err.response.status === 404) {
+          navigate('/404');
+        } else {
+          console.error('Error fetching permissions:', err);
+        }
+      });
+
+  }, [corporate_id, id]);
+
+  return (
+    <Page title= "User Role">
+      <HeaderBreadcrumbs
+        sx={{ px: 2 }}
+        heading={'User Role'}
+        links={[
+          {
+            name: 'User Role',
+            href: '/user-role',
+          },
+          {
+            name: !isEdit ? 'Create' : 'Edit',
+            href: '/corporate/'+corporate_id+'/divisions/'+id,
+          },
+        ]}
+      />
+
+      <UserRoleForm isEdit={isEdit} currentUserRole={currentUserRole} permissions={permissions}/>
+    </Page>
+  );
+}

frontend/dashboard/src/pages/UserManagement/UserRole/Form.tsx

@@ -0,0 +1,170 @@
+import * as Yup from 'yup';
+import { LoadingButton } from "@mui/lab";
+import {Box, Card, FormControlLabel, Grid, Stack, Typography } from "@mui/material";
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import { Role } from '../../../@types/user';
+import { Permisions } from '../../../@types/user';
+import { FormProvider, RHFSelect, RHFSwitch, RHFTextField } from "../../../components/hook-form";
+import { useEffect, useMemo, useState } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useSnackbar } from 'notistack';
+import { useNavigate, useParams } from 'react-router-dom';
+import axios from '../../../utils/axios';
+import palette from '@/theme/palette';
+import { Checkbox } from '@mui/material';
+import Label from '@/components/Label';
+
+type Props = {
+  isEdit: boolean;
+  currentUserRole?: Role;
+  permissions?: Permisions;
+};
+
+export default function UserRoleForm({ isEdit, currentUserRole, permissions }: Props) {
+
+  const { enqueueSnackbar } = useSnackbar();
+  const navigate = useNavigate();
+  const { corporate_id } = useParams();
+
+  const NewUserRoleSchema = Yup.object().shape({
+    name: Yup.string().required('Name is required'),
+  });
+
+  const defaultValues = useMemo(
+    () => ({
+      name: currentUserRole?.name || '',
+      guard_name: currentUserRole?.guard_name || '',
+      permission_check: currentUserRole?.permissions?.map(permission => permission.id) || []
+      
+    }),
+    [currentUserRole, permissions]
+  );
+
+  useEffect(() => {
+    if (isEdit && currentUserRole) {
+      reset(defaultValues);
+    }
+    if (!isEdit) {
+      reset(defaultValues);
+    }
+  }, [isEdit, currentUserRole]);
+
+  const methods = useForm({
+    resolver: yupResolver(NewUserRoleSchema),
+    defaultValues,
+  });
+  
+  const {
+    reset,
+    watch,
+    control,
+    setValue,
+    getValues,
+    setError,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+
+  const onSubmit = async (data: any) => {
+    console.log(data, 'test1')
+    if (!isEdit) {
+      await axios
+      .post('/user/role', data)
+      .then((res) => {
+        enqueueSnackbar('User Role created successfully', { variant: 'success' });
+      })
+      .then((res) => {
+        navigate('/user-role',  { replace: true });
+      })
+      .catch(({ response }) => {
+        if (response.status === 422) {
+          for (const [key, value] of Object.entries(response.data.errors)) {
+            setError(key, { message: value[0] });
+            enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
+          }
+        }
+        else {
+          enqueueSnackbar('Create Failed : '+ response.data.message, { variant: 'error' });
+        }
+      });
+    } else {
+      await axios
+        .put('/user/role/' + currentUserRole?.id, data)
+        .then((res) => {
+          enqueueSnackbar('User Role updated successfully', { variant: 'success' });
+        })
+        .then((res) => {
+          navigate('/user-role' ,  { replace: true });
+        })
+        .catch(({ response }) => {
+          enqueueSnackbar('Update Failed : '+ response.data.message, { variant: 'error' });
+        });
+    }
+  };
+
+  const guard_name_options = [
+    { value: '', label: '' },
+    { value: 'web', label: 'Primecenter' },
+    { value: 'client-portal', label: 'Client Portal' },
+    { value: 'hospital-portal', label: 'Hospital Portal' }
+  ];
+
+  // Buat fungsi handleCheckboxClick di luar komponen utama (UserRoleForm)
+  const handleCheckboxClick = (permissionId, checked) => {
+    const currentPermissions = getValues('permission_check') || [];
+    if (checked) {
+      setValue('permission_check', [...currentPermissions, permissionId]);
+    } else {
+      setValue('permission_check', currentPermissions.filter(id => id !== permissionId));
+    }
+  };
+
+  return (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+      <Box sx={{ px: 2 }}>
+        <Grid container spacing={2}>
+          <Grid item xs={12} sm={12}>
+            <Card sx={{ px: 3, py: 4 }}>
+              <Stack spacing={2}>
+                <Typography variant="h6" color={palette.light.primary.main}>User Role</Typography>
+                <RHFTextField name="name" label="Name" />
+                <RHFSelect name="guard_name" label="Guard Name">
+                  {guard_name_options.map((option, index) => (
+                    <option key={index} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </RHFSelect>
+                <Typography variant="h6" color={palette.light.primary.main}>Permission</Typography>
+                <Grid container spacing={2}>
+                  {permissions?.map((permission, index) => (
+                    <Grid item xs={4} key={permission.id}>
+                      <FormControlLabel
+                        control={
+                          <Checkbox
+                            name={`permission_check`}
+                            value={permission.id}
+                            checked={watch('permission_check')?.includes(permission.id) || false}
+                            onChange={(e) => handleCheckboxClick(permission.id, e.target.checked)}
+                          />
+                        }
+                        label={permission.name}
+                      />
+                    </Grid>
+                  ))}
+                </Grid>
+                <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
+                  { isEdit? 'Update' : 'Create' }
+                </LoadingButton>
+              </Stack>
+            </Card>
+          </Grid>
+        </Grid>
+      </Box>
+    </FormProvider>
+
+  );
+}

frontend/dashboard/src/pages/UserManagement/UserRole/History.tsx

@@ -0,0 +1,218 @@
+// @mui
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  Container,
+  FormControl,
+  Grid,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Badge,
+  Stack,
+} from '@mui/material';
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import { styled } from '@mui/material/styles';
+import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
+import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
+import { useContext, useEffect, useState } from 'react';
+import MuiAccordionSummary, {
+  AccordionSummaryProps,
+} from '@mui/material/AccordionSummary';
+import useSettings from '../../../hooks/useSettings';
+import axios from '../../../utils/axios';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
+import { Corporate } from '@/@types/corporates';
+import { fDate, fDateTime } from '@/utils/formatTime';
+
+const Accordion = styled((props: AccordionProps) => (
+  <MuiAccordion disableGutters elevation={0} square {...props} />
+))(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  '&:not(:last-child)': {
+    borderBottom: 0,
+  },
+  '&:before': {
+    display: 'none',
+  },
+}));
+
+const AccordionSummary = styled((props: AccordionSummaryProps) => (
+  <MuiAccordionSummary
+    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
+    {...props}
+  />
+))(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark'
+      ? 'rgba(255, 255, 255, .05)'
+      : 'rgba(0, 0, 0, .03)',
+  flexDirection: 'row-reverse',
+  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+    transform: 'rotate(90deg)',
+  },
+  '& .MuiAccordionSummary-content': {
+    marginLeft: theme.spacing(1),
+  },
+}));
+
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+  padding: theme.spacing(2),
+  borderTop: '1px solid rgba(0, 0, 0, .125)',
+}));
+
+export default function CustomizedAccordions() {
+  const [expanded, setExpanded] = React.useState<string | false>('panel1');
+
+  const handleChange =
+    (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+      setExpanded(newExpanded ? panel : false);
+    };
+  const pageTitle = 'Diagnosis Template History';
+  
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  const [corporate, setCorporate] = useState<Corporate | null>();
+  const [ currentCorporate, setCurrentCorporate ] = useState<Corporate>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+    const model = 'App\\Models\\IcdTemplate';
+    const url = `/audittrail/${id}?model=${model}`;
+    axios.get(url)
+      .then((res) => {
+        setCurrentCorporate(res.data);
+      })
+      .catch((error) => {
+        console.error('Terjadi kesalahan:', error);
+      });
+
+  }, [configuredCorporateContext]);
+
+  return (
+    <div>
+      <HeaderBreadcrumbs
+        heading={pageTitle}
+        links={[
+          {
+            name: 'Master',
+            href: '/master/diagnosis-template',
+          },
+          {
+            name: 'Diagnosis Template',
+            href: '/master/diagnosis-template',
+          },
+          // {
+          //   name: 'Audittrail ICD',
+          //   href: '/corporate/' + id + '/plans',
+          // },
+        ]}
+      />
+    {currentCorporate?.data.map((item, index) => (
+      <Accordion
+        key={index}
+        expanded={expanded === `panel${index}`}
+        onChange={handleChange(`panel${index}`)}
+      >
+        <AccordionSummary
+          aria-controls={`panel${index}d-content`}
+          id={`panel${index}d-header`}
+        >
+        <Typography>{`Data has ${item.action} by ${item.user_id} on ${fDateTime(item.updated_at)}`}</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+        <TableHead>
+          <TableRow>
+            <TableCell align="center">Field</TableCell>
+            <TableCell align="center">Old Value</TableCell>
+            <TableCell align="center">New Values</TableCell>
+          </TableRow>
+       </TableHead>
+       <TableBody>
+       {Object.entries(item.old_values).map(([key, value]) => {
+          let renderedValue;
+          if (key === 'deleted_by' || 
+              key === 'deleted_at' || 
+              key === 'created_by' || 
+              key === 'created_at' || 
+              key === 'updated_by' ||
+              key === 'description' 
+            ) {
+            return null; // Melewati iterasi saat key adalah 'deleted_by'
+          }
+          switch (key) {
+          case 'welcome_message':
+            renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
+            value = value.replace(/<[^>]*>/g, '');
+            break;
+          case 'help_text':
+            renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
+            value = value.replace(/<[^>]*>/g, '');
+            break;
+          case 'active':
+            renderedValue = item.new_values[key] == 1 ? 'Active' : 'Inactive';
+            value = value == 1 ? 'Active' : 'Inactive';
+            break;
+          case 'created_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          case 'updated_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          case 'updated_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          case 'delete_at':
+            renderedValue = fDateTime(item.new_values[key]);
+            value = fDateTime(value);
+            break;
+          default:
+            renderedValue = item.new_values[key];
+            break;
+          }
+
+          const field = key.charAt(0).toUpperCase() + key.slice(1);
+          if (value == renderedValue) {
+            return null
+          } else {
+            return (
+            <TableRow key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+              <TableCell>{`${field}`}</TableCell>
+              <TableCell align="center">{`${value}`}</TableCell>
+              <TableCell align="center">{renderedValue}</TableCell>
+            </TableRow>
+            );
+          }
+          })}
+
+      </TableBody>
+        </AccordionDetails>
+      </Accordion>
+    ))}
+    </div>
+  );
+}

frontend/dashboard/src/pages/UserManagement/UserRole/Index.tsx

@@ -0,0 +1,33 @@
+import { Card, Grid } from "@mui/material";
+import { useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import List from "./List";
+
+
+
+export default function Divisions() {
+  const { themeStretch } = useSettings();
+
+  const { corporate_id } = useParams();
+
+  const pageTitle = 'User Role';
+  return (
+    <Page title={ pageTitle }>
+
+      <HeaderBreadcrumbs
+        sx={{ px: 2 }}
+        heading={ pageTitle }
+        links={[
+          {
+            name: 'User Role',
+            // href: '/master/diagnosis',
+          },
+        ]}
+      />
+
+        <List />
+    </Page>
+  );
+}

frontend/dashboard/src/pages/UserManagement/UserRole/List.tsx

@@ -0,0 +1,442 @@
+// @mui
+import { Box, Button, Card, MenuItem, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Stack, Menu, Grid, DialogActions } from '@mui/material';
+import { Autocomplete } from "@mui/material";
+import AddIcon from '@mui/icons-material/Add';
+// hooks
+import { Link, NavLink as RouterLink, useNavigate } from 'react-router-dom';
+import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import useSettings from '../../../hooks/useSettings';
+import { useParams, useSearchParams } from 'react-router-dom';
+// components
+import axios from '../../../utils/axios';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import { Role } from '../../../@types/user';
+import BasePagination from '../../../components/BasePagination';
+import { enqueueSnackbar } from 'notistack';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import { Delete, EditOutlined, FindInPageOutlined } from '@mui/icons-material';
+import MuiDialog from '@/components/MuiDialog';
+
+export default function List() {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  function SearchInput(props: any) {
+     // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState("");
+
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? ''
+      setSearchText(newSearchText);
+    }
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    }
+
+    useEffect(() =>  { // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+    }, [searchParams])
+
+    return (
+      <form onSubmit={handleSearchSubmit} style={{ width: '90%' }}>
+        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+      </form>
+    );
+  }
+
+  function ImportForm(props: any) {
+    // IMPORT
+    // Create Button Menu
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const createMenu = Boolean(anchorEl);
+    const importForm = useRef<HTMLInputElement>(null)
+    const [currentImportFileName, setCurrentImportFileName] = useState(null)
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+
+    const handleImportButton = () => {
+      if (importForm?.current) {
+        handleClose();
+        importForm.current ? importForm.current.click() : console.log('No File selected');
+      } else {
+        alert('No file selected')
+      }
+    }
+
+    const handleICDList = async (appliedFilter = null) => {
+      axios.get('master/diagnosis/list').then((response) => {
+        const link = document.createElement('a');
+        link.href = response.data.data.file_url;
+        link.setAttribute('download', response.data.data.file_name);
+        document.body.appendChild(link);
+        link.click();
+        handleClose();
+      });
+  }
+
+    const handleCancelImportButton = () => {
+      importForm.current.value = "";
+      importForm.current.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+
+    const handleImportChange = (event: any) => {
+      if (event.target.files[0]) {
+        setCurrentImportFileName(event.target.files[0].name)
+      } else {
+        setCurrentImportFileName(null);
+      }
+    }
+
+    const handleUpload = () => {
+      if (importForm.current?.files.length) {
+        const formData = new FormData();
+        formData.append("file", importForm.current?.files[0])
+        axios.post(`master/diagnosis/import`, formData )
+          .then(response => {
+            handleCancelImportButton();
+            loadDataTableData();
+            setImportResult(response.data)
+            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
+          })
+          .catch(response => {
+            enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
+          })
+      } else {
+        enqueueSnackbar('No File Selected', { variant: 'warning' })
+      }
+    }
+
+    const handleGetTemplate = (type :string) => {
+      axios.get('corporates/import-document-example/' + type)
+        .then((response) => {
+          const link = document.createElement('a');
+          link.href = response.data.data.file_url;
+          link.setAttribute('download', response.data.data.file_name);
+          document.body.appendChild(link);
+          link.click();
+          handleClose();
+        })
+    }
+
+
+
+    return (
+      <div>
+        <input type='file' id='file' ref={importForm} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
+        {( !currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+          <SearchInput onSearch={applyFilter}/>
+          {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
+          <Button
+                id="import-button"
+                variant='contained'
+                startIcon={<AddIcon />} sx={{ p: 1.8, width: '200px' }}
+                aria-controls={createMenu ? 'basic-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={createMenu ? 'true' : undefined}
+                onClick={() => navigate(`/user-role/create`)}
+            >
+                Create
+            </Button>
+            <Menu
+              id="import-button"
+              anchorEl={anchorEl}
+              open={createMenu}
+              onClose={handleClose}
+              MenuListProps={{
+                'aria-labelledby': 'basic-button',
+              }}
+            >
+              <MenuItem>
+
+              </MenuItem>
+            </Menu>
+        </Stack>
+        )}
+      </div>
+    );
+  }
+
+  // Called on every row to map the data to the columns
+  function createData( userManamgent: Role ): Role {
+    return {
+      ...userManamgent,
+    }
+  }
+
+  const [id, setId] = useState(null)
+
+  // Generate the every row of the table
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const handleActivate = (model: any, status: string) => {
+      axios
+        .put(`/master/diagnosis-template/${row.id}/activation`, {
+          // service_code: service.service_code,
+          active: status == 'active',
+        })
+        .then((res) => {
+          setDataTableData({
+            ...dataTableData,
+            data: dataTableData.data.map((model) => {
+              let updatedModel = model;
+              if (row.id == model.id) {
+                updatedModel.active = res.data.icd.active;
+              }
+              return updatedModel;
+            }),
+          });
+        })
+        .catch((error) => {
+          // console.log('asdasd', error.response.data.message)
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    };
+
+    return (
+      <React.Fragment>
+        <TableRow sx={{ '& > *': { borderBottom: '1' } }}>
+            <TableCell align="left"/>
+            <TableCell align="left">{row.id}</TableCell>
+            <TableCell align="left">{row.name ?? '-'}</TableCell>
+            <TableCell align="left">{row.guard_name ?? '-'}</TableCell>
+            <TableCell align="center">
+                <Stack direction="row" justifyContent="flex-end" spacing={1}>
+                    <TableMoreMenu actions={
+                        <>
+                            {/* <MenuItem onClick={() => navigate(`/user/role/${row.id}`)}>
+                                <FindInPageOutlined />
+                                Detail
+                            </MenuItem> */}
+                            <MenuItem onClick={() => navigate(`/user/role/${row.id}/edit`)} >
+                                <EditOutlined />
+                                Edit
+                            </MenuItem>
+                            <MenuItem onClick={() => { setOpenDialogDelete(true); setId(row.id); }}>
+                              <Delete color='error'/>
+                              Delete
+                            </MenuItem>
+                            {/* <MenuItem onClick={() => navigate(`/user/role/${row.id}/history`)}>
+                                <HistoryIcon />
+                                History
+                            </MenuItem> */}
+                        </>
+                    } />
+                </Stack>
+            </TableCell>
+        </TableRow>
+      </React.Fragment>
+    );
+  }
+
+  // Delete
+  const reasons = [
+    { value: 'agreement', label: 'Agreement changed' },
+    { value: 'endorsement', label: 'Endorsement' },
+    { value: 'renewal', label: 'Renewal' },
+    { value: 'wrong_setting', label: 'Wrong Setting' },
+    // Add more options as needed
+  ];
+
+  const [isReasonSelected, setIsReasonSelected] = useState(false);
+  const [formData, setFormData] = useState({
+      reason: null
+  });
+
+  const marginBottom2 = {
+      marginBottom: 2,
+  }
+
+  const style1 = {
+    color: '#919EAB',
+    width: '30%'
+  }
+
+  const handleCloseDialog = () => {
+      setOpenDialogDelete(false);
+      resetForm();
+  }
+
+  const resetForm = () => {
+      setFormData({
+          reason: null 
+      });
+  };
+
+  const handleChange = (field, value) => {
+      setFormData((prevData) => ({
+          ...prevData,
+          [field]: value,
+      }));
+      if (field === 'reason') {
+          setIsReasonSelected(!!value);
+      }
+  }
+
+  const handleSubmit = () => {
+    if (isReasonSelected && formData.reason !== '') {
+      console.log(formData, 'test')
+    } else {
+        setIsReasonSelected(false);
+    }
+  }
+
+  // Dialog
+  const getContent = () => (
+    <Stack spacing={1} marginTop={2}>
+        <Typography variant="subtitle2">Are you sure to delete this User Role?</Typography>
+        <Grid item xs={12} md={12} marginTop={4}>
+            <Card sx={{padding:2, marginTop:2}}  >
+                <Stack direction='row' spacing={2} sx={marginBottom2}>
+                    <Typography variant='subtitle2' sx={style1} gutterBottom>Reason*</Typography>
+                    <Autocomplete
+                        options={reasons}
+                        getOptionLabel={(option) => option.label}
+                        fullWidth
+                        value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
+                        onChange={(e, newValue) => handleChange('reason', newValue?.value)}
+                        renderInput={(params) => (
+                            <TextField
+                                {...params}
+                                label="Reason"
+                                variant="outlined"
+                                required
+                                error={!isReasonSelected} // Menandai input sebagai salah jika opsi tidak dipilih
+                                helperText={!isReasonSelected ? 'Alasan harus dipilih' : ''}
+                            />
+                        )}
+                    />
+                </Stack>
+            </Card>
+        </Grid>
+        
+        <DialogActions>
+            <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
+            <Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
+        </DialogActions>
+    </Stack>
+  );
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
+  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
+  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: "",
+    first_page_url: "",
+    last_page: 1,
+    last_page_url: "",
+    next_page_url: "",
+    prev_page_url: "",
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0
+  });
+  const [dataTablePage, setDataTablePage] = useState(5);
+
+  const loadDataTableData = async (appliedFilter : any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/user/role', { params: filter });
+    console.log(response.data);
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+  }
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  const applyFilter = async (searchFilter: string) => {
+    await loadDataTableData({ "search" : searchFilter });
+    setSearchParams({ "search" : searchFilter });
+  }
+
+  const handlePageChange = (event : ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  }
+
+  const [openDialogDelete, setOpenDialogDelete] = React.useState(false);
+
+  useEffect(() => {
+    loadDataTableData();
+  }, [])
+
+  return (
+    <Stack>
+        <ImportForm />
+
+        {/* The Main Table */}
+        <TableContainer component={Paper} sx={{ px: 1, mt: 3 }}>
+          <Table aria-label="collapsible table">
+            <colgroup>
+                <col width="20" />
+                <col width="250" />
+                <col width="*" />
+                <col width="50" />
+            </colgroup>
+
+            <TableHead>
+              <TableRow>
+                <TableCell align="left" />
+                <TableCell style={headStyle} align="left">ID</TableCell>
+                <TableCell style={headStyle} align="left">Name</TableCell>
+                <TableCell style={headStyle} align="left">Guard Name</TableCell>
+                <TableCell style={headStyle} align="left"></TableCell>
+              </TableRow>
+            </TableHead>
+            {dataTableIsLoading ?
+              (
+                <TableBody>
+                  <TableRow>
+                    <TableCell colSpan={3} align="center">Loading</TableCell>
+                  </TableRow>
+                </TableBody>
+              ) : (
+                dataTableData.data.length == 0 ?
+                (
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={3} align="center">No Data</TableCell>
+                    </TableRow>
+                  </TableBody>
+                ) : (
+                  <TableBody>
+                    {dataTableData.data.map(row => (
+                      <Row key={row.id} row={row} />
+                    ))}
+                  </TableBody>
+                )
+            )}
+          </Table>
+        </TableContainer>
+
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
+
+        <MuiDialog
+            title={{name: "Delete User Role"}}
+            openDialog={openDialogDelete}
+            setOpenDialog={setOpenDialogDelete}
+            content={getContent()}
+            maxWidth="xs"
+        />
+    </Stack>
+  );
+}

frontend/dashboard/src/routes/index.tsx

@@ -523,6 +523,34 @@ export default function Router() {
           path: 'e-prescription/live-chat/:id/show',
           element: <EPrescriptionShow />,
         },
+        {
+          path: 'user-role',
+          element: <UserRole />,
+        },
+        {
+          path: 'user-role/create',
+          element: <UserRoleCreate />,
+        },
+        {
+          path: 'user/role/:id/edit',
+          element: <UserRoleCreate />,
+        },
+        {
+          path: 'user-access',
+          element: <UserAccess />,
+        },
+        {
+          path: 'user-access/create',
+          element: <UserAccessCreate />,
+        },
+        {
+          path: 'user/access/:id/edit',
+          element: <UserAccessCreate />,
+        },
+        // {
+        //   path: 'e-prescription/live-chat/:id/show',
+        //   element: <EPrescriptionShow />,
+        // },
       ],
     },
     // {
@@ -653,9 +681,6 @@ const RequestLogDetail  = Loadable(lazy(() => import('../pages/CustomerService/R
 const FinalLog      = Loadable(lazy(() => import('../pages/CustomerService/FinalLog/Index')))
 const FinalLogDetail      = Loadable(lazy(() => import('../pages/CustomerService/FinalLog/Detail')))
 
-
-
-
 const MasterDiagnosisTemplate = Loadable(lazy(() => import('../pages/Master/Diagnosis/Master/Index')));
 const MasterDiagnosisTemplateCreate = Loadable(lazy(() => import('../pages/Master/Diagnosis/Master/CreateUpdate')));
 const MasterDiagnosisTemplateHistories = Loadable(
@@ -733,3 +758,9 @@ const ClaimRequestsDetail = Loadable(lazy(() => import('../pages/ClaimRequests/D
 
 
 const Membership = Loadable(lazy(() => import('../pages/Service/Membership/index')));
+
+// User Management
+const UserRole = Loadable(lazy(() => import('../pages/UserManagement/UserRole/Index')));
+const UserRoleCreate = Loadable(lazy(() => import('../pages/UserManagement/UserRole/CreateUpdate')));
+const UserAccess = Loadable(lazy(() => import('../pages/UserManagement/UserAccess/Index')));
+const UserAccessCreate = Loadable(lazy(() => import('../pages/UserManagement/UserAccess/CreateUpdate')));