add slug role

components/apps/setting/permission/RoleList.vue

@@ -27,10 +27,17 @@ const handleAssignPermission = (role: RoleMaster) => emit('assign-permission', r
             </template>
           </v-tooltip>
           <div class="flex-grow-1">
-            <div class="d-flex align-center">
-              <h6 class="text-subtitle-1 font-weight-semibold">{{ role.name }}</h6>
+            <div class="d-flex align-center gap-2">
+              <h6 class="text-subtitle-1 font-weight-semibold mb-0">{{ role.name }}</h6>
+            </div>
+            <div class="d-flex align-center gap-3 mt-2">
+               <p class="text-muted mb-0">{{ role.slug }}</p>
+              <v-divider vertical></v-divider>
+              <div class="d-flex align-center gap-1">
+                <v-icon size="16" color="primary">mdi-calendar</v-icon>
+                <span class="ml-2 text-caption text-medium">{{ formatDateTime(role.created_at) }}</span>
+              </div>
             </div>
-            <p class="text-muted mb-0">{{ formatDateTime(role.created_at) }}</p>
           </div>
 
           <v-tooltip location="bottom" text="Assign permission">

components/apps/setting/permission/RoleModal.vue

@@ -46,6 +46,7 @@ const isSaving = ref(false);
 const isLoadingDetail = ref(false);
 
 const name = ref('');
+const slug = ref('');
 const active = ref(true);
 
 const isDetailMode = computed(() => props.mode === 'detail');
@@ -63,6 +64,7 @@ const submitLabel = computed(() => (isEditMode.value ? 'Update' : 'Save'));
 
 const resetForm = () => {
 	name.value = '';
+	slug.value = '';
 	active.value = true;
 	valid.value = false;
 	formRef.value?.resetValidation?.();
@@ -84,6 +86,7 @@ const fetchRoleDetail = async () => {
 		if (!data) throw new Error('Data role tidak ditemukan');
 
 		name.value = data.name ?? '';
+		slug.value = data.slug ?? '';
 		active.value = typeof data.active === 'boolean' ? data.active : true;
 	} catch (error: any) {
 		const message = error?.response?.data?.message || error?.message || 'Gagal memuat detail role';
@@ -130,6 +133,7 @@ const save = () => {
 
 			const payload: Record<string, any> = {
 				name: name.value,
+				slug: slug.value,
 				active: active.value,
 			};
 
@@ -182,6 +186,18 @@ const save = () => {
 						/>
 					</div>
 
+					<div>
+						<label class="font-weight-medium required">Slug</label>
+						<v-text-field
+							v-model="slug"
+							class="mt-2"
+							variant="outlined"
+							density="compact"
+							:readonly="isFormDisabled"
+							:rules="[required]"
+						/>
+					</div>
+
 					<div>
 						<label class="font-weight-medium required">Status</label>
 						<v-switch v-model="active" class="mt-2" color="primary" inset :readonly="isFormDisabled" hide-details>

redirect.html

@@ -1,5 +1,5 @@
 <a target="_blank" href="
-http://localhost:3001/auth/verify
+http://10.10.123.143:3001/auth/verify
 ?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImFkbWluQGV4YW1wbGUuY29tIiwiZXhwIjoxNzc2MzkwNjk5LCJuYW1lIjoiQWRtaW4gRHVtbXkiLCJyb2xlX2lkIjoiYWRtaW4iLCJ1c2VyX2lkIjoiMTAwMSJ9.g-jN87SAJeNO5adri9Kzu71WlqtF41TXSblJoJijzfo
 &refresh_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImFkbWluQGV4YW1wbGUuY29tIiwiZXhwIjoxNzc2MzkwNjk5LCJuYW1lIjoiQWRtaW4gRHVtbXkiLCJyb2xlX2lkIjoiYWRtaW4iLCJ1c2VyX2lkIjoiMTAwMSJ9.g-jN87SAJeNO5adri9Kzu71WlqtF41TXSblJoJijzfo">
   <button>Redirect Login</button>

types/setting/roleMaster.ts

@@ -8,6 +8,7 @@ export interface PaginationMeta {
 export interface RoleMaster {
   id: number;
   name: string;
+  slug: string;
   active: boolean;
   created_at: string | null;
   updated_at: string | null;