fix: Certificate detail and manage course

src/app/(auth)/dashboard/certificate/page.tsx

@@ -23,6 +23,7 @@ export default function Page() {
     const totalPages = Math.ceil((certificates?.length || 0) / ITEMS_PER_PAGE);
     const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
     const currentCertificates = certificates?.slice(startIndex, startIndex + ITEMS_PER_PAGE) || [];
+    const placeholderCount = Math.max(0, ITEMS_PER_PAGE - currentCertificates.length);
 
     if (loading) {
         return <Loading message="Loading certificates..." />;
@@ -71,10 +72,12 @@ export default function Page() {
 
             <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
                 {currentCertificates.map((certificate) => (
-                    <CertificateCard
-                        key={certificate._id}
-                        certificate={certificate}
-                    />
+                    <div key={certificate._id} className="min-h-[430px]">
+                        <CertificateCard certificate={certificate} />
+                    </div>
+                ))}
+                {Array.from({ length: placeholderCount }).map((_, idx) => (
+                    <div key={`ph-${idx}`} className="min-h-[420px]" aria-hidden />
                 ))}
             </div>
             {/* Pagination Controls */}

src/app/(auth)/dashboard/manage-course/page.tsx

@@ -93,7 +93,7 @@ const CourseManagementPage: React.FC = () => {
         <div className="min-h-screen">
             <div className="max-w-7xl mx-auto">
                 {/* Title */}
-                <h1 className="text-3xl font-bold text-gray-900 mb-4">Published Course Management</h1>
+                <h1 className="text-3xl font-bold text-gray-900 mb-4">Courses Management</h1>
                 {/* Course Grid */}
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                     {currentCourses.map((course) => {

src/app/(auth)/dashboard/manage-user/page.tsx

@@ -237,7 +237,7 @@ const ManageUserPage = () => {
                                         {currentUsers.map((user) => (
                                             <div
                                                 key={user._id}
-                                                className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 transition-colors"
+                                                className="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors border border-gray-200"
                                             >
                                                 <div className="flex items-center space-x-4">
                                                     <AvatarWithFallback

src/components/common/ui/Card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card"
       className={cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 shadow-sm',
         className
       )}
       {...props}

src/components/dashboard/Sidebar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
@@ -48,6 +48,9 @@ interface User {
 }
 
 const Sidebar = () => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
   const pathname = usePathname();
   const { user } = useSelector((state: RootState) => state.auth) as { user: User | null };
 
@@ -102,6 +105,19 @@ const Sidebar = () => {
   // Choose menu items based on user role
   const menuItems: MenuItem[] = menuByRole[userRole] || menuByRole['user'];
 
+  // Render a deterministic skeleton on SSR to avoid hydration mismatch
+  if (!mounted) {
+    return (
+      <div className="w-full max-h-screen flex flex-col items-start p-4 rounded-2xl bg-white">
+        <nav className="flex flex-col gap-4 w-full">
+          <div className="h-9 rounded-lg bg-gray-100" />
+          <div className="h-9 rounded-lg bg-gray-100" />
+          <div className="h-9 rounded-lg bg-gray-100" />
+        </nav>
+      </div>
+    );
+  }
+
   return (
     <div className="w-full max-h-screen flex flex-col items-start p-4 rounded-2xl bg-white">
       <nav className="flex flex-col gap-4 w-full">

src/components/dashboard/certificate/CertificateCard.tsx

@@ -14,8 +14,9 @@ const CertificateCard: React.FC<CertificateCardProps> = ({ certificate }) => {
 
     React.useEffect(() => {
         const fetchUserAvatar = async () => {
+            if (!certificate?.user?._id) return;
             try {
-                const userData = await getUserById(certificate.user._id);
+                const userData = await getUserById(certificate?.user?._id);
                 const user = userData.user || userData;
                 if (user?.avatar?.url) {
                     setUserAvatar(user.avatar.url);
@@ -26,7 +27,7 @@ const CertificateCard: React.FC<CertificateCardProps> = ({ certificate }) => {
         };
 
         fetchUserAvatar();
-    }, [certificate.user._id]);
+    }, [certificate?.user?._id]);
 
     const formatDate = (dateString: string) => {
         try {
@@ -67,7 +68,7 @@ const CertificateCard: React.FC<CertificateCardProps> = ({ certificate }) => {
                             <Image src="/assets/icons/menu.svg" alt="Menu" width={30} height={30} />
                         </div>
                     </div>
-                    <div className="font-bold text-gray-800 text-xl my-3 leading-tight">
+                    <div className="font-bold h-10 text-gray-800 text-xl my-3 leading-tight">
                         {certificate.courseName}
                     </div>
                     <div className="flex justify-between items-start text-xs text-gray-500">

src/hooks/useCertificate.ts

@@ -18,7 +18,8 @@ export const useCurrentUser = () => {
         const data = await getCurrentUserAPI();
         setUser(data);
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to fetch user');
+        // Không đăng nhập: coi như user null và KHÔNG coi là lỗi hiển thị
+        setUser(null);
       } finally {
         setLoading(false);
       }