profile update

api.ts

@@ -2,7 +2,9 @@ export const API_URL_ROOT = process.env.NEXT_PUBLIC_API_URL_ROOT || "";
 
 export const API = {
   User : {
-    CURRENT: `${API_URL_ROOT}/users/current`
+    CURRENT: `${API_URL_ROOT}/users/current`,
+    MEDIA: `${API_URL_ROOT}/users/current/media`,
+    Update:  (Id: number | string) => `${API_URL_ROOT}/users/${Id}`,
   },
   Auth : {
     SIGNUP: `${API_URL_ROOT}/auth/signup`,

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

@@ -2,8 +2,10 @@
 
 import UserAddressCard from "@/components/user-profile/UserAddressCard";
 import UserInfoCard from "@/components/user-profile/UserInfoCard";
-import UserMetaCard, { UserMetaCardProps } from "@/components/user-profile/UserMetaCard";
+import UserMetaCard from "@/components/user-profile/UserMetaCard";
+import { UserMetaCardProps } from "@/interface/user";
 import { apiGetCurrentUser } from "@/service/auth";
+import { apiGetCurrentUserMedia } from "@/service/userService";
 import { RootState } from "@/store/store";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
@@ -16,7 +18,9 @@ export default function Profile() {
     const fetchUser = async () => {
       try {
         const result = await apiGetCurrentUser();
+        const mediaResult = await apiGetCurrentUserMedia();
         console.log("Current User:", result);
+        console.log("User Media:", mediaResult);
         setUser(result);
       } catch (err) {
         console.error("Lỗi:", err);
@@ -35,7 +39,7 @@ export default function Profile() {
         </h3>
         <div className="space-y-6">
           <UserMetaCard data={user ?? {}} />
-          <UserInfoCard />
+          <UserInfoCard data={user ?? {}} />
           <UserAddressCard />
         </div>
       </div>

src/components/ui/button/Button.tsx

@@ -9,6 +9,7 @@ interface ButtonProps {
   onClick?: () => void; // Click handler
   disabled?: boolean; // Disabled state
   className?: string; // Disabled state
+  type?: "button" | "submit" | "reset";
 }
 
 const Button: React.FC<ButtonProps> = ({
@@ -20,6 +21,7 @@ const Button: React.FC<ButtonProps> = ({
   onClick,
   className = "",
   disabled = false,
+ type = "button",
 }) => {
   // Size Classes
   const sizeClasses = {

src/components/user-profile/UserAddressCard.tsx

@@ -1,31 +1,55 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import { useModal } from "../../hooks/useModal";
 import { Modal } from "../ui/modal";
 import Button from "../ui/button/Button";
 import Input from "../form/input/InputField";
 import Label from "../form/Label";
+import { Profile } from "@/interface/user";
 
 export default function UserAddressCard() {
   const { isOpen, openModal, closeModal } = useModal();
-  const handleSave = () => {
+  const [formData, setFormData] = useState<Profile>({
-    // Handle save logic here
+      display_name: "",
-    console.log("Saving changes...");
+      phone: "",
-    closeModal();
+      bio: "",
-  };
+      location: "",
+      website: "",
+      // Thêm các field khác nếu cần
+    });
+  
+    useEffect(() => {
+      if (data?.data?.profile) {
+        setFormData({
+          display_name: data.data.profile.display_name || "",
+          phone: data.data.profile.phone || "",
+          bio: data.data.profile.bio || "",
+          location: data.data.profile.location || "",
+          website: data.data.profile.website || "",
+        });
+      }
+    }, [data, isOpen]);
+  
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const { name, value } = e.target;
+      setFormData((prev) => ({
+        ...prev,
+        [name]: value,
+      }));
+    };
   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">
           <div>
-            <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90 lg:mb-6">
+            <h4 className="text-lg font-semibold text-red-600 dark:text-white/90 lg:mb-6">
-              Address
+              Account details
             </h4>
 
             <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-7 2xl:gap-x-32">
               <div>
                 <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
-                  Country
+                  Username
                 </p>
                 <p className="text-sm font-medium text-gray-800 dark:text-white/90">
                   United States
@@ -40,30 +64,12 @@ export default function UserAddressCard() {
                   Phoenix, Arizona, United States.
                 </p>
               </div>
-
-              <div>
-                <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
-                  Postal Code
-                </p>
-                <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                  ERT 2489
-                </p>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
-                  TAX ID
-                </p>
-                <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                  AS4568384
-                </p>
-              </div>
             </div>
           </div>
 
           <button
             onClick={openModal}
-            className="flex w-full items-center justify-center gap-2 rounded-full border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200 lg:inline-flex lg:w-auto"
+            className="flex w-full items-center justify-center gap-2 rounded-full border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-red-600 shadow-theme-xs hover:bg-gray-50 hover:text-red-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200 lg:inline-flex lg:w-auto"
           >
             <svg
               className="fill-current"

src/components/user-profile/UserInfoCard.tsx

@@ -1,17 +1,60 @@
 "use client";
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import { useModal } from "../../hooks/useModal";
 import { Modal } from "../ui/modal";
 import Button from "../ui/button/Button";
 import Input from "../form/input/InputField";
 import Label from "../form/Label";
+import { Profile, UserMetaCardProps } from "@/interface/user";
+import { apiUpdateUser } from "@/service/userService";
+import { toast } from "sonner";
+import Link from "next/link";
 
-export default function UserInfoCard() {
+export default function UserInfoCard({ data }: { data: UserMetaCardProps }) {
+  const router = useRouter();
   const { isOpen, openModal, closeModal } = useModal();
-  const handleSave = () => {
+  // 1. Khởi tạo state cho form
-    // Handle save logic here
+  const [formData, setFormData] = useState<Profile>({
-    console.log("Saving changes...");
+    display_name: "",
-    closeModal();
+    phone: "",
+    bio: "",
+    location: "",
+    website: "",
+    // Thêm các field khác nếu cần
+  });
+
+  useEffect(() => {
+    if (data?.data?.profile) {
+      setFormData({
+        display_name: data.data.profile.display_name || "",
+        phone: data.data.profile.phone || "",
+        bio: data.data.profile.bio || "",
+        location: data.data.profile.location || "",
+        website: data.data.profile.website || "",
+      });
+    }
+  }, [data, isOpen]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSave = async (e: React.FormEvent) => {
+    try {
+      const userId = data?.data?.id;
+      if (userId) {
+        await apiUpdateUser(userId, formData);
+        toast.success("Cập nhật thành công!");
+        router.refresh();
+      }
+    } catch (error) {
+      console.error("Lỗi khi cập nhật profile:", error);
+    }
   };
   return (
     <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
@@ -24,28 +67,18 @@ export default function UserInfoCard() {
           <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-7 2xl:gap-x-32">
             <div>
               <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
-                First Name
+                Full Name
               </p>
               <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                Musharof
+                {data.data?.profile?.display_name || "Full Name"}
               </p>
             </div>
-
-            <div>
-              <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
-                Last Name
-              </p>
-              <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                Chowdhury
-              </p>
-            </div>
-
             <div>
               <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
                 Email address
               </p>
               <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                randomuser@pimjo.com
+                {data.data?.email || "Email address"}
               </p>
             </div>
 
@@ -54,7 +87,7 @@ export default function UserInfoCard() {
                 Phone
               </p>
               <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                +09 363 398 46
+                {data.data?.profile?.phone || "+123 456 7890"}
               </p>
             </div>
 
@@ -63,9 +96,31 @@ export default function UserInfoCard() {
                 Bio
               </p>
               <p className="text-sm font-medium text-gray-800 dark:text-white/90">
-                Team Manager
+                {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>
           </div>
         </div>
 
@@ -73,13 +128,12 @@ export default function UserInfoCard() {
           onClick={openModal}
           className="flex w-full items-center justify-center gap-2 rounded-full border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200 lg:inline-flex lg:w-auto"
         >
+          {/* SVG giữ nguyên */}
           <svg
             className="fill-current"
             width="18"
             height="18"
             viewBox="0 0 18 18"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
           >
             <path
               fillRule="evenodd"
@@ -102,82 +156,84 @@ export default function UserInfoCard() {
               Update your details to keep your profile up-to-date.
             </p>
           </div>
-          <form className="flex flex-col">
+          <form className="flex flex-col" onSubmit={handleSave}>
             <div className="custom-scrollbar h-[450px] overflow-y-auto px-2 pb-3">
-              <div>
-                <h5 className="mb-5 text-lg font-medium text-gray-800 dark:text-white/90 lg:mb-6">
-                  Social Links
-                </h5>
-
-                <div className="grid grid-cols-1 gap-x-6 gap-y-5 lg:grid-cols-2">
-                  <div>
-                    <Label>Facebook</Label>
-                    <Input
-                      type="text"
-                      defaultValue="https://www.facebook.com/PimjoHQ"
-                    />
-                  </div>
-
-                  <div>
-                    <Label>X.com</Label>
-                    <Input type="text" defaultValue="https://x.com/PimjoHQ" />
-                  </div>
-
-                  <div>
-                    <Label>Linkedin</Label>
-                    <Input
-                      type="text"
-                      defaultValue="https://www.linkedin.com/company/pimjo"
-                    />
-                  </div>
-
-                  <div>
-                    <Label>Instagram</Label>
-                    <Input
-                      type="text"
-                      defaultValue="https://instagram.com/PimjoHQ"
-                    />
-                  </div>
-                </div>
-              </div>
               <div className="mt-7">
                 <h5 className="mb-5 text-lg font-medium text-gray-800 dark:text-white/90 lg:mb-6">
                   Personal Information
                 </h5>
 
                 <div className="grid grid-cols-1 gap-x-6 gap-y-5 lg:grid-cols-2">
-                  <div className="col-span-2 lg:col-span-1">
+                  <div className="col-span-2">
-                    <Label>First Name</Label>
+                    <Label>Display Name</Label>
-                    <Input type="text" defaultValue="Musharof" />
+                    <Input
-                  </div>
+                      type="text"
-
+                      name="display_name"
-                  <div className="col-span-2 lg:col-span-1">
+                      defaultValue={formData.display_name}
-                    <Label>Last Name</Label>
+                      onChange={handleChange}
-                    <Input type="text" defaultValue="Chowdhury" />
+                    />
                   </div>
 
                   <div className="col-span-2 lg:col-span-1">
                     <Label>Email Address</Label>
-                    <Input type="text" defaultValue="randomuser@pimjo.com" />
+                    <Input
+                      type="text"
+                      disabled
+                      defaultValue={data.data?.email}
+                    />
                   </div>
 
                   <div className="col-span-2 lg:col-span-1">
                     <Label>Phone</Label>
-                    <Input type="text" defaultValue="+09 363 398 46" />
+                    <Input
+                      type="text"
+                      name="phone"
+                      defaultValue={formData.phone}
+                      onChange={handleChange}
+                    />
+                  </div>
+
+                  <div className="col-span-2">
+                    <Label>Location</Label>
+                    <Input
+                      type="text"
+                      name="location"
+                      defaultValue={formData.location}
+                      onChange={handleChange}
+                    />
                   </div>
 
                   <div className="col-span-2">
                     <Label>Bio</Label>
-                    <Input type="text" defaultValue="Team Manager" />
+                    <Input
+                      type="text"
+                      name="bio"
+                      defaultValue={formData.bio}
+                      onChange={handleChange}
+                    />
+                  </div>
+                   <div className="col-span-2">
+                    <Label>Website</Label>
+                    <Input
+                      type="text"
+                      name="website"
+                      defaultValue={formData.website}
+                      onChange={handleChange}
+                    />
                   </div>
                 </div>
               </div>
             </div>
             <div className="flex items-center gap-3 px-2 mt-6 lg:justify-end">
-              <Button size="sm" variant="outline" onClick={closeModal}>
+              <Button
+                size="sm"
+                variant="outline"
+                type="button"
+                onClick={closeModal}
+              >
                 Close
               </Button>
-              <Button size="sm" onClick={handleSave}>
+              <Button size="sm" type="submit">
                 Save Changes
               </Button>
             </div>

src/components/user-profile/UserMetaCard.tsx

@@ -6,31 +6,7 @@ import Button from "../ui/button/Button";
 import Input from "../form/input/InputField";
 import Label from "../form/Label";
 import Image from "next/image";
-interface Profile {
+import { UserMetaCardProps } from "@/interface/user";
-  avatar_url?: string;
-  bio?: string;
-  country_code?: string;
-  display_name?: string;
-  full_name?: string;
-  location?: string;
-  phone?: string;
-  website?: string;
-}
-interface Data {
-  email?: string;
-  profile?: Profile;
-  roles?: Role[];
-}
-interface Role {
-  id?: number;
-  name?: string;
-}
-
-export interface UserMetaCardProps {
-  message?: string;
-  status?: boolean;
-  data?: Data;
-}
 
 export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
   const { isOpen, openModal, closeModal } = useModal();
@@ -48,13 +24,13 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
               <Image
                 width={80}
                 height={80}
-                src= {data.data?.profile?.avatar_url || "/images/no-images.jpg"}
+                src={data.data?.profile?.avatar_url || "/images/no-images.jpg"}
-                alt="user"
+                alt="avatar"
               />
             </div>
             <div className="order-3 xl:order-2">
               <h4 className="mb-2 text-lg font-semibold text-center text-gray-800 dark:text-white/90 xl:text-left">
-                {data.data?.profile?.display_name || "Unknown User"}
+                {data.data?.profile?.display_name || "Full Name"}
               </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-gray-500 dark:text-gray-400">
@@ -64,6 +40,11 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
                 <p className="text-sm text-gray-500 dark:text-gray-400">
                   {data.data?.profile?.location || "user location"}
                 </p>
+                <div className="hidden h-3.5 w-px bg-gray-300 dark:bg-gray-700 xl:block"></div>
+                <p className="text-sm text-blue-500 dark:text-gray-400">
+                  {data.data?.roles?.map((role) => role.name).join(", ") ||
+                    "No roles available"}
+                </p>
               </div>
             </div>
             {/* <div className="flex items-center order-2 gap-2 grow xl:order-3 xl:justify-end">
@@ -160,7 +141,7 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
           </button> */}
         </div>
       </div>
-      <Modal isOpen={isOpen} onClose={closeModal} className="max-w-[700px] m-4">
+      {/* <Modal isOpen={isOpen} onClose={closeModal} className="max-w-[700px] m-4">
         <div className="no-scrollbar relative w-full max-w-[700px] overflow-y-auto rounded-3xl bg-white p-4 dark:bg-gray-900 lg:p-11">
           <div className="px-2 pr-14">
             <h4 className="mb-2 text-2xl font-semibold text-gray-800 dark:text-white/90">
@@ -251,7 +232,7 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
             </div>
           </form>
         </div>
-      </Modal>
+      </Modal> */}
     </>
   );
 }

src/interface/user.ts

@@ -25,3 +25,29 @@ export interface UserData {
     roles: UserRole[];
 }
 
+export interface Profile {
+  avatar_url?: string;
+  bio?: string;
+  country_code?: string;
+  display_name?: string;
+  full_name?: string;
+  location?: string;
+  phone?: string;
+  website?: string;
+}
+export interface Data {
+  email?: string;
+  profile?: Profile;
+  roles?: Role[];
+  id: string;
+}
+export interface Role {
+  id?: number;
+  name?: string;
+}
+
+export interface UserMetaCardProps {
+  message?: string;
+  status?: boolean;
+  data?: Data;
+}

src/service/auth.ts

@@ -30,3 +30,4 @@ export const apiGetCurrentUser = async () => {
   const response = await api.get(API.User.CURRENT);
   return response?.data;
 };
+

src/service/userService.ts

@@ -0,0 +1,14 @@
+import api from "@/config/config";
+import { API } from "../../api";
+import { Profile } from "@/interface/user";
+
+export const apiGetCurrentUserMedia = async () => {
+  const response = await api.get(API.User.MEDIA);
+  return response?.data;
+};
+
+export const apiUpdateUser = async (id: number | string, payload: Profile) => {
+  const response = await api.put(API.User.Update(id), payload);
+  return response?.data;
+};
+