feat: add profile page for both user and admin with ability to change password

src/app/admin/layout.tsx

@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { FaBus, FaChartBar, FaMapMarkedAlt, FaCalendarAlt, FaTicketAlt, FaShuttleVan, FaCog, FaSignOutAlt } from 'react-icons/fa';
+import { FaBus, FaChartBar, FaMapMarkedAlt, FaCalendarAlt, FaTicketAlt, FaShuttleVan, FaCog, FaSignOutAlt, FaUser } from 'react-icons/fa';
 import styles from './AdminLayout.module.css';
 
 interface User {
@@ -116,6 +116,9 @@ export default function AdminLayout({
           <Link href="/admin/settings" className={`${styles.navLink} ${pathname.startsWith('/admin/settings') ? styles.active : ''}`}>
             <span className={styles.navIcon}><FaCog /></span> Pengaturan Brand
           </Link>
+          <Link href="/admin/profile" className={`${styles.navLink} ${pathname.startsWith('/admin/profile') ? styles.active : ''}`}>
+            <span className={styles.navIcon}><FaUser /></span> Profil Saya
+          </Link>
         </nav>
 
         <div className={styles.sidebarFooter}>
@@ -147,6 +150,8 @@ export default function AdminLayout({
                     ? 'Tata Letak Kursi Armada'
                     : pathname.startsWith('/admin/settings')
                       ? 'Pengaturan Brand & Pembayaran'
+                      : pathname.startsWith('/admin/profile')
+                        ? 'Pengaturan Profil Admin'
                         : 'Kelola Pemesanan Tiket'}
           </h2>
           <div className={styles.dateDisplay}>

src/app/admin/profile/AdminProfile.module.css

@@ -0,0 +1,91 @@
+.container {
+  animation: fadeIn 0.4s ease-out forwards;
+}
+
+.profileGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+}
+
+@media (max-width: 900px) {
+  .profileGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.sectionTitle {
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: var(--text-white);
+  margin-bottom: 24px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid var(--border-light);
+  padding-bottom: 12px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.alert {
+  padding: 14px 16px;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  margin-bottom: 25px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.alertSuccess {
+  background: rgba(16, 185, 129, 0.15);
+  color: var(--accent-emerald);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.alertError {
+  background: rgba(244, 63, 94, 0.15);
+  color: var(--accent-rose);
+  border: 1px solid rgba(244, 63, 94, 0.3);
+}
+
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  color: var(--text-secondary);
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  border-top-color: var(--primary);
+  animation: spin 1s ease-in-out infinite;
+  margin-bottom: 15px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/app/admin/profile/page.tsx

@@ -0,0 +1,253 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { FaUser, FaLock, FaCheckCircle, FaExclamationCircle } from 'react-icons/fa';
+import styles from './AdminProfile.module.css';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  phone: string;
+  role: string;
+  createdAt: string;
+}
+
+export default function AdminProfile() {
+  const router = useRouter();
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  
+  // Profile form state
+  const [name, setName] = useState('');
+  const [phone, setPhone] = useState('');
+
+  // Password form state
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  const [savingProfile, setSavingProfile] = useState(false);
+  const [savingPassword, setSavingPassword] = useState(false);
+  const [successMsg, setSuccessMsg] = useState('');
+  const [errorMsg, setErrorMsg] = useState('');
+
+  useEffect(() => {
+    async function fetchProfile() {
+      try {
+        const res = await fetch('/api/user/profile');
+        if (!res.ok) {
+          router.push('/login?redirect=/admin/profile');
+          return;
+        }
+        const data = await res.json();
+        if (data.user.role !== 'ADMIN') {
+          router.push('/');
+          return;
+        }
+        setUser(data.user);
+        setName(data.user.name);
+        setPhone(data.user.phone);
+      } catch (err) {
+        console.error('Fetch profile error:', err);
+        setErrorMsg('Gagal memuat profil administrator.');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchProfile();
+  }, [router]);
+
+  const handleUpdateProfile = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSavingProfile(true);
+    setSuccessMsg('');
+    setErrorMsg('');
+
+    try {
+      const res = await fetch('/api/user/profile', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, phone }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.error || 'Gagal memperbarui profil.');
+      }
+
+      setUser(data.user);
+      setSuccessMsg('Profil admin berhasil diperbarui!');
+      setTimeout(() => setSuccessMsg(''), 3000);
+    } catch (err: any) {
+      setErrorMsg(err.message || 'Terjadi kesalahan.');
+    } finally {
+      setSavingProfile(false);
+    }
+  };
+
+  const handleChangePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSavingPassword(true);
+    setSuccessMsg('');
+    setErrorMsg('');
+
+    if (newPassword !== confirmPassword) {
+      setErrorMsg('Konfirmasi password baru tidak cocok.');
+      setSavingPassword(false);
+      return;
+    }
+
+    try {
+      const res = await fetch('/api/user/profile', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ currentPassword, newPassword }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.error || 'Gagal mengubah password.');
+      }
+
+      setSuccessMsg('Password admin berhasil diubah!');
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+      setTimeout(() => setSuccessMsg(''), 3000);
+    } catch (err: any) {
+      setErrorMsg(err.message || 'Terjadi kesalahan.');
+    } finally {
+      setSavingPassword(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className={styles.loading}>
+        <div className={styles.spinner}></div>
+        <p>Memuat profil admin...</p>
+      </div>
+    );
+  }
+
+  if (!user) return null;
+
+  return (
+    <div className={styles.container}>
+      {successMsg && (
+        <div className={`${styles.alert} ${styles.alertSuccess}`}>
+          <FaCheckCircle /> {successMsg}
+        </div>
+      )}
+
+      {errorMsg && (
+        <div className={`${styles.alert} ${styles.alertError}`}>
+          <FaExclamationCircle /> {errorMsg}
+        </div>
+      )}
+
+      <div className={styles.profileGrid}>
+        {/* Profile Info Card */}
+        <div className="glass-panel" style={{ padding: '24px' }}>
+          <h3 className={styles.sectionTitle}>
+            <FaUser style={{ color: 'var(--primary)' }} /> Informasi Akun Admin
+          </h3>
+          <form onSubmit={handleUpdateProfile} className={styles.form}>
+            <div className="form-group">
+              <label className="form-label">Nama Lengkap</label>
+              <input
+                type="text"
+                className="form-input"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+              />
+            </div>
+            <div className="form-group">
+              <label className="form-label">Nomor Telepon</label>
+              <input
+                type="tel"
+                className="form-input"
+                value={phone}
+                onChange={(e) => setPhone(e.target.value)}
+                required
+              />
+            </div>
+            <div className="form-group">
+              <label className="form-label">Alamat Email</label>
+              <input
+                type="email"
+                className="form-input"
+                value={user.email}
+                disabled
+                style={{ opacity: 0.6, cursor: 'not-allowed' }}
+              />
+            </div>
+            <div className="form-group">
+              <label className="form-label">Hak Akses</label>
+              <input
+                type="text"
+                className="form-input"
+                value="Administrator Utama"
+                disabled
+                style={{ opacity: 0.6, cursor: 'not-allowed' }}
+              />
+            </div>
+
+            <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '10px' }} disabled={savingProfile}>
+              {savingProfile ? 'Menyimpan...' : 'Perbarui Info Profil'}
+            </button>
+          </form>
+        </div>
+
+        {/* Change Password Card */}
+        <div className="glass-panel" style={{ padding: '24px' }}>
+          <h3 className={styles.sectionTitle}>
+            <FaLock style={{ color: 'var(--primary)' }} /> Ubah Password Keamanan
+          </h3>
+          <form onSubmit={handleChangePassword} className={styles.form}>
+            <div className="form-group">
+              <label className="form-label">Password Saat Ini</label>
+              <input
+                type="password"
+                className="form-input"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+                placeholder="Masukkan password admin saat ini"
+                required={newPassword.length > 0}
+              />
+            </div>
+            <div className="form-group">
+              <label className="form-label">Password Baru</label>
+              <input
+                type="password"
+                className="form-input"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                placeholder="Minimal 6 karakter"
+                required={currentPassword.length > 0}
+              />
+            </div>
+            <div className="form-group">
+              <label className="form-label">Konfirmasi Password Baru</label>
+              <input
+                type="password"
+                className="form-input"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                placeholder="Ulangi password baru"
+                required={currentPassword.length > 0}
+              />
+            </div>
+
+            <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: '10px' }} disabled={savingPassword}>
+              {savingPassword ? 'Memperbarui...' : 'Ubah Password Admin'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/api/user/profile/route.ts

@@ -0,0 +1,93 @@
+import { NextResponse } from 'next/server';
+import { prisma } from '@/lib/db';
+import { getSessionUser } from '@/lib/auth';
+import bcrypt from 'bcryptjs';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  try {
+    const session = await getSessionUser();
+    if (!session) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const user = await prisma.user.findUnique({
+      where: { id: session.userId },
+      select: {
+        id: true,
+        name: true,
+        email: true,
+        phone: true,
+        role: true,
+        createdAt: true,
+      },
+    });
+
+    if (!user) {
+      return NextResponse.json({ error: 'User tidak ditemukan.' }, { status: 404 });
+    }
+
+    return NextResponse.json({ user });
+  } catch (error) {
+    console.error('Fetch profile error:', error);
+    return NextResponse.json({ error: 'Gagal mengambil data profil.' }, { status: 500 });
+  }
+}
+
+export async function PUT(request: Request) {
+  try {
+    const session = await getSessionUser();
+    if (!session) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const { name, phone, currentPassword, newPassword } = await request.json();
+
+    const user = await prisma.user.findUnique({
+      where: { id: session.userId },
+    });
+
+    if (!user) {
+      return NextResponse.json({ error: 'User tidak ditemukan.' }, { status: 404 });
+    }
+
+    const updateData: any = {};
+
+    if (name) updateData.name = name;
+    if (phone) updateData.phone = phone;
+
+    // Handle password change if requested
+    if (currentPassword && newPassword) {
+      const isMatch = await bcrypt.compare(currentPassword, user.password);
+      if (!isMatch) {
+        return NextResponse.json({ error: 'Password saat ini salah.' }, { status: 400 });
+      }
+
+      if (newPassword.length < 6) {
+        return NextResponse.json({ error: 'Password baru minimal harus 6 karakter.' }, { status: 400 });
+      }
+
+      updateData.password = await bcrypt.hash(newPassword, 10);
+    } else if (currentPassword || newPassword) {
+      return NextResponse.json({ error: 'Untuk mengubah password, isi kedua field password saat ini dan password baru.' }, { status: 400 });
+    }
+
+    const updatedUser = await prisma.user.update({
+      where: { id: session.userId },
+      data: updateData,
+      select: {
+        id: true,
+        name: true,
+        email: true,
+        phone: true,
+        role: true,
+      },
+    });
+
+    return NextResponse.json({ success: true, user: updatedUser });
+  } catch (error) {
+    console.error('Update profile error:', error);
+    return NextResponse.json({ error: 'Gagal memperbarui profil.' }, { status: 500 });
+  }
+}

src/app/dashboard/profile/page.tsx

@@ -0,0 +1,268 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { FaUser, FaLock, FaCheckCircle, FaExclamationCircle } from 'react-icons/fa';
+import styles from './profile.module.css';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  phone: string;
+  role: string;
+  createdAt: string;
+}
+
+export default function UserProfile() {
+  const router = useRouter();
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  
+  // Profile update form state
+  const [name, setName] = useState('');
+  const [phone, setPhone] = useState('');
+
+  // Password change form state
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  const [savingProfile, setSavingProfile] = useState(false);
+  const [savingPassword, setSavingPassword] = useState(false);
+  const [successMsg, setSuccessMsg] = useState('');
+  const [errorMsg, setErrorMsg] = useState('');
+
+  useEffect(() => {
+    async function fetchProfile() {
+      try {
+        const res = await fetch('/api/user/profile');
+        if (!res.ok) {
+          router.push('/login?redirect=/dashboard/profile');
+          return;
+        }
+        const data = await res.json();
+        setUser(data.user);
+        setName(data.user.name);
+        setPhone(data.user.phone);
+      } catch (err) {
+        console.error('Fetch profile error:', err);
+        setErrorMsg('Gagal memuat profil pengguna.');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchProfile();
+  }, [router]);
+
+  const handleUpdateProfile = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSavingProfile(true);
+    setSuccessMsg('');
+    setErrorMsg('');
+
+    try {
+      const res = await fetch('/api/user/profile', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, phone }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.error || 'Gagal memperbarui profil.');
+      }
+
+      setUser(data.user);
+      setSuccessMsg('Profil berhasil diperbarui!');
+      setTimeout(() => setSuccessMsg(''), 3000);
+    } catch (err: any) {
+      setErrorMsg(err.message || 'Terjadi kesalahan.');
+    } finally {
+      setSavingProfile(false);
+    }
+  };
+
+  const handleChangePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSavingPassword(true);
+    setSuccessMsg('');
+    setErrorMsg('');
+
+    if (newPassword !== confirmPassword) {
+      setErrorMsg('Konfirmasi password baru tidak cocok.');
+      setSavingPassword(false);
+      return;
+    }
+
+    try {
+      const res = await fetch('/api/user/profile', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ currentPassword, newPassword }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.error || 'Gagal mengubah password.');
+      }
+
+      setSuccessMsg('Password berhasil diubah!');
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+      setTimeout(() => setSuccessMsg(''), 3000);
+    } catch (err: any) {
+      setErrorMsg(err.message || 'Terjadi kesalahan.');
+    } finally {
+      setSavingPassword(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className={styles.loading}>
+        <div className={styles.spinner}></div>
+        <p>Memuat profil Anda...</p>
+      </div>
+    );
+  }
+
+  if (!user) return null;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1 className={styles.title}>Pengaturan Profil</h1>
+        <p className={styles.subtitle}>Kelola informasi pribadi dan keamanan akun Anda.</p>
+      </div>
+
+      {successMsg && (
+        <div className={`${styles.alert} ${styles.alertSuccess}`}>
+          <FaCheckCircle /> {successMsg}
+        </div>
+      )}
+
+      {errorMsg && (
+        <div className={`${styles.alert} ${styles.alertError}`}>
+          <FaExclamationCircle /> {errorMsg}
+        </div>
+      )}
+
+      {/* Profile Info Form */}
+      <div className={styles.profileCard}>
+        <h2 className={styles.sectionTitle}>
+          <FaUser /> Informasi Profil
+        </h2>
+        <form onSubmit={handleUpdateProfile} className={styles.form}>
+          <div className={styles.formGrid}>
+            <div className="form-group">
+              <label className="form-label">Nama Lengkap</label>
+              <input
+                type="text"
+                className="form-input"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+              />
+            </div>
+            <div className="form-group">
+              <label className="form-label">Nomor Telepon</label>
+              <input
+                type="tel"
+                className="form-input"
+                value={phone}
+                onChange={(e) => setPhone(e.target.value)}
+                required
+              />
+            </div>
+          </div>
+
+          <div className={styles.formGrid}>
+            <div className="form-group">
+              <label className="form-label">Alamat Email (Tidak dapat diubah)</label>
+              <input
+                type="email"
+                className="form-input"
+                value={user.email}
+                disabled
+                style={{ opacity: 0.6, cursor: 'not-allowed' }}
+              />
+            </div>
+            <div className="form-group">
+              <label className="form-label">Peran Pengguna</label>
+              <input
+                type="text"
+                className="form-input"
+                value={user.role === 'ADMIN' ? 'Administrator' : 'Pelanggan'}
+                disabled
+                style={{ opacity: 0.6, cursor: 'not-allowed', textTransform: 'capitalize' }}
+              />
+            </div>
+          </div>
+
+          <div className={styles.actions}>
+            <Link href="/dashboard" className="btn btn-secondary">
+              Kembali ke Dashboard
+            </Link>
+            <button type="submit" className="btn btn-primary" disabled={savingProfile}>
+              {savingProfile ? 'Menyimpan...' : 'Simpan Profil'}
+            </button>
+          </div>
+        </form>
+      </div>
+
+      {/* Password Change Form */}
+      <div className={styles.profileCard}>
+        <h2 className={styles.sectionTitle}>
+          <FaLock /> Ubah Password Keamanan
+        </h2>
+        <form onSubmit={handleChangePassword} className={styles.form}>
+          <div className="form-group">
+            <label className="form-label">Password Saat Ini</label>
+            <input
+              type="password"
+              className="form-input"
+              value={currentPassword}
+              onChange={(e) => setCurrentPassword(e.target.value)}
+              placeholder="Masukkan password Anda saat ini"
+              required={newPassword.length > 0}
+            />
+          </div>
+
+          <div className={styles.formGrid}>
+            <div className="form-group">
+              <label className="form-label">Password Baru</label>
+              <input
+                type="password"
+                className="form-input"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                placeholder="Minimal 6 karakter"
+                required={currentPassword.length > 0}
+              />
+            </div>
+            <div className="form-group">
+              <label className="form-label">Konfirmasi Password Baru</label>
+              <input
+                type="password"
+                className="form-input"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                placeholder="Ulangi password baru"
+                required={currentPassword.length > 0}
+              />
+            </div>
+          </div>
+
+          <div className={styles.actions}>
+            <button type="submit" className="btn btn-primary" disabled={savingPassword}>
+              {savingPassword ? 'Mengubah...' : 'Perbarui Password'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

src/app/dashboard/profile/profile.module.css

@@ -0,0 +1,160 @@
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  animation: fadeIn 0.4s ease-out forwards;
+}
+
+.header {
+  margin-bottom: 30px;
+}
+
+.title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--text-white);
+  margin-bottom: 8px;
+}
+
+.subtitle {
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+}
+
+.profileCard {
+  background: var(--bg-card);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--border-light);
+  border-radius: 16px;
+  padding: 30px;
+  margin-bottom: 30px;
+  box-shadow: var(--shadow-lg);
+}
+
+.sectionTitle {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-white);
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid var(--border-light);
+  padding-bottom: 10px;
+}
+
+.infoGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+@media (max-width: 600px) {
+  .infoGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.infoItem {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.infoLabel {
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+}
+
+.infoValue {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.formGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+@media (max-width: 600px) {
+  .formGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 15px;
+  margin-top: 10px;
+}
+
+.alert {
+  padding: 14px 16px;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.alertSuccess {
+  background: rgba(16, 185, 129, 0.15);
+  color: var(--accent-emerald);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.alertError {
+  background: rgba(244, 63, 94, 0.15);
+  color: var(--accent-rose);
+  border: 1px solid rgba(244, 63, 94, 0.3);
+}
+
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  color: var(--text-secondary);
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  border-top-color: var(--primary);
+  animation: spin 1s ease-in-out infinite;
+  margin-bottom: 15px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/components/Header.tsx

@@ -94,6 +94,11 @@ export default function Header({ settings }: { settings?: any }) {
               Dashboard Saya
             </Link>
           )}
+          {user && (
+            <Link href="/dashboard/profile" className={`${styles.navLink} ${pathname === '/dashboard/profile' ? styles.active : ''}`}>
+              Profil Saya
+            </Link>
+          )}
           {user?.role === 'ADMIN' && (
             <Link href="/admin" className={styles.adminBadge}>
               Admin Panel
@@ -104,7 +109,7 @@ export default function Header({ settings }: { settings?: any }) {
         <div className={styles.authActions}>
           {user ? (
             <div className={styles.userMenu}>
-              <Link href="/dashboard" className={styles.userName} style={{ color: 'var(--text-white)', fontWeight: 600, textDecoration: 'none' }}>
+              <Link href="/dashboard/profile" className={styles.userName} style={{ color: 'var(--text-white)', fontWeight: 600, textDecoration: 'none' }}>
                 Halo, {user.name}
               </Link>
               <button onClick={handleLogout} className={styles.logoutBtn}>
@@ -144,6 +149,11 @@ export default function Header({ settings }: { settings?: any }) {
                 Dashboard Saya
               </Link>
             )}
+            {user && (
+              <Link href="/dashboard/profile" className={`${styles.mobileNavLink} ${pathname === '/dashboard/profile' ? styles.active : ''}`} onClick={() => setIsOpen(false)}>
+                Profil Saya
+              </Link>
+            )}
             {user?.role === 'ADMIN' && (
               <Link href="/admin" className={styles.mobileAdminBadge} onClick={() => setIsOpen(false)}>
                 Admin Panel