diff --git a/src/app/user/account/page.tsx b/src/app/user/account/page.tsx index 2f108dc..d319861 100644 --- a/src/app/user/account/page.tsx +++ b/src/app/user/account/page.tsx @@ -1,6 +1,5 @@ "use client"; -import StickyHeader from "@/components/ui/StickyHeader"; import AccountDetails from "@/components/user-profile/AccountDetails"; import UserInfoCard from "@/components/user-profile/UserInfoCard"; import UserMetaCard from "@/components/user-profile/UserMetaCard"; @@ -9,12 +8,22 @@ import { apiGetCurrentUser } from "@/service/auth"; import { setUserData } from "@/store/features/userSlice"; import { useEffect, useState } from "react"; import { useDispatch } from "react-redux"; +import StickyHeader from "@/components/ui/StickyHeader"; +import { SafeHTMLRenderer } from "@/components/ui/parse/SafeHTMLRenderer"; +import { apiGetCurrentUserApplications } from "@/service/userService"; +import Loading from "@/app/loading"; export default function Profile() { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); + const [application, setApplication] = useState(null); + const [appLoading, setAppLoading] = useState(false); const dispatch = useDispatch(); - + + const isHistorian = !!user?.data?.roles?.some( + (role: any) => role.name === "HISTORIAN" + ); + useEffect(() => { const fetchUser = async () => { try { @@ -28,13 +37,75 @@ export default function Profile() { } }; fetchUser(); - }, []); - + }, [dispatch]); + + useEffect(() => { + if (isHistorian) { + const fetchApp = async () => { + try { + setAppLoading(true); + const res = await apiGetCurrentUserApplications(); + if (res?.data) { + const approvedApp = + res.data.find((app: any) => app.status === "APPROVED") || + res.data[0]; + setApplication(approvedApp); + } + } catch (err) { + console.error("Lỗi khi tải hồ sơ nhà sử học:", err); + } finally { + setAppLoading(false); + } + }; + fetchApp(); + } + }, [isHistorian]); + + if (loading) { + return ( + + ); + } + + // Nếu người dùng có role là HISTORIAN + if (isHistorian) { + return ( +
+ +
+
+ + + +
+ +
+ {appLoading ? ( +
+ +
+ ) : application ? ( +
+ +
+ ) : ( +
+ Không tìm thấy thông tin hồ sơ nhà sử học. +
+ )} +
+
+
+ ); + } + return (
- -
-
+
+

+ Thông tin tài khoản +

+
diff --git a/src/components/user-profile/AccountDetails.tsx b/src/components/user-profile/AccountDetails.tsx index bebdf14..a18b012 100644 --- a/src/components/user-profile/AccountDetails.tsx +++ b/src/components/user-profile/AccountDetails.tsx @@ -76,7 +76,7 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) { } catch (err: any) { setError( `${err?.response?.data?.message}, Cập nhật thất bại, vui lòng kiểm tra lại thông tin. Mật khẩu tối thiểu 8 ký tự, 1 in hoa, 1 số và 1 ký tự đặc biệt.` || - "Failed to update password. Please check your current password.", + "Không thể cập nhật mật khẩu. Vui lòng kiểm tra lại mật khẩu hiện tại.", ); toast.error( err?.response?.data?.message || @@ -87,21 +87,209 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) { const isPasswordMismatch = formValues.confirm_password.length > 0 && formValues.new_password !== formValues.confirm_password; + + const isHistorian = !!data.data?.roles?.some( + (role: any) => role.name === "HISTORIAN" + ); + + // Giao diện khi là HISTORIAN + if (isHistorian) { + return ( + <> +
+
+
+
+
+ +

+ {data?.data?.email || "example@mail.com"} +

+
+
+ +

+ •••••••• +

+
+
+
+ + +
+
+ + {/* Modal Chỉnh sửa */} + +
+
+

+ Cập nhật mật khẩu +

+

+ Vì lý do bảo mật, vui lòng nhập mật khẩu hiện tại để thiết lập mật khẩu mới. +

+
+ +
+
+
+ {/* 1. Email (Disabled) */} +
+ + +
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+
+ +
+ + +
+ {isPasswordMismatch && ( +

+ Mật khẩu không khớp! +

+ )} +
+
+ + {error &&

{error}

} +
+ +
+ + +
+
+
+ + + ); + } + + // Giao diện cũ khi không phải HISTORIAN return ( <> -
-
+
+
-
-
- -

+

+ Chi tiết tài khoản +

+
+
+

+ Địa chỉ Email +

+

{data?.data?.email || "example@mail.com"}

-
- -

+

+

+ Mật khẩu +

+

••••••••

@@ -120,7 +308,7 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) { > - Edit + Chỉnh sửa
@@ -130,10 +318,10 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) {

- Update Password + Cập nhật mật khẩu

- For security, please enter your current password to set a new one. + Vì lý do bảo mật, vui lòng nhập mật khẩu hiện tại để thiết lập mật khẩu mới.

@@ -142,7 +330,7 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) {
{/* 1. Email (Disabled) */}
- +
- +
@@ -176,12 +364,12 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) {
- +
@@ -199,15 +387,14 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) {
- +
- {/* Thêm một dòng text báo lỗi nhỏ ngay dưới ô input nếu muốn */} {isPasswordMismatch && (

Mật khẩu không khớp! @@ -245,14 +431,14 @@ export default function AccountDetails({ data }: { data: UserMetaCardProps }) { type="button" onClick={closeModal} > - Close + Đóng

diff --git a/src/components/user-profile/UserInfoCard.tsx b/src/components/user-profile/UserInfoCard.tsx index b4e0897..7340ff4 100644 --- a/src/components/user-profile/UserInfoCard.tsx +++ b/src/components/user-profile/UserInfoCard.tsx @@ -85,13 +85,269 @@ export default function UserInfoCard({ data }: { data: UserMetaCardProps }) { } }; + const isHistorian = !!data.data?.roles?.some( + (role: any) => role.name === "HISTORIAN" + ); + + // Giao diện khi là HISTORIAN + if (isHistorian) { + return ( +
+
+ {data.openEdit && ( + + )} +
+
+
+ + +

+ {data.data?.email || "Email"} +

+
+ + {data.data?.profile?.phone && ( +
+ + +

+ {data.data?.profile?.phone || "+XXX XXX XXX"} +

+
+ )} + + {data.data?.profile?.location && ( +
+ + +

+ {data.data?.profile?.location || "Chưa cập nhật địa chỉ"} +

+
+ )} + + {data.data?.profile?.website && ( +
+ + + + {data.data?.profile?.website || "Chưa cập nhật website"} + +
+ )} +
+
+
+ + +
+
+

+ Chỉnh sửa thông tin cá nhân +

+
+
+
+
+
+ Thông tin cá nhân +
+ +
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+
+
+
+ + +
+
+
+ +
+ ); + } + + // Giao diện cũ khi không phải HISTORIAN return ( -
-
+
+
+
+

+ Thông tin cá nhân +

+ +
+
+

+ Họ và tên +

+

+ {data.data?.profile?.display_name || "Họ và tên"} +

+
+
+

+ Email +

+

+ {data.data?.email || "Email"} +

+
+ {data.data?.profile?.phone && ( +
+

+ Số điện thoại +

+

+ {data.data?.profile?.phone || "+XXX XXX XXX"} +

+
+ )} + + {data.data?.profile?.bio && ( +
+

+ Tiểu sử +

+

+ {data.data?.profile?.bio || "Chưa cập nhật tiểu sử"} +

+
+ )} + + {data.data?.profile?.location && ( +
+

+ Địa chỉ +

+

+ {data.data?.profile?.location || "Chưa cập nhật địa chỉ"} +

+
+ )} + {data.data?.profile?.website && ( +
+

+ Website +

+ + {data.data?.profile?.website || "Chưa cập nhật website"} + +
+ )} +
+
+ {data.openEdit && ( )} -
-
-
- - -

- {data.data?.email || "Email address"} -

-
- - {data.data?.profile?.phone && ( -
- - -

- {data.data?.profile?.phone || "+XXX XXX XXX"} -

-
- )} - - {data.data?.profile?.location && ( -
- - -

- {data.data?.profile?.location || "No location available"} -

-
- )} - - {data.data?.profile?.website && ( -
- - - - {data.data?.profile?.website || "No website"} - -
- )} -
-
-

- Edit Personal Information +

+ Chỉnh sửa thông tin cá nhân

+

+ Cập nhật thông tin chi tiết để giữ hồ sơ của bạn luôn mới nhất. +

-
- Personal Information +
+ Thông tin cá nhân
- +
- +
- +
- +
- +
- + - Close + Đóng
diff --git a/src/components/user-profile/UserMetaCard.tsx b/src/components/user-profile/UserMetaCard.tsx index 4a8b727..116b00b 100644 --- a/src/components/user-profile/UserMetaCard.tsx +++ b/src/components/user-profile/UserMetaCard.tsx @@ -53,7 +53,7 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) { try { await apiUpdateUser({ avatar_url: url }); window.location.href = window.location.pathname; - toast.success("Cập nhật avatar thành công!"); + toast.success("Cập nhật ảnh đại diện thành công!"); } catch (error) { console.error("Lỗi khi cập nhật avatar:", error); toast.warning("Lỗi khi cập nhật ảnh đại diện. Vui lòng thử lại!"); @@ -71,17 +71,120 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) { } } }; + + const isHistorian = !!data.data?.roles?.some( + (role: any) => role.name === "HISTORIAN" + ); + + // Giao diện khi là HISTORIAN (không có viền ngoài, avatar to 296px) + if (isHistorian) { + return ( +
+
+
+
+ avatar + +
+ {isUploading ? ( + + + + + ) : ( + + + + + )} +
+ + +
+ +
+
+

+ {data.data?.roles?.map((role) => role.name).join(", ") || + "Chưa có vai trò"} +

+
+

+ {data.data?.profile?.display_name || "Họ và tên"} +

+ {data.data?.profile?.bio && ( +

+ {data.data.profile.bio} +

+ )} +

+ ID: {data.data?.id} +

+
+
+
+
+ ); + } + + // Giao diện cũ khi không phải HISTORIAN return ( -
-
-
+
+
+
avatar
+

+ {data.data?.profile?.display_name || "Họ và tên"} +

{data.data?.roles?.map((role) => role.name).join(", ") || - "No roles available"} + "Chưa có vai trò"}

+ {data.data?.profile?.bio && ( + <> +
+

+ {data.data.profile.bio} +

+ + )}
-

- {data.data?.profile?.display_name || "Full Name"} -

- {data.data?.profile?.bio && ( -

- {data.data.profile.bio} -

- )} -

- ID: {data.data?.id} -

+ + ID: {data.data?.id} +