upgrade update information

src/app/(admin)/(others-pages)/(tables)/user-table/page.tsx

@@ -17,7 +17,8 @@ import Pagination from "@/components/tables/Pagination";
 
 export type SortColumn = "created_at" | "updated_at" | "display_name" | "email";
 
-export default function UserTable() {
+export default function UserTable() { // UserTable
+
   const [page, setPage] = useState<number>(1);
   const [limitInput, setLimitInput] = useState<string>("5");
 

src/components/tables/BasicTableOne.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+
 import {
   Table,
   TableBody,

src/components/user-profile/UserInfoCard.tsx

@@ -45,17 +45,42 @@ export default function UserInfoCard({ data }: { data: UserMetaCardProps }) {
   };
 
   const handleSave = async (e: React.FormEvent) => {
-    try {
+    e.preventDefault();
+
     const userId = data?.data?.id;
-      if (userId) {
+    if (!userId) return;
-        await apiUpdateUser(userId, formData);
+
-        toast.success("Cập nhật thành công!");
+    try {
-        router.refresh();
+      const response = await apiUpdateUser(userId, formData);
+
+      if (response && response.status === false) {
+        toast.error(response.message || "Cập nhật thất bại.");
+        return;
       }
-    } catch (error) {
+
-      console.error("Lỗi khi cập nhật profile:", error);
+      toast.success("Cập nhật thành công!");
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    } catch (error: any) {
+      const serverResponse = error.response?.data;
+
+      if (serverResponse && serverResponse.status === false) {
+        const msg = serverResponse.message || "";
+
+        if (msg.includes("idx_user_profiles_phone")) {
+          toast.error("Số điện thoại này đã được sử dụng!");
+        } else {
+          toast.error(msg);
+        }
+      } else {
+        toast.error("Không thể kết nối đến máy chủ hoặc lỗi hệ thống.");
+      }
+
+      console.error("Lỗi chi tiết:", error);
     }
   };
+
   return (
     <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
       <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
@@ -187,6 +212,7 @@ export default function UserInfoCard({ data }: { data: UserMetaCardProps }) {
                       name="avatar_url"
                       defaultValue={formData.avatar_url}
                       onChange={handleChange}
+                      disabled
                     />
                   </div>
                   <div className="col-span-2">

src/components/user-profile/UserMetaCard.tsx

@@ -1,43 +1,52 @@
 "use client";
 
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import Image from "next/image";
 import { UserMetaCardProps } from "@/interface/user";
 import { uploadMedia } from "@/service/mediaService";
 
 export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
-  const [previewImage, setPreviewImage] = useState(
+  const currentAvatar = data.data?.profile?.avatar_url || "/images/no-images.jpg";
-    data.data?.profile?.avatar_url || "/images/no-images.jpg",
+
-  );
+  const [previewImage, setPreviewImage] = useState(currentAvatar);
   const [isUploading, setIsUploading] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    if (data.data?.profile?.avatar_url) {
+      setPreviewImage(data.data.profile.avatar_url);
+    }
+  }, [data.data?.profile?.avatar_url]);
+
   const handleAvatarClick = () => {
     if (!isUploading) {
       fileInputRef.current?.click();
     }
   };
 
-  const handleFileChange = async (
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
     const file = event.target.files?.[0];
     if (!file) return;
 
-    try {
-      setIsUploading(true);
-      console.log("Selected file:", file);
    
     const objectUrl = URL.createObjectURL(file);
+    const backupImage = previewImage; 
     setPreviewImage(objectUrl);
 
+    try {
+      setIsUploading(true);
       const uploadedMedia = await uploadMedia(file);
+      
       console.log("Upload thành công:", uploadedMedia);
+
+     
+      if (uploadedMedia?.url) {
+        setPreviewImage(uploadedMedia.url);
+      }
+
     } catch (error) {
       console.error("Lỗi khi upload avatar:", error);
-      setPreviewImage(
+      setPreviewImage(backupImage);
-        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);
@@ -48,7 +57,6 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
   };
 
   return (
-    <>
     <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">
@@ -62,49 +70,19 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
               src={previewImage}
               alt="avatar"
               className="object-cover w-full h-full"
+              priority
             />
             
             <div className="absolute inset-0 flex items-center justify-center transition-opacity bg-black/50 opacity-0 group-hover:opacity-100">
               {isUploading ? (
-                  <svg
+                <svg className="w-6 h-6 text-white animate-spin" viewBox="0 0 24 24">
-                    className="w-6 h-6 text-white animate-spin"
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"></circle>
-                    xmlns="http://www.w3.org/2000/svg"
+                  <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>
-                    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
+                <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    className="w-6 h-6 text-white"
+                  <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" />
-                    fill="none"
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
-                    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>
@@ -124,22 +102,13 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
             </h4>
             <div className="flex flex-col items-center gap-1 text-center xl:flex-row xl:gap-3 xl:text-left">
               <p className="text-sm text-blue-500 dark:text-gray-400">
-                  {data.data?.roles?.map((role) => role.name).join(", ") ||
+                {data.data?.roles?.map((role) => role.name).join(", ") || "No roles available"}
-                    "No roles available"}
               </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"}
+                    {data.data.profile.bio}
-                    </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>
                 </>
               )}
@@ -148,6 +117,5 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
         </div>
       </div>
     </div>
-    </>
   );
 }

src/service/mediaService.ts

@@ -52,12 +52,13 @@ export const uploadFileToS3 = async (
   file: File,
   presigned: PreSignedResponse,
 ) => {
-  await axios.put(presigned.upload_url, file, {
+  const res = await axios.put(presigned.upload_url, file, {
     headers: {
       ...presigned.signed_headers,
       "Content-Type": file.type,
     },
   });
+  // console.log("Response from S3 upload:", res);
 };
 
 export const confirmUpload = async (token_id: string) => {
@@ -67,6 +68,7 @@ export const confirmUpload = async (token_id: string) => {
 
   return res.data;
 };
+
 export const uploadMedia = async (file: File) => {
   const { data: presigned } = await api.get<PreSignedResponse>(
     "/media/presigned",
@@ -78,10 +80,11 @@ export const uploadMedia = async (file: File) => {
       },
     },
   );
+  // console.log("Presigned URL:", presigned);
 
   await uploadFileToS3(file, presigned);
 
   const media = await confirmUpload(presigned.token_id);
-
+  // console.log("Media sau khi upload:", media);
   return media;
 };