chore: setup project for production

app/accounts/profile/page.jsx

@@ -0,0 +1,151 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import authAxios from "@/utils/axios";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+
+export default function ProfilePage() {
+  const [profileData, setProfileData] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isError, setIsError] = useState(false);
+  const router = useRouter();
+  useEffect(() => {
+    const fetchProfileData = async () => {
+      try {
+        const response = await authAxios.get("/account/profile/");
+        setProfileData(response.data);
+        setIsLoading(false);
+      } catch (error) {
+        console.error("Error fetching profile data", error);
+        setIsError(true);
+        setIsLoading(false);
+      }
+    };
+
+    fetchProfileData();
+  }, []);
+
+  const getDisplayValue = (value) => {
+    return value ? value : "Not set up";
+  };
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (isError) {
+    return <div>Error loading profile data. Please try again later.</div>;
+  }
+
+  return (
+    <div className="max-h-[70vh] hide-navbar overflow-y-scroll">
+      <div className="flex gap-3">
+        <div className="p-6 sm:text-xl border">
+          All Orders{" "}
+          <h2 className="text-lg sm:text-2xl font-semibold">
+            {profileData.orders || 0}
+          </h2>
+        </div>
+        <div className="p-6 border rounded-md sm:text-xl ">
+          Addresses{" "}
+          <h2 className="text-lg sm:text-2xl font-semibold">
+            {profileData.addresses || 0}
+          </h2>
+        </div>
+      </div>
+      <h1 className="text-2xl font-bold mb-4 mt-4">Profile information</h1>
+      <div className="bg-white shadow-md rounded p-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-gray-700 text-sm font-bold mb-2">
+              First name
+            </label>
+            <p className="text-gray-900">
+              {getDisplayValue(profileData.first_name)}
+            </p>
+          </div>
+          <div>
+            <label className="block text-gray-700 text-sm font-bold mb-2">
+              Last name
+            </label>
+            <p className="text-gray-900">
+              {getDisplayValue(profileData.last_name)}
+            </p>
+          </div>
+          <div>
+            <label className="block text-gray-700 text-sm font-bold mb-2">
+              Date of birth
+            </label>
+            <p className="text-gray-900">
+              {getDisplayValue(profileData.birth_day)}
+            </p>
+          </div>
+          <div>
+            <label className="block text-gray-700 text-sm font-bold mb-2">
+              Gender
+            </label>
+            <p className="text-gray-900">
+              {getDisplayValue(profileData.gender)}
+            </p>
+          </div>
+        </div>
+
+        <h2 className="text-xl font-bold mt-6 mb-4">Contact methods</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-gray-700 text-sm font-bold mb-2">
+              Email
+            </label>
+            <p className="text-gray-900">
+              {getDisplayValue(profileData.email)}
+            </p>
+          </div>
+          <div>
+            <label className="block text-gray-700 text-sm font-bold mb-2">
+              Phone
+            </label>
+            <p className="text-gray-900">
+              {getDisplayValue(profileData.phone)}
+            </p>
+          </div>
+        </div>
+
+        <h2 className="text-xl font-bold mt-6 mb-4">Other Info</h2>
+        <div>
+          <label className="block text-gray-700 text-sm font-bold mb-2">
+            Profile Picture
+          </label>
+          {profileData.profile_pic ? (
+      <Image
+      src={profileData.profile_pic}
+      alt="Profile Picture"
+      width={64}
+      height={64}
+      className="rounded-full object-cover"
+    />
+          ) : (
+            <p className="text-gray-900">Not set up</p>
+          )}
+        </div>
+
+        <h2 className="text-xl font-bold mt-6 mb-4">Other Info</h2>
+        <div>
+          <label className="block text-gray-700 text-sm font-bold mb-2">
+            Accepts Marketing from Gupta Rudraksha
+          </label>
+          <p className="text-gray-900">
+            {getDisplayValue(profileData.accepts_marketing)}
+          </p>
+        </div>
+
+        <button
+          onClick={() => router.push("/accounts/profile/edit-profile")}
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-6"
+        >
+          Edit
+        </button>
+      </div>
+    </div>
+  );
+}