From d244df302b53ee92bfce8ed15848a5f4a832fcfc Mon Sep 17 00:00:00 2001
From: "Siddhesh.More" <siddhesh.more@wdimails.com>
Date: Tue, 5 Nov 2024 12:12:38 +0530
Subject: [PATCH] update

---
 src/Components/HeaderMain.jsx |   2 +-
 src/Pages/Profile/Profile.jsx | 227 ++++++++++++++++++++++++++++++++++
 src/Routes/Routes.js          |   4 +-
 3 files changed, 231 insertions(+), 2 deletions(-)
 create mode 100644 src/Pages/Profile/Profile.jsx

diff --git a/src/Components/HeaderMain.jsx b/src/Components/HeaderMain.jsx
index 63b24d3..65db972 100644
--- a/src/Components/HeaderMain.jsx
+++ b/src/Components/HeaderMain.jsx
@@ -63,7 +63,7 @@ const HeaderMain = ({
           <Portal>
             <PopoverContent maxW="200px" className="">
               <PopoverArrow />
-              <PopoverBody className="web-text-medium pointer link">
+              <PopoverBody onClick={()=> navigate('/profile')} className="web-text-medium pointer link">
                 Profile
               </PopoverBody>
               <Link to={"/help-and-support"}>
diff --git a/src/Pages/Profile/Profile.jsx b/src/Pages/Profile/Profile.jsx
new file mode 100644
index 0000000..5add0a2
--- /dev/null
+++ b/src/Pages/Profile/Profile.jsx
@@ -0,0 +1,227 @@
+import {
+  Avatar,
+  Box,
+  ButtonGroup,
+  Editable,
+  EditableInput,
+  EditablePreview,
+  EditableTextarea,
+  Flex,
+  HStack,
+  Heading,
+  Icon,
+  IconButton,
+  Input,
+  Text,
+  VStack,
+  useEditableControls,
+} from "@chakra-ui/react";
+import React from "react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { CheckIcon, CloseIcon, EditIcon, InfoIcon } from "@chakra-ui/icons";
+import { FaEarthAmericas } from "react-icons/fa6";
+import logoMini from "../../assets/propic.png";
+
+const Profile = () => {
+  /* Here's a custom control */
+  function EditableControls() {
+    const {
+      isEditing,
+      getSubmitButtonProps,
+      getCancelButtonProps,
+      getEditButtonProps,
+    } = useEditableControls();
+
+    return (
+      isEditing && (
+        <ButtonGroup position={"absolute"} right={0} bottom={-8} size="sm">
+          <IconButton
+            boxShadow={"sm"}
+            rounded={"md"}
+            size={"xs"}
+            icon={<CheckIcon />}
+            {...getSubmitButtonProps()}
+          />
+          <IconButton
+            boxShadow={"sm"}
+            rounded={"md"}
+            size={"xs"}
+            icon={<CloseIcon />}
+            {...getCancelButtonProps()}
+          />
+        </ButtonGroup>
+      )
+    );
+  }
+
+
+    // Array of fields to render
+    const fields = [
+      { name: "firstName", label: "First Name", defaultValue: "Faisal" },
+      { name: "lastName", label: "Last Name", defaultValue: "Aljalahma" },
+      { name: "email", label: "Email Address", defaultValue: "f.aljalahma@tanamicapital.com" },
+      { name: "mobile", label: "Mobile Number", defaultValue: "9898767876" },
+      { name: "role", label: "Role", defaultValue: "Maker" },
+    ];
+
+
+
+
+  return (
+    <VStack
+      // bg={'forestGreen.50'}
+      overflowY={"scroll"}
+      overflowX={"hidden"}
+      height={"100vh"}
+      pb={10}
+      w={"100%"}
+      {...OPACITY_ON_LOAD}
+    >
+      <VStack alignItems={"start"} w={"50%"} mt={4}>
+        <Heading as="h3" size="md">
+          Profile setting
+        </Heading>
+
+        <Text color={"gray.500"} fontSize="xs">
+          Manage your personal information, and control which information other
+          people see and apps may access.
+        </Text>
+
+        <Heading as="h3" size="sm">
+          Profile photo and role
+        </Heading>
+
+        <Box
+          mb={6}
+          rounded={"md"}
+          boxShadow={"base"}
+          bg={"#fff"}
+          minH={200}
+          w={"100%"}
+          display={"flex"}
+          flexDirection={"column"}
+          alignItems={"start"}
+          p={8}
+          pb={6}
+          pe={6}
+        >
+          <HStack>
+            <Avatar size="xl" name="Faisal Aljalahma" src={logoMini} me={4} />
+            <VStack alignItems={"start"} gap={0}>
+              <Text
+                as={"span"}
+                fontSize={"md"}
+                color={"gray.700"}
+                fontWeight={500}
+              >
+                Faisal Aljalahma
+              </Text>
+
+              <Text
+                as={"span"}
+                fontSize={"xs"}
+                color={"gray.500"}
+                fontWeight={400}
+              >
+                f.aljalahma@tanamicapital.com
+              </Text>
+            </VStack>
+          </HStack>
+
+          <HStack mt={3} w={"100%"} justifyContent={"flex-end"}>
+            <VStack alignItems={"flex-start"} gap={1}>
+              <Text
+                display={"flex"}
+                alignItems={"center"}
+                gap={1}
+                color={"gray.500"}
+                as={"span"}
+                fontSize={"11px"}
+              >
+                You can see your role below ? <InfoIcon />
+              </Text>
+              <Text
+                display={"flex"}
+                color={"gray.700"}
+                alignItems={"center"}
+                gap={2}
+                as={"span"}
+                fontSize={"md"}
+                fontWeight={500}
+              >
+                {" "}
+                <Icon as={FaEarthAmericas} /> Maker
+              </Text>
+            </VStack>
+          </HStack>
+        </Box>
+
+        <Heading as="h3" size="sm">
+          About you
+        </Heading>
+
+        <Box
+          rounded="md"
+          boxShadow="base"
+          bg="#fff"
+          w="100%"
+          display="flex"
+          flexDirection="column"
+          alignItems="flex-start"
+          p={6}
+          gap={0}
+
+          pb={6}
+        >
+
+{fields?.map((item) => (
+  <VStack alignItems={"flex-start"} w={"100%"} gap={1.5} mb={6} key={item?.label}>
+    <Text
+      as={"span"}
+      fontSize="xs"
+      fontWeight="semibold"
+      color={"gray.500"}
+    >
+      {item?.label}
+    </Text>
+    <Editable
+      position={"relative"}
+      gap={0}
+      defaultValue={item?.defaultValue}
+      w="100%"
+    >
+      <EditablePreview
+      cursor={'pointer'}
+        p={2}
+        rounded={"sm"}
+        w={"100%"}
+        _hover={{
+          bg: "gray.100",
+        }}
+        fontSize="sm"
+        transition={"0.5s"}
+      />
+      <Input
+      as={EditableInput}
+        ps={2}
+        size={'sm'}
+        fontSize="sm"
+        rounded={"sm"}
+        _focus={{
+          borderColor:"blue.500"
+        }}
+      />
+      <EditableControls />
+    </Editable>
+  </VStack>
+))}
+
+
+
+        </Box>
+      </VStack>
+    </VStack>
+  );
+};
+
+export default Profile;
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index 519daaa..205e3f5 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -45,6 +45,7 @@ import ApproveHistoryMaker from "../Pages/FawateerChecker/ApproveHistory/Approve
 import EmailNotification from "../Pages/EmailNotification/EmailNotification";
 import User from "../Pages/User/User";
 import AddUser from "../Pages/User/AddUser";
+import Profile from "../Pages/Profile/Profile";
 
 export const RouteLink = [
   // =============[ Tanami ]================
@@ -121,10 +122,11 @@ export const RouteLink = [
   { path: "/bank-details", Component: BankDetails },
   // { path: "/bank-details", Component: UnderConstruction },
   { path: "/bank-details/edit-bank-details/:id", Component: EditBankDetails },
+  { path: "/profile", Component: Profile },
 
 
 
-  // // ===============[ fawateer ]===============
+  // ===============[ fawateer ]===============
   // { path: "/fawateer", Component: localStorage.getItem("role") === "Maker"? CreateRequest:ApproveRequest },
   // { path: "/fawateer-history", Component: localStorage.getItem("role") === "Maker"?ApproveHistoryMaker: ApproveHistory },