Siddhesh.More/SSA-Admin-Panel
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Siddhesh More
2025-02-12 19:47:44 +05:30
parent cd586ddf1b
commit 421926a6ff
6 changed files with 107 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
View File

@@ -1,5 +1,5 @@
import { MdOutlineRemoveRedEye } from "react-icons/md";
import { Field, Icon, Input, Stack } from "@chakra-ui/react";
import { Field, Input, Stack } from "@chakra-ui/react";
import View from "../../../components/ActionIcons/View";
import {
DialogBody,
DialogCloseTrigger,
@@ -9,7 +9,6 @@ import {
DialogTitle,
DialogTrigger,
} from "../../../components/ui/dialog";
import View from "../../../components/ActionIcons/View";
function ViewRegisterUsers() {
return (

23
src/Pages/Profile/ChangePassword.tsx
View File

@@ -1,28 +1,22 @@
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
import { FaRegEdit } from "react-icons/fa";
import { Field, Input, Stack } from "@chakra-ui/react";
import { Button } from "../../components/ui/button";
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog";
import EnterPassword from "./EnterPassword";
function Changepassword() {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
<Button bg="#02A0A0" size={'2xs'} color={"#fff"} px={2} >
Change Password
</Button>
</DialogTrigger>
<DialogContent
bg={"#fff"}
// w={{ lg: "60%", md: "230px" }}
w={{ base: '90%', md: '400px' }}
// height={'80vh'}
// overflow={'scroll'}
p={2} // Reduced padding
p={2}
bgSize={'md'}
>
<DialogHeader bg="white" pt={3} pb={2} >
@@ -33,22 +27,17 @@ function Changepassword() {
<Stack p={2} >
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">New password</Field.Label>
<Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
<Input color="black" pl={1} fontSize="12px" type="password" border="1px solid grey" /></Field.Root>
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">Confirm password</Field.Label>
<Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
<Input color="black" pl={1} fontSize="12px" type="password" border="1px solid grey" /></Field.Root>
</Stack>
</DialogBody>
<DialogFooter display="flex" justifyContent="center" mt={2} p={2}
>
{/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
Save
</Button> */}
<EnterPassword />
</DialogFooter>
{/* <DialogCloseTrigger color="black" /> */}
</DialogContent>
</DialogRoot >

71
src/Pages/Profile/Profile.tsx
View File

@@ -1,18 +1,24 @@
import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react";
import { Avatar, Box, Center, HStack, Input, SimpleGrid, Stack, Text, VStack } from "@chakra-ui/react";
import { FaCamera } from "react-icons/fa";
import MainFrame from "../../components/MainFrame";
import Changepassword from "./ChangePassword";
import { Field } from "../../components/ui/field";
import EditableInput from "../../components/EditableInput";
const Profile = () => {
return (
<MainFrame >
<Stack p={5}>
<Box position="relative" width="fit-content"
display="inline-block"
<HStack alignItems={'flex-start'} justifyContent={'center'} pt={0} h={'89vh'} w={'100%'} >
<VStack w={'50%'} p={3} rounded={'lg'} mb={3}>
<HStack shadow={'md'} rounded={'lg'} justifyContent={'space-between'} alignItems={'flex-end'} w={'100%'} px={3} py={3} >
<VStack w={'100%'} alignItems={'flex-start'} gap={0}>
<Box mb={2} position="relative" width="fit-content"
cursor="pointer" onClick={() => alert("Avatar clicked!")}>
<Avatar.Root size={"2xl"} style={{ display: "inline-block", width: "auto" }}>
<Avatar.Fallback />
<Avatar.Image src="https://bit.ly/sage-adebayo" />
<Avatar.Image src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
</Avatar.Root>
<Box
position="absolute"
@@ -20,37 +26,42 @@ const Profile = () => {
left={"39px"}
p="2px"
>
<FaCamera color="black" size={16} />
<FaCamera color="#ccc" size={16} />
</Box>
</Box>
<Text color={"black"} fontWeight={"bold"}>{`Jackson Da`.slice(0, 10) + '...'}</Text>
<Text color="black" fontSize="12px">
<Text color={"black"} as={'span'} fontSize={'sm'} fontWeight={"bold"}>Ritesh Pandey</Text>
<Text color="black" as={'span'} fontSize={'xs'}>
Employee ID: <span>#1245679</span>
</Text>
<Box w={"70%"} mt={5}>
<SimpleGrid columns={{ base: 1, md: 2 }} columnGap={9} rowGap={4}>
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
<Input placeholder="Enter the First Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
</Field.Root>
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">last Name</Field.Label>
<Input placeholder="Enter the last Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
</Field.Root>
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px" >Phone Number</Field.Label>
<Input placeholder="Enter the Phone Number" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
</Field.Root>
</SimpleGrid>
<Text color={"black"} fontWeight={"bold"} fontSize={"14px"} mt={5}>Update password</Text>
{/* <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
Change Password
</Button> */}
<Changepassword />
</VStack>
</Box>
<Changepassword />
</HStack>
</Stack>
<VStack w={"100%"} >
<Field mt={4} label="First Name" fontSize="xs" required>
<EditableInput defaultValue="Ritesh" placeholder="Enter first name" />
</Field>
<Field mt={4} label="Last Name" fontSize="xs" required>
<EditableInput defaultValue="Pandey" placeholder="Enter last name" />
</Field>
<Field mt={4} label="Mobile Number" fontSize="xs" required>
<EditableInput defaultValue={"98234567892"} placeholder="Mobile Number" type='number' />
</Field>
</VStack>
</VStack>
</HStack>
</MainFrame >
)

53
src/components/EditableInput.tsx Normal file
View File

@@ -0,0 +1,53 @@
import { Editable } from "@chakra-ui/react";
import { FC } from "react";
interface InputProps {
value?: string;
onChange?: (value: string) => void;
defaultValue?: string;
placeholder?: string;
props?: any;
type?:string
}
const EditableInput: FC<InputProps> = ({
value,
onChange,
defaultValue,
placeholder,
type,
...props
}) => {
return (
<Editable.Root
{...props}
value={value}
onChange={() => onChange && onChange}
w={"100%"}
size={"sm"}
textAlign="start"
defaultValue={defaultValue || ""}
>
<Editable.Preview
bg={"#00000006"}
fontSize={"xs"}
w={"100%"}
bgSize={"sm"}
ps={3}
// _hover={{ backgroundColor: "#00000010" }}
/>
<Editable.Input
fontSize={"xs"}
placeholder={placeholder}
w={"100%"}
border={"#ccc 1px solid"}
type={type}
_focus={{ bg: "#02A0A015" }}
outline={"#007F33"}
bgSize={"xs"}
ps={3}
/>
</Editable.Root>
);
};
export default EditableInput;

7
src/components/MainFrame.tsx
View File

@@ -10,14 +10,15 @@ interface MainFrameProps {
children: React.ReactNode
title?: string
transperant?:boolean
props?:any
}
const MainFrame: FC<MainFrameProps> = ({ children, transperant }) => {
const MainFrame: FC<MainFrameProps> = ({ children, transperant, props }) => {
return (
<MotionVStack overflow={'auto'} {...OPACITY_ON_LOAD} w="100%" minH="93%" pe={2} ps={1.5} pt={1} pb={2}>
<MotionVStack {...props} overflow={'auto'} {...OPACITY_ON_LOAD} w="100%" minH="93%" pe={2} ps={1.5} pt={1} pb={2}>
<Box
w="100%"
// minH="100%"
// h="100%"
bg={transperant?'transperant':"#ffffff"}
// overflow={'scroll'}
rounded="lg"

2
src/components/ui/field.tsx
View File

@@ -15,7 +15,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
return (
<ChakraField.Root ref={ref} {...rest}>
{label && (
<ChakraField.Label>
<ChakraField.Label fontSize={'xs'}>
{label}
<ChakraField.RequiredIndicator fallback={optionalText} />
</ChakraField.Label>