manage current user's media

src/app/(admin)/(others-pages)/(forms)/role-upgrade/page.tsx

@@ -198,7 +198,7 @@ export default function RoleUpgrade() {
 
   return (
     <div className="max-w-4xl mx-auto pb-20">
-      <PageBreadcrumb pageTitle="Nâng cấp tài khoản Nhà sử học" />
+      <PageBreadcrumb pageTitle="Đăng ký trở thành Nhà sử học" />
 
       <div className="flex items-center justify-between bg-white dark:bg-gray-900 p-2 rounded-xl border border-gray-200 dark:border-gray-800 mb-6">
         <div className="flex gap-2">

src/app/(admin)/(others-pages)/(management)/applications/page.tsx

@@ -218,7 +218,6 @@ export default function HistorianApplicationPage() {
             </button>
           }
         >
-          {/* Cập nhật Grid để chứa đủ các ô filter */}
           <div className="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
             <div>
               <label className="block mb-2 text-sm font-medium">Tìm kiếm</label>

src/app/(admin)/(others-pages)/account/page.tsx

@@ -1,22 +1,16 @@
 "use client";
 
 import AccountDetails from "@/components/user-profile/AccountDetails";
-import ApplicationList from "@/components/user-profile/ApplicationList";
-import MediaCard from "@/components/user-profile/Media";
 import UserInfoCard from "@/components/user-profile/UserInfoCard";
 import UserMetaCard from "@/components/user-profile/UserMetaCard";
-import { MediaDto } from "@/interface/media";
 import { UserMetaCardProps } from "@/interface/user";
 import { apiGetCurrentUser } from "@/service/auth";
-import { apiGetCurrentUserApplications, apiGetCurrentUserMedia } from "@/service/userService";
 import { setUserData } from "@/store/features/userSlice";
 import { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 
 export default function Profile() {
   const [user, setUser] = useState<UserMetaCardProps | null>(null);
-  const [mediaData, setMediaData] = useState<MediaDto | null>(null);
-  const [applications, setApplications] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const dispatch = useDispatch();
   
@@ -24,17 +18,7 @@ export default function Profile() {
     const fetchUser = async () => {
       try {
         const userData = await apiGetCurrentUser();
-        const mediaResponse = await apiGetCurrentUserMedia();
-        const userApplications = await apiGetCurrentUserApplications();
-        
-        console.log("user", userData);
-
-        if (userApplications?.data) {
-          setApplications(userApplications.data);
-        }
         dispatch(setUserData(userData.data));
-
-        setMediaData(mediaResponse);
         setUser(userData);
       } catch (err) {
         console.error("Lỗi:", err);
@@ -54,8 +38,6 @@ export default function Profile() {
         <div className="space-y-6">
           <UserMetaCard data={user ?? {}} />
           <UserInfoCard data={{ ...user, openEdit: true }} />
-          {(mediaData?.data?.length ?? 0) > 0 && <MediaCard data={mediaData ?? {}} />}
-          <ApplicationList applications={applications} />
           <AccountDetails data={user ?? {}} />
         </div>
       </div>

src/app/(admin)/(others-pages)/assets/page.tsx

@@ -0,0 +1,5 @@
+export default function Page() {
+  return (
+    <div className=''>Page</div>
+  )
+}

src/app/(admin)/(others-pages)/library/page.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import ApplicationLibrary from "@/components/user-profile/ApplicationList";
+import { MediaDto } from "@/interface/media";
+import { apiGetCurrentUserApplications, apiGetCurrentUserMedia } from "@/service/userService";
+import MediaLibrary from "@/components/user-profile/Media";
+
+export default function LibraryPage() {
+  const [mediaData, setMediaData] = useState<MediaDto | null>(null);
+  const [applications, setApplications] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const fetchLibraryContent = async () => {
+      try {
+        const [mediaResponse, userApplications] = await Promise.all([
+          apiGetCurrentUserMedia(),
+          apiGetCurrentUserApplications()
+        ]);
+
+        if (userApplications?.data) setApplications(userApplications.data);
+        setMediaData(mediaResponse);
+      } catch (err) {
+        console.error("Lỗi khi tải thư viện:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLibraryContent();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex h-[50vh] items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-500 border-t-transparent"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50/50 p-4 dark:bg-zinc-950 lg:p-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
+          Thư viện
+        </h1>
+       
+      </div>
+
+      <div className="space-y-12">
+        {(mediaData?.data?.length ?? 0) > 0 && (
+          <section>
+            <MediaLibrary data={mediaData ?? {}} />
+          </section>
+        )}
+
+        {applications.length > 0 && (
+          <section>
+            <ApplicationLibrary applications={applications} />
+          </section>
+        )}
+      </div>
+    </div>
+  );
+}