tanami-admin-panel/src/Pages/Profile/Profile.jsx

import { CheckIcon, CloseIcon, InfoIcon } from "@chakra-ui/icons";
import {
  Avatar,
  Box,
  ButtonGroup,
  HStack,
  Heading,
  Icon,
  IconButton,
  Text,
  VStack,
  useEditableControls
} from "@chakra-ui/react";
import React, { useEffect, useState } from "react";
import { FaEarthAmericas } from "react-icons/fa6";
import logoMini from "../../assets/propic.png";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { useAuthProfileQuery } from "../../Services/token.serivce";

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>
      )
    );
  }
  const { data } = useAuthProfileQuery();

  const [fields, setFields] = useState([
    {
      name: "firstName",
      label: "First Name",
      defaultValue: null,
    },
    {
      name: "lastName",
      label: "Last Name",
      defaultValue: null,
    },
    {
      name: "email",
      label: "Email Address",
      defaultValue: null,
    },
    {
      name: "mobile",
      label: "Mobile Number",
      defaultValue: null,
    },
    { name: "role", label: "Role", defaultValue: null },
  ]);
  useEffect(() => {
    setFields([
      {
        name: "firstName",
        label: "First Name",
        defaultValue: data?.data?.firstName || null,
      },
      {
        name: "lastName",
        label: "Last Name",
        defaultValue: data?.data?.lastName || null,
      },
      {
        name: "email",
        label: "Email Address",
        defaultValue: data?.data?.emailAddress || null,
      },
      {
        name: "mobile",
        label: "Mobile Number",
        defaultValue: data?.data?.mobileNumber || null,
      },
      { name: "role", label: "Role", defaultValue: data?.data?.role || null },
    ]);
  }, [data]);

  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}
              >
                {data?.data?.firstName + " " + data?.data?.lastName}
              </Text>

              <Text
                as={"span"}
                fontSize={"xs"}
                color={"gray.500"}
                fontWeight={400}
              >
                {data?.data?.emailAddress}
              </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} /> {data?.data?.role}
              </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;