Project Website CMS: Membangun AdminLayout.vue dan Dashboard.vue

Sekarang kita akan membangun AdminLayout.vue dan Dashboard.vue dari nol, dengan pendekatan yang:

✅ Aman
✅ Rapi dan ringan
✅ Terintegrasi dengan Tailwind CSS
✅ Siap untuk dikembangkan lebih lanjut (CRUD, dll)

📁 Struktur Komponen yang Akan Kita Buat

src/
├── layouts/
│   └── AdminLayout.vue     // ← Layout admin dengan header + sidebar
├── views/
│   └── admin/
│       └── Dashboard.vue   // ← Halaman dashboard pertama setelah login

✅ 1. AdminLayout.vue (Header + Sidebar)

directory: src/layouts/AdminLayout.vue

<template>
  <div class="min-h-screen flex bg-gray-100">
    <!-- Sidebar -->
    <aside class="w-64 bg-white shadow-md hidden md:block">
      <div class="p-6 font-bold text-blue-600 text-xl border-b border-gray-200">
        STIP Admin
      </div>
      <nav class="p-4 space-y-2 text-gray-700">
        <RouterLink
          to="/admin/dashboard"
          class="block px-4 py-2 rounded hover:bg-blue-100"
          active-class="bg-blue-200 text-blue-800 font-semibold"
        >
          Dashboard
        </RouterLink>
        <!-- Tambahkan menu lainnya nanti -->
      </nav>
    </aside>

    <!-- Main Content -->
    <div class="flex-1 flex flex-col">
      <!-- Header -->
      <header class="bg-white shadow p-4 flex justify-between items-center">
        <div class="text-xl font-semibold text-gray-700">Dashboard</div>
        <div class="flex items-center gap-4">
          <div class="text-gray-600">{{ auth.user?.name || "Admin" }}</div>
          <button
            @click="handleLogout"
            class="text-sm bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded"
          >
            Logout
          </button>
        </div>
      </header>

      <!-- Dynamic Content -->
      <main class="p-6">
        <RouterView />
      </main>
    </div>
  </div>
</template>

<script setup>
import { useAuthStore } from '@/stores/auth';
import { useRouter, RouterView, RouterLink } from 'vue-router';
import { watchEffect } from 'vue';

const auth = useAuthStore();
const router = useRouter();

watchEffect(() => {
  if (!auth.isAuthenticated) {
    router.replace({ name: 'admin-login' });
  }
});

const handleLogout = () => {
  auth.logout();
  router.push({ name: 'admin-login' });
};
</script>

✅ 2. Dashboard.vue

directory: src/layouts/AdminLayout.vue

<template>
  <div>
    <h1 class="text-2xl font-bold text-gray-800 mb-4">Selamat Datang di Admin Dashboard</h1>
    <p class="text-gray-600">
      Gunakan menu di sebelah kiri untuk mengelola konten website STIP.
    </p>
  </div>
</template>

<script setup>
// Nanti bisa tambahkan logic/komponen di sini
</script>

---

🔐 Keamanan (Sudah Diatur):

• Auth guard ada di router (kamu sudah punya).

• Layout ini juga punya watchEffect → auto-redirect kalau belum login.

• Logout menghapus token dan mengarahkan ulang ke halaman login.

---

🎨 Desain:

• Sudah responsif (sidebar disembunyikan di mobile).

• Sudah pakai Tailwind dan siap pakai komponen lain.

• Struktur layout sangat modular dan mudah dikembangkan (tambah menu, page baru, dll).

---

✅ Langkah Lanjut:

1. Salin kedua file ke tempat yang ditentukan (layouts dan views/admin).

2. Pastikan router index.js sudah mengarah ke AdminLayout dan Dashboard.vue.

Contoh route:

directory: frontend/src/routes/index.js

{
  path: '/admin',
  component: AdminLayout,
  children: [
    {
      path: 'dashboard',
      name: 'admin-dashboard',
      component: Dashboard,
    },
    // Tambahkan route lainnya di sini
  ],
  meta: { requiresAuth: true },
}

Yuk, langsung cobain yuk!
Semoga berhasil