From 430063e913971254718031b6b13572281b5360e8 Mon Sep 17 00:00:00 2001
From: bokhonglo <ngocungducanh2022@gmail.com>
Date: Thu, 9 Apr 2026 14:39:14 +0700
Subject: [PATCH] update user profile

---
 src/components/user-profile/UserInfoCard.tsx | 85 +++++++++++---------
 src/components/user-profile/UserMetaCard.tsx | 85 +++++++++++++++-----
 2 files changed, 109 insertions(+), 61 deletions(-)

diff --git a/src/components/user-profile/UserInfoCard.tsx b/src/components/user-profile/UserInfoCard.tsx
index f98d51a..c46f1bd 100644
--- a/src/components/user-profile/UserInfoCard.tsx
+++ b/src/components/user-profile/UserInfoCard.tsx
@@ -89,46 +89,53 @@ export default function UserInfoCard({ data }: { data: UserMetaCardProps }) {
                 {data.data?.email || "Email address"}
               </p>
             </div>
+            {data.data?.profile?.phone && (
+              <div>
+                <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
+                  Phone
+                </p>
+                <p className="text-sm font-medium text-gray-800 dark:text-white/90">
+                  {data.data?.profile?.phone || "+XXX XXX XXX"}
+                </p>
+              </div>
+            )}
 
-            <div>
-              <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
-                Phone
-              </p>
-              <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                {data.data?.profile?.phone || "+XXX XXX XXX"}
-              </p>
-            </div>
+            {data.data?.profile?.bio && (
+              <div>
+                <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
+                  Bio
+                </p>
+                <p className="text-sm font-medium text-gray-800 dark:text-white/90">
+                  {data.data?.profile?.bio || "No bio available"}
+                </p>
+              </div>
+            )}
 
-            <div>
-              <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
-                Bio
-              </p>
-              <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                {data.data?.profile?.bio || "No bio available"}
-              </p>
-            </div>
-
-            <div>
-              <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
-                Address
-              </p>
-              <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                {data.data?.profile?.location || "No location available"}
-              </p>
-            </div>
-             <div>
-              <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
-                Website
-              </p>
-              <Link 
-                href={data.data?.profile?.website || "#"} 
-                target="_blank" 
-                rel="noopener noreferrer"
-                className="text-sm font-medium text-gray-800 dark:text-white/90 hover:text-blue-500 dark:hover:text-blue-400"
-              >
-                {data.data?.profile?.website || "No website"}
-              </Link>
-            </div>
+            {data.data?.profile?.location && (
+              <div>
+                <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
+                  Address
+                </p>
+                <p className="text-sm font-medium text-gray-800 dark:text-white/90">
+                  {data.data?.profile?.location || "No location available"}
+                </p>
+              </div>
+            )}
+            {data.data?.profile?.website && (
+              <div>
+                <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
+                  Website
+                </p>
+                <Link
+                  href={data.data?.profile?.website || "#"}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm font-medium text-gray-800 dark:text-white/90 hover:text-blue-500 dark:hover:text-blue-400"
+                >
+                  {data.data?.profile?.website || "No website"}
+                </Link>
+              </div>
+            )}
           </div>
         </div>
 
@@ -230,7 +237,7 @@ export default function UserInfoCard({ data }: { data: UserMetaCardProps }) {
                       onChange={handleChange}
                     />
                   </div>
-                   <div className="col-span-2">
+                  <div className="col-span-2">
                     <Label>Website</Label>
                     <Input
                       type="text"
diff --git a/src/components/user-profile/UserMetaCard.tsx b/src/components/user-profile/UserMetaCard.tsx
index 3bca2fc..0cb6847 100644
--- a/src/components/user-profile/UserMetaCard.tsx
+++ b/src/components/user-profile/UserMetaCard.tsx
@@ -7,7 +7,7 @@ import { uploadMedia } from "@/service/mediaService";
 
 export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
   const [previewImage, setPreviewImage] = useState(
-    data.data?.profile?.avatar_url || "/images/no-images.jpg"
+    data.data?.profile?.avatar_url || "/images/no-images.jpg",
   );
   const [isUploading, setIsUploading] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -18,7 +18,9 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
     }
   };
 
-  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
     const file = event.target.files?.[0];
     if (!file) return;
 
@@ -31,10 +33,11 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
 
       const uploadedMedia = await uploadMedia(file);
       console.log("Upload thành công:", uploadedMedia);
-      
     } catch (error) {
       console.error("Lỗi khi upload avatar:", error);
-      setPreviewImage(data.data?.profile?.avatar_url || "/images/no-images.jpg");
+      setPreviewImage(
+        data.data?.profile?.avatar_url || "/images/no-images.jpg",
+      );
       alert("Không thể tải ảnh lên. Vui lòng thử lại!");
     } finally {
       setIsUploading(false);
@@ -49,8 +52,7 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
       <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
         <div className="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
           <div className="flex flex-col items-center w-full gap-6 xl:flex-row">
-            
-            <div 
+            <div
               onClick={handleAvatarClick}
               className="relative w-20 h-20 overflow-hidden border border-gray-200 rounded-full cursor-pointer dark:border-gray-800 group shrink-0"
             >
@@ -61,17 +63,48 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
                 alt="avatar"
                 className="object-cover w-full h-full"
               />
-              
+
               <div className="absolute inset-0 flex items-center justify-center transition-opacity bg-black/50 opacity-0 group-hover:opacity-100">
                 {isUploading ? (
-                  <svg className="w-6 h-6 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  <svg
+                    className="w-6 h-6 text-white animate-spin"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                  >
+                    <circle
+                      className="opacity-25"
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      stroke="currentColor"
+                      strokeWidth="4"
+                    ></circle>
+                    <path
+                      className="opacity-75"
+                      fill="currentColor"
+                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    ></path>
                   </svg>
                 ) : (
-                  <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+                  <svg
+                    className="w-6 h-6 text-white"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+                    />
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
+                    />
                   </svg>
                 )}
               </div>
@@ -94,14 +127,22 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
                   {data.data?.roles?.map((role) => role.name).join(", ") ||
                     "No roles available"}
                 </p>
-                <div className="hidden h-3.5 w-px bg-gray-300 dark:bg-gray-700 xl:block"></div>
-                <p className="text-sm text-gray-500 dark:text-gray-400 max-w-[450px] truncate">
-                  {data.data?.profile?.bio || "No bio available"}
-                </p>
-                <div className="hidden h-3.5 w-px bg-gray-300 dark:bg-gray-700 xl:block"></div>
-                <p className="text-sm text-gray-500 dark:text-gray-400">
-                  {data.data?.profile?.location || "user location"}
-                </p>
+                {data.data?.profile?.bio && (
+                  <>
+                    <div className="hidden h-3.5 w-px bg-gray-300 dark:bg-gray-700 xl:block"></div>
+                    <p className="text-sm text-gray-500 dark:text-gray-400 max-w-[450px] truncate">
+                      {data.data?.profile?.bio || "No bio available"}
+                    </p>
+                  </>
+                )}
+                {data.data?.profile?.location && (
+                  <>
+                    <div className="hidden h-3.5 w-px bg-gray-300 dark:bg-gray-700 xl:block"></div>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                      {data.data?.profile?.location || "user location"}
+                    </p>
+                  </>
+                )}
               </div>
             </div>
           </div>
@@ -109,4 +150,4 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
       </div>
     </>
   );
-}
\ No newline at end of file
+}