Initial commit
This commit is contained in:
288
src/components/Tables/BasicTable.js
Normal file
288
src/components/Tables/BasicTable.js
Normal file
@@ -0,0 +1,288 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
Icon,
|
||||
NumberDecrementStepper,
|
||||
NumberIncrementStepper,
|
||||
NumberInput,
|
||||
NumberInputField,
|
||||
NumberInputStepper,
|
||||
Select,
|
||||
Stack,
|
||||
Table,
|
||||
Tbody,
|
||||
Td,
|
||||
Text,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useMemo } from "react";
|
||||
import { GrFormNext, GrFormPrevious } from "react-icons/gr";
|
||||
import {
|
||||
TiArrowSortedDown,
|
||||
TiArrowSortedUp,
|
||||
TiArrowUnsorted,
|
||||
} from "react-icons/ti";
|
||||
import { usePagination, useSortBy, useTable } from "react-table";
|
||||
|
||||
function BasicTable(props) {
|
||||
const { columnsData, tableData } = props;
|
||||
const columns = useMemo(() => columnsData, []);
|
||||
const data = useMemo(() => tableData, []);
|
||||
|
||||
const tableInstance = useTable(
|
||||
{
|
||||
columns,
|
||||
data,
|
||||
},
|
||||
useSortBy,
|
||||
usePagination
|
||||
);
|
||||
|
||||
const {
|
||||
getTableProps,
|
||||
getTableBodyProps,
|
||||
headerGroups,
|
||||
page,
|
||||
gotoPage,
|
||||
pageCount,
|
||||
prepareRow,
|
||||
nextPage,
|
||||
previousPage,
|
||||
canNextPage,
|
||||
canPreviousPage,
|
||||
setPageSize,
|
||||
|
||||
state,
|
||||
} = tableInstance;
|
||||
|
||||
const createPages = (count) => {
|
||||
let arrPageCount = [];
|
||||
|
||||
for (let i = 1; i <= count; i++) {
|
||||
arrPageCount.push(i);
|
||||
}
|
||||
|
||||
return arrPageCount;
|
||||
};
|
||||
|
||||
const { pageIndex, pageSize } = state;
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
direction="column"
|
||||
w="100%"
|
||||
overflowX={{ sm: "scroll", lg: "hidden" }}
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing="12px"
|
||||
align="center"
|
||||
my="24px"
|
||||
px="22px"
|
||||
>
|
||||
<Select
|
||||
variant="main"
|
||||
value={pageSize}
|
||||
onChange={(e) => setPageSize(Number(e.target.value))}
|
||||
color="gray.500"
|
||||
size="sm"
|
||||
borderRadius="12px"
|
||||
maxW="75px"
|
||||
cursor="pointer"
|
||||
>
|
||||
<option>5</option>
|
||||
<option>10</option>
|
||||
<option>15</option>
|
||||
<option>20</option>
|
||||
<option>25</option>
|
||||
</Select>
|
||||
<Text fontSize="xs" color="gray.400" fontWeight="normal">
|
||||
entries per page
|
||||
</Text>
|
||||
</Stack>
|
||||
<Table {...getTableProps()} variant="simple" color="gray.500" mb="24px">
|
||||
<Thead>
|
||||
{headerGroups.map((headerGroup, index) => (
|
||||
<Tr {...headerGroup.getHeaderGroupProps()} key={index}>
|
||||
{headerGroup.headers.map((column, index) => (
|
||||
<Th key={index}
|
||||
{...column.getHeaderProps(column.getSortByToggleProps())}
|
||||
>
|
||||
<Flex
|
||||
justify="space-between"
|
||||
align="center"
|
||||
fontSize={{ sm: "10px", lg: "12px" }}
|
||||
color="gray.400"
|
||||
>
|
||||
{column.render("Header")}
|
||||
<Icon
|
||||
w={{ sm: "10px", md: "14px" }}
|
||||
h={{ sm: "10px", md: "14px" }}
|
||||
color={columns.isSorted ? "gray.500" : "gray.400"}
|
||||
float="right"
|
||||
as={
|
||||
column.isSorted
|
||||
? column.isSortedDesc
|
||||
? TiArrowSortedDown
|
||||
: TiArrowSortedUp
|
||||
: TiArrowUnsorted
|
||||
}
|
||||
/>
|
||||
</Flex>
|
||||
</Th>
|
||||
))}
|
||||
</Tr>
|
||||
))}
|
||||
</Thead>
|
||||
<Tbody {...getTableBodyProps()}>
|
||||
{page.map((row, index) => {
|
||||
prepareRow(row);
|
||||
return (
|
||||
<Tr {...row.getRowProps()} key={index}>
|
||||
{row.cells.map((cell, index) => {
|
||||
return (
|
||||
<Td
|
||||
{...cell.getCellProps()}
|
||||
fontSize={{ sm: "14px" }}
|
||||
key={index}
|
||||
>
|
||||
{cell.render("Cell")}
|
||||
</Td>
|
||||
);
|
||||
})}
|
||||
</Tr>
|
||||
);
|
||||
})}
|
||||
</Tbody>
|
||||
</Table>
|
||||
<Flex
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
w="100%"
|
||||
justify="space-between"
|
||||
align="center"
|
||||
px={{ md: "22px" }}
|
||||
>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color="gray.500"
|
||||
fontWeight="normal"
|
||||
mb={{ sm: "24px", md: "0px" }}
|
||||
>
|
||||
Showing {pageSize * pageIndex + 1} to{" "}
|
||||
{pageSize * (pageIndex + 1) <= tableData.length
|
||||
? pageSize * (pageIndex + 1)
|
||||
: tableData.length}{" "}
|
||||
of {tableData.length} entries
|
||||
</Text>
|
||||
<Stack direction="row" alignSelf="flex-end" spacing="4px" ms="auto">
|
||||
<Button
|
||||
variant="no-effects"
|
||||
onClick={() => previousPage()}
|
||||
transition="all .5s ease"
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg="#fff"
|
||||
border="1px solid lightgray"
|
||||
display={
|
||||
pageSize === 5 ? "none" : canPreviousPage ? "flex" : "none"
|
||||
}
|
||||
_hover={{
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
>
|
||||
<Icon as={GrFormPrevious} w="16px" h="16px" color="gray.400" />
|
||||
</Button>
|
||||
{pageSize === 5 ? (
|
||||
<NumberInput
|
||||
max={pageCount - 1}
|
||||
min={1}
|
||||
w="75px"
|
||||
mx="6px"
|
||||
defaultValue="1"
|
||||
onChange={(e) => gotoPage(e)}
|
||||
>
|
||||
<NumberInputField />
|
||||
<NumberInputStepper>
|
||||
<NumberIncrementStepper onClick={() => nextPage()} />
|
||||
<NumberDecrementStepper onClick={() => previousPage()} />
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
) : (
|
||||
createPages(pageCount).map((pageNumber, index) => {
|
||||
return (
|
||||
<Button
|
||||
variant="no-effects"
|
||||
transition="all .5s ease"
|
||||
onClick={() => gotoPage(pageNumber - 1)}
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg={pageNumber === pageIndex + 1 ? "blue.500" : "#fff"}
|
||||
border={
|
||||
pageNumber === pageIndex + 1
|
||||
? "none"
|
||||
: "1px solid lightgray"
|
||||
}
|
||||
_hover={{
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
key={index}
|
||||
>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color={pageNumber === pageIndex + 1 ? "#fff" : "gray.600"}
|
||||
>
|
||||
{pageNumber}
|
||||
</Text>
|
||||
</Button>
|
||||
);
|
||||
})
|
||||
)}
|
||||
<Button
|
||||
variant="no-effects"
|
||||
onClick={() => nextPage()}
|
||||
transition="all .5s ease"
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg="#fff"
|
||||
border="1px solid lightgray"
|
||||
display={pageSize === 5 ? "none" : canNextPage ? "flex" : "none"}
|
||||
_hover={{
|
||||
bg: "gray.200",
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
>
|
||||
<Icon as={GrFormNext} w="16px" h="16px" color="gray.400" />
|
||||
</Button>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default BasicTable;
|
||||
93
src/components/Tables/BillingRow.js
Normal file
93
src/components/Tables/BillingRow.js
Normal file
@@ -0,0 +1,93 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
Icon,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import { FaPencilAlt, FaTrashAlt } from "react-icons/fa";
|
||||
|
||||
function BillingRow(props) {
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
const bgColor = useColorModeValue("#F8F9FA", "navy.900");
|
||||
const nameColor = useColorModeValue("gray.500", "white");
|
||||
const { name, company, email, number } = props;
|
||||
|
||||
return (
|
||||
<Box p="24px" bg={bgColor} mb="22px" borderRadius="12px">
|
||||
<Flex justify="space-between" w="100%">
|
||||
<Flex direction="column" maxWidth="70%">
|
||||
<Text color={nameColor} fontSize="md" fontWeight="bold" mb="10px">
|
||||
{name}
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="sm">
|
||||
Company Name:{" "}
|
||||
<Text as="span" color={nameColor} fontWeight="bold">
|
||||
{company}
|
||||
</Text>
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="sm">
|
||||
Email Address:{" "}
|
||||
<Text as="span" color={nameColor} fontWeight="bold">
|
||||
{email}
|
||||
</Text>
|
||||
</Text>
|
||||
<Text color="gray.400" fontSize="sm">
|
||||
VAT Number:{" "}
|
||||
<Text as="span" color={nameColor} fontWeight="bold">
|
||||
{number}
|
||||
</Text>
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
align="flex-start"
|
||||
p={{ md: "24px" }}
|
||||
>
|
||||
<Button
|
||||
p="0px"
|
||||
variant="no-effects"
|
||||
mb={{ sm: "10px", md: "0px" }}
|
||||
me={{ md: "12px" }}
|
||||
>
|
||||
<Flex color="red.500" cursor="pointer" align="center" p="12px">
|
||||
<Icon as={FaTrashAlt} me="4px" />
|
||||
<Text fontSize="sm" fontWeight="semibold">
|
||||
DELETE
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
<Button p="0px" variant="no-effects">
|
||||
<Flex color={textColor} cursor="pointer" align="center" p="12px">
|
||||
<Icon as={FaPencilAlt} me="4px" />
|
||||
<Text fontSize="sm" fontWeight="semibold">
|
||||
EDIT
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default BillingRow;
|
||||
89
src/components/Tables/DashboardTableRow.js
Normal file
89
src/components/Tables/DashboardTableRow.js
Normal file
@@ -0,0 +1,89 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
AvatarGroup,
|
||||
Flex,
|
||||
Icon,
|
||||
Progress,
|
||||
Td,
|
||||
Text,
|
||||
Tr,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
|
||||
function DashboardTableRow(props) {
|
||||
const { logo, name, members, budget, progression } = props;
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
return (
|
||||
<Tr>
|
||||
<Td minWidth={{ sm: "250px" }} ps="0px">
|
||||
<Flex align="center" py=".8rem" minWidth="100%" flexWrap="nowrap">
|
||||
<Icon as={logo} h={"24px"} w={"24px"} pe="5px" />
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
minWidth="100%"
|
||||
>
|
||||
{name}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Td>
|
||||
|
||||
<Td>
|
||||
<AvatarGroup size="sm">
|
||||
{members.map((member, index) => {
|
||||
return (
|
||||
<Avatar
|
||||
name="Ryan Florence"
|
||||
src={member}
|
||||
_hover={{ zIndex: "3", cursor: "pointer" }}
|
||||
key={index}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</AvatarGroup>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
|
||||
{budget}
|
||||
</Text>
|
||||
</Td>
|
||||
<Td>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color="teal.300"
|
||||
fontWeight="bold"
|
||||
pb=".2rem"
|
||||
>{`${progression}%`}</Text>
|
||||
<Progress
|
||||
colorScheme={progression === 100 ? "teal" : "cyan"}
|
||||
size="xs"
|
||||
value={progression}
|
||||
borderRadius="15px"
|
||||
/>
|
||||
</Flex>
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardTableRow;
|
||||
61
src/components/Tables/InvoicesRow.js
Normal file
61
src/components/Tables/InvoicesRow.js
Normal file
@@ -0,0 +1,61 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
Icon,
|
||||
Spacer,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
|
||||
function InvoicesRow(props) {
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
const { date, code, price, format, logo } = props;
|
||||
|
||||
return (
|
||||
<Flex my={{ sm: "1rem", xl: "10px" }} alignItems="center">
|
||||
<Flex direction="column">
|
||||
<Text fontSize="md" color={textColor} fontWeight="bold">
|
||||
{date}
|
||||
</Text>
|
||||
<Text fontSize="sm" color="gray.400" fontWeight="semibold" me="16px">
|
||||
{code}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Spacer />
|
||||
<Box me="12px">
|
||||
<Text fontSize="md" color="gray.400" fontWeight="semibold">
|
||||
{price}
|
||||
</Text>
|
||||
</Box>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Flex alignItems="center" p="12px">
|
||||
<Icon as={logo} w="20px" h="auto" me="5px" />
|
||||
<Text fontSize="md" color={textColor} fontWeight="bold">
|
||||
{format}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default InvoicesRow;
|
||||
312
src/components/Tables/SearchTable1.js
Normal file
312
src/components/Tables/SearchTable1.js
Normal file
@@ -0,0 +1,312 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
Icon,
|
||||
Input,
|
||||
NumberDecrementStepper,
|
||||
NumberIncrementStepper,
|
||||
NumberInput,
|
||||
NumberInputField,
|
||||
NumberInputStepper,
|
||||
Select,
|
||||
Stack,
|
||||
Table,
|
||||
Tbody,
|
||||
Td,
|
||||
Text,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useMemo } from "react";
|
||||
import { GrFormNext, GrFormPrevious } from "react-icons/gr";
|
||||
import {
|
||||
TiArrowSortedDown,
|
||||
TiArrowSortedUp,
|
||||
TiArrowUnsorted,
|
||||
} from "react-icons/ti";
|
||||
import {
|
||||
useGlobalFilter,
|
||||
usePagination,
|
||||
useSortBy,
|
||||
useTable,
|
||||
} from "react-table";
|
||||
|
||||
function SearchTable1(props) {
|
||||
const { columnsData, tableData } = props;
|
||||
|
||||
const columns = useMemo(() => columnsData, []);
|
||||
const data = useMemo(() => tableData, []);
|
||||
|
||||
const tableInstance = useTable(
|
||||
{
|
||||
columns,
|
||||
data,
|
||||
},
|
||||
useGlobalFilter,
|
||||
useSortBy,
|
||||
usePagination
|
||||
);
|
||||
|
||||
const {
|
||||
getTableProps,
|
||||
getTableBodyProps,
|
||||
headerGroups,
|
||||
page,
|
||||
gotoPage,
|
||||
pageCount,
|
||||
prepareRow,
|
||||
nextPage,
|
||||
previousPage,
|
||||
canNextPage,
|
||||
canPreviousPage,
|
||||
setPageSize,
|
||||
setGlobalFilter,
|
||||
state,
|
||||
} = tableInstance;
|
||||
|
||||
const createPages = (count) => {
|
||||
let arrPageCount = [];
|
||||
|
||||
for (let i = 1; i <= count; i++) {
|
||||
arrPageCount.push(i);
|
||||
}
|
||||
|
||||
return arrPageCount;
|
||||
};
|
||||
|
||||
const { pageIndex, pageSize, globalFilter } = state;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
direction="column"
|
||||
w="100%"
|
||||
overflowX={{ sm: "scroll", lg: "hidden" }}
|
||||
>
|
||||
<Flex justify="space-between" align="center" w="100%" px="22px">
|
||||
<Stack
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
spacing={{ sm: "4px", md: "12px" }}
|
||||
align="center"
|
||||
me="12px"
|
||||
my="24px"
|
||||
minW={{ sm: "100px", md: "200px" }}
|
||||
>
|
||||
<Select
|
||||
variant="main"
|
||||
value={pageSize}
|
||||
onChange={(e) => setPageSize(Number(e.target.value))}
|
||||
color="gray.500"
|
||||
size="sm"
|
||||
borderRadius="12px"
|
||||
maxW="75px"
|
||||
cursor="pointer"
|
||||
>
|
||||
<option>5</option>
|
||||
<option>10</option>
|
||||
<option>15</option>
|
||||
<option>20</option>
|
||||
<option>25</option>
|
||||
</Select>
|
||||
<Text fontSize="xs" color="gray.400" fontWeight="normal">
|
||||
entries per page
|
||||
</Text>
|
||||
</Stack>
|
||||
<Input
|
||||
variant="main"
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
minW="75px"
|
||||
maxW="175px"
|
||||
fontSize="sm"
|
||||
_focus={{ borderColor: "blue.500" }}
|
||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||
/>
|
||||
</Flex>
|
||||
<Table {...getTableProps()} variant="simple" color="gray.500" mb="24px">
|
||||
<Thead>
|
||||
{headerGroups.map((headerGroup, index) => (
|
||||
<Tr {...headerGroup.getHeaderGroupProps()} key={index}>
|
||||
{headerGroup.headers.map((column, index) => (
|
||||
<Th key={index}
|
||||
{...column.getHeaderProps(column.getSortByToggleProps())}
|
||||
pe="0px"
|
||||
>
|
||||
<Flex
|
||||
justify="space-between"
|
||||
align="center"
|
||||
fontSize={{ sm: "10px", lg: "12px" }}
|
||||
color="gray.400"
|
||||
>
|
||||
{column.render("Header")}
|
||||
<Icon
|
||||
w={{ sm: "10px", md: "14px" }}
|
||||
h={{ sm: "10px", md: "14px" }}
|
||||
color={columns.isSorted ? "gray.500" : "gray.400"}
|
||||
float="right"
|
||||
as={
|
||||
column.isSorted
|
||||
? column.isSortedDesc
|
||||
? TiArrowSortedDown
|
||||
: TiArrowSortedUp
|
||||
: TiArrowUnsorted
|
||||
}
|
||||
/>
|
||||
</Flex>
|
||||
</Th>
|
||||
))}
|
||||
</Tr>
|
||||
))}
|
||||
</Thead>
|
||||
<Tbody {...getTableBodyProps()}>
|
||||
{page.map((row, index) => {
|
||||
prepareRow(row);
|
||||
return (
|
||||
<Tr {...row.getRowProps()} key={index}>
|
||||
{row.cells.map((cell, index) => {
|
||||
return (
|
||||
<Td
|
||||
{...cell.getCellProps()}
|
||||
fontSize={{ sm: "14px" }}
|
||||
key={index}
|
||||
>
|
||||
{cell.render("Cell")}
|
||||
</Td>
|
||||
);
|
||||
})}
|
||||
</Tr>
|
||||
);
|
||||
})}
|
||||
</Tbody>
|
||||
</Table>
|
||||
<Flex
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
justify="space-between"
|
||||
align="center"
|
||||
w="100%"
|
||||
px={{ md: "22px" }}
|
||||
>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color="gray.500"
|
||||
fontWeight="normal"
|
||||
mb={{ sm: "24px", md: "0px" }}
|
||||
>
|
||||
Showing {pageSize * pageIndex + 1} to{" "}
|
||||
{pageSize * (pageIndex + 1) <= tableData.length
|
||||
? pageSize * (pageIndex + 1)
|
||||
: tableData.length}{" "}
|
||||
of {tableData.length} entries
|
||||
</Text>
|
||||
<Stack direction="row" alignSelf="flex-end" spacing="4px" ms="auto">
|
||||
<Button
|
||||
variant="no-effects"
|
||||
onClick={() => previousPage()}
|
||||
transition="all .5s ease"
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg="#fff"
|
||||
border="1px solid lightgray"
|
||||
display={
|
||||
pageSize === 5 ? "none" : canPreviousPage ? "flex" : "none"
|
||||
}
|
||||
_hover={{
|
||||
bg: "gray.200",
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
>
|
||||
<Icon as={GrFormPrevious} w="16px" h="16px" color="gray.400" />
|
||||
</Button>
|
||||
{pageSize === 5 ? (
|
||||
<NumberInput
|
||||
max={pageCount - 1}
|
||||
min={1}
|
||||
w="75px"
|
||||
mx="6px"
|
||||
defaultValue="1"
|
||||
onChange={(e) => gotoPage(e)}
|
||||
>
|
||||
<NumberInputField />
|
||||
<NumberInputStepper>
|
||||
<NumberIncrementStepper onClick={() => nextPage()} />
|
||||
<NumberDecrementStepper onClick={() => previousPage()} />
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
) : (
|
||||
createPages(pageCount).map((pageNumber, index) => {
|
||||
return (
|
||||
<Button
|
||||
variant="no-effects"
|
||||
transition="all .5s ease"
|
||||
onClick={() => gotoPage(pageNumber - 1)}
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg={pageNumber === pageIndex + 1 ? "blue.500" : "#fff"}
|
||||
border={
|
||||
pageNumber === pageIndex + 1
|
||||
? "none"
|
||||
: "1px solid lightgray"
|
||||
}
|
||||
_hover={{
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
key={index}
|
||||
>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color={pageNumber === pageIndex + 1 ? "#fff" : "gray.600"}
|
||||
>
|
||||
{pageNumber}
|
||||
</Text>
|
||||
</Button>
|
||||
);
|
||||
})
|
||||
)}
|
||||
<Button
|
||||
variant="no-effects"
|
||||
onClick={() => nextPage()}
|
||||
transition="all .5s ease"
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg="#fff"
|
||||
border="1px solid lightgray"
|
||||
display={pageSize === 5 ? "none" : canNextPage ? "flex" : "none"}
|
||||
_hover={{
|
||||
bg: "gray.200",
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
>
|
||||
<Icon as={GrFormNext} w="16px" h="16px" color="gray.400" />
|
||||
</Button>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchTable1;
|
||||
360
src/components/Tables/SearchTable2.js
Normal file
360
src/components/Tables/SearchTable2.js
Normal file
@@ -0,0 +1,360 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
Flex,
|
||||
Icon,
|
||||
Input,
|
||||
NumberDecrementStepper,
|
||||
NumberIncrementStepper,
|
||||
NumberInput,
|
||||
NumberInputField,
|
||||
NumberInputStepper,
|
||||
Stack,
|
||||
Table,
|
||||
Tbody,
|
||||
Td,
|
||||
Text,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useMemo } from "react";
|
||||
import { SearchBar } from "components/Navbars/SearchBar/SearchBar";
|
||||
import { MdReplay, MdCheck } from "react-icons/md";
|
||||
import { IoMdClose } from "react-icons/io";
|
||||
import { FaCheckCircle, FaTimesCircle, FaUndoAlt } from "react-icons/fa";
|
||||
import { GrFormNext, GrFormPrevious } from "react-icons/gr";
|
||||
import {
|
||||
TiArrowSortedDown,
|
||||
TiArrowSortedUp,
|
||||
TiArrowUnsorted,
|
||||
} from "react-icons/ti";
|
||||
import {
|
||||
useGlobalFilter,
|
||||
usePagination,
|
||||
useSortBy,
|
||||
useTable,
|
||||
} from "react-table";
|
||||
|
||||
function SearchTable2(props) {
|
||||
const { columnsData, tableData } = props;
|
||||
|
||||
const columns = useMemo(() => columnsData, []);
|
||||
const data = useMemo(() => tableData, []);
|
||||
|
||||
const tableInstance = useTable(
|
||||
{
|
||||
columns,
|
||||
data,
|
||||
},
|
||||
useGlobalFilter,
|
||||
useSortBy,
|
||||
usePagination
|
||||
);
|
||||
|
||||
const {
|
||||
getTableProps,
|
||||
getTableBodyProps,
|
||||
headerGroups,
|
||||
page,
|
||||
gotoPage,
|
||||
pageCount,
|
||||
prepareRow,
|
||||
nextPage,
|
||||
previousPage,
|
||||
canNextPage,
|
||||
canPreviousPage,
|
||||
setPageSize,
|
||||
setGlobalFilter,
|
||||
state,
|
||||
} = tableInstance;
|
||||
|
||||
const createPages = (count) => {
|
||||
let arrPageCount = [];
|
||||
|
||||
for (let i = 1; i <= count; i++) {
|
||||
arrPageCount.push(i);
|
||||
}
|
||||
|
||||
return arrPageCount;
|
||||
};
|
||||
|
||||
const { pageIndex, pageSize, globalFilter } = state;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
direction="column"
|
||||
w="100%"
|
||||
overflowX={{ sm: "scroll", lg: "hidden" }}
|
||||
>
|
||||
<Flex
|
||||
align={{ sm: "flex-start", lg: "flex-end" }}
|
||||
justify={{ sm: "flex-start", lg: "flex-end" }}
|
||||
w="100%"
|
||||
px="22px"
|
||||
mb="36px"
|
||||
>
|
||||
<SearchBar
|
||||
border="1px solid "
|
||||
borderColor={useColorModeValue("gray.200", "gray.600")}
|
||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||
/>
|
||||
</Flex>
|
||||
<Table {...getTableProps()} variant="simple" color="gray.500" mb="24px">
|
||||
<Thead>
|
||||
{headerGroups.map((headerGroup, index) => (
|
||||
<Tr {...headerGroup.getHeaderGroupProps()} key={index}>
|
||||
{headerGroup.headers.map((column, index) => (
|
||||
<Th key={index}
|
||||
{...column.getHeaderProps(column.getSortByToggleProps())}
|
||||
pe="0px"
|
||||
>
|
||||
<Flex
|
||||
justify="space-between"
|
||||
align="center"
|
||||
fontSize={{ sm: "10px", lg: "12px" }}
|
||||
color="gray.400"
|
||||
>
|
||||
{column.render("Header")}
|
||||
<Icon
|
||||
w={{ sm: "10px", md: "14px" }}
|
||||
h={{ sm: "10px", md: "14px" }}
|
||||
color={columns.isSorted ? "gray.500" : "gray.400"}
|
||||
float="right"
|
||||
as={
|
||||
column.isSorted
|
||||
? column.isSortedDesc
|
||||
? TiArrowSortedDown
|
||||
: TiArrowSortedUp
|
||||
: TiArrowUnsorted
|
||||
}
|
||||
/>
|
||||
</Flex>
|
||||
</Th>
|
||||
))}
|
||||
</Tr>
|
||||
))}
|
||||
</Thead>
|
||||
<Tbody {...getTableBodyProps()}>
|
||||
{page.map((row, index) => {
|
||||
prepareRow(row);
|
||||
return (
|
||||
<Tr {...row.getRowProps()} key={index}>
|
||||
{row.cells.map((cell, index) => {
|
||||
let data = "";
|
||||
if (cell.column.Header === "STATUS") {
|
||||
data = (
|
||||
<Flex align="center">
|
||||
<Flex
|
||||
justify="center"
|
||||
align="center"
|
||||
border="1px solid"
|
||||
borderColor={
|
||||
cell.value === "Paid"
|
||||
? "green.400"
|
||||
: cell.value === "Refunded"
|
||||
? "gray.400"
|
||||
: "red.400"
|
||||
}
|
||||
borderRadius="50%"
|
||||
width="24px"
|
||||
height="24px"
|
||||
me="6px"
|
||||
>
|
||||
<Icon
|
||||
as={
|
||||
cell.value === "Paid"
|
||||
? MdCheck
|
||||
: cell.value === "Refunded"
|
||||
? MdReplay
|
||||
: IoMdClose
|
||||
}
|
||||
color={
|
||||
cell.value === "Paid"
|
||||
? "green.400"
|
||||
: cell.value === "Refunded"
|
||||
? "gray.400"
|
||||
: "red.400"
|
||||
}
|
||||
w="20px"
|
||||
h="20px"
|
||||
/>
|
||||
</Flex>
|
||||
<Text>{cell.value}</Text>
|
||||
</Flex>
|
||||
);
|
||||
} else if (cell.column.Header === "ID") {
|
||||
data = (
|
||||
<Flex align="center">
|
||||
<Checkbox size="lg" colorScheme="blue" me="8px" />
|
||||
<Text>{cell.value}</Text>
|
||||
</Flex>
|
||||
);
|
||||
} else if (cell.column.Header === "DATE") {
|
||||
data = <Text>{cell.value}</Text>;
|
||||
} else if (cell.column.Header === "CUSTOMER") {
|
||||
data = (
|
||||
<Flex align="center">
|
||||
<Avatar
|
||||
name={cell.value.split(" ").join()[0]}
|
||||
w="30px"
|
||||
h="30px"
|
||||
me="6px"
|
||||
/>
|
||||
<Text>{cell.value}</Text>
|
||||
</Flex>
|
||||
);
|
||||
} else if (cell.column.Header === "PRODUCT") {
|
||||
data = <Text>{cell.value}</Text>;
|
||||
} else if (cell.column.Header === "REVENUE") {
|
||||
data = <Text>{cell.value}</Text>;
|
||||
}
|
||||
return (
|
||||
<Td
|
||||
{...cell.getCellProps()}
|
||||
key={index}
|
||||
fontSize={{ sm: "14px" }}
|
||||
minW={{ sm: "150px", md: "200px", lg: "auto" }}
|
||||
>
|
||||
{data}
|
||||
</Td>
|
||||
);
|
||||
})}
|
||||
</Tr>
|
||||
);
|
||||
})}
|
||||
</Tbody>
|
||||
</Table>
|
||||
<Flex
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
justify="space-between"
|
||||
align="center"
|
||||
w="100%"
|
||||
px={{ md: "22px" }}
|
||||
>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color="gray.500"
|
||||
fontWeight="normal"
|
||||
mb={{ sm: "24px", md: "0px" }}
|
||||
>
|
||||
Showing {pageSize * pageIndex + 1} to{" "}
|
||||
{pageSize * (pageIndex + 1) <= tableData.length
|
||||
? pageSize * (pageIndex + 1)
|
||||
: tableData.length}{" "}
|
||||
of {tableData.length} entries
|
||||
</Text>
|
||||
<Stack direction="row" alignSelf="flex-end" spacing="4px" ms="auto">
|
||||
<Button
|
||||
variant="no-effects"
|
||||
onClick={() => previousPage()}
|
||||
transition="all .5s ease"
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg="#fff"
|
||||
border="1px solid lightgray"
|
||||
display={
|
||||
pageSize === 5 ? "none" : canPreviousPage ? "flex" : "none"
|
||||
}
|
||||
_hover={{
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
>
|
||||
<Icon as={GrFormPrevious} w="16px" h="16px" color="gray.400" />
|
||||
</Button>
|
||||
{pageSize === 5 ? (
|
||||
<NumberInput
|
||||
max={pageCount - 1}
|
||||
min={1}
|
||||
w="75px"
|
||||
mx="6px"
|
||||
defaultValue="1"
|
||||
onChange={(e) => gotoPage(e)}
|
||||
>
|
||||
<NumberInputField />
|
||||
<NumberInputStepper>
|
||||
<NumberIncrementStepper onClick={() => nextPage()} />
|
||||
<NumberDecrementStepper onClick={() => previousPage()} />
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
) : (
|
||||
createPages(pageCount).map((pageNumber, index) => {
|
||||
return (
|
||||
<Button
|
||||
variant="no-effects"
|
||||
transition="all .5s ease"
|
||||
onClick={() => gotoPage(pageNumber - 1)}
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg={pageNumber === pageIndex + 1 ? "blue.500" : "#fff"}
|
||||
border={
|
||||
pageNumber === pageIndex + 1
|
||||
? "none"
|
||||
: "1px solid lightgray"
|
||||
}
|
||||
_hover={{
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
key={index}
|
||||
>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color={pageNumber === pageIndex + 1 ? "#fff" : "gray.600"}
|
||||
>
|
||||
{pageNumber}
|
||||
</Text>
|
||||
</Button>
|
||||
);
|
||||
})
|
||||
)}
|
||||
<Button
|
||||
variant="no-effects"
|
||||
onClick={() => nextPage()}
|
||||
transition="all .5s ease"
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg="#fff"
|
||||
border="1px solid lightgray"
|
||||
display={pageSize === 5 ? "none" : canNextPage ? "flex" : "none"}
|
||||
_hover={{
|
||||
bg: "gray.200",
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
>
|
||||
<Icon as={GrFormNext} w="16px" h="16px" color="gray.400" />
|
||||
</Button>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchTable2;
|
||||
84
src/components/Tables/TablesProjectRow.js
Normal file
84
src/components/Tables/TablesProjectRow.js
Normal file
@@ -0,0 +1,84 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
Icon,
|
||||
Progress,
|
||||
Td,
|
||||
Text,
|
||||
Tr,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import { FaEllipsisV } from "react-icons/fa";
|
||||
|
||||
function DashboardTableRow(props) {
|
||||
const { logo, name, status, budget, progression } = props;
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
return (
|
||||
<Tr>
|
||||
<Td minWidth={{ sm: "250px" }} ps="0px">
|
||||
<Flex alignItems="center" py=".8rem" minWidth="100%" flexWrap="nowrap">
|
||||
<Icon as={logo} h={"24px"} w={"24px"} me="18px" />
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
minWidth="100%"
|
||||
>
|
||||
{name}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
|
||||
{budget}
|
||||
</Text>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
|
||||
{status}
|
||||
</Text>
|
||||
</Td>
|
||||
<Td>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color="teal.300"
|
||||
fontWeight="bold"
|
||||
pb=".2rem"
|
||||
>{`${progression}%`}</Text>
|
||||
<Progress
|
||||
colorScheme={progression === 100 ? "teal" : "cyan"}
|
||||
size="xs"
|
||||
value={progression}
|
||||
borderRadius="15px"
|
||||
/>
|
||||
</Flex>
|
||||
</Td>
|
||||
<Td>
|
||||
<Button p="0px" bg="transparent">
|
||||
<Icon as={FaEllipsisV} color="gray.400" cursor="pointer" />
|
||||
</Button>
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardTableRow;
|
||||
171
src/components/Tables/TablesReportsRow.js
Normal file
171
src/components/Tables/TablesReportsRow.js
Normal file
@@ -0,0 +1,171 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
Flex,
|
||||
Icon,
|
||||
Td,
|
||||
Text,
|
||||
Tr,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import { BsCircleFill } from "react-icons/bs";
|
||||
|
||||
function TablesReportsRow(props) {
|
||||
const {
|
||||
image,
|
||||
name,
|
||||
email,
|
||||
domain,
|
||||
review,
|
||||
employed,
|
||||
id,
|
||||
isLast,
|
||||
paddingY,
|
||||
} = props;
|
||||
const borderColor = useColorModeValue("gray.200", "gray.600");
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
const secondaryColor = useColorModeValue("gray.400", "white");
|
||||
const mainColor = useColorModeValue("gray.500", "white");
|
||||
|
||||
return (
|
||||
<Tr border="none">
|
||||
<Td
|
||||
borderColor={borderColor}
|
||||
minW={{ sm: "220px", xl: "180px", "2xl": "220px" }}
|
||||
ps="0px"
|
||||
border={isLast ? "none" : null}
|
||||
px={{ xl: "2px", "2xl": "20px" }}
|
||||
>
|
||||
<Flex
|
||||
align="center"
|
||||
py={paddingY ? paddingY : ".8rem"}
|
||||
minWidth="100%"
|
||||
flexWrap="nowrap"
|
||||
>
|
||||
<Avatar
|
||||
src={image}
|
||||
borderRadius="12px"
|
||||
me={{ sm: "18px", xl: "6px", "2xl": "18px" }}
|
||||
/>
|
||||
<Text
|
||||
fontSize={{ sm: "md", xl: "sm", "2xl": "md" }}
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
minWidth="100%"
|
||||
>
|
||||
{name}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Td>
|
||||
|
||||
<Td
|
||||
borderColor={borderColor}
|
||||
minW={{ sm: "150px", lg: "150px" }}
|
||||
border={isLast ? "none" : null}
|
||||
px={{ xl: "2px", "2xl": "20px" }}
|
||||
>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize={{ sm: "md", xl: "sm", "2xl": "md" }}
|
||||
color={mainColor}
|
||||
fontWeight="bold"
|
||||
>
|
||||
{domain}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Td>
|
||||
<Td
|
||||
borderColor={borderColor}
|
||||
minW={{ sm: "150px", lg: "120px" }}
|
||||
border={isLast ? "none" : null}
|
||||
px={{ xl: "2px", "2xl": "20px" }}
|
||||
>
|
||||
<Flex align="center">
|
||||
<Icon
|
||||
as={BsCircleFill}
|
||||
w="8px"
|
||||
h="8px"
|
||||
color={
|
||||
review === "Positive"
|
||||
? "teal.300"
|
||||
: review === "Negative"
|
||||
? "red.500"
|
||||
: "gray.700"
|
||||
}
|
||||
me="6px"
|
||||
/>
|
||||
<Text
|
||||
color={secondaryColor}
|
||||
fontSize={{ sm: "md", xl: "sm", "2xl": "md" }}
|
||||
>
|
||||
{review}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Td>
|
||||
<Td
|
||||
borderColor={borderColor}
|
||||
minW={{ sm: "200px", lg: "170px" }}
|
||||
border={isLast ? "none" : null}
|
||||
px={{ xl: "2px", "2xl": "20px" }}
|
||||
>
|
||||
<Text
|
||||
fontSize={{ sm: "md", xl: "sm", "2xl": "md" }}
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
pb=".5rem"
|
||||
>
|
||||
{email}
|
||||
</Text>
|
||||
</Td>
|
||||
<Td
|
||||
borderColor={borderColor}
|
||||
minW={{ sm: "150px", lg: "170px" }}
|
||||
border={isLast ? "none" : null}
|
||||
px={{ xl: "2px", "2xl": "20px" }}
|
||||
>
|
||||
<Text
|
||||
fontSize={{ sm: "md", xl: "sm", "2xl": "md" }}
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
pb=".5rem"
|
||||
>
|
||||
{employed}
|
||||
</Text>
|
||||
</Td>
|
||||
<Td
|
||||
borderColor={borderColor}
|
||||
minW={{ sm: "150px", lg: "170px" }}
|
||||
border={isLast ? "none" : null}
|
||||
px={{ xl: "2px", "2xl": "20px" }}
|
||||
>
|
||||
<Text
|
||||
fontSize={{ sm: "md", xl: "sm", "2xl": "md" }}
|
||||
color={secondaryColor}
|
||||
fontWeight="normal"
|
||||
pb=".5rem"
|
||||
>
|
||||
{id}
|
||||
</Text>
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
|
||||
export default TablesReportsRow;
|
||||
120
src/components/Tables/TablesTableRow.js
Normal file
120
src/components/Tables/TablesTableRow.js
Normal file
@@ -0,0 +1,120 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Button,
|
||||
Flex,
|
||||
Td,
|
||||
Text,
|
||||
Tr,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
|
||||
function TablesTableRow(props) {
|
||||
const {
|
||||
logo,
|
||||
name,
|
||||
email,
|
||||
subdomain,
|
||||
domain,
|
||||
status,
|
||||
date,
|
||||
paddingY,
|
||||
isLast,
|
||||
} = props;
|
||||
const textColor = useColorModeValue("gray.500", "white");
|
||||
const titleColor = useColorModeValue("gray.700", "white");
|
||||
const bgStatus = useColorModeValue("gray.400", "navy.900");
|
||||
const borderColor = useColorModeValue("gray.200", "gray.600");
|
||||
|
||||
return (
|
||||
<Tr>
|
||||
<Td
|
||||
minWidth={{ sm: "250px" }}
|
||||
pl="0px"
|
||||
borderColor={borderColor}
|
||||
borderBottom={isLast ? "none" : null}
|
||||
>
|
||||
<Flex
|
||||
align="center"
|
||||
py={paddingY ? paddingY : ".8rem"}
|
||||
minWidth="100%"
|
||||
flexWrap="nowrap"
|
||||
>
|
||||
<Avatar src={logo} w="50px" borderRadius="12px" me="18px" />
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={titleColor}
|
||||
fontWeight="bold"
|
||||
minWidth="100%"
|
||||
>
|
||||
{name}
|
||||
</Text>
|
||||
<Text fontSize="sm" color="gray.400" fontWeight="normal">
|
||||
{email}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Td>
|
||||
|
||||
<Td borderColor={borderColor} borderBottom={isLast ? "none" : null}>
|
||||
<Flex direction="column">
|
||||
<Text fontSize="md" color={textColor} fontWeight="bold">
|
||||
{domain}
|
||||
</Text>
|
||||
<Text fontSize="sm" color="gray.400" fontWeight="normal">
|
||||
{subdomain}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Td>
|
||||
<Td borderColor={borderColor} borderBottom={isLast ? "none" : null}>
|
||||
<Badge
|
||||
bg={status === "Online" ? "green.400" : bgStatus}
|
||||
color={status === "Online" ? "white" : "white"}
|
||||
fontSize="16px"
|
||||
p="3px 10px"
|
||||
borderRadius="8px"
|
||||
>
|
||||
{status}
|
||||
</Badge>
|
||||
</Td>
|
||||
<Td borderColor={borderColor} borderBottom={isLast ? "none" : null}>
|
||||
<Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
|
||||
{date}
|
||||
</Text>
|
||||
</Td>
|
||||
<Td borderColor={borderColor} borderBottom={isLast ? "none" : null}>
|
||||
<Button p="0px" bg="transparent" variant="no-effects">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color="gray.400"
|
||||
fontWeight="bold"
|
||||
cursor="pointer"
|
||||
>
|
||||
Edit
|
||||
</Text>
|
||||
</Button>
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
|
||||
export default TablesTableRow;
|
||||
132
src/components/Tables/TimelineRow.js
Normal file
132
src/components/Tables/TimelineRow.js
Normal file
@@ -0,0 +1,132 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
Icon,
|
||||
Stack,
|
||||
Tag,
|
||||
Text,
|
||||
useColorMode,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
|
||||
function TimelineRow(props) {
|
||||
const {
|
||||
logo,
|
||||
title,
|
||||
titleColor,
|
||||
date,
|
||||
color,
|
||||
index,
|
||||
tags,
|
||||
description,
|
||||
arrLength,
|
||||
isDark,
|
||||
} = props;
|
||||
const textColor = useColorModeValue("gray.700", "white.300");
|
||||
const { colorMode } = useColorMode();
|
||||
|
||||
return (
|
||||
<Flex alignItems="center" minH="78px" justifyContent="start" mb="5px">
|
||||
<Flex direction="column" h="100%">
|
||||
<Icon
|
||||
as={logo}
|
||||
color={isDark && colorMode === "dark" ? "white" : color}
|
||||
h={"30px"}
|
||||
w={"26px"}
|
||||
pe="6px"
|
||||
zIndex="1"
|
||||
position="relative"
|
||||
right={document.documentElement.dir === "rtl" ? "-8px" : ""}
|
||||
left={document.documentElement.dir === "rtl" ? "" : "-8px"}
|
||||
/>
|
||||
<Box
|
||||
w="2px"
|
||||
bg="gray.200"
|
||||
minH={
|
||||
index === arrLength - 1
|
||||
? "15px"
|
||||
: description
|
||||
? { sm: "200px", md: "130px", lg: "150px", "2xl": "130px" }
|
||||
: "35px"
|
||||
}
|
||||
></Box>
|
||||
</Flex>
|
||||
<Flex direction="column" justifyContent="flex-start" h="100%">
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color={titleColor !== undefined ? titleColor : textColor}
|
||||
fontWeight="bold"
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color={isDark && colorMode === "dark" ? "white" : "gray.400"}
|
||||
fontWeight="normal"
|
||||
mb="14px"
|
||||
>
|
||||
{date}
|
||||
</Text>
|
||||
{description !== undefined ? (
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color={isDark && colorMode === "dark" ? "white" : "gray.400"}
|
||||
fontWeight="normal"
|
||||
mb="6px"
|
||||
maxW="70%"
|
||||
>
|
||||
{description}
|
||||
</Text>
|
||||
) : null}
|
||||
{tags !== undefined ? (
|
||||
<Stack direction="row" spacing="6px">
|
||||
{tags.map((tag, index) => {
|
||||
return (
|
||||
<Tag
|
||||
bg={
|
||||
isDark && colorMode === "dark" && tag.bgTag === "blue.500"
|
||||
? "white"
|
||||
: tag.bgTag
|
||||
}
|
||||
fontSize="xs"
|
||||
size="lg"
|
||||
color={
|
||||
isDark && colorMode === "dark" && tag.bgTag === "blue.500"
|
||||
? "blue.500"
|
||||
: "white"
|
||||
}
|
||||
mb="16px"
|
||||
borderRadius="8px"
|
||||
alignSelf="flex-start"
|
||||
key={index}
|
||||
>
|
||||
{tag.titleTag}
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
) : null}
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default TimelineRow;
|
||||
81
src/components/Tables/TransactionRow.js
Normal file
81
src/components/Tables/TransactionRow.js
Normal file
@@ -0,0 +1,81 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
import { Box, Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
|
||||
function TransactionRow(props) {
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
const { name, date, logo, price } = props;
|
||||
|
||||
return (
|
||||
<Flex my="1rem" justifyContent="space-between">
|
||||
<Flex alignItems="center">
|
||||
<Box
|
||||
me="12px"
|
||||
borderRadius="50%"
|
||||
color={
|
||||
price[0] === "+"
|
||||
? "green.400"
|
||||
: price[0] === "-"
|
||||
? "red.400"
|
||||
: "gray.400"
|
||||
}
|
||||
border="1px solid"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
w="35px"
|
||||
h="35px"
|
||||
>
|
||||
<Icon as={logo} />
|
||||
</Box>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize={{ sm: "md", md: "lg", lg: "md" }}
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
>
|
||||
{name}
|
||||
</Text>
|
||||
<Text
|
||||
fontSize={{ sm: "xs", md: "sm", lg: "xs" }}
|
||||
color="gray.400"
|
||||
fontWeight="semibold"
|
||||
>
|
||||
{date}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Box
|
||||
color={
|
||||
price[0] === "+"
|
||||
? "green.400"
|
||||
: price[0] === "-"
|
||||
? "red.400"
|
||||
: { textColor }
|
||||
}
|
||||
>
|
||||
<Text fontSize={{ sm: "md", md: "lg", lg: "md" }} fontWeight="bold">
|
||||
{price}
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default TransactionRow;
|
||||
Reference in New Issue
Block a user