├── src ├── assets │ ├── css │ │ ├── Contact.css │ │ ├── App.css │ │ └── ExplanationScroll.css │ └── img │ │ ├── auth │ │ ├── auth.png │ │ ├── banner.png │ │ └── dolrr_logo.svg │ │ ├── nfts │ │ ├── Nft1.png │ │ ├── Nft2.png │ │ ├── Nft3.png │ │ ├── Nft4.png │ │ ├── Nft5.png │ │ ├── Nft6.png │ │ └── NftBanner1.png │ │ ├── avatars │ │ ├── avatar1.png │ │ ├── avatar2.png │ │ ├── avatar3.png │ │ ├── avatar4.png │ │ ├── avatar5.png │ │ ├── avatar6.png │ │ ├── avatar7.png │ │ ├── avatar8.png │ │ ├── avatar9.png │ │ ├── avatar10.png │ │ └── avatarSimmmple.png │ │ ├── dashboards │ │ ├── usa.png │ │ ├── Debit.png │ │ ├── fakeGraph.png │ │ ├── balanceImg.png │ │ └── elipse-light.png │ │ ├── layout │ │ ├── Navbar.png │ │ └── logoWhite.png │ │ ├── profile │ │ ├── Project1.png │ │ ├── Project2.png │ │ └── Project3.png │ │ └── explanationDailogue │ │ └── flow.jpg ├── types │ ├── stylis.d.ts │ ├── images.d.ts │ ├── hui-types.d.ts │ └── react-table-config.d.ts ├── contexts │ └── SidebarContext.js ├── utils │ └── user.ts ├── theme │ ├── foundations │ │ └── breakpoints.ts │ ├── components │ │ ├── slider.ts │ │ ├── link.ts │ │ ├── switch.ts │ │ ├── badge.ts │ │ ├── progress.ts │ │ ├── textarea.ts │ │ └── button.ts │ ├── additions │ │ └── card │ │ │ └── card.ts │ ├── theme.tsx │ └── styles.ts ├── views │ ├── admin │ │ ├── marketplace │ │ │ ├── variables │ │ │ │ ├── tableColumnsTopCreators.js │ │ │ │ └── tableDataTopCreators.json │ │ │ └── components │ │ │ │ ├── Banner.tsx │ │ │ │ └── HistoryItem.tsx │ │ ├── default │ │ │ ├── variables │ │ │ │ ├── tableDataComplex.json │ │ │ │ ├── tableDataCheck.json │ │ │ │ └── columnsData.js │ │ │ ├── components │ │ │ │ ├── UserActivity.tsx │ │ │ │ ├── DailyTraffic.tsx │ │ │ │ ├── WeeklyRevenue.tsx │ │ │ │ ├── PieCard.tsx │ │ │ │ ├── Tasks.tsx │ │ │ │ └── TotalSpent.tsx │ │ │ └── index.tsx │ │ ├── dataTables │ │ │ ├── variables │ │ │ │ ├── tableDataColumns.json │ │ │ │ ├── tableDataComplex.json │ │ │ │ ├── columnsData.js │ │ │ │ ├── tableDataDevelopment.json │ │ │ │ └── tableDataCheck.json │ │ │ ├── index.jsx │ │ │ └── components │ │ │ │ ├── ColumnsTable.tsx │ │ │ │ └── CheckTable.tsx │ │ ├── rtl │ │ │ ├── variables │ │ │ │ ├── tableDataComplex.json │ │ │ │ ├── columnsData.js │ │ │ │ └── tableDataCheck.json │ │ │ └── components │ │ │ │ ├── UserActivity.tsx │ │ │ │ ├── DailyTraffic.tsx │ │ │ │ ├── WeeklyRevenue.tsx │ │ │ │ ├── PieCard.tsx │ │ │ │ ├── Tasks.tsx │ │ │ │ ├── TotalSpent.tsx │ │ │ │ └── CheckTable.tsx │ │ └── profile │ │ │ ├── components │ │ │ ├── Information.tsx │ │ │ ├── Dropzone.tsx │ │ │ ├── Project.tsx │ │ │ ├── Projects.tsx │ │ │ ├── General.tsx │ │ │ ├── Storage.tsx │ │ │ ├── Notifications.tsx │ │ │ ├── Banner.tsx │ │ │ └── Upload.tsx │ │ │ └── index.tsx │ └── auth │ │ ├── signUp │ │ └── index.tsx │ │ └── signIn │ │ └── index.tsx ├── components │ ├── icons │ │ └── IconBox.tsx │ ├── card │ │ ├── Card.tsx │ │ ├── MiniStatistics.tsx │ │ ├── Member.tsx │ │ ├── Mastercard.tsx │ │ └── NFT.tsx │ ├── profile │ │ ├── ProfileButton.jsx │ │ └── ProfileButtonMenu.jsx │ ├── separator │ │ └── Separator.tsx │ ├── rtlProvider │ │ └── RtlProvider.tsx │ ├── sidebar │ │ ├── components │ │ │ ├── Brand.tsx │ │ │ ├── Content.tsx │ │ │ ├── SidebarCard.tsx │ │ │ └── Links.tsx │ │ └── Sidebar.tsx │ ├── scrollbar │ │ └── Scrollbar.tsx │ ├── charts │ │ ├── BarChart.tsx │ │ ├── PieChart.tsx │ │ ├── LineChart.tsx │ │ └── LineAreaChart.tsx │ ├── footer │ │ ├── FooterAdmin.tsx │ │ └── FooterAuth.tsx │ ├── fixedPlugin │ │ └── FixedPlugin.tsx │ ├── calendar │ │ └── MiniCalendar.tsx │ ├── fields │ │ ├── InputField.tsx │ │ └── SwitchField.tsx │ ├── menu │ │ ├── ItemContent.tsx │ │ ├── TransparentMenu.tsx │ │ └── MainMenu.tsx │ ├── navbar │ │ ├── searchBar │ │ │ └── SearchBar.tsx │ │ ├── NavbarRTL.tsx │ │ └── NavbarAdmin.tsx │ ├── adminExperience │ │ ├── index.tsx │ │ └── Sdk.tsx │ ├── loginExperience │ │ ├── Api.tsx │ │ ├── LoginExperience.tsx │ │ └── Flows.tsx │ └── welcomeModal │ │ └── WelcomeModal.tsx ├── routes.tsx ├── layouts │ ├── auth │ │ ├── Default.tsx │ │ └── index.tsx │ ├── rtl │ │ └── index.tsx │ └── admin │ │ └── index.tsx └── index.tsx ├── public ├── robots.txt ├── favicon.ico ├── manifest.json └── index.html ├── .gitignore ├── renovate.json ├── CHANGELOG.md ├── tsconfig.json ├── LICENSE ├── README.md └── package.json /src/assets/css/Contact.css: -------------------------------------------------------------------------------- 1 | form { 2 | width: 100%; 3 | } -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-Agent: * 2 | Disallow: 3 | Sitemap: https://simmmple.com -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/img/auth/auth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/auth/auth.png -------------------------------------------------------------------------------- /src/assets/img/nfts/Nft1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/nfts/Nft1.png -------------------------------------------------------------------------------- /src/assets/img/nfts/Nft2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/nfts/Nft2.png -------------------------------------------------------------------------------- /src/assets/img/nfts/Nft3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/nfts/Nft3.png -------------------------------------------------------------------------------- /src/assets/img/nfts/Nft4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/nfts/Nft4.png -------------------------------------------------------------------------------- /src/assets/img/nfts/Nft5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/nfts/Nft5.png -------------------------------------------------------------------------------- /src/assets/img/nfts/Nft6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/nfts/Nft6.png -------------------------------------------------------------------------------- /src/types/stylis.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'stylis-plugin-rtl' { 2 | const noTypesYet: any; 3 | export default noTypesYet; 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/img/auth/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/auth/banner.png -------------------------------------------------------------------------------- /src/contexts/SidebarContext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | export const SidebarContext = createContext(); 4 | -------------------------------------------------------------------------------- /src/utils/user.ts: -------------------------------------------------------------------------------- 1 | export const getDisplayName = (user: any): string => { 2 | return user?.name || user?.email || ""; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/avatars/avatar1.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/avatars/avatar2.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/avatars/avatar3.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/avatars/avatar4.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/avatars/avatar5.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/avatars/avatar6.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/avatars/avatar7.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/avatars/avatar8.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/avatars/avatar9.png -------------------------------------------------------------------------------- /src/assets/img/dashboards/usa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/dashboards/usa.png -------------------------------------------------------------------------------- /src/assets/img/layout/Navbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/layout/Navbar.png -------------------------------------------------------------------------------- /src/assets/img/nfts/NftBanner1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/nfts/NftBanner1.png -------------------------------------------------------------------------------- /src/types/images.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg'; 2 | declare module '*.png'; 3 | declare module '*.jpg'; 4 | declare module '*.jpeg'; 5 | -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/avatars/avatar10.png -------------------------------------------------------------------------------- /src/assets/img/dashboards/Debit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/dashboards/Debit.png -------------------------------------------------------------------------------- /src/assets/img/layout/logoWhite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/layout/logoWhite.png -------------------------------------------------------------------------------- /src/assets/img/profile/Project1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/profile/Project1.png -------------------------------------------------------------------------------- /src/assets/img/profile/Project2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/profile/Project2.png -------------------------------------------------------------------------------- /src/assets/img/profile/Project3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/profile/Project3.png -------------------------------------------------------------------------------- /src/assets/img/dashboards/fakeGraph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/dashboards/fakeGraph.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatarSimmmple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/avatars/avatarSimmmple.png -------------------------------------------------------------------------------- /src/assets/img/dashboards/balanceImg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/dashboards/balanceImg.png -------------------------------------------------------------------------------- /src/assets/img/dashboards/elipse-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/dashboards/elipse-light.png -------------------------------------------------------------------------------- /src/assets/img/explanationDailogue/flow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/descope-sample-apps/b2b-sample-app/HEAD/src/assets/img/explanationDailogue/flow.jpg -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | server/node_modules 2 | client/node_modules 3 | /node_modules 4 | .vercel 5 | client/build 6 | .env 7 | **/.env 8 | .replit 9 | replit.nix 10 | server/dist -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "local>descope-sample-apps/renovate-config" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /src/assets/css/App.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"); 2 | body { 3 | font-family: "DM Sans", sans-serif; 4 | } 5 | 6 | option { 7 | color: black; 8 | } 9 | -------------------------------------------------------------------------------- /src/theme/foundations/breakpoints.ts: -------------------------------------------------------------------------------- 1 | import { createBreakpoints } from "@chakra-ui/theme-tools"; 2 | 3 | export const breakpoints = createBreakpoints({ 4 | sm: "320px", 5 | "2sm": "380px", 6 | md: "768px", 7 | lg: "960px", 8 | xl: "1200px", 9 | "2xl": "1600px", 10 | "3xl": "1920px", 11 | }); 12 | -------------------------------------------------------------------------------- /src/theme/components/slider.ts: -------------------------------------------------------------------------------- 1 | import { mode } from '@chakra-ui/theme-tools'; 2 | export const sliderStyles = { 3 | components: { 4 | RangeSlider: { 5 | variants: { 6 | main: (props: any) => ({ 7 | thumb: { 8 | bg: mode('brand.500', 'brand.400')(props) 9 | } 10 | }) 11 | } 12 | } 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /src/views/admin/marketplace/variables/tableColumnsTopCreators.js: -------------------------------------------------------------------------------- 1 | export const tableColumnsTopCreators = [ 2 | { 3 | Header: "Name", 4 | accessor: "name", 5 | }, 6 | { 7 | Header: "Artworks", 8 | accessor: "artworks", 9 | }, 10 | { 11 | Header: "Rating", 12 | accessor: "rating", 13 | }, 14 | ]; 15 | -------------------------------------------------------------------------------- /src/components/icons/IconBox.tsx: -------------------------------------------------------------------------------- 1 | import { Flex } from '@chakra-ui/react'; 2 | 3 | export default function IconBox(props: { icon: JSX.Element | string; [x: string]: any }) { 4 | const { icon, ...rest } = props; 5 | 6 | return ( 7 | 8 | {icon} 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "B2B-sample", 3 | "name": "B2B Sample App", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/types/hui-types.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | declare global { 4 | /** 5 | * Now declare things that go in the global namespace, 6 | * or augment existing declarations in the global namespace. 7 | */ 8 | interface RoutesType { 9 | name: string; 10 | layout: string; 11 | component: () => JSX.Element; 12 | icon: JSX.Element | string; 13 | path: string; 14 | secondary?: boolean; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [1.1.0] 2022-09-21 4 | ### React Tables V8 5 | Now Horizon UI Typescript comes in V8 version for React Tables. You can clone the repository [here](https://github.com/horizon-ui/horizon-ui-chakra-ts/tree/feature/react-table-v8) ! 6 | 7 | ## [1.0.1] 2022-09-7 8 | ### Bug Fixing 9 | Mapbox bug when using `yarn` fixed. 10 | 11 | ## [1.0.0] 2022-08-31 12 | ### Official Release 13 | - Added TypeScript! 14 | -------------------------------------------------------------------------------- /src/assets/css/ExplanationScroll.css: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | width: 8px; 3 | height: 6px; 4 | } 5 | 6 | /* Track */ 7 | ::-webkit-scrollbar-track { 8 | box-shadow: inset 0 0 5px grey; 9 | border-radius: 10px; 10 | } 11 | 12 | /* Handle */ 13 | ::-webkit-scrollbar-thumb { 14 | background: #0f0a2c; 15 | border-radius: 10px; 16 | } 17 | 18 | /* Handle on hover */ 19 | ::-webkit-scrollbar-thumb:hover { 20 | background: #0f0a2cab; 21 | } -------------------------------------------------------------------------------- /src/theme/components/link.ts: -------------------------------------------------------------------------------- 1 | export const linkStyles = { 2 | components: { 3 | Link: { 4 | baseStyle: { 5 | textDecoration: 'none', 6 | boxShadow: 'none', 7 | _focus: { 8 | boxShadow: 'none' 9 | }, 10 | _active: { 11 | boxShadow: 'none' 12 | }, 13 | _hover: { 14 | textDecoration: 'none', 15 | border: 'none' 16 | } 17 | }, 18 | _hover: { 19 | textDecoration: 'none', 20 | border: 'none' 21 | } 22 | } 23 | } 24 | }; 25 | -------------------------------------------------------------------------------- /src/components/card/Card.tsx: -------------------------------------------------------------------------------- 1 | // import { Box, useStyleConfig} from '@chakra-ui/react'; 2 | 3 | import { useStyleConfig, chakra, forwardRef } from '@chakra-ui/react'; 4 | import { CustomCardProps } from 'theme/theme'; 5 | const CustomCard = forwardRef((props, ref) => { 6 | const { size, variant, ...rest } = props; 7 | const styles = useStyleConfig('Card', { size, variant }); 8 | 9 | return ; 10 | }); 11 | 12 | export default CustomCard; 13 | -------------------------------------------------------------------------------- /src/theme/additions/card/card.ts: -------------------------------------------------------------------------------- 1 | import { mode } from '@chakra-ui/theme-tools'; 2 | const Card = { 3 | baseStyle: (props: any) => ({ 4 | p: '20px', 5 | display: 'flex', 6 | flexDirection: 'column', 7 | width: '100%', 8 | position: 'relative', 9 | borderRadius: '20px', 10 | minWidth: '0px', 11 | wordWrap: 'break-word', 12 | bg: mode('#ffffff', 'navy.800')(props), 13 | backgroundClip: 'border-box' 14 | }) 15 | }; 16 | 17 | export const CardComponent = { 18 | components: { 19 | Card 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/profile/ProfileButton.jsx: -------------------------------------------------------------------------------- 1 | import { Avatar, MenuButton } from "@chakra-ui/react"; 2 | import { useUser } from "@descope/react-sdk"; 3 | import { getDisplayName } from "../../utils/user"; 4 | 5 | export default function ProfileButton() { 6 | const { user } = useUser(); 7 | return ( 8 | 9 | 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /src/components/separator/Separator.tsx: -------------------------------------------------------------------------------- 1 | import { Flex } from '@chakra-ui/react'; 2 | import React from 'react'; 3 | 4 | const HSeparator = (props: { variant?: string; [x: string]: any }) => { 5 | const { variant, ...rest } = props; 6 | return ; 7 | }; 8 | 9 | const VSeparator = (props: { variant?: string; [x: string]: any }) => { 10 | const { variant, ...rest } = props; 11 | return ; 12 | }; 13 | 14 | export { HSeparator, VSeparator }; 15 | -------------------------------------------------------------------------------- /src/views/admin/default/variables/tableDataComplex.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name":"Descope", 4 | "status": "Signed", 5 | "date": "18 Apr 2022", 6 | "progress": 75.5 7 | }, 8 | { 9 | "name":"Demisto", 10 | "status": "At Risk", 11 | "date": "18 Apr 2022", 12 | "progress": 25.5 13 | }, 14 | { 15 | "name":"Sentrigo", 16 | "status": "Gone Cold", 17 | "date": "20 May 2021", 18 | "progress": 90 19 | }, 20 | { 21 | "name":"Solidcore", 22 | "status": "Signed", 23 | "date": "12 Jul 2021", 24 | "progress": 50.5 25 | } 26 | ] 27 | -------------------------------------------------------------------------------- /src/views/admin/dataTables/variables/tableDataColumns.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name":"Marketplace", 4 | "quantity": 2458, 5 | "date": "12.Jan.2021", 6 | "progress": 75.5 7 | }, 8 | { 9 | "name":"Venus DB PRO", 10 | "quantity": 1485, 11 | "date": "21.Feb.2021", 12 | "progress": 35.4 13 | }, 14 | { 15 | "name":"Venus DS", 16 | "quantity": 1024, 17 | "date": "13.Mar.2021", 18 | "progress": 25 19 | }, 20 | { 21 | "name":"Venus 3D Asset", 22 | "quantity": 858, 23 | "date": "24.Jan.2021", 24 | "progress": 100 25 | } 26 | ] 27 | -------------------------------------------------------------------------------- /src/components/rtlProvider/RtlProvider.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import { CacheProvider } from '@emotion/react'; 3 | import createCache from '@emotion/cache'; 4 | import rtl from 'stylis-plugin-rtl'; 5 | // NB: A unique `key` is important for it to work! 6 | let options = { 7 | rtl: { key: 'css-ar', stylisPlugins: [ rtl ] }, 8 | ltr: { key: 'css-en' } 9 | }; 10 | export function RtlProvider({ children }: any) { 11 | const dir = document.documentElement.dir == 'ar' ? 'rtl' : 'ltr'; 12 | const cache = createCache(options[dir]); 13 | return ; 14 | } 15 | -------------------------------------------------------------------------------- /src/views/admin/dataTables/variables/tableDataComplex.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name":"Marketplace", 4 | "status": "Approved", 5 | "date": "24.Jan.2021", 6 | "progress": 75.5 7 | }, 8 | { 9 | "name":"Marketplace", 10 | "status": "Disable", 11 | "date": "30.Dec.2021", 12 | "progress": 25.5 13 | }, 14 | { 15 | "name":"Marketplace", 16 | "status": "Error", 17 | "date": "20.May.2021", 18 | "progress": 90 19 | }, 20 | { 21 | "name":"Marketplace", 22 | "status": "Approved", 23 | "date": "12.Jul.2021", 24 | "progress": 50.5 25 | } 26 | ] 27 | -------------------------------------------------------------------------------- /src/views/admin/rtl/variables/tableDataComplex.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name":"Horizon UI PRO", 4 | "status": "Approved", 5 | "date": "18 Apr 2022", 6 | "progress": 75.5 7 | }, 8 | { 9 | "name":"Horizon UI Free", 10 | "status": "Disable", 11 | "date": "18 Apr 2022", 12 | "progress": 25.5 13 | }, 14 | { 15 | "name":"Marketplace", 16 | "status": "Error", 17 | "date": "20 May 2021", 18 | "progress": 90 19 | }, 20 | { 21 | "name":"Weekly Updates", 22 | "status": "Approved", 23 | "date": "12 Jul 2021", 24 | "progress": 50.5 25 | } 26 | ] 27 | -------------------------------------------------------------------------------- /src/components/sidebar/components/Brand.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Flex, useColorModeValue } from '@chakra-ui/react'; 3 | 4 | // Custom components 5 | import { HorizonLogo } from 'components/icons/Icons'; 6 | import { HSeparator } from 'components/separator/Separator'; 7 | 8 | export function SidebarBrand() { 9 | // Chakra color mode 10 | let logoColor = useColorModeValue('navy.700', 'white'); 11 | 12 | return ( 13 | 14 | 15 | 16 | 17 | ); 18 | } 19 | 20 | export default SidebarBrand; 21 | -------------------------------------------------------------------------------- /src/views/admin/default/variables/tableDataCheck.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "name":["Dolrr Essential",false], 3 | "quantity": 2458, 4 | "date": "12 Jan 2021", 5 | "progress": 17.5 6 | }, 7 | { 8 | "name":["Dolrr Plus",true], 9 | "quantity": 1485, 10 | "date": "21 Feb 2021", 11 | "progress": 10.8 12 | }, 13 | { 14 | "name":["Dolrr SMB",true], 15 | "quantity": 1024, 16 | "date": "13 Mar 2021", 17 | "progress": 21.3 18 | }, 19 | { 20 | "name":["Dolrr Enterprise",true], 21 | "quantity": 858, 22 | "date": "24 Jan 2021", 23 | "progress": 31.5 24 | }, 25 | { 26 | "name":["Dolrr Marketplace",false], 27 | "quantity": 258, 28 | "date": "24 Oct 2022", 29 | "progress": 12.2 30 | } 31 | ] 32 | -------------------------------------------------------------------------------- /src/views/admin/rtl/variables/columnsData.js: -------------------------------------------------------------------------------- 1 | export const columnsDataCheck = [ 2 | { 3 | Header: "NAME", 4 | accessor: "name", 5 | }, 6 | { 7 | Header: "PROGRESS", 8 | accessor: "progress", 9 | }, 10 | { 11 | Header: "QUANTITY", 12 | accessor: "quantity", 13 | }, 14 | { 15 | Header: "DATE", 16 | accessor: "date", 17 | }, 18 | ]; 19 | export const columnsDataComplex = [ 20 | { 21 | Header: "NAME", 22 | accessor: "name", 23 | }, 24 | { 25 | Header: "STATUS", 26 | accessor: "status", 27 | }, 28 | { 29 | Header: "DATE", 30 | accessor: "date", 31 | }, 32 | { 33 | Header: "PROGRESS", 34 | accessor: "progress", 35 | }, 36 | ]; 37 | -------------------------------------------------------------------------------- /src/views/admin/rtl/variables/tableDataCheck.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "name":["Dolrr Essential",false], 3 | "quantity": 2458, 4 | "date": "12 Jan 2021", 5 | "progress": 17.5 6 | }, 7 | { 8 | "name":["Dolrr Plus",true], 9 | "quantity": 1485, 10 | "date": "21 Feb 2021", 11 | "progress": 10.8 12 | }, 13 | { 14 | "name":["Dolrr SMB",true], 15 | "quantity": 1024, 16 | "date": "13 Mar 2021", 17 | "progress": 21.3 18 | }, 19 | { 20 | "name":["Dolrr Enterprise",true], 21 | "quantity": 858, 22 | "date": "24 Jan 2021", 23 | "progress": 31.5 24 | }, 25 | { 26 | "name":["Dolrr Marketplace",false], 27 | "quantity": 258, 28 | "date": "24 Oct 2022", 29 | "progress": 12.2 30 | } 31 | ] 32 | -------------------------------------------------------------------------------- /src/views/admin/default/variables/columnsData.js: -------------------------------------------------------------------------------- 1 | export const columnsDataCheck = [ 2 | { 3 | Header: "NAME", 4 | accessor: "name", 5 | }, 6 | { 7 | Header: "PROGRESS", 8 | accessor: "progress", 9 | }, 10 | { 11 | Header: "CUSTOMERS", 12 | accessor: "quantity", 13 | }, 14 | { 15 | Header: "MOST RECENT DEAL", 16 | accessor: "date", 17 | }, 18 | ]; 19 | export const columnsDataComplex = [ 20 | { 21 | Header: "NAME", 22 | accessor: "name", 23 | }, 24 | { 25 | Header: "STATUS", 26 | accessor: "status", 27 | }, 28 | { 29 | Header: "DATE", 30 | accessor: "date", 31 | }, 32 | { 33 | Header: "PROGRESS", 34 | accessor: "progress", 35 | }, 36 | ]; 37 | -------------------------------------------------------------------------------- /src/components/sidebar/components/Content.tsx: -------------------------------------------------------------------------------- 1 | // chakra imports 2 | import { Box, Flex, Stack } from '@chakra-ui/react'; 3 | // Custom components 4 | import Brand from 'components/sidebar/components/Brand'; 5 | import Links from 'components/sidebar/components/Links'; 6 | 7 | // FUNCTIONS 8 | 9 | function SidebarContent(props: { routes: RoutesType[] }) { 10 | const { routes } = props; 11 | // SIDEBAR 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ); 22 | } 23 | 24 | export default SidebarContent; 25 | -------------------------------------------------------------------------------- /src/theme/components/switch.ts: -------------------------------------------------------------------------------- 1 | import { mode } from '@chakra-ui/theme-tools'; 2 | export const switchStyles = { 3 | components: { 4 | Switch: { 5 | baseStyle: { 6 | thumb: { 7 | fontWeight: 400, 8 | borderRadius: '50%', 9 | w: '16px', 10 | h: '16px', 11 | _checked: { transform: 'translate(20px, 0px)' } 12 | }, 13 | track: { 14 | display: 'flex', 15 | alignItems: 'center', 16 | boxSizing: 'border-box', 17 | w: '40px', 18 | h: '20px', 19 | p: '2px', 20 | ps: '2px', 21 | _focus: { 22 | boxShadow: 'none' 23 | } 24 | } 25 | }, 26 | 27 | variants: { 28 | main: (props: any) => ({ 29 | track: { 30 | bg: mode('gray.300', 'navy.700')(props) 31 | } 32 | }) 33 | } 34 | } 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /src/theme/components/badge.ts: -------------------------------------------------------------------------------- 1 | import { mode } from '@chakra-ui/theme-tools'; 2 | export const badgeStyles = { 3 | components: { 4 | Badge: { 5 | baseStyle: { 6 | borderRadius: '10px', 7 | lineHeight: '100%', 8 | padding: '7px', 9 | paddingLeft: '12px', 10 | paddingRight: '12px' 11 | }, 12 | variants: { 13 | outline: () => ({ 14 | borderRadius: '16px' 15 | }), 16 | brand: (props: any) => ({ 17 | bg: mode('brand.500', 'brand.400')(props), 18 | color: 'white', 19 | _focus: { 20 | bg: mode('brand.500', 'brand.400')(props) 21 | }, 22 | _active: { 23 | bg: mode('brand.500', 'brand.400')(props) 24 | }, 25 | _hover: { 26 | bg: mode('brand.600', 'brand.400')(props) 27 | } 28 | }) 29 | } 30 | } 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /src/views/admin/profile/components/Information.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Text, useColorModeValue } from '@chakra-ui/react'; 3 | // Custom components 4 | import Card from 'components/card/Card'; 5 | 6 | export default function Information(props: { title: string; value: number | string; [x: string]: any }) { 7 | const { title, value, ...rest } = props; 8 | // Chakra Color Mode 9 | const textColorPrimary = useColorModeValue('secondaryGray.900', 'white'); 10 | const textColorSecondary = 'gray.400'; 11 | const bg = useColorModeValue('white', 'navy.700'); 12 | return ( 13 | 14 | 15 | 16 | {title} 17 | 18 | 19 | {value} 20 | 21 | 22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "typeRoots": ["node_modules/@types", "src/types"], 4 | "target": "es2016", 5 | "lib": ["dom", "dom.iterable", "esnext", "es2015.iterable"], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": false, 11 | "forceConsistentCasingInFileNames": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "module": "esnext", 14 | "moduleResolution": "node", 15 | "resolveJsonModule": true, 16 | "isolatedModules": true, 17 | "noEmit": true, 18 | "jsx": "react-jsx", 19 | "noImplicitAny": true, 20 | "noImplicitThis": true, 21 | "strictNullChecks": false, 22 | "downlevelIteration": true, 23 | "baseUrl": "src", 24 | "paths": { 25 | "@assets/*": ["./src/assets/*"] 26 | }, 27 | }, 28 | "include": [ 29 | "**/*" ], 30 | } 31 | -------------------------------------------------------------------------------- /src/components/scrollbar/Scrollbar.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@chakra-ui/react'; 2 | 3 | export const renderTrack = ({ ...props }) => { 4 | const trackStyle = { 5 | position: 'absolute', 6 | maxWidth: '100%', 7 | width: 6, 8 | transition: 'opacity 200ms ease 0s', 9 | opacity: 0, 10 | background: 'transparent', 11 | bottom: 2, 12 | top: 2, 13 | borderRadius: 3, 14 | right: 0 15 | } as const; 16 | return
; 17 | }; 18 | export const renderThumb = ({ ...props }) => { 19 | const thumbStyle = { 20 | borderRadius: 15, 21 | background: 'rgba(222, 222, 222, .1)' 22 | } as const 23 | return
; 24 | }; 25 | export const renderView = ( ) => { 26 | const viewStyle = { 27 | marginBottom: -22 28 | }as const; 29 | return ( 30 | 31 | ); 32 | }; 33 | -------------------------------------------------------------------------------- /src/components/charts/BarChart.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Chart from 'react-apexcharts'; 3 | 4 | type ChartProps = { 5 | // using `interface` is also ok 6 | [x: string]: any; 7 | }; 8 | type ChartState = { 9 | chartData: any[]; 10 | chartOptions: any; 11 | }; 12 | 13 | class ColumnChart extends React.Component { 14 | constructor(props: { chartData: any[]; chartOptions: any }) { 15 | super(props); 16 | this.state = { 17 | chartData: [], 18 | chartOptions: {} 19 | }; 20 | } 21 | 22 | componentDidMount() { 23 | this.setState({ 24 | chartData: this.props.chartData, 25 | chartOptions: this.props.chartOptions 26 | }); 27 | } 28 | 29 | render() { 30 | return ( 31 | 38 | ); 39 | } 40 | } 41 | 42 | export default ColumnChart; 43 | -------------------------------------------------------------------------------- /src/theme/components/progress.ts: -------------------------------------------------------------------------------- 1 | import { mode } from '@chakra-ui/theme-tools'; 2 | export const progressStyles = { 3 | components: { 4 | Progress: { 5 | baseStyle: { 6 | field: { 7 | fontWeight: 400, 8 | w: '16px', 9 | h: '16px', 10 | borderRadius: '20px', 11 | _checked: { transform: 'translate(20px, 0px)' } 12 | }, 13 | track: { 14 | w: '40px', 15 | h: '20px', 16 | borderRadius: '20px', 17 | _focus: { 18 | boxShadow: 'none' 19 | } 20 | } 21 | }, 22 | 23 | variants: { 24 | table: (props: any) => ({ 25 | field: { 26 | bg: 'brand.500', 27 | borderRadius: '16px', 28 | fontSize: 'sm' 29 | }, 30 | track: { 31 | borderRadius: '20px', 32 | bg: mode('blue.50', 'whiteAlpha.50')(props), 33 | h: '8px', 34 | w: '54px' 35 | }, 36 | thumb: { 37 | w: '250px' 38 | } 39 | }) 40 | } 41 | } 42 | } 43 | }; 44 | -------------------------------------------------------------------------------- /src/components/charts/PieChart.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactApexChart from 'react-apexcharts'; 3 | 4 | type ChartProps = { 5 | // using `interface` is also ok 6 | [x: string]: any; 7 | }; 8 | type ChartState = { 9 | chartData: any[]; 10 | chartOptions: any; 11 | }; 12 | 13 | class PieChart extends React.Component { 14 | constructor(props: { chartData: any[]; chartOptions: any }) { 15 | super(props); 16 | 17 | this.state = { 18 | chartData: [], 19 | chartOptions: {} 20 | }; 21 | } 22 | 23 | componentDidMount() { 24 | this.setState({ 25 | chartData: this.props.chartData, 26 | chartOptions: this.props.chartOptions 27 | }); 28 | } 29 | 30 | render() { 31 | return ( 32 | 39 | ); 40 | } 41 | } 42 | 43 | export default PieChart; 44 | -------------------------------------------------------------------------------- /src/components/charts/LineChart.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactApexChart from 'react-apexcharts'; 3 | 4 | type ChartProps = { 5 | // using `interface` is also ok 6 | [x: string]: any; 7 | }; 8 | type ChartState = { 9 | chartData: any[]; 10 | chartOptions: any; 11 | }; 12 | 13 | class LineChart extends React.Component { 14 | constructor(props: { chartData: any[]; chartOptions: any }) { 15 | super(props); 16 | 17 | this.state = { 18 | chartData: [], 19 | chartOptions: {} 20 | }; 21 | } 22 | 23 | componentDidMount() { 24 | this.setState({ 25 | chartData: this.props.chartData, 26 | chartOptions: this.props.chartOptions 27 | }); 28 | } 29 | 30 | render() { 31 | return ( 32 | 39 | ); 40 | } 41 | } 42 | 43 | export default LineChart; 44 | -------------------------------------------------------------------------------- /src/components/charts/LineAreaChart.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactApexChart from 'react-apexcharts'; 3 | 4 | type ChartProps = { 5 | // using `interface` is also ok 6 | [x: string]: any; 7 | }; 8 | type ChartState = { 9 | chartData: any[]; 10 | chartOptions: any; 11 | }; 12 | 13 | class LineChart extends React.Component { 14 | constructor(props: { chartData: any[]; chartOptions: any }) { 15 | super(props); 16 | 17 | this.state = { 18 | chartData: [], 19 | chartOptions: {} 20 | }; 21 | } 22 | 23 | componentDidMount() { 24 | this.setState({ 25 | chartData: this.props.chartData, 26 | chartOptions: this.props.chartOptions 27 | }); 28 | } 29 | 30 | render() { 31 | return ( 32 | 39 | ); 40 | } 41 | } 42 | 43 | export default LineChart; 44 | -------------------------------------------------------------------------------- /src/views/admin/profile/components/Dropzone.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Button, Flex, useColorModeValue } from '@chakra-ui/react'; 3 | // Assets 4 | import { useDropzone } from 'react-dropzone'; 5 | 6 | function Dropzone(props: { content: JSX.Element | string; [x: string]: any }) { 7 | const { content, ...rest } = props; 8 | const { getRootProps, getInputProps } = useDropzone(); 9 | const bg = useColorModeValue('gray.100', 'navy.700'); 10 | const borderColor = useColorModeValue('secondaryGray.100', 'whiteAlpha.100'); 11 | return ( 12 | 25 | 26 | 27 | 28 | ); 29 | } 30 | 31 | export default Dropzone; 32 | -------------------------------------------------------------------------------- /src/components/footer/FooterAdmin.tsx: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | 3 | import { Flex, Link, List, ListItem, Text, useColorModeValue } from '@chakra-ui/react'; 4 | 5 | export default function Footer() { 6 | const textColor = useColorModeValue('gray.400', 'white'); 7 | return ( 8 | 21 | 28 | {' '} 29 | © {new Date().getFullYear()} 30 | 31 | Horizon UI. All Rights Reserved. Made with love by 32 | 33 | Simmmple! 34 | 35 | 36 | 37 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /src/components/fixedPlugin/FixedPlugin.tsx: -------------------------------------------------------------------------------- 1 | // Chakra Imports 2 | import { Button, Icon, useColorMode } from '@chakra-ui/react'; 3 | // Custom Icons 4 | import { IoMdMoon, IoMdSunny } from 'react-icons/io'; 5 | import React from 'react'; 6 | 7 | export default function FixedPlugin(props: { [x: string]: any }) { 8 | const { ...rest } = props; 9 | const { colorMode, toggleColorMode } = useColorMode(); 10 | let bgButton = 'linear-gradient(135deg, #868CFF 0%, #4318FF 100%)'; 11 | 12 | return ( 13 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 descope-sample-apps 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/calendar/MiniCalendar.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import Calendar from 'react-calendar'; 3 | import 'react-calendar/dist/Calendar.css'; 4 | import 'assets/css/MiniCalendar.css'; 5 | import { Text, Icon } from '@chakra-ui/react'; 6 | // Chakra imports 7 | import { MdChevronLeft, MdChevronRight } from 'react-icons/md'; 8 | // Custom components 9 | import Card from 'components/card/Card'; 10 | 11 | export default function MiniCalendar(props: { selectRange: boolean; [x: string]: any }) { 12 | const { selectRange, ...rest } = props; 13 | const [ value, onChange ] = useState(new Date()); 14 | return ( 15 | 23 | } 29 | prevLabel={} 30 | nextLabel={} 31 | /> 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /src/components/footer/FooterAuth.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { Flex, Link, List, ListItem, Text, useColorModeValue } from '@chakra-ui/react'; 4 | 5 | export default function Footer() { 6 | let textColor = useColorModeValue('gray.400', 'white'); 7 | let linkColor = useColorModeValue({ base: 'gray.400', lg: 'white' }, 'white'); 8 | return ( 9 | 23 | 30 | {' '} 31 | © {new Date().getFullYear()} 32 | 33 | Horizon UI. All Rights Reserved. Made with love by 34 | 35 | Simmmple! 36 | 37 | 38 | 39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /src/theme/theme.tsx: -------------------------------------------------------------------------------- 1 | import { extendTheme, HTMLChakraProps, ThemingProps } from '@chakra-ui/react'; 2 | import { CardComponent } from './additions/card/card'; 3 | import { buttonStyles } from './components/button'; 4 | import { badgeStyles } from './components/badge'; 5 | import { inputStyles } from './components/input'; 6 | import { progressStyles } from './components/progress'; 7 | import { sliderStyles } from './components/slider'; 8 | import { textareaStyles } from './components/textarea'; 9 | import { switchStyles } from './components/switch'; 10 | import { linkStyles } from './components/link'; 11 | import { breakpoints } from './foundations/breakpoints'; 12 | import { globalStyles } from './styles'; 13 | 14 | export default extendTheme( 15 | { breakpoints }, // Breakpoints 16 | globalStyles, 17 | badgeStyles, // badge styles 18 | buttonStyles, // button styles 19 | linkStyles, // link styles 20 | progressStyles, // progress styles 21 | sliderStyles, // slider styles 22 | inputStyles, // input styles 23 | textareaStyles, // textarea styles 24 | switchStyles, // switch styles 25 | CardComponent // card component 26 | ); 27 | 28 | export interface CustomCardProps extends HTMLChakraProps<'div'>, ThemingProps {} 29 | -------------------------------------------------------------------------------- /src/components/fields/InputField.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Flex, FormLabel, Input, Text, useColorModeValue } from '@chakra-ui/react'; 3 | // Custom components 4 | 5 | export default function Default(props: { 6 | id: string; 7 | label: string; 8 | extra: JSX.Element; 9 | placeholder: string; 10 | type: string; 11 | mb: any; 12 | }) { 13 | const { id, label, extra, placeholder, type, mb, ...rest } = props; 14 | // Chakra Color Mode 15 | const textColorPrimary = useColorModeValue('secondaryGray.900', 'white'); 16 | 17 | return ( 18 | 19 | 27 | {label} 28 | 29 | {extra} 30 | 31 | 32 | 43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /src/routes.tsx: -------------------------------------------------------------------------------- 1 | import { Icon } from '@chakra-ui/react'; 2 | import { MdBarChart, MdHome, MdLock } from 'react-icons/md'; 3 | 4 | // Admin Imports 5 | import MainDashboard from 'views/admin/default'; 6 | // import NFTMarketplace from 'views/admin/marketplace'; 7 | import DataTables from 'views/admin/dataTables'; 8 | 9 | // Auth Imports 10 | import SignInCentered from 'views/auth/signIn'; 11 | import SignUpCentered from 'views/auth/signUp'; 12 | 13 | const routes = [ 14 | { 15 | name: 'Your Rev Dashboard', 16 | layout: '/admin', 17 | path: '/default', 18 | icon: , 19 | component: MainDashboard 20 | }, 21 | { 22 | name: 'Admin Dashboard', 23 | layout: '/admin', 24 | icon: , 25 | path: '/data-tables', 26 | component: DataTables 27 | }, 28 | { 29 | name: 'Sign In', 30 | layout: '/auth', 31 | path: '/sign-in', 32 | icon: , 33 | component: SignInCentered 34 | }, 35 | { 36 | name: 'Sign Up', 37 | layout: '/auth', 38 | path: '/sign-up', 39 | icon: , 40 | component: SignUpCentered 41 | } 42 | ]; 43 | 44 | export default routes; 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## B2B Sample app 2 | B2B Sample app using Descope for authentication. this app includes 3 | - NodeJS server (run as serverless on vercel) 4 | - React App client 5 | 6 | ## Getting Started 7 | This Sample app is contain **NodeJS server** and **React App client**. The client will still work fine without a server running. 8 | 9 | After the first-time configuration, you can 10 | 11 | ### Run client only 12 | 1. Install dependencies - `npm i` 13 | 2. create `.env` file with the following content 14 | ```env 15 | # Your project id 16 | REACT_APP_DESCOPE_PROJECT_ID= 17 | # Optional - Descope base url, e.g. http://localhost:8000 18 | DESCOPE_BASE_URL=http://localhost:8000 19 | ``` 20 | 3. Start the client - `npm run start` 21 | 22 | The client is now running on `http://localhost:3000` 23 | 24 | ### Run the server and client: 25 | You need to setup vercel dev env to run the server as server is designed to run as a serverless function on vercel. You can choose to convert this to a regular nodejs server easily. 26 | 27 | The instructions to setup vercel CLI are here - https://vercel.com/docs/cli 28 | 29 | After you have this setup, just run `vercel dev` on the command prompt to start client and server both. 30 | 31 | The client is now running on `http://localhost:3000` and can access data from the server. 32 | -------------------------------------------------------------------------------- /src/components/menu/ItemContent.tsx: -------------------------------------------------------------------------------- 1 | // chakra imports 2 | import { Icon, Flex, Text, useColorModeValue } from "@chakra-ui/react"; 3 | import { MdUpgrade } from "react-icons/md"; 4 | 5 | export function ItemContent(props:{info:string}) { 6 | const textColor = useColorModeValue("navy.700", "white"); 7 | return ( 8 | <> 9 | 19 | 20 | 21 | 22 | 27 | New Update: {props.info} 28 | 29 | 30 | 34 | A new update for your downloaded item is available! 35 | 36 | 37 | 38 | 39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /src/views/admin/rtl/components/UserActivity.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Flex, Select, Text, useColorModeValue } from '@chakra-ui/react'; 3 | import Card from 'components/card/Card'; 4 | // Custom components 5 | import BarChart from 'components/charts/BarChart'; 6 | import { barChartDataUserActivity, barChartOptionsUserActivity } from 'variables/charts'; 7 | 8 | export default function UserActivity(props: { [x: string]: any }) { 9 | const { ...rest } = props; 10 | 11 | // Chakra Color Mode 12 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 13 | return ( 14 | 15 | 16 | 17 | User Activity 18 | 19 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /src/views/admin/default/components/UserActivity.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Flex, Select, Text, useColorModeValue } from '@chakra-ui/react'; 3 | import Card from 'components/card/Card'; 4 | // Custom components 5 | import BarChart from 'components/charts/BarChart'; 6 | import { barChartDataUserActivity, barChartOptionsUserActivity } from 'variables/charts'; 7 | 8 | export default function UserActivity(props: { [x: string]: any }) { 9 | const { ...rest } = props; 10 | 11 | // Chakra Color Mode 12 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 13 | return ( 14 | 15 | 16 | 17 | User Activity 18 | 19 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /src/views/admin/dataTables/variables/columnsData.js: -------------------------------------------------------------------------------- 1 | export const columnsDataDevelopment = [ 2 | { 3 | Header: "NAME", 4 | accessor: "name", 5 | }, 6 | { 7 | Header: "Platform", 8 | accessor: "tech", 9 | }, 10 | { 11 | Header: "Release Date", 12 | accessor: "date", 13 | }, 14 | { 15 | Header: "PROGRESS", 16 | accessor: "progress", 17 | }, 18 | ]; 19 | 20 | export const columnsDataCheck = [ 21 | { 22 | Header: "NAME", 23 | accessor: "name", 24 | }, 25 | { 26 | Header: "QUOTA", 27 | accessor: "quota", 28 | }, 29 | { 30 | Header: "COMMISSION", 31 | accessor: "commission", 32 | }, 33 | { 34 | Header: "DATE", 35 | accessor: "date", 36 | }, 37 | ]; 38 | 39 | export const columnsDataColumns = [ 40 | { 41 | Header: "NAME", 42 | accessor: "name", 43 | }, 44 | { 45 | Header: "PROGRESS", 46 | accessor: "progress", 47 | }, 48 | { 49 | Header: "QUANTITY", 50 | accessor: "quantity", 51 | }, 52 | { 53 | Header: "DATE", 54 | accessor: "date", 55 | }, 56 | ]; 57 | 58 | export const columnsDataComplex = [ 59 | { 60 | Header: "NAME", 61 | accessor: "name", 62 | }, 63 | { 64 | Header: "STATUS", 65 | accessor: "status", 66 | }, 67 | { 68 | Header: "DATE", 69 | accessor: "date", 70 | }, 71 | { 72 | Header: "PROGRESS", 73 | accessor: "progress", 74 | }, 75 | ]; 76 | -------------------------------------------------------------------------------- /src/theme/components/textarea.ts: -------------------------------------------------------------------------------- 1 | import { mode } from '@chakra-ui/theme-tools'; 2 | export const textareaStyles = { 3 | components: { 4 | Textarea: { 5 | baseStyle: { 6 | field: { 7 | fontWeight: 400, 8 | borderRadius: '8px' 9 | } 10 | }, 11 | 12 | variants: { 13 | main: (props: any) => ({ 14 | field: { 15 | bg: mode('transparent', 'navy.800')(props), 16 | border: '1px solid !important', 17 | color: mode('secondaryGray.900', 'white')(props), 18 | borderColor: mode('secondaryGray.100', 'whiteAlpha.100')(props), 19 | borderRadius: '16px', 20 | fontSize: 'sm', 21 | p: '20px', 22 | _placeholder: { color: 'secondaryGray.400' } 23 | } 24 | }), 25 | auth: () => ({ 26 | field: { 27 | bg: 'white', 28 | border: '1px solid', 29 | borderColor: 'secondaryGray.100', 30 | borderRadius: '16px', 31 | _placeholder: { color: 'secondaryGray.600' } 32 | } 33 | }), 34 | authSecondary: () => ({ 35 | field: { 36 | bg: 'white', 37 | border: '1px solid', 38 | 39 | borderColor: 'secondaryGray.100', 40 | borderRadius: '16px', 41 | _placeholder: { color: 'secondaryGray.600' } 42 | } 43 | }), 44 | search: () => ({ 45 | field: { 46 | border: 'none', 47 | py: '11px', 48 | borderRadius: 'inherit', 49 | _placeholder: { color: 'secondaryGray.600' } 50 | } 51 | }) 52 | } 53 | } 54 | } 55 | }; 56 | -------------------------------------------------------------------------------- /src/views/admin/profile/components/Project.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Flex, Icon, Image, Link, Text, useColorModeValue } from '@chakra-ui/react'; 3 | // Custom components 4 | import Card from 'components/card/Card'; 5 | // Assets 6 | import { MdEdit } from 'react-icons/md'; 7 | 8 | export default function Project(props: { 9 | title: string; 10 | ranking: number | string; 11 | link: string; 12 | image: string; 13 | [x: string]: any; 14 | }) { 15 | const { title, ranking, link, image, ...rest } = props; 16 | // Chakra Color Mode 17 | const textColorPrimary = useColorModeValue('secondaryGray.900', 'white'); 18 | const textColorSecondary = 'gray.400'; 19 | const brandColor = useColorModeValue('brand.500', 'white'); 20 | const bg = useColorModeValue('white', 'navy.700'); 21 | return ( 22 | 23 | 24 | 25 | 26 | 27 | {title} 28 | 29 | 30 | Project #{ranking} •{' '} 31 | 32 | See project details 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /src/components/card/MiniStatistics.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Flex, Stat, StatLabel, StatNumber, useColorModeValue, Text } from '@chakra-ui/react'; 3 | // Custom components 4 | import Card from 'components/card/Card'; 5 | 6 | export default function Default(props: { 7 | startContent?: JSX.Element; 8 | endContent?: JSX.Element; 9 | name: string; 10 | growth?: string | number; 11 | value: string | number; 12 | }) { 13 | const { startContent, endContent, name, growth, value } = props; 14 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 15 | const textColorSecondary = 'secondaryGray.600'; 16 | 17 | return ( 18 | 19 | 20 | {startContent} 21 | 22 | 23 | 29 | {name} 30 | 31 | 36 | {value} 37 | 38 | {growth ? ( 39 | 40 | 41 | {growth} 42 | 43 | 44 | since last month 45 | 46 | 47 | ) : null} 48 | 49 | 50 | {endContent} 51 | 52 | 53 | 54 | ); 55 | } 56 | -------------------------------------------------------------------------------- /src/views/admin/rtl/components/DailyTraffic.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react'; 3 | import BarChart from 'components/charts/BarChart'; 4 | 5 | // Custom components 6 | import Card from 'components/card/Card'; 7 | import { barChartDataDailyTraffic, barChartOptionsDailyTraffic } from 'variables/charts'; 8 | 9 | // Assets 10 | import { RiArrowUpSFill } from 'react-icons/ri'; 11 | 12 | export default function DailyTraffic(props: { [x: string]: any }) { 13 | const { ...rest } = props; 14 | 15 | // Chakra Color Mode 16 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 17 | return ( 18 | 19 | 20 | 21 | 22 | Deal Traffic 23 | 24 | 25 | 26 | 2,579 27 | 28 | 29 | Active Deals 30 | 31 | 32 | 33 | 34 | 35 | 36 | +2.45% 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /src/components/card/Member.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Avatar, Flex, useColorModeValue, Icon, Text } from '@chakra-ui/react'; 3 | // Custom components 4 | import Card from 'components/card/Card'; 5 | import TransparentMenu from 'components/menu/TransparentMenu'; 6 | // Custom icons 7 | import { IoEllipsisVertical } from 'react-icons/io5'; 8 | 9 | export default function Default(props: { avatar: string; name: string; job: string }) { 10 | const { avatar, name, job, ...rest } = props; 11 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 12 | const bg = useColorModeValue('white', '#1B254B'); 13 | const shadow = useColorModeValue('0px 18px 40px rgba(112, 144, 176, 0.12)', 'none'); 14 | 15 | return ( 16 | 17 | 18 | 19 | 25 | 26 | 27 | {name} 28 | 29 | 34 | {job} 35 | 36 | 37 | 38 | 39 | } 43 | /> 44 | 45 | 46 | ); 47 | } 48 | -------------------------------------------------------------------------------- /src/views/admin/dataTables/variables/tableDataDevelopment.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name":"Marketplace", 4 | "tech": ["apple","android","windows"], 5 | "date": "12.Jan.2021", 6 | "progress": 75.5 7 | }, 8 | { 9 | "name":"Venus DB PRO", 10 | "tech": ["apple" ], 11 | "date": "21.Feb.2021", 12 | "progress": 35.4 13 | }, 14 | { 15 | "name":"Venus DS", 16 | "tech": ["apple" ,"windows"], 17 | "date": "13.Mar.2021", 18 | "progress": 25 19 | }, 20 | { 21 | "name":"Venus 3D Asset", 22 | "tech": ["apple","android","windows"], 23 | "date": "24.Jan.2021", 24 | "progress": 100 25 | }, 26 | { 27 | "name":"Marketplace", 28 | "tech": ["apple", "windows"], 29 | "date": "Oct 24, 2022", 30 | "progress": 75.5 31 | }, 32 | { 33 | "name":"Marketplace", 34 | "tech": ["apple","android","windows"], 35 | "date": "Oct 24, 2022", 36 | "progress": 75.5 37 | }, 38 | { 39 | "name":"Marketplace", 40 | "tech": ["apple","android","windows"], 41 | "date": "12.Jan.2021", 42 | "progress": 75.5 43 | }, 44 | { 45 | "name":"Venus DB PRO", 46 | "tech": ["apple" ], 47 | "date": "21.Feb.2021", 48 | "progress": 35.4 49 | }, 50 | { 51 | "name":"Venus DS", 52 | "tech": ["apple" ,"windows"], 53 | "date": "13.Mar.2021", 54 | "progress": 25 55 | }, 56 | { 57 | "name":"Venus 3D Asset", 58 | "tech": ["apple","android","windows"], 59 | "date": "24.Jan.2021", 60 | "progress": 100 61 | }, 62 | { 63 | "name":"Marketplace", 64 | "tech": ["apple", "windows"], 65 | "date": "Oct 24, 2022", 66 | "progress": 75.5 67 | } 68 | ] 69 | -------------------------------------------------------------------------------- /src/components/navbar/searchBar/SearchBar.tsx: -------------------------------------------------------------------------------- 1 | import { IconButton, Input, InputGroup, InputLeftElement, useColorModeValue } from '@chakra-ui/react'; 2 | import { SearchIcon } from '@chakra-ui/icons'; 3 | export function SearchBar(props: { 4 | variant?: string; 5 | background?: string; 6 | children?: JSX.Element; 7 | placeholder?: string; 8 | borderRadius?: string | number; 9 | [x: string]: any; 10 | }) { 11 | // Pass the computed styles into the `__css` prop 12 | const { variant, background, children, placeholder, borderRadius, ...rest } = props; 13 | // Chakra Color Mode 14 | const searchIconColor = useColorModeValue('gray.700', 'white'); 15 | const inputBg = useColorModeValue('secondaryGray.300', 'navy.900'); 16 | const inputText = useColorModeValue('gray.700', 'gray.100'); 17 | return ( 18 | 19 | } 34 | /> 35 | } 36 | /> 37 | 47 | 48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /src/views/admin/default/components/DailyTraffic.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react'; 3 | import BarChart from 'components/charts/BarChart'; 4 | 5 | // Custom components 6 | import Card from 'components/card/Card'; 7 | import { barChartDataDailyTraffic, barChartOptionsDailyTraffic } from 'variables/charts'; 8 | 9 | // Assets 10 | import { RiArrowUpSFill } from 'react-icons/ri'; 11 | 12 | export default function DailyTraffic(props: { [x: string]: any }) { 13 | const { ...rest } = props; 14 | 15 | // Chakra Color Mode 16 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 17 | return ( 18 | 19 | 20 | 21 | 22 | 23 | Deal Traffic 24 | 25 | 26 | 27 | 28 | 2,579 29 | 30 | 31 | Active Deals 32 | 33 | 34 | 35 | 36 | 37 | 38 | +2.45% 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | ); 47 | } 48 | -------------------------------------------------------------------------------- /src/views/admin/marketplace/variables/tableDataTopCreators.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "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"], 4 | "artworks" : "9821", 5 | "rating":97 6 | }, 7 | { 8 | "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"], 9 | "artworks" : "7032", 10 | "rating":87 11 | }, 12 | { 13 | "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"], 14 | "artworks" : "5204", 15 | "rating":82 16 | }, 17 | { 18 | "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"], 19 | "artworks" : "4309", 20 | "rating":68 21 | }, 22 | { 23 | "name": ["@simmmple.web","https://i.ibb.co/7p0d1Cd/Frame-24.png"], 24 | "artworks" : "3871", 25 | "rating":55 26 | }, 27 | { 28 | "name": ["@horizon.ui","https://i.ibb.co/NSJYQYD/Horizon-UI-Avatar.png"], 29 | "artworks" : "3152", 30 | "rating":46 31 | }, 32 | { 33 | "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"], 34 | "artworks" : "2907", 35 | "rating":38 36 | } 37 | ] 38 | -------------------------------------------------------------------------------- /src/components/card/Mastercard.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Flex, Box, Icon, Text, Spacer } from '@chakra-ui/react'; 3 | // Custom components 4 | import Card from 'components/card/Card'; 5 | 6 | // Assets 7 | import bgMastercard from 'assets/img/dashboards/Debit.png'; 8 | import { RiMastercardFill } from 'react-icons/ri'; 9 | 10 | export default function Banner(props: { exp: string; cvv: string; number: string }) { 11 | const { exp, cvv, number, ...rest } = props; 12 | 13 | // Chakra Color Mode 14 | return ( 15 | 25 | 26 | 27 | 28 | Glassy. 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | {number} 37 | 38 | 39 | 40 | 41 | VALID THRU 42 | 43 | {exp} 44 | 45 | 46 | 47 | CVV 48 | 49 | {cvv} 50 | 51 | 52 | 53 | 54 | 55 | 56 | ); 57 | } 58 | -------------------------------------------------------------------------------- /src/views/admin/profile/components/Projects.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Text, useColorModeValue } from '@chakra-ui/react'; 3 | // Assets 4 | import Project1 from 'assets/img/profile/Project1.png'; 5 | import Project2 from 'assets/img/profile/Project2.png'; 6 | import Project3 from 'assets/img/profile/Project3.png'; 7 | // Custom components 8 | import Card from 'components/card/Card'; 9 | import Project from 'views/admin/profile/components/Project'; 10 | 11 | export default function Projects(props: { [x: string]: any }) { 12 | const { ...rest } = props; 13 | // Chakra Color Mode 14 | const textColorPrimary = useColorModeValue('secondaryGray.900', 'white'); 15 | const textColorSecondary = 'gray.400'; 16 | const cardShadow = useColorModeValue('0px 18px 40px rgba(112, 144, 176, 0.12)', 'unset'); 17 | return ( 18 | 19 | 20 | All projects 21 | 22 | 23 | Here you can find more details about your projects. Keep you user engaged by providing meaningful 24 | information. 25 | 26 | 34 | 42 | 49 | 50 | ); 51 | } 52 | -------------------------------------------------------------------------------- /src/assets/img/auth/dolrr_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/views/admin/marketplace/components/Banner.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Button, Flex, Link, Text } from '@chakra-ui/react'; 3 | 4 | // Assets 5 | import banner from 'assets/img/nfts/NftBanner1.png'; 6 | 7 | export default function Banner() { 8 | // Chakra Color Mode 9 | return ( 10 | 17 | 31 | Discover, collect, and sell extraordinary NFTs 32 | 33 | 47 | Enter in this creative world. Discover now the latest NFTs or start creating your own! 48 | 49 | 50 | 63 | 64 | 65 | Watch video 66 | 67 | 68 | 69 | 70 | ); 71 | } 72 | -------------------------------------------------------------------------------- /src/views/admin/rtl/components/WeeklyRevenue.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Button, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react'; 3 | import Card from 'components/card/Card'; 4 | // Custom components 5 | import BarChart from 'components/charts/BarChart'; 6 | import { barChartDataConsumption, barChartOptionsConsumption } from 'variables/charts'; 7 | import { MdBarChart } from 'react-icons/md'; 8 | 9 | export default function WeeklyRevenue(props: { [x: string]: any }) { 10 | const { ...rest } = props; 11 | 12 | // Chakra Color Mode 13 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 14 | const iconColor = useColorModeValue('brand.500', 'white'); 15 | const bgButton = useColorModeValue('secondaryGray.300', 'whiteAlpha.100'); 16 | const bgHover = useColorModeValue({ bg: 'secondaryGray.400' }, { bg: 'whiteAlpha.50' }); 17 | const bgFocus = useColorModeValue({ bg: 'secondaryGray.300' }, { bg: 'whiteAlpha.100' }); 18 | return ( 19 | 20 | 21 | 22 | Weekly Revenue 23 | 24 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /src/views/auth/signUp/index.tsx: -------------------------------------------------------------------------------- 1 | import { Box, Flex, Heading, useColorModeValue } from "@chakra-ui/react"; 2 | import { Descope } from "@descope/react-sdk"; 3 | import illustration from "assets/img/auth/app_login.svg"; 4 | import DefaultAuth from "layouts/auth/Default"; 5 | import { useHistory } from "react-router-dom"; 6 | 7 | export default function DescopeSignUp() { 8 | const textColor = useColorModeValue("navy.700", "white"); 9 | let history = useHistory(); 10 | 11 | return ( 12 | 13 | 26 | 27 | 28 | Sign Up 29 | 30 | 31 | { 34 | console.log("Success!" + JSON.stringify(e.detail.user)); 35 | history.push("/admin"); 36 | }} 37 | onError={(e) => console.log("Error!")} 38 | theme="light" 39 | /> 40 | 41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /src/views/admin/default/components/WeeklyRevenue.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Button, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react'; 3 | import Card from 'components/card/Card'; 4 | // Custom components 5 | import BarChart from 'components/charts/BarChart'; 6 | import React from 'react'; 7 | import { barChartDataConsumption, barChartOptionsConsumption } from 'variables/charts'; 8 | import { MdBarChart } from 'react-icons/md'; 9 | 10 | export default function WeeklyRevenue(props: { [x: string]: any }) { 11 | const { ...rest } = props; 12 | 13 | // Chakra Color Mode 14 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 15 | const iconColor = useColorModeValue('brand.500', 'white'); 16 | const bgButton = useColorModeValue('secondaryGray.300', 'whiteAlpha.100'); 17 | const bgHover = useColorModeValue({ bg: 'secondaryGray.400' }, { bg: 'whiteAlpha.50' }); 18 | const bgFocus = useColorModeValue({ bg: 'secondaryGray.300' }, { bg: 'whiteAlpha.100' }); 19 | return ( 20 | 21 | 22 | 23 | Weekly Revenue 24 | 25 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /src/views/admin/dataTables/variables/tableDataCheck.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name":["Marketplace",false], 4 | "quantity": 2458, 5 | "date": "12.Jan.2021", 6 | "progress": 75.5 7 | }, 8 | { 9 | "name":["Venus DB PRO",true], 10 | "quantity": 1485, 11 | "date": "21.Feb.2021", 12 | "progress": 35.4 13 | }, 14 | { 15 | "name":["Venus DS",true], 16 | "quantity": 1024, 17 | "date": "13.Mar.2021", 18 | "progress": 25 19 | }, 20 | { 21 | "name":["Venus 3D Asset",true], 22 | "quantity": 858, 23 | "date": "24.Jan.2021", 24 | "progress": 100 25 | }, 26 | { 27 | "name":["Marketplace",false], 28 | "quantity": 258, 29 | "date": "Oct 24, 2022", 30 | "progress": 75.5 31 | }, 32 | { 33 | "name":["Marketplace",false], 34 | "quantity": 258, 35 | "date": "Oct 24, 2022", 36 | "progress": 75.5 37 | }, 38 | { 39 | "name":["Marketplace",false], 40 | "quantity": 258, 41 | "date": "12.Jan.2021", 42 | "progress": 75.5 43 | }, 44 | { 45 | "name":["Venus DB PRO",false], 46 | "quantity": 858, 47 | "date": "21.Feb.2021", 48 | "progress": 35.4 49 | }, 50 | { 51 | "name":["Venus DS",false], 52 | "quantity": 1024, 53 | "date": "13.Mar.2021", 54 | "progress": 25 55 | }, 56 | { 57 | "name":["Venus 3D Asset",false], 58 | "quantity": 258, 59 | "date": "24.Jan.2021", 60 | "progress": 100 61 | }, 62 | { 63 | "name":["Marketplace",false], 64 | "quantity": 1024, 65 | "date": "Oct 24, 2022", 66 | "progress": 75.5 67 | }, 68 | { 69 | "name":["Marketplace",false], 70 | "quantity": 258, 71 | "date": "Oct 24, 2022", 72 | "progress": 75.5 73 | }, 74 | { 75 | "name":["Marketplace",false], 76 | "quantity": 258, 77 | "date": "Oct 24, 2022", 78 | "progress": 75.5 79 | } 80 | ] 81 | -------------------------------------------------------------------------------- /src/views/admin/profile/components/General.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { SimpleGrid, Text, useColorModeValue } from '@chakra-ui/react'; 3 | // Custom components 4 | import Card from 'components/card/Card'; 5 | import Information from 'views/admin/profile/components/Information'; 6 | 7 | // Assets 8 | export default function GeneralInformation(props: { [x: string]: any }) { 9 | const { ...rest } = props; 10 | // Chakra Color Mode 11 | const textColorPrimary = useColorModeValue('secondaryGray.900', 'white'); 12 | const textColorSecondary = 'gray.400'; 13 | const cardShadow = useColorModeValue('0px 18px 40px rgba(112, 144, 176, 0.12)', 'unset'); 14 | return ( 15 | 16 | 17 | General Information 18 | 19 | 20 | As we live, our hearts turn colder. Cause pain is what we go through as we become older. We get insulted 21 | by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give 22 | others a hand. We get our heart broken by people we love, even that we give them all... 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Dolrr - Descope Sample App 9 | 10 | 11 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /src/layouts/auth/Default.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Flex } from "@chakra-ui/react"; 3 | import PropTypes from "prop-types"; 4 | import FixedPlugin from "components/fixedPlugin/FixedPlugin"; 5 | 6 | function AuthIllustration(props: { 7 | children: JSX.Element | string; 8 | illustrationBackground: string; 9 | }) { 10 | const { children, illustrationBackground } = props; 11 | // Chakra color mode 12 | return ( 13 | 14 | 31 | {children} 32 | 41 | 52 | 53 | 54 | 55 | 56 | ); 57 | } 58 | // PROPS 59 | 60 | AuthIllustration.propTypes = { 61 | illustrationBackground: PropTypes.string, 62 | image: PropTypes.any, 63 | }; 64 | 65 | export default AuthIllustration; 66 | -------------------------------------------------------------------------------- /src/views/admin/profile/components/Storage.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Flex, Icon, Progress, Text, useColorModeValue } from '@chakra-ui/react'; 3 | // Custom components 4 | import Card from 'components/card/Card'; 5 | import IconBox from 'components/icons/IconBox'; 6 | import Menu from 'components/menu/MainMenu'; 7 | import React from 'react'; 8 | // Assets 9 | import { MdOutlineCloudDone } from 'react-icons/md'; 10 | 11 | export default function Banner(props: { used: number; total: number; [x: string]: any }) { 12 | const { used, total } = props; 13 | // Chakra Color Mode 14 | const textColorPrimary = useColorModeValue('secondaryGray.900', 'white'); 15 | const brandColor = useColorModeValue('brand.500', 'white'); 16 | const textColorSecondary = 'gray.400'; 17 | const box = useColorModeValue('secondaryGray.300', 'whiteAlpha.100'); 18 | return ( 19 | 20 | 21 | 22 | 23 | } 28 | bg={box} 29 | /> 30 | 31 | Your storage 32 | 33 | 34 | Supervise your drive space in the easiest way 35 | 36 | 37 | 38 | 39 | {used} GB 40 | 41 | 42 | {total} GB 43 | 44 | 45 | 46 | 47 | 48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /src/views/admin/profile/components/Notifications.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Flex, Text, useColorModeValue } from '@chakra-ui/react'; 3 | import Card from 'components/card/Card'; 4 | // Custom components 5 | import SwitchField from 'components/fields/SwitchField'; 6 | import Menu from 'components/menu/MainMenu'; 7 | 8 | export default function Notifications(props: { [x: string]: any }) { 9 | const { ...rest } = props; 10 | // Chakra Color Mode 11 | const textColorPrimary = useColorModeValue('secondaryGray.900', 'white'); 12 | return ( 13 | 14 | 15 | 16 | Notifications 17 | 18 | 19 | 20 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import { ChakraProvider } from "@chakra-ui/react"; 2 | import { AuthProvider } from "@descope/react-sdk"; 3 | import React from "react"; 4 | import ReactDOM from "react-dom"; 5 | import { HashRouter, Redirect, Route, Switch } from "react-router-dom"; 6 | import "./assets/css/App.css"; 7 | import AdminLayout from "./layouts/admin"; 8 | import AuthLayout from "./layouts/auth"; 9 | import RTLLayout from "./layouts/rtl"; 10 | import theme from "./theme/theme"; 11 | 12 | /* eslint-disable */ 13 | declare global { 14 | interface Window { 15 | analytics?: any; 16 | } 17 | } 18 | /* eslint-enable */ 19 | 20 | const App = () => { 21 | return ( 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | ); 35 | }; 36 | 37 | const AppRoot = () => { 38 | const queryParams = new URLSearchParams(window.location.search); 39 | const projectId = queryParams.get("project") || localStorage.getItem('projectId'); 40 | if (projectId !== localStorage.getItem('projectId')) { 41 | localStorage.removeItem("DSR") 42 | localStorage.removeItem("DS") 43 | localStorage.setItem('projectId', projectId); 44 | } 45 | if (queryParams.get("baseurl")) { 46 | localStorage.setItem("baseUrl", queryParams.get("baseurl")); 47 | } 48 | const baseUrl = localStorage.getItem("baseUrl") || process.env.REACT_APP_DESCOPE_BASE_URL; 49 | window.analytics.page({ projectId: projectId }); 50 | 51 | return ( 52 | 53 | 54 | 55 | ); 56 | }; 57 | 58 | ReactDOM.render(, document.getElementById("root")); 59 | -------------------------------------------------------------------------------- /src/components/sidebar/components/SidebarCard.tsx: -------------------------------------------------------------------------------- 1 | import { Button, Flex, Image, Link, Text, useColorModeValue } from '@chakra-ui/react'; 2 | import logoWhite from 'assets/img/layout/logoWhite.png'; 3 | 4 | export default function SidebarDocs() { 5 | const bgColor = 'linear-gradient(135deg, #868CFF 0%, #4318FF 100%)'; 6 | const borderColor = useColorModeValue('white', 'navy.800'); 7 | 8 | return ( 9 | 17 | 31 | 32 | 33 | 34 | 42 | Upgrade to PRO 43 | 44 | 45 | Improve your development process and start doing more with Horizon UI PRO! 46 | 47 | 48 | 49 | 61 | 62 | 63 | ); 64 | } 65 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "homepage": "", 3 | "name": "descope-b2b-sample-client", 4 | "version": "1.0.1", 5 | "private": true, 6 | "dependencies": { 7 | "@chakra-ui/icons": "^1.1.5", 8 | "@chakra-ui/react": "1.8.9", 9 | "@chakra-ui/system": "^1.12.1", 10 | "@chakra-ui/theme-tools": "^1.3.6", 11 | "@descope/node-sdk": "0.0.0-next-ffe40501-20230718", 12 | "@descope/react-sdk": "0.0.0-next-ff7ef905-20230814", 13 | "@emotion/cache": "^11.7.1", 14 | "@emotion/react": "^11.4.1", 15 | "@emotion/styled": "^11.3.0", 16 | "@testing-library/jest-dom": "^5.14.1", 17 | "@testing-library/react": "^11.2.7", 18 | "@testing-library/user-event": "^12.8.3", 19 | "@types/jest": "^25.2.3", 20 | "@types/node": "^12.20.55", 21 | "@types/react": "^18.0.15", 22 | "@types/react-dom": "^18.0.6", 23 | "apexcharts": "^3.35.2", 24 | "framer-motion": "^4.1.17", 25 | "prismjs": "^1.29.0", 26 | "react": "^17.0.2", 27 | "react-apexcharts": "^1.4.0", 28 | "react-calendar": "^3.7.0", 29 | "react-custom-scrollbars-2": "^4.2.1", 30 | "react-dom": "^17.0.2", 31 | "react-dropzone": "^12.0.4", 32 | "react-icons": "^4.3.1", 33 | "react-is": "^18.0.0", 34 | "react-router-dom": "^5.3.4", 35 | "react-scripts": "^5.0.0", 36 | "react-table": "^7.8.0", 37 | "stylis": "^4.1.1", 38 | "stylis-plugin-rtl": "2.1.1", 39 | "typescript": "^4.7.4", 40 | "web-vitals": "^1.1.2" 41 | }, 42 | "scripts": { 43 | "start": "react-scripts start", 44 | "build": "react-scripts build", 45 | "test": "react-scripts test", 46 | "eject": "react-scripts eject", 47 | "predeploy": "npm run build", 48 | "deploy": "gh-pages -d build" 49 | }, 50 | "eslintConfig": { 51 | "extends": [ 52 | "react-app", 53 | "react-app/jest" 54 | ] 55 | }, 56 | "browserslist": { 57 | "production": [ 58 | ">0.2%", 59 | "not dead", 60 | "not op_mini all" 61 | ], 62 | "development": [ 63 | "last 1 chrome version", 64 | "last 1 firefox version", 65 | "last 1 safari version" 66 | ] 67 | }, 68 | "devDependencies": { 69 | "@types/prismjs": "^1.26.0", 70 | "@types/react-calendar": "^4.0.0", 71 | "@types/react-router-dom": "^5.3.3", 72 | "@types/react-table": "^7.7.12", 73 | "gh-pages": "^6.0.0" 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/theme/styles.ts: -------------------------------------------------------------------------------- 1 | import { mode } from '@chakra-ui/theme-tools'; 2 | export const globalStyles = { 3 | colors: { 4 | brand: { 5 | 100: '#E9E3FF', 6 | 200: '#422AFB', 7 | 300: '#422AFB', 8 | 400: '#7551FF', 9 | 500: '#422AFB', 10 | 600: '#3311DB', 11 | 700: '#02044A', 12 | 800: '#190793', 13 | 900: '#11047A' 14 | }, 15 | brandScheme: { 16 | 100: '#E9E3FF', 17 | 200: '#7551FF', 18 | 300: '#7551FF', 19 | 400: '#7551FF', 20 | 500: '#422AFB', 21 | 600: '#3311DB', 22 | 700: '#02044A', 23 | 800: '#190793', 24 | 900: '#02044A' 25 | }, 26 | brandTabs: { 27 | 100: '#E9E3FF', 28 | 200: '#422AFB', 29 | 300: '#422AFB', 30 | 400: '#422AFB', 31 | 500: '#422AFB', 32 | 600: '#3311DB', 33 | 700: '#02044A', 34 | 800: '#190793', 35 | 900: '#02044A', 36 | 1000: '#7551FF', 37 | }, 38 | secondaryGray: { 39 | 100: '#E0E5F2', 40 | 200: '#E1E9F8', 41 | 300: '#F4F7FE', 42 | 400: '#E9EDF7', 43 | 500: '#8F9BBA', 44 | 600: '#A3AED0', 45 | 700: '#707EAE', 46 | 800: '#707EAE', 47 | 900: '#1B2559', 48 | 1000: '#170A2C' 49 | }, 50 | red: { 51 | 100: '#FEEFEE', 52 | 500: '#EE5D50', 53 | 600: '#E31A1A' 54 | }, 55 | blue: { 56 | 50: '#EFF4FB', 57 | 500: '#3965FF', 58 | 60: '#4318FF' 59 | }, 60 | orange: { 61 | 100: '#FFF6DA', 62 | 500: '#FFB547' 63 | }, 64 | green: { 65 | 100: '#E6FAF5', 66 | 500: '#01B574' 67 | }, 68 | navy: { 69 | 50: '#d0dcfb', 70 | 100: '#aac0fe', 71 | 200: '#a3b9f8', 72 | 300: '#728fea', 73 | 400: '#3652ba', 74 | 500: '#1b3bbb', 75 | 600: '#24388a', 76 | 700: '#1B254B', 77 | 800: '#111c44', 78 | 900: '#0b1437' 79 | }, 80 | gray: { 81 | 100: '#FAFCFE' 82 | } 83 | }, 84 | styles: { 85 | global: (props: any) => ({ 86 | body: { 87 | overflowX: 'hidden', 88 | bg: mode('secondaryGray.300', 'navy.900')(props), 89 | fontFamily: 'DM Sans', 90 | letterSpacing: '-0.5px' 91 | }, 92 | input: { 93 | color: 'gray.700' 94 | }, 95 | html: { 96 | fontFamily: 'DM Sans' 97 | } 98 | }) 99 | } 100 | }; 101 | -------------------------------------------------------------------------------- /src/views/admin/marketplace/components/HistoryItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | // Chakra imports 3 | import { Flex, Icon, Image, Text, useColorModeValue } from '@chakra-ui/react'; 4 | // Custom components 5 | import Card from 'components/card/Card'; 6 | // Assets 7 | import { FaEthereum } from 'react-icons/fa'; 8 | 9 | export default function NFT(props: { 10 | image: string; 11 | name: string; 12 | author: string; 13 | date: string; 14 | price: string | number; 15 | }) { 16 | const { image, name, author, date, price } = props; 17 | // Chakra Color Mode 18 | const textColor = useColorModeValue('brands.900', 'white'); 19 | const bgItem = useColorModeValue( 20 | { bg: 'white', boxShadow: '0px 40px 58px -20px rgba(112, 144, 176, 0.12)' }, 21 | { bg: 'navy.700', boxShadow: 'unset' } 22 | ); 23 | const textColorDate = useColorModeValue('secondaryGray.600', 'white'); 24 | return ( 25 | 26 | 27 | 28 | 29 | 33 | 41 | {name} 42 | 43 | 50 | {author} 51 | 52 | 53 | 54 | 55 | 56 | {price} 57 | 58 | 59 | 60 | {date} 61 | 62 | 63 | 64 | 65 | ); 66 | } 67 | -------------------------------------------------------------------------------- /src/views/admin/profile/components/Banner.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Avatar, Box, Flex, Text, useColorModeValue } from '@chakra-ui/react'; 3 | import Card from 'components/card/Card'; 4 | 5 | export default function Banner(props: { 6 | banner: string; 7 | avatar: string; 8 | name: string; 9 | job: string; 10 | posts: number | string; 11 | followers: number | string; 12 | following: number | string; 13 | [x: string]: any; 14 | }) { 15 | const { banner, avatar, name, job, posts, followers, following, ...rest } = props; 16 | // Chakra Color Mode 17 | const textColorPrimary = useColorModeValue('secondaryGray.900', 'white'); 18 | const textColorSecondary = 'gray.400'; 19 | const borderColor = useColorModeValue('white !important', '#111C44 !important'); 20 | return ( 21 | 22 | 23 | 24 | 25 | {name} 26 | 27 | 28 | {job} 29 | 30 | 31 | 32 | 33 | {posts} 34 | 35 | 36 | Posts 37 | 38 | 39 | 40 | 41 | {followers} 42 | 43 | 44 | Followers 45 | 46 | 47 | 48 | 49 | {following} 50 | 51 | 52 | Following 53 | 54 | 55 | 56 | 57 | ); 58 | } 59 | -------------------------------------------------------------------------------- /src/components/adminExperience/index.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Accordion, 3 | AccordionButton, 4 | AccordionIcon, 5 | AccordionItem, 6 | AccordionPanel, 7 | Box, 8 | Tab, 9 | TabList, 10 | TabPanel, 11 | TabPanels, 12 | Tabs, 13 | Text, 14 | } from "@chakra-ui/react"; 15 | import { Sdk } from "./Sdk"; 16 | 17 | export function AdminExperience() { 18 | 19 | return ( 20 | 25 | 26 | 31 | 32 | 39 | Interested to learn how we built this "Step-Up" experience? 40 | 41 | 42 | 43 | 44 | 45 | 51 | This “Step Up” experience was built using Descope Flows 52 | (the same Flow as the one used for the login page), 53 | and validated using the Descope Backend SDKs. 54 | 55 | 61 | 62 | 63 | SDKs 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | ); 77 | } 78 | -------------------------------------------------------------------------------- /src/layouts/auth/index.tsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | import { Redirect, Route, Switch } from 'react-router-dom'; 3 | import routes from 'routes'; 4 | import { useSession } from "@descope/react-sdk"; 5 | import { useHistory } from "react-router-dom"; 6 | 7 | // Chakra imports 8 | import { Box, useColorModeValue } from '@chakra-ui/react'; 9 | 10 | // Layout components 11 | import { SidebarContext } from 'contexts/SidebarContext'; 12 | import WelcomeModal from 'components/welcomeModal/WelcomeModal'; 13 | 14 | // Custom Chakra theme 15 | export default function Auth() { 16 | // states and functions 17 | const [ toggleSidebar, setToggleSidebar ] = useState(false); 18 | const { isAuthenticated } = useSession(); 19 | let history = useHistory(); 20 | 21 | useEffect(() => { 22 | if (isAuthenticated) { 23 | history.push("/admin"); 24 | } 25 | },[isAuthenticated,history]); 26 | const getRoute = () => { 27 | return window.location.pathname !== '/auth/full-screen-maps'; 28 | }; 29 | const getRoutes = ( 30 | routes: RoutesType[] 31 | ): any => { 32 | return routes.map( 33 | ( 34 | route: RoutesType, 35 | key: any 36 | ) => { 37 | if (route.layout === '/auth') { 38 | return ; 39 | } else { 40 | return null; 41 | } 42 | } 43 | ); 44 | }; 45 | const authBg = useColorModeValue('white', 'navy.900'); 46 | document.documentElement.dir = 'ltr'; 47 | return ( 48 | 49 | 50 | 55 | 66 | {getRoute() ? ( 67 | 68 | 69 | {getRoutes(routes)} 70 | 71 | 72 | 73 | ) : null} 74 | 75 | 76 | 77 | ); 78 | } 79 | -------------------------------------------------------------------------------- /src/components/fields/SwitchField.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Flex, FormLabel, Switch, Text, useColorModeValue } from '@chakra-ui/react'; 3 | // Custom components 4 | export default function Default(props: { 5 | id: string; 6 | label?: string; 7 | isChecked?: boolean; 8 | onChange?: () => void; 9 | desc?: string; 10 | textWidth?: string | number; 11 | reversed?: boolean; 12 | [x: string]: any; 13 | }) { 14 | const { id, label, isChecked, onChange, desc, textWidth, reversed, fontSize, ...rest } = props; 15 | const textColorPrimary = useColorModeValue('secondaryGray.900', 'white'); 16 | return ( 17 | 18 | {reversed ? ( 19 | 20 | {isChecked && onChange ? ( 21 | 29 | ) : ( 30 | 31 | )} 32 | 39 | 40 | {label} 41 | 42 | 43 | {desc} 44 | 45 | 46 | 47 | ) : ( 48 | 49 | 54 | 55 | {label} 56 | 57 | 58 | {desc} 59 | 60 | 61 | {isChecked && onChange ? ( 62 | 70 | ) : ( 71 | 72 | )} 73 | 74 | )} 75 | 76 | ); 77 | } 78 | -------------------------------------------------------------------------------- /src/views/admin/profile/components/Upload.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Button, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react'; 3 | // Custom components 4 | import Card from 'components/card/Card'; 5 | // Assets 6 | import { MdUpload } from 'react-icons/md'; 7 | import Dropzone from 'views/admin/profile/components/Dropzone'; 8 | 9 | export default function Upload(props: { used?: number; total?: number; [x: string]: any }) { 10 | const { used, total, ...rest } = props; 11 | // Chakra Color Mode 12 | const textColorPrimary = useColorModeValue('secondaryGray.900', 'white'); 13 | const brandColor = useColorModeValue('brand.500', 'white'); 14 | const textColorSecondary = 'gray.400'; 15 | return ( 16 | 17 | 18 | 25 | 26 | 27 | 28 | Upload Files 29 | 30 | 31 | 32 | PNG, JPG and GIF files are allowed 33 | 34 | 35 | } 36 | /> 37 | 38 | 44 | Complete your profile 45 | 46 | 52 | Stay on the pulse of distributed projects with an anline whiteboard to plan, coordinate and 53 | discuss 54 | 55 | 56 | 66 | 67 | 68 | 69 | 70 | ); 71 | } 72 | -------------------------------------------------------------------------------- /src/views/admin/rtl/components/PieCard.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Flex, Text, Select, useColorModeValue } from '@chakra-ui/react'; 3 | // Custom components 4 | import Card from 'components/card/Card'; 5 | import PieChart from 'components/charts/PieChart'; 6 | import { pieChartData, pieChartOptions } from 'variables/charts'; 7 | import { VSeparator } from 'components/separator/Separator'; 8 | 9 | export default function Conversion(props: { [x: string]: any }) { 10 | const { ...rest } = props; 11 | 12 | // Chakra Color Mode 13 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 14 | const cardColor = useColorModeValue('white', 'navy.700'); 15 | const cardShadow = useColorModeValue('0px 18px 40px rgba(112, 144, 176, 0.12)', 'unset'); 16 | return ( 17 | 18 | 24 | 25 | Market Breakdown 26 | 27 | 32 | 33 | 34 | 35 | 44 | 45 | 46 | 47 | 48 | Your files 49 | 50 | 51 | 52 | 63% 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | System 61 | 62 | 63 | 64 | 25% 65 | 66 | 67 | 68 | 69 | ); 70 | } 71 | -------------------------------------------------------------------------------- /src/components/loginExperience/Api.tsx: -------------------------------------------------------------------------------- 1 | import { Box, Button, Flex, Text } from "@chakra-ui/react"; 2 | import "prismjs/themes/prism-tomorrow.css"; 3 | import Prism from 'prismjs'; 4 | import { useEffect } from "react"; 5 | import 'assets/css/ExplanationScroll.css'; 6 | 7 | export const Api = () => { 8 | // The code snippet you want to highlight, as a string 9 | 10 | useEffect(() => { 11 | Prism.highlightAll() 12 | }, []) 13 | const codeApi = `// Rest API call for signup or signin user 14 | 15 | curl -i -X POST 16 | https://api.descope.com/v1/auth/otp/signup-in/email 17 | -H 'Authorization: Bearer ' 18 | -H 'Content-Type: application/json' 19 | -d '{ 20 | "externalId": "string", 21 | "loginOptions": { 22 | "stepup": true, 23 | "customClaims": {}, 24 | "mfa": true 25 | } 26 | }' 27 | `; 28 | return ( 29 | 30 | 31 | 32 | The Descope REST API enables you to add authentication to your app 33 | while retaining full control over your app and user experience. 34 | 35 | 36 | 37 | 46 | 47 | 48 | 54 | 
55 |           {codeApi}
56 |
57 | 58 | 59 | 60 | 61 | 72 | 73 | 74 | 75 | ); 76 | }; 77 | -------------------------------------------------------------------------------- /src/views/auth/signIn/index.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | Flex, 4 | Image, 5 | useColorMode, 6 | } from "@chakra-ui/react"; 7 | import { Descope } from "@descope/react-sdk"; 8 | import illustration from "assets/img/auth/app_login.svg"; 9 | import { LoginExperience } from "components/loginExperience/LoginExperience"; 10 | import DefaultAuth from "layouts/auth/Default"; 11 | import { useHistory } from "react-router-dom"; 12 | import logo from "../../../assets/img/auth/dolrr_logo.svg"; 13 | 14 | export default function DescopeSignIn() { 15 | let history = useHistory(); 16 | const { colorMode } = useColorMode(); 17 | return ( 18 | 19 | <> 20 | 21 | logo 22 | 23 | 40 | 41 | 48 | 49 | { 57 | window.analytics.identify(e.detail.user.userId, { 58 | name: e.detail.user.name, //user trait 59 | email: e.detail.user.email, //user trait 60 | }); 61 | history.push("/admin"); 62 | }} 63 | onError={(e) => console.log("Error!")} 64 | theme={ colorMode } 65 | /> 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | ); 74 | } 75 | -------------------------------------------------------------------------------- /src/views/admin/rtl/components/Tasks.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Flex, Text, Icon, useColorModeValue, Checkbox } from '@chakra-ui/react'; 3 | // Custom components 4 | import Card from 'components/card/Card'; 5 | import Menu from 'components/menu/MainMenu'; 6 | import IconBox from 'components/icons/IconBox'; 7 | 8 | // Assets 9 | import { MdCheckBox, MdDragIndicator } from 'react-icons/md'; 10 | 11 | export default function Conversion(props: { [x: string]: any }) { 12 | const { ...rest } = props; 13 | 14 | // Chakra Color Mode 15 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 16 | const boxBg = useColorModeValue('secondaryGray.300', 'navy.700'); 17 | const brandColor = useColorModeValue('brand.500', 'brand.400'); 18 | return ( 19 | 20 | 21 | } 27 | /> 28 | 29 | 30 | Your Tasks 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | Sentrigo follow-up 39 | 40 | 41 | 42 | 43 | 44 | 45 | Descope onboarding 46 | 47 | 48 | 49 | 50 | 51 | 52 | Solidcore onboarding 53 | 54 | 55 | 56 | 57 | 58 | 59 | Quarterly update 60 | 61 | 62 | 63 | 64 | 65 | 66 | Swim in coffee 67 | 68 | 69 | 70 | 71 | 72 | ); 73 | } 74 | -------------------------------------------------------------------------------- /src/components/profile/ProfileButtonMenu.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | Flex, 3 | MenuItem, 4 | MenuList, 5 | Text, 6 | useColorModeValue 7 | } from '@chakra-ui/react'; 8 | import { useUser, useDescope, useSession } from "@descope/react-sdk"; 9 | import { useHistory } from "react-router-dom"; 10 | import { getDisplayName } from "../../utils/user"; 11 | 12 | export default function ProfileButtonMenu() { 13 | const { isAuthenticated } = useSession(); 14 | const { user } = useUser() 15 | const { logout } = useDescope(); 16 | let history = useHistory(); 17 | 18 | function logoutUser() { 19 | logout(); 20 | } 21 | 22 | let menuBg = useColorModeValue('white', 'navy.800'); 23 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 24 | const borderColor = useColorModeValue('#E6ECFA', 'rgba(135, 140, 189, 0.3)'); 25 | const shadow = useColorModeValue( 26 | '14px 17px 40px 4px rgba(112, 144, 176, 0.18)', 27 | '14px 17px 40px 4px rgba(112, 144, 176, 0.06)' 28 | ); 29 | const gotoSignIn = () => { 30 | history.push("/auth/sign-in"); 31 | }; 32 | const gotoSignUp = () => { 33 | history.push("/auth/sign-up"); 34 | }; 35 | 36 | return ( 37 | 45 | {isAuthenticated && ( 46 | <> 47 | 48 | 59 | 👋  Hey, {getDisplayName(user)} 60 | 61 | 62 | 63 | 71 | Log out 72 | 73 | 74 | 75 | )} 76 | {!isAuthenticated && process.env.REACT_APP_DESCOPE_SIGN_UP_FLOW_ID && ( 77 | 78 | 85 | Sign Up 86 | 87 | 88 | )} 89 | {!isAuthenticated && ( 90 | 91 | 98 | Sign In 99 | 100 | 101 | )} 102 | 103 | ); 104 | } 105 | -------------------------------------------------------------------------------- /src/views/admin/default/components/PieCard.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Flex, Text, Select, useColorModeValue } from '@chakra-ui/react'; 3 | // Custom components 4 | import Card from 'components/card/Card'; 5 | import PieChart from 'components/charts/PieChart'; 6 | import { pieChartData, pieChartOptions } from 'variables/charts'; 7 | import { VSeparator } from 'components/separator/Separator'; 8 | export default function Conversion(props: { [x: string]: any }) { 9 | const { ...rest } = props; 10 | 11 | // Chakra Color Mode 12 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 13 | const cardColor = useColorModeValue('white', 'navy.700'); 14 | const cardShadow = useColorModeValue('0px 18px 40px rgba(112, 144, 176, 0.12)', 'unset'); 15 | return ( 16 | 17 | 23 | 24 | Market Breakdown 25 | 26 | 31 | 32 | 33 | 34 | 43 | 44 | 45 | 46 | 47 | US 48 | 49 | 50 | 51 | 63% 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | Canada 60 | 61 | 62 | 63 | 25% 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | Other Markets 72 | 73 | 74 | 75 | 12% 76 | 77 | 78 | 79 | 80 | ); 81 | } 82 | -------------------------------------------------------------------------------- /src/views/admin/default/components/Tasks.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Flex, Text, Icon, useColorModeValue, Checkbox } from '@chakra-ui/react'; 3 | // Custom components 4 | import Card from 'components/card/Card'; 5 | import Menu from 'components/menu/MainMenu'; 6 | import IconBox from 'components/icons/IconBox'; 7 | 8 | // Assets 9 | import { MdCheckBox, MdDragIndicator } from 'react-icons/md'; 10 | 11 | export default function Conversion(props: { [x: string]: any }) { 12 | const { ...rest } = props; 13 | 14 | // Chakra Color Mode 15 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 16 | const boxBg = useColorModeValue('secondaryGray.300', 'navy.700'); 17 | const brandColor = useColorModeValue('brand.500', 'brand.400'); 18 | return ( 19 | 20 | 21 | } 27 | /> 28 | 29 | 30 | Your Tasks 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | Sentrigo follow-up 39 | 40 | 41 | 42 | 43 | 44 | 45 | Descope onboarding 46 | 47 | 48 | 49 | 50 | 51 | 52 | Solidcore onboarding 53 | 54 | 55 | 56 | 57 | 58 | 59 | Quarterly update 60 | 61 | 62 | 63 | 64 | 65 | 66 | Swim in coffee 67 | 68 | 69 | 70 | 71 | 72 | ); 73 | } 74 | -------------------------------------------------------------------------------- /src/components/sidebar/components/Links.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | import { NavLink, useLocation } from 'react-router-dom'; 4 | // chakra imports 5 | import { Box, Flex, HStack, Text, useColorModeValue } from '@chakra-ui/react'; 6 | 7 | export function SidebarLinks(props: { 8 | routes: RoutesType[]; 9 | }) { 10 | // Chakra color mode 11 | let location = useLocation(); 12 | let activeColor = useColorModeValue('gray.700', 'white'); 13 | let inactiveColor = useColorModeValue('secondaryGray.600', 'secondaryGray.600'); 14 | let activeIcon = useColorModeValue('brand.500', 'white'); 15 | let textColor = useColorModeValue('secondaryGray.500', 'white'); 16 | let brandColor = useColorModeValue('brand.500', 'brand.400'); 17 | 18 | const { routes } = props; 19 | 20 | // verifies if routeName is the one active (in browser input) 21 | const activeRoute = (routeName: string) => { 22 | return location.pathname.includes(routeName); 23 | }; 24 | 25 | // this function creates the links from the secondary accordions (for example auth -> sign-in -> default) 26 | const createLinks = ( 27 | routes: RoutesType[], 28 | ) => { 29 | return routes.map( 30 | ( 31 | route: RoutesType, 32 | index: number 33 | ) => { 34 | if (route.layout === '/admin' || route.layout === '/auth' || route.layout === '/rtl') { 35 | return ( 36 | 37 | {route.icon ? ( 38 | 39 | 43 | 44 | 47 | {route.icon} 48 | 49 | 53 | {route.name} 54 | 55 | 56 | 62 | 63 | 64 | ) : ( 65 | 66 | 70 | 74 | {route.name} 75 | 76 | 77 | 78 | 79 | )} 80 | 81 | ); 82 | } 83 | } 84 | ); 85 | }; 86 | // BRAND 87 | return <>{createLinks(routes)} 88 | } 89 | 90 | export default SidebarLinks; 91 | -------------------------------------------------------------------------------- /src/views/admin/default/components/TotalSpent.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Button, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react'; 3 | // Custom components 4 | import Card from 'components/card/Card'; 5 | import LineChart from 'components/charts/LineChart'; 6 | import { IoCheckmarkCircle } from 'react-icons/io5'; 7 | import { MdBarChart, MdOutlineCalendarToday } from 'react-icons/md'; 8 | // Assets 9 | import { RiArrowUpSFill } from 'react-icons/ri'; 10 | import { lineChartDataTotalSpent, lineChartOptionsTotalSpent } from 'variables/charts'; 11 | 12 | export default function TotalSpent(props: { [x: string]: any }) { 13 | const { ...rest } = props; 14 | 15 | // Chakra Color Mode 16 | 17 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 18 | const textColorSecondary = useColorModeValue('secondaryGray.600', 'white'); 19 | const boxBg = useColorModeValue('secondaryGray.300', 'whiteAlpha.100'); 20 | const iconColor = useColorModeValue('brand.500', 'white'); 21 | const bgButton = useColorModeValue('secondaryGray.300', 'whiteAlpha.100'); 22 | const bgHover = useColorModeValue({ bg: 'secondaryGray.400' }, { bg: 'whiteAlpha.50' }); 23 | const bgFocus = useColorModeValue({ bg: 'secondaryGray.300' }, { bg: 'whiteAlpha.100' }); 24 | return ( 25 | 26 | 27 | 31 | 46 | 47 | 48 | 49 | 50 | $37.5K 51 | 52 | 53 | 54 | Total Spent 55 | 56 | 57 | 58 | 59 | +2.45% 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | On track 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | ); 77 | } 78 | -------------------------------------------------------------------------------- /src/views/admin/rtl/components/TotalSpent.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Box, Button, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react'; 3 | // Custom components 4 | import Card from 'components/card/Card'; 5 | import LineChart from 'components/charts/LineChart'; 6 | import { IoCheckmarkCircle } from 'react-icons/io5'; 7 | import { MdBarChart, MdOutlineCalendarToday } from 'react-icons/md'; 8 | // Assets 9 | import { RiArrowUpSFill } from 'react-icons/ri'; 10 | import { lineChartDataTotalSpent, lineChartOptionsTotalSpent } from 'variables/charts'; 11 | 12 | export default function TotalSpent(props: { [x: string]: any }) { 13 | const { ...rest } = props; 14 | 15 | // Chakra Color Mode 16 | 17 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 18 | const textColorSecondary = useColorModeValue('secondaryGray.600', 'white'); 19 | const boxBg = useColorModeValue('secondaryGray.300', 'whiteAlpha.100'); 20 | const iconColor = useColorModeValue('brand.500', 'white'); 21 | const bgButton = useColorModeValue('secondaryGray.300', 'whiteAlpha.100'); 22 | const bgHover = useColorModeValue({ bg: 'secondaryGray.400' }, { bg: 'whiteAlpha.50' }); 23 | const bgFocus = useColorModeValue({ bg: 'secondaryGray.300' }, { bg: 'whiteAlpha.100' }); 24 | return ( 25 | 26 | 27 | 28 | 32 | 47 | 48 | 49 | 50 | 51 | 52 | $37.5K 53 | 54 | 55 | 56 | Total Spent 57 | 58 | 59 | 60 | 61 | +2.45% 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | On track 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | ); 79 | } 80 | -------------------------------------------------------------------------------- /src/views/admin/dataTables/index.jsx: -------------------------------------------------------------------------------- 1 | import { Box, SimpleGrid, useColorMode } from "@chakra-ui/react"; 2 | import CheckTable from "views/admin/dataTables/components/CheckTable"; 3 | import ColumnsTable from "views/admin/dataTables/components/ColumnsTable"; 4 | import ComplexTable from "views/admin/dataTables/components/ComplexTable"; 5 | import DevelopmentTable from "views/admin/dataTables/components/DevelopmentTable"; 6 | import { 7 | columnsDataCheck, 8 | columnsDataColumns, 9 | columnsDataComplex, columnsDataDevelopment 10 | } from "views/admin/dataTables/variables/columnsData"; 11 | import { useState } from "react"; 12 | import { AdminExperience } from "components/adminExperience/index"; 13 | import { Descope } from "@descope/react-sdk"; 14 | import { getSessionToken } from '@descope/react-sdk'; 15 | 16 | export default function Settings() { 17 | const [data, setData] = useState({ 18 | check: [], 19 | columns: [], 20 | development: [], 21 | complex: [], 22 | loaded: false, 23 | }); 24 | const { colorMode } = useColorMode(); 25 | 26 | const [authenticationFlow, setAuthenticationFlow] = useState(false); 27 | const projectId = localStorage.getItem('projectId') || process.env.REACT_APP_DESCOPE_PROJECT_ID; 28 | const sessionToken = getSessionToken(); 29 | 30 | if (!data.loaded) { 31 | fetch("/api/data", { 32 | method: "get", 33 | headers: { 34 | Accept: "application/json, text/plain, */*", 35 | "Content-Type": "application/json", 36 | "x-project-id": projectId, 37 | Authorization: `Bearer ${sessionToken}`, 38 | }, 39 | }) 40 | .then((response) => { 41 | if (response.status === 401) { 42 | setAuthenticationFlow(true); 43 | } else { 44 | setAuthenticationFlow(false); 45 | return response.json(); 46 | } 47 | }) 48 | .then((res) => { 49 | if (res) { 50 | res.body.loaded = true; 51 | setData(res.body); 52 | setAuthenticationFlow(false); 53 | } 54 | }) 55 | .catch((err) => console.log('err => ', err)); 56 | } 57 | 58 | return ( 59 | 60 | 65 | { 66 | authenticationFlow ? 67 | 68 | { 71 | console.log('success => ', e) 72 | }} 73 | onError={(e) => console.log("Error!")} 74 | theme={ colorMode } 75 | /> 76 | 77 | : 78 | <> 79 | 83 | 84 | 88 | 92 | 93 | } 94 | 95 | 96 | 97 | 98 | 99 | ); 100 | } 101 | -------------------------------------------------------------------------------- /src/theme/components/button.ts: -------------------------------------------------------------------------------- 1 | import { mode } from '@chakra-ui/theme-tools'; 2 | export const buttonStyles = { 3 | components: { 4 | Button: { 5 | baseStyle: { 6 | borderRadius: '16px', 7 | boxShadow: '45px 76px 113px 7px rgba(112, 144, 176, 0.08)', 8 | transition: '.25s all ease', 9 | boxSizing: 'border-box', 10 | _focus: { 11 | boxShadow: 'none' 12 | }, 13 | _active: { 14 | boxShadow: 'none' 15 | } 16 | }, 17 | variants: { 18 | outline: () => ({ 19 | borderRadius: '16px' 20 | }), 21 | brand: (props: any) => ({ 22 | bg: mode('brand.500', 'brand.400')(props), 23 | color: 'white', 24 | _focus: { 25 | bg: mode('brand.500', 'brand.400')(props) 26 | }, 27 | _active: { 28 | bg: mode('brand.500', 'brand.400')(props) 29 | }, 30 | _hover: { 31 | bg: mode('brand.600', 'brand.400')(props) 32 | } 33 | }), 34 | darkBrand: (props: any) => ({ 35 | bg: mode('brand.900', 'brand.400')(props), 36 | color: 'white', 37 | _focus: { 38 | bg: mode('brand.900', 'brand.400')(props) 39 | }, 40 | _active: { 41 | bg: mode('brand.900', 'brand.400')(props) 42 | }, 43 | _hover: { 44 | bg: mode('brand.800', 'brand.400')(props) 45 | } 46 | }), 47 | lightBrand: (props: any) => ({ 48 | bg: mode('#F2EFFF', 'whiteAlpha.100')(props), 49 | color: mode('brand.500', 'white')(props), 50 | _focus: { 51 | bg: mode('#F2EFFF', 'whiteAlpha.100')(props) 52 | }, 53 | _active: { 54 | bg: mode('secondaryGray.300', 'whiteAlpha.100')(props) 55 | }, 56 | _hover: { 57 | bg: mode('secondaryGray.400', 'whiteAlpha.200')(props) 58 | } 59 | }), 60 | light: (props: any) => ({ 61 | bg: mode('secondaryGray.300', 'whiteAlpha.100')(props), 62 | color: mode('secondaryGray.900', 'white')(props), 63 | _focus: { 64 | bg: mode('secondaryGray.300', 'whiteAlpha.100')(props) 65 | }, 66 | _active: { 67 | bg: mode('secondaryGray.300', 'whiteAlpha.100')(props) 68 | }, 69 | _hover: { 70 | bg: mode('secondaryGray.400', 'whiteAlpha.200')(props) 71 | } 72 | }), 73 | action: (props: any) => ({ 74 | fontWeight: '500', 75 | borderRadius: '50px', 76 | bg: mode('secondaryGray.300', 'brand.400')(props), 77 | color: mode('brand.500', 'white')(props), 78 | _focus: { 79 | bg: mode('secondaryGray.300', 'brand.400')(props) 80 | }, 81 | _active: { bg: mode('secondaryGray.300', 'brand.400')(props) }, 82 | _hover: { 83 | bg: mode('secondaryGray.200', 'brand.400')(props) 84 | } 85 | }), 86 | setup: (props: any) => ({ 87 | fontWeight: '500', 88 | borderRadius: '50px', 89 | bg: mode('transparent', 'brand.400')(props), 90 | border: mode('1px solid', '0px solid')(props), 91 | borderColor: mode('secondaryGray.400', 'transparent')(props), 92 | color: mode('secondaryGray.900', 'white')(props), 93 | _focus: { 94 | bg: mode('transparent', 'brand.400')(props) 95 | }, 96 | _active: { bg: mode('transparent', 'brand.400')(props) }, 97 | _hover: { 98 | bg: mode('secondaryGray.100', 'brand.400')(props) 99 | } 100 | }) 101 | } 102 | } 103 | } 104 | }; 105 | -------------------------------------------------------------------------------- /src/components/loginExperience/LoginExperience.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Accordion, 3 | AccordionButton, 4 | AccordionIcon, 5 | AccordionItem, 6 | AccordionPanel, 7 | Box, 8 | Tab, 9 | TabList, 10 | TabPanel, 11 | TabPanels, 12 | Tabs, 13 | Text, 14 | } from "@chakra-ui/react"; 15 | import { Flows } from "./Flows"; 16 | import { Sdk } from "./Sdk"; 17 | import { Api } from "./Api"; 18 | 19 | export function LoginExperience() { 20 | 21 | return ( 22 | 31 | 32 | 37 | 38 | 45 | Interested to learn how we built this login experience? 46 | 47 | 48 | 49 | 50 | 51 | 57 | This login experience was built using Descope Flows. You also have 58 | several other ways of implementing login with Descope – choose 59 | whichever one best fits your needs. 60 |
61 | The Dolrr app is open source and available on GitHub 62 | here: https://github.com/descope-sample-apps/b2b-sample-app 63 | 64 | 65 | 71 | 72 | 73 | Flows 74 | 75 | 76 | SDKs 77 | 78 | 79 | API 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | ); 99 | } 100 | -------------------------------------------------------------------------------- /src/components/sidebar/Sidebar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // chakra imports 4 | import { 5 | Box, 6 | Flex, 7 | Drawer, 8 | DrawerBody, 9 | Icon, 10 | useColorModeValue, 11 | DrawerOverlay, 12 | useDisclosure, 13 | DrawerContent, 14 | DrawerCloseButton 15 | } from '@chakra-ui/react'; 16 | import Content from 'components/sidebar/components/Content'; 17 | import { renderThumb, renderTrack, renderView } from 'components/scrollbar/Scrollbar'; 18 | import { Scrollbars } from 'react-custom-scrollbars-2'; 19 | 20 | // Assets 21 | import { IoMenuOutline } from 'react-icons/io5'; 22 | 23 | function Sidebar(props: { routes: RoutesType[]; [x: string]: any }) { 24 | const { routes } = props; 25 | 26 | let variantChange = '0.2s linear'; 27 | let shadow = useColorModeValue('14px 17px 40px 4px rgba(112, 144, 176, 0.08)', 'unset'); 28 | // Chakra Color Mode 29 | let sidebarBg = useColorModeValue('white', 'navy.800'); 30 | let sidebarMargins = '0px'; 31 | 32 | const routesShow = routes.filter(route => route.layout==="/admin"); 33 | 34 | // SIDEBAR 35 | return ( 36 | 37 | 46 | 51 | 52 | 53 | 54 | 55 | ); 56 | } 57 | 58 | // FUNCTIONS 59 | export function SidebarResponsive(props: { routes: RoutesType[] }) { 60 | let sidebarBackgroundColor = useColorModeValue('white', 'navy.800'); 61 | let menuColor = useColorModeValue('gray.400', 'white'); 62 | // // SIDEBAR 63 | const { isOpen, onOpen, onClose } = useDisclosure(); 64 | const btnRef = React.useRef(); 65 | 66 | const { routes } = props; 67 | const routesShow = routes.filter(route => route.layout==="/admin"); 68 | 69 | // let isWindows = navigator.platform.startsWith("Win"); 70 | // BRAND 71 | 72 | return ( 73 | 74 | 75 | 84 | 85 | 90 | 91 | 92 | 98 | 99 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | ); 111 | } 112 | // PROPS 113 | 114 | export default Sidebar; 115 | -------------------------------------------------------------------------------- /src/components/welcomeModal/WelcomeModal.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | Modal, 4 | ModalBody, 5 | ModalCloseButton, 6 | ModalContent, 7 | ModalHeader, 8 | ModalOverlay, 9 | useColorModeValue, 10 | Text, 11 | ListItem, 12 | UnorderedList, 13 | } from "@chakra-ui/react"; 14 | import { useEffect, useState } from "react"; 15 | 16 | export default function WelcomeModal() { 17 | const [isModalOpen, setIsModalOpen] = useState(false); 18 | const textColor = useColorModeValue('secondaryGray.1000', 'white'); 19 | const closeIconColor = useColorModeValue('blue.60', 'white'); 20 | const modalHeaderColor = useColorModeValue('blue.60', 'brand.400'); 21 | const showModal = () => { 22 | setIsModalOpen(true); 23 | }; 24 | 25 | const handleCancel = () => { 26 | setIsModalOpen(false); 27 | }; 28 | 29 | useEffect(() => { 30 | if (sessionStorage.getItem("firstVisit") !== "1") { 31 | showModal(); 32 | sessionStorage.setItem("firstVisit", "1"); 33 | } 34 | }, []); 35 | return ( 36 | 37 | 38 | 39 | 45 | 53 | Welcome to Dolrr! 54 | 55 | 56 | 57 | 65 | This is a sample B2B app built by Descope.
66 | We hope this app can give you an idea of how Descope can help your B2B app
with seamless and secure authentication.

67 | 68 | 69 | 77 | 78 | Here are some authentication flows you can explore: 79 | 80 | 81 | Try signing up 82 | Try accessing the Admin Dashboard to experience a “Step Up” flow 83 | 84 | 85 | 93 | Currently using Descope Flows from Project ID: {localStorage.getItem('projectId') ? localStorage.getItem('projectId') : 'Descope default project'} 94 | 95 | 96 | 97 | 98 | 99 | 100 | ); 101 | } 102 | -------------------------------------------------------------------------------- /src/components/menu/TransparentMenu.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // Chakra imports 4 | import { 5 | Menu, 6 | MenuButton, 7 | MenuItem, 8 | MenuList, 9 | useDisclosure, 10 | useColorModeValue, 11 | Flex, 12 | Icon, 13 | Text 14 | } from '@chakra-ui/react'; 15 | // Assets 16 | import { MdOutlinePerson, MdOutlineCardTravel, MdOutlineLightbulb, MdOutlineSettings } from 'react-icons/md'; 17 | export default function Banner(props: { icon: JSX.Element | string; [x: string]: any }) { 18 | const { icon, ...rest } = props; 19 | 20 | // Ellipsis modals 21 | const { isOpen: isOpen1, onOpen: onOpen1, onClose: onClose1 } = useDisclosure(); 22 | 23 | // Chakra color mode 24 | 25 | const textColor = useColorModeValue('secondaryGray.500', 'white'); 26 | const textHover = useColorModeValue( 27 | { color: 'secondaryGray.900', bg: 'unset' }, 28 | { color: 'secondaryGray.500', bg: 'unset' } 29 | ); 30 | const bgList = useColorModeValue('white', 'whiteAlpha.100'); 31 | const bgShadow = useColorModeValue('14px 17px 40px 4px rgba(112, 144, 176, 0.08)', 'unset'); 32 | 33 | return ( 34 | 35 | 36 | {icon} 37 | 38 | 48 | 61 | 62 | 63 | 64 | Panel 1 65 | 66 | 67 | 68 | 81 | 82 | 83 | 84 | Panel 2 85 | 86 | 87 | 88 | 101 | 102 | 103 | 104 | Panel 3 105 | 106 | 107 | 108 | 120 | 121 | 122 | 123 | Panel 4 124 | 125 | 126 | 127 | 128 | 129 | ); 130 | } 131 | -------------------------------------------------------------------------------- /src/views/admin/profile/index.tsx: -------------------------------------------------------------------------------- 1 | /*! 2 | _ _ ___ ____ ___ ________ _ _ _ _ ___ 3 | | | | |/ _ \| _ \|_ _|__ / _ \| \ | | | | | |_ _| 4 | | |_| | | | | |_) || | / / | | | \| | | | | || | 5 | | _ | |_| | _ < | | / /| |_| | |\ | | |_| || | 6 | |_| |_|\___/|_| \_\___/____\___/|_| \_| \___/|___| 7 | 8 | ========================================================= 9 | * Horizon UI - v1.1.0 10 | ========================================================= 11 | 12 | * Product Page: https://www.horizon-ui.com/ 13 | * Copyright 2022 Horizon UI (https://www.horizon-ui.com/) 14 | 15 | * Designed and Coded by Simmmple 16 | 17 | ========================================================= 18 | 19 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 20 | 21 | */ 22 | 23 | // Chakra imports 24 | import { Box, Grid } from '@chakra-ui/react'; 25 | 26 | // Custom components 27 | import Banner from 'views/admin/profile/components/Banner'; 28 | import General from 'views/admin/profile/components/General'; 29 | import Notifications from 'views/admin/profile/components/Notifications'; 30 | import Projects from 'views/admin/profile/components/Projects'; 31 | import Storage from 'views/admin/profile/components/Storage'; 32 | import Upload from 'views/admin/profile/components/Upload'; 33 | 34 | // Assets 35 | import banner from 'assets/img/auth/banner.png'; 36 | import avatar from 'assets/img/avatars/avatar4.png'; 37 | 38 | export default function Overview() { 39 | return ( 40 | 41 | {/* Main Fields */} 42 | 52 | 62 | 63 | 72 | 73 | 86 | 95 | 96 | 105 | 106 | 107 | ); 108 | } 109 | -------------------------------------------------------------------------------- /src/layouts/rtl/index.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Portal, Box, useDisclosure } from '@chakra-ui/react'; 3 | // Layout components 4 | import Navbar from 'components/navbar/NavbarRTL'; 5 | import Sidebar from 'components/sidebar/Sidebar'; 6 | import { RtlProvider } from 'components/rtlProvider/RtlProvider'; 7 | import { SidebarContext } from 'contexts/SidebarContext'; 8 | import { useState } from 'react'; 9 | import { Redirect, Route, Switch } from 'react-router-dom'; 10 | import routes from 'routes'; 11 | 12 | // Custom Chakra theme 13 | export default function Dashboard(props: { [x: string]: any }) { 14 | const { ...rest } = props; 15 | // states and functions 16 | const [ fixed ] = useState(false); 17 | const [ toggleSidebar, setToggleSidebar ] = useState(false); 18 | // functions for changing the states from components 19 | const getRoute = () => { 20 | return window.location.pathname !== '/rtl/full-screen-maps'; 21 | }; 22 | const getActiveRoute = (routes: RoutesType[]): string => { 23 | let activeRoute = 'Default Brand Text'; 24 | for (let i = 0; i < routes.length; i++) { 25 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) { 26 | return routes[i].name; 27 | } 28 | } 29 | return activeRoute; 30 | }; 31 | const getActiveNavbar = (routes: RoutesType[]): boolean => { 32 | let activeNavbar = false; 33 | for (let i = 0; i < routes.length; i++) { 34 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) { 35 | return routes[i].secondary; 36 | } 37 | } 38 | return activeNavbar; 39 | }; 40 | const getActiveNavbarText = (routes: RoutesType[]): string | boolean => { 41 | let activeNavbar = false; 42 | for (let i = 0; i < routes.length; i++) { 43 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) { 44 | return routes[i].name; 45 | } 46 | } 47 | return activeNavbar; 48 | }; 49 | const getRoutes = (routes: RoutesType[]): any => { 50 | return routes.map((route: RoutesType, key: any) => { 51 | if (route.layout === '/rtl') { 52 | return ; 53 | } else { 54 | return null; 55 | } 56 | }); 57 | }; 58 | document.documentElement.dir = 'rtl'; 59 | const { onOpen } = useDisclosure(); 60 | return ( 61 | 62 | 67 | 68 | 81 | 82 | 83 | 92 | 93 | 94 | 95 | {getRoute() ? ( 96 | 97 | 98 | {getRoutes(routes)} 99 | 100 | 101 | 102 | ) : null} 103 | 104 | 105 | 106 | ); 107 | } 108 | -------------------------------------------------------------------------------- /src/components/loginExperience/Flows.tsx: -------------------------------------------------------------------------------- 1 | import { Box, Button, Flex, Image, Modal, ModalBody, ModalCloseButton, ModalContent, useColorModeValue, ModalOverlay, Text } from "@chakra-ui/react"; 2 | import React from "react"; 3 | import flow_image from "../../../src/assets/img/explanationDailogue/flow.jpg"; 4 | import 'assets/css/ExplanationScroll.css'; 5 | 6 | export const Flows = () => { 7 | const [imagePreview, setImagePreview] = React.useState(false); 8 | const closeIconColor = useColorModeValue('blue.60', 'white'); 9 | 10 | const showImage = () => { 11 | setImagePreview(!imagePreview); 12 | } 13 | const code = 14 | `// Wrapping react App with 15 | 16 | 17 | 18 | 19 | // Embedding Descope flow component 20 | { 23 | console.log("Logged in") 24 | console.log("Username", e.detail.user.name) 25 | console.log("Email", e.detail.user.email) 26 | }} 27 | onError={(e) => { 28 | console.log("Error!", e) 29 | } 30 | theme="light" 31 | />`; 32 | 33 | return ( 34 | <> 35 | 36 | 37 | 43 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | With Descope Flows, you can create no-code authentication flows and 55 | user-facing screens directly in the Descope Console. 56 | 57 | 62 | 71 | 72 | 73 | 79 | 
 80 |           
 85 |             {code}
 86 |           
 87 |
88 | 89 | 90 | 95 | 106 | 107 | 108 | 109 | 110 | ); 111 | }; 112 | -------------------------------------------------------------------------------- /src/components/adminExperience/Sdk.tsx: -------------------------------------------------------------------------------- 1 | import { Box, Button, Flex, Text } from "@chakra-ui/react"; 2 | import { useEffect } from "react"; 3 | import "prismjs/themes/prism-tomorrow.css"; 4 | import Prism from 'prismjs'; 5 | import 'assets/css/ExplanationScroll.css'; 6 | 7 | export const Sdk = () => { 8 | 9 | useEffect(() => { 10 | Prism.highlightAll() 11 | }, []) 12 | 13 | // The code snippet you want to highlight, as a string 14 | const code = 15 | `import DescopeClient from "@descope/node-sdk"; 16 | 17 | // Acquiring the authorization header sent by the client 18 | const header = request.headers['authorization']; 19 | const session_token = header?.split(" ")[1] ?? ""; 20 | 21 | const descopeClient = DescopeClient({projectId: YOUR_PROJECT_ID}); 22 | 23 | const jwt = await descopeClient.validateSession(session_token); 24 | 25 | const stepUpConfirmed = (jwt.token.su === true) 26 | if (stepUpCOnfirmed) { 27 | // step up confirmed 28 | } else { 29 | // step up needed 30 | } 31 | `; 32 | return ( 33 | 34 | 35 | 36 | Descope SDKs allow you to validate the provided session token and 37 | extract any claims embedded on it. MFA and Step-Up are built-in 38 | claims that can be acquired as part of the validation process. 39 | 40 | 41 | Additional backend SDKs are available for other languages. 42 | 43 | 44 | 49 | 58 | 59 | 60 | 61 | 67 | 
 68 |           
 73 |             {code}
 74 |           
 75 |
76 | 77 | 78 | 83 | 93 |    94 | 99 | 109 | 110 | 111 | 112 | ); 113 | }; 114 | -------------------------------------------------------------------------------- /src/views/admin/dataTables/components/ColumnsTable.tsx: -------------------------------------------------------------------------------- 1 | import { Flex, Table, Tbody, Td, Text, Th, Thead, Tr, useColorModeValue } from '@chakra-ui/react'; 2 | import React, { useMemo } from 'react'; 3 | import { useGlobalFilter, usePagination, useSortBy, useTable } from 'react-table'; 4 | 5 | // Custom components 6 | import Card from 'components/card/Card'; 7 | import Menu from 'components/menu/MainMenu'; 8 | export default function ColumnsTable(props: { columnsData: any; tableData: any }) { 9 | const { columnsData, tableData } = props; 10 | 11 | const columns = useMemo(() => columnsData, [ columnsData ]); 12 | const data = useMemo(() => tableData, [ tableData ]); 13 | 14 | const tableInstance = useTable( 15 | { 16 | columns, 17 | data 18 | }, 19 | useGlobalFilter, 20 | useSortBy, 21 | usePagination 22 | ); 23 | 24 | const { getTableProps, getTableBodyProps, headerGroups, page, prepareRow, initialState } = tableInstance; 25 | initialState.pageSize = 5; 26 | 27 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 28 | const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100'); 29 | return ( 30 | 31 | 32 | 33 | 4-Column Table 34 | 35 | 36 | 37 | 38 | 39 | {headerGroups.map((headerGroup, index) => ( 40 | 41 | {headerGroup.headers.map((column, index) => ( 42 | 55 | ))} 56 | 57 | ))} 58 | 59 | 60 | {page.map((row, index) => { 61 | prepareRow(row); 62 | return ( 63 | 64 | {row.cells.map((cell, index) => { 65 | let data; 66 | if (cell.column.Header === 'NAME') { 67 | data = ( 68 | 69 | 70 | {cell.value} 71 | 72 | 73 | ); 74 | } else if (cell.column.Header === 'PROGRESS') { 75 | data = ( 76 | 77 | 78 | {cell.value}% 79 | 80 | 81 | ); 82 | } else if (cell.column.Header === 'QUANTITY') { 83 | data = ( 84 | 85 | {cell.value} 86 | 87 | ); 88 | } else if (cell.column.Header === 'DATE') { 89 | data = ( 90 | 91 | {cell.value} 92 | 93 | ); 94 | } 95 | return ( 96 | 104 | ); 105 | })} 106 | 107 | ); 108 | })} 109 | 110 |
47 | 52 | {column.render('Header')} 53 | 54 |
102 | {data} 103 |
111 | 112 | ); 113 | } 114 | -------------------------------------------------------------------------------- /src/views/admin/rtl/components/CheckTable.tsx: -------------------------------------------------------------------------------- 1 | import { Flex, Table, Checkbox, Tbody, Td, Text, Th, Thead, Tr, useColorModeValue } from '@chakra-ui/react'; 2 | import { useMemo } from 'react'; 3 | import { useGlobalFilter, usePagination, useSortBy, useTable } from 'react-table'; 4 | 5 | // Custom components 6 | import Card from 'components/card/Card'; 7 | import Menu from 'components/menu/MainMenu'; 8 | export default function CheckTable(props: { columnsData: any; tableData: any }) { 9 | const { columnsData, tableData } = props; 10 | 11 | const columns = useMemo(() => columnsData, [ columnsData ]); 12 | const data = useMemo(() => tableData, [ tableData ]); 13 | 14 | let tableInstance = useTable( 15 | { 16 | columns, 17 | data 18 | }, 19 | useGlobalFilter, 20 | useSortBy, 21 | usePagination 22 | ); 23 | 24 | const { getTableProps, getTableBodyProps, headerGroups, page, prepareRow, initialState } = tableInstance; 25 | initialState.pageSize = 11; 26 | 27 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 28 | const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100'); 29 | return ( 30 | 31 | 32 | 33 | Revenue by Product 34 | 35 | 36 | 37 | 38 | 39 | {headerGroups.map((headerGroup, index) => ( 40 | 41 | {headerGroup.headers.map((column, index) => ( 42 | 55 | ))} 56 | 57 | ))} 58 | 59 | 60 | {page.map((row, index) => { 61 | prepareRow(row); 62 | return ( 63 | 64 | {row.cells.map((cell, index) => { 65 | let data; 66 | if (cell.column.Header === 'NAME') { 67 | data = ( 68 | 69 | 74 | 75 | {cell.value[0]} 76 | 77 | 78 | ); 79 | } else if (cell.column.Header === 'PROGRESS') { 80 | data = ( 81 | 82 | 83 | {cell.value}% 84 | 85 | 86 | ); 87 | } else if (cell.column.Header === 'QUANTITY') { 88 | data = ( 89 | 90 | {cell.value} 91 | 92 | ); 93 | } else if (cell.column.Header === 'DATE') { 94 | data = ( 95 | 96 | {cell.value} 97 | 98 | ); 99 | } 100 | return ( 101 | 109 | ); 110 | })} 111 | 112 | ); 113 | })} 114 | 115 |
47 | 52 | {column.render('Header')} 53 | 54 |
107 | {data} 108 |
116 | 117 | ); 118 | } 119 | -------------------------------------------------------------------------------- /src/views/admin/dataTables/components/CheckTable.tsx: -------------------------------------------------------------------------------- 1 | import { Flex, Table, Checkbox, Tbody, Td, Text, Th, Thead, Tr, useColorModeValue } from '@chakra-ui/react'; 2 | import React, { useMemo } from 'react'; 3 | import { useGlobalFilter, usePagination, useSortBy, useTable } from 'react-table'; 4 | 5 | // Custom components 6 | import Card from 'components/card/Card'; 7 | import Menu from 'components/menu/MainMenu'; 8 | export default function CheckTable(props: { columnsData: any; tableData: any }) { 9 | const { columnsData, tableData } = props; 10 | 11 | const columns = useMemo(() => columnsData, [ columnsData ]); 12 | const data = useMemo(() => tableData, [ tableData ]); 13 | 14 | const tableInstance = useTable( 15 | { 16 | columns, 17 | data 18 | }, 19 | useGlobalFilter, 20 | useSortBy, 21 | usePagination 22 | ); 23 | 24 | const { getTableProps, getTableBodyProps, headerGroups, page, prepareRow, initialState } = tableInstance; 25 | initialState.pageSize = 11; 26 | 27 | const textColor = useColorModeValue('secondaryGray.900', 'white'); 28 | const borderColor = useColorModeValue('gray.200', 'whiteAlpha.100'); 29 | return ( 30 | 31 | 32 | 33 | Revenue by Product 34 | 35 | 36 | 37 | 38 | 39 | {headerGroups.map((headerGroup, index) => ( 40 | 41 | {headerGroup.headers.map((column, index) => ( 42 | 55 | ))} 56 | 57 | ))} 58 | 59 | 60 | {page.map((row, index) => { 61 | prepareRow(row); 62 | return ( 63 | 64 | {row.cells.map((cell, index) => { 65 | let data; 66 | if (cell.column.Header === 'NAME') { 67 | data = ( 68 | 69 | 74 | 75 | {cell.value[0]} 76 | 77 | 78 | ); 79 | } else if (cell.column.Header === 'QUOTA') { 80 | data = ( 81 | 82 | 83 | {cell.value}% 84 | 85 | 86 | ); 87 | } else if (cell.column.Header === 'COMMISSION') { 88 | data = ( 89 | 90 | {cell.value} 91 | 92 | ); 93 | } else if (cell.column.Header === 'DATE') { 94 | data = ( 95 | 96 | {cell.value} 97 | 98 | ); 99 | } 100 | return ( 101 | 109 | ); 110 | })} 111 | 112 | ); 113 | })} 114 | 115 |
47 | 52 | {column.render('Header')} 53 | 54 |
107 | {data} 108 |
116 | 117 | ); 118 | } 119 | -------------------------------------------------------------------------------- /src/components/card/NFT.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { AvatarGroup, Avatar, Box, Button, Flex, Icon, Image, Link, Text, useColorModeValue } from '@chakra-ui/react'; 3 | // Custom components 4 | import Card from 'components/card/Card'; 5 | // Assets 6 | import { useState } from 'react'; 7 | import { IoHeart, IoHeartOutline } from 'react-icons/io5'; 8 | 9 | export default function NFT(props: { 10 | image: string; 11 | name: string; 12 | author: string; 13 | bidders: string[]; 14 | download: string; 15 | currentbid: string | number; 16 | }) { 17 | const { image, name, author, bidders, download, currentbid } = props; 18 | const [ like, setLike ] = useState(false); 19 | const textColor = useColorModeValue('navy.700', 'white'); 20 | const textColorBid = useColorModeValue('brand.500', 'white'); 21 | return ( 22 | 23 | 24 | 25 | 31 | 54 | 55 | 56 | 66 | 67 | 80 | {name} 81 | 82 | 89 | {author} 90 | 91 | 92 | 104 | {bidders.map((avt, key) => )} 105 | 106 | 107 | 124 | 125 | Current Bid: {currentbid} 126 | 127 | 136 | 146 | 147 | 148 | 149 | 150 | 151 | ); 152 | } 153 | -------------------------------------------------------------------------------- /src/types/react-table-config.d.ts: -------------------------------------------------------------------------------- 1 | import { 2 | UseColumnOrderInstanceProps, 3 | UseColumnOrderState, 4 | UseExpandedHooks, 5 | UseExpandedInstanceProps, 6 | UseExpandedOptions, 7 | UseExpandedRowProps, 8 | UseExpandedState, 9 | UseFiltersColumnOptions, 10 | UseFiltersColumnProps, 11 | UseFiltersInstanceProps, 12 | UseFiltersOptions, 13 | UseFiltersState, 14 | UseGlobalFiltersColumnOptions, 15 | UseGlobalFiltersInstanceProps, 16 | UseGlobalFiltersOptions, 17 | UseGlobalFiltersState, 18 | UseGroupByCellProps, 19 | UseGroupByColumnOptions, 20 | UseGroupByColumnProps, 21 | UseGroupByHooks, 22 | UseGroupByInstanceProps, 23 | UseGroupByOptions, 24 | UseGroupByRowProps, 25 | UseGroupByState, 26 | UsePaginationInstanceProps, 27 | UsePaginationOptions, 28 | UsePaginationState, 29 | UseResizeColumnsColumnOptions, 30 | UseResizeColumnsColumnProps, 31 | UseResizeColumnsOptions, 32 | UseResizeColumnsState, 33 | UseRowSelectHooks, 34 | UseRowSelectInstanceProps, 35 | UseRowSelectOptions, 36 | UseRowSelectRowProps, 37 | UseRowSelectState, 38 | UseRowStateCellProps, 39 | UseRowStateInstanceProps, 40 | UseRowStateOptions, 41 | UseRowStateRowProps, 42 | UseRowStateState, 43 | UseSortByColumnOptions, 44 | UseSortByColumnProps, 45 | UseSortByHooks, 46 | UseSortByInstanceProps, 47 | UseSortByOptions, 48 | UseSortByState 49 | } from 'react-table'; 50 | 51 | declare module 'react-table' { 52 | // take this file as-is, or comment out the sections that don't apply to your plugin configuration 53 | 54 | export interface TableOptions> 55 | extends UseExpandedOptions, 56 | UseFiltersOptions, 57 | UseGlobalFiltersOptions, 58 | UseGroupByOptions, 59 | UsePaginationOptions, 60 | UseResizeColumnsOptions, 61 | UseRowSelectOptions, 62 | UseRowStateOptions, 63 | UseSortByOptions, 64 | // note that having Record here allows you to add anything to the options, this matches the spirit of the 65 | // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your 66 | // feature set, this is a safe default. 67 | Record {} 68 | 69 | export interface Hooks = Record> 70 | extends UseExpandedHooks, 71 | UseGroupByHooks, 72 | UseRowSelectHooks, 73 | UseSortByHooks {} 74 | 75 | export interface TableInstance = Record> 76 | extends UseColumnOrderInstanceProps, 77 | UseExpandedInstanceProps, 78 | UseFiltersInstanceProps, 79 | UseGlobalFiltersInstanceProps, 80 | UseGroupByInstanceProps, 81 | UsePaginationInstanceProps, 82 | UseRowSelectInstanceProps, 83 | UseRowStateInstanceProps, 84 | UseSortByInstanceProps {} 85 | 86 | export interface TableState = Record> 87 | extends UseColumnOrderState, 88 | UseExpandedState, 89 | UseFiltersState, 90 | UseGlobalFiltersState, 91 | UseGroupByState, 92 | UsePaginationState, 93 | UseResizeColumnsState, 94 | UseRowSelectState, 95 | UseRowStateState, 96 | UseSortByState {} 97 | 98 | export interface ColumnInterface = Record> 99 | extends UseFiltersColumnOptions, 100 | UseGlobalFiltersColumnOptions, 101 | UseGroupByColumnOptions, 102 | UseResizeColumnsColumnOptions, 103 | UseSortByColumnOptions {} 104 | 105 | export interface ColumnInstance = Record> 106 | extends UseFiltersColumnProps, 107 | UseGroupByColumnProps, 108 | UseResizeColumnsColumnProps, 109 | UseSortByColumnProps {} 110 | 111 | export interface Cell = Record, V = any> 112 | extends UseGroupByCellProps, 113 | UseRowStateCellProps {} 114 | 115 | export interface Row = Record> 116 | extends UseExpandedRowProps, 117 | UseGroupByRowProps, 118 | UseRowSelectRowProps, 119 | UseRowStateRowProps {} 120 | } 121 | -------------------------------------------------------------------------------- /src/layouts/admin/index.tsx: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Portal, Box, useDisclosure } from '@chakra-ui/react'; 3 | // Layout components 4 | import Navbar from 'components/navbar/NavbarAdmin'; 5 | import Sidebar from 'components/sidebar/Sidebar'; 6 | import { SidebarContext } from 'contexts/SidebarContext'; 7 | import { useEffect, useState } from 'react'; 8 | import { Redirect, Route, Switch } from 'react-router-dom'; 9 | import routes from 'routes'; 10 | import { useSession, useUser } from "@descope/react-sdk"; 11 | import { useHistory } from "react-router-dom"; 12 | 13 | // Custom Chakra theme 14 | export default function Dashboard(props: { [x: string]: any }) { 15 | const { isAuthenticated , isSessionLoading} = useSession(); 16 | const { isUserLoading } = useUser(); 17 | let history = useHistory(); 18 | useEffect(() => { 19 | console.log({isSessionLoading, isAuthenticated, isUserLoading}) 20 | if (!isAuthenticated && !isSessionLoading) { 21 | console.log("moving to /auth") 22 | history.push("/auth"); 23 | } 24 | },[isAuthenticated , isSessionLoading, isUserLoading, history]); 25 | const { ...rest } = props; 26 | // states and functions 27 | const [ fixed ] = useState(false); 28 | const [ toggleSidebar, setToggleSidebar ] = useState(false); 29 | // functions for changing the states from components 30 | const getRoute = () => { 31 | return window.location.pathname !== '/admin/full-screen-maps'; 32 | }; 33 | const getActiveRoute = (routes: RoutesType[]): string => { 34 | let activeRoute = 'Default Brand Text'; 35 | for (let i = 0; i < routes.length; i++) { 36 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) { 37 | return routes[i].name; 38 | } 39 | } 40 | return activeRoute; 41 | }; 42 | const getActiveNavbar = (routes: RoutesType[]): boolean => { 43 | let activeNavbar = false; 44 | for (let i = 0; i < routes.length; i++) { 45 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) { 46 | return routes[i].secondary; 47 | } 48 | } 49 | return activeNavbar; 50 | }; 51 | const getActiveNavbarText = (routes: RoutesType[]): string | boolean => { 52 | let activeNavbar = false; 53 | for (let i = 0; i < routes.length; i++) { 54 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) { 55 | return routes[i].name; 56 | } 57 | } 58 | return activeNavbar; 59 | }; 60 | const getRoutes = (routes: RoutesType[]): any => { 61 | return routes.map((route: RoutesType, key: any) => { 62 | if (route.layout === '/admin') { 63 | return ; 64 | } else { 65 | return null; 66 | } 67 | }); 68 | }; 69 | document.documentElement.dir = 'ltr'; 70 | const { onOpen } = useDisclosure(); 71 | return ( 72 | 73 | 78 | 79 | 92 | 93 | 94 | 103 | 104 | 105 | 106 | {getRoute() ? ( 107 | 108 | 109 | {getRoutes(routes)} 110 | 111 | 112 | 113 | ) : null} 114 | 115 | 116 | 117 | ); 118 | } 119 | -------------------------------------------------------------------------------- /src/components/menu/MainMenu.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // Chakra imports 4 | import { 5 | Icon, 6 | Flex, 7 | Text, 8 | Menu, 9 | MenuButton, 10 | MenuItem, 11 | MenuList, 12 | useDisclosure, 13 | useColorModeValue 14 | } from '@chakra-ui/react'; 15 | // Assets 16 | import { 17 | MdOutlineMoreHoriz, 18 | MdOutlinePerson, 19 | MdOutlineCardTravel, 20 | MdOutlineLightbulb, 21 | MdOutlineSettings 22 | } from 'react-icons/md'; 23 | 24 | export default function Banner(props: { [x: string]: any }) { 25 | const { ...rest } = props; 26 | 27 | const textColor = useColorModeValue('secondaryGray.500', 'white'); 28 | const textHover = useColorModeValue( 29 | { color: 'secondaryGray.900', bg: 'unset' }, 30 | { color: 'secondaryGray.500', bg: 'unset' } 31 | ); 32 | const iconColor = useColorModeValue('brand.500', 'white'); 33 | const bgList = useColorModeValue('white', 'whiteAlpha.100'); 34 | const bgShadow = useColorModeValue('14px 17px 40px 4px rgba(112, 144, 176, 0.08)', 'unset'); 35 | const bgButton = useColorModeValue('secondaryGray.300', 'whiteAlpha.100'); 36 | const bgHover = useColorModeValue({ bg: 'secondaryGray.400' }, { bg: 'whiteAlpha.50' }); 37 | const bgFocus = useColorModeValue({ bg: 'secondaryGray.300' }, { bg: 'whiteAlpha.100' }); 38 | 39 | // Ellipsis modals 40 | const { isOpen: isOpen1, onOpen: onOpen1, onClose: onClose1 } = useDisclosure(); 41 | 42 | return ( 43 | 44 | 57 | 58 | 59 | 69 | 82 | 83 | 84 | 85 | Panel 1 86 | 87 | 88 | 89 | 102 | 103 | 104 | 105 | Panel 2 106 | 107 | 108 | 109 | 122 | 123 | 124 | 125 | Panel 3 126 | 127 | 128 | 129 | 141 | 142 | 143 | 144 | Panel 4 145 | 146 | 147 | 148 | 149 | 150 | ); 151 | } 152 | -------------------------------------------------------------------------------- /src/views/admin/default/index.tsx: -------------------------------------------------------------------------------- 1 | import { Avatar, Box, Flex, FormLabel, Icon, Select, SimpleGrid, useColorModeValue } from '@chakra-ui/react'; 2 | import Usa from 'assets/img/dashboards/usa.png'; 3 | import MiniCalendar from 'components/calendar/MiniCalendar'; 4 | import MiniStatistics from 'components/card/MiniStatistics'; 5 | import IconBox from 'components/icons/IconBox'; 6 | import { MdAddTask, MdAttachMoney, MdBarChart, MdFileCopy } from 'react-icons/md'; 7 | import CheckTable from 'views/admin/default/components/CheckTable'; 8 | import ComplexTable from 'views/admin/default/components/ComplexTable'; 9 | import DailyTraffic from 'views/admin/default/components/DailyTraffic'; 10 | import PieCard from 'views/admin/default/components/PieCard'; 11 | import Tasks from 'views/admin/default/components/Tasks'; 12 | import TotalSpent from 'views/admin/default/components/TotalSpent'; 13 | import WeeklyRevenue from 'views/admin/default/components/WeeklyRevenue'; 14 | import { columnsDataCheck, columnsDataComplex } from 'views/admin/default/variables/columnsData'; 15 | import tableDataCheck from 'views/admin/default/variables/tableDataCheck.json'; 16 | import tableDataComplex from 'views/admin/default/variables/tableDataComplex.json'; 17 | 18 | export default function UserReports() { 19 | const brandColor = useColorModeValue('brand.500', 'white'); 20 | const boxBg = useColorModeValue('secondaryGray.300', 'whiteAlpha.100'); 21 | return ( 22 | 23 | 24 | } 31 | /> 32 | } 33 | name='Revenue' 34 | value='$350.4' 35 | /> 36 | } 43 | /> 44 | } 45 | name='Pipeline' 46 | value='$642.39' 47 | /> 48 | 49 | 52 | 53 | 54 | 55 | 60 | 61 | } 62 | name='Top Market' 63 | value='$1,000' 64 | /> 65 | } 72 | /> 73 | } 74 | name='New Deals' 75 | value='154' 76 | /> 77 | } 84 | /> 85 | } 86 | name='Total Deals' 87 | value='2935' 88 | /> 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | ); 111 | } 112 | -------------------------------------------------------------------------------- /src/components/navbar/NavbarRTL.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | // Chakra Imports 3 | import { Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Flex, Link, Text, useColorModeValue } from '@chakra-ui/react'; 4 | import { useState, useEffect } from 'react'; 5 | import AdminNavbarLinks from 'components/navbar/NavbarLinksAdmin'; 6 | 7 | export default function AdminNavbar(props: { 8 | secondary: boolean; 9 | message: string|boolean; 10 | brandText: string; 11 | logoText: string; 12 | fixed: boolean; 13 | onOpen: (...args: any[]) => any; 14 | }) { 15 | const [ scrolled, setScrolled ] = useState(false); 16 | 17 | useEffect(() => { 18 | window.addEventListener('scroll', changeNavbar); 19 | 20 | return () => { 21 | window.removeEventListener('scroll', changeNavbar); 22 | }; 23 | }); 24 | 25 | const { secondary, brandText } = props; 26 | 27 | // Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled) 28 | let mainText = useColorModeValue('navy.700', 'white'); 29 | let secondaryText = useColorModeValue('gray.700', 'white'); 30 | let navbarPosition = 'fixed' as const; 31 | let navbarFilter = 'none'; 32 | let navbarBackdrop = 'blur(20px)'; 33 | let navbarShadow = 'none'; 34 | let navbarBg = useColorModeValue('rgba(244, 247, 254, 0.2)', 'rgba(11,20,55,0.5)'); 35 | let navbarBorder = 'transparent'; 36 | let secondaryMargin = '0px'; 37 | let paddingX = '15px'; 38 | let gap = '0px'; 39 | const changeNavbar = () => { 40 | if (window.scrollY > 1) { 41 | setScrolled(true); 42 | } else { 43 | setScrolled(false); 44 | } 45 | }; 46 | 47 | return ( 48 | 89 | 97 | 98 | 99 | 100 | 101 | Pages 102 | 103 | 104 | 105 | 106 | 107 | {brandText} 108 | 109 | 110 | 111 | {/* Here we create navbar brand, based on route name */} 112 | 128 | {brandText} 129 | 130 | 131 | 132 | 137 | 138 | 139 | 140 | ); 141 | } 142 | -------------------------------------------------------------------------------- /src/components/navbar/NavbarAdmin.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | // Chakra Imports 3 | import { Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Flex, Link, Text, useColorModeValue } from '@chakra-ui/react'; 4 | import { useState, useEffect } from 'react'; 5 | import AdminNavbarLinks from 'components/navbar/NavbarLinksAdmin'; 6 | 7 | export default function AdminNavbar(props: { 8 | secondary: boolean; 9 | message: string|boolean; 10 | brandText: string; 11 | logoText: string; 12 | fixed: boolean; 13 | onOpen: (...args: any[]) => any; 14 | }) { 15 | const [ scrolled, setScrolled ] = useState(false); 16 | 17 | useEffect(() => { 18 | window.addEventListener('scroll', changeNavbar); 19 | 20 | return () => { 21 | window.removeEventListener('scroll', changeNavbar); 22 | }; 23 | }); 24 | 25 | const { secondary, brandText } = props; 26 | 27 | // Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled) 28 | let mainText = useColorModeValue('navy.700', 'white'); 29 | let secondaryText = useColorModeValue('gray.700', 'white'); 30 | let navbarPosition = 'fixed' as const; 31 | let navbarFilter = 'none'; 32 | let navbarBackdrop = 'blur(20px)'; 33 | let navbarShadow = 'none'; 34 | let navbarBg = useColorModeValue('rgba(244, 247, 254, 0.2)', 'rgba(11,20,55,0.5)'); 35 | let navbarBorder = 'transparent'; 36 | let secondaryMargin = '0px'; 37 | let paddingX = '15px'; 38 | let gap = '0px'; 39 | const changeNavbar = () => { 40 | if (window.scrollY > 1) { 41 | setScrolled(true); 42 | } else { 43 | setScrolled(false); 44 | } 45 | }; 46 | 47 | return ( 48 | 89 | 97 | 98 | 99 | 100 | 101 | Pages 102 | 103 | 104 | 105 | 106 | 107 | {brandText} 108 | 109 | 110 | 111 | {/* Here we create navbar brand, based on route name */} 112 | 128 | {brandText} 129 | 130 | 131 | 132 | 137 | 138 | 139 | 140 | ); 141 | } 142 | --------------------------------------------------------------------------------