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

Array conversion

Browse Source
This commit is contained in:
Pratham Mandavkar
2025-01-20 15:27:34 +05:30
parent d6ba0818c2
commit 25e8ffe285
6 changed files with 139 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Contexts/GlobalStateProvider.tsx
View File

@@ -5,7 +5,7 @@ import GlobalStateContext from './GlobalStateContext';
const GlobalStateProvider = ({ children }:{children:ReactNode}) => {
const [isAuthenticate, setIsAuthenticate] = useState<boolean>(false);
const [isAuthenticate, setIsAuthenticate] = useState<boolean>(true);
return (
<GlobalStateContext.Provider value={{ isAuthenticate, setIsAuthenticate }}>

92
src/Pages/ManageUser/DeactivatedAccounts/DeactivatedAccounts.tsx
View File

@@ -1,11 +1,91 @@
import MainFrame from '../../../components/MainFrame'
import {
Box,
HStack,
Input,
Text
} from "@chakra-ui/react";
import { LuSearch } from "react-icons/lu";
import DataTable from "../../../components/DataTable";
import MainFrame from "../../../components/MainFrame";
import { InputGroup } from "../../../components/ui/input-group";
import {
PaginationItems,
PaginationNextTrigger,
PaginationPrevTrigger,
PaginationRoot,
} from "../../../components/ui/pagination";
import { Switch } from "../../../components/ui/switch";
const tableHeadRow = [
"Sr. No",
"First Name",
"Last Name",
"Company name",
"Activate/Deactivate",
];
const usersData = [
...Array.from({ length: 10 }, (_, i) => ({
"Sr. No": i + 1,
"First Name": "Ritesh",
"Last Name": "Joshi",
"Company name": "WDI",
"Activate/Deactivate": (
<HStack justifyContent="center">
<Text>Yes</Text>
<Switch size="sm" colorPalette="teal" />
<Text>No</Text>
</HStack>
),
})),
];
const DeactivatedAccounts = () => {
return (
<MainFrame>
</MainFrame>
)
}
<HStack w="100%" justifyContent="space-between" p={3}>
<Text as="span" fontSize="sm" fontWeight="bolder" color="#000">
Registered Users
</Text>
export default DeactivatedAccounts
<Box w="30%">
<InputGroup
bgSize="xs"
flex="1"
startElement={<LuSearch />}
w="100%"
color="#000"
>
<Input
w="100%"
bg="#EEEEEE"
_focus={{ border: "1px #02A0A0 solid" }}
border="1px #EEEEEE solid"
rounded="full"
size="sm"
placeholder="Search..."
/>
</InputGroup>
</Box>
</HStack>
<DataTable tableHeadRow={tableHeadRow} data={usersData} />
<PaginationRoot
p={4}
mt={8}
count={usersData.length}
pageSize={3}
defaultPage={1}
>
<HStack justifyContent="flex-end" mb={5}>
<PaginationPrevTrigger />
<PaginationItems />
<PaginationNextTrigger />
</HStack>
</PaginationRoot>
</MainFrame>
);
};
export default DeactivatedAccounts;

283
src/Pages/ManageUser/RegisterUsers/RegisterUsers.tsx
View File

@@ -2,26 +2,21 @@ import {
Box,
HStack,
Input,
Stack,
Table,
Text,
VStack,
Text
} from "@chakra-ui/react";
import { CiEdit } from "react-icons/ci";
import { FaRegEye } from "react-icons/fa";
import { LuSearch } from "react-icons/lu";
import { RiDeleteBin5Line } from "react-icons/ri";
import DataTable from "../../../components/DataTable";
import MainFrame from "../../../components/MainFrame";
import { InputGroup } from "../../../components/ui/input-group";
import { LuSearch } from "react-icons/lu";
import DataTable from "../../../components/DataTable";
import { Switch } from "../../../components/ui/switch";
import { Button } from "../../../components/ui/button";
import { FaRegEye } from "react-icons/fa";
import { CiEdit } from "react-icons/ci";
import { RiDeleteBin5Line } from "react-icons/ri";
import {
PaginationItems,
PaginationNextTrigger,
PaginationPrevTrigger,
PaginationRoot,
PaginationRoot
} from "../../../components/ui/pagination";
import { Switch } from "../../../components/ui/switch";
// Table setup
const tableHeadRow = [
@@ -37,8 +32,8 @@ const tableHeadRow = [
];
const usersData: any[] = [
{
"Sr. No": 1,
...Array.from({ length: 10 }, (_, i) => ({
"Sr. No": i + 1,
"First Name": "Ritesh",
"Mobile number": "9876543210",
Gender: "Male",
@@ -59,260 +54,7 @@ const usersData: any[] = [
<RiDeleteBin5Line cursor="pointer" size="18px" />
</HStack>
),
},
{
"Sr. No": 2,
"First Name": "Ritesh",
"Mobile number": "9876543210",
Gender: "Male",
DOB: "15-01-1990",
"Type of User": "Admin",
Language: "English",
"Activate/Deactivate": (
<HStack>
<Text>Yes</Text>
<Switch size="sm" colorPalette="teal" />
<Text>No</Text>
</HStack>
),
Action: (
<HStack gap={2}>
<FaRegEye cursor="pointer" size="18px" />
<CiEdit cursor="pointer" size="18px" />
<RiDeleteBin5Line cursor="pointer" size="18px" />
</HStack>
),
},
{
"Sr. No": 3,
"First Name": "Ritesh",
"Mobile number": "9876543210",
Gender: "Male",
DOB: "15-01-1990",
"Type of User": "Admin",
Language: "English",
"Activate/Deactivate": (
<HStack>
<Text>Yes</Text>
<Switch size="sm" colorPalette="teal" />
<Text>No</Text>
</HStack>
),
Action: (
<HStack gap={2}>
<FaRegEye cursor="pointer" size="18px" />
<CiEdit cursor="pointer" size="18px" />
<RiDeleteBin5Line cursor="pointer" size="18px" />
</HStack>
),
},
{
"Sr. No": 4,
"First Name": "Ritesh",
"Mobile number": "9876543210",
Gender: "Male",
DOB: "15-01-1990",
"Type of User": "Admin",
Language: "English",
"Activate/Deactivate": (
<HStack>
<Text>Yes</Text>
<Switch size="sm" colorPalette="teal" />
<Text>No</Text>
</HStack>
),
Action: (
<HStack gap={2}>
<FaRegEye cursor="pointer" size="18px" />
<CiEdit cursor="pointer" size="18px" />
<RiDeleteBin5Line cursor="pointer" size="18px" />
</HStack>
),
},
{
"Sr. No": 5,
"First Name": "Ritesh",
"Mobile number": "9876543210",
Gender: "Male",
DOB: "15-01-1990",
"Type of User": "Admin",
Language: "English",
"Activate/Deactivate": (
<HStack>
<Text>Yes</Text>
<Switch size="sm" colorPalette="teal" />
<Text>No</Text>
</HStack>
),
Action: (
<HStack gap={2}>
<FaRegEye cursor="pointer" size="18px" />
<CiEdit cursor="pointer" size="18px" />
<RiDeleteBin5Line cursor="pointer" size="18px" />
</HStack>
),
},
{
"Sr. No": 6,
"First Name": "Ritesh",
"Mobile number": "9876543210",
Gender: "Male",
DOB: "15-01-1990",
"Type of User": "Admin",
Language: "English",
"Activate/Deactivate": (
<HStack>
<Text>Yes</Text>
<Switch size="sm" colorPalette="teal" />
<Text>No</Text>
</HStack>
),
Action: (
<HStack gap={2}>
<FaRegEye cursor="pointer" size="18px" />
<CiEdit cursor="pointer" size="18px" />
<RiDeleteBin5Line cursor="pointer" size="18px" />
</HStack>
),
},
{
"Sr. No": 6,
"First Name": "Ritesh",
"Mobile number": "9876543210",
Gender: "Male",
DOB: "15-01-1990",
"Type of User": "Admin",
Language: "English",
"Activate/Deactivate": (
<HStack>
<Text>Yes</Text>
<Switch size="sm" colorPalette="teal" />
<Text>No</Text>
</HStack>
),
Action: (
<HStack gap={2}>
<FaRegEye cursor="pointer" size="18px" />
<CiEdit cursor="pointer" size="18px" />
<RiDeleteBin5Line cursor="pointer" size="18px" />
</HStack>
),
},
{
"Sr. No": 7,
"First Name": "Ritesh",
"Mobile number": "9876543210",
Gender: "Male",
DOB: "15-01-1990",
"Type of User": "Admin",
Language: "English",
"Activate/Deactivate": (
<HStack>
<Text>Yes</Text>
<Switch size="sm" colorPalette="teal" />
<Text>No</Text>
</HStack>
),
Action: (
<HStack gap={2}>
<FaRegEye cursor="pointer" size="18px" />
<CiEdit cursor="pointer" size="18px" />
<RiDeleteBin5Line cursor="pointer" size="18px" />
</HStack>
),
},
{
"Sr. No": 7,
"First Name": "Ritesh",
"Mobile number": "9876543210",
Gender: "Male",
DOB: "15-01-1990",
"Type of User": "Admin",
Language: "English",
"Activate/Deactivate": (
<HStack>
<Text>Yes</Text>
<Switch size="sm" colorPalette="teal" />
<Text>No</Text>
</HStack>
),
Action: (
<HStack gap={2}>
<FaRegEye cursor="pointer" size="18px" />
<CiEdit cursor="pointer" size="18px" />
<RiDeleteBin5Line cursor="pointer" size="18px" />
</HStack>
),
},
{
"Sr. No": 8,
"First Name": "Ritesh",
"Mobile number": "9876543210",
Gender: "Male",
DOB: "15-01-1990",
"Type of User": "Admin",
Language: "English",
"Activate/Deactivate": (
<HStack>
<Text>Yes</Text>
<Switch size="sm" colorPalette="teal" />
<Text>No</Text>
</HStack>
),
Action: (
<HStack gap={2}>
<FaRegEye cursor="pointer" size="18px" />
<CiEdit cursor="pointer" size="18px" />
<RiDeleteBin5Line cursor="pointer" size="18px" />
</HStack>
),
},
{
"Sr. No": 9,
"First Name": "Ritesh",
"Mobile number": "9876543210",
Gender: "Male",
DOB: "15-01-1990",
"Type of User": "Admin",
Language: "English",
"Activate/Deactivate": (
<HStack>
<Text>Yes</Text>
<Switch size="sm" colorPalette="teal" />
<Text>No</Text>
</HStack>
),
Action: (
<HStack gap={2}>
<FaRegEye cursor="pointer" size="18px" />
<CiEdit cursor="pointer" size="18px" />
<RiDeleteBin5Line cursor="pointer" size="18px" />
</HStack>
),
},
{
"Sr. No": 10,
"First Name": "Ritesh",
"Mobile number": "9876543210",
Gender: "Male",
DOB: "15-01-1990",
"Type of User": "Admin",
Language: "English",
"Activate/Deactivate": (
<HStack>
<Text>Yes</Text>
<Switch size="sm" colorPalette="teal" />
<Text>No</Text>
</HStack>
),
Action: (
<HStack gap={2}>
<FaRegEye cursor="pointer" size="18px" />
<CiEdit cursor="pointer" size="18px" />
<RiDeleteBin5Line cursor="pointer" size="18px" />
</HStack>
),
},
})),
];
const RegisterUsers = () => {
@@ -352,13 +94,12 @@ const RegisterUsers = () => {
pageSize={3}
defaultPage={1}
>
<HStack justifyContent="flex-end" mb={5} >
<HStack justifyContent="flex-end" mb={5}>
{/* <PaginationPrevTrigger /> */}
<PaginationItems />
<PaginationNextTrigger />
</HStack>
</PaginationRoot>
</MainFrame>
);
};

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

@@ -17,24 +17,27 @@ const Profile = () => {
</Circle>
<VStack alignItems="flex-start">
<Text color="#1C1C1C" fontWeight={700}>
<Text fontSize="sm" color="#1C1C1C" fontWeight={700}>
Jackson David
</Text>
<Text color="#090909" fontWeight={400} fontSize={"sm"}>
Employee ID: #1245679
<span style={{ fontWeight: "600" }}>Employee ID:</span> #1245679
</Text>
</VStack>
<VStack alignItems="flex-start">
<HStack>
<VStack alignItems="flex-start">
<Text color="black">First Name</Text>
<Text fontSize="sm" color="black">
First Name
</Text>
<Editable.Root
border="0.5px solid #969696"
borderRadius="4px"
w="30vw"
textAlign="start"
color="black"
bg="transparent"
defaultValue="Jackson"
>
<Editable.Preview />
@@ -42,7 +45,9 @@ const Profile = () => {
</Editable.Root>
</VStack>
<VStack alignItems="flex-start">
<Text color="black">Last Name</Text>
<Text fontSize="sm" color="black">
Last Name
</Text>
<Editable.Root
border="0.5px solid #969696"
borderRadius="4px"
@@ -66,9 +71,11 @@ const Profile = () => {
<Input color="teal" _placeholder={{ color: "inherit" }} />
</Field> */}
<VStack alignItems="flex-start">
<Text color="black">Phone Number</Text>
<Text fontSize="sm" color="black">
Phone Number
</Text>
<Editable.Root
_hover={{bgColor:"white" , color:"black"}}
_hover={{ bgColor: "white", color: "black" }}
border="0.5px solid #969696"
borderRadius="4px"
w="30vw"

4
src/components/DataTable.tsx
View File

@@ -14,7 +14,7 @@ const DataTable: React.FC<TableProps> = ({ tableHeadRow, data }) => {
<Table.Root key={'line'} size="sm" variant={'line'}>
<Table.Header >
<Table.Row bg={'#02A0A0'} >
{tableHeadRow.map((item, index)=><Table.ColumnHeader fontSize={'xs'} fontWeight={700} key={index} border={'none'}>{item}</Table.ColumnHeader>)}
{tableHeadRow.map((item, index)=><Table.ColumnHeader textAlign="center" fontSize={'xs'} fontWeight={700} key={index} border={'none'}>{item}</Table.ColumnHeader>)}
</Table.Row>
</Table.Header>
@@ -22,7 +22,7 @@ const DataTable: React.FC<TableProps> = ({ tableHeadRow, data }) => {
{data.map((item:any, index) => (
<Table.Row
bg={index % 2 === 0 ? "#fff" : "#02A0A020"} >
{tableHeadRow.map((heading)=><Table.Cell key={index} fontSize={'xs'} fontWeight={500} border={'none'}>{item[heading]}</Table.Cell> )}
{tableHeadRow.map((heading)=><Table.Cell textAlign="center" key={index} fontSize={'xs'} fontWeight={500} border={'none'}>{item[heading]}</Table.Cell> )}
</Table.Row>))}

40
src/components/ui/pagination.tsx
View File

@@ -10,11 +10,7 @@ import {
usePaginationContext,
} from "@chakra-ui/react";
import * as React from "react";
import {
HiChevronLeft,
HiChevronRight,
HiMiniEllipsisHorizontal,
} from "react-icons/hi2";
import { HiChevronLeft, HiChevronRight } from "react-icons/hi2";
import { LinkButton } from "./link-button";
interface ButtonVariantMap {
@@ -43,7 +39,7 @@ export interface PaginationRootProps
}
const variantMap: Record<PaginationVariant, ButtonVariantMap> = {
outline: { default: "ghost", ellipsis: "plain", current: "outline" },
outline: { default: "ghost", ellipsis: "plain", current: "solid" },
solid: { default: "outline", ellipsis: "outline", current: "solid" },
subtle: { default: "ghost", ellipsis: "plain", current: "subtle" },
};
@@ -74,7 +70,7 @@ export const PaginationEllipsis = React.forwardRef<
return (
<ChakraPagination.Ellipsis ref={ref} {...props} asChild>
<Button as="span" variant={variantMap.ellipsis} size={size}>
{/* <HiMiniEllipsisHorizontal /> */}
...
</Button>
</ChakraPagination.Ellipsis>
);
@@ -92,7 +88,14 @@ export const PaginationItem = React.forwardRef<
if (getHref) {
return (
<LinkButton href={getHref(props.value)} variant={variant} size={size}>
<LinkButton
href={getHref(props.value)}
variant={variant}
size={size}
bg={current ? "#02A0A0" : "white"}
color={current ? "white" : "black"}
_hover={{ bg: "#02A0A0", color: "white" }}
>
{props.value}
</LinkButton>
);
@@ -101,10 +104,12 @@ export const PaginationItem = React.forwardRef<
return (
<ChakraPagination.Item ref={ref} {...props} asChild>
<Button
bgColor={current ? "#02A0A0" : "white"}
color="black"
bg={current ? "#02A0A0" : "white"}
color={current ? "white" : "black"}
variant={variant}
size={size}
_hover={{ bg: "#02A0A0", color: "white" }}
border="none"
>
{props.value}
</Button>
@@ -125,6 +130,7 @@ export const PaginationPrevTrigger = React.forwardRef<
href={previousPage != null ? getHref(previousPage) : undefined}
variant={variantMap.default}
size={size}
_hover={{ bg: "#02A0A0", color: "white" }}
>
<HiChevronLeft />
</LinkButton>
@@ -153,8 +159,13 @@ export const PaginationNextTrigger = React.forwardRef<
href={nextPage != null ? getHref(nextPage) : undefined}
variant={variantMap.default}
size={size}
borderRadius="94px"
bg="#02A0A0"
color="white"
w="136px"
_hover={{ bg: "#026060" }}
>
<HiChevronRight />
Next
</LinkButton>
);
}
@@ -164,11 +175,12 @@ export const PaginationNextTrigger = React.forwardRef<
<Button
w="136px"
borderRadius="94px"
bgColor="#02A0A0"
bg="#02A0A0"
color="white"
variant={variantMap.default}
size={size}
_hover={{ bg: "#026060" }}
>
{/* <HiChevronRight /> */}
Next
</Button>
</ChakraPagination.NextTrigger>
@@ -181,8 +193,6 @@ export const PaginationItems = (props: React.HTMLAttributes<HTMLElement>) => {
{({ pages }) =>
pages.map((page, index) => (
<PaginationItem
_hover={{ bgColor: "#02A0A0" }}
border="none"
key={index}
type="page"
value={page.value}