ProfileFlow

src/api/auth/logout.tsx

@@ -0,0 +1,7 @@
+import { axios } from "@/lib/axios";
+
+export const logOut = async () => {
+    const response = await axios.post(`/user/logout`, {
+    });
+    return response.data;
+};

src/api/auth/updateUser.ts

@@ -0,0 +1,16 @@
+import { axios } from "@/lib/axios";
+
+interface UpdateUserPayload {
+  name?: string;
+  email?: string;
+  phone?: string;
+  phone_country?: string;
+}
+
+export const updateUser = async (payload: UpdateUserPayload) => {
+
+  const response = await axios.post("/user/update", payload, {
+  });
+
+  return response.data;
+};

src/components/ProductsPage/ProductCard.tsx

@@ -23,6 +23,7 @@ const ProductCard = ({ product }: ProductCardProps) => {
   const isNew = true;
   const price = parseInt(product.price);
   const discount = parseInt(product.discount);
+  const isAvailable = product.types?.some((type) => type.in_stock);
 
 const handleAddToCart = async (e: React.MouseEvent<HTMLButtonElement>) => {
   e.preventDefault();
@@ -301,7 +302,7 @@ const handleAddToCart = async (e: React.MouseEvent<HTMLButtonElement>) => {
             )}
           </motion.div>
 
-          <motion.div
+          {/* <motion.div
             className="flex items-center gap-1"
             variants={starsVariants}
           >
@@ -313,6 +314,7 @@ const handleAddToCart = async (e: React.MouseEvent<HTMLButtonElement>) => {
               >
                 <ReviewStarIcon />
               </motion.div>
+
             ))}
             <motion.span
               className="ml-2 text-slate-600 font-medium"
@@ -323,6 +325,12 @@ const handleAddToCart = async (e: React.MouseEvent<HTMLButtonElement>) => {
             >
               (5)
             </motion.span>
+          </motion.div> */}
+          <motion.div
+            className={`text-sm font-medium ${isAvailable ? "text-green-600" : "text-red-500"}`}
+            variants={contentVariants}
+          >
+            {isAvailable ? "متوفر" : "غير متوفر"}
           </motion.div>
         </motion.div>
 

src/components/general/header/Header.tsx

@@ -17,6 +17,7 @@ const Header = () => {
   const pathname = usePathname();
   const user = useAuthStore((state) => state.user);
   const isSignedIn = !!user;
+  const [hydrated, setHydrated] = useState(false);
 
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
@@ -51,6 +52,10 @@ const Header = () => {
     setIsMobileMenuOpen(!isMobileMenuOpen);
   };
 
+    useEffect(() => {
+    setHydrated(true);
+  }, []);
+
   return (
     <>
       <motion.nav
@@ -153,13 +158,15 @@ const Header = () => {
                   whileHover={{ scale: 1.02 }}
                   whileTap={{ scale: 0.98 }}
                 >
-        {isSignedIn ? (
-          <Link href='/profile' >
-            <Profile />
-          </Link>
-        ) : (
-          <SignInButton />
-        )}
+                {hydrated && (
+                  isSignedIn ? (
+                    <Link href='/profile' >
+                      <Profile />
+                    </Link>
+                  ) : (
+                    <SignInButton />
+                  )
+                )}
                 </motion.div>
                 <motion.div
                   whileHover={{ scale: 1.02 }}

src/components/profile/ProfileDetails.tsx

@@ -1,6 +1,52 @@
-import React from "react";
+"use client"
+import React, { useEffect, useState } from "react";
+import { useAuthStore } from "../stores/userStore";
+import { updateUser } from "@/api/auth/updateUser";
+import { toast } from "sonner";
 
 const ProfileDetails = () => {
+  const user = useAuthStore((state) => state.user);
+  const setUser = useAuthStore((state) => state.setUser);
+  const [formData, setFormData] = useState({
+    name: user?.name,
+    email: user?.email,
+    phone: user?.phone,
+    job: "",
+  });
+
+  console.log(user)
+
+    useEffect(() => {
+    if (user) {
+      setFormData({
+        name: user.name || "",
+        email: user.email || "",
+        phone: user.phone || "",
+        job: user.job || ""
+      });
+    }
+  }, [user]);
+
+const handleUpdate = async () => {
+  try {
+    const updatedUser = await updateUser({
+      name: formData.name,
+      phone: formData.phone,
+      phone_country: "EG",
+    });
+
+    setUser(updatedUser.user);
+
+    toast.success("تم تحديث البيانات بنجاح");
+  } catch (error: any) {
+    toast.error(
+      error?.response?.data?.message || "حدث خطأ أثناء تحديث البيانات"
+    );
+    console.error("Update failed:", error);
+  }
+};
+
+
   return (
     <section className="mt-10">
       <div className="grid lg:grid-cols-2 gap-[43px]">
@@ -18,6 +64,8 @@ const ProfileDetails = () => {
               id="name"
               placeholder="وليد السيد"
               className="w-full h-16 border border-[#9C9C9C] rounded-[12px] px-4"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
             />
           </div>
         </div>
@@ -34,6 +82,8 @@ const ProfileDetails = () => {
             id="tel"
             placeholder="123 4434 543"
             className="lg:w-[358px] w-full h-16 border border-[#9C9C9C] rounded-[12px] px-4"
+            value={formData.phone}
+            onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
           />
         </div>
         <div className="flex flex-col relative ">
@@ -49,6 +99,8 @@ const ProfileDetails = () => {
             id="email"
             placeholder="Walid [email protected]"
             className="lg:w-[358px] w-full h-16 border border-[#9C9C9C] rounded-[12px] px-4"
+            value={formData.email}
+            readOnly
           />
           <p className="text-[#4A4A4A] text-sm mt-2">
             لا يمكن تغيير البريد الإلكتروني المستخدم لتسجيل الدخول
@@ -67,12 +119,17 @@ const ProfileDetails = () => {
             id="job"
             placeholder="UI UX Designer"
             className="lg:w-[358px] w-full h-16 border border-[#9C9C9C] rounded-[12px] px-4"
+            value={formData.job}
+            onChange={(e) => setFormData({ ...formData, job: e.target.value })}
           />
         </div>
       </div>
-      <div className="w-[200px] h-12 bg-[#9C9C9C] rounded-[39px] text-[#FFFFFF] text-lg flex items-center justify-center mx-auto mt-12">
-        حفظ التعديلات
-      </div>
+      <button
+      onClick={handleUpdate}
+      className="w-[200px] h-12 bg-[#007EC1] hover:bg-[#005f95] transition-all duration-200 rounded-[39px] text-[#FFFFFF] text-lg flex items-center justify-center mx-auto mt-12"
+    >
+      حفظ التعديلات
+    </button>
     </section>
   );
 };

src/components/profile/ProfileSidebar.tsx

@@ -1,8 +1,11 @@
 import Image from "next/image";
 import React from "react";
 import ProfileTabs from "./ProfileTabs";
+import { useAuthStore } from "../stores/userStore";
 
 const ProfileSidebar = ({ activeTab, setActiveTab }) => {
+    const user = useAuthStore((state) => state.user);
+
   return (
     <section
       className="w-full md:max-w-[279px] h-full flex flex-col items-center rounded-[12px] p-4"
@@ -24,7 +27,7 @@ const ProfileSidebar = ({ activeTab, setActiveTab }) => {
           className="absolute bottom-0 right-0"
         />
       </div>
-      <h1 className="text-[#000000] text-lg font-medium mt-2">وليد السيد</h1>
+      <h1 className="text-[#000000] text-lg font-medium mt-2">{user?.name}</h1>
       <p className="text-[#4A4A4A] text-base mt-1">UI UX Designer</p>
 
       <ProfileTabs activeTab={activeTab} setActiveTab={setActiveTab} />

src/components/profile/ProfileTabs.tsx

@@ -1,23 +1,59 @@
+'use client';
 import React from "react";
 import Profile from "../icons/profile/Profile";
 import Favorite from "../icons/profile/Favorite";
 import Bookmarks from "../icons/profile/Bookmarks";
 import MyProducts from "../icons/profile/MyProducts";
 import Logout from "../icons/profile/Logout";
+import { logOut } from "@/api/auth/logout";
+import { toast } from "sonner";
+import { useAuthStore } from "../stores/userStore";
+import { useRouter } from "next/navigation";
+
+interface ProfileTabsProps {
+  activeTab: string;
+  setActiveTab: (tab: string) => void;
+}
+
+interface TabItem {
+  key: string;
+  icon: React.ReactNode;
+  label: string;
+}
+
+const ProfileTabs: React.FC<ProfileTabsProps> = ({ activeTab, setActiveTab }) => {
+  const clearUser = useAuthStore((state) => state.clearUser);
+  const router = useRouter();
+
+  const handleTabClick = async (tabKey: string): Promise<void> => {
+    if (tabKey === "logout") {
+      try {
+        await logOut();
+        clearUser();
+        toast.success("Logged out successfully")
+        router.push("/")
+      } catch {
+        toast.error("Logout failed");
+      }
+    } else {
+      setActiveTab(tabKey);
+    }
+  };
+
+  const tabs: TabItem[] = [
+    { key: "profile", icon: <Profile />, label: "الملف الشخصي" },
+    { key: "favorite", icon: <Favorite />, label: "المفضلة" },
+    { key: "bookmarks", icon: <Bookmarks />, label: "المحفوظات" },
+    { key: "products", icon: <MyProducts />, label: "منتجاتي" },
+    { key: "logout", icon: <Logout />, label: "تسجيل الخروج" },
+  ];
 
-const ProfileTabs = ({ activeTab, setActiveTab }) => {
   return (
     <div className="mt-6 w-full">
-      {[
-        { key: "profile", icon: <Profile />, label: "الملف الشخصي" },
-        { key: "favorite", icon: <Favorite />, label: "المفضلة" },
-        { key: "bookmarks", icon: <Bookmarks />, label: "المحفوظات" },
-        { key: "products", icon: <MyProducts />, label: "منتجاتي" },
-        { key: "logout", icon: <Logout />, label: "تسجيل الخروج" },
-      ].map((tab) => (
+      {tabs.map((tab: TabItem) => (
         <div
           key={tab.key}
-          onClick={() => setActiveTab(tab.key)}
+          onClick={() => handleTabClick(tab.key)}
           className="flex items-center gap-3 cursor-pointer mb-4"
         >
           {tab.icon}

src/components/stores/userStore.ts

@@ -5,6 +5,8 @@ interface User {
     id: number;
     name: string;
     email: string;
+    phone: string;
+    job: string;
 }
 
 interface AuthState {

src/types/product.ts

@@ -12,6 +12,11 @@ export type ProductOptionTypes = {
   in_stock: boolean;
 };
 
+export type ProductTypeOption = {
+  value: string;
+  in_stock: boolean;
+};
+
 export interface ProductTypes {
   id: number;
   name: {
@@ -25,6 +30,7 @@ export interface ProductTypes {
   price: string;
   discount: string;
   options: ProductOptionTypes[];
+  types: ProductTypeOption[];
   category_id: number;
   brand_id: number | null;
   is_active: number;