From dda3e8ecfc4efb21f6f2098366547bb99d63924f Mon Sep 17 00:00:00 2001 From: simmmpleweb Date: Mon, 11 Sep 2023 16:00:57 +0300 Subject: [PATCH 01/14] Package.json --- package.json | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 7e25c94..a916c0d 100644 --- a/package.json +++ b/package.json @@ -18,15 +18,16 @@ "apexcharts": "^3.35.2", "framer-motion": "^4.1.17", "next": "^12.2.5", - "react": "^17.0.2", + "react": "18.2.0", "react-apexcharts": "^1.4.0", "react-calendar": "^3.7.0", "react-custom-scrollbars-2": "^4.2.1", - "react-dom": "17.0.2", + "react-dom": "18.2.0", "react-dropzone": "^12.0.4", "react-icons": "^4.3.1", "react-is": "^18.0.0", - "react-table": "^7.8.0", + "react-table": "^7.8.0", + "react-no-ssr": "^1.1.0", "stylis": "^4.1.1", "stylis-plugin-rtl": "2.0.2", "typescript": "^4.7.4", @@ -50,9 +51,9 @@ }, "devDependencies": { "@types/node": "^18.7.6", - "@types/react": "^18.0.17", - "@types/react-calendar": "^3.5.2", - "@types/react-table": "^7.7.12", + "@types/react": "18.2.0", + "@types/react-calendar": "^3.5.2", + "@types/react-table": "^7.7.12", "eslint": "^8.23.0", "eslint-config-next": "^12.2.5", "gh-pages": "^3.2.3" From 9e437d532ed5a3692ce70f25a93a9759df437016 Mon Sep 17 00:00:00 2001 From: simmmpleweb Date: Mon, 11 Sep 2023 23:32:10 +0300 Subject: [PATCH 02/14] Prettier + npmrc --- .npmrc | 3 +++ prettier.config.js | 4 ++++ 2 files changed, 7 insertions(+) create mode 100644 .npmrc create mode 100644 prettier.config.js diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..5c6c958 --- /dev/null +++ b/.npmrc @@ -0,0 +1,3 @@ +legacy-peer-deps=true +auto-install-peers=true +strict-peer-dependencies=false \ No newline at end of file diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 0000000..9166a04 --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,4 @@ +module.exports = { + trailingComma: 'all', + singleQuote: true, +}; From bac197502fb4ef5994922dcd1d194546737cf112 Mon Sep 17 00:00:00 2001 From: simmmpleweb Date: Mon, 11 Sep 2023 23:45:19 +0300 Subject: [PATCH 03/14] Deps updated --- package.json | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index a916c0d..89b52d3 100644 --- a/package.json +++ b/package.json @@ -17,17 +17,17 @@ "@types/react-dom": "^18.0.6", "apexcharts": "^3.35.2", "framer-motion": "^4.1.17", - "next": "^12.2.5", - "react": "18.2.0", + "next": "^13.4.19", + "react": "^18.2.0", "react-apexcharts": "^1.4.0", "react-calendar": "^3.7.0", "react-custom-scrollbars-2": "^4.2.1", - "react-dom": "18.2.0", + "react-dom": "^18.2.0", "react-dropzone": "^12.0.4", "react-icons": "^4.3.1", "react-is": "^18.0.0", - "react-table": "^7.8.0", - "react-no-ssr": "^1.1.0", + "react-no-ssr": "^1.1.0", + "react-table": "^7.8.0", "stylis": "^4.1.1", "stylis-plugin-rtl": "2.0.2", "typescript": "^4.7.4", @@ -42,7 +42,11 @@ "deploy": "gh-pages -d build" }, "browserslist": { - "production": [">0.2%", "not dead", "not op_mini all"], + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], "development": [ "last 1 chrome version", "last 1 firefox version", @@ -52,8 +56,8 @@ "devDependencies": { "@types/node": "^18.7.6", "@types/react": "18.2.0", - "@types/react-calendar": "^3.5.2", - "@types/react-table": "^7.7.12", + "@types/react-calendar": "^3.5.2", + "@types/react-table": "^7.7.12", "eslint": "^8.23.0", "eslint-config-next": "^12.2.5", "gh-pages": "^3.2.3" From c1881deb8dd3e9f10e2bc84a5fb0dc3da15048f1 Mon Sep 17 00:00:00 2001 From: simmmpleweb Date: Tue, 12 Sep 2023 00:29:10 +0300 Subject: [PATCH 04/14] TANSTACK + Images + Links + Errors commented (footer text in text, minicalendar) --- package.json | 1 + src/components/footer/FooterAdmin.tsx | 156 +++--- src/components/footer/FooterAuth.tsx | 160 +++--- src/components/navbar/NavbarLinksAdmin.tsx | 499 ++++++++++-------- src/components/sidebar/components/Links.tsx | 162 +++--- .../sidebar/components/SidebarCard.tsx | 96 ++-- src/pages/admin/data-tables.tsx | 55 +- src/pages/admin/default.tsx | 284 +++++----- src/pages/admin/nft-marketplace.tsx | 279 +++++----- src/pages/admin/profile.tsx | 66 +-- src/pages/auth/sign-in.tsx | 366 +++++++------ src/pages/rtl/rtl-default.tsx | 238 +++++---- src/routes.tsx | 54 +- src/utils/navigation.ts | 2 +- .../dataTables/components/CheckTable.tsx | 347 ++++++------ .../dataTables/components/ColumnsTable.tsx | 322 +++++------ .../dataTables/components/ComplexTable.tsx | 371 +++++++------ .../components/DevelopmentTable.tsx | 382 +++++++------- .../admin/dataTables/variables/columnsData.ts | 82 --- .../dataTables/variables/tableDataCheck.json | 80 --- .../dataTables/variables/tableDataCheck.ts | 89 ++++ .../variables/tableDataColumns.json | 26 - .../dataTables/variables/tableDataColumns.ts | 35 ++ .../variables/tableDataComplex.json | 26 - .../dataTables/variables/tableDataComplex.ts | 34 ++ .../variables/tableDataDevelopment.json | 68 --- .../variables/tableDataDevelopment.ts | 76 +++ .../admin/default/components/CheckTable.tsx | 341 ++++++------ .../admin/default/components/ComplexTable.tsx | 373 +++++++------ .../admin/default/variables/columnsData.ts | 56 -- .../default/variables/tableDataCheck.json | 31 -- .../admin/default/variables/tableDataCheck.ts | 47 ++ .../default/variables/tableDataComplex.json | 26 - .../default/variables/tableDataComplex.ts | 34 ++ .../marketplace/components/HistoryItem.tsx | 140 +++-- .../components/TableTopCreators.tsx | 313 ++++++----- .../variables/tableColumnsTopCreators.js | 14 - .../variables/tableDataTopCreators.json | 37 -- .../variables/tableDataTopCreators.ts | 45 ++ .../admin/profile/components/Project.tsx | 83 +-- src/views/admin/rtl/components/CheckTable.tsx | 330 ++++++------ .../admin/rtl/components/ComplexTable.tsx | 372 +++++++------ src/views/admin/rtl/index.tsx | 143 +++-- src/views/admin/rtl/variables/columnsData.ts | 36 -- .../admin/rtl/variables/tableDataCheck.json | 31 -- .../admin/rtl/variables/tableDataCheck.ts | 47 ++ .../admin/rtl/variables/tableDataComplex.json | 26 - .../admin/rtl/variables/tableDataComplex.ts | 34 ++ 48 files changed, 3579 insertions(+), 3336 deletions(-) delete mode 100644 src/views/admin/dataTables/variables/columnsData.ts delete mode 100644 src/views/admin/dataTables/variables/tableDataCheck.json create mode 100644 src/views/admin/dataTables/variables/tableDataCheck.ts delete mode 100644 src/views/admin/dataTables/variables/tableDataColumns.json create mode 100644 src/views/admin/dataTables/variables/tableDataColumns.ts delete mode 100644 src/views/admin/dataTables/variables/tableDataComplex.json create mode 100644 src/views/admin/dataTables/variables/tableDataComplex.ts delete mode 100644 src/views/admin/dataTables/variables/tableDataDevelopment.json create mode 100644 src/views/admin/dataTables/variables/tableDataDevelopment.ts delete mode 100644 src/views/admin/default/variables/columnsData.ts delete mode 100644 src/views/admin/default/variables/tableDataCheck.json create mode 100644 src/views/admin/default/variables/tableDataCheck.ts delete mode 100644 src/views/admin/default/variables/tableDataComplex.json create mode 100644 src/views/admin/default/variables/tableDataComplex.ts delete mode 100644 src/views/admin/marketplace/variables/tableColumnsTopCreators.js delete mode 100644 src/views/admin/marketplace/variables/tableDataTopCreators.json create mode 100644 src/views/admin/marketplace/variables/tableDataTopCreators.ts delete mode 100644 src/views/admin/rtl/variables/columnsData.ts delete mode 100644 src/views/admin/rtl/variables/tableDataCheck.json create mode 100644 src/views/admin/rtl/variables/tableDataCheck.ts delete mode 100644 src/views/admin/rtl/variables/tableDataComplex.json create mode 100644 src/views/admin/rtl/variables/tableDataComplex.ts diff --git a/package.json b/package.json index 89b52d3..c7441c1 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@emotion/cache": "^11.7.1", "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", + "@tanstack/react-table": "^8.9.8", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", diff --git a/src/components/footer/FooterAdmin.tsx b/src/components/footer/FooterAdmin.tsx index 06bc975..dd2c6d3 100644 --- a/src/components/footer/FooterAdmin.tsx +++ b/src/components/footer/FooterAdmin.tsx @@ -1,73 +1,101 @@ /*eslint-disable*/ -import { Flex, Link, List, ListItem, Text, useColorModeValue } from '@chakra-ui/react'; +import { + Flex, + Link, + List, + ListItem, + Text, + useColorModeValue, +} from '@chakra-ui/react'; export default function Footer() { - const textColor = useColorModeValue('gray.400', 'white'); - return ( - - - {' '} - © {new Date().getFullYear()} - + const textColor = useColorModeValue('gray.400', 'white'); + return ( + + + {' '} + © {new Date().getFullYear()} + {/* Horizon UI. All Rights Reserved. Made with love by Simmmple! - - - - - - Support - - - - - License - - - - - Terms of Use - - - - - Blog - - - - - ); + */} + + + + + Support + + + + + License + + + + + Terms of Use + + + + + Blog + + + + + ); } diff --git a/src/components/footer/FooterAuth.tsx b/src/components/footer/FooterAuth.tsx index 1d6e2a9..4704d5c 100644 --- a/src/components/footer/FooterAuth.tsx +++ b/src/components/footer/FooterAuth.tsx @@ -1,75 +1,103 @@ /* eslint-disable */ -import { Flex, Link, List, ListItem, Text, useColorModeValue } from '@chakra-ui/react'; +import { + Flex, + Link, + List, + ListItem, + Text, + useColorModeValue, +} from '@chakra-ui/react'; export default function Footer(props: { [x: string]: any }) { - let textColor = useColorModeValue('gray.400', 'white'); - let linkColor = useColorModeValue({ base: 'gray.400', lg: 'white' }, 'white'); - return ( - - - {' '} - © {new Date().getFullYear()} - + let textColor = useColorModeValue('gray.400', 'white'); + let linkColor = useColorModeValue({ base: 'gray.400', lg: 'white' }, 'white'); + return ( + + + {' '} + © {new Date().getFullYear()} + {/* Horizon UI. All Rights Reserved. Made with love by Simmmple! - - - - - - Support - - - - - License - - - - - Terms of Use - - - - - Blog - - - - - ); + */} + + + + + Support + + + + + License + + + + + Terms of Use + + + + + Blog + + + + + ); } diff --git a/src/components/navbar/NavbarLinksAdmin.tsx b/src/components/navbar/NavbarLinksAdmin.tsx index f365425..92cddc5 100644 --- a/src/components/navbar/NavbarLinksAdmin.tsx +++ b/src/components/navbar/NavbarLinksAdmin.tsx @@ -1,17 +1,17 @@ // Chakra Imports import { - Avatar, - Button, - Flex, - Icon, - Link, - Menu, - MenuButton, - MenuItem, - MenuList, - Text, - useColorModeValue, - useColorMode + Avatar, + Button, + Flex, + Icon, + Link, + Menu, + MenuButton, + MenuItem, + MenuList, + Text, + useColorModeValue, + useColorMode, } from '@chakra-ui/react'; // Custom Components import { ItemContent } from 'components/menu/ItemContent'; @@ -27,205 +27,288 @@ import { FaEthereum } from 'react-icons/fa'; import routes from 'routes'; import { Image } from 'components/image/Image'; export default function HeaderLinks(props: { secondary: boolean }) { - const { secondary } = props; - const { colorMode, toggleColorMode } = useColorMode(); - // Chakra Color Mode - const navbarIcon = useColorModeValue('gray.400', 'white'); - let menuBg = useColorModeValue('white', 'navy.800'); - const textColor = useColorModeValue('secondaryGray.900', 'white'); - const textColorBrand = useColorModeValue('brand.700', 'brand.400'); - const ethColor = useColorModeValue('gray.700', 'white'); - const borderColor = useColorModeValue('#E6ECFA', 'rgba(135, 140, 189, 0.3)'); - const ethBg = useColorModeValue('secondaryGray.300', 'navy.900'); - const ethBox = useColorModeValue('white', 'navy.800'); - const shadow = useColorModeValue( - '14px 17px 40px 4px rgba(112, 144, 176, 0.18)', - '14px 17px 40px 4px rgba(112, 144, 176, 0.06)' - ); - const borderButton = useColorModeValue('secondaryGray.500', 'whiteAlpha.200'); - return ( - - { - if (secondary) { - return { base: '10px', md: 'unset' }; - } - return 'unset'; - }} - me='10px' - borderRadius='30px' - /> - - - - - - 1,924 - - {' '} - ETH - - - - - - - - - - - - Notifications - - - Mark all read - - - - - - - - - - - - + const { secondary } = props; + const { colorMode, toggleColorMode } = useColorMode(); + // Chakra Color Mode + const navbarIcon = useColorModeValue('gray.400', 'white'); + let menuBg = useColorModeValue('white', 'navy.800'); + const textColor = useColorModeValue('secondaryGray.900', 'white'); + const textColorBrand = useColorModeValue('brand.700', 'brand.400'); + const ethColor = useColorModeValue('gray.700', 'white'); + const borderColor = useColorModeValue('#E6ECFA', 'rgba(135, 140, 189, 0.3)'); + const ethBg = useColorModeValue('secondaryGray.300', 'navy.900'); + const ethBox = useColorModeValue('white', 'navy.800'); + const shadow = useColorModeValue( + '14px 17px 40px 4px rgba(112, 144, 176, 0.18)', + '14px 17px 40px 4px rgba(112, 144, 176, 0.06)', + ); + const borderButton = useColorModeValue('secondaryGray.500', 'whiteAlpha.200'); + return ( + + { + if (secondary) { + return { base: '10px', md: 'unset' }; + } + return 'unset'; + }} + me="10px" + borderRadius="30px" + /> + + + + + + 1,924 + + {' '} + ETH + + + + + + + + + + + + Notifications + + + Mark all read + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - - - - 👋  Hey, Adela - - - - - Profile Settings - - - Newsletter Settings - - - Log out - - - - - - ); + + + + + + + + + 👋  Hey, Adela + + + + + Profile Settings + + + Newsletter Settings + + + Log out + + + + + + ); } HeaderLinks.propTypes = { - variant: PropTypes.string, - fixed: PropTypes.bool, - secondary: PropTypes.bool, - onOpen: PropTypes.func + variant: PropTypes.string, + fixed: PropTypes.bool, + secondary: PropTypes.bool, + onOpen: PropTypes.func, }; diff --git a/src/components/sidebar/components/Links.tsx b/src/components/sidebar/components/Links.tsx index c6fabff..0e039f9 100644 --- a/src/components/sidebar/components/Links.tsx +++ b/src/components/sidebar/components/Links.tsx @@ -1,34 +1,34 @@ /* eslint-disable */ // chakra imports -import { Box, Flex, HStack, Text, useColorModeValue } from '@chakra-ui/react' -import { useRouter } from 'next/router' -import Link from 'next/link' -import { IRoute } from 'types/navigation' +import { Box, Flex, HStack, Text, useColorModeValue } from '@chakra-ui/react'; +import { useRouter } from 'next/router'; +import Link from 'next/link'; +import { IRoute } from 'types/navigation'; interface SidebarLinksProps { - routes: IRoute[] + routes: IRoute[]; } -export function SidebarLinks (props: SidebarLinksProps) { - const { routes } = props +export function SidebarLinks(props: SidebarLinksProps) { + const { routes } = props; // Chakra color mode - const router = useRouter() + const router = useRouter(); - let activeColor = useColorModeValue('gray.700', 'white') + let activeColor = useColorModeValue('gray.700', 'white'); let inactiveColor = useColorModeValue( 'secondaryGray.600', - 'secondaryGray.600' - ) - let activeIcon = useColorModeValue('brand.500', 'white') - let textColor = useColorModeValue('secondaryGray.500', 'white') - let brandColor = useColorModeValue('brand.500', 'brand.400') + 'secondaryGray.600', + ); + let activeIcon = useColorModeValue('brand.500', 'white'); + let textColor = useColorModeValue('secondaryGray.500', 'white'); + let brandColor = useColorModeValue('brand.500', 'brand.400'); // verifies if routeName is the one active (in browser input) const activeRoute = (routeName: string) => { - return router.pathname.includes(routeName) - } + return router.pathname.includes(routeName); + }; // this function creates the links from the secondary accordions (for example auth -> sign-in -> default) const createLinks = (routes: IRoute[]) => { @@ -40,70 +40,32 @@ export function SidebarLinks (props: SidebarLinksProps) { ) { return ( - - {route.icon ? ( - - - - - {route.icon} - - - {route.name} - - + {route.icon ? ( + + + - - - ) : ( - - + me="18px" + > + {route.icon} + {route.name} - - - - )} - + + + + + ) : ( + + + + {route.name} + + + + + )} - ) + ); } - }) - } + }); + }; // BRAND - return <>{createLinks(routes)} + return <>{createLinks(routes)}; } -export default SidebarLinks +export default SidebarLinks; diff --git a/src/components/sidebar/components/SidebarCard.tsx b/src/components/sidebar/components/SidebarCard.tsx index b699958..c72c589 100644 --- a/src/components/sidebar/components/SidebarCard.tsx +++ b/src/components/sidebar/components/SidebarCard.tsx @@ -1,83 +1,83 @@ -import { Button, Flex, Link, Text, useColorModeValue } from '@chakra-ui/react' -import { Image } from 'components/image/Image' -import logoWhite from 'img/layout/logoWhite.png' +import { Button, Flex, Link, Text, useColorModeValue } from '@chakra-ui/react'; +import { Image } from 'components/image/Image'; +import logoWhite from 'img/layout/logoWhite.png'; -export default function SidebarDocs () { - const bgColor = 'linear-gradient(135deg, #868CFF 0%, #4318FF 100%)' - const borderColor = useColorModeValue('white', 'navy.800') +export default function SidebarDocs() { + const bgColor = 'linear-gradient(135deg, #868CFF 0%, #4318FF 100%)'; + const borderColor = useColorModeValue('white', 'navy.800'); return ( - + Upgrade to PRO Improve your development process and start doing more with Horizon UI PRO! - + - ) + ); } diff --git a/src/pages/admin/data-tables.tsx b/src/pages/admin/data-tables.tsx index a7a5532..22dee82 100644 --- a/src/pages/admin/data-tables.tsx +++ b/src/pages/admin/data-tables.tsx @@ -1,49 +1,30 @@ -import { Box, SimpleGrid } from '@chakra-ui/react' -import DevelopmentTable from 'views/admin/dataTables/components/DevelopmentTable' -import CheckTable from 'views/admin/dataTables/components/CheckTable' -import ColumnsTable from 'views/admin/dataTables/components/ColumnsTable' -import ComplexTable from 'views/admin/dataTables/components/ComplexTable' -import { - columnsDataDevelopment, - columnsDataCheck, - columnsDataColumns, - columnsDataComplex -} from 'views/admin/dataTables/variables/columnsData' -import tableDataDevelopment from 'views/admin/dataTables/variables/tableDataDevelopment.json' -import tableDataCheck from 'views/admin/dataTables/variables/tableDataCheck.json' -import tableDataColumns from 'views/admin/dataTables/variables/tableDataColumns.json' -import tableDataComplex from 'views/admin/dataTables/variables/tableDataComplex.json' -import React from 'react' -import AdminLayout from 'layouts/admin' -import { TableData } from 'views/admin/default/variables/columnsData' +import { Box, SimpleGrid } from '@chakra-ui/react'; +import DevelopmentTable from 'views/admin/dataTables/components/DevelopmentTable'; +import CheckTable from 'views/admin/dataTables/components/CheckTable'; +import ColumnsTable from 'views/admin/dataTables/components/ColumnsTable'; +import ComplexTable from 'views/admin/dataTables/components/ComplexTable'; +import tableDataDevelopment from 'views/admin/dataTables/variables/tableDataDevelopment'; +import tableDataCheck from 'views/admin/dataTables/variables/tableDataCheck'; +import tableDataColumns from 'views/admin/dataTables/variables/tableDataColumns'; +import tableDataComplex from 'views/admin/dataTables/variables/tableDataComplex'; +import React from 'react'; +import AdminLayout from 'layouts/admin'; -export default function DataTables () { +export default function DataTables() { return ( - - - - + + + + - ) + ); } diff --git a/src/pages/admin/default.tsx b/src/pages/admin/default.tsx index 18298fc..a1c69bd 100644 --- a/src/pages/admin/default.tsx +++ b/src/pages/admin/default.tsx @@ -28,175 +28,151 @@ import { Icon, Select, SimpleGrid, - useColorModeValue -} from '@chakra-ui/react' -// Assets + useColorModeValue, +} from '@chakra-ui/react'; // Custom components -import MiniCalendar from 'components/calendar/MiniCalendar' -import MiniStatistics from 'components/card/MiniStatistics' -import IconBox from 'components/icons/IconBox' +import MiniCalendar from 'components/calendar/MiniCalendar'; +import MiniStatistics from 'components/card/MiniStatistics'; +import IconBox from 'components/icons/IconBox'; import { MdAddTask, MdAttachMoney, MdBarChart, - MdFileCopy -} from 'react-icons/md' -import CheckTable from 'views/admin/default/components/CheckTable' -import ComplexTable from 'views/admin/default/components/ComplexTable' -import DailyTraffic from 'views/admin/default/components/DailyTraffic' -import PieCard from 'views/admin/default/components/PieCard' -import Tasks from 'views/admin/default/components/Tasks' -import TotalSpent from 'views/admin/default/components/TotalSpent' -import WeeklyRevenue from 'views/admin/default/components/WeeklyRevenue' -import { - columnsDataCheck, - columnsDataComplex, - TableData -} from 'views/admin/default/variables/columnsData' -import tableDataCheck from 'views/admin/default/variables/tableDataCheck.json' -import tableDataComplex from 'views/admin/default/variables/tableDataComplex.json' -import { isWindowAvailable } from 'utils/navigation' -import AdminLayout from 'layouts/admin' -import { Image } from 'components/image/Image' -import Usa from 'img/dashboards/usa.png' + MdFileCopy, +} from 'react-icons/md'; +import CheckTable from 'views/admin/default/components/CheckTable'; +import ComplexTable from 'views/admin/default/components/ComplexTable'; +import DailyTraffic from 'views/admin/default/components/DailyTraffic'; +import PieCard from 'views/admin/default/components/PieCard'; +import Tasks from 'views/admin/default/components/Tasks'; +import TotalSpent from 'views/admin/default/components/TotalSpent'; +import WeeklyRevenue from 'views/admin/default/components/WeeklyRevenue'; +import tableDataCheck from 'views/admin/default/variables/tableDataCheck'; +import tableDataComplex from 'views/admin/default/variables/tableDataComplex'; +import AdminLayout from 'layouts/admin'; +// Assets +import { Image } from 'components/image/Image'; +import Usa from 'img/dashboards/usa.png'; -export default function UserReports () { +export default function Default() { // Chakra Color Mode - const brandColor = useColorModeValue('brand.500', 'white') - const boxBg = useColorModeValue('secondaryGray.300', 'whiteAlpha.100') + const brandColor = useColorModeValue('brand.500', 'white'); + const boxBg = useColorModeValue('secondaryGray.300', 'whiteAlpha.100'); return ( - <> - - - } - /> - } - name='Earnings' - value='$350.4' - /> - - } - /> - } - name='Spend this month' - value='$642.39' - /> - - - - - - - - - - } - name='Your balance' - value='$1,000' - /> - } - /> - } - name='New Tasks' - value='154' - /> - - } - /> - } - name='Total Projects' - value='2935' - /> - + + + } + /> + } + name="Earnings" + value="$350.4" + /> + + } + /> + } + name="Spend this month" + value="$642.39" + /> + + + + + + + + + + } + name="Your balance" + value="$1,000" + /> + } + /> + } + name="New Tasks" + value="154" + /> + + } + /> + } + name="Total Projects" + value="2935" + /> + - - - - - - - - - - + + + + + + + + + - - - - - - + + + + + + {/* */} - + - ) + ); } diff --git a/src/pages/admin/nft-marketplace.tsx b/src/pages/admin/nft-marketplace.tsx index 360f611..986561b 100644 --- a/src/pages/admin/nft-marketplace.tsx +++ b/src/pages/admin/nft-marketplace.tsx @@ -20,7 +20,7 @@ */ -import React from 'react' +import React from 'react'; // Chakra imports import { @@ -31,112 +31,104 @@ import { Text, useColorModeValue, SimpleGrid, - Link -} from '@chakra-ui/react' + Link, +} from '@chakra-ui/react'; // Custom components -import Banner from 'views/admin/marketplace/components/Banner' -import TableTopCreators from 'views/admin/marketplace/components/TableTopCreators' -import HistoryItem from 'views/admin/marketplace/components/HistoryItem' -import NFT from 'components/card/NFT' -import Card from 'components/card/Card' +import Banner from 'views/admin/marketplace/components/Banner'; +import TableTopCreators from 'views/admin/marketplace/components/TableTopCreators'; +import HistoryItem from 'views/admin/marketplace/components/HistoryItem'; +import NFT from 'components/card/NFT'; +import Card from 'components/card/Card'; +import tableDataTopCreators from 'views/admin/marketplace/variables/tableDataTopCreators'; // Assets -import Nft1 from 'img/nfts/Nft1.png' -import Nft2 from 'img/nfts/Nft2.png' -import Nft3 from 'img/nfts/Nft3.png' -import Nft4 from 'img/nfts/Nft4.png' -import Nft5 from 'img/nfts/Nft5.png' -import Nft6 from 'img/nfts/Nft6.png' -import Avatar1 from 'img/avatars/avatar1.png' -import Avatar2 from 'img/avatars/avatar2.png' -import Avatar3 from 'img/avatars/avatar3.png' -import Avatar4 from 'img/avatars/avatar4.png' -import tableDataTopCreators from 'views/admin/marketplace/variables/tableDataTopCreators.json' -import { tableColumnsTopCreators } from 'views/admin/marketplace/variables/tableColumnsTopCreators' -import AdminLayout from 'layouts/admin' -import { TableData } from 'views/admin/default/variables/columnsData' -import NextLink from 'next/link' +import Nft1 from 'img/nfts/Nft1.png'; +import Nft2 from 'img/nfts/Nft2.png'; +import Nft3 from 'img/nfts/Nft3.png'; +import Nft4 from 'img/nfts/Nft4.png'; +import Nft5 from 'img/nfts/Nft5.png'; +import Nft6 from 'img/nfts/Nft6.png'; +import Avatar1 from 'img/avatars/avatar1.png'; +import Avatar2 from 'img/avatars/avatar2.png'; +import Avatar3 from 'img/avatars/avatar3.png'; +import Avatar4 from 'img/avatars/avatar4.png'; +import AdminLayout from 'layouts/admin'; -export default function NftMarketplace () { +export default function NftMarketplace() { // Chakra Color Mode - const textColor = useColorModeValue('secondaryGray.900', 'white') - const textColorBrand = useColorModeValue('brand.500', 'white') + const textColor = useColorModeValue('secondaryGray.900', 'white'); + const textColorBrand = useColorModeValue('brand.500', 'white'); return ( {/* Main Fields */} - - + {/* */} + Trending NFTs - - - Art - - - - - Music - - - - - Collectibles - - - - - Sports - - + + Art + + + Music + + + Collectibles + + + Sports + - + Recently Added - - + + - + - + History - + @@ -327,5 +316,5 @@ export default function NftMarketplace () { {/* Delete Product */} - ) + ); } diff --git a/src/pages/admin/profile.tsx b/src/pages/admin/profile.tsx index d7ca9c6..fb11177 100644 --- a/src/pages/admin/profile.tsx +++ b/src/pages/admin/profile.tsx @@ -21,22 +21,22 @@ */ // Chakra imports -import { Box, Grid } from '@chakra-ui/react' -import AdminLayout from 'layouts/admin' +import { Box, Grid } from '@chakra-ui/react'; +import AdminLayout from 'layouts/admin'; // Custom components -import Banner from 'views/admin/profile/components/Banner' -import General from 'views/admin/profile/components/General' -import Notifications from 'views/admin/profile/components/Notifications' -import Projects from 'views/admin/profile/components/Projects' -import Storage from 'views/admin/profile/components/Storage' -import Upload from 'views/admin/profile/components/Upload' +import Banner from 'views/admin/profile/components/Banner'; +import General from 'views/admin/profile/components/General'; +import Notifications from 'views/admin/profile/components/Notifications'; +import Projects from 'views/admin/profile/components/Projects'; +import Storage from 'views/admin/profile/components/Storage'; +import Upload from 'views/admin/profile/components/Upload'; // Assets -import banner from 'img/auth/banner.png' -import avatar from 'img/avatars/avatar4.png' +import banner from 'img/auth/banner.png'; +import avatar from 'img/avatars/avatar4.png'; -export default function ProfileOverview () { +export default function ProfileOverview() { return ( @@ -44,23 +44,23 @@ export default function ProfileOverview () { - ) + ); } diff --git a/src/pages/auth/sign-in.tsx b/src/pages/auth/sign-in.tsx index 9382962..ac8e08f 100644 --- a/src/pages/auth/sign-in.tsx +++ b/src/pages/auth/sign-in.tsx @@ -24,19 +24,19 @@ import React from 'react'; // Chakra imports import { - Box, - Button, - Checkbox, - Flex, - FormControl, - FormLabel, - Heading, - Icon, - Input, - InputGroup, - InputRightElement, - Text, - useColorModeValue + Box, + Button, + Checkbox, + Flex, + FormControl, + FormLabel, + Heading, + Icon, + Input, + InputGroup, + InputRightElement, + Text, + useColorModeValue, } from '@chakra-ui/react'; // Custom components import { HSeparator } from 'components/separator/Separator'; @@ -48,148 +48,200 @@ import { MdOutlineRemoveRedEye } from 'react-icons/md'; import { RiEyeCloseLine } from 'react-icons/ri'; export default function SignIn() { - // Chakra color mode - const textColor = useColorModeValue('navy.700', 'white'); - const textColorSecondary = 'gray.400'; - const textColorDetails = useColorModeValue('navy.700', 'secondaryGray.600'); - const textColorBrand = useColorModeValue('brand.500', 'white'); - const brandStars = useColorModeValue('brand.500', 'brand.400'); - const googleBg = useColorModeValue('secondaryGray.300', 'whiteAlpha.200'); - const googleText = useColorModeValue('navy.700', 'white'); - const googleHover = useColorModeValue({ bg: 'gray.200' }, { bg: 'whiteAlpha.300' }); - const googleActive = useColorModeValue({ bg: 'secondaryGray.300' }, { bg: 'whiteAlpha.200' }); - const [ show, setShow ] = React.useState(false); - const handleClick = () => setShow(!show); - return ( - - - - - Sign In - - - Enter your email and password to sign in! - - - - - - - - or - - - - - - Email* - - - - Password* - - - - - - - - - - - - Keep me logged in - - - - - - Forgot password? - - - - - - - - - Not registered yet? - - - - Create an Account - - - - - - - - - ); + // Chakra color mode + const textColor = useColorModeValue('navy.700', 'white'); + const textColorSecondary = 'gray.400'; + const textColorDetails = useColorModeValue('navy.700', 'secondaryGray.600'); + const textColorBrand = useColorModeValue('brand.500', 'white'); + const brandStars = useColorModeValue('brand.500', 'brand.400'); + const googleBg = useColorModeValue('secondaryGray.300', 'whiteAlpha.200'); + const googleText = useColorModeValue('navy.700', 'white'); + const googleHover = useColorModeValue( + { bg: 'gray.200' }, + { bg: 'whiteAlpha.300' }, + ); + const googleActive = useColorModeValue( + { bg: 'secondaryGray.300' }, + { bg: 'whiteAlpha.200' }, + ); + const [show, setShow] = React.useState(false); + const handleClick = () => setShow(!show); + return ( + + + + + Sign In + + + Enter your email and password to sign in! + + + + + + + + or + + + + + + Email* + + + + Password* + + + + + + + + + + + + Keep me logged in + + + + + Forgot password? + + + + + + + + Not registered yet? + + + Create an Account + + + + + + + + ); } diff --git a/src/pages/rtl/rtl-default.tsx b/src/pages/rtl/rtl-default.tsx index 39a127e..ec48cea 100644 --- a/src/pages/rtl/rtl-default.tsx +++ b/src/pages/rtl/rtl-default.tsx @@ -21,14 +21,27 @@ */ // Chakra imports -import { Box, Flex, Icon, Select, FormLabel, SimpleGrid, useColorModeValue } from '@chakra-ui/react'; +import { + Box, + Flex, + Icon, + Select, + FormLabel, + SimpleGrid, + useColorModeValue, +} from '@chakra-ui/react'; // Custom components import MiniCalendar from 'components/calendar/MiniCalendar'; import MiniStatistics from 'components/card/MiniStatistics'; import IconBox from 'components/icons/IconBox'; import RTLLayout from 'layouts/rtl'; import React from 'react'; -import { MdAddTask, MdAttachMoney, MdBarChart, MdFileCopy } from 'react-icons/md'; +import { + MdAddTask, + MdAttachMoney, + MdBarChart, + MdFileCopy, +} from 'react-icons/md'; import CheckTable from 'views/admin/default/components/CheckTable'; import ComplexTable from 'views/admin/default/components/ComplexTable'; import DailyTraffic from 'views/admin/default/components/DailyTraffic'; @@ -36,112 +49,129 @@ import PieCard from 'views/admin/default/components/PieCard'; import Tasks from 'views/admin/default/components/Tasks'; import TotalSpent from 'views/admin/default/components/TotalSpent'; import WeeklyRevenue from 'views/admin/default/components/WeeklyRevenue'; -import { columnsDataCheck, columnsDataComplex, TableData } from 'views/admin/default/variables/columnsData'; -import tableDataCheck from 'views/admin/default/variables/tableDataCheck.json'; -import tableDataComplex from 'views/admin/default/variables/tableDataComplex.json'; +import tableDataCheck from 'views/admin/default/variables/tableDataCheck'; +import tableDataComplex from 'views/admin/default/variables/tableDataComplex'; // Assets import { Image } from 'components/image/Image'; import Usa from 'img/dashboards/usa.png'; export default function RTLDashboard() { - // Chakra Color Mode - const brandColor = useColorModeValue('brand.500', 'white'); - const boxBg = useColorModeValue('secondaryGray.300', 'whiteAlpha.100'); - return ( - - - - } - /> - } - name='Earnings' - value='$350.4' - /> - } - /> - } - name='Spend this month' - value='$642.39' - /> - - - - - - - - - - } - name='Your balance' - value='$1,000' - /> - } - /> - } - name='New Tasks' - value='154' - /> - } - /> - } - name='Total Projects' - value='2935' - /> - + // Chakra Color Mode + const brandColor = useColorModeValue('brand.500', 'white'); + const boxBg = useColorModeValue('secondaryGray.300', 'whiteAlpha.100'); + return ( + + + + + } + /> + } + name="Earnings" + value="$350.4" + /> + + } + /> + } + name="Spend this month" + value="$642.39" + /> + + + + + + + + + + } + name="Your balance" + value="$1,000" + /> + } + /> + } + name="New Tasks" + value="154" + /> + + } + /> + } + name="Total Projects" + value="2935" + /> + - - - - - - - - - - - - - - - - - - - - - ); + + + + + + + + + + + + + + + + {/* */} + + + + + ); } diff --git a/src/routes.tsx b/src/routes.tsx index 46eda78..9995b39 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -1,30 +1,30 @@ -import { Icon } from '@chakra-ui/react' +import { Icon } from '@chakra-ui/react'; import { MdBarChart, MdPerson, MdHome, MdLock, - MdOutlineShoppingCart -} from 'react-icons/md' + MdOutlineShoppingCart, +} from 'react-icons/md'; // Admin Imports -import MainDashboard from 'pages/admin/default' -import NFTMarketplace from 'pages/admin/nft-marketplace' -import Profile from 'pages/admin/profile' -import DataTables from 'pages/admin/data-tables' -import RTL from 'pages/rtl/rtl-default' +import MainDashboard from './pages/admin/default'; +import NFTMarketplace from './pages/admin/nft-marketplace'; +import Profile from './pages/admin/profile'; +import DataTables from './pages/admin/data-tables'; +import RTL from './pages/rtl/rtl-default'; // Auth Imports -import SignInCentered from 'pages/auth/sign-in' -import { IRoute } from 'types/navigation' +import SignInCentered from './pages/auth/sign-in'; +import { IRoute } from 'types/navigation'; const routes: IRoute[] = [ { name: 'Main Dashboard', layout: '/admin', path: '/default', - icon: , - component: MainDashboard + icon: , + component: MainDashboard, }, { name: 'NFT Marketplace', @@ -33,42 +33,42 @@ const routes: IRoute[] = [ icon: ( ), component: NFTMarketplace, - secondary: true + secondary: true, }, { name: 'Data Tables', layout: '/admin', - icon: , + icon: , path: '/data-tables', - component: DataTables + component: DataTables, }, { name: 'Profile', layout: '/admin', path: '/profile', - icon: , - component: Profile + icon: , + component: Profile, }, { name: 'Sign In', layout: '/auth', path: '/sign-in', - icon: , - component: SignInCentered + icon: , + component: SignInCentered, }, { name: 'RTL Admin', layout: '/rtl', path: '/rtl-default', - icon: , - component: RTL - } -] + icon: , + component: RTL, + }, +]; -export default routes +export default routes; diff --git a/src/utils/navigation.ts b/src/utils/navigation.ts index 03f4e97..cc661a1 100644 --- a/src/utils/navigation.ts +++ b/src/utils/navigation.ts @@ -3,7 +3,7 @@ import { IRoute } from "types/navigation"; // NextJS Requirement export const isWindowAvailable = () => typeof window !== "undefined"; -export const findCurrentRoute = (routes: IRoute[]): IRoute => { +export const findCurrentRoute = (routes: IRoute[]): IRoute => { const foundRoute: IRoute = routes.find( (route) => isWindowAvailable() && diff --git a/src/views/admin/dataTables/components/CheckTable.tsx b/src/views/admin/dataTables/components/CheckTable.tsx index 0646198..c76ee02 100644 --- a/src/views/admin/dataTables/components/CheckTable.tsx +++ b/src/views/admin/dataTables/components/CheckTable.tsx @@ -1,177 +1,180 @@ +import { Flex, Box, Table, Checkbox, Tbody, Td, Text, Th, Thead, Tr, useColorModeValue } from '@chakra-ui/react'; +import * as React from 'react'; + import { - Flex, - Table, - Checkbox, - Tbody, - Td, - Text, - Th, - Thead, - Tr, - useColorModeValue -} from '@chakra-ui/react' -import React, { useEffect, useMemo, useState } from 'react' -import { - useGlobalFilter, - usePagination, - useSortBy, - useTable -} from 'react-table' + createColumnHelper, + flexRender, + getCoreRowModel, + getSortedRowModel, + SortingState, + useReactTable +} from '@tanstack/react-table'; // Custom components -import Card from 'components/card/Card' -import Menu from 'components/menu/MainMenu' -import { TableProps } from 'views/admin/default/variables/columnsData' -import { isWindowAvailable } from 'utils/navigation' -export default function CheckTable (props: TableProps) { - const { columnsData, tableData } = props - - const columns = useMemo(() => columnsData, [columnsData]) - const data = useMemo(() => tableData, [tableData]) - - const tableInstance = useTable( - { - columns, - data - }, - useGlobalFilter, - useSortBy, - usePagination - ) - - const { - getTableProps, - getTableBodyProps, - headerGroups, - page, - prepareRow, - initialState - } = tableInstance - initialState.pageSize = 11 - - const textColor = useColorModeValue('secondaryGray.900', 'white') - const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100') - const [isMounted, setIsMounted] = useState(false) - - useEffect(() => { - if (isMounted) return - setIsMounted(true) - }, [isMounted]) - - if (!isMounted) return <> +import Card from 'components/card/Card'; +import Menu from 'components/menu/MainMenu'; - return ( - - - - Check Table - - - +type RowObj = { + name: [string, boolean]; + progress: string; + quantity: number; + date: string; + info: boolean; +}; + +const columnHelper = createColumnHelper(); - {isWindowAvailable() && ( - - - {headerGroups.map((headerGroup, index) => ( - - {headerGroup.headers.map((column, index) => ( - - ))} - - ))} - - - {page.map((row, index) => { - prepareRow(row) - return ( - - {row.cells.map((cell, index) => { - let data - if (cell.column.Header === 'NAME') { - data = ( - - - - {cell.value[0]} - - - ) - } else if (cell.column.Header === 'PROGRESS') { - data = ( - - - {cell.value}% - - - ) - } else if (cell.column.Header === 'QUANTITY') { - data = ( - - {cell.value} - - ) - } else if (cell.column.Header === 'DATE') { - data = ( - - {cell.value} - - ) - } - return ( - - ) - })} - - ) - })} - -
- - {column.render('Header')} - -
- {data} -
- )} - - ) -} +// const columns = columnsDataCheck; +export default function CheckTable(props: { tableData: any }) { + const { tableData } = props; + const [ sorting, setSorting ] = React.useState([]); + const textColor = useColorModeValue('secondaryGray.900', 'white'); + const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100'); + let defaultData= tableData; + const columns = [ + columnHelper.accessor('name', { + id: 'name', + header: () => ( + + NAME + + ), + cell: (info: any) => ( + + + + {info.getValue()[0]} + + + ) + }), + columnHelper.accessor('progress', { + id: 'progress', + header: () => ( + + PROGRESS + + ), + cell: (info) => ( + + {info.getValue()} + + ) + }), + columnHelper.accessor('quantity', { + id: 'quantity', + header: () => ( + + QUANTITY + + ), + cell: (info) => ( + + {info.getValue()} + + ) + }), + columnHelper.accessor('date', { + id: 'date', + header: () => ( + + DATE + + ), + cell: (info) => ( + + {info.getValue()} + + ) + }) + ]; + const [ data, setData ] = React.useState(() => [ ...defaultData ]); + const table = useReactTable({ + data, + columns, + state: { + sorting + }, + onSortingChange: setSorting, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + debugTable: true + }); + return ( + + + + Check Table + + + + + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + ); + })} + + ))} + + + {table.getRowModel().rows.slice(0, 11).map((row) => { + return ( + + {row.getVisibleCells().map((cell) => { + return ( + + ); + })} + + ); + })} + +
+ + {flexRender(header.column.columnDef.header, header.getContext())}{{ + asc: '', + desc: '', + }[header.column.getIsSorted() as string] ?? null} + +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+ + + ); +} \ No newline at end of file diff --git a/src/views/admin/dataTables/components/ColumnsTable.tsx b/src/views/admin/dataTables/components/ColumnsTable.tsx index 8ac3a86..e7a3c5b 100644 --- a/src/views/admin/dataTables/components/ColumnsTable.tsx +++ b/src/views/admin/dataTables/components/ColumnsTable.tsx @@ -1,154 +1,178 @@ +import { Flex, Box, Table, Checkbox, Tbody, Td, Text, Th, Thead, Tr, useColorModeValue } from '@chakra-ui/react'; +import * as React from 'react'; + import { - Flex, - Table, - Tbody, - Td, - Text, - Th, - Thead, - Tr, - useColorModeValue -} from '@chakra-ui/react' -import React, { useMemo } from 'react' -import { - useGlobalFilter, - usePagination, - useSortBy, - useTable -} from 'react-table' + createColumnHelper, + flexRender, + getCoreRowModel, + getSortedRowModel, + SortingState, + useReactTable +} from '@tanstack/react-table'; // Custom components -import Card from 'components/card/Card' -import Menu from 'components/menu/MainMenu' -import { TableProps } from 'views/admin/default/variables/columnsData' -export default function ColumnsTable (props: TableProps) { - const { columnsData, tableData } = props - - const columns = useMemo(() => columnsData, [columnsData]) - const data = useMemo(() => tableData, [tableData]) - - const tableInstance = useTable( - { - columns, - data - }, - useGlobalFilter, - useSortBy, - usePagination - ) +import Card from 'components/card/Card'; +import Menu from 'components/menu/MainMenu'; - const { - getTableProps, - getTableBodyProps, - headerGroups, - page, - prepareRow, - initialState - } = tableInstance - initialState.pageSize = 5 +type RowObj = { + name: string; + progress: string; + quantity: number; + date: string; +}; + +const columnHelper = createColumnHelper(); - const textColor = useColorModeValue('secondaryGray.900', 'white') - const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100') - return ( - - - - 4-Column Table - - - - - - {headerGroups.map((headerGroup, index) => ( - - {headerGroup.headers.map((column, index) => ( - - ))} - - ))} - - - {page.map((row, index) => { - prepareRow(row) - return ( - - {row.cells.map((cell, index) => { - let data - if (cell.column.Header === 'NAME') { - data = ( - - - {cell.value} - - - ) - } else if (cell.column.Header === 'PROGRESS') { - data = ( - - - {cell.value}% - - - ) - } else if (cell.column.Header === 'QUANTITY') { - data = ( - - {cell.value} - - ) - } else if (cell.column.Header === 'DATE') { - data = ( - - {cell.value} - - ) - } - return ( - - ) - })} - - ) - })} - -
- - {column.render('Header')} - -
- {data} -
- - ) -} +// const columns = columnsDataCheck; +export default function ColumnTable(props: { tableData: any }) { + const { tableData } = props; + const [ sorting, setSorting ] = React.useState([]); + const textColor = useColorModeValue('secondaryGray.900', 'white'); + const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100'); + let defaultData= tableData; + const columns = [ + columnHelper.accessor('name', { + id: 'name', + header: () => ( + + NAME + + ), + cell: (info: any) => ( + + + {info.getValue()} + + + ) + }), + columnHelper.accessor('progress', { + id: 'progress', + header: () => ( + + PROGRESS + + ), + cell: (info) => ( + + {info.getValue()} + + ) + }), + columnHelper.accessor('quantity', { + id: 'quantity', + header: () => ( + + QUANTITY + + ), + cell: (info) => ( + + {info.getValue()} + + ) + }), + columnHelper.accessor('date', { + id: 'date', + header: () => ( + + DATE + + ), + cell: (info) => ( + + {info.getValue()} + + ) + }) + ]; + const [ data, setData ] = React.useState(() => [ ...defaultData ]); + const table = useReactTable({ + data, + columns, + state: { + sorting + }, + onSortingChange: setSorting, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + debugTable: true + }); + return ( + + + + Check Table + + + + + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + ); + })} + + ))} + + + {table.getRowModel().rows.slice(0, 11).map((row) => { + return ( + + {row.getVisibleCells().map((cell) => { + return ( + + ); + })} + + ); + })} + +
+ + {flexRender(header.column.columnDef.header, header.getContext())}{{ + asc: '', + desc: '', + }[header.column.getIsSorted() as string] ?? null} + +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+ + + ); +} \ No newline at end of file diff --git a/src/views/admin/dataTables/components/ComplexTable.tsx b/src/views/admin/dataTables/components/ComplexTable.tsx index 77cdfe5..d08b3a8 100644 --- a/src/views/admin/dataTables/components/ComplexTable.tsx +++ b/src/views/admin/dataTables/components/ComplexTable.tsx @@ -1,181 +1,206 @@ +import { Box, Flex, Icon, Progress, Table, Tbody, Td, Text, Th, Thead, Tr, useColorModeValue } from '@chakra-ui/react'; import { - Flex, - Table, - Progress, - Icon, - Tbody, - Td, - Text, - Th, - Thead, - Tr, - useColorModeValue -} from '@chakra-ui/react' -import React, { useMemo } from 'react' -import { - useGlobalFilter, - usePagination, - useSortBy, - useTable -} from 'react-table' - + createColumnHelper, + flexRender, + getCoreRowModel, + getSortedRowModel, + SortingState, + useReactTable +} from '@tanstack/react-table'; // Custom components -import Card from 'components/card/Card' -import Menu from 'components/menu/MainMenu' - +import Card from 'components/card/Card'; +import Menu from 'components/menu/MainMenu'; +import * as React from 'react'; // Assets -import { MdCheckCircle, MdCancel, MdOutlineError } from 'react-icons/md' -import { TableProps } from 'views/admin/default/variables/columnsData' -export default function ColumnsTable (props: TableProps) { - const { columnsData, tableData } = props +import { MdCancel, MdCheckCircle, MdOutlineError } from 'react-icons/md'; + - const columns = useMemo(() => columnsData, [columnsData]) - const data = useMemo(() => tableData, [tableData]) - const tableInstance = useTable( - { - columns, - data - }, - useGlobalFilter, - useSortBy, - usePagination - ) +type RowObj = { + name: string; + status: string; + date: string; + progress: number; +}; - const { - getTableProps, - getTableBodyProps, - headerGroups, - page, - prepareRow, - initialState - } = tableInstance - initialState.pageSize = 5 +const columnHelper = createColumnHelper(); - const textColor = useColorModeValue('secondaryGray.900', 'white') - const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100') - return ( - - - - Complex Table - - - - - - {headerGroups.map((headerGroup, index) => ( - - {headerGroup.headers.map((column, index) => ( - - ))} - - ))} - - - {page.map((row, index) => { - prepareRow(row) - return ( - - {row.cells.map((cell, index) => { - let data - if (cell.column.Header === 'NAME') { - data = ( - - {cell.value} - - ) - } else if (cell.column.Header === 'STATUS') { - data = ( - - - - {cell.value} - - - ) - } else if (cell.column.Header === 'DATE') { - data = ( - - {cell.value} - - ) - } else if (cell.column.Header === 'PROGRESS') { - data = ( - - - - ) - } - return ( - - ) - })} - - ) - })} - -
- - {column.render('Header')} - -
- {data} -
- - ) +// const columns = columnsDataCheck; +export default function ComplexTable(props: { tableData: any }) { + const { tableData } = props; + const [ sorting, setSorting ] = React.useState([]); + const textColor = useColorModeValue('secondaryGray.900', 'white'); + const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100'); + let defaultData = tableData; + const columns = [ + columnHelper.accessor('name', { + id: 'name', + header: () => ( + + NAME + + ), + cell: (info: any) => ( + + + {info.getValue()} + + + ) + }), + columnHelper.accessor('status', { + id: 'status', + header: () => ( + + STATUS + + ), + cell: (info) => ( + + + + {info.getValue()} + + + ) + }), + columnHelper.accessor('date', { + id: 'date', + header: () => ( + + DATE + + ), + cell: (info) => ( + + {info.getValue()} + + ) + }), + columnHelper.accessor('progress', { + id: 'progress', + header: () => ( + + PROGRESS + + ), + cell: (info) => ( + + + + ) + }) + ]; + const [ data, setData ] = React.useState(() => [ ...defaultData ]); + const table = useReactTable({ + data, + columns, + state: { + sorting + }, + onSortingChange: setSorting, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + debugTable: true + }); + return ( + + + + Complex Table + + + + + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + ); + })} + + ))} + + + {table.getRowModel().rows.slice(0, 11).map((row) => { + return ( + + {row.getVisibleCells().map((cell) => { + return ( + + ); + })} + + ); + })} + +
+ + {flexRender(header.column.columnDef.header, header.getContext())}{{ + asc: '', + desc: '', + }[header.column.getIsSorted() as string] ?? null} + +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+ + + ); } + \ No newline at end of file diff --git a/src/views/admin/dataTables/components/DevelopmentTable.tsx b/src/views/admin/dataTables/components/DevelopmentTable.tsx index 6d49389..4ea3d33 100644 --- a/src/views/admin/dataTables/components/DevelopmentTable.tsx +++ b/src/views/admin/dataTables/components/DevelopmentTable.tsx @@ -1,204 +1,190 @@ -/* eslint-disable */ +import { Box, Flex, Progress, Table, Tbody, Td, Text, Th, Thead, Tr, useColorModeValue } from '@chakra-ui/react'; import { - Flex, - Progress, - Table, - Tbody, - Td, - Text, - Th, - Thead, - Tr, - useColorModeValue -} from '@chakra-ui/react' + createColumnHelper, + flexRender, + getCoreRowModel, + getSortedRowModel, + SortingState, + useReactTable +} from '@tanstack/react-table'; // Custom components -import Card from 'components/card/Card' -import { AndroidLogo, AppleLogo, WindowsLogo } from 'components/icons/Icons' -import Menu from 'components/menu/MainMenu' -import React, { useEffect, useMemo, useState } from 'react' -import { - useGlobalFilter, - usePagination, - useSortBy, - useTable -} from 'react-table' -import { TableProps } from 'views/admin/default/variables/columnsData' - -export default function DevelopmentTable (props: TableProps) { - const { columnsData, tableData } = props - - const columns = useMemo(() => columnsData, [columnsData]) - const data = useMemo(() => tableData, [tableData]) - - const tableInstance = useTable( - { - columns, - data - }, - useGlobalFilter, - useSortBy, - usePagination - ) - - const { - getTableProps, - getTableBodyProps, - headerGroups, - page, - prepareRow, - initialState - } = tableInstance - initialState.pageSize = 11 - - const textColor = useColorModeValue('secondaryGray.900', 'white') - const iconColor = useColorModeValue('secondaryGray.500', 'white') - const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100') - - const [isMounted, setIsMounted] = useState(false) +import Card from 'components/card/Card'; +import Menu from 'components/menu/MainMenu'; +import { AndroidLogo, AppleLogo, WindowsLogo } from 'components/icons/Icons'; +import * as React from 'react'; +// Assets - useEffect(() => { - if (isMounted) return - setIsMounted(true) - }, [isMounted]) +type RowObj = { + name: string; + tech: any; + date: string; + progress: number; +}; - if (!isMounted) return <> +const columnHelper = createColumnHelper(); - return ( - - - - Development Table - - - - - - {headerGroups.map((headerGroup, index) => ( - - {headerGroup.headers.map((column, index) => ( - - ))} - - ))} - - - {page.map((row, index) => { - prepareRow(row) - return ( - - {row.cells.map((cell, index) => { - let data - if (cell.column.Header === 'NAME') { - data = ( - - {cell.value} - - ) - } else if (cell.column.Header === 'TECH') { - data = ( - - {cell.value.map((item: string, key: number) => { - if (item === 'apple') { - return ( - - ) - } else if (item === 'android') { - return ( - - ) - } else if (item === 'windows') { - return ( - - ) - } - })} - - ) - } else if (cell.column.Header === 'DATE') { - data = ( - - {cell.value} - - ) - } else if (cell.column.Header === 'PROGRESS') { - data = ( - - - {cell.value}% - - - - ) - } - return ( - - ) - })} - - ) - })} - -
- - {column.render('Header')} - -
- {data} -
- - ) +// const columns = columnsDataCheck; +export default function ComplexTable(props: { tableData: any }) { + const { tableData } = props; + const [ sorting, setSorting ] = React.useState([]); + const textColor = useColorModeValue('secondaryGray.900', 'white'); + const iconColor = useColorModeValue('secondaryGray.500', 'white'); + const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100'); + let defaultData = tableData; + const columns = [ + columnHelper.accessor('name', { + id: 'name', + header: () => ( + + NAME + + ), + cell: (info: any) => ( + + + {info.getValue()} + + + ) + }), + columnHelper.accessor('tech', { + id: 'tech', + header: () => ( + + STATUS + + ), + cell: (info) => ( + + {info.getValue().map((item: string, key: number) => { + if (item === 'apple') { + return ; + } else if (item === 'android') { + return ; + } else if (item === 'windows') { + return ; + } + })} + + ) + }), + columnHelper.accessor('date', { + id: 'date', + header: () => ( + + DATE + + ), + cell: (info) => ( + + {info.getValue()} + + ) + }), + columnHelper.accessor('progress', { + id: 'progress', + header: () => ( + + PROGRESS + + ), + cell: (info) => ( + + + {info.getValue()}% + + + + ) + }) + ]; + const [ data, setData ] = React.useState(() => [ ...defaultData ]); + const table = useReactTable({ + data, + columns, + state: { + sorting + }, + onSortingChange: setSorting, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + debugTable: true + }); + return ( + + + + Complex Table + + + + + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + ); + })} + + ))} + + + {table.getRowModel().rows.slice(0, 11).map((row) => { + return ( + + {row.getVisibleCells().map((cell) => { + return ( + + ); + })} + + ); + })} + +
+ + {flexRender(header.column.columnDef.header, header.getContext())}{{ + asc: '', + desc: '', + }[header.column.getIsSorted() as string] ?? null} + +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+ + + ); } diff --git a/src/views/admin/dataTables/variables/columnsData.ts b/src/views/admin/dataTables/variables/columnsData.ts deleted file mode 100644 index 3b058ca..0000000 --- a/src/views/admin/dataTables/variables/columnsData.ts +++ /dev/null @@ -1,82 +0,0 @@ -interface IColumnHeader { - Header: string; - accessor: string; -} - -type Columns = IColumnHeader[]; - -export const columnsDataDevelopment: Columns = [ - { - Header: "NAME", - accessor: "name", - }, - { - Header: "TECH", - accessor: "tech", - }, - { - Header: "DATE", - accessor: "date", - }, - { - Header: "PROGRESS", - accessor: "progress", - }, -]; - -export const columnsDataCheck: Columns = [ - { - Header: "NAME", - accessor: "name", - }, - { - Header: "PROGRESS", - accessor: "progress", - }, - { - Header: "QUANTITY", - accessor: "quantity", - }, - { - Header: "DATE", - accessor: "date", - }, -]; - -export const columnsDataColumns: Columns = [ - { - Header: "NAME", - accessor: "name", - }, - { - Header: "PROGRESS", - accessor: "progress", - }, - { - Header: "QUANTITY", - accessor: "quantity", - }, - { - Header: "DATE", - accessor: "date", - }, -]; - -export const columnsDataComplex: Columns = [ - { - Header: "NAME", - accessor: "name", - }, - { - Header: "STATUS", - accessor: "status", - }, - { - Header: "DATE", - accessor: "date", - }, - { - Header: "PROGRESS", - accessor: "progress", - }, -]; diff --git a/src/views/admin/dataTables/variables/tableDataCheck.json b/src/views/admin/dataTables/variables/tableDataCheck.json deleted file mode 100644 index 996042d..0000000 --- a/src/views/admin/dataTables/variables/tableDataCheck.json +++ /dev/null @@ -1,80 +0,0 @@ -[ - { - "name":["Marketplace",false], - "quantity": 2458, - "date": "12.Jan.2021", - "progress": 75.5 - }, - { - "name":["Venus DB PRO",true], - "quantity": 1485, - "date": "21.Feb.2021", - "progress": 35.4 - }, - { - "name":["Venus DS",true], - "quantity": 1024, - "date": "13.Mar.2021", - "progress": 25 - }, - { - "name":["Venus 3D Asset",true], - "quantity": 858, - "date": "24.Jan.2021", - "progress": 100 - }, - { - "name":["Marketplace",false], - "quantity": 258, - "date": "Oct 24, 2022", - "progress": 75.5 - }, - { - "name":["Marketplace",false], - "quantity": 258, - "date": "Oct 24, 2022", - "progress": 75.5 - }, - { - "name":["Marketplace",false], - "quantity": 258, - "date": "12.Jan.2021", - "progress": 75.5 - }, - { - "name":["Venus DB PRO",false], - "quantity": 858, - "date": "21.Feb.2021", - "progress": 35.4 - }, - { - "name":["Venus DS",false], - "quantity": 1024, - "date": "13.Mar.2021", - "progress": 25 - }, - { - "name":["Venus 3D Asset",false], - "quantity": 258, - "date": "24.Jan.2021", - "progress": 100 - }, - { - "name":["Marketplace",false], - "quantity": 1024, - "date": "Oct 24, 2022", - "progress": 75.5 - }, - { - "name":["Marketplace",false], - "quantity": 258, - "date": "Oct 24, 2022", - "progress": 75.5 - }, - { - "name":["Marketplace",false], - "quantity": 258, - "date": "Oct 24, 2022", - "progress": 75.5 - } -] diff --git a/src/views/admin/dataTables/variables/tableDataCheck.ts b/src/views/admin/dataTables/variables/tableDataCheck.ts new file mode 100644 index 0000000..bcdd645 --- /dev/null +++ b/src/views/admin/dataTables/variables/tableDataCheck.ts @@ -0,0 +1,89 @@ +type RowObj = { + name: [string, boolean]; + progress: string; + quantity: number; + date: string; + info: boolean; +}; + +const tableDataCheck: RowObj[] = [ + { + name: [ 'Horizon UI PRO', true ], + quantity: 2458, + progress: '17.5%', + date: '12 Jan 2021', + info: false + }, + { + name: [ 'Horizon UI Free', true ], + quantity: 1485, + progress: '10.8%', + date: '21 Feb 2021', + info: true + }, + { + name: [ 'Weekly Update', true ], + quantity: 1024, + progress: '21.3%', + date: '13 Mar 2021', + info: true + }, + { + name: [ 'Venus 3D Asset', true ], + quantity: 858, + progress: '31.5%', + date: '24 Jan 2021', + info: true + }, + { + name: [ 'Marketplace', true ], + quantity: 258, + progress: '12.2%', + date: '24 Oct 2022', + info: false + }, + { + name: [ 'Horizon UI Free', true ], + quantity: 1485, + progress: '10.8%', + date: '21 Feb 2021', + info: true + }, + { + name: [ 'Weekly Update', true ], + quantity: 1024, + progress: '21.3%', + date: '13 Mar 2021', + info: true + }, + { + name: [ 'Venus 3D Asset', true ], + quantity: 858, + progress: '31.5%', + date: '24 Jan 2021', + info: true + }, + { + name: [ 'Horizon UI Free', true ], + quantity: 1485, + progress: '10.8%', + date: '21 Feb 2021', + info: true + }, + { + name: [ 'Weekly Update', true ], + quantity: 1024, + progress: '21.3%', + date: '13 Mar 2021', + info: true + }, + { + name: [ 'Venus 3D Asset', true ], + quantity: 858, + progress: '31.5%', + date: '24 Jan 2021', + info: true + } +]; + +export default tableDataCheck; diff --git a/src/views/admin/dataTables/variables/tableDataColumns.json b/src/views/admin/dataTables/variables/tableDataColumns.json deleted file mode 100644 index 7b7a7d1..0000000 --- a/src/views/admin/dataTables/variables/tableDataColumns.json +++ /dev/null @@ -1,26 +0,0 @@ -[ - { - "name":"Marketplace", - "quantity": 2458, - "date": "12.Jan.2021", - "progress": 75.5 - }, - { - "name":"Venus DB PRO", - "quantity": 1485, - "date": "21.Feb.2021", - "progress": 35.4 - }, - { - "name":"Venus DS", - "quantity": 1024, - "date": "13.Mar.2021", - "progress": 25 - }, - { - "name":"Venus 3D Asset", - "quantity": 858, - "date": "24.Jan.2021", - "progress": 100 - } -] diff --git a/src/views/admin/dataTables/variables/tableDataColumns.ts b/src/views/admin/dataTables/variables/tableDataColumns.ts new file mode 100644 index 0000000..7c50ef7 --- /dev/null +++ b/src/views/admin/dataTables/variables/tableDataColumns.ts @@ -0,0 +1,35 @@ +type RowObj = { + name: string; + progress: string; + quantity: number; + date: string; +}; + +const tableDataColumns: RowObj[] = [ + { + name: 'Horizon UI PRO', + quantity: 2458, + progress: '17.5%', + date: '12 Jan 2021', + }, + { + name:'Horizon UI Free', + quantity: 1485, + progress: '10.8%', + date: '21 Feb 2021', + }, + { + name: 'Weekly Update', + quantity: 1024, + progress: '21.3%', + date: '13 Mar 2021', + }, + { + name: 'Venus 3D Asset', + quantity: 858, + progress: '31.5%', + date: '24 Jan 2021', + }, +]; + +export default tableDataColumns; diff --git a/src/views/admin/dataTables/variables/tableDataComplex.json b/src/views/admin/dataTables/variables/tableDataComplex.json deleted file mode 100644 index fb4ebda..0000000 --- a/src/views/admin/dataTables/variables/tableDataComplex.json +++ /dev/null @@ -1,26 +0,0 @@ -[ - { - "name":"Marketplace", - "status": "Approved", - "date": "24.Jan.2021", - "progress": 75.5 - }, - { - "name":"Marketplace", - "status": "Disable", - "date": "30.Dec.2021", - "progress": 25.5 - }, - { - "name":"Marketplace", - "status": "Error", - "date": "20.May.2021", - "progress": 90 - }, - { - "name":"Marketplace", - "status": "Approved", - "date": "12.Jul.2021", - "progress": 50.5 - } -] diff --git a/src/views/admin/dataTables/variables/tableDataComplex.ts b/src/views/admin/dataTables/variables/tableDataComplex.ts new file mode 100644 index 0000000..74fb6e5 --- /dev/null +++ b/src/views/admin/dataTables/variables/tableDataComplex.ts @@ -0,0 +1,34 @@ +type RowObj = { + name: string; + status: string; + date: string; + progress: number; +}; + +const tableDataComplex: RowObj[] = [ + { + name: 'Horizon UI PRO', + progress: 75.5, + status: 'Approved', + date: '12 Jan 2021' + }, + { + name: 'Horizon UI Free', + progress: 25.5, + status: 'Disable', + date: '21 Feb 2021' + }, + { + name: 'Weekly Update', + progress: 90, + status: 'Error', + date: '13 Mar 2021' + }, + { + name: 'Marketplace', + progress: 50.5, + status: 'Approved', + date: '24 Oct 2022' + } +]; +export default tableDataComplex; diff --git a/src/views/admin/dataTables/variables/tableDataDevelopment.json b/src/views/admin/dataTables/variables/tableDataDevelopment.json deleted file mode 100644 index bb17bfc..0000000 --- a/src/views/admin/dataTables/variables/tableDataDevelopment.json +++ /dev/null @@ -1,68 +0,0 @@ -[ - { - "name":"Marketplace", - "tech": ["apple","android","windows"], - "date": "12.Jan.2021", - "progress": 75.5 - }, - { - "name":"Venus DB PRO", - "tech": ["apple" ], - "date": "21.Feb.2021", - "progress": 35.4 - }, - { - "name":"Venus DS", - "tech": ["apple" ,"windows"], - "date": "13.Mar.2021", - "progress": 25 - }, - { - "name":"Venus 3D Asset", - "tech": ["apple","android","windows"], - "date": "24.Jan.2021", - "progress": 100 - }, - { - "name":"Marketplace", - "tech": ["apple", "windows"], - "date": "Oct 24, 2022", - "progress": 75.5 - }, - { - "name":"Marketplace", - "tech": ["apple","android","windows"], - "date": "Oct 24, 2022", - "progress": 75.5 - }, - { - "name":"Marketplace", - "tech": ["apple","android","windows"], - "date": "12.Jan.2021", - "progress": 75.5 - }, - { - "name":"Venus DB PRO", - "tech": ["apple" ], - "date": "21.Feb.2021", - "progress": 35.4 - }, - { - "name":"Venus DS", - "tech": ["apple" ,"windows"], - "date": "13.Mar.2021", - "progress": 25 - }, - { - "name":"Venus 3D Asset", - "tech": ["apple","android","windows"], - "date": "24.Jan.2021", - "progress": 100 - }, - { - "name":"Marketplace", - "tech": ["apple", "windows"], - "date": "Oct 24, 2022", - "progress": 75.5 - } -] diff --git a/src/views/admin/dataTables/variables/tableDataDevelopment.ts b/src/views/admin/dataTables/variables/tableDataDevelopment.ts new file mode 100644 index 0000000..7b6e82e --- /dev/null +++ b/src/views/admin/dataTables/variables/tableDataDevelopment.ts @@ -0,0 +1,76 @@ +type RowObj = { + name: string; + tech: string[]; + date: string; + progress: number; +}; + +const tableDataComplex: RowObj[] = [ + { + name: 'Marketplace', + tech: [ 'apple', 'android', 'windows' ], + date: '12.Jan.2021', + progress: 75.5 + }, + { + name: 'Venus DB PRO', + tech: [ 'apple' ], + date: '21.Feb.2021', + progress: 35.4 + }, + { + name: 'Venus DS', + tech: [ 'apple', 'windows' ], + date: '13.Mar.2021', + progress: 25 + }, + { + name: 'Venus 3D Asset', + tech: [ 'apple', 'android', 'windows' ], + date: '24.Jan.2021', + progress: 100 + }, + { + name: 'Marketplace', + tech: [ 'apple', 'windows' ], + date: 'Oct 24, 2022', + progress: 75.5 + }, + { + name: 'Marketplace', + tech: [ 'apple', 'android', 'windows' ], + date: 'Oct 24, 2022', + progress: 75.5 + }, + { + name: 'Marketplace', + tech: [ 'apple', 'android', 'windows' ], + date: '12.Jan.2021', + progress: 75.5 + }, + { + name: 'Venus DB PRO', + tech: [ 'apple' ], + date: '21.Feb.2021', + progress: 35.4 + }, + { + name: 'Venus DS', + tech: [ 'apple', 'windows' ], + date: '13.Mar.2021', + progress: 25 + }, + { + name: 'Venus 3D Asset', + tech: [ 'apple', 'android', 'windows' ], + date: '24.Jan.2021', + progress: 100 + }, + { + name: 'Marketplace', + tech: [ 'apple', 'windows' ], + date: 'Oct 24, 2022', + progress: 75.5 + } +]; +export default tableDataComplex; diff --git a/src/views/admin/default/components/CheckTable.tsx b/src/views/admin/default/components/CheckTable.tsx index d0964e2..8bbd32a 100644 --- a/src/views/admin/default/components/CheckTable.tsx +++ b/src/views/admin/default/components/CheckTable.tsx @@ -1,171 +1,180 @@ +import { Flex, Box, Table, Checkbox, Tbody, Td, Text, Th, Thead, Tr, useColorModeValue } from '@chakra-ui/react'; +import * as React from 'react'; + import { - Flex, - Table, - Checkbox, - Tbody, - Td, - Text, - Th, - Thead, - Tr, - useColorModeValue -} from '@chakra-ui/react' -import { useMemo } from 'react' -import { - ColumnInstance, - HeaderGroup, - Row, - useGlobalFilter, - usePagination, - useSortBy, - useTable, - UseTableColumnProps -} from 'react-table' + createColumnHelper, + flexRender, + getCoreRowModel, + getSortedRowModel, + SortingState, + useReactTable +} from '@tanstack/react-table'; // Custom components -import Card from 'components/card/Card' -import Menu from 'components/menu/MainMenu' -import {} from 'components/charts/LineAreaChart' -import { TableProps } from '../variables/columnsData' - -export default function CheckTable (props: TableProps) { - const { columnsData, tableData } = props - - const columns = useMemo(() => columnsData, [columnsData]) - const data = useMemo(() => tableData, [tableData]) - - const tableInstance = useTable( - { - columns, - data - }, - useGlobalFilter, - useSortBy, - usePagination - ) +import Card from 'components/card/Card'; +import Menu from 'components/menu/MainMenu'; - const { - getTableProps, - getTableBodyProps, - headerGroups, - page, - prepareRow, - initialState - } = tableInstance - initialState.pageSize = 11 +type RowObj = { + name: [string, boolean]; + progress: string; + quantity: number; + date: string; + info: boolean; +}; + +const columnHelper = createColumnHelper(); - const textColor = useColorModeValue('secondaryGray.900', 'white') - const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100') - return ( - - - - Check Table - - - - - - {headerGroups.map((headerGroup, index: number) => ( - - {headerGroup.headers.map( - ( - column: ColumnInstance & UseTableColumnProps<{}>, - index: number - ) => ( - - ) - )} - - ))} - - - {page.map((row: Row, index: number) => { - prepareRow(row) - return ( - - {row.cells.map((cell, index: number) => { - let data - if (cell.column.Header === 'NAME') { - data = ( - - - - {cell.value[0]} - - - ) - } else if (cell.column.Header === 'PROGRESS') { - data = ( - - - {cell.value}% - - - ) - } else if (cell.column.Header === 'QUANTITY') { - data = ( - - {cell.value} - - ) - } else if (cell.column.Header === 'DATE') { - data = ( - - {cell.value} - - ) - } - return ( - - ) - })} - - ) - })} - -
- - {column.render('Header')} - -
- {data} -
- - ) -} +// const columns = columnsDataCheck; +export default function CheckTable(props: { tableData: any }) { + const { tableData } = props; + const [ sorting, setSorting ] = React.useState([]); + const textColor = useColorModeValue('secondaryGray.900', 'white'); + const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100'); + let defaultData= tableData; + const columns = [ + columnHelper.accessor('name', { + id: 'name', + header: () => ( + + NAME + + ), + cell: (info: any) => ( + + + + {info.getValue()[0]} + + + ) + }), + columnHelper.accessor('progress', { + id: 'progress', + header: () => ( + + PROGRESS + + ), + cell: (info) => ( + + {info.getValue()} + + ) + }), + columnHelper.accessor('quantity', { + id: 'quantity', + header: () => ( + + QUANTITY + + ), + cell: (info) => ( + + {info.getValue()} + + ) + }), + columnHelper.accessor('date', { + id: 'date', + header: () => ( + + DATE + + ), + cell: (info) => ( + + {info.getValue()} + + ) + }) + ]; + const [ data, setData ] = React.useState(() => [ ...defaultData ]); + const table = useReactTable({ + data, + columns, + state: { + sorting + }, + onSortingChange: setSorting, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + debugTable: true + }); + return ( + + + + Check Table + + + + + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + ); + })} + + ))} + + + {table.getRowModel().rows.slice(0, 5).map((row) => { + return ( + + {row.getVisibleCells().map((cell) => { + return ( + + ); + })} + + ); + })} + +
+ + {flexRender(header.column.columnDef.header, header.getContext())}{{ + asc: '', + desc: '', + }[header.column.getIsSorted() as string] ?? null} + +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+ + + ); +} \ No newline at end of file diff --git a/src/views/admin/default/components/ComplexTable.tsx b/src/views/admin/default/components/ComplexTable.tsx index 67d0914..ff6eb4e 100644 --- a/src/views/admin/default/components/ComplexTable.tsx +++ b/src/views/admin/default/components/ComplexTable.tsx @@ -1,183 +1,206 @@ +import { Box, Flex, Icon, Progress, Table, Tbody, Td, Text, Th, Thead, Tr, useColorModeValue } from '@chakra-ui/react'; import { - Flex, - Table, - Progress, - Icon, - Tbody, - Td, - Text, - Th, - Thead, - Tr, - useColorModeValue -} from '@chakra-ui/react' -import { useMemo } from 'react' -import { - useGlobalFilter, - usePagination, - useSortBy, - useTable -} from 'react-table' - + createColumnHelper, + flexRender, + getCoreRowModel, + getSortedRowModel, + SortingState, + useReactTable +} from '@tanstack/react-table'; // Custom components -import Card from 'components/card/Card' -import Menu from 'components/menu/MainMenu' - +import Card from 'components/card/Card'; +import Menu from 'components/menu/MainMenu'; +import * as React from 'react'; // Assets -import { MdCheckCircle, MdCancel, MdOutlineError } from 'react-icons/md' -import { TableProps } from '../variables/columnsData' -export default function ColumnsTable (props: TableProps) { - const { columnsData, tableData } = props +import { MdCancel, MdCheckCircle, MdOutlineError } from 'react-icons/md'; + - const columns = useMemo(() => columnsData, [columnsData]) - const data = useMemo(() => tableData, [tableData]) - const tableInstance = useTable( - { - columns, - data - }, - useGlobalFilter, - useSortBy, - usePagination - ) +type RowObj = { + name: string; + status: string; + date: string; + progress: number; +}; - const { - getTableProps, - getTableBodyProps, - headerGroups, - page, - prepareRow, - initialState - } = tableInstance - initialState.pageSize = 5 +const columnHelper = createColumnHelper(); - const textColor = useColorModeValue('secondaryGray.900', 'white') - const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100') - return ( - - - - Complex Table - - - - - - {headerGroups.map((headerGroup, index) => ( - - {headerGroup.headers.map((column, index) => ( - - ))} - - ))} - - - {page.map((row, index) => { - prepareRow(row) - return ( - - {row.cells.map((cell, index) => { - let data - if (cell.column.Header === 'NAME') { - data = ( - - {cell.value} - - ) - } else if (cell.column.Header === 'STATUS') { - data = ( - - - - {cell.value} - - - ) - } else if (cell.column.Header === 'DATE') { - data = ( - - {cell.value} - - ) - } else if (cell.column.Header === 'PROGRESS') { - data = ( - - - - ) - } - return ( - - ) - })} - - ) - })} - -
- - {column.render('Header')} - -
- {data} -
- - ) +// const columns = columnsDataCheck; +export default function ComplexTable(props: { tableData: any }) { + const { tableData } = props; + const [ sorting, setSorting ] = React.useState([]); + const textColor = useColorModeValue('secondaryGray.900', 'white'); + const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100'); + let defaultData = tableData; + const columns = [ + columnHelper.accessor('name', { + id: 'name', + header: () => ( + + NAME + + ), + cell: (info: any) => ( + + + {info.getValue()} + + + ) + }), + columnHelper.accessor('status', { + id: 'status', + header: () => ( + + STATUS + + ), + cell: (info) => ( + + + + {info.getValue()} + + + ) + }), + columnHelper.accessor('date', { + id: 'date', + header: () => ( + + DATE + + ), + cell: (info) => ( + + {info.getValue()} + + ) + }), + columnHelper.accessor('progress', { + id: 'progress', + header: () => ( + + PROGRESS + + ), + cell: (info) => ( + + + + ) + }) + ]; + const [ data, setData ] = React.useState(() => [ ...defaultData ]); + const table = useReactTable({ + data, + columns, + state: { + sorting + }, + onSortingChange: setSorting, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + debugTable: true + }); + return ( + + + + Complex Table + + + + + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + ); + })} + + ))} + + + {table.getRowModel().rows.slice(0, 5).map((row) => { + return ( + + {row.getVisibleCells().map((cell) => { + return ( + + ); + })} + + ); + })} + +
+ + {flexRender(header.column.columnDef.header, header.getContext())}{{ + asc: '', + desc: '', + }[header.column.getIsSorted() as string] ?? null} + +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+ + + ); } + \ No newline at end of file diff --git a/src/views/admin/default/variables/columnsData.ts b/src/views/admin/default/variables/columnsData.ts deleted file mode 100644 index b49e550..0000000 --- a/src/views/admin/default/variables/columnsData.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { Column } from "react-table"; -import tableDataCheck from "./tableDataCheck.json"; - -export const columnsDataCheck = [ - { - Header: "NAME", - accessor: "name", - }, - { - Header: "PROGRESS", - accessor: "progress", - }, - { - Header: "QUANTITY", - accessor: "quantity", - }, - { - Header: "DATE", - accessor: "date", - }, -]; -export const columnsDataComplex = [ - { - Header: "NAME", - accessor: "name", - }, - { - Header: "STATUS", - accessor: "status", - }, - { - Header: "DATE", - accessor: "date", - }, - { - Header: "PROGRESS", - accessor: "progress", - }, -]; - -export type ColumnData = Column[]; - -export type TableData = Column<{ - name: (string | boolean)[]; - date: string; - progress: number; - quantity?: number; - status?: string; - artworks?: string; - rating?: number; -}>; - -export type TableProps = { - columnsData: ColumnData; - tableData: TableData[]; -}; diff --git a/src/views/admin/default/variables/tableDataCheck.json b/src/views/admin/default/variables/tableDataCheck.json deleted file mode 100644 index f4af1d8..0000000 --- a/src/views/admin/default/variables/tableDataCheck.json +++ /dev/null @@ -1,31 +0,0 @@ -[{ - "name":["Horizon UI PRO",false], - "quantity": 2458, - "date": "12 Jan 2021", - "progress": 17.5 -}, -{ - "name":["Horizon UI Free",true], - "quantity": 1485, - "date": "21 Feb 2021", - "progress": 10.8 -}, -{ - "name":["Weekly Update",true], - "quantity": 1024, - "date": "13 Mar 2021", - "progress": 21.3 -}, -{ - "name":["Venus 3D Asset",true], - "quantity": 858, - "date": "24 Jan 2021", - "progress": 31.5 -}, -{ - "name":["Marketplace",false], - "quantity": 258, - "date": "24 Oct 2022", - "progress": 12.2 -} -] diff --git a/src/views/admin/default/variables/tableDataCheck.ts b/src/views/admin/default/variables/tableDataCheck.ts new file mode 100644 index 0000000..0dd1ce5 --- /dev/null +++ b/src/views/admin/default/variables/tableDataCheck.ts @@ -0,0 +1,47 @@ +type RowObj = { + name: [string, boolean]; + progress: string; + quantity: number; + date: string; + info: boolean; +}; + +const tableDataCheck: RowObj[] = [ + { + name: [ 'Horizon UI PRO', true ], + quantity: 2458, + progress: '17.5%', + date: '12 Jan 2021', + info: true + }, + { + name: [ 'Horizon UI Free', true ], + quantity: 1485, + progress: '10.8%', + date: '21 Feb 2021', + info: true + }, + { + name: [ 'Weekly Update', true ], + quantity: 1024, + progress: '21.3%', + date: '13 Mar 2021', + info: true + }, + { + name: [ 'Venus 3D Asset', true ], + quantity: 858, + progress: '31.5%', + date: '24 Jan 2021', + info: true + }, + { + name: [ 'Marketplace', true ], + quantity: 258, + progress: '12.2%', + date: '24 Oct 2022', + info: true + } +]; + +export default tableDataCheck; diff --git a/src/views/admin/default/variables/tableDataComplex.json b/src/views/admin/default/variables/tableDataComplex.json deleted file mode 100644 index 83f614b..0000000 --- a/src/views/admin/default/variables/tableDataComplex.json +++ /dev/null @@ -1,26 +0,0 @@ -[ - { - "name":"Horizon UI PRO", - "status": "Approved", - "date": "18 Apr 2022", - "progress": 75.5 - }, - { - "name":"Horizon UI Free", - "status": "Disable", - "date": "18 Apr 2022", - "progress": 25.5 - }, - { - "name":"Marketplace", - "status": "Error", - "date": "20 May 2021", - "progress": 90 - }, - { - "name":"Weekly Updates", - "status": "Approved", - "date": "12 Jul 2021", - "progress": 50.5 - } -] diff --git a/src/views/admin/default/variables/tableDataComplex.ts b/src/views/admin/default/variables/tableDataComplex.ts new file mode 100644 index 0000000..74fb6e5 --- /dev/null +++ b/src/views/admin/default/variables/tableDataComplex.ts @@ -0,0 +1,34 @@ +type RowObj = { + name: string; + status: string; + date: string; + progress: number; +}; + +const tableDataComplex: RowObj[] = [ + { + name: 'Horizon UI PRO', + progress: 75.5, + status: 'Approved', + date: '12 Jan 2021' + }, + { + name: 'Horizon UI Free', + progress: 25.5, + status: 'Disable', + date: '21 Feb 2021' + }, + { + name: 'Weekly Update', + progress: 90, + status: 'Error', + date: '13 Mar 2021' + }, + { + name: 'Marketplace', + progress: 50.5, + status: 'Approved', + date: '24 Oct 2022' + } +]; +export default tableDataComplex; diff --git a/src/views/admin/marketplace/components/HistoryItem.tsx b/src/views/admin/marketplace/components/HistoryItem.tsx index f48bbd1..0996e65 100644 --- a/src/views/admin/marketplace/components/HistoryItem.tsx +++ b/src/views/admin/marketplace/components/HistoryItem.tsx @@ -8,62 +8,88 @@ import { FaEthereum } from 'react-icons/fa'; import { Image } from 'components/image/Image'; export default function NFT(props: { - image: string; - name: string; - author: string; - date: string; - price: string | number; + image: string; + name: string; + author: string; + date: string; + price: string | number; }) { - const { image, name, author, date, price } = props; - // Chakra Color Mode - const textColor = useColorModeValue('brands.900', 'white'); - const bgItem = useColorModeValue( - { bg: 'white', boxShadow: '0px 40px 58px -20px rgba(112, 144, 176, 0.12)' }, - { bg: 'navy.700', boxShadow: 'unset' } - ); - const textColorDate = useColorModeValue('secondaryGray.600', 'white'); - return ( - - - - - - - - - {name} - - - {author} - - - - - - {price} - - - - {date} - - - - - ); + const { image, name, author, date, price } = props; + // Chakra Color Mode + const textColor = useColorModeValue('brands.900', 'white'); + const bgItem = useColorModeValue( + { bg: 'white', boxShadow: '0px 40px 58px -20px rgba(112, 144, 176, 0.12)' }, + { bg: 'navy.700', boxShadow: 'unset' }, + ); + const textColorDate = useColorModeValue('secondaryGray.600', 'white'); + return ( + + + + + + + + + {name} + + + {author} + + + + + + {price} + + + + {date} + + + + + ); } diff --git a/src/views/admin/marketplace/components/TableTopCreators.tsx b/src/views/admin/marketplace/components/TableTopCreators.tsx index d636854..e906856 100644 --- a/src/views/admin/marketplace/components/TableTopCreators.tsx +++ b/src/views/admin/marketplace/components/TableTopCreators.tsx @@ -11,156 +11,197 @@ import { Th, Thead, Tr, - useColorModeValue -} from '@chakra-ui/react' -import React, { useMemo } from 'react' + useColorModeValue, +} from '@chakra-ui/react'; import { - useGlobalFilter, - usePagination, - useSortBy, - useTable -} from 'react-table' -import { TableProps } from 'views/admin/default/variables/columnsData' + createColumnHelper, + flexRender, + getCoreRowModel, + getSortedRowModel, + SortingState, + useReactTable, +} from '@tanstack/react-table'; +// Custom components +import * as React from 'react'; +// Assets -function TopCreatorTable (props: TableProps) { - const { columnsData, tableData } = props +type RowObj = { + name: string[]; + artworks: number; + rating: number; +}; - const columns = useMemo(() => columnsData, [columnsData]) - const data = useMemo(() => tableData, [tableData]) +const columnHelper = createColumnHelper(); - const tableInstance = useTable( - { - columns, - data +// const columns = columnsDataCheck; +export default function TopCreatorTable(props: { tableData: any }) { + const { tableData } = props; + const [sorting, setSorting] = React.useState([]); + const textColor = useColorModeValue('secondaryGray.900', 'white'); + const textColorSecondary = useColorModeValue('secondaryGray.600', 'white'); + const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100'); + let defaultData = tableData; + const columns = [ + columnHelper.accessor('name', { + id: 'name', + header: () => ( + + NAME + + ), + cell: (info: any) => ( + + + + {info.getValue()[0]} + + + ), + }), + columnHelper.accessor('artworks', { + id: 'artworks', + header: () => ( + + ARTWORKS + + ), + cell: (info) => ( + + {info.getValue()} + + ), + }), + columnHelper.accessor('rating', { + id: 'rating', + header: () => ( + + RATING + + ), + cell: (info) => ( + + + + ), + }), + ]; + const [data, setData] = React.useState(() => [...defaultData]); + const table = useReactTable({ + data, + columns, + state: { + sorting, }, - useGlobalFilter, - useSortBy, - usePagination - ) - - const { - getTableProps, - getTableBodyProps, - headerGroups, - page, - prepareRow - } = tableInstance - - const textColor = useColorModeValue('navy.700', 'white') - const textColorSecondary = useColorModeValue('secondaryGray.600', 'white') - + onSortingChange: setSorting, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + debugTable: true, + }); return ( - <> + - - - Top Creators - - - - + + Top Creators + + + + +
- {headerGroups.map((headerGroup, index) => ( - - {headerGroup.headers.map((column, index) => ( - + {headerGroup.headers.map((header) => { + return ( + - ))} + + {flexRender( + header.column.columnDef.header, + header.getContext(), + )} + {{ + asc: '', + desc: '', + }[header.column.getIsSorted() as string] ?? null} + + + ); + })} ))} - - - {page.map((row, index) => { - prepareRow(row) - return ( - - {row.cells.map((cell, index) => { - let data - if (cell.column.Header === 'Name') { - data = ( - - - - {cell.value[0]} - - - ) - } else if (cell.column.Header === 'Artworks') { - data = ( - + {table + .getRowModel() + .rows.slice(0, 11) + .map((row) => { + return ( + + {row.getVisibleCells().map((cell) => { + return ( + - ) - })} - - ) - })} + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + + ); + })} + + ); + })}
- ( +
- {column.render('Header')} - -
- {cell.value} - - ) - } else if (cell.column.Header === 'Rating') { - data = ( - - - - ) - } - return ( - - {data} -
- - - ) + + + ); } - -export default TopCreatorTable diff --git a/src/views/admin/marketplace/variables/tableColumnsTopCreators.js b/src/views/admin/marketplace/variables/tableColumnsTopCreators.js deleted file mode 100644 index aae68b9..0000000 --- a/src/views/admin/marketplace/variables/tableColumnsTopCreators.js +++ /dev/null @@ -1,14 +0,0 @@ -export const tableColumnsTopCreators = [ - { - Header: "Name", - accessor: "name", - }, - { - Header: "Artworks", - accessor: "artworks", - }, - { - Header: "Rating", - accessor: "rating", - }, -]; diff --git a/src/views/admin/marketplace/variables/tableDataTopCreators.json b/src/views/admin/marketplace/variables/tableDataTopCreators.json deleted file mode 100644 index 9cfaf19..0000000 --- a/src/views/admin/marketplace/variables/tableDataTopCreators.json +++ /dev/null @@ -1,37 +0,0 @@ -[ - { - "name": ["@maddison_c21","https://images.unsplash.com/photo-1506863530036-1efeddceb993?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2244&q=80"], - "artworks" : "9821", - "rating":97 - }, - { - "name": ["@karl.will02","https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1780&q=80"], - "artworks" : "7032", - "rating":87 - }, - { - "name": ["@andreea.1z","https://images.unsplash.com/photo-1573766064535-6d5d4e62bf9d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1315&q=80"], - "artworks" : "5204", - "rating":82 - }, - { - "name": ["@abraham47.y","https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1780&q=80"], - "artworks" : "4309", - "rating":68 - }, - { - "name": ["@simmmple.web","https://i.ibb.co/7p0d1Cd/Frame-24.png"], - "artworks" : "3871", - "rating":55 - }, - { - "name": ["@horizon.ui","https://i.ibb.co/NSJYQYD/Horizon-UI-Avatar.png"], - "artworks" : "3152", - "rating":46 - }, - { - "name": ["@venus.sys","https://scontent.fotp8-1.fna.fbcdn.net/v/t1.6435-9/202074221_101421322193072_8201469573182417214_n.png?_nc_cat=108&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=78fLje1ri2sAX-9M9k1&_nc_ht=scontent.fotp8-1.fna&oh=00_AT-yCcI9whoAZcSaGmJQK53xRa1CldCaj2q5qJlPvDvHRA&oe=626E41FF"], - "artworks" : "2907", - "rating":38 - } -] diff --git a/src/views/admin/marketplace/variables/tableDataTopCreators.ts b/src/views/admin/marketplace/variables/tableDataTopCreators.ts new file mode 100644 index 0000000..076b67b --- /dev/null +++ b/src/views/admin/marketplace/variables/tableDataTopCreators.ts @@ -0,0 +1,45 @@ +type RowObj = { + name: string[]; + artworks: number; + rating: number; +}; + +const tableColumnsTopCreators: RowObj[] = [ + { + name: ["@maddison_c21","https://images.unsplash.com/photo-1506863530036-1efeddceb993?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2244&q=80"], + artworks : 9821, + rating:97 + }, + { + name: ["@karl.will02","https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1780&q=80"], + artworks : 7032, + rating:87 + }, + { + name: ["@andreea.1z","https://images.unsplash.com/photo-1573766064535-6d5d4e62bf9d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1315&q=80"], + artworks : 5204, + rating:82 + }, + { + name: ["@abraham47.y","https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1780&q=80"], + artworks : 4309, + rating:68 + }, + { + name: ["@simmmple.web","https://i.ibb.co/7p0d1Cd/Frame-24.png"], + artworks : 3871, + rating:55 + }, + { + name: ["@horizon.ui","https://i.ibb.co/NSJYQYD/Horizon-UI-Avatar.png"], + artworks : 3152, + rating:46 + }, + { + name: ["@venus.sys","https://scontent.fotp8-1.fna.fbcdn.net/v/t1.6435-9/202074221_101421322193072_8201469573182417214_n.png?_nc_cat=108&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=78fLje1ri2sAX-9M9k1&_nc_ht=scontent.fotp8-1.fna&oh=00_AT-yCcI9whoAZcSaGmJQK53xRa1CldCaj2q5qJlPvDvHRA&oe=626E41FF"], + artworks : 2907, + rating:38 + } +]; + +export default tableColumnsTopCreators; diff --git a/src/views/admin/profile/components/Project.tsx b/src/views/admin/profile/components/Project.tsx index fd9a082..e6f6f4a 100644 --- a/src/views/admin/profile/components/Project.tsx +++ b/src/views/admin/profile/components/Project.tsx @@ -5,62 +5,71 @@ import { Icon, Link, Text, - useColorModeValue -} from '@chakra-ui/react' + useColorModeValue, +} from '@chakra-ui/react'; // Custom components -import Card from 'components/card/Card' -import { Image } from 'components/image/Image' +import Card from 'components/card/Card'; +import { Image } from 'components/image/Image'; // Assets -import { MdEdit } from 'react-icons/md' +import { MdEdit } from 'react-icons/md'; -export default function Project (props: { - title: string - ranking: number | string - link: string - image: string - [x: string]: any +export default function Project(props: { + title: string; + ranking: number | string; + link: string; + image: string; + [x: string]: any; }) { - const { title, ranking, link, image, ...rest } = props + const { title, ranking, link, image, ...rest } = props; // Chakra Color Mode - const textColorPrimary = useColorModeValue('secondaryGray.900', 'white') - const textColorSecondary = 'gray.400' - const brandColor = useColorModeValue('brand.500', 'white') - const bg = useColorModeValue('white', 'navy.700') + const textColorPrimary = useColorModeValue('secondaryGray.900', 'white'); + const textColorSecondary = 'gray.400'; + const brandColor = useColorModeValue('brand.500', 'white'); + const bg = useColorModeValue('white', 'navy.700'); return ( - - - + + + {title} - - Project #{ranking} •{' '} - + + + Project #{ranking} •{' '} + + See project details - + - + - ) + ); } diff --git a/src/views/admin/rtl/components/CheckTable.tsx b/src/views/admin/rtl/components/CheckTable.tsx index 921d2e7..8bbd32a 100644 --- a/src/views/admin/rtl/components/CheckTable.tsx +++ b/src/views/admin/rtl/components/CheckTable.tsx @@ -1,160 +1,180 @@ +import { Flex, Box, Table, Checkbox, Tbody, Td, Text, Th, Thead, Tr, useColorModeValue } from '@chakra-ui/react'; +import * as React from 'react'; + import { - Flex, - Table, - Checkbox, - Tbody, - Td, - Text, - Th, - Thead, - Tr, - useColorModeValue -} from '@chakra-ui/react' -import { useMemo } from 'react' -import { - useGlobalFilter, - usePagination, - useSortBy, - useTable -} from 'react-table' + createColumnHelper, + flexRender, + getCoreRowModel, + getSortedRowModel, + SortingState, + useReactTable +} from '@tanstack/react-table'; // Custom components -import Card from 'components/card/Card' -import Menu from 'components/menu/MainMenu' -import { TableProps } from 'views/admin/default/variables/columnsData' -export default function CheckTable (props: TableProps) { - const { columnsData, tableData } = props - - const columns = useMemo(() => columnsData, [columnsData]) - const data = useMemo(() => tableData, [tableData]) - - let tableInstance = useTable( - { - columns, - data - }, - useGlobalFilter, - useSortBy, - usePagination - ) +import Card from 'components/card/Card'; +import Menu from 'components/menu/MainMenu'; - const { - getTableProps, - getTableBodyProps, - headerGroups, - page, - prepareRow, - initialState - } = tableInstance - initialState.pageSize = 11 +type RowObj = { + name: [string, boolean]; + progress: string; + quantity: number; + date: string; + info: boolean; +}; + +const columnHelper = createColumnHelper(); - const textColor = useColorModeValue('secondaryGray.900', 'white') - const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100') - return ( - - - - Check Table - - - - - - {headerGroups.map((headerGroup, index) => ( - - {headerGroup.headers.map((column, index) => ( - - ))} - - ))} - - - {page.map((row, index) => { - prepareRow(row) - return ( - - {row.cells.map((cell, index) => { - let data - if (cell.column.Header === 'NAME') { - data = ( - - - - {cell.value[0]} - - - ) - } else if (cell.column.Header === 'PROGRESS') { - data = ( - - - {cell.value}% - - - ) - } else if (cell.column.Header === 'QUANTITY') { - data = ( - - {cell.value} - - ) - } else if (cell.column.Header === 'DATE') { - data = ( - - {cell.value} - - ) - } - return ( - - ) - })} - - ) - })} - -
- - {column.render('Header')} - -
- {data} -
- - ) -} +// const columns = columnsDataCheck; +export default function CheckTable(props: { tableData: any }) { + const { tableData } = props; + const [ sorting, setSorting ] = React.useState([]); + const textColor = useColorModeValue('secondaryGray.900', 'white'); + const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100'); + let defaultData= tableData; + const columns = [ + columnHelper.accessor('name', { + id: 'name', + header: () => ( + + NAME + + ), + cell: (info: any) => ( + + + + {info.getValue()[0]} + + + ) + }), + columnHelper.accessor('progress', { + id: 'progress', + header: () => ( + + PROGRESS + + ), + cell: (info) => ( + + {info.getValue()} + + ) + }), + columnHelper.accessor('quantity', { + id: 'quantity', + header: () => ( + + QUANTITY + + ), + cell: (info) => ( + + {info.getValue()} + + ) + }), + columnHelper.accessor('date', { + id: 'date', + header: () => ( + + DATE + + ), + cell: (info) => ( + + {info.getValue()} + + ) + }) + ]; + const [ data, setData ] = React.useState(() => [ ...defaultData ]); + const table = useReactTable({ + data, + columns, + state: { + sorting + }, + onSortingChange: setSorting, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + debugTable: true + }); + return ( + + + + Check Table + + + + + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + ); + })} + + ))} + + + {table.getRowModel().rows.slice(0, 5).map((row) => { + return ( + + {row.getVisibleCells().map((cell) => { + return ( + + ); + })} + + ); + })} + +
+ + {flexRender(header.column.columnDef.header, header.getContext())}{{ + asc: '', + desc: '', + }[header.column.getIsSorted() as string] ?? null} + +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+ + + ); +} \ No newline at end of file diff --git a/src/views/admin/rtl/components/ComplexTable.tsx b/src/views/admin/rtl/components/ComplexTable.tsx index e3824ff..ff6eb4e 100644 --- a/src/views/admin/rtl/components/ComplexTable.tsx +++ b/src/views/admin/rtl/components/ComplexTable.tsx @@ -1,184 +1,206 @@ +import { Box, Flex, Icon, Progress, Table, Tbody, Td, Text, Th, Thead, Tr, useColorModeValue } from '@chakra-ui/react'; import { - Flex, - Table, - Progress, - Icon, - Tbody, - Td, - Text, - Th, - Thead, - Tr, - useColorModeValue -} from '@chakra-ui/react' -import { useMemo } from 'react' -import { - useGlobalFilter, - usePagination, - useSortBy, - useTable -} from 'react-table' - + createColumnHelper, + flexRender, + getCoreRowModel, + getSortedRowModel, + SortingState, + useReactTable +} from '@tanstack/react-table'; // Custom components -import Card from 'components/card/Card' -import Menu from 'components/menu/MainMenu' - +import Card from 'components/card/Card'; +import Menu from 'components/menu/MainMenu'; +import * as React from 'react'; // Assets -import { MdCheckCircle, MdCancel, MdOutlineError } from 'react-icons/md' -import { TableProps } from 'views/admin/default/variables/columnsData' +import { MdCancel, MdCheckCircle, MdOutlineError } from 'react-icons/md'; -export default function CheckTable (props: TableProps) { - const { columnsData, tableData } = props - const columns = useMemo(() => columnsData, [columnsData]) - const data = useMemo(() => tableData, [tableData]) - let tableInstance = useTable( - { - columns, - data - }, - useGlobalFilter, - useSortBy, - usePagination - ) +type RowObj = { + name: string; + status: string; + date: string; + progress: number; +}; - const { - getTableProps, - getTableBodyProps, - headerGroups, - page, - prepareRow, - initialState - } = tableInstance - initialState.pageSize = 5 +const columnHelper = createColumnHelper(); - const textColor = useColorModeValue('secondaryGray.900', 'white') - const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100') - return ( - - - - Complex Table - - - - - - {headerGroups.map((headerGroup, index) => ( - - {headerGroup.headers.map((column, index) => ( - - ))} - - ))} - - - {page.map((row, index) => { - prepareRow(row) - return ( - - {row.cells.map((cell, index) => { - let data - if (cell.column.Header === 'NAME') { - data = ( - - {cell.value} - - ) - } else if (cell.column.Header === 'STATUS') { - data = ( - - - - {cell.value} - - - ) - } else if (cell.column.Header === 'DATE') { - data = ( - - {cell.value} - - ) - } else if (cell.column.Header === 'PROGRESS') { - data = ( - - - - ) - } - return ( - - ) - })} - - ) - })} - -
- - {column.render('Header')} - -
- {data} -
- - ) +// const columns = columnsDataCheck; +export default function ComplexTable(props: { tableData: any }) { + const { tableData } = props; + const [ sorting, setSorting ] = React.useState([]); + const textColor = useColorModeValue('secondaryGray.900', 'white'); + const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100'); + let defaultData = tableData; + const columns = [ + columnHelper.accessor('name', { + id: 'name', + header: () => ( + + NAME + + ), + cell: (info: any) => ( + + + {info.getValue()} + + + ) + }), + columnHelper.accessor('status', { + id: 'status', + header: () => ( + + STATUS + + ), + cell: (info) => ( + + + + {info.getValue()} + + + ) + }), + columnHelper.accessor('date', { + id: 'date', + header: () => ( + + DATE + + ), + cell: (info) => ( + + {info.getValue()} + + ) + }), + columnHelper.accessor('progress', { + id: 'progress', + header: () => ( + + PROGRESS + + ), + cell: (info) => ( + + + + ) + }) + ]; + const [ data, setData ] = React.useState(() => [ ...defaultData ]); + const table = useReactTable({ + data, + columns, + state: { + sorting + }, + onSortingChange: setSorting, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + debugTable: true + }); + return ( + + + + Complex Table + + + + + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + ); + })} + + ))} + + + {table.getRowModel().rows.slice(0, 5).map((row) => { + return ( + + {row.getVisibleCells().map((cell) => { + return ( + + ); + })} + + ); + })} + +
+ + {flexRender(header.column.columnDef.header, header.getContext())}{{ + asc: '', + desc: '', + }[header.column.getIsSorted() as string] ?? null} + +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+ + + ); } + \ No newline at end of file diff --git a/src/views/admin/rtl/index.tsx b/src/views/admin/rtl/index.tsx index 1b587d4..cd04cd1 100644 --- a/src/views/admin/rtl/index.tsx +++ b/src/views/admin/rtl/index.tsx @@ -29,150 +29,139 @@ import { Icon, Select, SimpleGrid, - useColorModeValue -} from '@chakra-ui/react' + useColorModeValue, +} from '@chakra-ui/react'; // Assets -import Usa from 'img/dashboards/usa.png' +import Usa from 'img/dashboards/usa.png'; // Custom components -import MiniCalendar from 'components/calendar/MiniCalendar' -import MiniStatistics from 'components/card/MiniStatistics' -import IconBox from 'components/icons/IconBox' -import React from 'react' +import MiniCalendar from 'components/calendar/MiniCalendar'; +import MiniStatistics from 'components/card/MiniStatistics'; +import IconBox from 'components/icons/IconBox'; +import React from 'react'; import { MdAddTask, MdAttachMoney, MdBarChart, - MdFileCopy -} from 'react-icons/md' -import CheckTable from 'views/admin/default/components/CheckTable' -import ComplexTable from 'views/admin/default/components/ComplexTable' -import DailyTraffic from 'views/admin/default/components/DailyTraffic' -import PieCard from 'views/admin/default/components/PieCard' -import Tasks from 'views/admin/default/components/Tasks' -import TotalSpent from 'views/admin/default/components/TotalSpent' -import WeeklyRevenue from 'views/admin/default/components/WeeklyRevenue' -import { - columnsDataCheck, - columnsDataComplex, - TableData -} from 'views/admin/default/variables/columnsData' -import tableDataCheck from 'views/admin/default/variables/tableDataCheck.json' -import tableDataComplex from 'views/admin/default/variables/tableDataComplex.json' + MdFileCopy, +} from 'react-icons/md'; +import CheckTable from 'views/admin/default/components/CheckTable'; +import ComplexTable from 'views/admin/default/components/ComplexTable'; +import DailyTraffic from 'views/admin/default/components/DailyTraffic'; +import PieCard from 'views/admin/default/components/PieCard'; +import Tasks from 'views/admin/default/components/Tasks'; +import TotalSpent from 'views/admin/default/components/TotalSpent'; +import WeeklyRevenue from 'views/admin/default/components/WeeklyRevenue'; +import tableDataCheck from 'views/admin/default/variables/tableDataCheck'; +import tableDataComplex from 'views/admin/default/variables/tableDataComplex'; -export default function UserReports () { +export default function UserReports() { // Chakra Color Mode - const brandColor = useColorModeValue('brand.500', 'white') - const boxBg = useColorModeValue('secondaryGray.300', 'whiteAlpha.100') + const brandColor = useColorModeValue('brand.500', 'white'); + const boxBg = useColorModeValue('secondaryGray.300', 'whiteAlpha.100'); return ( + } /> } - name='Earnings' - value='$350.4' + name="Earnings" + value="$350.4" /> + } /> } - name='Spend this month' - value='$642.39' + name="Spend this month" + value="$642.39" /> - + - + + } - name='Your balance' - value='$1,000' + name="Your balance" + value="$1,000" /> } + w="56px" + h="56px" + bg="linear-gradient(90deg, #4481EB 0%, #04BEFE 100%)" + icon={} /> } - name='New Tasks' - value='154' + name="New Tasks" + value="154" /> + } /> } - name='Total Projects' - value='2935' + name="Total Projects" + value="2935" /> - + - - - + + + - - - + + + - + - ) + ); } diff --git a/src/views/admin/rtl/variables/columnsData.ts b/src/views/admin/rtl/variables/columnsData.ts deleted file mode 100644 index 9e46977..0000000 --- a/src/views/admin/rtl/variables/columnsData.ts +++ /dev/null @@ -1,36 +0,0 @@ -export const columnsDataCheck = [ - { - Header: "NAME", - accessor: "name", - }, - { - Header: "PROGRESS", - accessor: "progress", - }, - { - Header: "QUANTITY", - accessor: "quantity", - }, - { - Header: "DATE", - accessor: "date", - }, -]; -export const columnsDataComplex = [ - { - Header: "NAME", - accessor: "name", - }, - { - Header: "STATUS", - accessor: "status", - }, - { - Header: "DATE", - accessor: "date", - }, - { - Header: "PROGRESS", - accessor: "progress", - }, -]; diff --git a/src/views/admin/rtl/variables/tableDataCheck.json b/src/views/admin/rtl/variables/tableDataCheck.json deleted file mode 100644 index f4af1d8..0000000 --- a/src/views/admin/rtl/variables/tableDataCheck.json +++ /dev/null @@ -1,31 +0,0 @@ -[{ - "name":["Horizon UI PRO",false], - "quantity": 2458, - "date": "12 Jan 2021", - "progress": 17.5 -}, -{ - "name":["Horizon UI Free",true], - "quantity": 1485, - "date": "21 Feb 2021", - "progress": 10.8 -}, -{ - "name":["Weekly Update",true], - "quantity": 1024, - "date": "13 Mar 2021", - "progress": 21.3 -}, -{ - "name":["Venus 3D Asset",true], - "quantity": 858, - "date": "24 Jan 2021", - "progress": 31.5 -}, -{ - "name":["Marketplace",false], - "quantity": 258, - "date": "24 Oct 2022", - "progress": 12.2 -} -] diff --git a/src/views/admin/rtl/variables/tableDataCheck.ts b/src/views/admin/rtl/variables/tableDataCheck.ts new file mode 100644 index 0000000..0dd1ce5 --- /dev/null +++ b/src/views/admin/rtl/variables/tableDataCheck.ts @@ -0,0 +1,47 @@ +type RowObj = { + name: [string, boolean]; + progress: string; + quantity: number; + date: string; + info: boolean; +}; + +const tableDataCheck: RowObj[] = [ + { + name: [ 'Horizon UI PRO', true ], + quantity: 2458, + progress: '17.5%', + date: '12 Jan 2021', + info: true + }, + { + name: [ 'Horizon UI Free', true ], + quantity: 1485, + progress: '10.8%', + date: '21 Feb 2021', + info: true + }, + { + name: [ 'Weekly Update', true ], + quantity: 1024, + progress: '21.3%', + date: '13 Mar 2021', + info: true + }, + { + name: [ 'Venus 3D Asset', true ], + quantity: 858, + progress: '31.5%', + date: '24 Jan 2021', + info: true + }, + { + name: [ 'Marketplace', true ], + quantity: 258, + progress: '12.2%', + date: '24 Oct 2022', + info: true + } +]; + +export default tableDataCheck; diff --git a/src/views/admin/rtl/variables/tableDataComplex.json b/src/views/admin/rtl/variables/tableDataComplex.json deleted file mode 100644 index 83f614b..0000000 --- a/src/views/admin/rtl/variables/tableDataComplex.json +++ /dev/null @@ -1,26 +0,0 @@ -[ - { - "name":"Horizon UI PRO", - "status": "Approved", - "date": "18 Apr 2022", - "progress": 75.5 - }, - { - "name":"Horizon UI Free", - "status": "Disable", - "date": "18 Apr 2022", - "progress": 25.5 - }, - { - "name":"Marketplace", - "status": "Error", - "date": "20 May 2021", - "progress": 90 - }, - { - "name":"Weekly Updates", - "status": "Approved", - "date": "12 Jul 2021", - "progress": 50.5 - } -] diff --git a/src/views/admin/rtl/variables/tableDataComplex.ts b/src/views/admin/rtl/variables/tableDataComplex.ts new file mode 100644 index 0000000..74fb6e5 --- /dev/null +++ b/src/views/admin/rtl/variables/tableDataComplex.ts @@ -0,0 +1,34 @@ +type RowObj = { + name: string; + status: string; + date: string; + progress: number; +}; + +const tableDataComplex: RowObj[] = [ + { + name: 'Horizon UI PRO', + progress: 75.5, + status: 'Approved', + date: '12 Jan 2021' + }, + { + name: 'Horizon UI Free', + progress: 25.5, + status: 'Disable', + date: '21 Feb 2021' + }, + { + name: 'Weekly Update', + progress: 90, + status: 'Error', + date: '13 Mar 2021' + }, + { + name: 'Marketplace', + progress: 50.5, + status: 'Approved', + date: '24 Oct 2022' + } +]; +export default tableDataComplex; From 3fa5c8bcc7234c43bf36991585e547ddc5d698b7 Mon Sep 17 00:00:00 2001 From: simmmpleweb Date: Tue, 12 Sep 2023 00:35:08 +0300 Subject: [PATCH 05/14] aUTH + Removed unused react-table --- package.json | 1 - src/components/footer/FooterAdmin.tsx | 18 ++-- src/components/footer/FooterAuth.tsx | 18 ++-- src/layouts/auth/Default.tsx | 140 ++++++++++++++------------ src/pages/auth/sign-in.tsx | 10 +- src/types/react-table-config.d.ts | 120 ---------------------- 6 files changed, 105 insertions(+), 202 deletions(-) delete mode 100644 src/types/react-table-config.d.ts diff --git a/package.json b/package.json index c7441c1..aa9d079 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,6 @@ "react-icons": "^4.3.1", "react-is": "^18.0.0", "react-no-ssr": "^1.1.0", - "react-table": "^7.8.0", "stylis": "^4.1.1", "stylis-plugin-rtl": "2.0.2", "typescript": "^4.7.4", diff --git a/src/components/footer/FooterAdmin.tsx b/src/components/footer/FooterAdmin.tsx index dd2c6d3..33ffd2b 100644 --- a/src/components/footer/FooterAdmin.tsx +++ b/src/components/footer/FooterAdmin.tsx @@ -36,12 +36,18 @@ export default function Footer() { > {' '} © {new Date().getFullYear()} - {/* - Horizon UI. All Rights Reserved. Made with love by - - Simmmple! - - */} + + Horizon UI. All Rights Reserved. Made with love by + + Simmmple! + + {' '} © {new Date().getFullYear()} - {/* - Horizon UI. All Rights Reserved. Made with love by - - Simmmple! - - */} + + Horizon UI. All Rights Reserved. Made with love by + + Simmmple! + + - - - - - - - Back to Simmmple - - - - - {children} - - - -