Merge branch 'dev' of http://git.wdipl.com/Siddhesh.More/tanami-admin-panel into dev
This commit is contained in:
YasinShaikh123
@@ -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"}>
|
||||
|
||||
227
src/Pages/Profile/Profile.jsx
Normal file
227
src/Pages/Profile/Profile.jsx
Normal file
@@ -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;
|
||||
@@ -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 },
|
||||
|
||||
|
||||
Reference in New Issue
Block a user