From 73a32380e78e329349c4d9342dd9eb7753b9f260 Mon Sep 17 00:00:00 2001
From: Wian Drs <wian274@gmail.com>
Date: Mon, 27 Jul 2026 16:25:37 +0700
Subject: [PATCH] base struktur update

---
 TODO.md                                       |  40 ++
 index.html                                    |  21 +-
 public/apple-icon.png                         | Bin 18140 -> 3184 bytes
 public/user-default.jpg                       | Bin 0 -> 18068 bytes
 src/App.vue                                   |   2 +
 src/_nav.js                                   | 119 ++--
 src/api/axios.js                              |  20 +-
 src/components/AppFooter.vue                  |   6 +-
 src/components/AppHeader.vue                  |  10 +-
 src/components/AppHeaderDropdownAccnt.vue     |  68 +-
 src/components/AppSidebar.vue                 |   8 +-
 src/components/AppSidebarNav.js               |  19 +-
 src/components/GlobalImagePreview.vue         |  65 ++
 .../base/BaseResponsiveDataView.vue           | 588 ++++++++++++++++++
 src/layouts/DefaultLayout.vue                 |   2 +-
 src/main.js                                   |   7 -
 src/router/index.js                           | 139 ++++-
 src/services/authService.js                   |  21 +
 src/services/fileService.js                   |  23 +
 src/services/menuGroupService.js              |  36 ++
 src/services/menuService.js                   |   6 +
 src/services/nasService.js                    |  38 ++
 src/services/profileService.js                |  11 +
 src/services/tenantService.js                 |  26 +
 src/services/userService.js                   |  26 +
 src/services/wilayahService.js                |  51 ++
 src/stores/auth.js                            | 182 ++++++
 src/stores/menu.js                            | 100 +++
 src/stores/menuGroup.js                       |  24 +
 src/styles/_base-responsive-data-view.scss    | 517 +++++++++++++++
 src/styles/style.scss                         | 119 ++++
 src/utils/session.js                          |  24 +
 src/utils/swal.js                             |  31 +-
 src/utils/verificationSession.js              |  21 +
 .../group-menus/GroupMenuPermissions.vue      | 353 +++++++++++
 src/views/group-menus/GroupMenus.vue          | 433 +++++++++++++
 src/views/nas/NasResourceView.vue             | 376 +++++++++++
 src/views/pages/Login.vue                     |  75 ++-
 src/views/pages/Register.vue                  | 112 +++-
 src/views/pages/VerifyCode.vue                | 121 ++++
 src/views/profile/Profile.vue                 | 505 +++++++++++++++
 src/views/tenants/Tenants.vue                 | 369 +++++++++++
 src/views/users/Users.vue                     | 564 +++++++++++++++++
 src/views/wilayah/Wilayah.vue                 | 317 ++++++++++
 44 files changed, 5456 insertions(+), 139 deletions(-)
 create mode 100644 TODO.md
 create mode 100644 public/user-default.jpg
 create mode 100644 src/components/GlobalImagePreview.vue
 create mode 100644 src/components/base/BaseResponsiveDataView.vue
 create mode 100644 src/services/authService.js
 create mode 100644 src/services/fileService.js
 create mode 100644 src/services/menuGroupService.js
 create mode 100644 src/services/menuService.js
 create mode 100644 src/services/nasService.js
 create mode 100644 src/services/profileService.js
 create mode 100644 src/services/tenantService.js
 create mode 100644 src/services/userService.js
 create mode 100644 src/services/wilayahService.js
 create mode 100644 src/stores/auth.js
 create mode 100644 src/stores/menu.js
 create mode 100644 src/stores/menuGroup.js
 create mode 100644 src/styles/_base-responsive-data-view.scss
 create mode 100644 src/utils/verificationSession.js
 create mode 100644 src/views/group-menus/GroupMenuPermissions.vue
 create mode 100644 src/views/group-menus/GroupMenus.vue
 create mode 100644 src/views/nas/NasResourceView.vue
 create mode 100644 src/views/pages/VerifyCode.vue
 create mode 100644 src/views/profile/Profile.vue
 create mode 100644 src/views/tenants/Tenants.vue
 create mode 100644 src/views/users/Users.vue
 create mode 100644 src/views/wilayah/Wilayah.vue

diff --git a/TODO.md b/TODO.md
new file mode 100644
index 00000000..e1d5c782
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,40 @@
+# Tenant API Integration TODO
+
+- [x] Review existing tenant API and UI navigation/routes (done in analysis)
+- [x] Add tenant service for API CRUD in `src/services/tenantService.js`
+- [x] Add tenant route in `src/router/index.js`
+- [x] Add tenant menu item in `src/_nav.js`
+- [x] Create tenant page `src/views/tenants/Tenants.vue` and integrate list API
+- [x] Verify integration consistency
+
+# Tenant CRUD UI TODO
+
+- [x] Upgrade `src/views/tenants/Tenants.vue` to full CRUD page
+- [x] Integrate create/read/update/delete flows with `tenantService`
+- [x] Add form validation for `tenant_code`, `tenant_name`, `status`
+- [x] Add detail modal and delete confirmation
+- [x] Final consistency review
+
+# BaseResponsiveDataView Header/Table Alignment TODO
+
+- [x] Refactor desktop table header structure to follow row list layout
+- [x] Align desktop header columns with rendered desktop columns
+- [x] Remove desktop action spacer and use consistent action column
+- [x] Keep mobile behavior unchanged
+- [x] Mark tasks complete after implementation
+
+# GroupMenus Responsive Style Alignment TODO
+
+- [x] Review `GroupMenus.vue` and map existing actions/data to `BaseResponsiveDataView`
+- [x] Refactor GroupMenus list section to use `BaseResponsiveDataView`
+- [x] Keep existing action flows (detail, detail menu, edit, hapus) working via action handler
+- [x] Add scoped container/header styling pattern similar to `Tenants.vue`
+- [x] Final consistency review
+
+# BaseResponsiveDataView Desktop Column Proportion TODO
+
+- [ ] Review desktop grid logic in `BaseResponsiveDataView.vue` and `_base-responsive-data-view.scss`
+- [ ] Make desktop column count dynamic (not hardcoded 6)
+- [ ] Make action column width proportional and consistent
+- [ ] Ensure desktop remains balanced even with only 2 data columns
+- [ ] Final consistency review for desktop/mobile behavior
diff --git a/index.html b/index.html
index 3f4a30a6..27d9a84e 100644
--- a/index.html
+++ b/index.html
@@ -1,21 +1,14 @@
 <!doctype html>
-<!--
-* CoreUI Free Vue.js Admin Template
-* @version v5.5.0
-* @link https://coreui.io/product/free-vue-admin-template/
-* Copyright (c) 2026 creativeLabs Łukasz Holeczek
-* Licensed under MIT (https://github.com/coreui/coreui-free-vue-admin-template/blob/main/LICENSE)
--->
 <html>
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no" />
-    <meta name="description" content="ManjaPro 2 - UI/UX" />
+    <meta name="description" content="MANJAPRO - UI/UX" />
     <meta name="author" content="creativeLabs Łukasz Holeczek" />
-    <title>ManjaPro 2</title>
+    <title>MANJAPRO</title>
     <!-- favicons for all devices -->
-    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
+    <!-- <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
     <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
     <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
     <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
@@ -24,10 +17,10 @@
     <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
     <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
-    <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png" /> -->
+    <link rel="icon" type="image/png" href="/apple-icon.png" />
+    <!-- <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> -->
     <link rel="manifest" href="/manifest.json" />
     <meta name="msapplication-TileColor" content="#ffffff" />
     <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
diff --git a/public/apple-icon.png b/public/apple-icon.png
index ac6dec0e296cbd8fc63ab9666aae249c7a754fdb..aecafa2fbc3b1388f65906543cc627b3ec292b58 100644
GIT binary patch
literal 3184
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
W@3xz<+Stbc0000<MNUMnLSTYB6b}Ia

literal 18140
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

diff --git a/public/user-default.jpg b/public/user-default.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cb8d81087ee1a0a9f04f981f3d93c20bf97811b7
GIT binary patch
literal 18068
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

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index d39529ed..9fd16aae 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,6 +16,7 @@ import { onBeforeMount } from 'vue'
 import { useColorModes } from '@coreui/vue'
 
 import { useThemeStore } from '@/stores/theme.js'
+import GlobalImagePreview from '@/components/GlobalImagePreview.vue'
 
 // Initialize CoreUI color modes with local storage key
 const { isColorModeSet, setColorMode } = useColorModes(
@@ -46,6 +47,7 @@ onBeforeMount(() => {
 
 <template>
   <router-view />
+  <GlobalImagePreview />
 </template>
 
 <style lang="scss">
diff --git a/src/_nav.js b/src/_nav.js
index 2466e512..a149df01 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -22,7 +22,7 @@
  * @type {Array<Object>}
  */
 
-export default [
+const baseNav = [
   {
     component: 'CNavItem',
     name: 'Dashboard',
@@ -33,54 +33,54 @@ export default [
       text: 'NEW',
     },
   },
-  {
-    component: 'CNavTitle',
-    name: 'Ticketing',
-  },
-  {
-    component: 'CNavGroup',
-    name: 'Ticketing',
-    to: '/ticket',
-    icon: 'cil-layers',
-    items: [
-      {
-        component: 'CNavItem',
-        name: 'Ticket',
-        to: '/tickets/ticket',
-        icon: 'cil-notes',
-      },
-      {
-        component: 'CNavItem',
-        name: 'Ticket Type',
-        to: '/tickets/ticket-type',
-        icon: 'cil-list',
-      },
-      {
-        component: 'CNavItem',
-        name: 'Ticket Materials',
-        to: '/tickets/ticket-materials',
-        icon: 'cil-file',
-      },
-      {
-        component: 'CNavItem',
-        name: 'Ticket Incident',
-        to: '/tickets/ticket-incident',
-        icon: 'cil-Puzzle',
-      },
-      {
-        component: 'CNavItem',
-        name: 'Approved',
-        to: '/tickets/approved',
-        icon: 'cil-check',
-      },
-      {
-        component: 'CNavItem',
-        name: 'Rejected',
-        to: '/tickets/rejected',
-        icon: 'cil-ban',
-      },
-    ],
-  },
+  // {
+  //   component: 'CNavTitle',
+  //   name: 'Ticketing',
+  // },
+  // {
+  //   component: 'CNavGroup',
+  //   name: 'Ticketing',
+  //   to: '/ticket',
+  //   icon: 'cil-layers',
+  //   items: [
+  //     {
+  //       component: 'CNavItem',
+  //       name: 'Ticket',
+  //       to: '/tickets/ticket',
+  //       icon: 'cil-notes',
+  //     },
+  //     {
+  //       component: 'CNavItem',
+  //       name: 'Ticket Type',
+  //       to: '/tickets/ticket-type',
+  //       icon: 'cil-list',
+  //     },
+  //     {
+  //       component: 'CNavItem',
+  //       name: 'Ticket Materials',
+  //       to: '/tickets/ticket-materials',
+  //       icon: 'cil-file',
+  //     },
+  //     {
+  //       component: 'CNavItem',
+  //       name: 'Ticket Incident',
+  //       to: '/tickets/ticket-incident',
+  //       icon: 'cil-Puzzle',
+  //     },
+  //     {
+  //       component: 'CNavItem',
+  //       name: 'Approved',
+  //       to: '/tickets/approved',
+  //       icon: 'cil-check',
+  //     },
+  //     {
+  //       component: 'CNavItem',
+  //       name: 'Rejected',
+  //       to: '/tickets/rejected',
+  //       icon: 'cil-ban',
+  //     },
+  //   ],
+  // },
   {
     component: 'CNavTitle',
     name: 'Theme',
@@ -454,6 +454,18 @@ export default [
       },
     ],
   },
+  {
+    component: 'CNavItem',
+    name: 'Users',
+    to: '/users',
+    icon: 'cil-user',
+  },
+  {
+    component: 'CNavItem',
+    name: 'Tenants',
+    to: '/tenants',
+    icon: 'cil-building',
+  },
   {
     component: 'CNavItem',
     name: 'Widgets',
@@ -498,3 +510,12 @@ export default [
     ],
   },
 ]
+
+export function injectMenusAfterDashboard(dynamicMenus = []) {
+  if (!Array.isArray(baseNav) || baseNav.length === 0) return dynamicMenus
+
+  const [dashboard] = baseNav
+  return [dashboard, ...dynamicMenus]
+}
+
+export default baseNav
diff --git a/src/api/axios.js b/src/api/axios.js
index 2ecdb3db..008fbae7 100644
--- a/src/api/axios.js
+++ b/src/api/axios.js
@@ -1,8 +1,9 @@
 import axios from 'axios'
-import { getToken } from '@/utils/session'
+import { clearSession, getToken } from '@/utils/session'
 
 const api = axios.create({
-  baseURL: 'https://api.radiq.my.id/api',
+  // baseURL: 'https://api.radiq.my.id/api',
+  baseURL: 'http://127.0.0.1:8000/api',
   headers: {
     'Content-Type': 'application/json',
   },
@@ -19,4 +20,19 @@ api.interceptors.request.use(
   (error) => Promise.reject(error),
 )
 
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error?.response?.status === 401 && getToken()) {
+      clearSession()
+
+      if (window.location.hash !== '#/pages/login') {
+        window.location.hash = '#/pages/login'
+      }
+    }
+
+    return Promise.reject(error)
+  },
+)
+
 export default api
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
index 2c3c217e..5dcc5930 100644
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -2,11 +2,11 @@
   <CFooter class="px-4">
     <div>
       <a href="https://manjapro.net/" target="_blank">ManjaPro</a>
-      <span class="ms-1">&copy; {{ new Date().getFullYear() }} bestapps</span>
+      <span class="ms-1">&copy; {{ new Date().getFullYear() }}</span>
     </div>
     <div class="ms-auto">
-      <span class="me-1" target="_blank">Powered by</span>
-      <a href="https://rjn-net.id/">PT. LJN Cikembar</a>
+      <!-- <span class="me-1" target="_blank">Powered by</span> -->
+      <a href="https://radiq.my.id/">PT. Radhika Data Nusantara</a>
     </div>
   </CFooter>
 </template>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index fda96a89..8ce993a9 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -6,16 +6,16 @@ import AppBreadcrumb from '@/components/AppBreadcrumb.vue'
 import AppHeaderDropdownAccnt from '@/components/AppHeaderDropdownAccnt.vue'
 import { useSidebarStore } from '@/stores/sidebar.js'
 
-const headerClassNames = ref('mb-4 p-0')
+const headerClassNames = ref('mb-2 p-0')
 const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
 const sidebar = useSidebarStore()
 
 onMounted(() => {
   document.addEventListener('scroll', () => {
     if (document.documentElement.scrollTop > 0) {
-      headerClassNames.value = 'mb-4 p-0 shadow-sm'
+      headerClassNames.value = 'mb-2 p-0 shadow-sm'
     } else {
-      headerClassNames.value = 'mb-4 p-0'
+      headerClassNames.value = 'mb-2 p-0'
     }
   })
 })
@@ -101,8 +101,8 @@ onMounted(() => {
         <AppHeaderDropdownAccnt />
       </CHeaderNav>
     </CContainer>
-    <CContainer class="px-4" fluid>
+    <!-- <CContainer class="px-4" fluid>
       <AppBreadcrumb />
-    </CContainer>
+    </CContainer> -->
   </CHeader>
 </template>
diff --git a/src/components/AppHeaderDropdownAccnt.vue b/src/components/AppHeaderDropdownAccnt.vue
index d51d1fe0..a4938f75 100644
--- a/src/components/AppHeaderDropdownAccnt.vue
+++ b/src/components/AppHeaderDropdownAccnt.vue
@@ -1,21 +1,79 @@
 <script setup>
-import avatar from '@/assets/images/avatars/8.jpg'
+import { ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { getTemporaryFileUrl } from '@/services/fileService'
+import { getMyProfile } from '@/services/profileService'
 
 const itemsCount = 42
+const router = useRouter()
+const authStore = useAuthStore()
+const avatarUrl = ref('')
+const profileLoadedForUserId = ref(null)
+
+watch(
+  () => [authStore.user?.id, authStore.user?.profile_photo?.uuid],
+  async ([userId]) => {
+    avatarUrl.value = ''
+    if (!userId) return
+
+    try {
+      let user = authStore.user
+
+      if (!user?.profile_photo && profileLoadedForUserId.value !== userId) {
+        profileLoadedForUserId.value = userId
+        const profileResponse = await getMyProfile()
+        user = profileResponse?.data || user
+        authStore.setUser(user)
+      }
+
+      const uuid = user?.profile_photo?.uuid
+      if (!uuid) return
+
+      const response = await getTemporaryFileUrl(uuid)
+      avatarUrl.value = response?.data?.url || ''
+    } catch {
+      avatarUrl.value = ''
+    }
+  },
+  { immediate: true },
+)
+
+function openProfile() {
+  router.push('/profile')
+}
+
+function onLogout() {
+  authStore.logout()
+  router.push('/pages/login')
+}
 </script>
 
 <template>
   <CDropdown placement="bottom-end" variant="nav-item">
     <CDropdownToggle class="py-0 pe-0" :caret="false">
-      <CAvatar :src="avatar" size="md" />
+      <CAvatar
+        :src="avatarUrl || undefined"
+        color="primary"
+        text-color="white"
+        size="md"
+        class="header-profile-avatar"
+      >
+        <template v-if="!avatarUrl">
+          {{ authStore.user?.name?.charAt(0)?.toUpperCase() || 'U' }}
+        </template>
+      </CAvatar>
     </CDropdownToggle>
     <CDropdownMenu class="pt-0">
       <CDropdownHeader
         component="h6"
         class="bg-body-secondary text-body-secondary fw-semibold mb-2 rounded-top"
       >
-        Account
+        {{ authStore.user?.name || 'Account' }}
       </CDropdownHeader>
+      <CDropdownItemText class="small text-body-secondary">
+        {{ authStore.user?.email || '-' }}
+      </CDropdownItemText>
       <CDropdownItem>
         <CIcon icon="cil-bell" /> Updates
         <CBadge color="info" class="ms-auto">{{ itemsCount }}</CBadge>
@@ -38,7 +96,7 @@ const itemsCount = 42
       >
         Settings
       </CDropdownHeader>
-      <CDropdownItem> <CIcon icon="cil-user" /> Profile </CDropdownItem>
+      <CDropdownItem @click="openProfile"> <CIcon icon="cil-user" /> Profile </CDropdownItem>
       <CDropdownItem> <CIcon icon="cil-settings" /> Settings </CDropdownItem>
       <CDropdownItem>
         <CIcon icon="cil-dollar" /> Payments
@@ -50,7 +108,7 @@ const itemsCount = 42
       </CDropdownItem>
       <CDropdownDivider />
       <CDropdownItem> <CIcon icon="cil-shield-alt" /> Lock Account </CDropdownItem>
-      <CDropdownItem> <CIcon icon="cil-lock-locked" /> Logout </CDropdownItem>
+      <CDropdownItem @click="onLogout"> <CIcon icon="cil-lock-locked" /> Logout </CDropdownItem>
     </CDropdownMenu>
   </CDropdown>
 </template>
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 11324a76..c11bb4e8 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -33,14 +33,14 @@ const sidebar = useSidebarStore()
           class="d-flex align-items-center text-decoration-none"
         >
           <!-- Logo -->
-          <img :src="logo" alt="Logo" style="height: 60px; width: auto" />
+          <img :src="logo" alt="Logo" style="height: 40px; width: auto" />
 
           <!-- Teks -->
           <div class="ms-2 text-start">
-            <div class="fw-bold" style="font-size: 30px; line-height: 1; color: #ff8c00">
-              ManjaPro
+            <div class="fw-bold" style="font-size: 22px; line-height: 1; color: #ff8c00; margin-top: 8px">
+              MANJAPRO
             </div>
-            <small class="fw-bold" style="font-size: 11px"> PT. Rhadika Data Nusantara </small>
+            <small class="fw-bold" style="font-size: 11px"> PT. Radhika Data Nusantara </small>
           </div>
         </CSidebarBrand>
       </RouterLink>
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 49889eb3..4c455960 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -1,9 +1,9 @@
 import { defineComponent, h, onMounted, ref, resolveComponent } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 
-import { cilExternalLink } from '@coreui/icons'
 import { CBadge, CSidebarNav, CNavItem, CNavGroup, CNavTitle } from '@coreui/vue'
-import nav from '@/_nav.js'
+import { injectMenusAfterDashboard } from '@/_nav.js'
+import { useMenuStore } from '@/stores/menu'
 
 import simplebar from 'simplebar-vue'
 import 'simplebar-vue/dist/simplebar.min.css'
@@ -24,8 +24,11 @@ const isActiveLink = (route, link) => {
 
   const currentPath = normalizePath(route.path)
   const targetPath = normalizePath(link)
+  const activeMenuPath = route.meta?.activeMenu
+    ? normalizePath(route.meta.activeMenu)
+    : null
 
-  return currentPath === targetPath
+  return currentPath === targetPath || activeMenuPath === targetPath
 }
 
 const isActiveItem = (route, item) => {
@@ -50,6 +53,7 @@ const AppSidebarNav = defineComponent({
   setup() {
     const route = useRoute()
     const firstRender = ref(true)
+    const menuStore = useMenuStore()
 
     onMounted(() => {
       firstRender.value = false
@@ -173,16 +177,19 @@ const AppSidebarNav = defineComponent({
           )
     }
 
-    return () =>
-      h(
+    return () => {
+      const mergedNav = injectMenusAfterDashboard(menuStore.mappedMenus)
+
+      return h(
         CSidebarNav,
         {
           as: simplebar,
         },
         {
-          default: () => nav.map((item) => renderItem(item)),
+          default: () => mergedNav.map((item) => renderItem(item)),
         },
       )
+    }
   },
 })
 
diff --git a/src/components/GlobalImagePreview.vue b/src/components/GlobalImagePreview.vue
new file mode 100644
index 00000000..db1dc8f4
--- /dev/null
+++ b/src/components/GlobalImagePreview.vue
@@ -0,0 +1,65 @@
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const visible = ref(false)
+const imageUrl = ref('')
+const imageAlt = ref('Preview gambar')
+
+function openPreview(event) {
+  const previewTarget = event.target.closest?.('.image-previewable')
+  if (!previewTarget) return
+
+  const image = previewTarget.matches('img') ? previewTarget : previewTarget.querySelector('img')
+  if (!image?.src) return
+
+  imageUrl.value = image.currentSrc || image.src
+  imageAlt.value = image.alt || previewTarget.dataset.previewAlt || 'Preview gambar'
+  visible.value = true
+  document.body.classList.add('image-preview-open')
+}
+
+function closePreview() {
+  visible.value = false
+  document.body.classList.remove('image-preview-open')
+}
+
+function handleKeydown(event) {
+  if (event.key === 'Escape' && visible.value) closePreview()
+}
+
+onMounted(() => {
+  document.addEventListener('click', openPreview)
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', openPreview)
+  document.removeEventListener('keydown', handleKeydown)
+  document.body.classList.remove('image-preview-open')
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="image-preview-fade">
+      <div
+        v-if="visible"
+        class="image-preview-modal"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="imageAlt"
+        @click.self="closePreview"
+      >
+        <button
+          type="button"
+          class="image-preview-close"
+          aria-label="Tutup preview gambar"
+          @click="closePreview"
+        >
+          <CIcon icon="cil-x-circle" size="xl" />
+        </button>
+        <img :src="imageUrl" :alt="imageAlt" class="image-preview-modal-image" />
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/src/components/base/BaseResponsiveDataView.vue b/src/components/base/BaseResponsiveDataView.vue
new file mode 100644
index 00000000..251a689d
--- /dev/null
+++ b/src/components/base/BaseResponsiveDataView.vue
@@ -0,0 +1,588 @@
+<template>
+  <div class="responsive-data-view brdvx-root" :aria-busy="loading">
+    <div class="data-toolbar">
+      <div class="toolbar-left">
+        <div v-if="!isMobile" class="per-page-wrap">
+          <label class="toolbar-label" for="per-page-select">Show</label>
+          <CFormSelect
+            id="per-page-select"
+            size="sm"
+            class="per-page-select"
+            :model-value="String(perPage)"
+            @change="onPerPageChange"
+          >
+            <option v-for="opt in perPageOptions" :key="opt" :value="String(opt)">{{ opt }}</option>
+          </CFormSelect>
+        </div>
+
+      </div>
+
+      <div class="toolbar-search-wrap">
+        <div class="toolbar-search">
+          <CFormInput
+            v-model="searchQuery"
+            type="text"
+            size="sm"
+            placeholder="Search"
+            aria-label="Search"
+          />
+        </div>
+        <CButton
+          size="sm"
+          color="secondary"
+          variant="outline"
+          class="view-toggle-btn"
+          @click="setViewMode(viewMode === 'card' ? 'table' : 'card')"
+        >
+          <CIcon :icon="viewMode === 'card' ? cilList : cilViewModule" />
+        </CButton>
+      </div>
+    </div>
+
+    <div v-if="loading" class="brdvx-inline-loading" role="status" aria-live="polite">
+      <CSpinner color="primary" size="sm" />
+      <span>Memuat data...</span>
+    </div>
+
+    <template v-if="viewMode === 'card'">
+      <div class="cards-grid" :class="{ mobile: isMobile }">
+        <CCard
+          v-for="(item, rowIndex) in renderedItems"
+          :key="resolveRowKey(item, rowIndex)"
+          class="mobile-card"
+          role="button"
+          @click="onCardClick(item)"
+        >
+          <div v-if="item.image" class="mobile-image-header">
+            <img
+              :src="item.image"
+              :alt="item.name || `Item ${rowIndex + 1}`"
+              class="mobile-image"
+              @error="onImageError($event, item)"
+            />
+          </div>
+          <CCardHeader v-else class="mobile-card-header">
+            <span class="mobile-card-title">{{ item.name || `Row ${rowIndex + 1}` }}</span>
+            <CBadge color="light" class="text-dark">#{{ item.id || rowIndex + 1 }}</CBadge>
+          </CCardHeader>
+
+          <CCardBody class="mobile-card-body">
+            <div class="mobile-fields">
+              <div v-for="col in cardColumns(item)" :key="col.key" class="mobile-field">
+                <span class="field-label">{{ col.label }}</span>
+                <span class="field-value">{{ item[col.key] }}</span>
+              </div>
+            </div>
+
+            <div v-if="!hideDefaultActions" class="mobile-actions" @click.stop>
+              <CButton
+                v-for="action in mobileActions"
+                :key="action.key"
+                size="sm"
+                :color="action.color"
+                variant="outline"
+                @click="onActionClick(action.key, item)"
+              >
+                {{ action.label }}
+              </CButton>
+            </div>
+          </CCardBody>
+        </CCard>
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="table-list-wrapper">
+        <CCard v-if="!isMobile" class="table-list-card table-list-header-card">
+          <CCardBody class="table-list-card-body">
+            <div class="table-list-main">
+              <div class="table-list-data-col desktop-row-grid" :style="desktopGridStyle">
+                <div
+                  v-for="col in desktopHeaderColumns"
+                  :key="`head-${col.key}`"
+                  class="table-list-cell table-list-head-cell"
+                >
+                  <button
+                    v-if="serverSide && col.sortable !== false"
+                    type="button"
+                    class="brdvx-sort-button"
+                    @click="toggleSort(col)"
+                  >
+                    <span>{{ col.label }}</span>
+                    <span v-if="sortBy === (col.sortKey || col.key)">
+                      {{ sortDirection === 'asc' ? '↑' : '↓' }}
+                    </span>
+                  </button>
+                  <span v-else class="table-list-value row-pair">
+                    <span class="row-right no-label">{{ col.label }}</span>
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div class="table-list-right" :style="desktopActionStyle">
+              <div class="table-list-head-cell action-head">Action</div>
+            </div>
+          </CCardBody>
+        </CCard>
+
+        <CCard
+          v-for="(item, rowIndex) in renderedItems"
+          :key="resolveRowKey(item, rowIndex)"
+          class="table-list-card"
+        >
+          <CCardBody class="table-list-card-body">
+            <div class="table-list-main" :class="{ 'with-image': hasImageCell(item) && isMobile }">
+              <div v-if="hasImageCell(item) && isMobile" class="table-list-image-col">
+                <img
+                  :src="item.image"
+                  :alt="item.name || 'avatar'"
+                  class="table-list-mobile-image"
+                  @error="onImageError($event, item)"
+                />
+              </div>
+
+              <div v-if="isMobile" class="table-list-data-col mobile-split">
+                <div class="mobile-col">
+                  <div
+                    v-for="col in leftMobileColumns(item)"
+                    :key="`${resolveRowKey(item, rowIndex)}-left-${col.key}`"
+                    class="table-list-cell"
+                  >
+                    <span class="table-list-value">{{ item[col.key] }}</span>
+                  </div>
+                </div>
+                <div class="mobile-col">
+                  <div
+                    v-for="col in rightMobileColumns(item)"
+                    :key="`${resolveRowKey(item, rowIndex)}-right-${col.key}`"
+                    class="table-list-cell"
+                  >
+                    <span class="table-list-value">{{ item[col.key] }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div v-else class="table-list-data-col desktop-row-grid" :style="desktopGridStyle">
+                <div
+                  v-for="col in displayColumns(item)"
+                  :key="`${resolveRowKey(item, rowIndex)}-${col.key}`"
+                  class="table-list-cell"
+                >
+                  <span class="table-list-value row-pair">
+                    <template v-if="col.key === 'image' && item.image">
+                      <img
+                        :src="item.image"
+                        :alt="item.name || 'avatar'"
+                        class="table-avatar"
+                        @error="onImageError($event, item)"
+                      />
+                    </template>
+                    <template v-else>
+                      <span class="row-right no-label">{{ item[col.key] }}</span>
+                    </template>
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div class="table-list-right" :style="desktopActionStyle">
+              <CButton
+                v-if="hiddenTableColumns.length"
+                size="sm"
+                @click="toggleExpandRow(resolveRowKey(item, rowIndex))"
+              >
+                <CIcon :icon="isRowExpanded(resolveRowKey(item, rowIndex)) ? cilCaretTop : cilCaretBottom" />
+              </CButton>
+
+              <div v-if="!hideDefaultActions" class="table-actions">
+                <CButton
+                  v-for="action in actions"
+                  :key="`${resolveRowKey(item, rowIndex)}-${action.key}`"
+                  size="sm"
+                  :color="action.color"
+                  variant="outline"
+                  @click="onActionClick(action.key, item)"
+                >
+                  {{ action.label }}
+                </CButton>
+              </div>
+            </div>
+          </CCardBody>
+
+          <div
+            v-if="hiddenTableColumns.length && isRowExpanded(resolveRowKey(item, rowIndex))"
+            class="table-list-hidden"
+          >
+            <div
+              v-for="col in hiddenTableColumns"
+              :key="`${resolveRowKey(item, rowIndex)}-hidden-${col.key}`"
+              class="hidden-item"
+            >
+              <span class="hidden-label">{{ col.label }}</span>
+              <span class="hidden-value">{{ item[col.key] }}</span>
+            </div>
+          </div>
+        </CCard>
+      </div>
+    </template>
+
+    <div v-if="totalPages > 1" class="pagination-center">
+      <CPagination align="center" aria-label="Page navigation">
+        <CPaginationItem :disabled="currentPage === 1" @click="goToPage(currentPage - 1)">Previous</CPaginationItem>
+        <CPaginationItem
+          v-for="page in visiblePages"
+          :key="page"
+          :active="page === currentPage"
+          @click="goToPage(page)"
+        >
+          {{ page }}
+        </CPaginationItem>
+        <CPaginationItem :disabled="currentPage === totalPages" @click="goToPage(currentPage + 1)">Next</CPaginationItem>
+      </CPagination>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { CIcon } from '@coreui/icons-vue'
+import { cilCaretBottom, cilCaretTop, cilList, cilViewModule } from '@coreui/icons'
+
+const VIEW_MODE_STORAGE_KEY = 'manja-responsive-data-view-mode'
+const getStoredViewMode = () => {
+  const storedMode = localStorage.getItem(VIEW_MODE_STORAGE_KEY)
+  return storedMode === 'card' || storedMode === 'table' ? storedMode : 'table'
+}
+
+const props = defineProps({
+  columns: {
+    type: Array,
+    required: true,
+  },
+  items: {
+    type: Array,
+    required: true,
+  },
+  rowKey: {
+    type: String,
+    default: 'id',
+  },
+  mobileBreakpoint: {
+    type: Number,
+    default: 768,
+  },
+  mobileVisibleCount: {
+    type: Number,
+    default: 5,
+  },
+  desktopPrimaryCount: {
+    type: Number,
+    default: 6,
+  },
+  actions: {
+    type: Array,
+    default: () => [
+      { key: 'detail', label: 'Detail', color: 'primary' },
+      { key: 'edit', label: 'Edit', color: 'success' },
+      { key: 'delete', label: 'Delete', color: 'danger' },
+    ],
+  },
+  hideDefaultActions: {
+    type: Boolean,
+    default: false,
+  },
+  rowRoute: {
+    type: [String, Function],
+    default: null,
+  },
+  serverSide: {
+    type: Boolean,
+    default: false,
+  },
+  pagination: {
+    type: Object,
+    default: () => ({}),
+  },
+  initialSortBy: {
+    type: String,
+    default: '',
+  },
+  initialSortDirection: {
+    type: String,
+    default: 'asc',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['action-click', 'row-click', 'query-change'])
+
+const router = useRouter()
+const width = ref(window.innerWidth)
+const isMobile = computed(() => width.value < props.mobileBreakpoint)
+
+const viewMode = ref(getStoredViewMode())
+const searchQuery = ref('')
+const perPageOptions = [10, 20, 50, 100]
+const perPage = ref(10)
+const currentPage = ref(1)
+const mobileLoadedPages = ref(1)
+const expandedRows = ref(new Set())
+const sortBy = ref(props.initialSortBy)
+const sortDirection = ref(props.initialSortDirection === 'desc' ? 'desc' : 'asc')
+let searchTimer = null
+
+const normalizeValue = (val) => (val === null || val === undefined ? '' : String(val).toLowerCase())
+
+const filteredItems = computed(() => {
+  const query = searchQuery.value.trim().toLowerCase()
+  if (!query) return props.items
+
+  return props.items.filter((item) =>
+    props.columns.some((col) => normalizeValue(item?.[col.key]).includes(query)),
+  )
+})
+
+const totalPages = computed(() => {
+  if (props.serverSide) return Math.max(1, Number(props.pagination?.last_page) || 1)
+  if (isMobile.value) return 1
+  return Math.max(1, Math.ceil(filteredItems.value.length / perPage.value))
+})
+
+const desktopItems = computed(() => {
+  const start = (currentPage.value - 1) * perPage.value
+  return filteredItems.value.slice(start, start + perPage.value)
+})
+
+const mobileItems = computed(() => {
+  const size = perPage.value * mobileLoadedPages.value
+  return filteredItems.value.slice(0, size)
+})
+
+const renderedItems = computed(() => {
+  if (props.serverSide) return props.items
+  return isMobile.value ? mobileItems.value : desktopItems.value
+})
+
+const visiblePages = computed(() => {
+  const lastPage = totalPages.value
+  if (lastPage <= 7) return Array.from({ length: lastPage }, (_, index) => index + 1)
+
+  const start = Math.max(1, Math.min(currentPage.value - 3, lastPage - 6))
+  return Array.from({ length: 7 }, (_, index) => start + index)
+})
+
+const desktopVisibleColumns = computed(() => Math.min(props.desktopPrimaryCount, props.columns.length))
+const mobileTableVisibleCount = 6
+
+const visibleTableColumns = computed(() => {
+  if (isMobile.value && viewMode.value === 'table') {
+    return props.columns.slice(0, mobileTableVisibleCount)
+  }
+  return props.columns.slice(0, desktopVisibleColumns.value)
+})
+
+const hiddenTableColumns = computed(() => {
+  if (viewMode.value === 'table' && props.columns.length > mobileTableVisibleCount) {
+    return props.columns.slice(mobileTableVisibleCount)
+  }
+  return []
+})
+
+const hasImageCell = (item) => Boolean(item?.image)
+
+const onImageError = (event, item) => {
+  const fallback = item?.imageFallback
+  if (!fallback || event.target.src.endsWith(fallback)) return
+  event.target.src = fallback
+}
+
+const displayColumns = (item) => {
+  const cols = visibleTableColumns.value
+  if (isMobile.value && hasImageCell(item)) {
+    return cols.filter((col) => col.key !== 'image')
+  }
+  return cols
+}
+
+const mobileColumns = computed(() => props.columns.slice(0, props.mobileVisibleCount))
+
+const cardColumns = (item) =>
+  mobileColumns.value.filter((column) => {
+    if (column.key === 'id') return false
+    if (item?.image && (column.key === 'image' || column.key === 'avatar')) return false
+    return true
+  })
+
+const leftMobileColumns = (item) => {
+  const cols = displayColumns(item)
+  const split = Math.ceil(cols.length / 2)
+  return cols.slice(0, split)
+}
+
+const rightMobileColumns = (item) => {
+  const cols = displayColumns(item)
+  const split = Math.ceil(cols.length / 2)
+  return cols.slice(split)
+}
+
+const desktopHeaderColumns = computed(() => visibleTableColumns.value)
+const mobileActions = computed(() => props.actions)
+
+const desktopColumnCount = computed(() => Math.max(1, desktopHeaderColumns.value.length))
+const actionColumnWidth = computed(() => {
+  const actionCount = props.actions?.length ?? 0
+  if (actionCount <= 1) return '140px'
+  if (actionCount === 2) return '180px'
+  if (actionCount === 3) return '230px'
+  return '280px'
+})
+
+const desktopGridStyle = computed(() => ({
+  '--brdvx-desktop-cols': desktopColumnCount.value,
+}))
+
+const desktopActionStyle = computed(() => ({
+  '--brdvx-action-col-width': actionColumnWidth.value,
+}))
+
+const resolveRowKey = (item, index) => item?.[props.rowKey] ?? `row-${index}`
+
+const onCardClick = (item) => {
+  emit('row-click', item)
+
+  if (typeof props.rowRoute === 'function') {
+    const target = props.rowRoute(item)
+    if (target) router.push(target)
+  } else if (typeof props.rowRoute === 'string' && props.rowRoute) {
+    router.push(props.rowRoute.replace(':id', item?.id))
+  }
+}
+
+const onActionClick = (actionKey, item) => {
+  emit('action-click', { action: actionKey, item })
+}
+
+const setViewMode = (mode) => {
+  if (mode !== 'table' && mode !== 'card') return
+
+  viewMode.value = mode
+  localStorage.setItem(VIEW_MODE_STORAGE_KEY, mode)
+}
+
+const onPerPageChange = (event) => {
+  const value = Number(event.target.value)
+  if (!Number.isNaN(value)) {
+    perPage.value = value
+    currentPage.value = 1
+    mobileLoadedPages.value = 1
+    emitQueryChange()
+  }
+}
+
+const goToPage = (page) => {
+  if (page < 1 || page > totalPages.value) return
+  currentPage.value = page
+  if (props.serverSide) emitQueryChange()
+}
+
+const toggleSort = (column) => {
+  const key = column.sortKey || column.key
+  if (sortBy.value === key) {
+    sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortBy.value = key
+    sortDirection.value = 'asc'
+  }
+  currentPage.value = 1
+  emitQueryChange()
+}
+
+const emitQueryChange = () => {
+  if (!props.serverSide) return
+
+  emit('query-change', {
+    page: currentPage.value,
+    per_page: perPage.value,
+    search: searchQuery.value.trim() || undefined,
+    sort_by: sortBy.value || undefined,
+    sort_direction: sortBy.value ? sortDirection.value : undefined,
+  })
+}
+
+const isRowExpanded = (rowKey) => expandedRows.value.has(rowKey)
+
+const toggleExpandRow = (rowKey) => {
+  const clone = new Set(expandedRows.value)
+  if (clone.has(rowKey)) clone.delete(rowKey)
+  else clone.add(rowKey)
+  expandedRows.value = clone
+}
+
+const handleInfiniteScroll = () => {
+  if (!isMobile.value || props.serverSide) return
+  const nearBottom =
+    window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 120
+
+  if (!nearBottom) return
+
+  const maxPage = Math.max(1, Math.ceil(filteredItems.value.length / perPage.value))
+  if (mobileLoadedPages.value < maxPage) {
+    mobileLoadedPages.value += 1
+  }
+}
+
+const onResize = () => {
+  width.value = window.innerWidth
+}
+
+watch([searchQuery, () => props.items], () => {
+  if (!props.serverSide) currentPage.value = 1
+  mobileLoadedPages.value = 1
+  expandedRows.value = new Set()
+})
+
+watch(searchQuery, () => {
+  if (!props.serverSide) return
+
+  window.clearTimeout(searchTimer)
+  searchTimer = window.setTimeout(() => {
+    currentPage.value = 1
+    emitQueryChange()
+  }, 400)
+})
+
+watch(
+  () => props.pagination,
+  (pagination) => {
+    if (!props.serverSide) return
+    currentPage.value = Number(pagination?.current_page) || 1
+    perPage.value = Number(pagination?.per_page) || perPage.value
+  },
+  { immediate: true, deep: true },
+)
+
+watch(
+  () => isMobile.value,
+  () => {
+    currentPage.value = 1
+    mobileLoadedPages.value = 1
+    expandedRows.value = new Set()
+  },
+)
+
+onMounted(() => {
+  window.addEventListener('resize', onResize)
+  window.addEventListener('scroll', handleInfiniteScroll, { passive: true })
+})
+
+onBeforeUnmount(() => {
+  window.clearTimeout(searchTimer)
+  window.removeEventListener('resize', onResize)
+  window.removeEventListener('scroll', handleInfiniteScroll)
+})
+</script>
+
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 30177e58..4a5b0991 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -11,7 +11,7 @@ import AppSidebar from '@/components/AppSidebar.vue'
     <div class="wrapper d-flex flex-column min-vh-100">
       <AppHeader />
       <div class="body flex-grow-1">
-        <CContainer class="px-4" fluid>
+        <CContainer class="px-1" fluid>
           <router-view />
         </CContainer>
       </div>
diff --git a/src/main.js b/src/main.js
index c0f2a071..ad8348b4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,7 +17,6 @@
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import { setToken, hasToken } from '@/utils/session'
 
 import App from './App.vue'
 import router from './router'
@@ -33,7 +32,6 @@ import DocsExample from '@/components/DocsExample'
 import DocsIcons from '@/components/DocsIcons'
 
 import { CButton } from '@coreui/vue'
-import { CBadge } from '@coreui/vue'
 
 // Create Vue application instance
 const app = createApp(App)
@@ -54,10 +52,5 @@ app.component('DocsComponents', DocsComponents)
 app.component('DocsExample', DocsExample)
 app.component('DocsIcons', DocsIcons)
 
-// TODO: Hapus setelah fitur Login tersedia — token sementara untuk development
-if (!hasToken()) {
-  setToken('UU7HVn7ECHe7MvqMTeTeEpoFdBA2wc0NHQX29WyG91fc6982')
-}
-
 // Mount application to DOM
 app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index 0528b334..515d5a67 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -26,6 +26,9 @@ import { h, resolveComponent } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 import DefaultLayout from '@/layouts/DefaultLayout'
+import { useAuthStore } from '@/stores/auth'
+import { useMenuStore } from '@/stores/menu'
+import { hasToken } from '@/utils/session'
 
 /**
  * Application routes configuration
@@ -37,6 +40,9 @@ const routes = [
     name: 'Home',
     component: DefaultLayout,
     redirect: '/dashboard',
+    meta: {
+      requiresAuth: true,
+    },
     children: [
       {
         path: '/dashboard',
@@ -47,6 +53,11 @@ const routes = [
         component: () =>
           import(/* webpackChunkName: "dashboard" */ '@/views/dashboard/Dashboard.vue'),
       },
+      {
+        path: '/profile',
+        name: 'Profile',
+        component: () => import('@/views/profile/Profile.vue'),
+      },
       {
         path: '/tickets',
         name: 'Tickets',
@@ -64,21 +75,25 @@ const routes = [
           },
           {
             path: '/tickets/ticket-type',
+            alias: '/ticket-types',
             name: 'Ticket Type',
             component: () => import('@/views/tickets/TicketType.vue'),
           },
           {
             path: '/tickets/ticket-materials',
+            alias: '/materials',
             name: 'Ticket Materials',
             component: () => import('@/views/tickets/TicketMaterials.vue'),
           },
           {
             path: '/tickets/ticket-incident',
+            alias: '/ticket-incident-types',
             name: 'Ticket Incident',
             component: () => import('@/views/tickets/TicketIncident.vue'),
           },
           {
             path: '/tickets/approved',
+            alias: '/tickets/approval',
             name: 'Approved',
             component: () => import('@/views/tickets/Approved.vue'),
           },
@@ -87,11 +102,6 @@ const routes = [
             name: 'Rejected',
             component: () => import('@/views/tickets/Rejected.vue'),
           },
-          {
-            path: '/tickets/ticket-incident',
-            name: 'Ticket Incident',
-            component: () => import('@/views/tickets/TicketIncident.vue'),
-          },
         ],
       },
       {
@@ -349,6 +359,75 @@ const routes = [
           },
         ],
       },
+      {
+        path: '/group-menus',
+        name: 'Group Menus',
+        component: () => import('@/views/group-menus/GroupMenus.vue'),
+      },
+      {
+        path: '/group-menus/:id/menus',
+        name: 'Group Menu Permissions',
+        component: () => import('@/views/group-menus/GroupMenuPermissions.vue'),
+        meta: { activeMenu: '/group-menus' },
+      },
+      {
+        path: '/nas/mikrotik',
+        name: 'NAS Mikrotik',
+        component: () => import('@/views/nas/NasResourceView.vue'),
+        meta: { nasResource: 'mikrotik' },
+      },
+      {
+        path: '/nas/package-profiles',
+        name: 'NAS Profile Paket',
+        component: () => import('@/views/nas/NasResourceView.vue'),
+        meta: { nasResource: 'package-profile' },
+      },
+      {
+        path: '/nas/olt',
+        name: 'NAS OLT',
+        component: () => import('@/views/nas/NasResourceView.vue'),
+        meta: { nasResource: 'olt' },
+      },
+      {
+        path: '/nas/webfig',
+        name: 'NAS Webfig',
+        component: () => import('@/views/nas/NasResourceView.vue'),
+        meta: { nasResource: 'webfig' },
+      },
+      {
+        path: '/users',
+        name: 'Users',
+        component: () => import('@/views/users/Users.vue'),
+      },
+      {
+        path: '/tenants',
+        name: 'Tenants',
+        component: () => import('@/views/tenants/Tenants.vue'),
+      },
+      {
+        path: '/wilayah/desa',
+        name: 'Wilayah Desa',
+        component: () => import('@/views/wilayah/Wilayah.vue'),
+        meta: { tingkat: 'desa' },
+      },
+      {
+        path: '/wilayah/kecamatan',
+        name: 'Wilayah Kecamatan',
+        component: () => import('@/views/wilayah/Wilayah.vue'),
+        meta: { tingkat: 'kecamatan' },
+      },
+      {
+        path: '/wilayah/kabupaten',
+        name: 'Wilayah Kabupaten',
+        component: () => import('@/views/wilayah/Wilayah.vue'),
+        meta: { tingkat: 'kabupaten' },
+      },
+      {
+        path: '/wilayah/provinsi',
+        name: 'Wilayah Provinsi',
+        component: () => import('@/views/wilayah/Wilayah.vue'),
+        meta: { tingkat: 'provinsi' },
+      },
       {
         path: '/widgets',
         name: 'Widgets',
@@ -380,11 +459,25 @@ const routes = [
         path: 'login',
         name: 'Login',
         component: () => import('@/views/pages/Login'),
+        meta: {
+          guestOnly: true,
+        },
       },
       {
         path: 'register',
         name: 'Register',
         component: () => import('@/views/pages/Register'),
+        meta: {
+          guestOnly: true,
+        },
+      },
+      {
+        path: 'verify-code',
+        name: 'VerifyCode',
+        component: () => import('@/views/pages/VerifyCode'),
+        meta: {
+          guestOnly: true,
+        },
       },
     ],
   },
@@ -399,4 +492,40 @@ const router = createRouter({
   },
 })
 
+router.beforeEach(async (to) => {
+  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth)
+  const guestOnly = to.matched.some((record) => record.meta.guestOnly)
+  const authenticated = hasToken()
+
+  if (requiresAuth && !authenticated) {
+    return {
+      name: 'Login',
+      query: {
+        redirect: to.fullPath,
+      },
+    }
+  }
+
+  if (guestOnly && authenticated) {
+    return { name: 'Dashboard' }
+  }
+
+  if (requiresAuth) {
+    try {
+      await useMenuStore().fetchMenus()
+    } catch {
+      useAuthStore().logout()
+
+      return {
+        name: 'Login',
+        query: {
+          redirect: to.fullPath,
+        },
+      }
+    }
+  }
+
+  return true
+})
+
 export default router
diff --git a/src/services/authService.js b/src/services/authService.js
new file mode 100644
index 00000000..68fa36de
--- /dev/null
+++ b/src/services/authService.js
@@ -0,0 +1,21 @@
+import api from '@/api/axios'
+
+export async function login(payload) {
+  const response = await api.post('/login', payload)
+  return response.data
+}
+
+export async function register(payload) {
+  const response = await api.post('/register', payload)
+  return response.data
+}
+
+export async function verifyCode(payload) {
+  const response = await api.post('/register/verify', payload)
+  return response.data
+}
+
+export async function resendVerificationCode(payload) {
+  const response = await api.post('/register/resend-code', payload)
+  return response.data
+}
diff --git a/src/services/fileService.js b/src/services/fileService.js
new file mode 100644
index 00000000..efe4c49f
--- /dev/null
+++ b/src/services/fileService.js
@@ -0,0 +1,23 @@
+import api from '@/api/axios'
+
+export async function uploadFile(file, category = 'general') {
+  const payload = new FormData()
+  payload.append('file', file)
+  payload.append('category', category)
+
+  const { data } = await api.post('/files', payload, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  })
+
+  return data
+}
+
+export async function getTemporaryFileUrl(uuid) {
+  const { data } = await api.get(`/files/${uuid}/temporary-url`)
+  return data
+}
+
+export async function deleteFile(uuid) {
+  const { data } = await api.delete(`/files/${uuid}`)
+  return data
+}
diff --git a/src/services/menuGroupService.js b/src/services/menuGroupService.js
new file mode 100644
index 00000000..270e5641
--- /dev/null
+++ b/src/services/menuGroupService.js
@@ -0,0 +1,36 @@
+import api from '@/api/axios'
+
+export async function getMenuGroups(params = {}) {
+  const { data } = await api.get('/menu-groups', { params })
+  return data
+}
+
+export async function createMenuGroup(payload) {
+  const { data } = await api.post('/menu-groups', payload)
+  return data
+}
+
+export async function getMenuGroupById(id) {
+  const { data } = await api.get(`/menu-groups/${id}`)
+  return data
+}
+
+export async function updateMenuGroup(id, payload) {
+  const { data } = await api.put(`/menu-groups/${id}`, payload)
+  return data
+}
+
+export async function deleteMenuGroup(id) {
+  const { data } = await api.delete(`/menu-groups/${id}`)
+  return data
+}
+
+export async function getMenuGroupAvailableById(id) {
+  const { data } = await api.get(`/menu-groups/${id}/available-menus`)
+  return data
+}
+
+export async function syncMenuGroupMenus(id, payload) {
+  const { data } = await api.put(`/menu-groups/${id}/menus`, payload)
+  return data
+}
diff --git a/src/services/menuService.js b/src/services/menuService.js
new file mode 100644
index 00000000..e23b9ab8
--- /dev/null
+++ b/src/services/menuService.js
@@ -0,0 +1,6 @@
+import api from '@/api/axios'
+
+export async function getMyMenus() {
+  const { data } = await api.get('/me/menus')
+  return data
+}
diff --git a/src/services/nasService.js b/src/services/nasService.js
new file mode 100644
index 00000000..1414cdeb
--- /dev/null
+++ b/src/services/nasService.js
@@ -0,0 +1,38 @@
+import api from '@/api/axios'
+
+const paths = {
+  mikrotik: 'mikrotiks',
+  'package-profile': 'package-profiles',
+  olt: 'olts',
+  webfig: 'webfig-devices',
+}
+
+function endpoint(resource, id = null) {
+  const base = `/nas/${paths[resource]}`
+  return id ? `${base}/${id}` : base
+}
+
+export async function getNasResources(resource, params = {}) {
+  const { data } = await api.get(endpoint(resource), { params })
+  return data
+}
+
+export async function getNasResource(resource, id) {
+  const { data } = await api.get(endpoint(resource, id))
+  return data
+}
+
+export async function createNasResource(resource, payload) {
+  const { data } = await api.post(endpoint(resource), payload)
+  return data
+}
+
+export async function updateNasResource(resource, id, payload) {
+  const { data } = await api.put(endpoint(resource, id), payload)
+  return data
+}
+
+export async function deleteNasResource(resource, id) {
+  const { data } = await api.delete(endpoint(resource, id))
+  return data
+}
diff --git a/src/services/profileService.js b/src/services/profileService.js
new file mode 100644
index 00000000..394cfa58
--- /dev/null
+++ b/src/services/profileService.js
@@ -0,0 +1,11 @@
+import api from '@/api/axios'
+
+export async function getMyProfile() {
+  const { data } = await api.get('/me/profile')
+  return data
+}
+
+export async function updateMyProfile(payload) {
+  const { data } = await api.put('/me/profile', payload)
+  return data
+}
diff --git a/src/services/tenantService.js b/src/services/tenantService.js
new file mode 100644
index 00000000..8786623b
--- /dev/null
+++ b/src/services/tenantService.js
@@ -0,0 +1,26 @@
+import api from '@/api/axios'
+
+export async function getTenants(params = {}) {
+  const { data } = await api.get('/tenants', { params })
+  return data
+}
+
+export async function createTenant(payload) {
+  const { data } = await api.post('/tenants', payload)
+  return data
+}
+
+export async function getTenantById(id) {
+  const { data } = await api.get(`/tenants/${id}`)
+  return data
+}
+
+export async function updateTenant(id, payload) {
+  const { data } = await api.put(`/tenants/${id}`, payload)
+  return data
+}
+
+export async function deleteTenant(id) {
+  const { data } = await api.delete(`/tenants/${id}`)
+  return data
+}
diff --git a/src/services/userService.js b/src/services/userService.js
new file mode 100644
index 00000000..6f07b57d
--- /dev/null
+++ b/src/services/userService.js
@@ -0,0 +1,26 @@
+import api from '@/api/axios'
+
+export async function getUsers(params = {}) {
+  const { data } = await api.get('/users', { params })
+  return data
+}
+
+export async function createUser(payload) {
+  const { data } = await api.post('/users', payload)
+  return data
+}
+
+export async function getUserById(id) {
+  const { data } = await api.get(`/users/${id}`)
+  return data
+}
+
+export async function updateUser(id, payload) {
+  const { data } = await api.put(`/users/${id}`, payload)
+  return data
+}
+
+export async function deleteUser(id) {
+  const { data } = await api.delete(`/users/${id}`)
+  return data
+}
diff --git a/src/services/wilayahService.js b/src/services/wilayahService.js
new file mode 100644
index 00000000..49c48038
--- /dev/null
+++ b/src/services/wilayahService.js
@@ -0,0 +1,51 @@
+import api from '@/api/axios'
+
+export async function getWilayah(tingkat, params = {}) {
+  const { data } = await api.get(`/wilayah/${tingkat}`, { params })
+  return data
+}
+
+export async function getWilayahById(tingkat, id) {
+  const { data } = await api.get(`/wilayah/${tingkat}/${id}`)
+  return data
+}
+
+export async function createWilayah(tingkat, payload) {
+  const { data } = await api.post(`/wilayah/${tingkat}`, payload)
+  return data
+}
+
+export async function updateWilayah(tingkat, id, payload) {
+  const { data } = await api.put(`/wilayah/${tingkat}/${id}`, payload)
+  return data
+}
+
+export async function deleteWilayah(tingkat, id) {
+  const { data } = await api.delete(`/wilayah/${tingkat}/${id}`)
+  return data
+}
+
+export async function getAlamatWilayah(params) {
+  const { data } = await api.get('/wilayah/alamat-lengkap', { params })
+  return data
+}
+
+export async function getProvinsiOptions(params = {}) {
+  const { data } = await api.get('/wilayah/options/provinsi', { params })
+  return data
+}
+
+export async function getKabupatenOptions(provinsiId, params = {}) {
+  const { data } = await api.get(`/wilayah/options/kabupaten/${provinsiId}`, { params })
+  return data
+}
+
+export async function getKecamatanOptions(kabupatenId, params = {}) {
+  const { data } = await api.get(`/wilayah/options/kecamatan/${kabupatenId}`, { params })
+  return data
+}
+
+export async function getDesaOptions(kecamatanId, params = {}) {
+  const { data } = await api.get(`/wilayah/options/desa/${kecamatanId}`, { params })
+  return data
+}
diff --git a/src/stores/auth.js b/src/stores/auth.js
new file mode 100644
index 00000000..32beb7c7
--- /dev/null
+++ b/src/stores/auth.js
@@ -0,0 +1,182 @@
+import { defineStore } from 'pinia'
+import {
+  login as loginApi,
+  register as registerApi,
+  verifyCode as verifyCodeApi,
+  resendVerificationCode as resendVerificationCodeApi,
+} from '@/services/authService'
+import {
+  getAuthenticatedUser,
+  removeAuthenticatedUser,
+  removeToken,
+  setAuthenticatedUser,
+  setToken,
+} from '@/utils/session'
+import { useMenuStore } from '@/stores/menu'
+import {
+  setVerificationContext,
+  getVerificationContext,
+  clearVerificationContext,
+} from '@/utils/verificationSession'
+
+function extractErrorMessage(error) {
+  const fallback = 'Terjadi kesalahan. Silakan coba lagi.'
+  const data = error?.response?.data
+
+  if (!data) return error?.message || fallback
+  if (typeof data?.message === 'string') return data.message
+
+  if (data?.errors && typeof data.errors === 'object') {
+    const firstKey = Object.keys(data.errors)[0]
+    const firstError = data.errors[firstKey]
+    if (Array.isArray(firstError) && firstError.length > 0) return firstError[0]
+  }
+
+  return fallback
+}
+
+export const useAuthStore = defineStore('auth', {
+  state: () => {
+    const savedVerification = getVerificationContext() || {}
+
+    return {
+      user: getAuthenticatedUser(),
+      loading: false,
+      error: null,
+      pendingVerificationEmail: savedVerification.verification_target || '',
+      verificationChannel: savedVerification.verification_channel || 'email',
+      verificationTarget: savedVerification.verification_target || '',
+    }
+  },
+
+  actions: {
+    setUser(user) {
+      this.user = user || null
+
+      if (this.user) {
+        setAuthenticatedUser(this.user)
+      } else {
+        removeAuthenticatedUser()
+      }
+    },
+
+    clearError() {
+      this.error = null
+    },
+
+    async login(payload) {
+      this.loading = true
+      this.error = null
+      let tokenWasStored = false
+
+      try {
+        const data = await loginApi(payload)
+        const token = data?.token || data?.access_token || data?.data?.token
+
+        if (!token) {
+          throw new Error('Token tidak ditemukan pada response login.')
+        }
+
+        setToken(token)
+        tokenWasStored = true
+        this.setUser(data?.user || data?.data?.user || null)
+
+        await useMenuStore().fetchMenus({ force: true })
+
+        return data
+      } catch (error) {
+        if (tokenWasStored) {
+          removeToken()
+          removeAuthenticatedUser()
+          this.user = null
+          useMenuStore().reset()
+          this.error = 'Login berhasil, tetapi menu akses gagal dimuat. Silakan coba lagi.'
+        } else {
+          this.error = extractErrorMessage(error)
+        }
+        throw error
+      } finally {
+        this.loading = false
+      }
+    },
+
+    async register(payload) {
+      this.loading = true
+      this.error = null
+
+      try {
+        const data = await registerApi(payload)
+
+        this.verificationChannel = payload?.verification_channel || 'email'
+        this.verificationTarget = payload?.verification_target || payload?.email || ''
+        this.pendingVerificationEmail = this.verificationTarget
+
+        setVerificationContext({
+          verification_channel: this.verificationChannel,
+          verification_target: this.verificationTarget,
+        })
+
+        return data
+      } catch (error) {
+        this.error = extractErrorMessage(error)
+        throw error
+      } finally {
+        this.loading = false
+      }
+    },
+
+    async verifyCode(payload) {
+      this.loading = true
+      this.error = null
+
+      try {
+        const data = await verifyCodeApi(payload)
+        const token = data?.token || data?.access_token || data?.data?.token
+
+        if (token) {
+          setToken(token)
+        }
+
+        this.setUser(data?.user || data?.data?.user || this.user)
+        this.pendingVerificationEmail = ''
+        this.verificationChannel = 'email'
+        this.verificationTarget = ''
+        clearVerificationContext()
+
+        return data
+      } catch (error) {
+        this.error = extractErrorMessage(error)
+        throw error
+      } finally {
+        this.loading = false
+      }
+    },
+
+    async resendVerificationCode(payload) {
+      this.loading = true
+      this.error = null
+
+      try {
+        const data = await resendVerificationCodeApi(payload)
+        return data
+      } catch (error) {
+        this.error = extractErrorMessage(error)
+        throw error
+      } finally {
+        this.loading = false
+      }
+    },
+
+    logout() {
+      removeToken()
+      removeAuthenticatedUser()
+      useMenuStore().reset()
+      this.user = null
+      this.error = null
+      this.pendingVerificationEmail = ''
+      this.verificationChannel = 'email'
+      this.verificationTarget = ''
+      clearVerificationContext()
+    },
+  },
+})
diff --git a/src/stores/menu.js b/src/stores/menu.js
new file mode 100644
index 00000000..69cf8b57
--- /dev/null
+++ b/src/stores/menu.js
@@ -0,0 +1,100 @@
+import { defineStore } from 'pinia'
+import { getMyMenus } from '@/services/menuService'
+
+let pendingMenuRequest = null
+
+function extractErrorMessage(error) {
+  const fallback = 'Gagal memuat menu.'
+  const data = error?.response?.data
+
+  if (!data) return error?.message || fallback
+  if (typeof data?.message === 'string') return data.message
+
+  return fallback
+}
+
+function mapMenuItem(item, isChild = false) {
+  const hasChildren = Array.isArray(item?.children) && item.children.filter(Boolean).length > 0
+  const name = item?.name || 'Untitled'
+  const to = item?.url || '#'
+
+  if (hasChildren) {
+    return {
+      component: 'CNavGroup',
+      name,
+      to,
+      ...(isChild ? {} : { icon: item?.icon || 'cil-menu' }),
+      items: item.children.filter(Boolean).map((child) => mapMenuItem(child, true)),
+    }
+  }
+
+  return {
+    component: 'CNavItem',
+    name,
+    to,
+    ...(isChild ? {} : { icon: item?.icon || 'cil-menu' }),
+  }
+}
+
+export const useMenuStore = defineStore('menu', {
+  state: () => ({
+    isMaster: false,
+    dynamicMenus: [],
+    loading: false,
+    error: null,
+    initialized: false,
+  }),
+
+  getters: {
+    mappedMenus(state) {
+      return state.dynamicMenus.map((item) => mapMenuItem(item))
+    },
+  },
+
+  actions: {
+    async fetchMenus({ force = false } = {}) {
+      if (this.initialized && !force) {
+        return this.dynamicMenus
+      }
+
+      if (pendingMenuRequest) {
+        return pendingMenuRequest
+      }
+
+      this.loading = true
+      this.error = null
+
+      pendingMenuRequest = (async () => {
+        try {
+          const response = await getMyMenus()
+          const payload = response?.data || {}
+
+          this.isMaster = !!payload?.is_master
+          this.dynamicMenus = Array.isArray(payload?.menus) ? payload.menus : []
+          this.initialized = true
+
+          return this.dynamicMenus
+        } catch (error) {
+          this.error = extractErrorMessage(error)
+          this.initialized = false
+          this.dynamicMenus = []
+          throw error
+        } finally {
+          this.loading = false
+          pendingMenuRequest = null
+        }
+      })()
+
+      return pendingMenuRequest
+    },
+
+    reset() {
+      this.isMaster = false
+      this.dynamicMenus = []
+      this.loading = false
+      this.error = null
+      this.initialized = false
+      pendingMenuRequest = null
+    },
+  },
+})
diff --git a/src/stores/menuGroup.js b/src/stores/menuGroup.js
new file mode 100644
index 00000000..ddafc35c
--- /dev/null
+++ b/src/stores/menuGroup.js
@@ -0,0 +1,24 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useMenuGroupStore = defineStore('menuGroup', () => {
+  const menuGroups = ref([])
+
+  function setMenuGroups(data) {
+    menuGroups.value = data
+  }
+
+  function addMenuGroup(item) {
+    menuGroups.value.push({ ...item })
+  }
+
+  function updateMenuGroup(index, item) {
+    menuGroups.value[index] = { ...item }
+  }
+
+  function deleteMenuGroup(index) {
+    menuGroups.value.splice(index, 1)
+  }
+
+  return { menuGroups, setMenuGroups, addMenuGroup, updateMenuGroup, deleteMenuGroup }
+})
diff --git a/src/styles/_base-responsive-data-view.scss b/src/styles/_base-responsive-data-view.scss
new file mode 100644
index 00000000..78bbebbd
--- /dev/null
+++ b/src/styles/_base-responsive-data-view.scss
@@ -0,0 +1,517 @@
+/* Reusable UI/UX style for BaseResponsiveDataView
+   Prefix khusus: brdvx- (agar tidak bentrok dengan style existing) */
+
+.brdvx-page-row {
+  --cui-gutter-x: 0;
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.brdvx-page-column {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.brdvx-page-container {
+  margin: 0;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.brdvx-page-header {
+  margin-bottom: 0.85rem;
+}
+
+.brdvx-root {
+  --brdvx-font-size: 0.9rem;
+  --brdvx-font-size-label: 0.78rem;
+  --brdvx-font-size-heading: 0.84rem;
+  --brdvx-font-weight-normal: 400;
+  --brdvx-font-weight-medium: 500;
+  --brdvx-font-weight-heading: 600;
+  width: 100%;
+  font-size: var(--brdvx-font-size);
+}
+
+.brdvx-loading-state {
+  display: flex;
+  min-height: 220px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  color: var(--cui-secondary-color);
+}
+
+.brdvx-loading-text {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 400;
+}
+
+.brdvx-inline-loading {
+  display: flex;
+  min-height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.55rem;
+  margin-bottom: 0.5rem;
+  color: var(--cui-secondary-color);
+  font-size: 0.875rem;
+  font-weight: 400;
+}
+
+.brdvx-root .data-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.9rem;
+  flex-wrap: wrap;
+}
+
+.brdvx-root .toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.brdvx-root .per-page-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.brdvx-root .toolbar-label {
+  font-size: 0.875rem;
+  font-weight: var(--brdvx-font-weight-normal);
+  color: var(--cui-secondary-color);
+  margin: 0;
+}
+
+.brdvx-root .per-page-select {
+  min-width: 80px;
+}
+
+.brdvx-root .mode-switch {
+  display: inline-flex;
+  gap: 0.35rem;
+}
+
+.brdvx-root .toolbar-search-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 220px;
+  width: min(420px, 100%);
+}
+
+.brdvx-root .toolbar-search {
+  flex: 1;
+}
+
+.brdvx-root .view-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.brdvx-root .cards-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.brdvx-root .cards-grid.mobile {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.brdvx-root .mobile-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border-radius: 0.75rem;
+  border: 1px solid var(--cui-border-color);
+  box-shadow: 0 2px 12px rgba(33, 37, 41, 0.06);
+  overflow: hidden;
+}
+
+.brdvx-root .mobile-image-header {
+  width: 100%;
+  max-height: 160px;
+  aspect-ratio: 10 / 7;
+  background: #f1f3f5;
+}
+
+.brdvx-root .mobile-image {
+  width: 100%;
+  max-height: 160px;
+  object-fit: cover;
+}
+
+.brdvx-root .mobile-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.55rem 0.75rem;
+  border-bottom: 1px solid var(--cui-border-color);
+  background: var(--cui-tertiary-bg);
+}
+
+.brdvx-root .mobile-card-title {
+  font-weight: var(--brdvx-font-weight-heading);
+  font-size: 0.95rem;
+  color: var(--cui-body-color);
+}
+
+.brdvx-root .mobile-card-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  padding: 0.65rem 0.75rem;
+}
+
+.brdvx-root .mobile-fields {
+  display: grid;
+  gap: 0.38rem;
+}
+
+.brdvx-root .mobile-field {
+  display: grid;
+  grid-template-columns: minmax(70px, 1fr) minmax(0, 1fr);
+  align-items: start;
+  gap: 0.45rem;
+  padding-bottom: 0.3rem;
+  border-bottom: 1px dashed var(--cui-border-color);
+}
+
+.brdvx-root .mobile-field:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.brdvx-root .field-label {
+  font-size: var(--brdvx-font-size-label);
+  color: var(--cui-secondary-color);
+  text-transform: uppercase;
+  letter-spacing: 0.25px;
+  font-weight: var(--brdvx-font-weight-heading);
+}
+
+.brdvx-root .field-value {
+  font-size: var(--brdvx-font-size);
+  color: var(--cui-body-color);
+  font-weight: var(--brdvx-font-weight-normal);
+  word-break: break-word;
+  text-align: right;
+}
+
+.brdvx-root .mobile-actions {
+  margin-top: auto;
+  padding-top: 0.55rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.3rem;
+  flex-wrap: wrap;
+}
+
+.brdvx-root .table-list-wrapper {
+  border-radius: 0.75rem;
+  overflow: hidden;
+  // background: #fff;
+  // border: 1px solid #e9ecef;
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.25rem;
+}
+
+.brdvx-root .table-list-head {
+  display: grid;
+  width: 100%;
+  gap: 0.55rem 0.75rem;
+  padding: 0 0.65rem 0.35rem;
+  border-bottom: 1px solid var(--cui-border-color);
+  margin-bottom: 0.2rem;
+  align-items: end;
+}
+
+.brdvx-root .table-list-head-cell {
+  font-size: var(--brdvx-font-size-heading);
+  color: var(--cui-secondary-color);
+  font-weight: var(--brdvx-font-weight-heading);
+  text-transform: uppercase;
+}
+
+.brdvx-root .table-list-card {
+  border: 1px solid var(--cui-border-color);
+  border-radius: 0.65rem;
+}
+
+.brdvx-root .table-list-card-body {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.65rem;
+}
+
+.brdvx-root .table-list-main {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.55rem 0.75rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.brdvx-root .table-list-main.with-image {
+  grid-template-columns: 15% 85%;
+  align-items: start;
+  gap: 0.65rem;
+}
+
+.brdvx-root .table-list-image-col {
+  min-width: 0;
+}
+
+.brdvx-root .table-list-mobile-image {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 0.55rem;
+  object-fit: cover;
+  border: 1px solid var(--cui-border-color);
+}
+
+.brdvx-root .table-list-data-col {
+  display: grid;
+  width: 100%;
+  gap: 0.55rem 0.75rem;
+  align-items: center;
+}
+
+.brdvx-root .desktop-row-grid {
+  grid-template-columns: repeat(var(--brdvx-desktop-cols, 6), minmax(120px, 1fr));
+}
+
+.brdvx-root .table-list-cell {
+  display: grid;
+  gap: 0.2rem;
+  min-width: 0;
+}
+
+.brdvx-root .table-list-value {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  font-size: var(--brdvx-font-size);
+  color: var(--cui-body-color);
+  font-weight: var(--brdvx-font-weight-normal);
+  text-align: left;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.brdvx-sort-button {
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.35rem;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  text-transform: uppercase;
+  background: transparent;
+  border: 0;
+}
+
+.brdvx-sort-button:hover {
+  color: var(--cui-primary);
+}
+
+.brdvx-root .row-pair {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.brdvx-root .row-left {
+  color: var(--cui-secondary-color);
+  font-weight: var(--brdvx-font-weight-heading);
+  font-size: var(--brdvx-font-size-label);
+  text-align: left;
+}
+
+.brdvx-root .row-left.no-label {
+  text-transform: none;
+}
+
+.brdvx-root .row-right {
+  flex: 1 1 100%;
+  text-align: left;
+  min-width: 0;
+  max-width: 100%;
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.brdvx-root .row-right.no-label {
+  width: 100%;
+}
+
+.brdvx-root .table-list-right {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.35rem;
+  margin-left: auto;
+  width: var(--brdvx-action-col-width, 230px);
+  min-width: var(--brdvx-action-col-width, 230px);
+}
+
+.brdvx-root .table-avatar {
+  width: 55px;
+  height: 55px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.brdvx-root .table-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.brdvx-root .table-list-hidden {
+  border-top: 1px dashed var(--cui-border-color);
+  padding: 0.55rem 0.65rem 0.65rem;
+  display: grid;
+  gap: 0.35rem;
+}
+
+.brdvx-root .hidden-item {
+  display: grid;
+  grid-template-columns: minmax(80px, 1fr) minmax(0, 1fr);
+  gap: 0.5rem;
+}
+
+.brdvx-root .hidden-label {
+  font-size: var(--brdvx-font-size-label);
+  color: var(--cui-secondary-color);
+  font-weight: var(--brdvx-font-weight-heading);
+}
+
+.brdvx-root .hidden-value {
+  font-size: var(--brdvx-font-size);
+  color: var(--cui-body-color);
+  font-weight: var(--brdvx-font-weight-normal);
+}
+
+.brdvx-root .pagination-center {
+  margin-top: 0.9rem;
+  display: flex;
+  justify-content: center;
+}
+
+@media (max-width: 1200px) {
+  .brdvx-root .cards-grid {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 992px) {
+  .brdvx-root .cards-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .brdvx-root .data-toolbar {
+    justify-content: center;
+  }
+
+  .brdvx-root .toolbar-left {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .brdvx-root .toolbar-search {
+    width: 100%;
+    max-width: 360px;
+  }
+
+  .brdvx-root .table-list-card-body {
+    flex-direction: column;
+  }
+
+  .brdvx-root .table-list-main {
+    width: 100%;
+  }
+
+  .brdvx-root .table-list-data-col {
+    grid-template-columns: 1fr;
+  }
+
+  .brdvx-root .table-list-data-col.mobile-split {
+    grid-template-columns: 1fr 1fr;
+    gap: 0.6rem;
+  }
+
+  .brdvx-root .mobile-col {
+    display: grid;
+    gap: 0.35rem;
+  }
+
+  .brdvx-root .row-left {
+    text-align: left;
+  }
+
+  .brdvx-root .row-right {
+    text-align: left;
+  }
+
+  .brdvx-root .table-list-right {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .brdvx-root .table-actions {
+    overflow-x: auto;
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 420px) {
+  .brdvx-root .cards-grid.mobile {
+    gap: 0.5rem;
+  }
+
+  .brdvx-root .mobile-card {
+    border-radius: 0.65rem;
+  }
+
+  .brdvx-root .mobile-card-body {
+    padding: 0.55rem 0.6rem;
+  }
+
+  .brdvx-root .field-label {
+    font-size: 0.74rem;
+  }
+
+  .brdvx-root .field-value {
+    font-size: 0.85rem;
+  }
+}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index c30adb7b..ac994d69 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -7,6 +7,7 @@
 );
 @use '@coreui/chartjs/scss/coreui-chartjs';
 @use 'vendors/simplebar';
+@use 'base-responsive-data-view';
 
 body {
   background-color: var(--cui-tertiary-bg);
@@ -202,3 +203,121 @@ body {
 
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
+
+// Tambahkan class ini pada <img> atau pembungkus gambar agar dapat diklik dan diperbesar.
+.image-previewable {
+  cursor: zoom-in;
+}
+
+.image-previewable img {
+  transition: transform 0.2s ease, filter 0.2s ease;
+}
+
+.image-previewable:hover img {
+  filter: brightness(0.92);
+  transform: scale(1.025);
+}
+
+body.image-preview-open {
+  overflow: hidden;
+}
+
+.image-preview-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 11000;
+  display: grid;
+  place-items: center;
+  padding: clamp(1rem, 4vw, 3rem);
+  background: rgba(7, 10, 16, 0.88);
+  backdrop-filter: blur(8px);
+}
+
+.image-preview-modal-image {
+  display: block;
+  max-width: min(92vw, 1100px);
+  max-height: 88vh;
+  object-fit: contain;
+  border-radius: 1rem;
+  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45);
+}
+
+.image-preview-close {
+  position: fixed;
+  top: 1.25rem;
+  right: 1.25rem;
+  z-index: 1;
+  display: grid;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  border-radius: 50%;
+  place-items: center;
+}
+
+.image-preview-fade-enter-active,
+.image-preview-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.image-preview-fade-enter-from,
+.image-preview-fade-leave-to {
+  opacity: 0;
+}
+
+.header-profile-avatar {
+  font-weight: 700;
+}
+
+.profile-photo-avatar {
+  width: 112px;
+  height: 112px;
+  margin-bottom: 1rem;
+  overflow: hidden;
+  font-size: 2rem;
+  border: 4px solid var(--cui-body-bg);
+  box-shadow: 0 0 0 2px rgba(var(--cui-primary-rgb), 0.25), 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
+}
+
+.profile-photo-uploader {
+  padding: 1.15rem;
+  background: rgba(var(--cui-primary-rgb), 0.045);
+  border: 1.5px dashed rgba(var(--cui-primary-rgb), 0.42);
+  border-radius: 1rem;
+  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
+}
+
+.profile-photo-uploader.is-dragging {
+  background: rgba(var(--cui-primary-rgb), 0.12);
+  border-color: var(--cui-primary);
+  transform: translateY(-2px);
+}
+
+.profile-photo-uploader-icon {
+  display: grid;
+  width: 3rem;
+  height: 3rem;
+  margin: 0 auto 0.7rem;
+  color: var(--cui-primary);
+  background: rgba(var(--cui-primary-rgb), 0.12);
+  border-radius: 50%;
+  place-items: center;
+}
+
+.profile-photo-file {
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  font-size: 0.8rem;
+}
+
+.profile-photo-file span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/src/utils/session.js b/src/utils/session.js
index 1b076023..0d60c37c 100644
--- a/src/utils/session.js
+++ b/src/utils/session.js
@@ -1,4 +1,5 @@
 const TOKEN_KEY = 'UU7HVn7ECHe7MvqMTeTeEpoFdBA2wc0NHQX29WyG91fc6982'
+const USER_KEY = 'manja_authenticated_user'
 
 export function setToken(token) {
   sessionStorage.setItem(TOKEN_KEY, token)
@@ -16,6 +17,29 @@ export function hasToken() {
   return !!sessionStorage.getItem(TOKEN_KEY)
 }
 
+export function setAuthenticatedUser(user) {
+  if (user) {
+    sessionStorage.setItem(USER_KEY, JSON.stringify(user))
+  }
+}
+
+export function getAuthenticatedUser() {
+  const value = sessionStorage.getItem(USER_KEY)
+
+  if (!value) return null
+
+  try {
+    return JSON.parse(value)
+  } catch {
+    sessionStorage.removeItem(USER_KEY)
+    return null
+  }
+}
+
+export function removeAuthenticatedUser() {
+  sessionStorage.removeItem(USER_KEY)
+}
+
 export function clearSession() {
   sessionStorage.clear()
 }
diff --git a/src/utils/swal.js b/src/utils/swal.js
index 1b9554c3..78fc702a 100644
--- a/src/utils/swal.js
+++ b/src/utils/swal.js
@@ -15,23 +15,12 @@ export function showConfirm(title = 'Konfirmasi', text = 'Apakah Anda yakin?') {
 
 export function showSuccess(message = 'Data berhasil disimpan') {
   Swal.fire({
+    position: 'top-end',
     icon: 'success',
-    title: 'Berhasil',
+    // title: 'Berhasil',
     text: message,
     showConfirmButton: false,
     timer: 2000,
-    timerProgressBar: true,
-    theme: 'auto',
-  })
-}
-
-export function showSuccessr() {
-  Swal.fire({
-    position: 'top-end',
-    icon: 'success',
-    title: 'Data Berhasil Di Simpan',
-    showConfirmButton: false,
-    timer: 1500,
     theme: 'auto',
     toast: true,
     width: '350px',
@@ -42,12 +31,20 @@ export function showSuccessr() {
   })
 }
 
-export function showError() {
+export function showError(message = 'Terjadi Kesalahan') {
   Swal.fire({
+    position: 'top-end',
     icon: 'error',
-    title: 'Gagal',
-    text: 'Terjadi Kesalahan',
-    confirmButtonText: 'Tutup',
+    // title: 'Gagal',
+    text: message,
+    showConfirmButton: 'Tutup',
+    // timer: 2000,
     theme: 'auto',
+    toast: true,
+    width: '350px',
+    padding: '10px 18px',
+    customClass: {
+      title: 'swal-title-bold',
+    },
   })
 }
diff --git a/src/utils/verificationSession.js b/src/utils/verificationSession.js
new file mode 100644
index 00000000..34965698
--- /dev/null
+++ b/src/utils/verificationSession.js
@@ -0,0 +1,21 @@
+const VERIFICATION_SESSION_KEY = 'manja_verification_context'
+
+export function setVerificationContext(payload) {
+  sessionStorage.setItem(VERIFICATION_SESSION_KEY, JSON.stringify(payload))
+}
+
+export function getVerificationContext() {
+  const raw = sessionStorage.getItem(VERIFICATION_SESSION_KEY)
+  if (!raw) return null
+
+  try {
+    return JSON.parse(raw)
+  } catch (error) {
+    console.error('Failed to parse verification session context:', error)
+    return null
+  }
+}
+
+export function clearVerificationContext() {
+  sessionStorage.removeItem(VERIFICATION_SESSION_KEY)
+}
diff --git a/src/views/group-menus/GroupMenuPermissions.vue b/src/views/group-menus/GroupMenuPermissions.vue
new file mode 100644
index 00000000..cca0cbee
--- /dev/null
+++ b/src/views/group-menus/GroupMenuPermissions.vue
@@ -0,0 +1,353 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import {
+  getMenuGroupAvailableById,
+  getMenuGroupById,
+  syncMenuGroupMenus,
+} from '@/services/menuGroupService'
+import { showError, showSuccess } from '@/utils/swal.js'
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+
+const loading = ref(true)
+const saving = ref(false)
+const menuGroup = ref(null)
+const menuPermissions = ref([])
+
+const permissionKeys = [
+  'can_view',
+  'can_create',
+  'can_update',
+  'can_delete',
+  'can_approve',
+  'can_export',
+]
+const permissionLabels = {
+  can_view: 'View',
+  can_create: 'Create',
+  can_update: 'Update',
+  can_delete: 'Delete',
+  can_approve: 'Approve',
+  can_export: 'Export',
+}
+
+const isMasterAdmin = computed(
+  () =>
+    authStore.user?.is_master === true ||
+    authStore.user?.access_level === 'master_admin',
+)
+const canManageGroup = computed(
+  () => !!menuGroup.value && (isMasterAdmin.value || !menuGroup.value.is_system),
+)
+
+const menuSections = computed(() => {
+  const childrenByParent = new Map()
+
+  menuPermissions.value.forEach((menu) => {
+    const parentId = menu.parent_id ?? null
+    if (!childrenByParent.has(parentId)) childrenByParent.set(parentId, [])
+    childrenByParent.get(parentId).push(menu)
+  })
+
+  const flattenChildren = (parentId, depth = 1) =>
+    (childrenByParent.get(parentId) || []).flatMap((menu) => [
+      Object.assign(menu, { depth }),
+      ...flattenChildren(menu.menu_id, depth + 1),
+    ])
+
+  return (childrenByParent.get(null) || []).map((root) => ({
+    root,
+    descendants: flattenChildren(root.menu_id),
+  }))
+})
+
+function normalizeMenus(rawMenus) {
+  const accessibleMenus = isMasterAdmin.value
+    ? rawMenus
+    : rawMenus.filter((menu) =>
+        permissionKeys.some((key) => menu.available_permissions?.[key] === true),
+      )
+  const accessibleIds = new Set(accessibleMenus.map((menu) => menu.menu_id))
+  const parentIds = new Set(
+    accessibleMenus.map((menu) => menu.parent_id).filter((id) => accessibleIds.has(id)),
+  )
+
+  return accessibleMenus.map((menu) => {
+    const permissions = menu.permissions || {}
+    const hasChildren = parentIds.has(menu.menu_id)
+    const availablePermissions = permissionKeys.reduce((result, key) => {
+      result[key] = menu.available_permissions?.[key] !== false
+      return result
+    }, {})
+
+    return {
+      menu_id: menu.menu_id,
+      parent_id: accessibleIds.has(menu.parent_id) ? menu.parent_id : null,
+      has_children: hasChildren,
+      name: menu.name || menu.label || `Menu #${menu.menu_id}`,
+      available_permissions: availablePermissions,
+      can_view: availablePermissions.can_view && !!permissions.can_view,
+      can_create: !hasChildren && availablePermissions.can_create && !!permissions.can_create,
+      can_update: !hasChildren && availablePermissions.can_update && !!permissions.can_update,
+      can_delete: !hasChildren && availablePermissions.can_delete && !!permissions.can_delete,
+      can_approve: !hasChildren && availablePermissions.can_approve && !!permissions.can_approve,
+      can_export: !hasChildren && availablePermissions.can_export && !!permissions.can_export,
+    }
+  })
+}
+
+async function loadData() {
+  loading.value = true
+  try {
+    const [groupResponse, menuResponse] = await Promise.all([
+      getMenuGroupById(route.params.id),
+      getMenuGroupAvailableById(route.params.id),
+    ])
+
+    menuGroup.value = groupResponse?.data || null
+    const rawMenus = Array.isArray(menuResponse?.data?.menus) ? menuResponse.data.menus : []
+    menuPermissions.value = normalizeMenus(rawMenus)
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal memuat detail menu group.')
+    router.replace('/group-menus')
+  } finally {
+    loading.value = false
+  }
+}
+
+function availablePermissionKeys(menu) {
+  const keys = menu.has_children ? ['can_view'] : permissionKeys
+  return keys.filter((key) => menu.available_permissions?.[key])
+}
+
+function isMenuChecked(menu) {
+  const keys = availablePermissionKeys(menu)
+  return keys.length > 0 && keys.every((key) => menu[key])
+}
+
+function toggleMenu(menu, checked) {
+  availablePermissionKeys(menu).forEach((key) => {
+    menu[key] = checked
+  })
+}
+
+async function savePermissions() {
+  if (!canManageGroup.value || !menuPermissions.value.length) return
+
+  saving.value = true
+  try {
+    await syncMenuGroupMenus(route.params.id, {
+      menus: menuPermissions.value.map((menu) => ({
+        menu_id: menu.menu_id,
+        can_view: !!menu.can_view,
+        can_create: menu.has_children ? false : !!menu.can_create,
+        can_update: menu.has_children ? false : !!menu.can_update,
+        can_delete: menu.has_children ? false : !!menu.can_delete,
+        can_approve: menu.has_children ? false : !!menu.can_approve,
+        can_export: menu.has_children ? false : !!menu.can_export,
+      })),
+    })
+    showSuccess('Permission menu group berhasil disimpan.')
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal menyimpan permission menu group.')
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(loadData)
+</script>
+
+<template>
+  <div class="container-fluid px-2">
+    <div class="permissions-header">
+      <div>
+        <!-- <CButton color="secondary" variant="ghost" size="sm" class="mb-1" @click="router.push('/group-menus')">
+          &larr; Kembali
+        </CButton> -->
+        <h5 class="mb-1 fw-semibold">Permission Menu Group</h5>
+        <div class="small text-body-secondary">
+          {{ menuGroup?.name || 'Memuat menu group...' }}
+          <span v-if="menuGroup?.tenant?.tenant_name"> · {{ menuGroup.tenant.tenant_name }}</span>
+        </div>
+      </div>
+      <CButton
+        v-if="canManageGroup"
+        color="primary"
+        size="sm"
+        :disabled="loading || saving || !menuPermissions.length"
+        @click="savePermissions"
+      >
+        {{ saving ? 'Menyimpan...' : 'Simpan Permission' }}
+      </CButton>
+    </div>
+
+    <div v-if="loading" class="loading-state">
+      <CSpinner color="primary" size="sm" />
+      <span>Memuat data menu...</span>
+    </div>
+
+    <CAlert v-else-if="!canManageGroup" color="warning">
+      Menu group sistem hanya dapat diubah oleh Master Admin.
+    </CAlert>
+
+    <CRow v-else-if="menuSections.length" class="g-2">
+      <CCol v-for="section in menuSections" :key="section.root.menu_id" :xs="6" :md="4">
+        <CCard class="menu-section-card">
+          <CCardHeader class="menu-section-header">
+            <CFormCheck
+              :model-value="isMenuChecked(section.root)"
+              @change="toggleMenu(section.root, $event.target.checked)"
+            />
+            <span>{{ section.root.name }}</span>
+          </CCardHeader>
+          <CCardBody class="p-0">
+            <div v-if="!section.descendants.length" class="root-permission-list">
+              <CFormCheck
+                v-for="key in availablePermissionKeys(section.root)"
+                :key="key"
+                v-model="section.root[key]"
+                :label="permissionLabels[key]"
+              />
+            </div>
+            <div
+              v-for="menu in section.descendants"
+              :key="menu.menu_id"
+              class="menu-permission-item"
+              :style="{ '--menu-depth': menu.depth }"
+            >
+              <div class="menu-name-row">
+                <span class="tree-connector" aria-hidden="true"></span>
+                <CFormCheck
+                  :model-value="isMenuChecked(menu)"
+                  @change="toggleMenu(menu, $event.target.checked)"
+                />
+                <span class="menu-name">{{ menu.name }}</span>
+              </div>
+              <div class="permission-list">
+                <CFormCheck
+                  v-for="key in availablePermissionKeys(menu)"
+                  :key="key"
+                  v-model="menu[key]"
+                  :label="permissionLabels[key]"
+                />
+              </div>
+            </div>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+
+    <div v-else class="empty-state">Data menu tidak tersedia.</div>
+  </div>
+</template>
+
+<style scoped>
+.permissions-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+.loading-state,
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.6rem;
+  min-height: 10rem;
+  color: var(--cui-secondary-color);
+}
+
+.menu-section-card {
+  height: 100%;
+  overflow: hidden;
+}
+
+.menu-section-header {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-height: 2.65rem;
+  padding: 0.55rem 0.75rem;
+  font-size: 0.925rem;
+  font-weight: 600;
+}
+
+.menu-permission-item {
+  padding: 0.55rem 0.7rem 0.55rem calc(0.7rem + (var(--menu-depth) * 0.65rem));
+  border-top: 1px solid var(--cui-border-color);
+}
+
+.menu-name-row {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.tree-connector {
+  width: 0.65rem;
+  height: 0.65rem;
+  flex: 0 0 auto;
+  border-bottom: 1px solid var(--cui-border-color);
+  border-left: 1px solid var(--cui-border-color);
+}
+
+.menu-name {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.permission-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 0.85rem;
+  padding: 0.35rem 0 0 2rem;
+  font-size: 0.8rem;
+}
+
+.root-permission-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.3rem 0.65rem;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.8rem;
+}
+
+.root-permission-list :deep(.form-check) {
+  margin-bottom: 0;
+}
+
+.permission-list :deep(.form-check) {
+  min-width: 4.7rem;
+  margin-bottom: 0;
+}
+
+@media (max-width: 575.98px) {
+  .permissions-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .permissions-header > button {
+    width: 100%;
+  }
+
+  .root-permission-list {
+    grid-template-columns: 1fr;
+  }
+
+  .permission-list {
+    padding-left: 1.25rem;
+  }
+}
+</style>
diff --git a/src/views/group-menus/GroupMenus.vue b/src/views/group-menus/GroupMenus.vue
new file mode 100644
index 00000000..2f0ab9ed
--- /dev/null
+++ b/src/views/group-menus/GroupMenus.vue
@@ -0,0 +1,433 @@
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import BaseResponsiveDataView from '@/components/base/BaseResponsiveDataView.vue'
+import { useMenuGroupStore } from '@/stores/menuGroup'
+import { useAuthStore } from '@/stores/auth'
+import {
+  getMenuGroups,
+  createMenuGroup,
+  getMenuGroupById,
+  updateMenuGroup,
+  deleteMenuGroup,
+} from '@/services/menuGroupService'
+import { formatTanggal } from '@/utils/tglindo.js'
+import { showConfirm, showSuccess, showError } from '@/utils/swal.js'
+import { getTenants } from '@/services/tenantService'
+
+const store = useMenuGroupStore()
+const authStore = useAuthStore()
+const router = useRouter()
+const loading = ref(true)
+const loadedOnce = ref(false)
+const saving = ref(false)
+const pagination = ref({ current_page: 1, last_page: 1, per_page: 10, total: 0 })
+const currentQuery = ref({ page: 1, per_page: 10, sort_by: 'id', sort_direction: 'desc' })
+
+const modal = ref(false)
+const detailModal = ref(false)
+const isEdit = ref(false)
+const editingIndex = ref(-1)
+const deleteIndex = ref(-1)
+const tenantOptions = ref([])
+const tenantOptionsLoaded = ref(false)
+
+const form = reactive({
+  tenant_id: '',
+  name: '',
+  description: '',
+  is_active: true,
+})
+
+const detailItem = ref(null)
+
+function emptyForm() {
+  return {
+    tenant_id: '',
+    name: '',
+    description: '',
+    is_active: true,
+  }
+}
+
+function responseRows(response) {
+  if (Array.isArray(response?.data?.data)) return response.data.data
+  if (Array.isArray(response?.data)) return response.data
+  return []
+}
+
+async function loadTenantOptions() {
+  if (!isMasterAdmin.value || tenantOptionsLoaded.value) return
+  try {
+    const response = await getTenants({
+      per_page: 100,
+      sort_by: 'tenant_name',
+      sort_direction: 'asc',
+    })
+    tenantOptions.value = responseRows(response)
+    tenantOptionsLoaded.value = true
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal memuat pilihan tenant.')
+  }
+}
+
+async function fetchAllData(params = currentQuery.value) {
+  currentQuery.value = { ...currentQuery.value, ...params }
+  params = currentQuery.value
+  loading.value = true
+  try {
+    const res = await getMenuGroups(params)
+    const rows = Array.isArray(res?.data?.data)
+      ? res.data.data
+      : Array.isArray(res?.data)
+        ? res.data
+        : []
+    store.setMenuGroups(rows)
+    const meta = res?.data && !Array.isArray(res.data) ? res.data : {}
+    pagination.value = {
+      current_page: meta.current_page || params.page || 1,
+      last_page: meta.last_page || 1,
+      per_page: meta.per_page || params.per_page || 10,
+      total: meta.total || rows.length,
+    }
+  } catch (err) {
+    showError(err?.response?.data?.message || 'Gagal memuat menu groups: ' + err.message)
+  } finally {
+    loading.value = false
+    loadedOnce.value = true
+  }
+}
+
+onMounted(() => {
+  fetchAllData()
+})
+
+async function openAddModal() {
+  isEdit.value = false
+  editingIndex.value = -1
+  Object.assign(form, emptyForm())
+  await loadTenantOptions()
+  modal.value = true
+}
+
+async function openEditModal(item) {
+  if (!canManageGroup(item)) {
+    showError('Menu group sistem hanya dapat diubah oleh Master Admin.')
+    return
+  }
+
+  const idx = store.menuGroups.findIndex((m) => m.id === item.id)
+  if (idx === -1) return
+  await loadTenantOptions()
+  isEdit.value = true
+  editingIndex.value = idx
+  Object.assign(form, {
+    tenant_id: item.tenant_id ? String(item.tenant_id) : '',
+    name: item.name || '',
+    description: item.description || '',
+    is_active: !!item.is_active,
+  })
+  modal.value = true
+}
+
+async function openDetail(item) {
+  try {
+    const res = await getMenuGroupById(item.id)
+    const payload = Array.isArray(res?.data) ? res.data[0] : res?.data
+    detailItem.value = payload || null
+    detailModal.value = true
+  } catch (err) {
+    showError(err?.response?.data?.message || 'Gagal memuat detail: ' + err.message)
+  }
+}
+
+async function openDeleteModal(item) {
+  if (!canManageGroup(item)) {
+    showError('Menu group sistem hanya dapat dihapus oleh Master Admin.')
+    return
+  }
+
+  const idx = store.menuGroups.findIndex((m) => m.id === item.id)
+  if (idx === -1) return
+
+  const result = await showConfirm(
+    'Konfirmasi Hapus',
+    `Apakah Anda yakin ingin menghapus group menu "${item.name}"?`,
+  )
+  if (!result.isConfirmed) return
+
+  deleteIndex.value = idx
+  await removeItem(item.id)
+}
+
+async function createItem() {
+  saving.value = true
+  try {
+    const body = {
+      name: form.name,
+      description: form.description,
+      is_active: !!form.is_active,
+    }
+    if (isMasterAdmin.value) {
+      body.tenant_id = form.tenant_id ? Number(form.tenant_id) : null
+    }
+
+    const res = await createMenuGroup(body)
+    const created = Array.isArray(res?.data) ? res.data[0] : res?.data
+    store.addMenuGroup(created || body)
+
+    modal.value = false
+    showSuccess('Data berhasil disimpan')
+    await fetchAllData()
+  } catch (err) {
+    showError(err?.response?.data?.message || 'Gagal menyimpan data: ' + err.message)
+  } finally {
+    saving.value = false
+  }
+}
+
+async function updateItem(id) {
+  saving.value = true
+  try {
+    const body = {
+      name: form.name,
+      description: form.description,
+      is_active: !!form.is_active,
+    }
+    if (isMasterAdmin.value) {
+      body.tenant_id = form.tenant_id ? Number(form.tenant_id) : null
+    }
+
+    const res = await updateMenuGroup(id, body)
+    const updated = Array.isArray(res?.data) ? res.data[0] : res?.data
+    store.updateMenuGroup(editingIndex.value, updated || { id, ...body })
+
+    modal.value = false
+    showSuccess('Data berhasil diupdate')
+    await fetchAllData()
+  } catch (err) {
+    showError(err?.response?.data?.message || 'Gagal mengupdate data: ' + err.message)
+  } finally {
+    saving.value = false
+  }
+}
+
+async function removeItem(id) {
+  try {
+    await deleteMenuGroup(id)
+    store.deleteMenuGroup(deleteIndex.value)
+    showSuccess('Data berhasil dihapus')
+    await fetchAllData()
+  } catch (err) {
+    showError(err?.response?.data?.message || 'Gagal menghapus data: ' + err.message)
+  } finally {
+    deleteIndex.value = -1
+  }
+}
+
+const columns = [
+  { key: 'name', label: 'Nama' },
+  { key: 'description_label', label: 'Deskripsi', sortKey: 'description' },
+  { key: 'scope_label', label: 'Scope', sortable: false },
+  { key: 'type_label', label: 'Tipe', sortKey: 'is_system' },
+  { key: 'status_label', label: 'Status', sortKey: 'is_active' },
+]
+
+const tableActions = [
+  { key: 'detail', label: 'Detail', color: 'primary' },
+  { key: 'detail-menu', label: 'Detail Menu', color: 'secondary' },
+  { key: 'edit', label: 'Edit', color: 'success' },
+  { key: 'delete', label: 'Hapus', color: 'danger' },
+]
+
+const menuGroupItems = computed(() =>
+  store.menuGroups.map((item) => ({
+    ...item,
+    description_label: item.description || '-',
+    scope_label:
+      item.tenant?.tenant_name || (item.tenant_id ? `Tenant #${item.tenant_id}` : 'Global'),
+    type_label: item.is_system ? 'Sistem' : 'Tenant',
+    status_label: item.is_active ? 'Aktif' : 'Nonaktif',
+  })),
+)
+
+const isMasterAdmin = computed(
+  () => authStore.user?.is_master || authStore.user?.access_level === 'master_admin',
+)
+
+const activeTenant = computed(() => {
+  const memberships = authStore.user?.user_tenants || []
+  return memberships.find((row) => row.is_default)?.tenant || memberships[0]?.tenant || null
+})
+
+function canManageGroup(item) {
+  return !!item && (isMasterAdmin.value || !item.is_system)
+}
+
+function onActionClick({ action, item }) {
+  if (action === 'detail') openDetail(item)
+  if (action === 'detail-menu') router.push(`/group-menus/${item.id}/menus`)
+  if (action === 'edit') openEditModal(item)
+  if (action === 'delete') openDeleteModal(item)
+}
+
+async function saveItem() {
+  if (!form.name.trim()) {
+    showError('Nama group menu wajib diisi.')
+    return
+  }
+
+  if (isEdit.value && editingIndex.value >= 0) {
+    const item = store.menuGroups[editingIndex.value]
+    await updateItem(item.id)
+  } else {
+    await createItem()
+  }
+}
+</script>
+
+<template>
+  <CRow class="brdvx-page-row g-0 m-0">
+    <CCol :xs="12" class="brdvx-page-column p-0">
+      <div class="brdvx-page-container">
+        <div class="brdvx-page-header d-flex justify-content-between align-items-center flex-wrap gap-2">
+          <div>
+            <h5 class="mb-0 fw-semibold">Group Menus</h5>
+          </div>
+          <div class="d-flex gap-2">
+            <CButton color="primary" size="sm" variant="outline" :disabled="loading" @click="fetchAllData()">
+              {{ loading ? 'Loading...' : 'Refresh' }}
+            </CButton>
+            <CButton color="primary" size="sm" @click="openAddModal">+ Tambah Group Menu</CButton>
+          </div>
+        </div>
+
+        <div v-if="loading && !loadedOnce" class="brdvx-loading-state" role="status" aria-live="polite">
+          <CSpinner color="primary" />
+          <p class="brdvx-loading-text">Memuat data...</p>
+        </div>
+
+        <BaseResponsiveDataView
+          v-else
+          :columns="columns"
+          :items="menuGroupItems"
+          server-side
+          :pagination="pagination"
+          :loading="loading"
+          initial-sort-by="id"
+          initial-sort-direction="desc"
+          :actions="tableActions"
+          row-key="id"
+          @action-click="onActionClick"
+          @query-change="fetchAllData"
+        />
+      </div>
+    </CCol>
+  </CRow>
+
+  <CModal :visible="modal" @close="modal = false" alignment="center">
+    <CModalHeader dismiss @close="modal = false">
+      <CModalTitle>{{ isEdit ? 'Edit Group Menu' : 'Tambah Group Menu' }}</CModalTitle>
+    </CModalHeader>
+    <CModalBody>
+      <CForm>
+        <div v-if="isMasterAdmin" class="mb-3">
+          <CFormLabel>Scope Tenant</CFormLabel>
+          <CFormSelect v-model="form.tenant_id">
+            <option value="">Global / Sistem</option>
+            <option v-for="tenant in tenantOptions" :key="tenant.id" :value="String(tenant.id)">
+              {{ tenant.tenant_code }} — {{ tenant.tenant_name }}
+            </option>
+          </CFormSelect>
+          <div class="form-text">
+            Pilih Global untuk group sistem, atau tenant untuk group khusus tenant.
+          </div>
+        </div>
+        <div v-else class="alert alert-info py-2">
+          Group akan dibuat untuk tenant
+          <strong>{{ activeTenant?.tenant_name || 'aktif' }}</strong>.
+        </div>
+        <div class="mb-3">
+          <CFormLabel>Nama</CFormLabel>
+          <CFormInput v-model="form.name" placeholder="Contoh: Master Data" />
+        </div>
+        <div class="mb-3">
+          <CFormLabel>Deskripsi</CFormLabel>
+          <CFormTextarea
+            v-model="form.description"
+            rows="3"
+            placeholder="Deskripsi group menu (opsional)"
+          />
+        </div>
+        <div class="mb-3">
+          <CFormCheck v-model="form.is_active" label="Aktif" />
+        </div>
+      </CForm>
+    </CModalBody>
+    <CModalFooter>
+      <CButton color="secondary" @click="modal = false" :disabled="saving">Batal</CButton>
+      <CButton color="primary" @click="saveItem" :disabled="saving">
+        <span v-if="saving">Menyimpan...</span>
+        <span v-else>Simpan</span>
+      </CButton>
+    </CModalFooter>
+  </CModal>
+
+  <CModal :visible="detailModal" @close="detailModal = false" alignment="center">
+    <CModalHeader dismiss @close="detailModal = false">
+      <CModalTitle>Detail Group Menu</CModalTitle>
+    </CModalHeader>
+    <CModalBody>
+      <CTable bordered small v-if="detailItem">
+        <CTableBody>
+          <CTableRow>
+            <CTableHeaderCell style="width: 40%">ID</CTableHeaderCell>
+            <CTableDataCell>{{ detailItem.id }}</CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Nama</CTableHeaderCell>
+            <CTableDataCell>{{ detailItem.name }}</CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Deskripsi</CTableHeaderCell>
+            <CTableDataCell>{{ detailItem.description || '-' }}</CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Scope</CTableHeaderCell>
+            <CTableDataCell>
+              {{
+                detailItem.tenant?.tenant_name ||
+                (detailItem.tenant_id ? `Tenant #${detailItem.tenant_id}` : 'Global')
+              }}
+            </CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Tipe</CTableHeaderCell>
+            <CTableDataCell>{{ detailItem.is_system ? 'Sistem' : 'Tenant' }}</CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Status</CTableHeaderCell>
+            <CTableDataCell>
+              <CBadge :color="detailItem.is_active ? 'success' : 'secondary'">
+                {{ detailItem.is_active ? 'Aktif' : 'Nonaktif' }}
+              </CBadge>
+            </CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Created At</CTableHeaderCell>
+            <CTableDataCell>{{ formatTanggal(detailItem.created_at) }}</CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Updated At</CTableHeaderCell>
+            <CTableDataCell>{{ formatTanggal(detailItem.updated_at) }}</CTableDataCell>
+          </CTableRow>
+        </CTableBody>
+      </CTable>
+    </CModalBody>
+    <CModalFooter>
+      <CButton color="secondary" @click="detailModal = false">Tutup</CButton>
+    </CModalFooter>
+  </CModal>
+</template>
+
+
diff --git a/src/views/nas/NasResourceView.vue b/src/views/nas/NasResourceView.vue
new file mode 100644
index 00000000..db0dd6bb
--- /dev/null
+++ b/src/views/nas/NasResourceView.vue
@@ -0,0 +1,376 @@
+<script setup>
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import BaseResponsiveDataView from '@/components/base/BaseResponsiveDataView.vue'
+import { useAuthStore } from '@/stores/auth'
+import { getTenants } from '@/services/tenantService'
+import {
+  createNasResource,
+  deleteNasResource,
+  getNasResource,
+  getNasResources,
+  updateNasResource,
+} from '@/services/nasService'
+import { showConfirm, showError, showSuccess } from '@/utils/swal.js'
+
+const route = useRoute()
+const authStore = useAuthStore()
+const resource = computed(() => route.meta.nasResource)
+
+const configs = {
+  mikrotik: {
+    title: 'Mikrotik',
+    nameLabel: 'Nama Mikrotik',
+    columns: [
+      { key: 'name', label: 'Nama' },
+      { key: 'connection_type_label', label: 'Koneksi', sortKey: 'connection_type' },
+      { key: 'host', label: 'Host' },
+      { key: 'status_label', label: 'Status', sortKey: 'status' },
+    ],
+    fields: [
+      { key: 'host', label: 'Host / IP', required: true },
+      { key: 'api_port', label: 'API Port', type: 'number', show: (f) => f.connection_type === 'api' },
+      { key: 'api_username', label: 'API Username', show: (f) => f.connection_type === 'api' },
+      { key: 'api_password', label: 'API Password', type: 'password', secret: true, show: (f) => f.connection_type === 'api' },
+      { key: 'radius_auth_port', label: 'RADIUS Auth Port', type: 'number', show: (f) => f.connection_type === 'radius' },
+      { key: 'radius_accounting_port', label: 'RADIUS Accounting Port', type: 'number', show: (f) => f.connection_type === 'radius' },
+      { key: 'radius_secret', label: 'RADIUS Secret', type: 'password', secret: true, show: (f) => f.connection_type === 'radius' },
+      { key: 'timeout', label: 'Timeout (detik)', type: 'number' },
+    ],
+  },
+  'package-profile': {
+    title: 'Profile Paket',
+    nameLabel: 'Nama Paket',
+    columns: [
+      { key: 'name', label: 'Nama' },
+      { key: 'service_type_label', label: 'Layanan', sortKey: 'service_type' },
+      { key: 'speed_label', label: 'Kecepatan', sortable: false },
+      { key: 'price_label', label: 'Harga', sortable: false },
+      { key: 'status_label', label: 'Status', sortKey: 'status' },
+    ],
+    fields: [
+      { key: 'service_type', label: 'Tipe Layanan', type: 'select', options: [['ppp', 'PPP'], ['hotspot', 'Hotspot'], ['radius', 'RADIUS']] },
+      { key: 'external_profile_name', label: 'Nama Profile Eksternal' },
+      { key: 'download_kbps', label: 'Download (Kbps)', type: 'number' },
+      { key: 'upload_kbps', label: 'Upload (Kbps)', type: 'number' },
+      { key: 'local_address', label: 'Local Address' },
+      { key: 'remote_address_pool', label: 'Remote Address Pool' },
+      { key: 'session_timeout', label: 'Session Timeout (detik)', type: 'number' },
+      { key: 'idle_timeout', label: 'Idle Timeout (detik)', type: 'number' },
+      { key: 'shared_users', label: 'Shared Users', type: 'number' },
+      { key: 'price', label: 'Harga', type: 'number' },
+    ],
+  },
+  olt: {
+    title: 'OLT',
+    nameLabel: 'Nama OLT',
+    columns: [
+      { key: 'name', label: 'Nama' },
+      { key: 'vendor', label: 'Vendor' },
+      { key: 'host', label: 'Host' },
+      { key: 'snmp_version', label: 'SNMP' },
+      { key: 'status_label', label: 'Status', sortKey: 'status' },
+    ],
+    fields: [
+      { key: 'vendor', label: 'Vendor' },
+      { key: 'model', label: 'Model' },
+      { key: 'host', label: 'Host / IP', required: true },
+      { key: 'snmp_port', label: 'SNMP Port', type: 'number' },
+      { key: 'snmp_version', label: 'SNMP Version', type: 'select', options: [['v1', 'v1'], ['v2c', 'v2c'], ['v3', 'v3']] },
+      { key: 'community', label: 'Community', type: 'password', secret: true, show: (f) => f.snmp_version !== 'v3' },
+      { key: 'security_level', label: 'Security Level', type: 'select', options: [['noAuthNoPriv', 'noAuthNoPriv'], ['authNoPriv', 'authNoPriv'], ['authPriv', 'authPriv']], show: (f) => f.snmp_version === 'v3' },
+      { key: 'security_name', label: 'Security Name', show: (f) => f.snmp_version === 'v3' },
+      { key: 'auth_protocol', label: 'Auth Protocol', type: 'select', options: [['MD5', 'MD5'], ['SHA', 'SHA'], ['SHA256', 'SHA256'], ['SHA512', 'SHA512']], show: (f) => f.snmp_version === 'v3' && f.security_level !== 'noAuthNoPriv' },
+      { key: 'auth_password', label: 'Auth Password', type: 'password', secret: true, show: (f) => f.snmp_version === 'v3' && f.security_level !== 'noAuthNoPriv' },
+      { key: 'privacy_protocol', label: 'Privacy Protocol', type: 'select', options: [['DES', 'DES'], ['AES', 'AES'], ['AES256', 'AES256']], show: (f) => f.snmp_version === 'v3' && f.security_level === 'authPriv' },
+      { key: 'privacy_password', label: 'Privacy Password', type: 'password', secret: true, show: (f) => f.snmp_version === 'v3' && f.security_level === 'authPriv' },
+      { key: 'timeout', label: 'Timeout (detik)', type: 'number' },
+    ],
+  },
+  webfig: {
+    title: 'Webfig',
+    nameLabel: 'Nama Perangkat',
+    columns: [
+      { key: 'name', label: 'Nama' },
+      { key: 'device_type', label: 'Tipe' },
+      { key: 'url', label: 'URL' },
+      { key: 'status_label', label: 'Status', sortKey: 'status' },
+    ],
+    fields: [
+      { key: 'device_type', label: 'Tipe Perangkat' },
+      { key: 'url', label: 'URL Perangkat', type: 'url', required: true },
+      { key: 'username', label: 'Username' },
+      { key: 'password', label: 'Password', type: 'password', secret: true },
+    ],
+  },
+}
+
+const config = computed(() => configs[resource.value])
+const loading = ref(true)
+const loadedOnce = ref(false)
+const saving = ref(false)
+const items = ref([])
+const tenants = ref([])
+const modal = ref(false)
+const detailModal = ref(false)
+const editingId = ref(null)
+const detailItem = ref(null)
+const pagination = ref({ current_page: 1, last_page: 1, per_page: 10, total: 0 })
+const currentQuery = ref({ page: 1, per_page: 10, sort_by: 'id', sort_direction: 'desc' })
+const form = reactive({})
+
+const isMasterAdmin = computed(
+  () => authStore.user?.is_master === true || authStore.user?.access_level === 'master_admin',
+)
+const actions = [
+  { key: 'detail', label: 'Detail', color: 'primary' },
+  { key: 'edit', label: 'Edit', color: 'success' },
+  { key: 'delete', label: 'Hapus', color: 'danger' },
+]
+
+function defaults() {
+  return {
+    tenant_id: '',
+    name: '',
+    status: 'active',
+    notes: '',
+    connection_type: 'api',
+    api_port: 8728,
+    radius_auth_port: 1812,
+    radius_accounting_port: 1813,
+    timeout: resource.value === 'olt' ? 5 : 10,
+    service_type: 'ppp',
+    shared_users: 1,
+    price: 0,
+    snmp_port: 161,
+    snmp_version: 'v2c',
+    security_level: 'noAuthNoPriv',
+  }
+}
+
+function normalize(item) {
+  return {
+    ...item,
+    connection_type_label: item.connection_type === 'radius' ? 'Radius Server' : 'Mikrotik API',
+    service_type_label: ({ ppp: 'PPP', hotspot: 'Hotspot', radius: 'RADIUS' })[item.service_type] || '-',
+    speed_label: item.download_kbps || item.upload_kbps ? `${item.download_kbps || 0}/${item.upload_kbps || 0} Kbps` : '-',
+    price_label: Number(item.price || 0).toLocaleString('id-ID'),
+    status_label: item.status === 'active' ? 'Aktif' : 'Nonaktif',
+  }
+}
+
+async function loadTenants() {
+  if (!isMasterAdmin.value || tenants.value.length) return
+  const response = await getTenants({ per_page: 100, sort_by: 'tenant_name', sort_direction: 'asc' })
+  tenants.value = response?.data?.data || []
+}
+
+async function fetchData(params = currentQuery.value) {
+  currentQuery.value = { ...currentQuery.value, ...params }
+  loading.value = true
+  try {
+    const response = await getNasResources(resource.value, currentQuery.value)
+    const rows = response?.data?.data || []
+    items.value = rows.map(normalize)
+    pagination.value = {
+      current_page: response?.data?.current_page || 1,
+      last_page: response?.data?.last_page || 1,
+      per_page: response?.data?.per_page || 10,
+      total: response?.data?.total || rows.length,
+    }
+  } catch (error) {
+    showError(error?.response?.data?.message || `Gagal memuat ${config.value.title}.`)
+  } finally {
+    loading.value = false
+    loadedOnce.value = true
+  }
+}
+
+async function openAdd(connectionType = null) {
+  editingId.value = null
+  Object.keys(form).forEach((key) => delete form[key])
+  Object.assign(form, defaults())
+  if (connectionType) form.connection_type = connectionType
+  await loadTenants()
+  modal.value = true
+}
+
+async function openEdit(item) {
+  editingId.value = item.id
+  Object.keys(form).forEach((key) => delete form[key])
+  Object.assign(form, defaults(), item)
+  config.value.fields.filter((field) => field.secret).forEach((field) => {
+    form[field.key] = ''
+  })
+  await loadTenants()
+  modal.value = true
+}
+
+async function openDetail(item) {
+  try {
+    const response = await getNasResource(resource.value, item.id)
+    detailItem.value = normalize(response?.data || item)
+    detailModal.value = true
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal memuat detail.')
+  }
+}
+
+function payload() {
+  const data = { tenant_id: form.tenant_id || null, name: form.name?.trim(), status: form.status, notes: form.notes || null }
+  if (resource.value === 'mikrotik') data.connection_type = form.connection_type
+  config.value.fields.forEach((field) => {
+    if (!field.show || field.show(form)) data[field.key] = form[field.key] === '' ? null : form[field.key]
+  })
+  return data
+}
+
+async function save() {
+  if (!form.name?.trim()) return showError(`${config.value.nameLabel} wajib diisi.`)
+  if (isMasterAdmin.value && !form.tenant_id) return showError('Tenant wajib dipilih.')
+  saving.value = true
+  try {
+    if (editingId.value) await updateNasResource(resource.value, editingId.value, payload())
+    else await createNasResource(resource.value, payload())
+    modal.value = false
+    showSuccess(`${config.value.title} berhasil disimpan.`)
+    await fetchData()
+  } catch (error) {
+    showError(error?.response?.data?.message || `Gagal menyimpan ${config.value.title}.`)
+  } finally {
+    saving.value = false
+  }
+}
+
+async function remove(item) {
+  const result = await showConfirm('Konfirmasi Hapus', `Hapus "${item.name}"?`)
+  if (!result.isConfirmed) return
+  try {
+    await deleteNasResource(resource.value, item.id)
+    showSuccess(`${config.value.title} berhasil dihapus.`)
+    await fetchData()
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal menghapus data.')
+  }
+}
+
+function onActionClick({ action, item }) {
+  if (action === 'detail') openDetail(item)
+  if (action === 'edit') openEdit(item)
+  if (action === 'delete') remove(item)
+}
+
+watch(resource, () => {
+  loadedOnce.value = false
+  items.value = []
+  currentQuery.value = { page: 1, per_page: 10, sort_by: 'id', sort_direction: 'desc' }
+  fetchData()
+})
+onMounted(fetchData)
+</script>
+
+<template>
+  <CRow class="brdvx-page-row g-0 m-0">
+    <CCol :xs="12" class="brdvx-page-column p-0">
+      <div class="brdvx-page-container">
+        <div class="brdvx-page-header d-flex justify-content-between align-items-center flex-wrap gap-2">
+          <h5 class="mb-0 fw-semibold">{{ config.title }}</h5>
+          <div class="d-flex flex-wrap gap-2">
+            <template v-if="resource === 'mikrotik'">
+              <CButton color="primary" size="sm" @click="openAdd('api')">+ Mikrotik API</CButton>
+              <CButton color="info" size="sm" @click="openAdd('radius')">+ Radius Server</CButton>
+            </template>
+            <CButton v-else color="primary" size="sm" @click="openAdd()">+ Tambah {{ config.title }}</CButton>
+          </div>
+        </div>
+        <div v-if="loading && !loadedOnce" class="brdvx-loading-state">
+          <CSpinner color="primary" />
+          <p class="brdvx-loading-text">Memuat data...</p>
+        </div>
+        <BaseResponsiveDataView
+          v-else
+          :columns="config.columns"
+          :items="items"
+          server-side
+          :pagination="pagination"
+          :loading="loading"
+          :actions="actions"
+          row-key="id"
+          @action-click="onActionClick"
+          @query-change="fetchData"
+        />
+      </div>
+    </CCol>
+  </CRow>
+
+  <CModal :visible="modal" @close="modal = false" alignment="center" size="lg">
+    <CModalHeader dismiss @close="modal = false">
+      <CModalTitle>{{ editingId ? 'Edit' : 'Tambah' }} {{ config.title }}</CModalTitle>
+    </CModalHeader>
+    <CModalBody>
+      <CRow class="g-3">
+        <CCol v-if="isMasterAdmin" :md="6">
+          <CFormLabel>Tenant</CFormLabel>
+          <CFormSelect v-model="form.tenant_id">
+            <option value="">Pilih tenant</option>
+            <option v-for="tenant in tenants" :key="tenant.id" :value="tenant.id">{{ tenant.tenant_name }}</option>
+          </CFormSelect>
+        </CCol>
+        <CCol :md="6">
+          <CFormLabel>{{ config.nameLabel }}</CFormLabel>
+          <CFormInput v-model="form.name" />
+        </CCol>
+        <CCol v-if="resource === 'mikrotik'" :md="6">
+          <CFormLabel>Tipe Koneksi</CFormLabel>
+          <CFormSelect v-model="form.connection_type">
+            <option value="api">Mikrotik API</option>
+            <option value="radius">Radius Server</option>
+          </CFormSelect>
+        </CCol>
+        <CCol v-for="field in config.fields.filter((item) => !item.show || item.show(form))" :key="field.key" :md="6">
+          <CFormLabel>{{ field.label }}</CFormLabel>
+          <CFormSelect v-if="field.type === 'select'" v-model="form[field.key]">
+            <option v-for="[value, label] in field.options" :key="value" :value="value">{{ label }}</option>
+          </CFormSelect>
+          <CFormInput
+            v-else
+            v-model="form[field.key]"
+            :type="field.type || 'text'"
+            :placeholder="field.secret && editingId ? 'Kosongkan jika tidak diubah' : ''"
+          />
+        </CCol>
+        <CCol :md="6">
+          <CFormLabel>Status</CFormLabel>
+          <CFormSelect v-model="form.status">
+            <option value="active">Aktif</option>
+            <option value="inactive">Nonaktif</option>
+          </CFormSelect>
+        </CCol>
+        <CCol :xs="12">
+          <CFormLabel>Catatan</CFormLabel>
+          <CFormTextarea v-model="form.notes" rows="2" />
+        </CCol>
+      </CRow>
+    </CModalBody>
+    <CModalFooter>
+      <CButton color="secondary" @click="modal = false" :disabled="saving">Batal</CButton>
+      <CButton color="primary" @click="save" :disabled="saving">{{ saving ? 'Menyimpan...' : 'Simpan' }}</CButton>
+    </CModalFooter>
+  </CModal>
+
+  <CModal :visible="detailModal" @close="detailModal = false" alignment="center">
+    <CModalHeader dismiss @close="detailModal = false"><CModalTitle>Detail {{ config.title }}</CModalTitle></CModalHeader>
+    <CModalBody>
+      <div v-if="detailItem" class="d-grid gap-2">
+        <div v-for="column in config.columns" :key="column.key" class="d-flex justify-content-between gap-3 border-bottom pb-2">
+          <span class="text-body-secondary">{{ column.label }}</span><strong class="text-end">{{ detailItem[column.key] || '-' }}</strong>
+        </div>
+        <div class="d-flex justify-content-between gap-3"><span class="text-body-secondary">Tenant</span><strong>{{ detailItem.tenant?.tenant_name || '-' }}</strong></div>
+      </div>
+    </CModalBody>
+    <CModalFooter>
+      <CButton v-if="resource === 'webfig' && detailItem?.url" color="primary" :href="detailItem.url" target="_blank" rel="noopener noreferrer">Buka Perangkat</CButton>
+      <CButton color="secondary" @click="detailModal = false">Tutup</CButton>
+    </CModalFooter>
+  </CModal>
+</template>
diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
index 43386210..ee292d6f 100644
--- a/src/views/pages/Login.vue
+++ b/src/views/pages/Login.vue
@@ -1,3 +1,41 @@
+<script setup>
+import { reactive, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const router = useRouter()
+const route = useRoute()
+const authStore = useAuthStore()
+
+const form = reactive({
+  login: '',
+  password: '',
+})
+
+const isLoading = computed(() => authStore.loading)
+const errorMessage = computed(() => authStore.error)
+
+async function onSubmit() {
+  authStore.clearError()
+
+  try {
+    await authStore.login({
+      login: form.login,
+      password: form.password,
+    })
+
+    const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/dashboard'
+    await router.replace(redirect)
+  } catch (error) {
+    console.error('Login failed:', error)
+  }
+}
+
+function goToRegister() {
+  router.push('/pages/register')
+}
+</script>
+
 <template>
   <div class="wrapper min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
@@ -6,16 +44,24 @@
           <CCardGroup>
             <CCard class="p-4">
               <CCardBody>
-                <CForm>
-                  <h1>Login</h1>
-                  <p class="text-body-secondary">Sign In to your account</p>
+                <CForm @submit.prevent="onSubmit">
+                  <h1>Masuk</h1>
+                  <p class="text-body-secondary">Masuk ke akun anda</p>
+
+                  <CAlert v-if="errorMessage" color="danger" class="mb-3">
+                    {{ errorMessage }}
+                  </CAlert>
+
                   <CInputGroup class="mb-3">
                     <CInputGroupText>
                       <CIcon icon="cil-user" />
                     </CInputGroupText>
                     <CFormInput
-                      placeholder="Username"
+                      v-model="form.login"
+                      type="text"
+                      placeholder="Username atau Email"
                       autocomplete="username"
+                      required
                     />
                   </CInputGroup>
                   <CInputGroup class="mb-4">
@@ -23,19 +69,20 @@
                       <CIcon icon="cil-lock-locked" />
                     </CInputGroupText>
                     <CFormInput
+                      v-model="form.password"
                       type="password"
                       placeholder="Password"
                       autocomplete="current-password"
+                      required
                     />
                   </CInputGroup>
                   <CRow>
                     <CCol :xs="6">
-                      <CButton color="primary" class="px-4"> Login </CButton>
+                      <CButton color="primary" class="px-4" type="submit" :disabled="isLoading">
+                        {{ isLoading ? 'Loading...' : 'Masuk' }}
+                      </CButton>
                     </CCol>
                     <CCol :xs="6" class="text-right">
-                      <CButton color="link" class="px-0">
-                        Forgot password?
-                      </CButton>
                     </CCol>
                   </CRow>
                 </CForm>
@@ -44,14 +91,10 @@
             <CCard class="text-white bg-primary py-5" style="width: 44%">
               <CCardBody class="text-center">
                 <div>
-                  <h2>Sign up</h2>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-                    sed do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua.
-                  </p>
-                  <CButton color="light" variant="outline" class="mt-3">
-                    Register Now!
+                  <h2>Belum punya akun?</h2>
+                  <p>Silakan registrasi untuk membuat akun baru.</p>
+                  <CButton color="light" variant="outline" class="mt-3" @click="goToRegister">
+                    Registrasi Sekarang!
                   </CButton>
                 </div>
               </CCardBody>
diff --git a/src/views/pages/Register.vue b/src/views/pages/Register.vue
index 284e3cc1..459afdef 100644
--- a/src/views/pages/Register.vue
+++ b/src/views/pages/Register.vue
@@ -1,3 +1,56 @@
+<script setup>
+import { reactive, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+const form = reactive({
+  name: '',
+  username: '',
+  email: '',
+  whatsapp_number: '',
+  password: '',
+  password_confirmation: '',
+  verification_channel: 'email',
+})
+
+const isLoading = computed(() => authStore.loading)
+const errorMessage = computed(() => authStore.error)
+
+async function onSubmit() {
+  authStore.clearError()
+
+  if (form.password !== form.password_confirmation) {
+    authStore.error = 'Konfirmasi password tidak sama.'
+    return
+  }
+
+  try {
+    await authStore.register({
+      name: form.name,
+      username: form.username,
+      email: form.email,
+      whatsapp_number: form.whatsapp_number,
+      password: form.password,
+      password_confirmation: form.password_confirmation,
+      verification_channel: form.verification_channel,
+      verification_target:
+        form.verification_channel === 'whatsapp' ? form.whatsapp_number : form.email,
+    })
+
+    await router.push('/pages/verify-code')
+  } catch (error) {
+    console.error('Register failed:', error)
+  }
+}
+
+function goToLogin() {
+  router.push('/pages/login')
+}
+</script>
+
 <template>
   <div class="bwrapper min-vh-100 d-flex flex-row align-items-center">
     <CContainer>
@@ -5,27 +58,69 @@
         <CCol :md="9" :lg="7" :xl="6">
           <CCard class="mx-4">
             <CCardBody class="p-4">
-              <CForm>
+              <CForm @submit.prevent="onSubmit">
                 <h1>Register</h1>
                 <p class="text-body-secondary">Create your account</p>
+
+                <CAlert v-if="errorMessage" color="danger" class="mb-3">
+                  {{ errorMessage }}
+                </CAlert>
+
                 <CInputGroup class="mb-3">
                   <CInputGroupText>
                     <CIcon icon="cil-user" />
                   </CInputGroupText>
-                  <CFormInput placeholder="Username" autocomplete="username" />
+                  <CFormInput
+                    v-model="form.name"
+                    placeholder="Nama Lengkap"
+                    autocomplete="name"
+                    required
+                  />
                 </CInputGroup>
+                <CInputGroup class="mb-3">
+                  <CInputGroupText>
+                    <CIcon icon="cil-user-follow" />
+                  </CInputGroupText>
+                  <CFormInput
+                    v-model="form.username"
+                    placeholder="Username"
+                    autocomplete="username"
+                    required
+                  />
+                </CInputGroup>
+
                 <CInputGroup class="mb-3">
                   <CInputGroupText>@</CInputGroupText>
-                  <CFormInput placeholder="Email" autocomplete="email" />
+                  <CFormInput
+                    v-model="form.email"
+                    type="email"
+                    placeholder="Email"
+                    autocomplete="email"
+                    required
+                  />
+                </CInputGroup>
+
+                <CInputGroup class="mb-3">
+                  <CInputGroupText>
+                    <CIcon icon="cil-phone" />
+                  </CInputGroupText>
+                  <CFormInput
+                    v-model="form.whatsapp_number"
+                    placeholder="WhatsApp Number"
+                    autocomplete="tel"
+                    required
+                  />
                 </CInputGroup>
                 <CInputGroup class="mb-3">
                   <CInputGroupText>
                     <CIcon icon="cil-lock-locked" />
                   </CInputGroupText>
                   <CFormInput
+                    v-model="form.password"
                     type="password"
                     placeholder="Password"
                     autocomplete="new-password"
+                    required
                   />
                 </CInputGroup>
                 <CInputGroup class="mb-4">
@@ -33,13 +128,20 @@
                     <CIcon icon="cil-lock-locked" />
                   </CInputGroupText>
                   <CFormInput
+                    v-model="form.password_confirmation"
                     type="password"
                     placeholder="Repeat password"
                     autocomplete="new-password"
+                    required
                   />
                 </CInputGroup>
-                <div class="d-grid">
-                  <CButton color="success">Create Account</CButton>
+                <div class="d-grid gap-2">
+                  <CButton color="success" type="submit" :disabled="isLoading">
+                    {{ isLoading ? 'Memproses...' : 'Create Account' }}
+                  </CButton>
+                  <CButton color="light" variant="outline" type="button" @click="goToLogin">
+                    Kembali ke Login
+                  </CButton>
                 </div>
               </CForm>
             </CCardBody>
diff --git a/src/views/pages/VerifyCode.vue b/src/views/pages/VerifyCode.vue
new file mode 100644
index 00000000..97c35c51
--- /dev/null
+++ b/src/views/pages/VerifyCode.vue
@@ -0,0 +1,121 @@
+<script setup>
+import { reactive, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+const form = reactive({
+  verification_channel: authStore.verificationChannel || 'email',
+  verification_target: authStore.verificationTarget || authStore.pendingVerificationEmail || '',
+  verification_code: '',
+})
+
+const isLoading = computed(() => authStore.loading)
+const errorMessage = computed(() => authStore.error)
+
+async function onSubmit() {
+  authStore.clearError()
+
+  try {
+    await authStore.verifyCode({
+      verification_channel: form.verification_channel,
+      verification_target: form.verification_target,
+      verification_code: form.verification_code,
+    })
+
+    await router.push('/dashboard')
+  } catch (error) {
+    // error handled in store
+    console.error('Verify code failed:', error)
+  }
+}
+
+async function onResend() {
+  authStore.clearError()
+
+  try {
+    await authStore.resendVerificationCode({
+      verification_channel: form.verification_channel,
+      verification_target: form.verification_target,
+    })
+  } catch (error) {
+    console.error('Resend verification failed:', error)
+  }
+}
+
+function goToLogin() {
+  router.push('/pages/login')
+}
+</script>
+
+<template>
+  <div class="wrapper min-vh-100 d-flex flex-row align-items-center">
+    <CContainer>
+      <CRow class="justify-content-center">
+        <CCol :md="7" :lg="6">
+          <CCard class="mx-4">
+            <CCardBody class="p-4">
+              <CForm @submit.prevent="onSubmit">
+                <h1>Verifikasi Kode</h1>
+                <p class="text-body-secondary">Masukkan target verifikasi dan kode OTP</p>
+
+                <CAlert v-if="errorMessage" color="danger" class="mb-3">
+                  {{ errorMessage }}
+                </CAlert>
+
+                <CInputGroup class="mb-3">
+                  <CInputGroupText>
+                    <CIcon icon="cil-envelope-open" />
+                  </CInputGroupText>
+                  <CFormSelect v-model="form.verification_channel" required>
+                    <option value="email">Email</option>
+                    <option value="whatsapp">WhatsApp</option>
+                  </CFormSelect>
+                </CInputGroup>
+
+                <CInputGroup class="mb-3">
+                  <CInputGroupText>
+                    <CIcon icon="cil-at" />
+                  </CInputGroupText>
+                  <CFormInput
+                    v-model="form.verification_target"
+                    placeholder="Verification Target (email/whatsapp number)"
+                    required
+                  />
+                </CInputGroup>
+
+                <CInputGroup class="mb-4">
+                  <CInputGroupText>
+                    <CIcon icon="cil-shield-alt" />
+                  </CInputGroupText>
+                  <CFormInput
+                    v-model="form.verification_code"
+                    placeholder="Kode Verifikasi"
+                    autocomplete="one-time-code"
+                    required
+                  />
+                </CInputGroup>
+
+                <div class="d-grid gap-2">
+                  <CButton color="primary" type="submit" :disabled="isLoading">
+                    {{ isLoading ? 'Memverifikasi...' : 'Verifikasi' }}
+                  </CButton>
+
+                  <CButton color="warning" variant="outline" type="button" @click="onResend">
+                    Kirim Ulang Kode
+                  </CButton>
+
+                  <CButton color="light" variant="outline" type="button" @click="goToLogin">
+                    Kembali ke Login
+                  </CButton>
+                </div>
+              </CForm>
+            </CCardBody>
+          </CCard>
+        </CCol>
+      </CRow>
+    </CContainer>
+  </div>
+</template>
diff --git a/src/views/profile/Profile.vue b/src/views/profile/Profile.vue
new file mode 100644
index 00000000..d74d7dbb
--- /dev/null
+++ b/src/views/profile/Profile.vue
@@ -0,0 +1,505 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import { getMyProfile, updateMyProfile } from '@/services/profileService'
+import { deleteFile, getTemporaryFileUrl, uploadFile } from '@/services/fileService'
+import {
+  getDesaOptions,
+  getKabupatenOptions,
+  getKecamatanOptions,
+  getProvinsiOptions,
+} from '@/services/wilayahService'
+import { showError, showSuccess } from '@/utils/swal'
+
+const authStore = useAuthStore()
+const loading = ref(false)
+const saving = ref(false)
+const profile = ref(null)
+const selectedPhoto = ref(null)
+const photoUrl = ref('')
+const localPhotoUrl = ref('')
+const photoInput = ref(null)
+const photoDragging = ref(false)
+const wilayahOptions = reactive({ provinsi: [], kabupaten: [], kecamatan: [], desa: [] })
+const wilayahLoading = reactive({ provinsi: false, kabupaten: false, kecamatan: false, desa: false })
+
+const form = reactive({
+  name: '',
+  username: '',
+  email: '',
+  whatsapp_number: '',
+  nik: '',
+  address: '',
+  provinsi_id: '',
+  kabupaten_id: '',
+  kecamatan_id: '',
+  desa_id: '',
+  current_password: '',
+  password: '',
+  password_confirmation: '',
+})
+
+const accessLevelLabel = computed(() => {
+  const labels = {
+    customer: 'Customer',
+    staff: 'Staff',
+    tenant_owner: 'Pemilik Tenant',
+    master_admin: 'Master Admin',
+  }
+
+  return labels[profile.value?.access_level] || profile.value?.access_level || '-'
+})
+
+const tenants = computed(() => profile.value?.user_tenants || [])
+const menuGroups = computed(() => profile.value?.user_menu_groups || [])
+const displayedPhotoUrl = computed(() => localPhotoUrl.value || photoUrl.value)
+
+function fillForm(user) {
+  const userProfile = user?.user_profile || {}
+
+  Object.assign(form, {
+    name: user?.name || '',
+    username: user?.username || '',
+    email: user?.email || '',
+    whatsapp_number: user?.whatsapp_number || '',
+    nik: userProfile.nik || '',
+    address: userProfile.address || '',
+    provinsi_id: userProfile.provinsi_id ? String(userProfile.provinsi_id) : '',
+    kabupaten_id: userProfile.kabupaten_id ? String(userProfile.kabupaten_id) : '',
+    kecamatan_id: userProfile.kecamatan_id ? String(userProfile.kecamatan_id) : '',
+    desa_id: userProfile.desa_id ? String(userProfile.desa_id) : '',
+    current_password: '',
+    password: '',
+    password_confirmation: '',
+  })
+}
+
+function optionRows(response) {
+  return Array.isArray(response?.data) ? response.data : []
+}
+
+async function loadWilayahOptions(level, parentId = null) {
+  wilayahLoading[level] = true
+  try {
+    const loaders = {
+      provinsi: () => getProvinsiOptions(),
+      kabupaten: () => getKabupatenOptions(parentId),
+      kecamatan: () => getKecamatanOptions(parentId),
+      desa: () => getDesaOptions(parentId),
+    }
+    const response = await loaders[level]()
+    wilayahOptions[level] = optionRows(response)
+  } catch (error) {
+    wilayahOptions[level] = []
+    showError(error?.response?.data?.message || `Gagal memuat pilihan ${level}.`)
+  } finally {
+    wilayahLoading[level] = false
+  }
+}
+
+async function hydrateWilayahOptions() {
+  await loadWilayahOptions('provinsi')
+  if (form.provinsi_id) await loadWilayahOptions('kabupaten', form.provinsi_id)
+  if (form.kabupaten_id) await loadWilayahOptions('kecamatan', form.kabupaten_id)
+  if (form.kecamatan_id) await loadWilayahOptions('desa', form.kecamatan_id)
+}
+
+async function onProvinsiChange(event) {
+  form.provinsi_id = event.target.value
+  form.kabupaten_id = ''
+  form.kecamatan_id = ''
+  form.desa_id = ''
+  wilayahOptions.kabupaten = []
+  wilayahOptions.kecamatan = []
+  wilayahOptions.desa = []
+  if (form.provinsi_id) await loadWilayahOptions('kabupaten', form.provinsi_id)
+}
+
+async function onKabupatenChange(event) {
+  form.kabupaten_id = event.target.value
+  form.kecamatan_id = ''
+  form.desa_id = ''
+  wilayahOptions.kecamatan = []
+  wilayahOptions.desa = []
+  if (form.kabupaten_id) await loadWilayahOptions('kecamatan', form.kabupaten_id)
+}
+
+async function onKecamatanChange(event) {
+  form.kecamatan_id = event.target.value
+  form.desa_id = ''
+  wilayahOptions.desa = []
+  if (form.kecamatan_id) await loadWilayahOptions('desa', form.kecamatan_id)
+}
+
+async function fetchProfile() {
+  loading.value = true
+
+  try {
+    const response = await getMyProfile()
+    profile.value = response?.data || null
+    fillForm(profile.value)
+    await hydrateWilayahOptions()
+    await loadProfilePhoto(profile.value)
+    authStore.setUser(profile.value)
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal memuat profile.')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadProfilePhoto(user) {
+  photoUrl.value = ''
+
+  if (!user?.profile_photo?.uuid) return
+
+  try {
+    const response = await getTemporaryFileUrl(user.profile_photo.uuid)
+    photoUrl.value = response?.data?.url || ''
+  } catch {
+    photoUrl.value = ''
+  }
+}
+
+function setSelectedPhoto(file, input = null) {
+
+  if (file && !file.type.startsWith('image/')) {
+    if (input) input.value = ''
+    showError('Foto profil harus berupa file gambar.')
+    return
+  }
+
+  if (file && file.size > 5 * 1024 * 1024) {
+    if (input) input.value = ''
+    showError('Ukuran foto profil maksimal 5 MB.')
+    return
+  }
+
+  if (localPhotoUrl.value) URL.revokeObjectURL(localPhotoUrl.value)
+  selectedPhoto.value = file
+  localPhotoUrl.value = file ? URL.createObjectURL(file) : ''
+}
+
+function selectPhoto(event) {
+  setSelectedPhoto(event.target.files?.[0] || null, event.target)
+}
+
+function dropPhoto(event) {
+  photoDragging.value = false
+  setSelectedPhoto(event.dataTransfer?.files?.[0] || null)
+}
+
+function clearSelectedPhoto() {
+  if (localPhotoUrl.value) URL.revokeObjectURL(localPhotoUrl.value)
+  selectedPhoto.value = null
+  localPhotoUrl.value = ''
+  if (photoInput.value) photoInput.value.value = ''
+}
+
+function nullableNumber(value) {
+  return value === '' || value === null ? null : Number(value)
+}
+
+function buildPayload() {
+  const payload = {
+    name: form.name.trim(),
+    username: form.username.trim() || null,
+    email: form.email.trim(),
+    whatsapp_number: form.whatsapp_number.trim() || null,
+    user_profile: {
+      nik: form.nik.trim() || null,
+      address: form.address.trim() || null,
+      provinsi_id: nullableNumber(form.provinsi_id),
+      kabupaten_id: nullableNumber(form.kabupaten_id),
+      kecamatan_id: nullableNumber(form.kecamatan_id),
+      desa_id: nullableNumber(form.desa_id),
+    },
+  }
+
+  if (form.password) {
+    payload.current_password = form.current_password
+    payload.password = form.password
+    payload.password_confirmation = form.password_confirmation
+  }
+
+  return payload
+}
+
+async function saveProfile() {
+  saving.value = true
+
+  try {
+    const payload = buildPayload()
+    let uploadedPhoto = null
+
+    if (selectedPhoto.value) {
+      const uploadResponse = await uploadFile(selectedPhoto.value, 'profile')
+      uploadedPhoto = uploadResponse?.data || null
+      payload.profile_photo_file_id = uploadedPhoto?.id
+    }
+
+    let response
+    try {
+      response = await updateMyProfile(payload)
+    } catch (error) {
+      if (uploadedPhoto?.uuid) {
+        await deleteFile(uploadedPhoto.uuid).catch(() => {})
+      }
+      throw error
+    }
+
+    profile.value = response?.data || null
+    fillForm(profile.value)
+    selectedPhoto.value = null
+    if (localPhotoUrl.value) URL.revokeObjectURL(localPhotoUrl.value)
+    localPhotoUrl.value = ''
+    await loadProfilePhoto(profile.value)
+    authStore.setUser(profile.value)
+    showSuccess('Profile berhasil diperbarui.')
+  } catch (error) {
+    const errors = error?.response?.data?.errors
+    const firstError = errors ? Object.values(errors).flat()[0] : null
+    showError(firstError || error?.response?.data?.message || 'Gagal memperbarui profile.')
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(fetchProfile)
+onBeforeUnmount(() => {
+  if (localPhotoUrl.value) URL.revokeObjectURL(localPhotoUrl.value)
+})
+</script>
+
+<template>
+  <CRow class="brdvx-page-row g-0 m-0">
+    <CCol :xs="12" class="brdvx-page-column p-0">
+      <div class="brdvx-page-container">
+        <div class="brdvx-page-header">
+          <h5 class="mb-1 fw-semibold">Profile Saya</h5>
+        </div>
+
+        <div v-if="loading" class="text-center py-5">
+          <CSpinner color="primary" />
+        </div>
+
+        <CRow v-else-if="profile" class="g-3">
+          <CCol :lg="4">
+            <CCard class="h-100">
+              <CCardBody class="text-center">
+                <CAvatar
+                  :src="displayedPhotoUrl || undefined"
+                  color="primary"
+                  text-color="white"
+                  class="image-previewable profile-photo-avatar"
+                  :data-preview-alt="`Foto ${profile.name}`"
+                >
+                  <template v-if="!displayedPhotoUrl">
+                    {{ profile.name?.charAt(0)?.toUpperCase() || 'U' }}
+                  </template>
+                </CAvatar>
+                <div
+                  class="profile-photo-uploader"
+                  :class="{ 'is-dragging': photoDragging }"
+                  @dragenter.prevent="photoDragging = true"
+                  @dragover.prevent="photoDragging = true"
+                  @dragleave.prevent="photoDragging = false"
+                  @drop.prevent="dropPhoto"
+                >
+                  <div class="profile-photo-uploader-icon">
+                    <CIcon icon="cil-cloud-download" size="xl" />
+                  </div>
+                  <div class="fw-semibold">Ganti foto profil</div>
+                  <div class="small text-body-secondary">
+                    Tarik gambar ke sini atau pilih dari perangkat
+                  </div>
+                  <div class="d-flex flex-wrap justify-content-center gap-2 mt-3">
+                    <CButton color="primary" variant="outline" size="sm" @click="photoInput?.click()">
+                      <CIcon icon="cil-camera" class="me-1" />
+                      Pilih Gambar
+                    </CButton>
+                    <CButton
+                      v-if="selectedPhoto"
+                      color="secondary"
+                      variant="ghost"
+                      size="sm"
+                      @click="clearSelectedPhoto"
+                    >
+                      Batal
+                    </CButton>
+                  </div>
+                  <div v-if="selectedPhoto" class="profile-photo-file mt-3">
+                    <CIcon icon="cil-check-circle" class="text-success" />
+                    <span>{{ selectedPhoto.name }}</span>
+                  </div>
+                </div>
+                <input
+                  ref="photoInput"
+                  type="file"
+                  accept="image/jpeg,image/png,image/webp,image/gif"
+                  class="d-none"
+                  aria-label="Pilih foto profile"
+                  @change="selectPhoto"
+                />
+                <div class="small text-body-secondary mt-2 mb-3">
+                  JPG, PNG, WebP, atau GIF. Maksimal 5 MB.
+                </div>
+                <h5 class="mb-1">{{ profile.name }}</h5>
+                <div class="text-body-secondary mb-2">{{ profile.email }}</div>
+                <CBadge color="primary">{{ accessLevelLabel }}</CBadge>
+
+                <hr />
+
+                <div class="text-start">
+                  <div class="small text-body-secondary">Status</div>
+                  <div class="mb-3">{{ profile.status }}</div>
+                  <div class="small text-body-secondary">Tenant</div>
+                  <div v-if="tenants.length" class="d-flex flex-wrap gap-1 mt-1">
+                    <CBadge
+                      v-for="membership in tenants"
+                      :key="membership.id"
+                      :color="membership.is_default ? 'primary' : 'secondary'"
+                    >
+                      {{ membership.tenant?.tenant_name || `Tenant #${membership.tenant_id}` }}
+                    </CBadge>
+                  </div>
+                  <div v-else>-</div>
+
+                  <div class="small text-body-secondary mt-3">Menu Group</div>
+                  <div v-if="menuGroups.length" class="d-flex flex-wrap gap-1 mt-1">
+                    <CBadge v-for="assignment in menuGroups" :key="assignment.id" color="info">
+                      {{ assignment.menu_group?.name || `Group #${assignment.menu_group_id}` }}
+                    </CBadge>
+                  </div>
+                  <div v-else>-</div>
+                </div>
+              </CCardBody>
+            </CCard>
+          </CCol>
+
+          <CCol :lg="8">
+            <CForm @submit.prevent="saveProfile">
+              <CCard class="mb-3">
+                <CCardHeader class="fw-semibold">Informasi Akun</CCardHeader>
+                <CCardBody>
+                  <CRow class="g-3">
+                    <CCol :md="6">
+                      <CFormLabel>Nama</CFormLabel>
+                      <CFormInput v-model="form.name" required />
+                    </CCol>
+                    <CCol :md="6">
+                      <CFormLabel>Username</CFormLabel>
+                      <CFormInput v-model="form.username" autocomplete="username" />
+                    </CCol>
+                    <CCol :md="6">
+                      <CFormLabel>Email</CFormLabel>
+                      <CFormInput v-model="form.email" type="email" required />
+                    </CCol>
+                    <CCol :md="6">
+                      <CFormLabel>Nomor WhatsApp</CFormLabel>
+                      <CFormInput v-model="form.whatsapp_number" />
+                    </CCol>
+                  </CRow>
+                </CCardBody>
+              </CCard>
+
+              <CCard class="mb-3">
+                <CCardHeader class="fw-semibold">Data Profile</CCardHeader>
+                <CCardBody>
+                  <CRow class="g-3">
+                    <CCol :md="6">
+                      <CFormLabel>NIK</CFormLabel>
+                      <CFormInput v-model="form.nik" />
+                    </CCol>
+                    <CCol :xs="12">
+                      <CFormLabel>Alamat</CFormLabel>
+                      <CFormTextarea v-model="form.address" rows="3" />
+                    </CCol>
+                    <CCol :md="6">
+                      <CFormLabel>Provinsi</CFormLabel>
+                      <CFormSelect
+                        v-model="form.provinsi_id"
+                        :disabled="wilayahLoading.provinsi"
+                        @change="onProvinsiChange"
+                      >
+                        <option value="">{{ wilayahLoading.provinsi ? 'Memuat provinsi...' : 'Pilih provinsi' }}</option>
+                        <option v-for="row in wilayahOptions.provinsi" :key="row.id" :value="String(row.id)">
+                          {{ row.kode }} — {{ row.nama }}
+                        </option>
+                      </CFormSelect>
+                    </CCol>
+                    <CCol :md="6">
+                      <CFormLabel>Kabupaten</CFormLabel>
+                      <CFormSelect
+                        v-model="form.kabupaten_id"
+                        :disabled="!form.provinsi_id || wilayahLoading.kabupaten"
+                        @change="onKabupatenChange"
+                      >
+                        <option value="">{{ wilayahLoading.kabupaten ? 'Memuat kabupaten...' : 'Pilih kabupaten' }}</option>
+                        <option v-for="row in wilayahOptions.kabupaten" :key="row.id" :value="String(row.id)">
+                          {{ row.kode }} — {{ row.nama }}
+                        </option>
+                      </CFormSelect>
+                    </CCol>
+                    <CCol :md="6">
+                      <CFormLabel>Kecamatan</CFormLabel>
+                      <CFormSelect
+                        v-model="form.kecamatan_id"
+                        :disabled="!form.kabupaten_id || wilayahLoading.kecamatan"
+                        @change="onKecamatanChange"
+                      >
+                        <option value="">{{ wilayahLoading.kecamatan ? 'Memuat kecamatan...' : 'Pilih kecamatan' }}</option>
+                        <option v-for="row in wilayahOptions.kecamatan" :key="row.id" :value="String(row.id)">
+                          {{ row.kode }} — {{ row.nama }}
+                        </option>
+                      </CFormSelect>
+                    </CCol>
+                    <CCol :md="6">
+                      <CFormLabel>Desa</CFormLabel>
+                      <CFormSelect
+                        v-model="form.desa_id"
+                        :disabled="!form.kecamatan_id || wilayahLoading.desa"
+                      >
+                        <option value="">{{ wilayahLoading.desa ? 'Memuat desa...' : 'Pilih desa' }}</option>
+                        <option v-for="row in wilayahOptions.desa" :key="row.id" :value="String(row.id)">
+                          {{ row.kode }} — {{ row.nama }}
+                        </option>
+                      </CFormSelect>
+                    </CCol>
+                  </CRow>
+                </CCardBody>
+              </CCard>
+
+              <CCard class="mb-3">
+                <CCardHeader class="fw-semibold">Ubah Password</CCardHeader>
+                <CCardBody>
+                  <p class="small text-body-secondary">Kosongkan jika tidak ingin mengubah password.</p>
+                  <CRow class="g-3">
+                    <CCol :md="4">
+                      <CFormLabel>Password Saat Ini</CFormLabel>
+                      <CFormInput v-model="form.current_password" type="password" autocomplete="current-password" />
+                    </CCol>
+                    <CCol :md="4">
+                      <CFormLabel>Password Baru</CFormLabel>
+                      <CFormInput v-model="form.password" type="password" autocomplete="new-password" />
+                    </CCol>
+                    <CCol :md="4">
+                      <CFormLabel>Konfirmasi Password</CFormLabel>
+                      <CFormInput v-model="form.password_confirmation" type="password" autocomplete="new-password" />
+                    </CCol>
+                  </CRow>
+                </CCardBody>
+              </CCard>
+
+              <div class="d-flex justify-content-end">
+                <CButton color="primary" type="submit" :disabled="saving">
+                  {{ saving ? 'Menyimpan...' : 'Simpan Perubahan' }}
+                </CButton>
+              </div>
+            </CForm>
+          </CCol>
+        </CRow>
+      </div>
+    </CCol>
+  </CRow>
+</template>
diff --git a/src/views/tenants/Tenants.vue b/src/views/tenants/Tenants.vue
new file mode 100644
index 00000000..539360cc
--- /dev/null
+++ b/src/views/tenants/Tenants.vue
@@ -0,0 +1,369 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import BaseResponsiveDataView from '@/components/base/BaseResponsiveDataView.vue'
+import {
+  getTenants,
+  createTenant,
+  getTenantById,
+  updateTenant,
+  deleteTenant,
+} from '@/services/tenantService'
+import { formatTanggal } from '@/utils/tglindo.js'
+import { showConfirm, showSuccess, showError } from '@/utils/swal.js'
+
+const loading = ref(true)
+const loadedOnce = ref(false)
+const saving = ref(false)
+const tenants = ref([])
+const pagination = ref({ current_page: 1, last_page: 1, per_page: 10, total: 0 })
+const currentQuery = ref({ page: 1, per_page: 10, sort_by: 'id', sort_direction: 'desc' })
+
+const modal = ref(false)
+const detailModal = ref(false)
+const isEdit = ref(false)
+const editingId = ref(null)
+
+const form = reactive({
+  tenant_code: '',
+  tenant_name: '',
+  phone: '',
+  email: '',
+  address: '',
+  status: 'active',
+})
+
+const detailItem = ref(null)
+
+const columns = [
+  { key: 'tenant_code', label: 'Code' },
+  { key: 'tenant_name', label: 'Name' },
+  { key: 'phone', label: 'Phone', sortable: false },
+  { key: 'email', label: 'Email' },
+  { key: 'status_label', label: 'Status', sortKey: 'status' },
+]
+
+const tableActions = [
+  { key: 'detail', label: 'Detail', color: 'primary' },
+  { key: 'edit', label: 'Edit', color: 'success' },
+  { key: 'delete', label: 'Delete', color: 'danger' },
+]
+
+function emptyForm() {
+  return {
+    tenant_code: '',
+    tenant_name: '',
+    phone: '',
+    email: '',
+    address: '',
+    status: 'active',
+  }
+}
+
+function normalizeTenant(item = {}) {
+  const status = item.status ?? 'inactive'
+  return {
+    id: item.id ?? '-',
+    tenant_code: item.tenant_code ?? '-',
+    tenant_name: item.tenant_name ?? '-',
+    phone: item.phone ?? '-',
+    email: item.email ?? '-',
+    address: item.address ?? '-',
+    status,
+    status_label: status === 'active' ? 'Aktif' : 'Nonaktif',
+    created_at: item.created_at ?? null,
+    updated_at: item.updated_at ?? null,
+  }
+}
+
+async function fetchAllData(params = currentQuery.value) {
+  currentQuery.value = { ...currentQuery.value, ...params }
+  params = currentQuery.value
+  loading.value = true
+  try {
+    const res = await getTenants(params)
+    const payload = Array.isArray(res?.data?.data)
+      ? res.data.data
+      : Array.isArray(res?.data)
+        ? res.data
+        : Array.isArray(res)
+          ? res
+          : []
+    tenants.value = payload.map(normalizeTenant)
+    const meta = res?.data && !Array.isArray(res.data) ? res.data : {}
+    pagination.value = {
+      current_page: meta.current_page || params.page || 1,
+      last_page: meta.last_page || 1,
+      per_page: meta.per_page || params.per_page || 10,
+      total: meta.total || payload.length,
+    }
+  } catch (err) {
+    showError(err?.response?.data?.message || 'Gagal memuat data tenant: ' + err.message)
+  } finally {
+    loading.value = false
+    loadedOnce.value = true
+  }
+}
+
+onMounted(() => {
+  fetchAllData()
+})
+
+function openAddModal() {
+  isEdit.value = false
+  editingId.value = null
+  Object.assign(form, emptyForm())
+  modal.value = true
+}
+
+function openEditModal(item) {
+  isEdit.value = true
+  editingId.value = item.id
+  Object.assign(form, {
+    tenant_code: item.tenant_code || '',
+    tenant_name: item.tenant_name || '',
+    phone: item.phone || '',
+    email: item.email || '',
+    address: item.address || '',
+    status: item.status || 'active',
+  })
+  modal.value = true
+}
+
+async function openDetail(item) {
+  try {
+    const res = await getTenantById(item.id)
+    const payload = Array.isArray(res?.data) ? res.data[0] : res?.data
+    detailItem.value = normalizeTenant(payload || item)
+    detailModal.value = true
+  } catch (err) {
+    showError(err?.response?.data?.message || 'Gagal memuat detail tenant: ' + err.message)
+  }
+}
+
+function validateForm() {
+  if (!form.tenant_code.trim()) {
+    showError('Tenant code wajib diisi.')
+    return false
+  }
+  if (!form.tenant_name.trim()) {
+    showError('Tenant name wajib diisi.')
+    return false
+  }
+  if (!['active', 'inactive'].includes(form.status)) {
+    showError('Status harus active atau inactive.')
+    return false
+  }
+  return true
+}
+
+function formPayload() {
+  return {
+    tenant_code: form.tenant_code.trim(),
+    tenant_name: form.tenant_name.trim(),
+    phone: form.phone?.trim() || null,
+    email: form.email?.trim() || null,
+    address: form.address?.trim() || null,
+    status: form.status,
+  }
+}
+
+async function createItem() {
+  saving.value = true
+  try {
+    await createTenant(formPayload())
+    modal.value = false
+    showSuccess('Tenant berhasil dibuat.')
+    await fetchAllData()
+  } catch (err) {
+    showError(err?.response?.data?.message || 'Gagal membuat tenant: ' + err.message)
+  } finally {
+    saving.value = false
+  }
+}
+
+async function updateItem() {
+  if (!editingId.value) return
+  saving.value = true
+  try {
+    await updateTenant(editingId.value, formPayload())
+    modal.value = false
+    showSuccess('Tenant berhasil diupdate.')
+    await fetchAllData()
+  } catch (err) {
+    showError(err?.response?.data?.message || 'Gagal mengupdate tenant: ' + err.message)
+  } finally {
+    saving.value = false
+  }
+}
+
+async function openDeleteModal(item) {
+  const result = await showConfirm(
+    'Konfirmasi Hapus',
+    `Apakah Anda yakin ingin menghapus tenant "${item.tenant_name}"?`,
+  )
+  if (!result.isConfirmed) return
+
+  try {
+    await deleteTenant(item.id)
+    showSuccess('Tenant berhasil dihapus.')
+    await fetchAllData()
+  } catch (err) {
+    showError(err?.response?.data?.message || 'Gagal menghapus tenant: ' + err.message)
+  }
+}
+
+async function saveItem() {
+  if (!validateForm()) return
+  if (isEdit.value) {
+    await updateItem()
+  } else {
+    await createItem()
+  }
+}
+
+function onActionClick({ action, item }) {
+  if (action === 'detail') openDetail(item)
+  if (action === 'edit') openEditModal(item)
+  if (action === 'delete') openDeleteModal(item)
+}
+</script>
+
+<template>
+  <CRow class="brdvx-page-row g-0 m-0">
+    <CCol :xs="12" class="brdvx-page-column p-0">
+      <div class="brdvx-page-container">
+        <div class="brdvx-page-header d-flex justify-content-between align-items-center flex-wrap gap-2">
+          <div>
+            <h5 class="mb-0 fw-semibold">Tenants</h5>
+          </div>
+          <div class="d-flex gap-2">
+            <CButton color="primary" size="sm" variant="outline" :disabled="loading" @click="fetchAllData()">
+              {{ loading ? 'Loading...' : 'Refresh' }}
+            </CButton>
+            <CButton color="primary" size="sm" @click="openAddModal">+ Tambah Tenant</CButton>
+          </div>
+        </div>
+
+        <div v-if="loading && !loadedOnce" class="brdvx-loading-state" role="status" aria-live="polite">
+          <CSpinner color="primary" />
+          <p class="brdvx-loading-text">Memuat data...</p>
+        </div>
+
+        <BaseResponsiveDataView
+          v-else
+          :columns="columns"
+          :items="tenants"
+          server-side
+          :pagination="pagination"
+          :loading="loading"
+          initial-sort-by="id"
+          initial-sort-direction="desc"
+          :actions="tableActions"
+          row-key="id"
+          @action-click="onActionClick"
+          @query-change="fetchAllData"
+        />
+      </div>
+    </CCol>
+  </CRow>
+
+  <CModal :visible="modal" @close="modal = false" alignment="center">
+    <CModalHeader dismiss @close="modal = false">
+      <CModalTitle>{{ isEdit ? 'Edit Tenant' : 'Tambah Tenant' }}</CModalTitle>
+    </CModalHeader>
+    <CModalBody>
+      <CForm>
+        <div class="mb-3">
+          <CFormLabel>Tenant Code</CFormLabel>
+          <CFormInput v-model="form.tenant_code" placeholder="Contoh: TNT-001" />
+        </div>
+        <div class="mb-3">
+          <CFormLabel>Tenant Name</CFormLabel>
+          <CFormInput v-model="form.tenant_name" placeholder="Nama tenant" />
+        </div>
+        <div class="mb-3">
+          <CFormLabel>Phone</CFormLabel>
+          <CFormInput v-model="form.phone" placeholder="Nomor telepon (opsional)" />
+        </div>
+        <div class="mb-3">
+          <CFormLabel>Email</CFormLabel>
+          <CFormInput v-model="form.email" type="email" placeholder="Email (opsional)" />
+        </div>
+        <div class="mb-3">
+          <CFormLabel>Address</CFormLabel>
+          <CFormTextarea v-model="form.address" rows="3" placeholder="Alamat (opsional)" />
+        </div>
+        <div class="mb-3">
+          <CFormLabel>Status</CFormLabel>
+          <CFormSelect v-model="form.status">
+            <option value="active">Active</option>
+            <option value="inactive">Inactive</option>
+          </CFormSelect>
+        </div>
+      </CForm>
+    </CModalBody>
+    <CModalFooter>
+      <CButton color="secondary" size="sm" @click="modal = false" :disabled="saving">Batal</CButton>
+      <CButton color="primary" size="sm" @click="saveItem" :disabled="saving">
+        <span v-if="saving">Menyimpan...</span>
+        <span v-else>Simpan</span>
+      </CButton>
+    </CModalFooter>
+  </CModal>
+
+  <CModal :visible="detailModal" @close="detailModal = false" alignment="center">
+    <CModalHeader dismiss @close="detailModal = false">
+      <CModalTitle>Detail Tenant</CModalTitle>
+    </CModalHeader>
+    <CModalBody>
+      <CTable bordered small v-if="detailItem">
+        <CTableBody>
+          <CTableRow>
+            <CTableHeaderCell style="width: 40%">ID</CTableHeaderCell>
+            <CTableDataCell>{{ detailItem.id }}</CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Tenant Code</CTableHeaderCell>
+            <CTableDataCell>{{ detailItem.tenant_code }}</CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Tenant Name</CTableHeaderCell>
+            <CTableDataCell>{{ detailItem.tenant_name }}</CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Phone</CTableHeaderCell>
+            <CTableDataCell>{{ detailItem.phone }}</CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Email</CTableHeaderCell>
+            <CTableDataCell>{{ detailItem.email }}</CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Address</CTableHeaderCell>
+            <CTableDataCell>{{ detailItem.address }}</CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Status</CTableHeaderCell>
+            <CTableDataCell>
+              <CBadge :color="detailItem.status === 'active' ? 'success' : 'secondary'">
+                {{ detailItem.status === 'active' ? 'Aktif' : 'Nonaktif' }}
+              </CBadge>
+            </CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Created At</CTableHeaderCell>
+            <CTableDataCell>{{ formatTanggal(detailItem.created_at) }}</CTableDataCell>
+          </CTableRow>
+          <CTableRow>
+            <CTableHeaderCell>Updated At</CTableHeaderCell>
+            <CTableDataCell>{{ formatTanggal(detailItem.updated_at) }}</CTableDataCell>
+          </CTableRow>
+        </CTableBody>
+      </CTable>
+    </CModalBody>
+    <CModalFooter>
+      <CButton color="secondary" size="sm" @click="detailModal = false">Tutup</CButton>
+    </CModalFooter>
+  </CModal>
+</template>
+
diff --git a/src/views/users/Users.vue b/src/views/users/Users.vue
new file mode 100644
index 00000000..c46161f0
--- /dev/null
+++ b/src/views/users/Users.vue
@@ -0,0 +1,564 @@
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import BaseResponsiveDataView from '@/components/base/BaseResponsiveDataView.vue'
+import { useAuthStore } from '@/stores/auth'
+import { createUser, deleteUser, getUserById, getUsers, updateUser } from '@/services/userService'
+import { getTemporaryFileUrl } from '@/services/fileService'
+import { getMenuGroups } from '@/services/menuGroupService'
+import { getTenants } from '@/services/tenantService'
+import {
+  getAlamatWilayah,
+  getDesaOptions,
+  getKabupatenOptions,
+  getKecamatanOptions,
+  getProvinsiOptions,
+} from '@/services/wilayahService'
+import { showConfirm, showError, showSuccess } from '@/utils/swal.js'
+
+const DEFAULT_USER_AVATAR = '/user-default.jpg'
+const authStore = useAuthStore()
+const loading = ref(true)
+const loadedOnce = ref(false)
+const saving = ref(false)
+const formLoading = ref(false)
+const detailLoading = ref(false)
+const users = ref([])
+const pagination = ref({ current_page: 1, last_page: 1, per_page: 10, total: 0 })
+const currentQuery = ref({ page: 1, per_page: 10, sort_by: 'id', sort_direction: 'desc' })
+const modal = ref(false)
+const detailModal = ref(false)
+const editingId = ref(null)
+const detailItem = ref(null)
+const detailAddress = ref('')
+const tenantOptions = ref([])
+const menuGroupOptions = ref([])
+const wilayahOptions = reactive({ provinsi: [], kabupaten: [], kecamatan: [], desa: [] })
+const wilayahLoading = reactive({ kabupaten: false, kecamatan: false, desa: false })
+
+const form = reactive(emptyForm())
+const isEdit = computed(() => editingId.value !== null)
+const isMasterActor = computed(
+  () => authStore.user?.is_master || authStore.user?.access_level === 'master_admin',
+)
+const accessLevels = [
+  { value: 'customer', label: 'Customer' },
+  { value: 'staff', label: 'Staff' },
+  { value: 'tenant_owner', label: 'Pemilik Tenant' },
+  { value: 'master_admin', label: 'Master Admin' },
+]
+const columns = [
+  { key: 'image', label: 'Avatar', sortable: false },
+  { key: 'name', label: 'Name' },
+  { key: 'email', label: 'Email' },
+  { key: 'phone', label: 'Phone', sortKey: 'whatsapp_number' },
+  { key: 'role', label: 'Role', sortKey: 'access_level' },
+  { key: 'status', label: 'Status' },
+]
+const tableActions = [
+  { key: 'detail', label: 'Detail', color: 'primary' },
+  { key: 'edit', label: 'Edit', color: 'success' },
+  { key: 'delete', label: 'Delete', color: 'danger' },
+]
+
+function emptyForm() {
+  return {
+    name: '',
+    username: '',
+    email: '',
+    whatsapp_number: '',
+    password: '',
+    access_level: 'staff',
+    status: 'active',
+    nik: '',
+    address: '',
+    provinsi_id: '',
+    kabupaten_id: '',
+    kecamatan_id: '',
+    desa_id: '',
+    tenantRows: [],
+    groupRows: [],
+  }
+}
+
+function normalizeResponseList(response) {
+  if (Array.isArray(response?.data?.data)) return response.data.data
+  if (Array.isArray(response?.data)) return response.data
+  return Array.isArray(response) ? response : []
+}
+
+function normalizeResponseItem(response) {
+  return response?.data?.data || response?.data || response
+}
+
+function normalizeUser(item = {}, index = 0) {
+  const levelLabels = {
+    customer: 'Customer',
+    staff: 'Staff',
+    tenant_owner: 'Pemilik Tenant',
+    master_admin: 'Master Admin',
+  }
+  return {
+    id: item.id ?? index + 1,
+    image: DEFAULT_USER_AVATAR,
+    imageFallback: DEFAULT_USER_AVATAR,
+    name: item.name || '-',
+    email: item.email || '-',
+    phone: item.whatsapp_number || '-',
+    role: levelLabels[item.access_level] || (item.is_master ? 'Master Admin' : 'Staff'),
+    status: item.status || '-',
+    raw: item,
+  }
+}
+
+async function resolveUserAvatar(user) {
+  const normalized = normalizeUser(user)
+  if (!user?.profile_photo?.uuid) return normalized
+  try {
+    const response = await getTemporaryFileUrl(user.profile_photo.uuid)
+    normalized.image = response?.data?.url || DEFAULT_USER_AVATAR
+  } catch {
+    normalized.image = DEFAULT_USER_AVATAR
+  }
+  return normalized
+}
+
+async function fetchUsers(params = currentQuery.value) {
+  currentQuery.value = { ...currentQuery.value, ...params }
+  params = currentQuery.value
+  loading.value = true
+  try {
+    const response = await getUsers(params)
+    const rows = normalizeResponseList(response)
+    users.value = await Promise.all(rows.map(resolveUserAvatar))
+    const meta = response?.data && !Array.isArray(response.data) ? response.data : {}
+    pagination.value = {
+      current_page: meta.current_page || params.page || 1,
+      last_page: meta.last_page || 1,
+      per_page: meta.per_page || params.per_page || 10,
+      total: meta.total || rows.length,
+    }
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal memuat data user.')
+  } finally {
+    loading.value = false
+    loadedOnce.value = true
+  }
+}
+
+async function loadFormReferences() {
+  formLoading.value = true
+  try {
+    const tenantPromise = isMasterActor.value
+      ? getTenants({ per_page: 100, sort_by: 'tenant_name', sort_direction: 'asc' })
+      : Promise.resolve({
+          data: (authStore.user?.user_tenants || []).map((row) => row.tenant).filter(Boolean),
+        })
+    const [tenantResponse, groupResponse, provinsiResponse] = await Promise.all([
+      tenantPromise,
+      getMenuGroups({ per_page: 100, sort_by: 'name', sort_direction: 'asc' }),
+      getProvinsiOptions(),
+    ])
+    tenantOptions.value = normalizeResponseList(tenantResponse)
+    menuGroupOptions.value = normalizeResponseList(groupResponse)
+    wilayahOptions.provinsi = normalizeResponseList(provinsiResponse)
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal memuat referensi form user.')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+async function loadWilayah(level, parentId) {
+  const childOrder = { kabupaten: ['kecamatan', 'desa'], kecamatan: ['desa'] }
+  wilayahOptions[level] = []
+  for (const child of childOrder[level] || []) wilayahOptions[child] = []
+  if (!parentId) return
+  wilayahLoading[level] = true
+  try {
+    const loaders = {
+      kabupaten: getKabupatenOptions,
+      kecamatan: getKecamatanOptions,
+      desa: getDesaOptions,
+    }
+    const response = await loaders[level](parentId)
+    wilayahOptions[level] = normalizeResponseList(response)
+  } catch (error) {
+    wilayahOptions[level] = []
+    showError(error?.response?.data?.message || `Gagal memuat pilihan ${level}.`)
+  } finally {
+    wilayahLoading[level] = false
+  }
+}
+
+async function onProvinsiChange(event) {
+  form.provinsi_id = event.target.value
+  form.kabupaten_id = ''
+  form.kecamatan_id = ''
+  form.desa_id = ''
+  await loadWilayah('kabupaten', form.provinsi_id)
+}
+
+async function onKabupatenChange(event) {
+  form.kabupaten_id = event.target.value
+  form.kecamatan_id = ''
+  form.desa_id = ''
+  await loadWilayah('kecamatan', form.kabupaten_id)
+}
+
+async function onKecamatanChange(event) {
+  form.kecamatan_id = event.target.value
+  form.desa_id = ''
+  await loadWilayah('desa', form.kecamatan_id)
+}
+
+function addTenantRow() {
+  form.tenantRows.push({ tenant_id: '', is_default: form.tenantRows.length === 0 })
+}
+
+function removeTenantRow(index) {
+  const wasDefault = form.tenantRows[index]?.is_default
+  form.tenantRows.splice(index, 1)
+  if (wasDefault && form.tenantRows.length) form.tenantRows[0].is_default = true
+}
+
+function setDefaultTenant(index) {
+  form.tenantRows.forEach((row, rowIndex) => {
+    row.is_default = rowIndex === index
+  })
+}
+
+function addGroupRow() {
+  form.groupRows.push({ menu_group_id: '', tenant_id: defaultTenantId() })
+}
+
+function defaultTenantId() {
+  return form.tenantRows.find((row) => row.is_default)?.tenant_id || form.tenantRows[0]?.tenant_id || ''
+}
+
+function tenantName(id) {
+  return tenantOptions.value.find((tenant) => Number(tenant.id) === Number(id))?.tenant_name || `Tenant #${id}`
+}
+
+function groupName(id) {
+  return menuGroupOptions.value.find((group) => Number(group.id) === Number(id))?.name || `Group #${id}`
+}
+
+async function openAddModal() {
+  editingId.value = null
+  Object.assign(form, emptyForm())
+  await loadFormReferences()
+  if (!isMasterActor.value && tenantOptions.value.length) {
+    form.tenantRows = [{ tenant_id: String(tenantOptions.value[0].id), is_default: true }]
+  } else {
+    addTenantRow()
+  }
+  modal.value = true
+}
+
+async function hydrateForm(user) {
+  const profile = user?.user_profile || {}
+  Object.assign(form, emptyForm(), {
+    name: user?.name || '',
+    username: user?.username || '',
+    email: user?.email || '',
+    whatsapp_number: user?.whatsapp_number || '',
+    access_level: user?.access_level || 'staff',
+    status: user?.status || 'active',
+    nik: profile.nik || '',
+    address: profile.address || '',
+    provinsi_id: profile.provinsi_id ? String(profile.provinsi_id) : '',
+    kabupaten_id: profile.kabupaten_id ? String(profile.kabupaten_id) : '',
+    kecamatan_id: profile.kecamatan_id ? String(profile.kecamatan_id) : '',
+    desa_id: profile.desa_id ? String(profile.desa_id) : '',
+    tenantRows: (user?.user_tenants || []).map((row) => ({
+      tenant_id: String(row.tenant_id),
+      is_default: Boolean(row.is_default),
+    })),
+    groupRows: (user?.user_menu_groups || []).map((row) => ({
+      menu_group_id: String(row.menu_group_id),
+      tenant_id: row.tenant_id ? String(row.tenant_id) : '',
+    })),
+  })
+  if (form.provinsi_id) await loadWilayah('kabupaten', form.provinsi_id)
+  if (form.kabupaten_id) await loadWilayah('kecamatan', form.kabupaten_id)
+  if (form.kecamatan_id) await loadWilayah('desa', form.kecamatan_id)
+}
+
+async function openEditModal(item) {
+  editingId.value = item.id
+  formLoading.value = true
+  modal.value = true
+  try {
+    const [response] = await Promise.all([getUserById(item.id), loadFormReferences()])
+    await hydrateForm(normalizeResponseItem(response))
+  } catch (error) {
+    modal.value = false
+    showError(error?.response?.data?.message || 'Gagal memuat data user.')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+function nullableId(value) {
+  return value ? Number(value) : null
+}
+
+function buildPayload() {
+  const tenantRows = form.tenantRows
+    .filter((row) => row.tenant_id)
+    .map((row) => ({ tenant_id: Number(row.tenant_id), is_default: Boolean(row.is_default) }))
+  const groupRows = form.groupRows
+    .filter((row) => row.menu_group_id)
+    .map((row) => ({
+      menu_group_id: Number(row.menu_group_id),
+      tenant_id: nullableId(row.tenant_id),
+    }))
+  const payload = {
+    name: form.name.trim(),
+    username: form.username.trim() || null,
+    email: form.email.trim(),
+    whatsapp_number: form.whatsapp_number.trim() || null,
+    access_level: form.access_level,
+    is_master: form.access_level === 'master_admin',
+    status: form.status,
+    user_profile: {
+      nik: form.nik.trim() || null,
+      address: form.address.trim() || null,
+      provinsi_id: nullableId(form.provinsi_id),
+      kabupaten_id: nullableId(form.kabupaten_id),
+      kecamatan_id: nullableId(form.kecamatan_id),
+      desa_id: nullableId(form.desa_id),
+    },
+    user_tenants: tenantRows,
+    user_menu_groups: groupRows,
+  }
+  if (!isEdit.value || form.password) payload.password = form.password
+  return payload
+}
+
+function validateForm() {
+  if (!form.name.trim() || !form.email.trim()) return 'Nama dan email wajib diisi.'
+  if (!isEdit.value && form.password.length < 8) return 'Password minimal 8 karakter.'
+  if (form.password && form.password.length < 8) return 'Password minimal 8 karakter.'
+  const tenantIds = form.tenantRows.filter((row) => row.tenant_id).map((row) => row.tenant_id)
+  if (new Set(tenantIds).size !== tenantIds.length) return 'Tenant tidak boleh dipilih lebih dari satu kali.'
+  if (form.tenantRows.length && !form.tenantRows.some((row) => row.is_default)) return 'Pilih satu tenant default.'
+  if (form.groupRows.some((row) => !row.menu_group_id || (!row.tenant_id && form.access_level !== 'master_admin'))) {
+    return 'Group menu dan tenant assignment wajib dipilih.'
+  }
+  return null
+}
+
+async function submitForm() {
+  const validationMessage = validateForm()
+  if (validationMessage) return showError(validationMessage)
+  saving.value = true
+  try {
+    const payload = buildPayload()
+    if (isEdit.value) {
+      await updateUser(editingId.value, payload)
+      showSuccess('User berhasil diperbarui.')
+    } else {
+      await createUser(payload)
+      showSuccess('User berhasil ditambahkan.')
+    }
+    modal.value = false
+    await fetchUsers()
+  } catch (error) {
+    const errors = error?.response?.data?.errors
+    showError(
+      (errors && Object.values(errors).flat()[0]) ||
+        error?.response?.data?.message ||
+        'Gagal menyimpan user.',
+    )
+  } finally {
+    saving.value = false
+  }
+}
+
+async function openDetailModal(item) {
+  detailLoading.value = true
+  detailModal.value = true
+  try {
+    detailItem.value = normalizeResponseItem(await getUserById(item.id))
+    const profile = detailItem.value?.user_profile || {}
+    const addressParams = profile.desa_id
+      ? { desa_id: profile.desa_id }
+      : profile.kecamatan_id
+        ? { kecamatan_id: profile.kecamatan_id }
+        : profile.kabupaten_id
+          ? { kabupaten_id: profile.kabupaten_id }
+          : profile.provinsi_id
+            ? { provinsi_id: profile.provinsi_id }
+            : null
+    detailAddress.value = ''
+    if (addressParams) {
+      const addressResponse = await getAlamatWilayah(addressParams).catch(() => null)
+      detailAddress.value = addressResponse?.data?.alamat_wilayah || ''
+    }
+  } catch (error) {
+    detailModal.value = false
+    showError(error?.response?.data?.message || 'Gagal mengambil detail user.')
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+async function removeUser(item) {
+  const confirmation = await showConfirm('Hapus user ini?', 'Data yang dihapus tidak dapat dikembalikan.')
+  if (!confirmation.isConfirmed) return
+  try {
+    await deleteUser(item.id)
+    showSuccess('User berhasil dihapus.')
+    await fetchUsers()
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal menghapus user.')
+  }
+}
+
+function handleActionClick({ action, item }) {
+  if (action === 'detail') openDetailModal(item)
+  if (action === 'edit') openEditModal(item)
+  if (action === 'delete') removeUser(item)
+}
+
+onMounted(fetchUsers)
+</script>
+
+<template>
+  <CRow class="brdvx-page-row g-0 m-0">
+    <CCol :xs="12" class="brdvx-page-column p-0">
+      <div class="brdvx-page-container">
+        <div class="brdvx-page-header d-flex justify-content-between align-items-center flex-wrap gap-2">
+          <h5 class="mb-0 fw-semibold">Users</h5>
+          <CButton color="primary" size="sm" @click="openAddModal">Tambah User</CButton>
+        </div>
+        <div v-if="loading && !loadedOnce" class="brdvx-loading-state" role="status">
+          <CSpinner color="primary" />
+          <p class="brdvx-loading-text">Memuat data...</p>
+        </div>
+        <BaseResponsiveDataView
+          v-else
+          :columns="columns"
+          :items="users"
+          server-side
+          :pagination="pagination"
+          :loading="loading"
+          initial-sort-by="id"
+          initial-sort-direction="desc"
+          row-key="id"
+          :actions="tableActions"
+          @action-click="handleActionClick"
+          @query-change="fetchUsers"
+        />
+      </div>
+    </CCol>
+  </CRow>
+
+  <CModal :visible="modal" size="xl" alignment="center" scrollable @close="modal = false">
+    <CModalHeader><CModalTitle>{{ isEdit ? 'Edit User' : 'Tambah User' }}</CModalTitle></CModalHeader>
+    <CModalBody>
+      <div v-if="formLoading" class="brdvx-loading-state"><CSpinner color="primary" /><span>Memuat form...</span></div>
+      <CForm v-else>
+        <CCard class="mb-3">
+          <CCardHeader class="fw-semibold">Informasi Akun</CCardHeader>
+          <CCardBody>
+            <CRow class="g-3">
+              <CCol :md="6"><CFormLabel>Nama</CFormLabel><CFormInput v-model="form.name" /></CCol>
+              <CCol :md="6"><CFormLabel>Username</CFormLabel><CFormInput v-model="form.username" /></CCol>
+              <CCol :md="6"><CFormLabel>Email</CFormLabel><CFormInput v-model="form.email" type="email" /></CCol>
+              <CCol :md="6"><CFormLabel>WhatsApp</CFormLabel><CFormInput v-model="form.whatsapp_number" /></CCol>
+              <CCol :md="4">
+                <CFormLabel>Level Akses</CFormLabel>
+                <CFormSelect v-model="form.access_level">
+                  <option v-for="level in accessLevels" :key="level.value" :value="level.value" :disabled="!isMasterActor && ['tenant_owner', 'master_admin'].includes(level.value)">
+                    {{ level.label }}
+                  </option>
+                </CFormSelect>
+              </CCol>
+              <CCol :md="4">
+                <CFormLabel>Status</CFormLabel>
+                <CFormSelect v-model="form.status">
+                  <option value="active">Aktif</option><option value="inactive">Nonaktif</option><option value="suspended">Ditangguhkan</option>
+                </CFormSelect>
+              </CCol>
+              <CCol :md="4"><CFormLabel>Password {{ isEdit ? '(opsional)' : '' }}</CFormLabel><CFormInput v-model="form.password" type="password" /></CCol>
+            </CRow>
+          </CCardBody>
+        </CCard>
+
+        <CCard class="mb-3">
+          <CCardHeader class="fw-semibold">Profil dan Wilayah</CCardHeader>
+          <CCardBody>
+            <CRow class="g-3">
+              <CCol :md="4"><CFormLabel>NIK</CFormLabel><CFormInput v-model="form.nik" /></CCol>
+              <CCol :md="8"><CFormLabel>Alamat</CFormLabel><CFormInput v-model="form.address" /></CCol>
+              <CCol :md="3"><CFormLabel>Provinsi</CFormLabel><CFormSelect v-model="form.provinsi_id" @change="onProvinsiChange"><option value="">Pilih provinsi</option><option v-for="row in wilayahOptions.provinsi" :key="row.id" :value="String(row.id)">{{ row.nama }}</option></CFormSelect></CCol>
+              <CCol :md="3"><CFormLabel>Kabupaten</CFormLabel><CFormSelect v-model="form.kabupaten_id" :disabled="!form.provinsi_id || wilayahLoading.kabupaten" @change="onKabupatenChange"><option value="">{{ wilayahLoading.kabupaten ? 'Memuat kabupaten...' : 'Pilih kabupaten' }}</option><option v-for="row in wilayahOptions.kabupaten" :key="row.id" :value="String(row.id)">{{ row.nama }}</option></CFormSelect></CCol>
+              <CCol :md="3"><CFormLabel>Kecamatan</CFormLabel><CFormSelect v-model="form.kecamatan_id" :disabled="!form.kabupaten_id || wilayahLoading.kecamatan" @change="onKecamatanChange"><option value="">{{ wilayahLoading.kecamatan ? 'Memuat kecamatan...' : 'Pilih kecamatan' }}</option><option v-for="row in wilayahOptions.kecamatan" :key="row.id" :value="String(row.id)">{{ row.nama }}</option></CFormSelect></CCol>
+              <CCol :md="3"><CFormLabel>Desa</CFormLabel><CFormSelect v-model="form.desa_id" :disabled="!form.kecamatan_id || wilayahLoading.desa"><option value="">{{ wilayahLoading.desa ? 'Memuat desa...' : 'Pilih desa' }}</option><option v-for="row in wilayahOptions.desa" :key="row.id" :value="String(row.id)">{{ row.nama }}</option></CFormSelect></CCol>
+            </CRow>
+          </CCardBody>
+        </CCard>
+
+        <CRow class="g-3">
+          <CCol :lg="6">
+            <CCard class="h-100">
+              <CCardHeader class="d-flex justify-content-between align-items-center"><span class="fw-semibold">Tenant User</span><CButton size="sm" color="primary" variant="outline" @click="addTenantRow">+ Tenant</CButton></CCardHeader>
+              <CCardBody>
+                <div v-if="!form.tenantRows.length" class="text-body-secondary">Belum ada tenant.</div>
+                <div v-for="(row, index) in form.tenantRows" :key="index" class="d-flex gap-2 align-items-center mb-2">
+                  <CFormSelect v-model="row.tenant_id"><option value="">Pilih tenant</option><option v-for="tenant in tenantOptions" :key="tenant.id" :value="String(tenant.id)">{{ tenant.tenant_code }} — {{ tenant.tenant_name }}</option></CFormSelect>
+                  <CFormCheck type="radio" name="default-tenant" label="Default" :checked="row.is_default" @change="setDefaultTenant(index)" />
+                  <CButton color="danger" variant="ghost" @click="removeTenantRow(index)">Hapus</CButton>
+                </div>
+              </CCardBody>
+            </CCard>
+          </CCol>
+          <CCol :lg="6">
+            <CCard class="h-100">
+              <CCardHeader class="d-flex justify-content-between align-items-center"><span class="fw-semibold">Group Menu</span><CButton size="sm" color="primary" variant="outline" @click="addGroupRow">+ Group</CButton></CCardHeader>
+              <CCardBody>
+                <div v-if="!form.groupRows.length" class="text-body-secondary">Belum ada group menu.</div>
+                <div v-for="(row, index) in form.groupRows" :key="index" class="d-flex gap-2 mb-2">
+                  <CFormSelect v-model="row.menu_group_id"><option value="">Pilih group</option><option v-for="group in menuGroupOptions" :key="group.id" :value="String(group.id)">{{ group.name }}</option></CFormSelect>
+                  <CFormSelect v-model="row.tenant_id"><option value="">Global</option><option v-for="tenantRow in form.tenantRows.filter((item) => item.tenant_id)" :key="tenantRow.tenant_id" :value="tenantRow.tenant_id">{{ tenantName(tenantRow.tenant_id) }}</option></CFormSelect>
+                  <CButton color="danger" variant="ghost" @click="form.groupRows.splice(index, 1)">Hapus</CButton>
+                </div>
+              </CCardBody>
+            </CCard>
+          </CCol>
+        </CRow>
+      </CForm>
+    </CModalBody>
+    <CModalFooter>
+      <CButton color="secondary" variant="ghost" :disabled="saving" @click="modal = false">Batal</CButton>
+      <CButton color="primary" :disabled="saving || formLoading" @click="submitForm">{{ saving ? 'Menyimpan...' : 'Simpan User' }}</CButton>
+    </CModalFooter>
+  </CModal>
+
+  <CModal :visible="detailModal" size="lg" alignment="center" scrollable @close="detailModal = false">
+    <CModalHeader><CModalTitle>Detail User</CModalTitle></CModalHeader>
+    <CModalBody>
+      <div v-if="detailLoading" class="brdvx-loading-state"><CSpinner color="primary" /><span>Memuat detail...</span></div>
+      <template v-else-if="detailItem">
+        <CRow class="g-3 mb-3">
+          <CCol :md="6"><div class="small text-body-secondary">Nama</div><div class="fw-semibold">{{ detailItem.name }}</div></CCol>
+          <CCol :md="6"><div class="small text-body-secondary">Username</div><div>{{ detailItem.username || '-' }}</div></CCol>
+          <CCol :md="6"><div class="small text-body-secondary">Email</div><div>{{ detailItem.email }}</div></CCol>
+          <CCol :md="6"><div class="small text-body-secondary">WhatsApp</div><div>{{ detailItem.whatsapp_number || '-' }}</div></CCol>
+          <CCol :md="6"><div class="small text-body-secondary">Level Akses</div><div>{{ detailItem.access_level }}</div></CCol>
+          <CCol :md="6"><div class="small text-body-secondary">Status</div><div>{{ detailItem.status }}</div></CCol>
+          <CCol :md="6"><div class="small text-body-secondary">NIK</div><div>{{ detailItem.user_profile?.nik || '-' }}</div></CCol>
+          <CCol :md="6"><div class="small text-body-secondary">Alamat</div><div>{{ detailItem.user_profile?.address || '-' }}</div></CCol>
+          <CCol :xs="12"><div class="small text-body-secondary">Wilayah</div><div>{{ detailAddress || '-' }}</div></CCol>
+        </CRow>
+        <h6>Tenant</h6>
+        <div class="d-flex flex-wrap gap-2 mb-3"><CBadge v-for="row in detailItem.user_tenants || []" :key="row.id" :color="row.is_default ? 'primary' : 'secondary'">{{ row.tenant?.tenant_name || `Tenant #${row.tenant_id}` }}{{ row.is_default ? ' (Default)' : '' }}</CBadge><span v-if="!detailItem.user_tenants?.length">-</span></div>
+        <h6>Group Menu</h6>
+        <div class="d-flex flex-column gap-2"><div v-for="row in detailItem.user_menu_groups || []" :key="row.id" class="border rounded p-2"><strong>{{ row.menu_group?.name || groupName(row.menu_group_id) }}</strong><span class="text-body-secondary"> — {{ row.tenant?.tenant_name || (row.tenant_id ? `Tenant #${row.tenant_id}` : 'Global') }}</span></div><span v-if="!detailItem.user_menu_groups?.length">-</span></div>
+      </template>
+    </CModalBody>
+    <CModalFooter><CButton color="secondary" @click="detailModal = false">Tutup</CButton></CModalFooter>
+  </CModal>
+</template>
diff --git a/src/views/wilayah/Wilayah.vue b/src/views/wilayah/Wilayah.vue
new file mode 100644
index 00000000..1195cbff
--- /dev/null
+++ b/src/views/wilayah/Wilayah.vue
@@ -0,0 +1,317 @@
+<script setup>
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import BaseResponsiveDataView from '@/components/base/BaseResponsiveDataView.vue'
+import {
+  createWilayah,
+  deleteWilayah,
+  getWilayah,
+  getWilayahById,
+  updateWilayah,
+} from '@/services/wilayahService'
+import { showConfirm, showError, showSuccess } from '@/utils/swal'
+
+const route = useRoute()
+const loading = ref(true)
+const loadedOnce = ref(false)
+const saving = ref(false)
+const items = ref([])
+const pagination = ref({ current_page: 1, last_page: 1, per_page: 10, total: 0 })
+const currentQuery = ref({ page: 1, per_page: 10, sort_by: 'nama', sort_direction: 'asc' })
+const parentOptions = ref([])
+const modal = ref(false)
+const detailModal = ref(false)
+const editingId = ref(null)
+const detail = ref(null)
+const form = reactive({ kode: '', nama: '', parent_id: '' })
+
+const configs = {
+  desa: {
+    title: 'Desa',
+    parentLevel: 'kecamatan',
+    parentKey: 'kecamatan_id',
+    parentLabel: 'Kecamatan',
+  },
+  kecamatan: {
+    title: 'Kecamatan',
+    parentLevel: 'kabupaten',
+    parentKey: 'kabupaten_id',
+    parentLabel: 'Kabupaten',
+  },
+  kabupaten: {
+    title: 'Kabupaten',
+    parentLevel: 'provinsi',
+    parentKey: 'provinsi_id',
+    parentLabel: 'Provinsi',
+  },
+  provinsi: {
+    title: 'Provinsi',
+    parentLevel: null,
+    parentKey: null,
+    parentLabel: null,
+  },
+}
+
+const tingkat = computed(() => route.meta.tingkat)
+const config = computed(() => configs[tingkat.value])
+const isEdit = computed(() => editingId.value !== null)
+const columns = computed(() => [
+  { key: 'kode', label: 'Kode' },
+  { key: 'nama', label: 'Nama' },
+  ...(config.value.parentKey
+    ? [{ key: 'parent_name', label: config.value.parentLabel, sortable: false }]
+    : []),
+  { key: 'hierarchy', label: 'Hierarki Wilayah', sortable: false },
+])
+
+function responseItems(response) {
+  const payload = response?.data
+  if (Array.isArray(payload)) return payload
+  return Array.isArray(payload?.data) ? payload.data : []
+}
+
+function normalize(item) {
+  const parent = config.value.parentKey ? item[config.value.parentLevel] : null
+  const hierarchy = [item.nama, item.kecamatan?.nama, item.kabupaten?.nama, item.provinsi?.nama]
+    .filter((value, index, values) => value && values.indexOf(value) === index)
+    .join(', ')
+
+  return {
+    ...item,
+    parent_name: parent?.nama || '-',
+    hierarchy: hierarchy || item.nama,
+  }
+}
+
+async function fetchItems(params = currentQuery.value) {
+  currentQuery.value = { ...currentQuery.value, ...params }
+  params = currentQuery.value
+  loading.value = true
+  try {
+    const response = await getWilayah(tingkat.value, params)
+    const rows = responseItems(response)
+    items.value = rows.map(normalize)
+    const meta = response?.data && !Array.isArray(response.data) ? response.data : {}
+    pagination.value = {
+      current_page: meta.current_page || params.page || 1,
+      last_page: meta.last_page || 1,
+      per_page: meta.per_page || params.per_page || 10,
+      total: meta.total || rows.length,
+    }
+  } catch (error) {
+    showError(error?.response?.data?.message || `Gagal memuat data ${config.value.title}.`)
+  } finally {
+    loading.value = false
+    loadedOnce.value = true
+  }
+}
+
+async function fetchParents() {
+  parentOptions.value = []
+  if (!config.value.parentLevel) return
+
+  try {
+    const response = await getWilayah(config.value.parentLevel, { per_page: 100 })
+    parentOptions.value = responseItems(response)
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal memuat pilihan wilayah induk.')
+  }
+}
+
+function resetForm() {
+  Object.assign(form, { kode: '', nama: '', parent_id: '' })
+}
+
+async function openCreate() {
+  editingId.value = null
+  resetForm()
+  await fetchParents()
+  modal.value = true
+}
+
+async function openEdit(item) {
+  editingId.value = item.id
+  await fetchParents()
+  Object.assign(form, {
+    kode: item.kode || '',
+    nama: item.nama || '',
+    parent_id: config.value.parentKey ? String(item[config.value.parentKey] || '') : '',
+  })
+  modal.value = true
+}
+
+async function openDetail(item) {
+  try {
+    const response = await getWilayahById(tingkat.value, item.id)
+    detail.value = normalize(response?.data || item)
+    detailModal.value = true
+  } catch (error) {
+    showError(error?.response?.data?.message || 'Gagal memuat detail wilayah.')
+  }
+}
+
+function payload() {
+  const data = {
+    kode: form.kode.trim(),
+    nama: form.nama.trim(),
+  }
+  if (config.value.parentKey) data[config.value.parentKey] = Number(form.parent_id)
+  return data
+}
+
+async function save() {
+  if (!form.kode.trim() || !form.nama.trim()) {
+    showError('Kode dan nama wilayah wajib diisi.')
+    return
+  }
+  if (config.value.parentKey && !form.parent_id) {
+    showError(`${config.value.parentLabel} wajib dipilih.`)
+    return
+  }
+
+  saving.value = true
+  try {
+    if (isEdit.value) {
+      await updateWilayah(tingkat.value, editingId.value, payload())
+    } else {
+      await createWilayah(tingkat.value, payload())
+    }
+    modal.value = false
+    showSuccess(`${config.value.title} berhasil ${isEdit.value ? 'diperbarui' : 'dibuat'}.`)
+    await fetchItems()
+  } catch (error) {
+    const errors = error?.response?.data?.errors
+    showError(
+      (errors && Object.values(errors).flat()[0]) ||
+        error?.response?.data?.message ||
+        'Gagal menyimpan wilayah.',
+    )
+  } finally {
+    saving.value = false
+  }
+}
+
+async function remove(item) {
+  const confirmation = await showConfirm(
+    `Hapus ${config.value.title}`,
+    `Hapus "${item.nama}"? Data yang masih memiliki wilayah di bawahnya tidak dapat dihapus.`,
+  )
+  if (!confirmation.isConfirmed) return
+
+  try {
+    await deleteWilayah(tingkat.value, item.id)
+    showSuccess(`${config.value.title} berhasil dihapus.`)
+    await fetchItems()
+  } catch (error) {
+    const errors = error?.response?.data?.errors
+    showError(
+      (errors && Object.values(errors).flat()[0]) ||
+        error?.response?.data?.message ||
+        'Gagal menghapus wilayah.',
+    )
+  }
+}
+
+function onAction({ action, item }) {
+  if (action === 'detail') openDetail(item)
+  if (action === 'edit') openEdit(item)
+  if (action === 'delete') remove(item)
+}
+
+watch(tingkat, () => {
+  modal.value = false
+  detailModal.value = false
+  fetchItems({ ...currentQuery.value, page: 1 })
+})
+
+onMounted(fetchItems)
+</script>
+
+<template>
+  <CRow class="brdvx-page-row g-0 m-0">
+    <CCol :xs="12" class="brdvx-page-column p-0">
+      <div class="brdvx-page-container">
+        <div class="brdvx-page-header d-flex justify-content-between align-items-center flex-wrap gap-2">
+          <div>
+            <h5 class="mb-1 fw-semibold">Wilayah {{ config.title }}</h5>
+            <div class="small text-body-secondary">Kelola referensi wilayah secara berjenjang.</div>
+          </div>
+          <div class="d-flex gap-2">
+            <CButton color="primary" size="sm" variant="outline" :disabled="loading" @click="fetchItems()">
+              {{ loading ? 'Memuat...' : 'Refresh' }}
+            </CButton>
+            <CButton color="primary" size="sm" @click="openCreate">+ Tambah {{ config.title }}</CButton>
+          </div>
+        </div>
+
+        <div v-if="loading && !loadedOnce" class="brdvx-loading-state" role="status" aria-live="polite">
+          <CSpinner color="primary" />
+          <p class="brdvx-loading-text">Memuat data...</p>
+        </div>
+
+        <BaseResponsiveDataView
+          v-else
+          :columns="columns"
+          :items="items"
+          server-side
+          :pagination="pagination"
+          :loading="loading"
+          initial-sort-by="nama"
+          initial-sort-direction="asc"
+          row-key="id"
+          @action-click="onAction"
+          @query-change="fetchItems"
+        />
+      </div>
+    </CCol>
+  </CRow>
+
+  <CModal :visible="modal" alignment="center" @close="modal = false">
+    <CModalHeader>
+      <CModalTitle>{{ isEdit ? 'Edit' : 'Tambah' }} {{ config.title }}</CModalTitle>
+    </CModalHeader>
+    <CModalBody>
+      <CRow class="g-3">
+        <CCol :md="5">
+          <CFormLabel>Kode</CFormLabel>
+          <CFormInput v-model="form.kode" maxlength="20" placeholder="Kode wilayah" />
+        </CCol>
+        <CCol :md="7">
+          <CFormLabel>Nama {{ config.title }}</CFormLabel>
+          <CFormInput v-model="form.nama" :placeholder="`Nama ${config.title.toLowerCase()}`" />
+        </CCol>
+        <CCol v-if="config.parentKey" :xs="12">
+          <CFormLabel>{{ config.parentLabel }}</CFormLabel>
+          <CFormSelect v-model="form.parent_id">
+            <option value="">Pilih {{ config.parentLabel }}</option>
+            <option v-for="parent in parentOptions" :key="parent.id" :value="String(parent.id)">
+              {{ parent.kode }} — {{ parent.nama }}
+            </option>
+          </CFormSelect>
+          <div class="form-text">{{ config.parentLabel }} wajib dipilih sesuai tingkatan wilayah.</div>
+        </CCol>
+      </CRow>
+    </CModalBody>
+    <CModalFooter>
+      <CButton color="secondary" variant="ghost" :disabled="saving" @click="modal = false">Batal</CButton>
+      <CButton color="primary" :disabled="saving" @click="save">
+        {{ saving ? 'Menyimpan...' : 'Simpan' }}
+      </CButton>
+    </CModalFooter>
+  </CModal>
+
+  <CModal :visible="detailModal" alignment="center" @close="detailModal = false">
+    <CModalHeader><CModalTitle>Detail {{ config.title }}</CModalTitle></CModalHeader>
+    <CModalBody v-if="detail">
+      <div class="small text-body-secondary">Kode</div>
+      <div class="fw-semibold mb-3">{{ detail.kode }}</div>
+      <div class="small text-body-secondary">Nama</div>
+      <div class="fw-semibold mb-3">{{ detail.nama }}</div>
+      <div class="small text-body-secondary">Hierarki Wilayah</div>
+      <div>{{ detail.hierarchy }}</div>
+    </CModalBody>
+    <CModalFooter>
+      <CButton color="secondary" @click="detailModal = false">Tutup</CButton>
+    </CModalFooter>
+  </CModal>
+</template>