Aplikasi frontend modern dan responsif untuk manajemen dashboard admin. Dibangun menggunakan ekosistem terbaru Next.js dan desain sistem bergaya enterprise yang elegan. Terintegrasi penuh dengan backend NestJS untuk autentikasi, manajemen pengguna, dan kontrol akses (RBAC).

✨ Fitur Unggulan

• ? Next.js App Router: Performa tinggi dan optimasi routing modern (Next.js v16).
• ? Enterprise UI/UX: Desain antarmuka premium menggunakan Tailwind CSS v4 dengan palet zinc, efek glassmorphism, dan transisi dark/light mode yang mulus.
• ?️ Dynamic RBAC: Tampilan dan menu yang secara otomatis menyesuaikan dengan hak akses (permissions) pengguna.
• ? State Management: Pengelolaan state yang ringan dan reaktif menggunakan Zustand (untuk autentikasi dan status sidebar).
• ? Smart Authentication: Manajemen sesi pintar menggunakan Axios Interceptors (termasuk auto-refresh token dan request queueing agar pengguna tidak ter-logout saat sesi didiamkan).
• ? Komponen Modular: Menggunakan fondasi komponen dari Radix UI dan Shadcn UI untuk aksesibilitas dan kemudahan kustomisasi.
• ✨ Dynamic Favicon & SEO: Favicon aplikasi di-generate secara dinamis (menggunakan next/og dan icon.tsx) membaca file logo di konfigurasi. Judul HTML juga akan menyesuaikan secara dinamis per-halaman.

---

?️ Tech Stack

• Framework: React 19, Next.js 16
• Styling: Tailwind CSS v4, tailwind-merge, clsx
• State Management: Zustand
• Data Fetching & API: Axios, TanStack React Query
• UI Components: Radix UI Primitives, Lucide Icons, Sonner (Toasts)
• Forms & Validation: React Hook Form, Zod

---

⚙️ Persiapan & Instalasi

1. Prasyarat Sistem

Pastikan Anda telah menginstal:

• Node.js (Versi 20.x atau terbaru disarankan)
• npm, yarn, atau pnpm

2. Instalasi Dependencies

Buka terminal, masuk ke direktori admin_nextstart, dan jalankan:

npm install

3. Konfigurasi Backend Proxy

Secara default, aplikasi akan mengarahkan semua request API (/api/*) ke backend lokal menggunakan sistem rewrites Next.js.

Untuk mengatur URL backend, salin file .env.example menjadi .env dan sesuaikan nilai NEXT_PUBLIC_API_URL:

NEXT_PUBLIC_API_URL=http://localhost:3001/api

URL ini akan secara otomatis digunakan oleh next.config.ts untuk mengarahkan rute API:

// next.config.ts
const nextConfig = {
  async rewrites() {
    const apiUrl =
      process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001/api";
    return [
      {
        source: "/api/:path*",
        destination: `${apiUrl}/:path*`,
      },
    ];
  },
};

---

? Menjalankan Aplikasi

Mode Development (Pengembangan)

Untuk menjalankan aplikasi dalam mode pengembangan dengan fitur Hot Module Replacement (HMR):

npm run dev

Buka http://localhost:3000 di browser Anda.

Mode Production (Produksi)

Untuk menguji hasil build produksi secara lokal:

npm run build
npm run start

---

? Struktur Direktori Utama

• src/app/ - Konfigurasi routing Next.js (Dashboard, Login, dll).
• src/components/ - Komponen UI reusable (Navbar, Sidebar, komponen Shadcn).
• src/config/ - Konfigurasi statis aplikasi (Menu navigasi, identitas aplikasi).
• src/features/ - Modul fitur spesifik (Users, Roles, Permissions, Auth).
• src/lib/ - Utilitas pendukung (Konfigurasi Axios, utils fungsi).
• src/store/ - Manajemen state global menggunakan Zustand.

---

? Catatan Tambahan untuk Developer

• Tema & Warna: Seluruh warna tema dikendalikan secara dinamis melalui utilitas Tailwind (zinc palette). Jika ada penambahan UI baru, pastikan menggunakan format kelas seperti bg-white dark:bg-zinc-950 untuk mendukung Dark Mode.
• Ikon & Logo: Aplikasi ini menggunakan Lucide React. Pengaturan logo utama dan nama aplikasi dapat diubah di src/config/app.ts. Favicon akan secara otomatis meniru file gambar (seperti /logo.png) yang Anda referensikan di konfigurasi tersebut tanpa perlu setup manual tambahan.