feat:menambahkan fitur superadmin

src/components/Navbar.vue

@@ -14,16 +14,41 @@
         <RouterLink class="nav-link" to="/jual">Jual Barang</RouterLink>
         <RouterLink class="nav-link" to="/dashboard">Dashboard</RouterLink>
         <RouterLink class="nav-link" to="/tersimpan">Tersimpan</RouterLink>
+
+        <RouterLink
+          v-if="isSuperadmin"
+          class="nav-link"
+          to="/admin/products"
+        >
+          Admin Marketplace
+        </RouterLink>
       </nav>
 
       <div class="hidden items-center gap-3 md:flex">
         <template v-if="currentUser">
-          <span class="text-sm font-bold text-slate-700">{{ currentUser.name }}</span>
-          <button class="btn-secondary !px-4 !py-2" @click="logout">Logout</button>
+          <span class="text-sm font-bold text-slate-700">
+            {{ currentUser.name }}
+          </span>
+
+          <span
+            v-if="isSuperadmin"
+            class="rounded-full bg-red-50 px-3 py-1 text-xs font-bold text-red-700"
+          >
+            Superadmin
+          </span>
+
+          <button class="btn-secondary !px-4 !py-2" @click="logout">
+            Logout
+          </button>
         </template>
+
         <template v-else>
-          <RouterLink to="/login" class="btn-secondary !px-4 !py-2">Login</RouterLink>
-          <RouterLink to="/register" class="btn-primary !px-4 !py-2">Register</RouterLink>
+          <RouterLink to="/login" class="btn-secondary !px-4 !py-2">
+            Login
+          </RouterLink>
+          <RouterLink to="/register" class="btn-primary !px-4 !py-2">
+            Register
+          </RouterLink>
         </template>
       </div>
 
@@ -34,17 +59,42 @@
 
     <div v-if="open" class="border-t border-slate-200 bg-white md:hidden">
       <div class="container-page grid gap-2 py-4">
-        <RouterLink class="mobile-link" to="/" @click="open=false">Home</RouterLink>
-        <RouterLink class="mobile-link" to="/marketplace" @click="open=false">Marketplace</RouterLink>
-        <RouterLink class="mobile-link" to="/jual" @click="open=false">Jual Barang</RouterLink>
-        <RouterLink class="mobile-link" to="/dashboard" @click="open=false">Dashboard</RouterLink>
-        <RouterLink class="mobile-link" to="/tersimpan" @click="open=false">Tersimpan</RouterLink>
+        <RouterLink class="mobile-link" to="/" @click="open = false">Home</RouterLink>
+        <RouterLink class="mobile-link" to="/marketplace" @click="open = false">Marketplace</RouterLink>
+        <RouterLink class="mobile-link" to="/jual" @click="open = false">Jual Barang</RouterLink>
+        <RouterLink class="mobile-link" to="/dashboard" @click="open = false">Dashboard</RouterLink>
+        <RouterLink class="mobile-link" to="/tersimpan" @click="open = false">Tersimpan</RouterLink>
+
+        <RouterLink
+          v-if="isSuperadmin"
+          class="mobile-link"
+          to="/admin/products"
+          @click="open = false"
+        >
+          Admin Marketplace
+        </RouterLink>
+
         <div v-if="currentUser" class="mt-2 grid gap-2">
-          <button class="btn-secondary !py-2 text-center" @click="logout">Logout</button>
+          <div class="rounded-xl bg-slate-50 px-3 py-2">
+            <p class="text-sm font-bold text-slate-800">{{ currentUser.name }}</p>
+            <p class="text-xs text-slate-500">{{ currentUser.email }}</p>
+            <p v-if="isSuperadmin" class="mt-1 text-xs font-bold text-red-700">
+              Superadmin
+            </p>
+          </div>
+
+          <button class="btn-secondary !py-2 text-center" @click="logout">
+            Logout
+          </button>
         </div>
+
         <div v-else class="mt-2 grid grid-cols-2 gap-2">
-          <RouterLink to="/login" class="btn-secondary !py-2 text-center" @click="open=false">Login</RouterLink>
-          <RouterLink to="/register" class="btn-primary !py-2 text-center" @click="open=false">Register</RouterLink>
+          <RouterLink to="/login" class="btn-secondary !py-2 text-center" @click="open = false">
+            Login
+          </RouterLink>
+          <RouterLink to="/register" class="btn-primary !py-2 text-center" @click="open = false">
+            Register
+          </RouterLink>
         </div>
       </div>
     </div>
@@ -52,16 +102,20 @@
 </template>
 
 <script setup>
-import { ref, watch } from "vue"
+import { computed, onMounted, ref, watch } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { Cpu, Menu } from "lucide-vue-next"
-import { clearAuth, getCurrentUser } from "../utils"
+import { clearAuth, fetchCurrentUser, getCurrentUser, getToken, setAuth } from "../utils"
 
 const open = ref(false)
 const route = useRoute()
 const router = useRouter()
 const currentUser = ref(getCurrentUser())
 
+const isSuperadmin = computed(() => {
+  return currentUser.value?.role === "superadmin"
+})
+
 watch(
   () => route.fullPath,
   () => {
@@ -69,21 +123,41 @@ watch(
   }
 )
 
+async function refreshCurrentUser() {
+  if (!getToken()) return
+
+  try {
+    const data = await fetchCurrentUser()
+    setAuth({
+      token: getToken(),
+      user: data.user
+    })
+    currentUser.value = getCurrentUser()
+  } catch {
+    clearAuth()
+    currentUser.value = null
+  }
+}
+
 function logout() {
   clearAuth()
   currentUser.value = null
   open.value = false
   router.push("/login")
 }
+
+onMounted(refreshCurrentUser)
 </script>
 
 <style scoped>
 .nav-link {
   @apply text-sm font-semibold text-slate-600 transition hover:text-brand-700;
 }
+
 .router-link-active {
   @apply text-brand-700;
 }
+
 .mobile-link {
   @apply rounded-xl px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-100;
 }