Marketplace userprofile on dashbaord

cubeseed_login/package.json

@@ -39,6 +39,7 @@
     "@types/react": "18.0.37",
     "@types/react-dom": "18.0.11",
     "autoprefixer": "^10.4.14",
+    "axios": "^1.6.5",
     "chromatic": "^7.4.0",
     "eslint": "8.48.0",
     "eslint-config-next": "13.4.19",
@@ -50,6 +51,7 @@
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "pretty-quick": "^3.1.3",
+    "react-icons": "^5.0.1",
     "storybook": "^7.5.1",
     "tailwindcss": "^3.3.2",
     "typescript": "5.0.4"

cubeseed_login/src/component/dashboard/MarketPlaceProfile/CategoryInputField.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+import Link from "next/link"
+import styles from "@/styles/marketplaceprofile.module.css"
+import SearchBar from "./SearchBar"
+import { BsCart3, BsPersonCircle } from "react-icons/bs"
+import { FiMessageSquare } from "react-icons/fi"
+
+const CategoryInputField: React.FC = () => {
+  return (
+    <div className={styles.categoryInput}>
+      <SearchBar />
+      <div className="flex">
+        <ul className={styles.categoryIcons}>
+          <li>
+            <Link href="">
+              <BsCart3 />
+            </Link>
+          </li>
+          <li>
+            <Link href="">
+              <FiMessageSquare />
+            </Link>
+          </li>
+          <li>
+            <Link href="">
+              <BsPersonCircle />
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default CategoryInputField

cubeseed_login/src/component/dashboard/MarketPlaceProfile/DocumentFIle.tsx

@@ -0,0 +1,35 @@
+// FileInput.tsx
+import React, { ChangeEvent } from "react"
+import styles from "@/styles/marketplaceprofile.module.css"
+
+interface FileInputProps {
+  id: string
+  name: string
+  label: string
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void
+  error: string
+}
+
+const FileInput: React.FC<FileInputProps> = ({
+  id,
+  name,
+  label,
+  onChange,
+  error,
+}) => {
+  return (
+    <div>
+      <label htmlFor={id}>{label}</label>
+      <input
+        id={id}
+        name={name}
+        type="file"
+        accept=".pdf, .doc, .docx"
+        onChange={onChange}
+      />
+      {error && <div className={styles.error}>{error}</div>}
+    </div>
+  )
+}
+
+export default FileInput

cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyAccountForm.tsx

@@ -0,0 +1,126 @@
+import React, { useState } from "react"
+import Link from "next/link"
+import styles from "@/styles/marketplaceprofile.module.css"
+import ProfileImg from "./ProfileImg"
+import useProfile from "./hooks/useProfile"
+import { Input } from "@cs/stories/Input"
+import useProfilePhoto from "./hooks/useProfilePhoto"
+
+const PersonalDetailForm: React.FC = () => {
+  const { errors, formData, handleUserInputs, handleSubmit } = useProfile()
+  const { uploading, selectedImage, handleFileChange, error } =
+    useProfilePhoto()
+
+  return (
+    <div className={styles.mainContent}>
+      <div className={styles.profileImg}>
+        <ProfileImg
+          uploading={uploading}
+          selectedImage={selectedImage}
+          handleFileChange={handleFileChange}
+          error={error}
+        />
+      </div>
+
+      <div className={styles.profileContent}>
+        <form className={styles.personalDetails}>
+          <p>Personal Detail</p>
+
+          <div className="flex flex-col justify-between gap-4 pt-8">
+            <Input
+              label="Name"
+              id="name"
+              type="text"
+              name="name"
+              value={formData.name}
+              placeholder=""
+              onChange={handleUserInputs}
+              required
+            />
+            {errors.name && <div className={styles.error}>{errors.name}</div>}
+
+            <Input
+              type="tel"
+              name="phone_number"
+              label="Phone Number"
+              value={formData.phone_number}
+              placeholder=""
+              onChange={handleUserInputs}
+              required
+            />
+            {errors.phone_number && (
+              <div className={styles.error}>{errors.phone_number}</div>
+            )}
+
+            <Input
+              type="email"
+              label="Email"
+              name="email"
+              value={formData.email}
+              placeholder=""
+              onChange={handleUserInputs}
+              required
+            />
+            {errors.email && <div className={styles.error}>{errors.email}</div>}
+
+            <Input
+              id="location"
+              type="text"
+              label="Location"
+              name="location"
+              value={formData.location}
+              placeholder=""
+              onChange={handleUserInputs}
+              required
+            />
+            {errors.location && (
+              <div className={styles.error}>{errors.location}</div>
+            )}
+          </div>
+          <hr />
+          <div className="flex flex-col justify-between gap-4 pt-8">
+            <p>Password</p>
+            <Input
+              type="password"
+              label="Old password"
+              name="old_password"
+              value={formData.old_password}
+              placeholder=""
+              onChange={handleUserInputs}
+              required
+            />
+            {errors.old_password && (
+              <div className={styles.error}>{errors.old_password}</div>
+            )}
+
+            <Input
+              type="password"
+              label="New Password"
+              name="new_password"
+              value={formData.new_password}
+              placeholder=""
+              onChange={handleUserInputs}
+              required
+            />
+            {errors.new_password && (
+              <div className={styles.error}>{errors.new_password}</div>
+            )}
+          </div>
+        </form>
+        <div className={styles.btnBusiness}>
+          <button className={styles.btnOutlined} onClick={handleSubmit}>
+            {" "}
+            Submit{" "}
+          </button>
+          <button className={styles.btnFilled}>
+            <Link href="/dashboard/marketplace_dashboard/mybusinessform/">
+              Next
+            </Link>
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PersonalDetailForm

cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyAccountFormEdit.tsx

@@ -0,0 +1,65 @@
+import React from "react"
+import Link from "next/link"
+import styles from "@/styles/marketplaceprofile.module.css"
+import ProfileImg from "./ProfileImg"
+import useProfilePhoto from "./hooks/useProfilePhoto"
+
+const MyAccountFormEdit: React.FC = () => {
+  const { uploading, selectedImage, handleFileChange, error } =
+    useProfilePhoto()
+
+  return (
+    <>
+      <div className={styles.mainContent}>
+        <div className={styles.profileImg}>
+          <ProfileImg
+            uploading={uploading}
+            selectedImage={selectedImage}
+            handleFileChange={handleFileChange}
+            error={error}
+          />
+        </div>
+        <div className={styles.profileContent}>
+          <div className={styles.formEditTitle}>
+            <p>Personal Detail</p>
+            <p>Edit</p>
+          </div>
+          <div className={styles.formContent}>
+            <p>Name</p>
+            <p>Phone Number</p>
+            <p>Email</p>
+            <p>Location</p>
+          </div>
+          <hr />
+          <div className={styles.formEditTitle}>
+            <p>Password</p>
+            <p>Change Password</p>
+          </div>
+          <div className={styles.formContent}>
+            <p>Password</p>
+          </div>
+          <hr />
+          <div className={styles.formEditTitle}>
+            <p>Preferred Products</p>
+            <p>Edit</p>
+          </div>
+          <div className={styles.formContent}>
+            <p>Animal feed, Cocoa Products, Coffee and tea, Frui...</p>
+          </div>
+        </div>
+      </div>
+      <div className={styles.btn}>
+        <button className={styles.btnOutlined}>
+          <Link href="">Delete Account</Link>
+        </button>
+        <button className={styles.btnFilled}>
+          <Link href="/dashboard/marketplace_profile/mybusinessformedit">
+            Next
+          </Link>
+        </button>
+      </div>
+    </>
+  )
+}
+
+export default MyAccountFormEdit

cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyAccountTitle.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+import styles from "@/styles/marketplaceprofile.module.css"
+
+interface MyAccountTitleProps {
+  title: string
+}
+
+const MyAccountTitle: React.FC<MyAccountTitleProps> = ({ title }) => {
+  return (
+    <div className={styles.accountTile}>
+      <p>{title}</p>
+      <hr />
+    </div>
+  )
+}
+
+export default MyAccountTitle