├── public
├── _redirects
├── robots.txt
├── favicon.ico
├── icon-192x192.png
├── icon-256x256.png
├── icon-384x384.png
├── icon-512x512.png
├── static
│ └── images
│ │ ├── avatars
│ │ ├── 1.jpg
│ │ ├── 2.jpg
│ │ ├── 3.jpg
│ │ ├── 4.jpg
│ │ └── 5.jpg
│ │ ├── overview
│ │ ├── performance.png
│ │ ├── rtl-preview.jpg
│ │ ├── tokyo-logo.png
│ │ ├── accent_header.png
│ │ ├── boxed_sidebar.png
│ │ ├── accent_sidebar.png
│ │ ├── extended_sidebar.png
│ │ ├── hero-screenshot.png
│ │ ├── top_navigation.png
│ │ ├── bottom_navigation.png
│ │ ├── collapsed_sidebar.png
│ │ ├── management_screen_1.png
│ │ ├── management_screen_2.png
│ │ ├── management_screen_3.png
│ │ ├── sketch.svg
│ │ └── figma.svg
│ │ ├── placeholders
│ │ ├── logo
│ │ │ ├── ea.jpg
│ │ │ ├── hp.jpg
│ │ │ ├── ibm.jpg
│ │ │ ├── ing.jpg
│ │ │ ├── visa.png
│ │ │ ├── adobe.jpg
│ │ │ ├── bitcoin.png
│ │ │ ├── cardano.png
│ │ │ ├── oracle.jpg
│ │ │ ├── orange.jpg
│ │ │ ├── ripple.png
│ │ │ ├── uipath.jpg
│ │ │ ├── autodesk.jpg
│ │ │ ├── ethereum.png
│ │ │ ├── google-logo.jpg
│ │ │ ├── mastercard.png
│ │ │ ├── netflix-logo.jpg
│ │ │ ├── deutschebank_light.svg
│ │ │ ├── microsoft-icon.svg
│ │ │ ├── pinterest-icon.svg
│ │ │ ├── tesla.svg
│ │ │ ├── spotify-icon.svg
│ │ │ ├── netflix.svg
│ │ │ ├── google-icon.svg
│ │ │ ├── dribbble-icon.svg
│ │ │ ├── spotify.svg
│ │ │ ├── discord-icon.svg
│ │ │ ├── slack-icon.svg
│ │ │ ├── stripe.svg
│ │ │ ├── slack.svg
│ │ │ ├── airbnb-icon.svg
│ │ │ ├── netflix-icon.svg
│ │ │ ├── coinbase.svg
│ │ │ ├── discord.svg
│ │ │ ├── facebook.svg
│ │ │ ├── airbnb.svg
│ │ │ ├── instagram-icon.svg
│ │ │ ├── microsoft.svg
│ │ │ └── google.svg
│ │ ├── covers
│ │ │ ├── 1.jpg
│ │ │ ├── 2.jpg
│ │ │ ├── 3.jpg
│ │ │ ├── 4.jpg
│ │ │ ├── 5.jpg
│ │ │ ├── 6.jpg
│ │ │ ├── 7.jpg
│ │ │ ├── automation-bg.jpg
│ │ │ └── garden_camera.jpg
│ │ ├── fitness
│ │ │ ├── 1.jpg
│ │ │ ├── 2.jpg
│ │ │ ├── 3.jpg
│ │ │ └── 4.jpg
│ │ ├── products
│ │ │ ├── 1.png
│ │ │ ├── 10.png
│ │ │ ├── 2.png
│ │ │ ├── 3.png
│ │ │ ├── 4.png
│ │ │ ├── 5.png
│ │ │ ├── 6.png
│ │ │ ├── 7.png
│ │ │ ├── 8.png
│ │ │ └── 9.png
│ │ └── illustrations
│ │ │ ├── 2.png
│ │ │ ├── 6.png
│ │ │ ├── pressure-high.svg
│ │ │ ├── partly-cloudy-day-rain.svg
│ │ │ ├── moving.svg
│ │ │ ├── time.svg
│ │ │ └── authentication.svg
│ │ └── logo
│ │ ├── material-ui.svg
│ │ ├── typescript.svg
│ │ ├── google.svg
│ │ └── next-js.svg
└── manifest.json
├── .eslintignore
├── .prettierignore
├── src
├── components
│ ├── Chart
│ │ └── index.tsx
│ ├── PageTitleWrapper
│ │ └── index.tsx
│ ├── Footer
│ │ └── index.tsx
│ ├── Scrollbar
│ │ └── index.tsx
│ ├── PageTitle
│ │ └── index.tsx
│ ├── Text
│ │ └── index.tsx
│ ├── Label
│ │ └── index.tsx
│ ├── Link
│ │ └── index.tsx
│ ├── Logo
│ │ └── index.tsx
│ └── LogoSign
│ │ └── index.tsx
├── createEmotionCache.ts
├── models
│ └── crypto_order.ts
├── layouts
│ ├── SidebarLayout
│ │ ├── Header
│ │ │ ├── Buttons
│ │ │ │ ├── index.tsx
│ │ │ │ └── Notifications
│ │ │ │ │ └── index.tsx
│ │ │ ├── index.tsx
│ │ │ └── Userbox
│ │ │ │ └── index.tsx
│ │ ├── index.tsx
│ │ └── Sidebar
│ │ │ └── index.tsx
│ └── BaseLayout
│ │ └── index.tsx
├── content
│ ├── Management
│ │ ├── Users
│ │ │ ├── settings
│ │ │ │ ├── PageHeader.tsx
│ │ │ │ ├── ActivityTab.tsx
│ │ │ │ └── NotificationsTab.tsx
│ │ │ └── details
│ │ │ │ ├── Feed.tsx
│ │ │ │ ├── Addresses.tsx
│ │ │ │ ├── PopularTags.tsx
│ │ │ │ └── RecentActivity.tsx
│ │ └── Transactions
│ │ │ ├── PageHeader.tsx
│ │ │ ├── BulkActions.tsx
│ │ │ └── RecentOrders.tsx
│ ├── Dashboards
│ │ └── Crypto
│ │ │ ├── PageHeader.tsx
│ │ │ └── WatchList.tsx
│ └── Applications
│ │ └── Messenger
│ │ └── BottomBarContent.tsx
├── contexts
│ └── SidebarContext.tsx
└── theme
│ └── ThemeProvider.tsx
├── .prettierrc
├── next-env.d.ts
├── next.config.js
├── .gitignore
├── next.d.ts
├── .eslintrc.json
├── tsconfig.json
├── LICENSE
├── pages
├── management
│ ├── transactions
│ │ └── index.tsx
│ └── profile
│ │ ├── index.tsx
│ │ └── settings
│ │ └── index.tsx
├── dashboards
│ └── crypto
│ │ └── index.tsx
├── _app.tsx
├── index.tsx
├── _document.tsx
├── 404.tsx
├── status
│ ├── 500
│ │ └── index.tsx
│ └── maintenance
│ │ └── index.tsx
├── components
│ ├── accordions
│ │ └── index.tsx
│ ├── tabs
│ │ └── index.tsx
│ └── modals
│ │ └── index.tsx
└── applications
│ └── messenger
│ └── index.tsx
├── package.json
└── README.md
/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | # .estlintignore file
2 | dist
3 | .next
4 | build
5 | node_modules/
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Ignore artifacts:
2 | dist
3 | .next
4 | build
5 | node_modules/
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/icon-192x192.png
--------------------------------------------------------------------------------
/public/icon-256x256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/icon-256x256.png
--------------------------------------------------------------------------------
/public/icon-384x384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/icon-384x384.png
--------------------------------------------------------------------------------
/public/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/icon-512x512.png
--------------------------------------------------------------------------------
/public/static/images/avatars/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/avatars/1.jpg
--------------------------------------------------------------------------------
/public/static/images/avatars/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/avatars/2.jpg
--------------------------------------------------------------------------------
/public/static/images/avatars/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/avatars/3.jpg
--------------------------------------------------------------------------------
/public/static/images/avatars/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/avatars/4.jpg
--------------------------------------------------------------------------------
/public/static/images/avatars/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/avatars/5.jpg
--------------------------------------------------------------------------------
/src/components/Chart/index.tsx:
--------------------------------------------------------------------------------
1 | import dynamic from 'next/dynamic';
2 |
3 | export const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
4 |
--------------------------------------------------------------------------------
/public/static/images/overview/performance.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/overview/performance.png
--------------------------------------------------------------------------------
/public/static/images/overview/rtl-preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/overview/rtl-preview.jpg
--------------------------------------------------------------------------------
/public/static/images/overview/tokyo-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/overview/tokyo-logo.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/ea.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/ea.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/hp.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/hp.jpg
--------------------------------------------------------------------------------
/public/static/images/overview/accent_header.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/overview/accent_header.png
--------------------------------------------------------------------------------
/public/static/images/overview/boxed_sidebar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/overview/boxed_sidebar.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/covers/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/covers/1.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/covers/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/covers/2.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/covers/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/covers/3.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/covers/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/covers/4.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/covers/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/covers/5.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/covers/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/covers/6.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/covers/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/covers/7.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/fitness/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/fitness/1.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/fitness/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/fitness/2.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/fitness/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/fitness/3.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/fitness/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/fitness/4.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/ibm.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/ibm.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/ing.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/ing.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/visa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/visa.png
--------------------------------------------------------------------------------
/public/static/images/overview/accent_sidebar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/overview/accent_sidebar.png
--------------------------------------------------------------------------------
/public/static/images/overview/extended_sidebar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/overview/extended_sidebar.png
--------------------------------------------------------------------------------
/public/static/images/overview/hero-screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/overview/hero-screenshot.png
--------------------------------------------------------------------------------
/public/static/images/overview/top_navigation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/overview/top_navigation.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/adobe.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/adobe.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/bitcoin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/bitcoin.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/cardano.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/cardano.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/oracle.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/oracle.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/orange.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/orange.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/ripple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/ripple.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/uipath.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/uipath.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/products/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/products/1.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/products/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/products/10.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/products/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/products/2.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/products/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/products/3.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/products/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/products/4.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/products/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/products/5.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/products/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/products/6.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/products/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/products/7.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/products/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/products/8.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/products/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/products/9.png
--------------------------------------------------------------------------------
/public/static/images/overview/bottom_navigation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/overview/bottom_navigation.png
--------------------------------------------------------------------------------
/public/static/images/overview/collapsed_sidebar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/overview/collapsed_sidebar.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/autodesk.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/autodesk.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/ethereum.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/ethereum.png
--------------------------------------------------------------------------------
/public/static/images/overview/management_screen_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/overview/management_screen_1.png
--------------------------------------------------------------------------------
/public/static/images/overview/management_screen_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/overview/management_screen_2.png
--------------------------------------------------------------------------------
/public/static/images/overview/management_screen_3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/overview/management_screen_3.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/illustrations/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/illustrations/2.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/illustrations/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/illustrations/6.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/google-logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/google-logo.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/mastercard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/mastercard.png
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/netflix-logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/logo/netflix-logo.jpg
--------------------------------------------------------------------------------
/src/createEmotionCache.ts:
--------------------------------------------------------------------------------
1 | import createCache from '@emotion/cache';
2 |
3 | export default function createEmotionCache() {
4 | return createCache({
5 | key: 'css'
6 | });
7 | }
8 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/covers/automation-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/covers/automation-bg.jpg
--------------------------------------------------------------------------------
/public/static/images/placeholders/covers/garden_camera.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bloomui/tokyo-free-white-nextjs-admin-dashboard/HEAD/public/static/images/placeholders/covers/garden_camera.jpg
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "bracketSpacing": true,
3 | "printWidth": 80,
4 | "singleQuote": true,
5 | "trailingComma": "none",
6 | "tabWidth": 2,
7 | "useTabs": false,
8 | "bracketSameLine": false
9 | }
10 |
--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | const withImages = require('next-images');
2 |
3 | const redirects = {
4 | async redirects() {
5 | return [
6 | {
7 | source: '/dashboards',
8 | destination: '/dashboards/crypto',
9 | permanent: true
10 | }
11 | ];
12 | }
13 | };
14 |
15 | module.exports = withImages(redirects);
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # misc
7 | .DS_Store
8 | .env.local
9 | .env.development.local
10 | .env.test.local
11 | .env.production.local
12 |
13 | npm-debug.log*
14 | yarn-debug.log*
15 | yarn-error.log*
16 |
17 | # Next.js
18 | /.next
19 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/deutschebank_light.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/next.d.ts:
--------------------------------------------------------------------------------
1 | import type { ReactElement, ReactNode } from 'react';
2 | import type {
3 | NextComponentType,
4 | NextPageContext
5 | } from 'next/dist/shared/lib/utils';
6 |
7 | declare module 'next' {
8 | export declare type NextPage
= NextComponentType<
9 | NextPageContext,
10 | IP,
11 | P
12 | > & {
13 | getLayout?: (page: ReactElement) => ReactNode;
14 | };
15 | }
16 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/microsoft-icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/models/crypto_order.ts:
--------------------------------------------------------------------------------
1 | export type CryptoOrderStatus = 'completed' | 'pending' | 'failed';
2 |
3 | export interface CryptoOrder {
4 | id: string;
5 | status: CryptoOrderStatus;
6 | orderDetails: string;
7 | orderDate: number;
8 | orderID: string;
9 | sourceName: string;
10 | sourceDesc: string;
11 | amountCrypto: number;
12 | amount: number;
13 | cryptoCurrency: string;
14 | currency: string;
15 | }
16 |
--------------------------------------------------------------------------------
/public/static/images/logo/material-ui.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/layouts/SidebarLayout/Header/Buttons/index.tsx:
--------------------------------------------------------------------------------
1 | import { Box } from '@mui/material';
2 | import HeaderSearch from './Search';
3 | import HeaderNotifications from './Notifications';
4 |
5 | function HeaderButtons() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }
15 |
16 | export default HeaderButtons;
17 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/illustrations/pressure-high.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["next/core-web-vitals", "plugin:prettier/recommended"],
3 | "rules": {
4 | "prettier/prettier": "off",
5 | "@next/next/no-img-element": "off",
6 | "jsx-a11y/alt-text": "off",
7 | "react/display-name": "off",
8 | "eslint-disable-next-line": "off",
9 | "react-hooks/exhaustive-deps": "off",
10 | "react/no-unescaped-entities": "off",
11 | "react/jsx-max-props-per-line": [
12 | 1,
13 | {
14 | "maximum": 2,
15 | "when": "multiline"
16 | }
17 | ]
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/content/Management/Users/settings/PageHeader.tsx:
--------------------------------------------------------------------------------
1 | import { Typography } from '@mui/material';
2 |
3 | function PageHeader() {
4 | const user = {
5 | name: 'Catherine Pike',
6 | avatar: '/static/images/avatars/1.jpg'
7 | };
8 |
9 | return (
10 | <>
11 |
12 | User Settings
13 |
14 |
15 | {user.name}, this could be your user settings panel.
16 |
17 | >
18 | );
19 | }
20 |
21 | export default PageHeader;
22 |
--------------------------------------------------------------------------------
/src/layouts/BaseLayout/index.tsx:
--------------------------------------------------------------------------------
1 | import { FC, ReactNode } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Box } from '@mui/material';
4 |
5 | interface BaseLayoutProps {
6 | children?: ReactNode;
7 | }
8 |
9 | const BaseLayout: FC = ({ children }) => {
10 | return (
11 |
18 | {children}
19 |
20 | );
21 | };
22 |
23 | BaseLayout.propTypes = {
24 | children: PropTypes.node
25 | };
26 |
27 | export default BaseLayout;
28 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/pinterest-icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/PageTitleWrapper/index.tsx:
--------------------------------------------------------------------------------
1 | import { FC, ReactNode } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Box, Container, styled } from '@mui/material';
4 |
5 | const PageTitle = styled(Box)(
6 | ({ theme }) => `
7 | padding: ${theme.spacing(4)};
8 | `
9 | );
10 |
11 | interface PageTitleWrapperProps {
12 | children?: ReactNode;
13 | }
14 |
15 | const PageTitleWrapper: FC = ({ children }) => {
16 | return (
17 |
18 | {children}
19 |
20 | );
21 | };
22 |
23 | PageTitleWrapper.propTypes = {
24 | children: PropTypes.node.isRequired
25 | };
26 |
27 | export default PageTitleWrapper;
28 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "theme_color": "#1975ff",
3 | "background_color": "#f2f5f9",
4 | "display": "standalone",
5 | "start_url": ".",
6 | "short_name": "Tokyo",
7 | "name": "Tokyo Free White NextJS Typescript Admin Dashboard",
8 | "icons": [
9 | {
10 | "src": "/icon-192x192.png",
11 | "sizes": "192x192",
12 | "type": "image/png"
13 | },
14 | {
15 | "src": "/icon-256x256.png",
16 | "sizes": "256x256",
17 | "type": "image/png"
18 | },
19 | {
20 | "src": "/icon-384x384.png",
21 | "sizes": "384x384",
22 | "type": "image/png"
23 | },
24 | {
25 | "src": "/icon-512x512.png",
26 | "sizes": "512x512",
27 | "type": "image/png"
28 | }
29 | ]
30 | }
31 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/tesla.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/spotify-icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/contexts/SidebarContext.tsx:
--------------------------------------------------------------------------------
1 | import { useState, ReactNode, createContext } from 'react';
2 | type SidebarContext = {
3 | sidebarToggle: any;
4 | toggleSidebar: () => void;
5 | closeSidebar: () => void;
6 | };
7 |
8 | // eslint-disable-next-line @typescript-eslint/no-redeclare
9 | export const SidebarContext = createContext(
10 | {} as SidebarContext
11 | );
12 |
13 | type Props = {
14 | children: ReactNode;
15 | };
16 |
17 | export function SidebarProvider({ children }: Props) {
18 | const [sidebarToggle, setSidebarToggle] = useState(false);
19 | const toggleSidebar = () => {
20 | setSidebarToggle(!sidebarToggle);
21 | };
22 |
23 | const closeSidebar = () => {
24 | setSidebarToggle(false);
25 | };
26 |
27 | return (
28 |
31 | {children}
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/netflix.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/google-icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/content/Management/Transactions/PageHeader.tsx:
--------------------------------------------------------------------------------
1 | import { Typography, Button, Grid } from '@mui/material';
2 |
3 | import AddTwoToneIcon from '@mui/icons-material/AddTwoTone';
4 |
5 | function PageHeader() {
6 | const user = {
7 | name: 'Catherine Pike',
8 | avatar: '/static/images/avatars/1.jpg'
9 | };
10 | return (
11 |
12 |
13 |
14 | Transactions
15 |
16 |
17 | {user.name}, these are your recent transactions
18 |
19 |
20 |
21 | }
25 | >
26 | Create transaction
27 |
28 |
29 |
30 | );
31 | }
32 |
33 | export default PageHeader;
34 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "paths": {
5 | "@/*": ["./src/*"],
6 | "@/public/*": ["./public/*"]
7 | },
8 | "allowJs": true,
9 | "allowSyntheticDefaultImports": true,
10 | "jsx": "preserve",
11 | "lib": ["dom", "es2017"],
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "noEmit": true,
15 | "noUnusedLocals": true,
16 | "noUnusedParameters": true,
17 | "preserveConstEnums": true,
18 | "removeComments": false,
19 | "skipLibCheck": true,
20 | "sourceMap": true,
21 | "strict": false,
22 | "strictPropertyInitialization": false,
23 | "strictNullChecks": false,
24 | "target": "esnext",
25 | "forceConsistentCasingInFileNames": true,
26 | "esModuleInterop": true,
27 | "resolveJsonModule": true,
28 | "isolatedModules": true,
29 | "noFallthroughCasesInSwitch": true,
30 | "incremental": true
31 | },
32 | "exclude": ["node_modules"],
33 | "include": ["src", "next-env.d.ts", "**/*.ts", "**/*.tsx"]
34 | }
35 |
--------------------------------------------------------------------------------
/src/content/Dashboards/Crypto/PageHeader.tsx:
--------------------------------------------------------------------------------
1 | import { Typography, Avatar, Grid } from '@mui/material';
2 | import { useTheme } from '@mui/material/styles';
3 |
4 | function PageHeader() {
5 | const user = {
6 | name: 'Catherine Pike',
7 | avatar: '/static/images/avatars/1.jpg'
8 | };
9 | const theme = useTheme();
10 |
11 | return (
12 |
13 |
14 |
24 |
25 |
26 |
27 | Welcome, {user.name}!
28 |
29 |
30 | Today is a good day to start trading crypto assets!
31 |
32 |
33 |
34 | );
35 | }
36 |
37 | export default PageHeader;
38 |
--------------------------------------------------------------------------------
/public/static/images/overview/sketch.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/dribbble-icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 BloomUI
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/theme/ThemeProvider.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useState, createContext, useEffect } from 'react';
2 | import { ThemeProvider } from '@mui/material';
3 | import { themeCreator } from './base';
4 | import { StylesProvider } from '@mui/styles';
5 |
6 | export const ThemeContext = createContext((_themeName: string): void => {});
7 |
8 | const ThemeProviderWrapper: FC = (props) => {
9 | const [themeName, _setThemeName] = useState('PureLightTheme');
10 |
11 | useEffect(() => {
12 | const curThemeName =
13 | window.localStorage.getItem('appTheme') || 'PureLightTheme';
14 | _setThemeName(curThemeName);
15 | }, []);
16 |
17 | const theme = themeCreator(themeName);
18 | const setThemeName = (themeName: string): void => {
19 | window.localStorage.setItem('appTheme', themeName);
20 | _setThemeName(themeName);
21 | };
22 |
23 | return (
24 |
25 |
26 | {props.children}
27 |
28 |
29 | );
30 | };
31 |
32 | export default ThemeProviderWrapper;
33 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/spotify.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/public/static/images/overview/figma.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/components/Footer/index.tsx:
--------------------------------------------------------------------------------
1 | import { Box, Container, Link, Typography, styled } from '@mui/material';
2 |
3 | const FooterWrapper = styled(Container)(
4 | ({ theme }) => `
5 | margin-top: ${theme.spacing(4)};
6 | `
7 | );
8 |
9 | function Footer() {
10 | return (
11 |
12 |
19 |
20 |
21 | © 2022 - Tokyo Free White Next.js Typescript Admin Dashboard
22 |
23 |
24 |
30 | Crafted by{' '}
31 |
36 | BloomUI.com
37 |
38 |
39 |
40 |
41 | );
42 | }
43 |
44 | export default Footer;
45 |
--------------------------------------------------------------------------------
/pages/management/transactions/index.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head';
2 | import SidebarLayout from '@/layouts/SidebarLayout';
3 | import PageHeader from '@/content/Management/Transactions/PageHeader';
4 | import PageTitleWrapper from '@/components/PageTitleWrapper';
5 | import { Grid, Container } from '@mui/material';
6 | import Footer from '@/components/Footer';
7 |
8 | import RecentOrders from '@/content/Management/Transactions/RecentOrders';
9 |
10 | function ApplicationsTransactions() {
11 | return (
12 | <>
13 |
14 | Transactions - Applications
15 |
16 |
17 |
18 |
19 |
20 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | >
34 | );
35 | }
36 |
37 | ApplicationsTransactions.getLayout = (page) => (
38 | {page}
39 | );
40 |
41 | export default ApplicationsTransactions;
42 |
--------------------------------------------------------------------------------
/src/components/Scrollbar/index.tsx:
--------------------------------------------------------------------------------
1 | import { FC, ReactNode } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Scrollbars } from 'react-custom-scrollbars-2';
4 |
5 | import { Box, useTheme } from '@mui/material';
6 |
7 | interface ScrollbarProps {
8 | className?: string;
9 | children?: ReactNode;
10 | }
11 |
12 | const Scrollbar: FC = ({ className, children, ...rest }) => {
13 | const theme = useTheme();
14 |
15 | return (
16 | {
20 | return (
21 |
33 | );
34 | }}
35 | {...rest}
36 | >
37 | {children}
38 |
39 | );
40 | };
41 |
42 | Scrollbar.propTypes = {
43 | children: PropTypes.node,
44 | className: PropTypes.string
45 | };
46 |
47 | export default Scrollbar;
48 |
--------------------------------------------------------------------------------
/public/static/images/logo/typescript.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | TypeScript logo
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/public/static/images/logo/google.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/components/PageTitle/index.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react';
2 | import PropTypes from 'prop-types';
3 | import AddTwoToneIcon from '@mui/icons-material/AddTwoTone';
4 | import { Typography, Button, Grid } from '@mui/material';
5 |
6 | interface PageTitleProps {
7 | heading?: string;
8 | subHeading?: string;
9 | docs?: string;
10 | }
11 |
12 | const PageTitle: FC = ({
13 | heading = '',
14 | subHeading = '',
15 | docs = '',
16 | ...rest
17 | }) => {
18 | return (
19 |
25 |
26 |
27 | {heading}
28 |
29 | {subHeading}
30 |
31 |
32 | }
39 | >
40 | {heading} Documentation
41 |
42 |
43 |
44 | );
45 | };
46 |
47 | PageTitle.propTypes = {
48 | heading: PropTypes.string,
49 | subHeading: PropTypes.string,
50 | docs: PropTypes.string
51 | };
52 |
53 | export default PageTitle;
54 |
--------------------------------------------------------------------------------
/public/static/images/logo/next-js.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/discord-icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/slack-icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/dashboards/crypto/index.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head';
2 |
3 | import SidebarLayout from '@/layouts/SidebarLayout';
4 |
5 | import PageHeader from '@/content/Dashboards/Crypto/PageHeader';
6 | import PageTitleWrapper from '@/components/PageTitleWrapper';
7 | import { Container, Grid } from '@mui/material';
8 | import Footer from '@/components/Footer';
9 |
10 | import AccountBalance from '@/content/Dashboards/Crypto/AccountBalance';
11 | import Wallets from '@/content/Dashboards/Crypto/Wallets';
12 | import AccountSecurity from '@/content/Dashboards/Crypto/AccountSecurity';
13 | import WatchList from '@/content/Dashboards/Crypto/WatchList';
14 |
15 | function DashboardCrypto() {
16 | return (
17 | <>
18 |
19 | Crypto Dashboard
20 |
21 |
22 |
23 |
24 |
25 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | >
48 | );
49 | }
50 |
51 | DashboardCrypto.getLayout = (page) => {page} ;
52 |
53 | export default DashboardCrypto;
54 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/stripe.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/slack.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tokyo-free-white-nextjs-admin-dashboard",
3 | "version": "1.0.0",
4 | "title": "Tokyo Free White NextJS Typescript Admin Dashboard",
5 | "description": "High performance React template built with lots of powerful MUI (Material-UI) components across multiple product niches for fast & perfect apps development processes",
6 | "author": {
7 | "name": "BloomUI.com",
8 | "url": "https://bloomui.com"
9 | },
10 | "private": false,
11 | "dependencies": {
12 | "@emotion/cache": "11.7.1",
13 | "@emotion/react": "11.9.0",
14 | "@emotion/server": "11.4.0",
15 | "@emotion/styled": "11.8.1",
16 | "@mui/core": "5.0.0-alpha.54",
17 | "@mui/icons-material": "5.8.2",
18 | "@mui/lab": "5.0.0-alpha.84",
19 | "@mui/material": "5.8.2",
20 | "@mui/styles": "5.8.0",
21 | "apexcharts": "3.35.3",
22 | "clsx": "1.1.1",
23 | "context-api": "0.0.2",
24 | "date-fns": "2.28.0",
25 | "next": "12.1.6",
26 | "next-images": "1.8.4",
27 | "nprogress": "0.2.0",
28 | "numeral": "2.0.6",
29 | "react": "17.0.2",
30 | "react-apexcharts": "1.4.0",
31 | "react-custom-scrollbars-2": "4.4.0",
32 | "react-dom": "17.0.2",
33 | "@types/node": "17.0.39",
34 | "@types/nprogress": "0.2.0",
35 | "@types/numeral": "2.0.2",
36 | "@types/react": "17.0.40",
37 | "@types/react-dom": "17.0.13",
38 | "typescript": "4.7.3"
39 | },
40 | "scripts": {
41 | "dev": "next",
42 | "build": "next build",
43 | "start": "next start",
44 | "export": "next export",
45 | "lint": "next lint",
46 | "lint-fix": "next lint --fix",
47 | "format": "prettier --write \"./**/*.{ts,tsx,js,jsx,json}\" --config ./.prettierrc"
48 | },
49 | "devDependencies": {
50 | "eslint": "8.17.0",
51 | "eslint-config-next": "12.1.6",
52 | "eslint-config-prettier": "8.5.0",
53 | "eslint-plugin-prettier": "4.0.0",
54 | "next-transpile-modules": "9.0.0",
55 | "prettier": "2.6.2"
56 | }
57 | }
--------------------------------------------------------------------------------
/src/components/Text/index.tsx:
--------------------------------------------------------------------------------
1 | import { FC, ReactNode } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { styled } from '@mui/material/styles';
4 | import clsx from 'clsx';
5 |
6 | interface TextProps {
7 | className?: string;
8 | color?:
9 | | 'primary'
10 | | 'secondary'
11 | | 'error'
12 | | 'warning'
13 | | 'success'
14 | | 'info'
15 | | 'black';
16 | flex?: boolean;
17 | children?: ReactNode;
18 | }
19 |
20 | const TextWrapper = styled('span')(
21 | ({ theme }) => `
22 | display: inline-block;
23 | align-items: center;
24 |
25 | &.flexItem {
26 | display: inline-flex;
27 | }
28 |
29 | &.MuiText {
30 |
31 | &-black {
32 | color: ${theme.palette.common.black}
33 | }
34 |
35 | &-primary {
36 | color: ${theme.palette.primary.main}
37 | }
38 |
39 | &-secondary {
40 | color: ${theme.palette.secondary.main}
41 | }
42 |
43 | &-success {
44 | color: ${theme.palette.success.main}
45 | }
46 |
47 | &-warning {
48 | color: ${theme.palette.warning.main}
49 | }
50 |
51 | &-error {
52 | color: ${theme.palette.error.main}
53 | }
54 |
55 | &-info {
56 | color: ${theme.palette.info.main}
57 | }
58 | }
59 | `
60 | );
61 |
62 | const Text: FC = ({
63 | className,
64 | color = 'secondary',
65 | flex,
66 | children,
67 | ...rest
68 | }) => {
69 | return (
70 |
74 | {children}
75 |
76 | );
77 | };
78 |
79 | Text.propTypes = {
80 | children: PropTypes.node,
81 | className: PropTypes.string,
82 | color: PropTypes.oneOf([
83 | 'primary',
84 | 'secondary',
85 | 'error',
86 | 'warning',
87 | 'success',
88 | 'info',
89 | 'black'
90 | ])
91 | };
92 |
93 | export default Text;
94 |
--------------------------------------------------------------------------------
/src/layouts/SidebarLayout/index.tsx:
--------------------------------------------------------------------------------
1 | import { FC, ReactNode } from 'react';
2 | import { Box, alpha, lighten, useTheme } from '@mui/material';
3 | import PropTypes from 'prop-types';
4 |
5 | import Sidebar from './Sidebar';
6 | import Header from './Header';
7 |
8 | interface SidebarLayoutProps {
9 | children?: ReactNode;
10 | }
11 |
12 | const SidebarLayout: FC = ({ children }) => {
13 | const theme = useTheme();
14 |
15 | return (
16 | <>
17 |
44 |
45 |
46 |
58 | {children}
59 |
60 |
61 | >
62 | );
63 | };
64 |
65 | SidebarLayout.propTypes = {
66 | children: PropTypes.node
67 | };
68 |
69 | export default SidebarLayout;
70 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/airbnb-icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactElement, ReactNode } from 'react';
2 |
3 | import type { NextPage } from 'next';
4 | import type { AppProps } from 'next/app';
5 | import Head from 'next/head';
6 | import Router from 'next/router';
7 | import nProgress from 'nprogress';
8 | import 'nprogress/nprogress.css';
9 | import ThemeProvider from 'src/theme/ThemeProvider';
10 | import CssBaseline from '@mui/material/CssBaseline';
11 | import { CacheProvider, EmotionCache } from '@emotion/react';
12 | import createEmotionCache from 'src/createEmotionCache';
13 | import { SidebarProvider } from 'src/contexts/SidebarContext';
14 | import AdapterDateFns from '@mui/lab/AdapterDateFns';
15 | import LocalizationProvider from '@mui/lab/LocalizationProvider';
16 |
17 | const clientSideEmotionCache = createEmotionCache();
18 |
19 | type NextPageWithLayout = NextPage & {
20 | getLayout?: (page: ReactElement) => ReactNode;
21 | };
22 |
23 | interface TokyoAppProps extends AppProps {
24 | emotionCache?: EmotionCache;
25 | Component: NextPageWithLayout;
26 | }
27 |
28 | function TokyoApp(props: TokyoAppProps) {
29 | const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
30 | const getLayout = Component.getLayout ?? ((page) => page);
31 |
32 | Router.events.on('routeChangeStart', nProgress.start);
33 | Router.events.on('routeChangeError', nProgress.done);
34 | Router.events.on('routeChangeComplete', nProgress.done);
35 |
36 | return (
37 |
38 |
39 | Tokyo Free White NextJS Typescript Admin Dashboard
40 |
44 |
45 |
46 |
47 |
48 |
49 | {getLayout( )}
50 |
51 |
52 |
53 |
54 | );
55 | }
56 |
57 | export default TokyoApp;
58 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/netflix-icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/coinbase.svg:
--------------------------------------------------------------------------------
1 | Imported Layers
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/discord.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/content/Applications/Messenger/BottomBarContent.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Avatar,
3 | Tooltip,
4 | IconButton,
5 | Box,
6 | Button,
7 | styled,
8 | InputBase,
9 | useTheme
10 | } from '@mui/material';
11 | import AttachFileTwoToneIcon from '@mui/icons-material/AttachFileTwoTone';
12 | import SendTwoToneIcon from '@mui/icons-material/SendTwoTone';
13 |
14 | const MessageInputWrapper = styled(InputBase)(
15 | ({ theme }) => `
16 | font-size: ${theme.typography.pxToRem(18)};
17 | padding: ${theme.spacing(1)};
18 | width: 100%;
19 | `
20 | );
21 |
22 | const Input = styled('input')({
23 | display: 'none'
24 | });
25 |
26 | function BottomBarContent() {
27 | const theme = useTheme();
28 |
29 | const user = {
30 | name: 'Catherine Pike',
31 | avatar: '/static/images/avatars/1.jpg'
32 | };
33 |
34 | return (
35 |
43 |
44 |
49 |
54 |
55 |
56 |
57 |
61 | 😀
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 | } variant="contained">
73 | Send
74 |
75 |
76 |
77 | );
78 | }
79 |
80 | export default BottomBarContent;
81 |
--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Typography,
3 | Box,
4 | Card,
5 | Container,
6 | Button,
7 | styled
8 | } from '@mui/material';
9 | import type { ReactElement } from 'react';
10 | import BaseLayout from 'src/layouts/BaseLayout';
11 |
12 | import Link from 'src/components/Link';
13 | import Head from 'next/head';
14 |
15 | import Logo from 'src/components/LogoSign';
16 | import Hero from 'src/content/Overview/Hero';
17 |
18 | const HeaderWrapper = styled(Card)(
19 | ({ theme }) => `
20 | width: 100%;
21 | display: flex;
22 | align-items: center;
23 | height: ${theme.spacing(10)};
24 | margin-bottom: ${theme.spacing(10)};
25 | `
26 | );
27 |
28 | const OverviewWrapper = styled(Box)(
29 | ({ theme }) => `
30 | overflow: auto;
31 | background: ${theme.palette.common.white};
32 | flex: 1;
33 | overflow-x: hidden;
34 | `
35 | );
36 |
37 | function Overview() {
38 | return (
39 |
40 |
41 | Tokyo Free White NextJS Typescript Admin Dashboard
42 |
43 |
44 |
45 |
46 |
47 |
53 |
54 |
55 |
61 | Live Preview
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 | Crafted by{' '}
72 |
77 | BloomUI.com
78 |
79 |
80 |
81 |
82 | );
83 | }
84 |
85 | export default Overview;
86 |
87 | Overview.getLayout = function getLayout(page: ReactElement) {
88 | return {page} ;
89 | };
90 |
--------------------------------------------------------------------------------
/pages/management/profile/index.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head';
2 | import SidebarLayout from '@/layouts/SidebarLayout';
3 | import Footer from '@/components/Footer';
4 |
5 | import { Grid, Container } from '@mui/material';
6 |
7 | import ProfileCover from '@/content/Management/Users/details/ProfileCover';
8 | import RecentActivity from '@/content/Management/Users/details/RecentActivity';
9 | import Feed from '@/content/Management/Users/details/Feed';
10 | import PopularTags from '@/content/Management/Users/details/PopularTags';
11 | import MyCards from '@/content/Management/Users/details/MyCards';
12 | import Addresses from '@/content/Management/Users/details/Addresses';
13 |
14 | function ManagementUserProfile() {
15 | const user = {
16 | savedCards: 7,
17 | name: 'Catherine Pike',
18 | coverImg: '/static/images/placeholders/covers/5.jpg',
19 | avatar: '/static/images/avatars/4.jpg',
20 | description:
21 | "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage",
22 | jobtitle: 'Web Developer',
23 | location: 'Barcelona, Spain',
24 | followers: '465'
25 | };
26 |
27 | return (
28 | <>
29 |
30 | User Details - Management
31 |
32 |
33 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | >
62 | );
63 | }
64 |
65 | ManagementUserProfile.getLayout = (page) => (
66 | {page}
67 | );
68 |
69 | export default ManagementUserProfile;
70 |
--------------------------------------------------------------------------------
/src/content/Management/Transactions/BulkActions.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useRef } from 'react';
2 |
3 | import {
4 | Box,
5 | Menu,
6 | IconButton,
7 | Button,
8 | ListItemText,
9 | ListItem,
10 | List,
11 | Typography
12 | } from '@mui/material';
13 | import { styled } from '@mui/material/styles';
14 |
15 | import DeleteTwoToneIcon from '@mui/icons-material/DeleteTwoTone';
16 | import MoreVertTwoToneIcon from '@mui/icons-material/MoreVertTwoTone';
17 |
18 | const ButtonError = styled(Button)(
19 | ({ theme }) => `
20 | background: ${theme.colors.error.main};
21 | color: ${theme.palette.error.contrastText};
22 |
23 | &:hover {
24 | background: ${theme.colors.error.dark};
25 | }
26 | `
27 | );
28 |
29 | function BulkActions() {
30 | const [onMenuOpen, menuOpen] = useState(false);
31 | const moreRef = useRef(null);
32 |
33 | const openMenu = (): void => {
34 | menuOpen(true);
35 | };
36 |
37 | const closeMenu = (): void => {
38 | menuOpen(false);
39 | };
40 |
41 | return (
42 | <>
43 |
44 |
45 |
46 | Bulk actions:
47 |
48 | }
51 | variant="contained"
52 | >
53 | Delete
54 |
55 |
56 |
62 |
63 |
64 |
65 |
66 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 | >
90 | );
91 | }
92 |
93 | export default BulkActions;
94 |
--------------------------------------------------------------------------------
/src/components/Label/index.tsx:
--------------------------------------------------------------------------------
1 | import { FC, ReactNode } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { styled } from '@mui/material/styles';
4 |
5 | interface LabelProps {
6 | className?: string;
7 | color?:
8 | | 'primary'
9 | | 'black'
10 | | 'secondary'
11 | | 'error'
12 | | 'warning'
13 | | 'success'
14 | | 'info';
15 | children?: ReactNode;
16 | }
17 |
18 | const LabelWrapper = styled('span')(
19 | ({ theme }) => `
20 | background-color: ${theme.colors.alpha.black[5]};
21 | padding: ${theme.spacing(0.5, 1)};
22 | font-size: ${theme.typography.pxToRem(13)};
23 | border-radius: ${theme.general.borderRadius};
24 | display: inline-flex;
25 | align-items: center;
26 | justify-content: center;
27 | max-height: ${theme.spacing(3)};
28 |
29 | &.MuiLabel {
30 | &-primary {
31 | background-color: ${theme.colors.primary.lighter};
32 | color: ${theme.palette.primary.main}
33 | }
34 |
35 | &-black {
36 | background-color: ${theme.colors.alpha.black[100]};
37 | color: ${theme.colors.alpha.white[100]};
38 | }
39 |
40 | &-secondary {
41 | background-color: ${theme.colors.secondary.lighter};
42 | color: ${theme.palette.secondary.main}
43 | }
44 |
45 | &-success {
46 | background-color: ${theme.colors.success.lighter};
47 | color: ${theme.palette.success.main}
48 | }
49 |
50 | &-warning {
51 | background-color: ${theme.colors.warning.lighter};
52 | color: ${theme.palette.warning.main}
53 | }
54 |
55 | &-error {
56 | background-color: ${theme.colors.error.lighter};
57 | color: ${theme.palette.error.main}
58 | }
59 |
60 | &-info {
61 | background-color: ${theme.colors.info.lighter};
62 | color: ${theme.palette.info.main}
63 | }
64 | }
65 | `
66 | );
67 |
68 | const Label: FC = ({
69 | className,
70 | color = 'secondary',
71 | children,
72 | ...rest
73 | }) => {
74 | return (
75 |
76 | {children}
77 |
78 | );
79 | };
80 |
81 | Label.propTypes = {
82 | children: PropTypes.node,
83 | className: PropTypes.string,
84 | color: PropTypes.oneOf([
85 | 'primary',
86 | 'black',
87 | 'secondary',
88 | 'error',
89 | 'warning',
90 | 'success',
91 | 'info'
92 | ])
93 | };
94 |
95 | export default Label;
96 |
--------------------------------------------------------------------------------
/src/content/Management/Users/details/Feed.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Box,
3 | Typography,
4 | Card,
5 | CardHeader,
6 | Divider,
7 | Avatar,
8 | Grid,
9 | Button
10 | } from '@mui/material';
11 |
12 | import AddTwoToneIcon from '@mui/icons-material/AddTwoTone';
13 |
14 | function Feed() {
15 | const feed = [
16 | {
17 | name: 'Munroe Dacks',
18 | jobtitle: 'Senior Accountant',
19 | company: 'Trudoo',
20 | avatar: '/static/images/avatars/1.jpg'
21 | },
22 | {
23 | name: 'Gunilla Canario',
24 | jobtitle: 'Associate Professor',
25 | company: 'Buzzdog',
26 | avatar: '/static/images/avatars/2.jpg'
27 | },
28 | {
29 | name: 'Rowena Geistmann',
30 | jobtitle: 'Pharmacist',
31 | company: 'Yozio',
32 | avatar: '/static/images/avatars/3.jpg'
33 | },
34 | {
35 | name: 'Ede Stoving',
36 | jobtitle: 'VP Operations',
37 | company: 'Cogibox',
38 | avatar: '/static/images/avatars/4.jpg'
39 | },
40 | {
41 | name: 'Crissy Spere',
42 | jobtitle: 'Social Worker',
43 | company: 'Babbleblab',
44 | avatar: '/static/images/avatars/5.jpg'
45 | },
46 | {
47 | name: 'Michel Greatbanks',
48 | jobtitle: 'Research Assistant III',
49 | company: 'Aimbu',
50 | avatar: '/static/images/avatars/6.jpg'
51 | }
52 | ];
53 |
54 | return (
55 |
56 |
57 |
58 |
59 |
60 | {feed.map((_feed) => (
61 |
62 |
63 |
64 |
65 |
66 | {_feed.company}
67 |
68 |
69 | {_feed.name}
70 |
71 |
72 | {_feed.jobtitle}
73 |
74 | }
78 | >
79 | Follow
80 |
81 |
82 |
83 |
84 | ))}
85 |
86 |
87 |
88 | );
89 | }
90 |
91 | export default Feed;
92 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/illustrations/partly-cloudy-day-rain.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/content/Management/Users/details/Addresses.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Box,
3 | Button,
4 | Typography,
5 | Card,
6 | CardHeader,
7 | Divider,
8 | Grid
9 | } from '@mui/material';
10 |
11 | import { ArrowForwardTwoTone } from '@mui/icons-material';
12 |
13 | function Addresses() {
14 | const addresses = {
15 | delivery: 12,
16 | shipping: 8
17 | };
18 |
19 | return (
20 |
27 |
28 |
29 |
33 |
34 |
35 |
36 | Favourite
37 |
38 |
39 | Kadin Westervelt
40 |
41 | 714-650-6297
42 |
43 |
44 | 348 W. Goldfield Street Bethel Park, PA 15102
45 |
46 |
47 | }
51 | >
52 | Manage
53 |
54 |
55 |
56 |
57 |
58 |
59 |
63 |
64 |
65 |
66 | Favourite
67 |
68 |
69 | Kadin Westervelt
70 |
71 | 714-650-6297
72 |
73 |
74 | 10 E. Wrangler Avenue Sioux Falls, SD 57103
75 |
76 |
77 | }
81 | >
82 | Manage
83 |
84 |
85 |
86 |
87 |
88 | );
89 | }
90 |
91 | export default Addresses;
92 |
--------------------------------------------------------------------------------
/src/content/Dashboards/Crypto/WatchList.tsx:
--------------------------------------------------------------------------------
1 | import { MouseEvent, useState } from 'react';
2 | import {
3 | Button,
4 | Box,
5 | ToggleButton,
6 | ToggleButtonGroup,
7 | Card,
8 | Typography,
9 | styled
10 | } from '@mui/material';
11 | import ViewWeekTwoToneIcon from '@mui/icons-material/ViewWeekTwoTone';
12 | import TableRowsTwoToneIcon from '@mui/icons-material/TableRowsTwoTone';
13 | import WatchListColumn from './WatchListColumn';
14 | import WatchListRow from './WatchListRow';
15 |
16 | const EmptyResultsWrapper = styled('img')(
17 | ({ theme }) => `
18 | max-width: 100%;
19 | width: ${theme.spacing(66)};
20 | height: ${theme.spacing(34)};
21 | `
22 | );
23 |
24 | function WatchList() {
25 | const [tabs, setTab] = useState('watch_list_columns');
26 |
27 | const handleViewOrientation = (
28 | _event: MouseEvent,
29 | newValue: string | null
30 | ) => {
31 | setTab(newValue);
32 | };
33 |
34 | return (
35 | <>
36 |
44 | Watch List
45 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | {tabs === 'watch_list_columns' && }
60 |
61 | {tabs === 'watch_list_rows' && }
62 |
63 | {!tabs && (
64 |
70 |
71 |
72 |
82 | Click something, anything!
83 |
84 |
91 | Maybe, a button?
92 |
93 |
94 | )}
95 | >
96 | );
97 | }
98 |
99 | export default WatchList;
100 |
--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Document, { Html, Head, Main, NextScript } from 'next/document';
3 | import createEmotionServer from '@emotion/server/create-instance';
4 | import createEmotionCache from 'src/createEmotionCache';
5 |
6 | export default class MyDocument extends Document {
7 | render() {
8 | return (
9 |
10 |
11 |
12 |
13 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | );
24 | }
25 | }
26 |
27 | // `getInitialProps` belongs to `_document` (instead of `_app`),
28 | // it's compatible with static-site generation (SSG).
29 | MyDocument.getInitialProps = async (ctx) => {
30 | // Resolution order
31 | //
32 | // On the server:
33 | // 1. app.getInitialProps
34 | // 2. page.getInitialProps
35 | // 3. document.getInitialProps
36 | // 4. app.render
37 | // 5. page.render
38 | // 6. document.render
39 | //
40 | // On the server with error:
41 | // 1. document.getInitialProps
42 | // 2. app.render
43 | // 3. page.render
44 | // 4. document.render
45 | //
46 | // On the client
47 | // 1. app.getInitialProps
48 | // 2. page.getInitialProps
49 | // 3. app.render
50 | // 4. page.render
51 |
52 | const originalRenderPage = ctx.renderPage;
53 |
54 | // You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
55 | // However, be aware that it can have global side effects.
56 | const cache = createEmotionCache();
57 | const { extractCriticalToChunks } = createEmotionServer(cache);
58 |
59 | ctx.renderPage = () =>
60 | originalRenderPage({
61 | enhanceApp: (App: any) => (props) =>
62 |
63 | });
64 |
65 | const initialProps = await Document.getInitialProps(ctx);
66 | // This is important. It prevents emotion to render invalid HTML.
67 | // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153
68 | const emotionStyles = extractCriticalToChunks(initialProps.html);
69 | const emotionStyleTags = emotionStyles.styles.map((style) => (
70 |
76 | ));
77 |
78 | return {
79 | ...initialProps,
80 | // Styles fragment is rendered after the app and page rendering finish.
81 | styles: [
82 | ...React.Children.toArray(initialProps.styles),
83 | ...emotionStyleTags
84 | ]
85 | };
86 | };
87 |
--------------------------------------------------------------------------------
/pages/management/profile/settings/index.tsx:
--------------------------------------------------------------------------------
1 | import { useState, ChangeEvent } from 'react';
2 | import Head from 'next/head';
3 | import SidebarLayout from '@/layouts/SidebarLayout';
4 | import PageHeader from '@/content/Management/Users/settings/PageHeader';
5 | import PageTitleWrapper from '@/components/PageTitleWrapper';
6 | import { Container, Tabs, Tab, Grid } from '@mui/material';
7 | import Footer from '@/components/Footer';
8 | import { styled } from '@mui/material/styles';
9 |
10 | import ActivityTab from '@/content/Management/Users/settings/ActivityTab';
11 | import EditProfileTab from '@/content/Management/Users/settings/EditProfileTab';
12 | import NotificationsTab from '@/content/Management/Users/settings/NotificationsTab';
13 | import SecurityTab from '@/content/Management/Users/settings/SecurityTab';
14 |
15 | const TabsWrapper = styled(Tabs)(
16 | () => `
17 | .MuiTabs-scrollableX {
18 | overflow-x: auto !important;
19 | }
20 | `
21 | );
22 |
23 | function ManagementUserSettings() {
24 | const [currentTab, setCurrentTab] = useState('activity');
25 |
26 | const tabs = [
27 | { value: 'activity', label: 'Activity' },
28 | { value: 'edit_profile', label: 'Edit Profile' },
29 | { value: 'notifications', label: 'Notifications' },
30 | { value: 'security', label: 'Passwords/Security' }
31 | ];
32 |
33 | const handleTabsChange = (_event: ChangeEvent<{}>, value: string): void => {
34 | setCurrentTab(value);
35 | };
36 |
37 | return (
38 | <>
39 |
40 | User Settings - Applications
41 |
42 |
43 |
44 |
45 |
46 |
53 |
54 |
62 | {tabs.map((tab) => (
63 |
64 | ))}
65 |
66 |
67 |
68 | {currentTab === 'activity' && }
69 | {currentTab === 'edit_profile' && }
70 | {currentTab === 'notifications' && }
71 | {currentTab === 'security' && }
72 |
73 |
74 |
75 |
76 | >
77 | );
78 | }
79 |
80 | ManagementUserSettings.getLayout = (page) => (
81 | {page}
82 | );
83 |
84 | export default ManagementUserSettings;
85 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/facebook.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/layouts/SidebarLayout/Header/index.tsx:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react';
2 |
3 | import {
4 | Box,
5 | alpha,
6 | Stack,
7 | lighten,
8 | Divider,
9 | IconButton,
10 | Tooltip,
11 | styled,
12 | useTheme
13 | } from '@mui/material';
14 | import MenuTwoToneIcon from '@mui/icons-material/MenuTwoTone';
15 | import { SidebarContext } from 'src/contexts/SidebarContext';
16 | import CloseTwoToneIcon from '@mui/icons-material/CloseTwoTone';
17 |
18 | import HeaderButtons from './Buttons';
19 | import HeaderUserbox from './Userbox';
20 | import HeaderMenu from './Menu';
21 |
22 | const HeaderWrapper = styled(Box)(
23 | ({ theme }) => `
24 | height: ${theme.header.height};
25 | color: ${theme.header.textColor};
26 | padding: ${theme.spacing(0, 2)};
27 | right: 0;
28 | z-index: 6;
29 | background-color: ${alpha(theme.header.background, 0.95)};
30 | backdrop-filter: blur(3px);
31 | position: fixed;
32 | justify-content: space-between;
33 | width: 100%;
34 | @media (min-width: ${theme.breakpoints.values.lg}px) {
35 | left: ${theme.sidebar.width};
36 | width: auto;
37 | }
38 | `
39 | );
40 |
41 | function Header() {
42 | const { sidebarToggle, toggleSidebar } = useContext(SidebarContext);
43 | const theme = useTheme();
44 |
45 | return (
46 |
65 | }
68 | alignItems="center"
69 | spacing={2}
70 | >
71 |
72 |
73 |
74 |
75 |
76 |
83 |
84 |
85 | {!sidebarToggle ? (
86 |
87 | ) : (
88 |
89 | )}
90 |
91 |
92 |
93 |
94 |
95 | );
96 | }
97 |
98 | export default Header;
99 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Tokyo Free White Typescript Next.js Admin Dashboard
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | 
16 | 
17 |
18 |
19 |
20 |
21 | Free Material-UI Next.js Typescript Dashboard Template with Dark Color Scheme
22 |
23 | Tokyo Free White Next.js Typescript Dashboard is built using the latest industry standards and features a clean and premium design style, making use of colors and accents to improve the user experience for all included flows and pages.
24 |
25 |
26 | It is powered by Next.js, Typescript and React and contains multiple components customized on top of Material-UI – which is one of the best UI components frameworks available.
27 |
28 | We keep all dependencies updated to their latest stable versions. Each time we release an updated version you will be notified via the email you used to initially download the template.
29 |
30 |
31 | To discover all the features that this free React admin template has to offer, we suggest visiting the live preview we’ve set up.
32 |
33 | There is also a free Javascript version available, if that is what you prefer working with.
34 |
35 | ---
36 | Updrade to PRO
37 |
38 | The premium version of this template comes with a lot more components, features and options making it a very powerful friend in your development endeavors. You can download a copy of it from bloomui.com
39 |
40 | ---
41 |
42 |
43 | Quick Start
44 |
45 |
46 | Make sure you have the latest stable versions for Node.js and NPM installed
47 | Clone repository: git clone https://github.com/bloomui/tokyo-free-white-nextjs-admin-dashboard.git
48 | Install dependencies: Run npm install inside the project folder
49 | Start dev server: After the install finishes, run yarn dev. A browser window will open on http://localhost:3000 where you''ll see the live preview
50 |
51 |
52 | ---
53 |
54 |
55 | Technical Support
56 |
57 |
58 | You can open a support ticket by sending an email here:
59 | support@bloomui.freshdesk.com
60 |
61 |
62 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/airbnb.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/pages/404.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Box,
3 | Card,
4 | Typography,
5 | Container,
6 | Divider,
7 | Button,
8 | FormControl,
9 | OutlinedInput,
10 | InputAdornment,
11 | styled
12 | } from '@mui/material';
13 | import Head from 'next/head';
14 | import SearchTwoToneIcon from '@mui/icons-material/SearchTwoTone';
15 | import type { ReactElement } from 'react';
16 | import BaseLayout from 'src/layouts/BaseLayout';
17 |
18 | const MainContent = styled(Box)(
19 | () => `
20 | height: 100%;
21 | display: flex;
22 | flex: 1;
23 | flex-direction: column;
24 | `
25 | );
26 |
27 | const TopWrapper = styled(Box)(
28 | ({ theme }) => `
29 | display: flex;
30 | width: 100%;
31 | flex: 1;
32 | align-items: center;
33 | justify-content: center;
34 | padding: ${theme.spacing(6)};
35 | `
36 | );
37 |
38 | const OutlinedInputWrapper = styled(OutlinedInput)(
39 | ({ theme }) => `
40 | background-color: ${theme.colors.alpha.white[100]};
41 | `
42 | );
43 |
44 | const ButtonSearch = styled(Button)(
45 | ({ theme }) => `
46 | margin-right: -${theme.spacing(1)};
47 | `
48 | );
49 |
50 | function Status404() {
51 | return (
52 | <>
53 |
54 | Status - 404
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | The page you were looking for doesn't exist.
63 |
64 |
70 | It's on us, we moved the content to a different page. The search
71 | below should help!
72 |
73 |
74 |
75 |
76 |
77 |
82 |
83 | Search
84 |
85 |
86 | }
87 | startAdornment={
88 |
89 |
90 |
91 | }
92 | />
93 |
94 | OR
95 |
96 | Go to homepage
97 |
98 |
99 |
100 |
101 |
102 |
103 | >
104 | );
105 | }
106 |
107 | export default Status404;
108 |
109 | Status404.getLayout = function getLayout(page: ReactElement) {
110 | return {page} ;
111 | };
112 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/illustrations/moving.svg:
--------------------------------------------------------------------------------
1 | #7 moving forward
--------------------------------------------------------------------------------
/src/components/Link/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import clsx from 'clsx';
3 | import { useRouter } from 'next/router';
4 | import NextLink, { LinkProps as NextLinkProps } from 'next/link';
5 | import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
6 | import { styled } from '@mui/material/styles';
7 |
8 | // Add support for the sx prop for consistency with the other branches.
9 | const Anchor = styled('a')({});
10 |
11 | interface NextLinkComposedProps
12 | extends Omit, 'href'>,
13 | Omit {
14 | to: NextLinkProps['href'];
15 | linkAs?: NextLinkProps['as'];
16 | }
17 |
18 | export const NextLinkComposed = React.forwardRef<
19 | HTMLAnchorElement,
20 | NextLinkComposedProps
21 | >(function NextLinkComposed(props, ref) {
22 | const { to, linkAs, replace, scroll, shallow, prefetch, locale, ...other } =
23 | props;
24 |
25 | return (
26 |
36 |
37 |
38 | );
39 | });
40 |
41 | export type LinkProps = {
42 | activeClassName?: string;
43 | as?: NextLinkProps['as'];
44 | href: NextLinkProps['href'];
45 | linkAs?: NextLinkProps['as']; // Useful when the as prop is shallow by styled().
46 | noLinkStyle?: boolean;
47 | } & Omit &
48 | Omit;
49 |
50 | // A styled version of the Next.js Link component:
51 | // https://nextjs.org/docs/api-reference/next/link
52 | const Link = React.forwardRef(function Link(
53 | props,
54 | ref
55 | ) {
56 | const {
57 | activeClassName = 'active',
58 | as,
59 | className: classNameProps,
60 | href,
61 | linkAs: linkAsProp,
62 | locale,
63 | noLinkStyle,
64 | prefetch,
65 | replace,
66 | role, // Link don't have roles.
67 | scroll,
68 | shallow,
69 | ...other
70 | } = props;
71 |
72 | const router = useRouter();
73 | const pathname = typeof href === 'string' ? href : href.pathname;
74 | const className = clsx(classNameProps, {
75 | [activeClassName]: router.pathname === pathname && activeClassName
76 | });
77 |
78 | const isExternal =
79 | typeof href === 'string' &&
80 | (href.indexOf('http') === 0 || href.indexOf('mailto:') === 0);
81 |
82 | if (isExternal) {
83 | if (noLinkStyle) {
84 | return ;
85 | }
86 |
87 | return ;
88 | }
89 |
90 | const linkAs = linkAsProp || as;
91 | const nextjsProps = {
92 | to: href,
93 | linkAs,
94 | replace,
95 | scroll,
96 | shallow,
97 | prefetch,
98 | locale
99 | };
100 |
101 | if (noLinkStyle) {
102 | return (
103 |
109 | );
110 | }
111 |
112 | return (
113 |
120 | );
121 | });
122 |
123 | export default Link;
124 |
--------------------------------------------------------------------------------
/src/components/Logo/index.tsx:
--------------------------------------------------------------------------------
1 | import { Box, styled, Tooltip } from '@mui/material';
2 | import Link from 'src/components/Link';
3 |
4 | const LogoWrapper = styled(Link)(
5 | ({ theme }) => `
6 | color: ${theme.palette.text.primary};
7 | padding: ${theme.spacing(0, 1, 0, 0)};
8 | display: flex;
9 | text-decoration: none;
10 | font-weight: ${theme.typography.fontWeightBold};
11 |
12 | &:hover {
13 | text-decoration: none;
14 | }
15 | `
16 | );
17 |
18 | const LogoSignWrapper = styled(Box)(
19 | () => `
20 | width: 52px;
21 | height: 38px;
22 | margin-top: 4px;
23 | transform: scale(.8);
24 | `
25 | );
26 |
27 | const LogoSign = styled(Box)(
28 | ({ theme }) => `
29 | background: ${theme.general.reactFrameworkColor};
30 | width: 18px;
31 | height: 18px;
32 | border-radius: ${theme.general.borderRadiusSm};
33 | position: relative;
34 | transform: rotate(45deg);
35 | top: 3px;
36 | left: 17px;
37 |
38 | &:after,
39 | &:before {
40 | content: "";
41 | display: block;
42 | width: 18px;
43 | height: 18px;
44 | position: absolute;
45 | top: -1px;
46 | right: -20px;
47 | transform: rotate(0deg);
48 | border-radius: ${theme.general.borderRadiusSm};
49 | }
50 |
51 | &:before {
52 | background: ${theme.palette.primary.main};
53 | right: auto;
54 | left: 0;
55 | top: 20px;
56 | }
57 |
58 | &:after {
59 | background: ${theme.palette.secondary.main};
60 | }
61 | `
62 | );
63 |
64 | const LogoSignInner = styled(Box)(
65 | ({ theme }) => `
66 | width: 16px;
67 | height: 16px;
68 | position: absolute;
69 | top: 12px;
70 | left: 12px;
71 | z-index: 5;
72 | border-radius: ${theme.general.borderRadiusSm};
73 | background: ${theme.header.background};
74 | `
75 | );
76 |
77 | const LogoTextWrapper = styled(Box)(
78 | ({ theme }) => `
79 | padding-left: ${theme.spacing(1)};
80 | `
81 | );
82 |
83 | const VersionBadge = styled(Box)(
84 | ({ theme }) => `
85 | background: ${theme.palette.success.main};
86 | color: ${theme.palette.success.contrastText};
87 | padding: ${theme.spacing(0.4, 1)};
88 | border-radius: ${theme.general.borderRadiusSm};
89 | text-align: center;
90 | display: inline-block;
91 | line-height: 1;
92 | font-size: ${theme.typography.pxToRem(11)};
93 | `
94 | );
95 |
96 | const LogoText = styled(Box)(
97 | ({ theme }) => `
98 | font-size: ${theme.typography.pxToRem(15)};
99 | font-weight: ${theme.typography.fontWeightBold};
100 | `
101 | );
102 |
103 | function Logo() {
104 | return (
105 |
106 |
107 |
108 |
109 |
110 |
111 |
117 |
118 |
119 | 1.0
120 |
121 | Tokyo Free White
122 |
123 |
124 |
125 | );
126 | }
127 |
128 | export default Logo;
129 |
--------------------------------------------------------------------------------
/src/components/LogoSign/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Box,
3 | Tooltip,
4 | Badge,
5 | TooltipProps,
6 | tooltipClasses,
7 | styled,
8 | useTheme
9 | } from '@mui/material';
10 | import Link from 'src/components/Link';
11 |
12 | const LogoWrapper = styled(Link)(
13 | ({ theme }) => `
14 | color: ${theme.palette.text.primary};
15 | display: flex;
16 | text-decoration: none;
17 | width: 53px;
18 | margin: 0 auto;
19 | font-weight: ${theme.typography.fontWeightBold};
20 | `
21 | );
22 |
23 | const LogoSignWrapper = styled(Box)(
24 | () => `
25 | width: 52px;
26 | height: 38px;
27 | `
28 | );
29 |
30 | const LogoSign = styled(Box)(
31 | ({ theme }) => `
32 | background: ${theme.general.reactFrameworkColor};
33 | width: 18px;
34 | height: 18px;
35 | border-radius: ${theme.general.borderRadiusSm};
36 | position: relative;
37 | transform: rotate(45deg);
38 | top: 3px;
39 | left: 17px;
40 |
41 | &:after,
42 | &:before {
43 | content: "";
44 | display: block;
45 | width: 18px;
46 | height: 18px;
47 | position: absolute;
48 | top: -1px;
49 | right: -20px;
50 | transform: rotate(0deg);
51 | border-radius: ${theme.general.borderRadiusSm};
52 | }
53 |
54 | &:before {
55 | background: ${theme.palette.primary.main};
56 | right: auto;
57 | left: 0;
58 | top: 20px;
59 | }
60 |
61 | &:after {
62 | background: ${theme.palette.secondary.main};
63 | }
64 | `
65 | );
66 |
67 | const LogoSignInner = styled(Box)(
68 | ({ theme }) => `
69 | width: 16px;
70 | height: 16px;
71 | position: absolute;
72 | top: 12px;
73 | left: 12px;
74 | z-index: 5;
75 | border-radius: ${theme.general.borderRadiusSm};
76 | background: ${theme.header.background};
77 | `
78 | );
79 |
80 | const TooltipWrapper = styled(({ className, ...props }: TooltipProps) => (
81 |
82 | ))(({ theme }) => ({
83 | [`& .${tooltipClasses.tooltip}`]: {
84 | backgroundColor: theme.colors.alpha.trueWhite[100],
85 | color: theme.palette.getContrastText(theme.colors.alpha.trueWhite[100]),
86 | fontSize: theme.typography.pxToRem(12),
87 | fontWeight: 'bold',
88 | borderRadius: theme.general.borderRadiusSm,
89 | boxShadow:
90 | '0 .2rem .8rem rgba(7,9,25,.18), 0 .08rem .15rem rgba(7,9,25,.15)'
91 | },
92 | [`& .${tooltipClasses.arrow}`]: {
93 | color: theme.colors.alpha.trueWhite[100]
94 | }
95 | }));
96 |
97 | function Logo() {
98 | const theme = useTheme();
99 |
100 | return (
101 |
105 |
106 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 | );
127 | }
128 |
129 | export default Logo;
130 |
--------------------------------------------------------------------------------
/pages/status/maintenance/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Box,
3 | Typography,
4 | Container,
5 | Divider,
6 | IconButton,
7 | Tooltip,
8 | styled
9 | } from '@mui/material';
10 | import type { ReactElement } from 'react';
11 | import BaseLayout from '@/layouts/BaseLayout';
12 |
13 | import Head from 'next/head';
14 | import Logo from '@/components/LogoSign';
15 |
16 | import FacebookIcon from '@mui/icons-material/Facebook';
17 | import TwitterIcon from '@mui/icons-material/Twitter';
18 | import InstagramIcon from '@mui/icons-material/Instagram';
19 |
20 | const MainContent = styled(Box)(
21 | () => `
22 | height: 100%;
23 | display: flex;
24 | flex: 1;
25 | flex-direction: column;
26 | `
27 | );
28 |
29 | const TopWrapper = styled(Box)(
30 | ({ theme }) => `
31 | display: flex;
32 | width: 100%;
33 | flex: 1;
34 | align-items: center;
35 | justify-content: center;
36 | padding: ${theme.spacing(6)};
37 | `
38 | );
39 |
40 | function StatusMaintenance() {
41 | return (
42 | <>
43 |
44 | Status - Maintenance
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | The site is currently down for maintenance
54 |
55 |
61 | We apologize for any inconveniences caused
62 |
63 |
64 |
69 |
70 |
71 |
76 |
77 |
78 | Phone:{' '}
79 |
80 |
85 | + 00 1 888 555 444
86 |
87 |
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 |
113 | export default StatusMaintenance;
114 |
115 | StatusMaintenance.getLayout = function getLayout(page: ReactElement) {
116 | return {page} ;
117 | };
118 |
--------------------------------------------------------------------------------
/src/layouts/SidebarLayout/Header/Buttons/Notifications/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | alpha,
3 | Badge,
4 | Box,
5 | Divider,
6 | IconButton,
7 | List,
8 | ListItem,
9 | Popover,
10 | Tooltip,
11 | Typography
12 | } from '@mui/material';
13 | import { useRef, useState } from 'react';
14 | import NotificationsActiveTwoToneIcon from '@mui/icons-material/NotificationsActiveTwoTone';
15 | import { styled } from '@mui/material/styles';
16 |
17 | import { formatDistance, subDays } from 'date-fns';
18 |
19 | const NotificationsBadge = styled(Badge)(
20 | ({ theme }) => `
21 |
22 | .MuiBadge-badge {
23 | background-color: ${alpha(theme.palette.error.main, 0.1)};
24 | color: ${theme.palette.error.main};
25 | min-width: 16px;
26 | height: 16px;
27 | padding: 0;
28 |
29 | &::after {
30 | position: absolute;
31 | top: 0;
32 | left: 0;
33 | width: 100%;
34 | height: 100%;
35 | border-radius: 50%;
36 | box-shadow: 0 0 0 1px ${alpha(theme.palette.error.main, 0.3)};
37 | content: "";
38 | }
39 | }
40 | `
41 | );
42 |
43 | function HeaderNotifications() {
44 | const ref = useRef(null);
45 | const [isOpen, setOpen] = useState(false);
46 |
47 | const handleOpen = (): void => {
48 | setOpen(true);
49 | };
50 |
51 | const handleClose = (): void => {
52 | setOpen(false);
53 | };
54 |
55 | return (
56 | <>
57 |
58 |
59 |
66 |
67 |
68 |
69 |
70 |
83 |
89 | Notifications
90 |
91 |
92 |
93 |
96 |
97 |
98 |
99 | Messaging Platform
100 |
101 |
102 | {formatDistance(subDays(new Date(), 3), new Date(), {
103 | addSuffix: true
104 | })}
105 |
106 |
107 |
112 | {' '}
113 | new messages in your inbox
114 |
115 |
116 |
117 |
118 |
119 | >
120 | );
121 | }
122 |
123 | export default HeaderNotifications;
124 |
--------------------------------------------------------------------------------
/pages/components/accordions/index.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head';
2 | import SidebarLayout from '@/layouts/SidebarLayout';
3 |
4 | import PageTitle from '@/components/PageTitle';
5 | import PageTitleWrapper from '@/components/PageTitleWrapper';
6 | import {
7 | Container,
8 | Grid,
9 | Card,
10 | CardHeader,
11 | CardContent,
12 | Divider
13 | } from '@mui/material';
14 | import Accordion from '@mui/material/Accordion';
15 | import AccordionSummary from '@mui/material/AccordionSummary';
16 | import AccordionDetails from '@mui/material/AccordionDetails';
17 | import Typography from '@mui/material/Typography';
18 | import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
19 | import Footer from '@/components/Footer';
20 |
21 | function Accordions() {
22 | return (
23 | <>
24 |
25 | Accordions - Components
26 |
27 |
28 |
33 |
34 |
35 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | }
50 | aria-controls="panel1a-content"
51 | id="panel1a-header"
52 | >
53 | Accordion 1
54 |
55 |
56 |
57 | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
58 | Suspendisse malesuada lacus ex, sit amet blandit leo
59 | lobortis eget.
60 |
61 |
62 |
63 |
64 | }
66 | aria-controls="panel2a-content"
67 | id="panel2a-header"
68 | >
69 | Accordion 2
70 |
71 |
72 |
73 | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
74 | Suspendisse malesuada lacus ex, sit amet blandit leo
75 | lobortis eget.
76 |
77 |
78 |
79 |
80 | }
82 | aria-controls="panel3a-content"
83 | id="panel3a-header"
84 | >
85 | Disabled Accordion
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | >
95 | );
96 | }
97 |
98 | Accordions.getLayout = (page) => {page} ;
99 |
100 | export default Accordions;
101 |
--------------------------------------------------------------------------------
/pages/components/tabs/index.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head';
2 | import SidebarLayout from '@/layouts/SidebarLayout';
3 | import PageTitle from '@/components/PageTitle';
4 | import PageTitleWrapper from '@/components/PageTitleWrapper';
5 | import {
6 | Container,
7 | Grid,
8 | Card,
9 | CardHeader,
10 | CardContent,
11 | Divider
12 | } from '@mui/material';
13 | import { useState, SyntheticEvent } from 'react';
14 |
15 | import Tabs from '@mui/material/Tabs';
16 | import Tab from '@mui/material/Tab';
17 | import Typography from '@mui/material/Typography';
18 | import Box from '@mui/material/Box';
19 | import Footer from '@/components/Footer';
20 |
21 | interface TabPanelProps {
22 | children?: React.ReactNode;
23 | index: number;
24 | value: number;
25 | }
26 |
27 | function TabPanel(props: TabPanelProps) {
28 | const { children, value, index, ...other } = props;
29 |
30 | return (
31 |
38 | {value === index && (
39 |
40 | {children}
41 |
42 | )}
43 |
44 | );
45 | }
46 |
47 | function a11yProps(index: number) {
48 | return {
49 | id: `simple-tab-${index}`,
50 | 'aria-controls': `simple-tabpanel-${index}`
51 | };
52 | }
53 |
54 | function TabsDemo() {
55 | const [value, setValue] = useState(0);
56 |
57 | const handleChange = (_event: SyntheticEvent, newValue: number) => {
58 | setValue(newValue);
59 | };
60 |
61 | return (
62 | <>
63 |
64 | Tabs - Components
65 |
66 |
67 |
72 |
73 |
74 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
96 |
97 |
98 |
99 |
100 |
101 | Item One
102 |
103 |
104 | Item Two
105 |
106 |
107 | Item Three
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 | >
117 | );
118 | }
119 |
120 | TabsDemo.getLayout = (page) => {page} ;
121 |
122 | export default TabsDemo;
123 |
--------------------------------------------------------------------------------
/src/layouts/SidebarLayout/Sidebar/index.tsx:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react';
2 | import Scrollbar from 'src/components/Scrollbar';
3 | import { SidebarContext } from 'src/contexts/SidebarContext';
4 |
5 | import {
6 | Box,
7 | Drawer,
8 | alpha,
9 | styled,
10 | Divider,
11 | useTheme,
12 | Button,
13 | lighten,
14 | darken
15 | } from '@mui/material';
16 |
17 | import SidebarMenu from './SidebarMenu';
18 | import Logo from 'src/components/LogoSign';
19 |
20 | const SidebarWrapper = styled(Box)(
21 | ({ theme }) => `
22 | width: ${theme.sidebar.width};
23 | min-width: ${theme.sidebar.width};
24 | color: ${theme.colors.alpha.trueWhite[70]};
25 | position: relative;
26 | z-index: 7;
27 | height: 100%;
28 | padding-bottom: 68px;
29 | `
30 | );
31 |
32 | function Sidebar() {
33 | const { sidebarToggle, toggleSidebar } = useContext(SidebarContext);
34 | const closeSidebar = () => toggleSidebar();
35 | const theme = useTheme();
36 |
37 | return (
38 | <>
39 |
56 |
57 |
58 |
64 |
65 |
66 |
67 |
74 |
75 |
76 |
81 |
82 |
91 | Upgrade to PRO
92 |
93 |
94 |
95 |
105 |
113 |
114 |
115 |
121 |
122 |
123 |
124 |
131 |
132 |
133 |
134 |
135 | >
136 | );
137 | }
138 |
139 | export default Sidebar;
140 |
--------------------------------------------------------------------------------
/src/content/Management/Users/settings/ActivityTab.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Box,
3 | CardMedia,
4 | Typography,
5 | Card,
6 | CardHeader,
7 | Divider,
8 | Avatar,
9 | IconButton,
10 | Button,
11 | CardActions,
12 | Link
13 | } from '@mui/material';
14 | import { styled } from '@mui/material/styles';
15 |
16 | import MoreHorizTwoToneIcon from '@mui/icons-material/MoreHorizTwoTone';
17 | import ThumbUpAltTwoToneIcon from '@mui/icons-material/ThumbUpAltTwoTone';
18 | import CommentTwoToneIcon from '@mui/icons-material/CommentTwoTone';
19 | import ShareTwoToneIcon from '@mui/icons-material/ShareTwoTone';
20 | import Text from '@/components/Text';
21 |
22 | const CardActionsWrapper = styled(CardActions)(
23 | ({ theme }) => `
24 | background: ${theme.colors.alpha.black[5]};
25 | padding: ${theme.spacing(3)};
26 | `
27 | );
28 |
29 | function ActivityTab() {
30 | return (
31 |
32 | }
34 | action={
35 |
36 |
37 |
38 | }
39 | titleTypographyProps={{ variant: 'h4' }}
40 | subheaderTypographyProps={{ variant: 'subtitle2' }}
41 | title="Allison Lipshutz"
42 | subheader={
43 | <>
44 | Managing Partner,{' '}
45 |
49 | #software
50 |
51 | ,{' '}
52 |
56 | #managers
57 |
58 | , Google Inc.
59 | >
60 | }
61 | />
62 |
63 |
64 | Welcome to organizing your remote office for maximum productivity.
65 |
66 |
67 |
72 |
73 |
74 | Organizing Your Remote Office for Maximum Productivity
75 |
76 |
77 |
81 | example.com
82 | {' '}
83 | • 4 mins read
84 |
85 |
86 |
87 |
94 |
95 | } variant="contained">
96 | Like
97 |
98 | }
100 | variant="outlined"
101 | sx={{ mx: 2 }}
102 | >
103 | Comment
104 |
105 | } variant="outlined">
106 | Share
107 |
108 |
109 |
110 |
111 |
112 | 485
113 | {' '}
114 | reactions •{' '}
115 |
116 | 63
117 | {' '}
118 | comments
119 |
120 |
121 |
122 |
123 | );
124 | }
125 |
126 | export default ActivityTab;
127 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/instagram-icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/applications/messenger/index.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | import Head from 'next/head';
4 | import SidebarLayout from '@/layouts/SidebarLayout';
5 |
6 | import TopBarContent from '@/content/Applications/Messenger/TopBarContent';
7 | import BottomBarContent from '@/content/Applications/Messenger/BottomBarContent';
8 | import SidebarContent from '@/content/Applications/Messenger/SidebarContent';
9 | import ChatContent from '@/content/Applications/Messenger/ChatContent';
10 | import MenuTwoToneIcon from '@mui/icons-material/MenuTwoTone';
11 |
12 | import Scrollbar from '@/components/Scrollbar';
13 |
14 | import {
15 | Box,
16 | styled,
17 | Divider,
18 | Drawer,
19 | IconButton,
20 | useTheme
21 | } from '@mui/material';
22 |
23 | const RootWrapper = styled(Box)(
24 | ({ theme }) => `
25 | height: calc(100vh - ${theme.header.height});
26 | display: flex;
27 | `
28 | );
29 |
30 | const Sidebar = styled(Box)(
31 | ({ theme }) => `
32 | width: 300px;
33 | background: ${theme.colors.alpha.white[100]};
34 | border-right: ${theme.colors.alpha.black[10]} solid 1px;
35 | `
36 | );
37 |
38 | const ChatWindow = styled(Box)(
39 | () => `
40 | width: 100%;
41 | height: 100%;
42 | display: flex;
43 | flex-direction: column;
44 | flex: 1;
45 | `
46 | );
47 |
48 | const ChatTopBar = styled(Box)(
49 | ({ theme }) => `
50 | background: ${theme.colors.alpha.white[100]};
51 | border-bottom: ${theme.colors.alpha.black[10]} solid 1px;
52 | padding: ${theme.spacing(2)};
53 | align-items: center;
54 | `
55 | );
56 |
57 | const IconButtonToggle = styled(IconButton)(
58 | ({ theme }) => `
59 | width: ${theme.spacing(4)};
60 | height: ${theme.spacing(4)};
61 | background: ${theme.colors.alpha.white[100]};
62 | `
63 | );
64 |
65 | const DrawerWrapperMobile = styled(Drawer)(
66 | () => `
67 | width: 340px;
68 | flex-shrink: 0;
69 |
70 | & > .MuiPaper-root {
71 | width: 340px;
72 | z-index: 3;
73 | }
74 | `
75 | );
76 |
77 | function ApplicationsMessenger() {
78 | const theme = useTheme();
79 | const [mobileOpen, setMobileOpen] = useState(false);
80 |
81 | const handleDrawerToggle = () => {
82 | setMobileOpen(!mobileOpen);
83 | };
84 |
85 | return (
86 | <>
87 |
88 | Messenger - Applications
89 |
90 |
91 |
100 |
101 |
102 |
103 |
104 |
109 |
110 |
111 |
112 |
113 |
114 |
119 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 | >
142 | );
143 | }
144 |
145 | ApplicationsMessenger.getLayout = (page) => (
146 | {page}
147 | );
148 |
149 | export default ApplicationsMessenger;
150 |
--------------------------------------------------------------------------------
/src/content/Management/Users/details/PopularTags.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Typography,
3 | Card,
4 | CardHeader,
5 | Divider,
6 | List,
7 | ListItem,
8 | ListItemAvatar,
9 | ListSubheader,
10 | ListItemText,
11 | Avatar,
12 | useTheme,
13 | styled
14 | } from '@mui/material';
15 |
16 | const ListWrapper = styled(List)(
17 | () => `
18 | .MuiListItem-root {
19 | border-radius: 0;
20 | margin: 0;
21 | }
22 | `
23 | );
24 |
25 | function PopularTags() {
26 | const theme = useTheme();
27 |
28 | return (
29 |
30 |
31 |
32 |
33 |
40 |
41 |
42 |
43 |
50 |
51 |
52 |
53 |
60 |
61 |
62 |
63 |
70 |
71 |
72 |
73 |
74 |
75 | Groups
76 |
77 |
78 |
79 |
80 |
81 |
89 | WD
90 |
91 |
92 |
99 |
100 |
101 |
102 |
103 |
111 | D
112 |
113 |
114 |
121 |
122 |
123 |
124 |
125 |
129 |
130 |
137 |
138 |
139 |
140 | );
141 | }
142 |
143 | export default PopularTags;
144 |
--------------------------------------------------------------------------------
/src/content/Management/Users/details/RecentActivity.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Box,
3 | Typography,
4 | Card,
5 | CardHeader,
6 | Divider,
7 | Avatar,
8 | useTheme,
9 | styled
10 | } from '@mui/material';
11 |
12 | import ShoppingBagTwoToneIcon from '@mui/icons-material/ShoppingBagTwoTone';
13 | import FavoriteTwoToneIcon from '@mui/icons-material/FavoriteTwoTone';
14 | import StarTwoToneIcon from '@mui/icons-material/StarTwoTone';
15 |
16 | const AvatarPrimary = styled(Avatar)(
17 | ({ theme }) => `
18 | background: ${theme.colors.primary.lighter};
19 | color: ${theme.colors.primary.main};
20 | width: ${theme.spacing(7)};
21 | height: ${theme.spacing(7)};
22 | `
23 | );
24 |
25 | function RecentActivity() {
26 | const theme = useTheme();
27 |
28 | return (
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | Orders
38 |
39 |
40 |
41 |
46 | Total
47 |
48 | 485
49 |
50 |
51 |
56 | Failed
57 |
58 | 8
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 | Favourites
70 |
71 |
72 |
73 |
78 | Products
79 |
80 | 64
81 |
82 |
83 |
88 | Lists
89 |
90 | 15
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 | Reviews
102 |
103 |
104 |
105 |
110 | Total
111 |
112 | 654
113 |
114 |
115 |
120 | Useful
121 |
122 | 21
123 |
124 |
125 |
126 |
127 |
128 | );
129 | }
130 |
131 | export default RecentActivity;
132 |
--------------------------------------------------------------------------------
/src/content/Management/Users/settings/NotificationsTab.tsx:
--------------------------------------------------------------------------------
1 | import { useState, ChangeEvent } from 'react';
2 | import {
3 | Box,
4 | Typography,
5 | Card,
6 | Grid,
7 | ListItem,
8 | List,
9 | ListItemText,
10 | Divider,
11 | Switch
12 | } from '@mui/material';
13 |
14 | function NotificationsTab() {
15 | const [state, setState] = useState({
16 | checkedA: true,
17 | checkedB: false,
18 | checkedC: true,
19 | checkedD: false
20 | });
21 |
22 | const handleChange = (event: ChangeEvent) => {
23 | setState({
24 | ...state,
25 | [event.target.name]: event.target.checked
26 | });
27 | };
28 |
29 | return (
30 |
31 |
32 |
33 | Account
34 |
35 | Choose what notifications you want to receive
36 |
37 |
38 |
39 |
40 |
41 |
50 |
56 |
57 |
58 |
59 |
68 |
74 |
75 |
76 |
77 |
78 |
79 |
80 | Orders
81 |
82 | Receive email notifications related to your orders activity
83 |
84 |
85 |
86 |
87 |
88 |
97 |
103 |
104 |
105 |
106 |
115 |
121 |
122 |
123 |
124 |
125 |
126 | );
127 | }
128 |
129 | export default NotificationsTab;
130 |
--------------------------------------------------------------------------------
/src/content/Management/Transactions/RecentOrders.tsx:
--------------------------------------------------------------------------------
1 | import { Card } from '@mui/material';
2 | import { CryptoOrder } from '@/models/crypto_order';
3 | import RecentOrdersTable from './RecentOrdersTable';
4 | import { subDays } from 'date-fns';
5 |
6 | function RecentOrders() {
7 | const cryptoOrders: CryptoOrder[] = [
8 | {
9 | id: '1',
10 | orderDetails: 'Fiat Deposit',
11 | orderDate: new Date().getTime(),
12 | status: 'completed',
13 | orderID: 'VUVX709ET7BY',
14 | sourceName: 'Bank Account',
15 | sourceDesc: '*** 1111',
16 | amountCrypto: 34.4565,
17 | amount: 56787,
18 | cryptoCurrency: 'ETH',
19 | currency: '$'
20 | },
21 | {
22 | id: '2',
23 | orderDetails: 'Fiat Deposit',
24 | orderDate: subDays(new Date(), 1).getTime(),
25 | status: 'completed',
26 | orderID: '23M3UOG65G8K',
27 | sourceName: 'Bank Account',
28 | sourceDesc: '*** 1111',
29 | amountCrypto: 6.58454334,
30 | amount: 8734587,
31 | cryptoCurrency: 'BTC',
32 | currency: '$'
33 | },
34 | {
35 | id: '3',
36 | orderDetails: 'Fiat Deposit',
37 | orderDate: subDays(new Date(), 5).getTime(),
38 | status: 'failed',
39 | orderID: 'F6JHK65MS818',
40 | sourceName: 'Bank Account',
41 | sourceDesc: '*** 1111',
42 | amountCrypto: 6.58454334,
43 | amount: 8734587,
44 | cryptoCurrency: 'BTC',
45 | currency: '$'
46 | },
47 | {
48 | id: '4',
49 | orderDetails: 'Fiat Deposit',
50 | orderDate: subDays(new Date(), 55).getTime(),
51 | status: 'completed',
52 | orderID: 'QJFAI7N84LGM',
53 | sourceName: 'Bank Account',
54 | sourceDesc: '*** 1111',
55 | amountCrypto: 6.58454334,
56 | amount: 8734587,
57 | cryptoCurrency: 'BTC',
58 | currency: '$'
59 | },
60 | {
61 | id: '5',
62 | orderDetails: 'Fiat Deposit',
63 | orderDate: subDays(new Date(), 56).getTime(),
64 | status: 'pending',
65 | orderID: 'BO5KFSYGC0YW',
66 | sourceName: 'Bank Account',
67 | sourceDesc: '*** 1111',
68 | amountCrypto: 6.58454334,
69 | amount: 8734587,
70 | cryptoCurrency: 'BTC',
71 | currency: '$'
72 | },
73 | {
74 | id: '6',
75 | orderDetails: 'Fiat Deposit',
76 | orderDate: subDays(new Date(), 33).getTime(),
77 | status: 'completed',
78 | orderID: '6RS606CBMKVQ',
79 | sourceName: 'Bank Account',
80 | sourceDesc: '*** 1111',
81 | amountCrypto: 6.58454334,
82 | amount: 8734587,
83 | cryptoCurrency: 'BTC',
84 | currency: '$'
85 | },
86 | {
87 | id: '7',
88 | orderDetails: 'Fiat Deposit',
89 | orderDate: new Date().getTime(),
90 | status: 'pending',
91 | orderID: '479KUYHOBMJS',
92 | sourceName: 'Bank Account',
93 | sourceDesc: '*** 1212',
94 | amountCrypto: 2.346546,
95 | amount: 234234,
96 | cryptoCurrency: 'BTC',
97 | currency: '$'
98 | },
99 | {
100 | id: '8',
101 | orderDetails: 'Paypal Withdraw',
102 | orderDate: subDays(new Date(), 22).getTime(),
103 | status: 'completed',
104 | orderID: 'W67CFZNT71KR',
105 | sourceName: 'Paypal Account',
106 | sourceDesc: '*** 1111',
107 | amountCrypto: 3.345456,
108 | amount: 34544,
109 | cryptoCurrency: 'BTC',
110 | currency: '$'
111 | },
112 | {
113 | id: '9',
114 | orderDetails: 'Fiat Deposit',
115 | orderDate: subDays(new Date(), 11).getTime(),
116 | status: 'completed',
117 | orderID: '63GJ5DJFKS4H',
118 | sourceName: 'Bank Account',
119 | sourceDesc: '*** 2222',
120 | amountCrypto: 1.4389567945,
121 | amount: 123843,
122 | cryptoCurrency: 'BTC',
123 | currency: '$'
124 | },
125 | {
126 | id: '10',
127 | orderDetails: 'Wallet Transfer',
128 | orderDate: subDays(new Date(), 123).getTime(),
129 | status: 'failed',
130 | orderID: '17KRZHY8T05M',
131 | sourceName: 'Wallet Transfer',
132 | sourceDesc: "John's Cardano Wallet",
133 | amountCrypto: 765.5695,
134 | amount: 7567,
135 | cryptoCurrency: 'ADA',
136 | currency: '$'
137 | }
138 | ];
139 |
140 | return (
141 |
142 |
143 |
144 | );
145 | }
146 |
147 | export default RecentOrders;
148 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/microsoft.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/status/500/index.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import {
3 | Box,
4 | Typography,
5 | Hidden,
6 | Container,
7 | Button,
8 | Grid,
9 | styled
10 | } from '@mui/material';
11 | import type { ReactElement } from 'react';
12 | import BaseLayout from 'src/layouts/BaseLayout';
13 |
14 | import Head from 'next/head';
15 | import RefreshTwoToneIcon from '@mui/icons-material/RefreshTwoTone';
16 | import LoadingButton from '@mui/lab/LoadingButton';
17 |
18 | const GridWrapper = styled(Grid)(
19 | ({ theme }) => `
20 | background: ${theme.colors.gradients.blue5};
21 | `
22 | );
23 |
24 | const MainContent = styled(Box)(
25 | () => `
26 | height: 100%;
27 | display: flex;
28 | flex: 1;
29 | overflow: auto;
30 | flex-direction: column;
31 | align-items: center;
32 | justify-content: center;
33 | `
34 | );
35 |
36 | const TypographyPrimary = styled(Typography)(
37 | ({ theme }) => `
38 | color: ${theme.colors.alpha.white[100]};
39 | `
40 | );
41 |
42 | const TypographySecondary = styled(Typography)(
43 | ({ theme }) => `
44 | color: ${theme.colors.alpha.white[70]};
45 | `
46 | );
47 |
48 | function Status500() {
49 | const [pending, setPending] = useState(false);
50 | function handleClick() {
51 | setPending(true);
52 | }
53 |
54 | return (
55 | <>
56 |
57 | Status - 500
58 |
59 |
60 |
66 |
74 |
75 |
76 |
81 |
82 | There was an error, please try again later
83 |
84 |
90 | The server encountered an internal error and was not able to
91 | complete your request
92 |
93 | }
99 | >
100 | Refresh view
101 |
102 |
103 | Go back
104 |
105 |
106 |
107 |
108 |
109 |
117 |
118 |
119 |
120 | Tokyo Free White Next.js Typescript Admin Dashboard
121 |
122 |
127 | High performance React template built with lots of powerful
128 | Material-UI components across multiple product niches for
129 | fast & perfect apps development processes.
130 |
131 |
132 | Overview
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 | >
141 | );
142 | }
143 |
144 | export default Status500;
145 |
146 | Status500.getLayout = function getLayout(page: ReactElement) {
147 | return {page} ;
148 | };
149 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/logo/google.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/components/modals/index.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head';
2 | import SidebarLayout from '@/layouts/SidebarLayout';
3 | import PropTypes from 'prop-types';
4 | import { useState } from 'react';
5 |
6 | import PageTitle from '@/components/PageTitle';
7 | import PageTitleWrapper from '@/components/PageTitleWrapper';
8 | import {
9 | Container,
10 | Grid,
11 | Card,
12 | CardHeader,
13 | CardContent,
14 | Divider
15 | } from '@mui/material';
16 | import Button from '@mui/material/Button';
17 | import Avatar from '@mui/material/Avatar';
18 | import List from '@mui/material/List';
19 | import ListItem from '@mui/material/ListItem';
20 | import ListItemAvatar from '@mui/material/ListItemAvatar';
21 | import ListItemText from '@mui/material/ListItemText';
22 | import DialogTitle from '@mui/material/DialogTitle';
23 | import Dialog from '@mui/material/Dialog';
24 | import PersonIcon from '@mui/icons-material/Person';
25 | import AddIcon from '@mui/icons-material/Add';
26 | import Typography from '@mui/material/Typography';
27 | import { blue } from '@mui/material/colors';
28 | import Footer from '@/components/Footer';
29 |
30 | const emails = ['username@gmail.com', 'user02@gmail.com'];
31 |
32 | function SimpleDialog(props) {
33 | const { onClose, selectedValue, open } = props;
34 |
35 | const handleClose = () => {
36 | onClose(selectedValue);
37 | };
38 |
39 | const handleListItemClick = (value) => {
40 | onClose(value);
41 | };
42 |
43 | return (
44 |
45 | Set backup account
46 |
47 | {emails.map((email) => (
48 | handleListItemClick(email)}
51 | key={email}
52 | >
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | ))}
61 |
62 | handleListItemClick('addAccount')}
66 | >
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | );
77 | }
78 |
79 | SimpleDialog.propTypes = {
80 | onClose: PropTypes.func.isRequired,
81 | open: PropTypes.bool.isRequired,
82 | selectedValue: PropTypes.string.isRequired
83 | };
84 |
85 | function Modals() {
86 | const [open, setOpen] = useState(false);
87 | const [selectedValue, setSelectedValue] = useState(emails[1]);
88 |
89 | const handleClickOpen = () => {
90 | setOpen(true);
91 | };
92 |
93 | const handleClose = (value) => {
94 | setOpen(false);
95 | setSelectedValue(value);
96 | };
97 |
98 | return (
99 | <>
100 |
101 | Modals - Components
102 |
103 |
104 |
109 |
110 |
111 |
118 |
119 |
120 |
121 |
122 |
123 |
124 | Selected: {selectedValue}
125 |
126 |
127 |
128 | Open simple dialog
129 |
130 |
135 |
136 |
137 |
138 |
139 |
140 |
141 | >
142 | );
143 | }
144 |
145 | Modals.getLayout = (page) => {page} ;
146 |
147 | export default Modals;
148 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/illustrations/time.svg:
--------------------------------------------------------------------------------
1 | #43 time
--------------------------------------------------------------------------------
/src/layouts/SidebarLayout/Header/Userbox/index.tsx:
--------------------------------------------------------------------------------
1 | import { useRef, useState } from 'react';
2 |
3 | import NextLink from 'next/link';
4 |
5 | import {
6 | Avatar,
7 | Box,
8 | Button,
9 | Divider,
10 | Hidden,
11 | lighten,
12 | List,
13 | ListItem,
14 | ListItemText,
15 | Popover,
16 | Typography
17 | } from '@mui/material';
18 |
19 | import InboxTwoToneIcon from '@mui/icons-material/InboxTwoTone';
20 | import { styled } from '@mui/material/styles';
21 | import ExpandMoreTwoToneIcon from '@mui/icons-material/ExpandMoreTwoTone';
22 | import AccountBoxTwoToneIcon from '@mui/icons-material/AccountBoxTwoTone';
23 | import LockOpenTwoToneIcon from '@mui/icons-material/LockOpenTwoTone';
24 | import AccountTreeTwoToneIcon from '@mui/icons-material/AccountTreeTwoTone';
25 |
26 | const UserBoxButton = styled(Button)(
27 | ({ theme }) => `
28 | padding-left: ${theme.spacing(1)};
29 | padding-right: ${theme.spacing(1)};
30 | `
31 | );
32 |
33 | const MenuUserBox = styled(Box)(
34 | ({ theme }) => `
35 | background: ${theme.colors.alpha.black[5]};
36 | padding: ${theme.spacing(2)};
37 | `
38 | );
39 |
40 | const UserBoxText = styled(Box)(
41 | ({ theme }) => `
42 | text-align: left;
43 | padding-left: ${theme.spacing(1)};
44 | `
45 | );
46 |
47 | const UserBoxLabel = styled(Typography)(
48 | ({ theme }) => `
49 | font-weight: ${theme.typography.fontWeightBold};
50 | color: ${theme.palette.secondary.main};
51 | display: block;
52 | `
53 | );
54 |
55 | const UserBoxDescription = styled(Typography)(
56 | ({ theme }) => `
57 | color: ${lighten(theme.palette.secondary.main, 0.5)}
58 | `
59 | );
60 |
61 | function HeaderUserbox() {
62 | const user = {
63 | name: 'Catherine Pike',
64 | avatar: '/static/images/avatars/1.jpg',
65 | jobtitle: 'Project Manager'
66 | };
67 |
68 | const ref = useRef(null);
69 | const [isOpen, setOpen] = useState(false);
70 |
71 | const handleOpen = (): void => {
72 | setOpen(true);
73 | };
74 |
75 | const handleClose = (): void => {
76 | setOpen(false);
77 | };
78 |
79 | return (
80 | <>
81 |
82 |
83 |
84 |
85 | {user.name}
86 |
87 | {user.jobtitle}
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
108 |
109 |
110 |
111 | {user.name}
112 |
113 | {user.jobtitle}
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 | Sign out
143 |
144 |
145 |
146 | >
147 | );
148 | }
149 |
150 | export default HeaderUserbox;
151 |
--------------------------------------------------------------------------------
/public/static/images/placeholders/illustrations/authentication.svg:
--------------------------------------------------------------------------------
1 | #13 authentication
--------------------------------------------------------------------------------