├── .env ├── .gitignore ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── eslint.config.js ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── product.description.html ├── public ├── assets │ └── images │ │ ├── 5-star.png │ │ ├── Component 60 – 1.svg │ │ ├── TESLA.png │ │ ├── abstract-bg-1.png │ │ ├── amazon-2.png │ │ ├── asus-6630.png │ │ ├── avatars │ │ ├── 001-man.svg │ │ ├── 002-woman.svg │ │ ├── 003-man-1.svg │ │ ├── 004-bald.svg │ │ ├── 005-man-2.svg │ │ ├── 006-woman-1.svg │ │ └── 007-woman-2.svg │ │ ├── badges │ │ ├── badge-1.svg │ │ ├── badge-2.svg │ │ ├── badge-3.svg │ │ ├── badge-4.svg │ │ ├── badge-5.svg │ │ ├── badge-6.svg │ │ ├── badge-7.svg │ │ ├── badge-8.svg │ │ └── badge-9.svg │ │ ├── bg-1.png │ │ ├── bg-2.jpg │ │ ├── bg-3.png │ │ ├── browsers │ │ ├── android.svg │ │ ├── apple.svg │ │ ├── chrome.svg │ │ ├── explorer.svg │ │ ├── license │ │ │ └── license.html │ │ ├── linux.svg │ │ ├── mozilla.svg │ │ ├── netscape.svg │ │ ├── opera.svg │ │ ├── safari.svg │ │ └── windows.svg │ │ ├── cancel.png │ │ ├── circles.png │ │ ├── contact-1.png │ │ ├── dashboard-1.png │ │ ├── debit-card.png │ │ ├── demo_all.jpg │ │ ├── demo_home_one.jpg │ │ ├── demo_home_two.jpg │ │ ├── doted-bg-1.png │ │ ├── dots.png │ │ ├── edit.svg │ │ ├── egret-screen.jpg │ │ ├── egret-screen.png │ │ ├── event-1.jpg │ │ ├── event-2.jpg │ │ ├── face-1.jpg │ │ ├── face-1.png │ │ ├── face-2.jpg │ │ ├── face-2.png │ │ ├── face-3.jpg │ │ ├── face-3.png │ │ ├── face-4.jpg │ │ ├── face-4.png │ │ ├── face-5.jpg │ │ ├── face-6.jpg │ │ ├── face-7.jpg │ │ ├── faces │ │ ├── 10.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── 15.jpg │ │ ├── 16.jpg │ │ ├── 17.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ └── 9.jpg │ │ ├── file-types │ │ ├── 001-pdf.svg │ │ ├── 002-psd.svg │ │ ├── 003-xls.svg │ │ ├── 004-xlsx.svg │ │ ├── 005-documents.svg │ │ ├── 006-png.svg │ │ └── 007-jpg.svg │ │ ├── google-1-1.png │ │ ├── gr.png │ │ ├── graduate-1.jpg │ │ ├── happy-face-1.png │ │ ├── home-bg-black.png │ │ ├── home-bg-indigo.jpg │ │ ├── home-bg.jpg │ │ ├── home-bg.png │ │ ├── home-work.jpg │ │ ├── illustrations │ │ ├── 1.svg │ │ ├── 2.svg │ │ ├── 404.svg │ │ ├── announcement.svg │ │ ├── baby.svg │ │ ├── business_deal.svg │ │ ├── designer.svg │ │ ├── dreamer.svg │ │ ├── lighthouse.svg │ │ ├── mobile-message.svg │ │ ├── posting_photo.svg │ │ └── upgrade.svg │ │ ├── laptop-1.png │ │ ├── laptop-2.png │ │ ├── laptop-3.png │ │ ├── laptop-4.png │ │ ├── logo-circle.png │ │ ├── logo-circle.svg │ │ ├── logo-full-old.png │ │ ├── logo-full.png │ │ ├── logo-text-white.png │ │ ├── logo.png │ │ ├── logo.svg │ │ ├── logos │ │ ├── angular.png │ │ ├── auth0.svg │ │ ├── bootstrap.png │ │ ├── google.svg │ │ ├── gulp.png │ │ ├── laravel.png │ │ ├── logo-1.png │ │ ├── logo-2.png │ │ ├── logo-3.png │ │ ├── logo-4.png │ │ ├── logo-5.png │ │ ├── logo-6.png │ │ ├── logo-7.png │ │ ├── logo-8.png │ │ ├── logo-9.png │ │ ├── react.png │ │ ├── sass.png │ │ ├── ui-lib.png │ │ └── webpack.png │ │ ├── microphone.jpg │ │ ├── mobile-1.png │ │ ├── mobile-1.svg │ │ ├── mobile-2.svg │ │ ├── mobile-3.svg │ │ ├── mobile-4.svg │ │ ├── mock-logo-1.png │ │ ├── mock-logo-2.png │ │ ├── mock-logo-3.png │ │ ├── mock-logo-4.png │ │ ├── oc.png │ │ ├── payment-card │ │ ├── 001-paypal.svg │ │ ├── 002-mastercard.svg │ │ ├── 003-american express.svg │ │ ├── 004-visa.svg │ │ ├── 005-discover.svg │ │ ├── 006-western union.svg │ │ ├── 007-cirrus.svg │ │ ├── 008-ideal.svg │ │ ├── 009-jcb.svg │ │ ├── 010-eway.svg │ │ ├── 011-wirecard.svg │ │ ├── 012-solo.svg │ │ ├── 013-hsbc.svg │ │ ├── 014-ebay.svg │ │ ├── 015-citi.svg │ │ ├── 016-direct debit.svg │ │ ├── 017-symbols.svg │ │ ├── 018-dinners club.svg │ │ ├── 019-postepay.svg │ │ ├── 020-sage.svg │ │ ├── 021-switch.svg │ │ ├── 022-maestro.svg │ │ ├── 023-paypoint.svg │ │ ├── 024-pick n pay.svg │ │ ├── 025-worldpay.svg │ │ ├── 026-union pay.svg │ │ ├── 027-better business bureau.svg │ │ ├── 028-2co.svg │ │ ├── 029-authorize.svg │ │ ├── 030-bluepay.svg │ │ ├── 031-clickbank.svg │ │ ├── 032-wepay.svg │ │ ├── maestro.png │ │ ├── master-card.png │ │ ├── paypal-2.png │ │ ├── paypal.png │ │ ├── visa-2.png │ │ └── visa.png │ │ ├── payment-methods │ │ ├── amazon.png │ │ ├── amex.png │ │ ├── cirrus.png │ │ ├── maestro.png │ │ ├── master-card.png │ │ ├── paypal.png │ │ ├── shopify.png │ │ ├── skrill.png │ │ ├── visa-electron.png │ │ ├── visa.png │ │ └── western-union.png │ │ ├── photo-1.jpg │ │ ├── photo-2.jpg │ │ ├── photo-3.jpg │ │ ├── photo-600_220.jpg │ │ ├── products │ │ ├── headphone-1.jpg │ │ ├── headphone-2.jpg │ │ ├── headphone-3.jpg │ │ ├── headphone-4.jpg │ │ ├── iphone-1.jpg │ │ ├── iphone-2.jpg │ │ ├── speaker-1.jpg │ │ ├── speaker-2.jpg │ │ ├── watch-1.jpg │ │ └── watch-2.jpg │ │ ├── random-1.png │ │ ├── random-10.png │ │ ├── random-11.png │ │ ├── random-12.png │ │ ├── random-2.png │ │ ├── random-3.png │ │ ├── random-4.png │ │ ├── random-5.png │ │ ├── random-6.png │ │ ├── random-7.png │ │ ├── random-8.png │ │ ├── random-9.png │ │ ├── react-logo.svg │ │ ├── room-1.jpg │ │ ├── room-2.jpg │ │ ├── room-3.jpg │ │ ├── room-4.jpg │ │ ├── room-5.jpg │ │ ├── room-6.jpg │ │ ├── room-7.jpg │ │ ├── room-8.jpg │ │ ├── room-9.jpg │ │ ├── scene-1.jpg │ │ ├── scene-2.jpg │ │ ├── scene-3.jpg │ │ ├── screenshots │ │ ├── calendar.jpg │ │ ├── dashboard.jpg │ │ ├── gull-dashboard.png │ │ ├── landing-1.png │ │ ├── landing-10.png │ │ ├── landing-11.png │ │ ├── landing-12.png │ │ ├── landing-2.png │ │ ├── landing-3.png │ │ ├── landing-4.png │ │ ├── landing-5.png │ │ ├── landing-6.png │ │ ├── landing-7.png │ │ ├── landing-8.png │ │ ├── landing-9.png │ │ ├── landing-intro.png │ │ ├── layout1-blue-customizer.png │ │ ├── layout1-customizer-1.png │ │ ├── layout1-customizer.png │ │ ├── layout2-customizer.png │ │ ├── layout3-customizer.png │ │ ├── layout4-customizer.png │ │ ├── layout5-customizer.png │ │ └── login.jpg │ │ ├── sidebar-bg-dark.jpg │ │ ├── sidebar-bg.jpg │ │ ├── sidebar │ │ ├── sidebar-bg-dark.jpg │ │ └── sidebar-bg-light.jpg │ │ ├── social-dribble.png │ │ ├── social-facebook.png │ │ ├── social-linkedin.png │ │ ├── social-twitter.png │ │ ├── spotify-1.png │ │ ├── sq-1.jpg │ │ ├── sq-1.png │ │ ├── sq-10.jpg │ │ ├── sq-11.jpg │ │ ├── sq-12.jpg │ │ ├── sq-13.jpg │ │ ├── sq-15.jpg │ │ ├── sq-16.jpg │ │ ├── sq-17.jpg │ │ ├── sq-2.jpg │ │ ├── sq-2.png │ │ ├── sq-3.jpg │ │ ├── sq-3.png │ │ ├── sq-4.jpg │ │ ├── sq-4.png │ │ ├── sq-5.jpg │ │ ├── sq-6.jpg │ │ ├── sq-7.jpg │ │ ├── sq-8.jpg │ │ ├── sq-9.jpg │ │ ├── sq-face-220.jpg │ │ ├── star-rating.icons.svg │ │ ├── study-1.png │ │ ├── study-10.jpg │ │ ├── study-11.jpg │ │ ├── study-2.jpg │ │ ├── study-3.jpg │ │ ├── study-4.jpg │ │ ├── study-5.jpg │ │ ├── study-6.jpg │ │ ├── study-7.jpg │ │ ├── study-8.jpg │ │ ├── study-9.jpg │ │ ├── study-bg-1.jpg │ │ ├── study-bg-2.jpg │ │ ├── svgIconExample.svg │ │ ├── tf.png │ │ └── wide-1.jpg ├── favicon.ico └── manifest.json ├── src ├── __api__ │ ├── db │ │ ├── auth.js │ │ ├── ecommerce.js │ │ └── notification.js │ ├── index.js │ └── mock.js ├── app │ ├── App.jsx │ ├── auth │ │ ├── AuthGuard.jsx │ │ └── authRoles.js │ ├── components │ │ ├── Brand.jsx │ │ ├── Breadcrumb.jsx │ │ ├── ChatAvatar.jsx │ │ ├── ChatHead.jsx │ │ ├── Chatbox.jsx │ │ ├── ConfirmationDialog.jsx │ │ ├── Footer.jsx │ │ ├── Loadable.jsx │ │ ├── MatxCustomizer │ │ │ ├── Layout1Customizer.jsx │ │ │ ├── MatxCustomizer.jsx │ │ │ ├── customizerOptions.js │ │ │ └── styles.jsx │ │ ├── MatxDivider.jsx │ │ ├── MatxLayout │ │ │ ├── Layout1 │ │ │ │ ├── Layout1.jsx │ │ │ │ ├── Layout1Settings.js │ │ │ │ ├── Layout1Sidenav.jsx │ │ │ │ └── Layout1Topbar.jsx │ │ │ ├── MatxLayout.jsx │ │ │ ├── index.js │ │ │ └── settings.js │ │ ├── MatxLoading.jsx │ │ ├── MatxLogo.jsx │ │ ├── MatxMenu.jsx │ │ ├── MatxProgressBar.jsx │ │ ├── MatxSearchBox.jsx │ │ ├── MatxSidenav │ │ │ ├── MatxSidenav.jsx │ │ │ └── index.js │ │ ├── MatxSuspense.jsx │ │ ├── MatxTheme │ │ │ ├── EchartTheme.jsx │ │ │ ├── MatxTheme.jsx │ │ │ ├── SecondarySidenavTheme │ │ │ │ ├── SecondarySidenavTheme.jsx │ │ │ │ └── index.js │ │ │ ├── SidenavTheme │ │ │ │ ├── SidenavTheme.jsx │ │ │ │ └── index.js │ │ │ ├── components.js │ │ │ ├── initThemes.js │ │ │ ├── themeColors.js │ │ │ └── themeOptions.js │ │ ├── MatxVerticalNav │ │ │ ├── MatxVerticalNav.jsx │ │ │ ├── MatxVerticalNavExpansionPanel.jsx │ │ │ └── index.js │ │ ├── NotificationBar │ │ │ ├── NotificationBar.jsx │ │ │ └── index.js │ │ ├── SecondarySidebar │ │ │ ├── SecondarySidebar.jsx │ │ │ ├── SecondarySidebarContent.jsx │ │ │ ├── SecondarySidebarToggle.jsx │ │ │ └── index.js │ │ ├── ShoppingCart.jsx │ │ ├── Sidenav.jsx │ │ ├── SimpleCard.jsx │ │ ├── Typography.jsx │ │ └── index.js │ ├── config.js │ ├── contexts │ │ ├── Auth0Context.jsx │ │ ├── FirebaseAuthContext.jsx │ │ ├── JWTAuthContext.jsx │ │ ├── NotificationContext.jsx │ │ └── SettingsContext.jsx │ ├── hooks │ │ ├── useAuth.js │ │ ├── useNotification.js │ │ └── useSettings.js │ ├── navigations.js │ ├── routes.jsx │ ├── utils │ │ ├── constant.js │ │ └── utils.js │ └── views │ │ ├── charts │ │ └── echarts │ │ │ ├── AdvanceAreaChart.jsx │ │ │ ├── AppEchart.jsx │ │ │ ├── AreaChart.jsx │ │ │ ├── ComparisonChart.jsx │ │ │ ├── Doughnut.jsx │ │ │ └── LineChart.jsx │ │ ├── dashboard │ │ ├── Analytics.jsx │ │ └── shared │ │ │ ├── Campaigns.jsx │ │ │ ├── Doughnut.jsx │ │ │ ├── ModifiedAreaChart.jsx │ │ │ ├── RowCards.jsx │ │ │ ├── StatCards.jsx │ │ │ ├── StatCards2.jsx │ │ │ ├── TopSellingTable.jsx │ │ │ └── UpgradeCard.jsx │ │ ├── material-kit │ │ ├── AppProgress.jsx │ │ ├── DatePicker.jsx │ │ ├── MaterialRoutes.jsx │ │ ├── auto-complete │ │ │ ├── AppAutoComplete.jsx │ │ │ ├── AsyncAutocomplete.jsx │ │ │ ├── AutocompleteCombo.jsx │ │ │ ├── BadgeAutocomplete.jsx │ │ │ └── LocationAutocomplete.jsx │ │ ├── buttons │ │ │ └── AppButton.jsx │ │ ├── checkbox │ │ │ ├── AppCheckbox.jsx │ │ │ ├── FormGroupCheckbox.jsx │ │ │ ├── LabelledCheckbox.jsx │ │ │ ├── PlacingCheckboxLabel.jsx │ │ │ └── SimpleCheckbox.jsx │ │ ├── dialog │ │ │ ├── AppDialog.jsx │ │ │ ├── ConfirmationDialog.jsx │ │ │ ├── CustomizedDialog.jsx │ │ │ ├── DialogTransition.jsx │ │ │ ├── FormDialog.jsx │ │ │ ├── FullScreenDialog.jsx │ │ │ ├── OptimalSizeDialog.jsx │ │ │ ├── ResponsiveDialog.jsx │ │ │ ├── SimpleAlerts.jsx │ │ │ └── SimpleDialog.jsx │ │ ├── expansion-panel │ │ │ ├── AppExpansionPanel.jsx │ │ │ ├── ControlledAccordion.jsx │ │ │ ├── CustomizedExpansionPanel.jsx │ │ │ ├── DetailedExpansionPanel.jsx │ │ │ └── SimpleExpansionPanel.jsx │ │ ├── forms │ │ │ ├── AppForm.jsx │ │ │ ├── SimpleForm.jsx │ │ │ └── StepperForm.jsx │ │ ├── icons │ │ │ └── AppIcon.jsx │ │ ├── menu │ │ │ ├── AppMenu.jsx │ │ │ ├── CustomizedMenu.jsx │ │ │ ├── MaxHeightMenu.jsx │ │ │ ├── SelectedMenu.jsx │ │ │ └── SimpleMenu.jsx │ │ ├── radio │ │ │ ├── AppRadio.jsx │ │ │ ├── PlacingRadioLabel.jsx │ │ │ ├── SimpleRadio.jsx │ │ │ └── StandaloneRadio.jsx │ │ ├── slider │ │ │ ├── AppSlider.jsx │ │ │ ├── ContinuousSlider.jsx │ │ │ ├── CustomizedSlider.jsx │ │ │ ├── DiscreteSlider.jsx │ │ │ ├── InputSlider.jsx │ │ │ ├── RangeSlider.jsx │ │ │ └── VerticalSlider.jsx │ │ ├── snackbar │ │ │ ├── AppSnackbar.jsx │ │ │ ├── ConsecutiveSnackbar.jsx │ │ │ ├── CustomizedSnackbar.jsx │ │ │ ├── DirectionSnackbar.jsx │ │ │ ├── LongLengthSnackbar.jsx │ │ │ ├── PositionedSnackbar.jsx │ │ │ ├── SimpleSnackbar.jsx │ │ │ ├── StackedSnackbar.jsx │ │ │ └── TransitionSnackbar.jsx │ │ ├── switch │ │ │ ├── AppSwitch.jsx │ │ │ ├── CustomizedSwitch.jsx │ │ │ ├── FormGroupSwitch.jsx │ │ │ ├── LabelledSwitch.jsx │ │ │ ├── PlacingSwitchLabel.jsx │ │ │ └── SijmpleSwitch.jsx │ │ └── tables │ │ │ ├── AppTable.jsx │ │ │ ├── PaginationTable.jsx │ │ │ └── SimpleTable.jsx │ │ └── sessions │ │ ├── ForgotPassword.jsx │ │ ├── NotFound.jsx │ │ ├── login │ │ ├── Auth0Login.jsx │ │ ├── FirebaseLogin.jsx │ │ └── JwtLogin.jsx │ │ ├── register │ │ ├── FirebaseRegister.jsx │ │ └── JwtRegister.jsx │ │ └── session-routes.jsx └── main.jsx ├── vercel.json └── vite.config.js /.env: -------------------------------------------------------------------------------- 1 | # VITE_FIREBASE_APT_KEY= 2 | # VITE_FIREBASE_AUTH_DOMAIN= 3 | # VITE_FIREBASE_DATABASE_URL= 4 | # VITE_FIREBASE_PROJECT_ID= 5 | # VITE_FIREBASE_STORAGE_BUCKET= 6 | # VITE_FIREBASE_MESSAGING_SENDER_ID= 7 | # VITE_FIREBASE_APP_ID= 8 | # VITE_FIREBASE_MEASUREMENT_ID= 9 | 10 | # VITE_AUTH0_CLIENT_ID= 11 | # VITE_AUTH0_DOMAIN= 12 | 13 | VITE_FIREBASE_APT_KEY=AIzaSyBoUdiDtzQdC-m4nj9CPY5SvY7uKJGL71k 14 | VITE_FIREBASE_AUTH_DOMAIN=matx-15ede.firebaseapp.com 15 | VITE_FIREBASE_DATABASE_URL=https://matx-15ede.firebaseio.com 16 | VITE_FIREBASE_PROJECT_ID=matx-15ede 17 | VITE_FIREBASE_STORAGE_BUCKET=matx-15ede.appspot.com 18 | VITE_FIREBASE_MESSAGING_SENDER_ID=348111707030 19 | VITE_FIREBASE_APP_ID=1:348111707030:web:70c4ca4eb3f1dbd18e1bb7 20 | VITE_FIREBASE_MEASUREMENT_ID=G-806629YLNN 21 | 22 | VITE_AUTH0_CLIENT_ID=XmminWIs0S8gR3gIRBydYLWbF58x81vK 23 | VITE_AUTH0_DOMAIN=matx.us.auth0.com -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /docs/node_modules 6 | /.pnp 7 | .pnp.js 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /dist 14 | 15 | 16 | # misc 17 | .eslintcache 18 | .DS_Store 19 | .env.local 20 | .env.development.local 21 | .env.test.local 22 | .env.production.local 23 | 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "editor.formatOnSave": true, 4 | "prettier.printWidth": 100, 5 | "prettier.trailingComma": "none" 6 | } 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright © 2022 UI LIB 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from "@eslint/js"; 2 | import globals from "globals"; 3 | import react from "eslint-plugin-react"; 4 | import reactHooks from "eslint-plugin-react-hooks"; 5 | import reactRefresh from "eslint-plugin-react-refresh"; 6 | 7 | export default [ 8 | { ignores: ["dist"] }, 9 | { 10 | files: ["**/*.{js,jsx}"], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: "latest", 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: "module" 18 | } 19 | }, 20 | settings: { react: { version: "18.3" } }, 21 | plugins: { 22 | react, 23 | "react-hooks": reactHooks, 24 | "react-refresh": reactRefresh 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs["jsx-runtime"].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | "react/jsx-no-target-blank": "off", 32 | "react/no-unescaped-entities": 0, 33 | "no-undef": 0, 34 | "react/prop-types": 0, 35 | "react/display-name": 0, 36 | "react-refresh/only-export-components": 0 37 | } 38 | } 39 | ]; 40 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { "baseUrl": "src" } 3 | } 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "matx-react", 3 | "version": "5.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview", 11 | "ghp": "vite build && gh-pages -d build" 12 | }, 13 | "dependencies": { 14 | "@auth0/auth0-spa-js": "^2.1.3", 15 | "@emotion/react": "^11.13.3", 16 | "@emotion/styled": "^11.13.0", 17 | "@mui/icons-material": "^6.1.4", 18 | "@mui/lab": "^6.0.0-beta.12", 19 | "@mui/material": "^6.1.4", 20 | "@mui/x-date-pickers": "^7.21.0", 21 | "autosuggest-highlight": "^3.3.4", 22 | "axios": "^1.7.7", 23 | "clsx": "^2.1.1", 24 | "date-fns": "^4.1.0", 25 | "echarts": "^5.5.1", 26 | "echarts-for-react": "^3.0.2", 27 | "firebase": "^10.14.1", 28 | "formik": "^2.4.6", 29 | "jwt-decode": "^4.0.0", 30 | "lodash": "^4.17.21", 31 | "nanoid": "^5.0.7", 32 | "notistack": "^3.0.1", 33 | "react": "^18.3.1", 34 | "react-dom": "^18.3.1", 35 | "react-perfect-scrollbar": "^1.5.8", 36 | "react-router-dom": "^6.27.0", 37 | "yup": "^1.4.0" 38 | }, 39 | "devDependencies": { 40 | "@eslint/js": "^9.13.0", 41 | "@types/react": "^18.3.11", 42 | "@types/react-dom": "^18.3.1", 43 | "@vitejs/plugin-react": "^4.3.3", 44 | "axios-mock-adapter": "^2.1.0", 45 | "cross-env": "^7.0.3", 46 | "customize-cra": "^1.0.0", 47 | "eslint": "^9.13.0", 48 | "eslint-plugin-react": "^7.37.1", 49 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 50 | "eslint-plugin-react-refresh": "^0.4.13", 51 | "gh-pages": "^6.2.0", 52 | "globals": "^15.11.0", 53 | "vite": "^5.4.9", 54 | "vite-plugin-pwa": "^0.20.5" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /public/assets/images/5-star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/5-star.png -------------------------------------------------------------------------------- /public/assets/images/Component 60 – 1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/assets/images/TESLA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/TESLA.png -------------------------------------------------------------------------------- /public/assets/images/abstract-bg-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/abstract-bg-1.png -------------------------------------------------------------------------------- /public/assets/images/amazon-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/amazon-2.png -------------------------------------------------------------------------------- /public/assets/images/asus-6630.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/asus-6630.png -------------------------------------------------------------------------------- /public/assets/images/bg-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/bg-1.png -------------------------------------------------------------------------------- /public/assets/images/bg-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/bg-2.jpg -------------------------------------------------------------------------------- /public/assets/images/bg-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/bg-3.png -------------------------------------------------------------------------------- /public/assets/images/browsers/apple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/assets/images/browsers/explorer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/assets/images/browsers/netscape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 10 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /public/assets/images/browsers/opera.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 13 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /public/assets/images/browsers/windows.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 11 | 13 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /public/assets/images/cancel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/cancel.png -------------------------------------------------------------------------------- /public/assets/images/circles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/circles.png -------------------------------------------------------------------------------- /public/assets/images/contact-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/contact-1.png -------------------------------------------------------------------------------- /public/assets/images/dashboard-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/dashboard-1.png -------------------------------------------------------------------------------- /public/assets/images/debit-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/debit-card.png -------------------------------------------------------------------------------- /public/assets/images/demo_all.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/demo_all.jpg -------------------------------------------------------------------------------- /public/assets/images/demo_home_one.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/demo_home_one.jpg -------------------------------------------------------------------------------- /public/assets/images/demo_home_two.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/demo_home_two.jpg -------------------------------------------------------------------------------- /public/assets/images/doted-bg-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/doted-bg-1.png -------------------------------------------------------------------------------- /public/assets/images/dots.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/dots.png -------------------------------------------------------------------------------- /public/assets/images/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /public/assets/images/egret-screen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/egret-screen.jpg -------------------------------------------------------------------------------- /public/assets/images/egret-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/egret-screen.png -------------------------------------------------------------------------------- /public/assets/images/event-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/event-1.jpg -------------------------------------------------------------------------------- /public/assets/images/event-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/event-2.jpg -------------------------------------------------------------------------------- /public/assets/images/face-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/face-1.jpg -------------------------------------------------------------------------------- /public/assets/images/face-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/face-1.png -------------------------------------------------------------------------------- /public/assets/images/face-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/face-2.jpg -------------------------------------------------------------------------------- /public/assets/images/face-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/face-2.png -------------------------------------------------------------------------------- /public/assets/images/face-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/face-3.jpg -------------------------------------------------------------------------------- /public/assets/images/face-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/face-3.png -------------------------------------------------------------------------------- /public/assets/images/face-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/face-4.jpg -------------------------------------------------------------------------------- /public/assets/images/face-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/face-4.png -------------------------------------------------------------------------------- /public/assets/images/face-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/face-5.jpg -------------------------------------------------------------------------------- /public/assets/images/face-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/face-6.jpg -------------------------------------------------------------------------------- /public/assets/images/face-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/face-7.jpg -------------------------------------------------------------------------------- /public/assets/images/faces/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/faces/10.jpg -------------------------------------------------------------------------------- /public/assets/images/faces/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/faces/12.jpg -------------------------------------------------------------------------------- /public/assets/images/faces/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/faces/13.jpg -------------------------------------------------------------------------------- /public/assets/images/faces/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/faces/15.jpg -------------------------------------------------------------------------------- /public/assets/images/faces/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/faces/16.jpg -------------------------------------------------------------------------------- /public/assets/images/faces/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/faces/17.jpg -------------------------------------------------------------------------------- /public/assets/images/faces/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/faces/2.jpg -------------------------------------------------------------------------------- /public/assets/images/faces/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/faces/3.jpg -------------------------------------------------------------------------------- /public/assets/images/faces/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/faces/4.jpg -------------------------------------------------------------------------------- /public/assets/images/faces/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/faces/5.jpg -------------------------------------------------------------------------------- /public/assets/images/faces/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/faces/9.jpg -------------------------------------------------------------------------------- /public/assets/images/file-types/001-pdf.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/images/file-types/002-psd.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/images/file-types/003-xls.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/images/file-types/004-xlsx.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/images/file-types/005-documents.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/images/file-types/006-png.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/images/file-types/007-jpg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/images/google-1-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/google-1-1.png -------------------------------------------------------------------------------- /public/assets/images/gr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/gr.png -------------------------------------------------------------------------------- /public/assets/images/graduate-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/graduate-1.jpg -------------------------------------------------------------------------------- /public/assets/images/happy-face-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/happy-face-1.png -------------------------------------------------------------------------------- /public/assets/images/home-bg-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/home-bg-black.png -------------------------------------------------------------------------------- /public/assets/images/home-bg-indigo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/home-bg-indigo.jpg -------------------------------------------------------------------------------- /public/assets/images/home-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/home-bg.jpg -------------------------------------------------------------------------------- /public/assets/images/home-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/home-bg.png -------------------------------------------------------------------------------- /public/assets/images/home-work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/home-work.jpg -------------------------------------------------------------------------------- /public/assets/images/laptop-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/laptop-1.png -------------------------------------------------------------------------------- /public/assets/images/laptop-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/laptop-2.png -------------------------------------------------------------------------------- /public/assets/images/laptop-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/laptop-3.png -------------------------------------------------------------------------------- /public/assets/images/laptop-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/laptop-4.png -------------------------------------------------------------------------------- /public/assets/images/logo-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logo-circle.png -------------------------------------------------------------------------------- /public/assets/images/logo-full-old.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logo-full-old.png -------------------------------------------------------------------------------- /public/assets/images/logo-full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logo-full.png -------------------------------------------------------------------------------- /public/assets/images/logo-text-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logo-text-white.png -------------------------------------------------------------------------------- /public/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logo.png -------------------------------------------------------------------------------- /public/assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 19 | 20 | -------------------------------------------------------------------------------- /public/assets/images/logos/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/angular.png -------------------------------------------------------------------------------- /public/assets/images/logos/bootstrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/bootstrap.png -------------------------------------------------------------------------------- /public/assets/images/logos/gulp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/gulp.png -------------------------------------------------------------------------------- /public/assets/images/logos/laravel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/laravel.png -------------------------------------------------------------------------------- /public/assets/images/logos/logo-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/logo-1.png -------------------------------------------------------------------------------- /public/assets/images/logos/logo-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/logo-2.png -------------------------------------------------------------------------------- /public/assets/images/logos/logo-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/logo-3.png -------------------------------------------------------------------------------- /public/assets/images/logos/logo-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/logo-4.png -------------------------------------------------------------------------------- /public/assets/images/logos/logo-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/logo-5.png -------------------------------------------------------------------------------- /public/assets/images/logos/logo-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/logo-6.png -------------------------------------------------------------------------------- /public/assets/images/logos/logo-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/logo-7.png -------------------------------------------------------------------------------- /public/assets/images/logos/logo-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/logo-8.png -------------------------------------------------------------------------------- /public/assets/images/logos/logo-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/logo-9.png -------------------------------------------------------------------------------- /public/assets/images/logos/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/react.png -------------------------------------------------------------------------------- /public/assets/images/logos/sass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/sass.png -------------------------------------------------------------------------------- /public/assets/images/logos/ui-lib.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/ui-lib.png -------------------------------------------------------------------------------- /public/assets/images/logos/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/logos/webpack.png -------------------------------------------------------------------------------- /public/assets/images/microphone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/microphone.jpg -------------------------------------------------------------------------------- /public/assets/images/mobile-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/mobile-1.png -------------------------------------------------------------------------------- /public/assets/images/mock-logo-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/mock-logo-1.png -------------------------------------------------------------------------------- /public/assets/images/mock-logo-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/mock-logo-2.png -------------------------------------------------------------------------------- /public/assets/images/mock-logo-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/mock-logo-3.png -------------------------------------------------------------------------------- /public/assets/images/mock-logo-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/mock-logo-4.png -------------------------------------------------------------------------------- /public/assets/images/oc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/oc.png -------------------------------------------------------------------------------- /public/assets/images/payment-card/012-solo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 9 | 11 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /public/assets/images/payment-card/maestro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-card/maestro.png -------------------------------------------------------------------------------- /public/assets/images/payment-card/master-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-card/master-card.png -------------------------------------------------------------------------------- /public/assets/images/payment-card/paypal-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-card/paypal-2.png -------------------------------------------------------------------------------- /public/assets/images/payment-card/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-card/paypal.png -------------------------------------------------------------------------------- /public/assets/images/payment-card/visa-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-card/visa-2.png -------------------------------------------------------------------------------- /public/assets/images/payment-card/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-card/visa.png -------------------------------------------------------------------------------- /public/assets/images/payment-methods/amazon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-methods/amazon.png -------------------------------------------------------------------------------- /public/assets/images/payment-methods/amex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-methods/amex.png -------------------------------------------------------------------------------- /public/assets/images/payment-methods/cirrus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-methods/cirrus.png -------------------------------------------------------------------------------- /public/assets/images/payment-methods/maestro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-methods/maestro.png -------------------------------------------------------------------------------- /public/assets/images/payment-methods/master-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-methods/master-card.png -------------------------------------------------------------------------------- /public/assets/images/payment-methods/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-methods/paypal.png -------------------------------------------------------------------------------- /public/assets/images/payment-methods/shopify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-methods/shopify.png -------------------------------------------------------------------------------- /public/assets/images/payment-methods/skrill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-methods/skrill.png -------------------------------------------------------------------------------- /public/assets/images/payment-methods/visa-electron.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-methods/visa-electron.png -------------------------------------------------------------------------------- /public/assets/images/payment-methods/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-methods/visa.png -------------------------------------------------------------------------------- /public/assets/images/payment-methods/western-union.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/payment-methods/western-union.png -------------------------------------------------------------------------------- /public/assets/images/photo-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/photo-1.jpg -------------------------------------------------------------------------------- /public/assets/images/photo-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/photo-2.jpg -------------------------------------------------------------------------------- /public/assets/images/photo-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/photo-3.jpg -------------------------------------------------------------------------------- /public/assets/images/photo-600_220.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/photo-600_220.jpg -------------------------------------------------------------------------------- /public/assets/images/products/headphone-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/products/headphone-1.jpg -------------------------------------------------------------------------------- /public/assets/images/products/headphone-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/products/headphone-2.jpg -------------------------------------------------------------------------------- /public/assets/images/products/headphone-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/products/headphone-3.jpg -------------------------------------------------------------------------------- /public/assets/images/products/headphone-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/products/headphone-4.jpg -------------------------------------------------------------------------------- /public/assets/images/products/iphone-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/products/iphone-1.jpg -------------------------------------------------------------------------------- /public/assets/images/products/iphone-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/products/iphone-2.jpg -------------------------------------------------------------------------------- /public/assets/images/products/speaker-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/products/speaker-1.jpg -------------------------------------------------------------------------------- /public/assets/images/products/speaker-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/products/speaker-2.jpg -------------------------------------------------------------------------------- /public/assets/images/products/watch-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/products/watch-1.jpg -------------------------------------------------------------------------------- /public/assets/images/products/watch-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/products/watch-2.jpg -------------------------------------------------------------------------------- /public/assets/images/random-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/random-1.png -------------------------------------------------------------------------------- /public/assets/images/random-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/random-10.png -------------------------------------------------------------------------------- /public/assets/images/random-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/random-11.png -------------------------------------------------------------------------------- /public/assets/images/random-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/random-12.png -------------------------------------------------------------------------------- /public/assets/images/random-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/random-2.png -------------------------------------------------------------------------------- /public/assets/images/random-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/random-3.png -------------------------------------------------------------------------------- /public/assets/images/random-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/random-4.png -------------------------------------------------------------------------------- /public/assets/images/random-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/random-5.png -------------------------------------------------------------------------------- /public/assets/images/random-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/random-6.png -------------------------------------------------------------------------------- /public/assets/images/random-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/random-7.png -------------------------------------------------------------------------------- /public/assets/images/random-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/random-8.png -------------------------------------------------------------------------------- /public/assets/images/random-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/random-9.png -------------------------------------------------------------------------------- /public/assets/images/room-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/room-1.jpg -------------------------------------------------------------------------------- /public/assets/images/room-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/room-2.jpg -------------------------------------------------------------------------------- /public/assets/images/room-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/room-3.jpg -------------------------------------------------------------------------------- /public/assets/images/room-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/room-4.jpg -------------------------------------------------------------------------------- /public/assets/images/room-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/room-5.jpg -------------------------------------------------------------------------------- /public/assets/images/room-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/room-6.jpg -------------------------------------------------------------------------------- /public/assets/images/room-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/room-7.jpg -------------------------------------------------------------------------------- /public/assets/images/room-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/room-8.jpg -------------------------------------------------------------------------------- /public/assets/images/room-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/room-9.jpg -------------------------------------------------------------------------------- /public/assets/images/scene-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/scene-1.jpg -------------------------------------------------------------------------------- /public/assets/images/scene-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/scene-2.jpg -------------------------------------------------------------------------------- /public/assets/images/scene-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/scene-3.jpg -------------------------------------------------------------------------------- /public/assets/images/screenshots/calendar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/calendar.jpg -------------------------------------------------------------------------------- /public/assets/images/screenshots/dashboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/dashboard.jpg -------------------------------------------------------------------------------- /public/assets/images/screenshots/gull-dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/gull-dashboard.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/landing-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/landing-1.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/landing-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/landing-10.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/landing-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/landing-11.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/landing-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/landing-12.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/landing-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/landing-2.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/landing-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/landing-3.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/landing-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/landing-4.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/landing-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/landing-5.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/landing-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/landing-6.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/landing-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/landing-7.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/landing-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/landing-8.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/landing-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/landing-9.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/landing-intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/landing-intro.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/layout1-blue-customizer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/layout1-blue-customizer.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/layout1-customizer-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/layout1-customizer-1.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/layout1-customizer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/layout1-customizer.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/layout2-customizer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/layout2-customizer.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/layout3-customizer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/layout3-customizer.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/layout4-customizer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/layout4-customizer.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/layout5-customizer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/layout5-customizer.png -------------------------------------------------------------------------------- /public/assets/images/screenshots/login.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/screenshots/login.jpg -------------------------------------------------------------------------------- /public/assets/images/sidebar-bg-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sidebar-bg-dark.jpg -------------------------------------------------------------------------------- /public/assets/images/sidebar-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sidebar-bg.jpg -------------------------------------------------------------------------------- /public/assets/images/sidebar/sidebar-bg-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sidebar/sidebar-bg-dark.jpg -------------------------------------------------------------------------------- /public/assets/images/sidebar/sidebar-bg-light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sidebar/sidebar-bg-light.jpg -------------------------------------------------------------------------------- /public/assets/images/social-dribble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/social-dribble.png -------------------------------------------------------------------------------- /public/assets/images/social-facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/social-facebook.png -------------------------------------------------------------------------------- /public/assets/images/social-linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/social-linkedin.png -------------------------------------------------------------------------------- /public/assets/images/social-twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/social-twitter.png -------------------------------------------------------------------------------- /public/assets/images/spotify-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/spotify-1.png -------------------------------------------------------------------------------- /public/assets/images/sq-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-1.jpg -------------------------------------------------------------------------------- /public/assets/images/sq-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-1.png -------------------------------------------------------------------------------- /public/assets/images/sq-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-10.jpg -------------------------------------------------------------------------------- /public/assets/images/sq-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-11.jpg -------------------------------------------------------------------------------- /public/assets/images/sq-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-12.jpg -------------------------------------------------------------------------------- /public/assets/images/sq-13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-13.jpg -------------------------------------------------------------------------------- /public/assets/images/sq-15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-15.jpg -------------------------------------------------------------------------------- /public/assets/images/sq-16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-16.jpg -------------------------------------------------------------------------------- /public/assets/images/sq-17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-17.jpg -------------------------------------------------------------------------------- /public/assets/images/sq-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-2.jpg -------------------------------------------------------------------------------- /public/assets/images/sq-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-2.png -------------------------------------------------------------------------------- /public/assets/images/sq-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-3.jpg -------------------------------------------------------------------------------- /public/assets/images/sq-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-3.png -------------------------------------------------------------------------------- /public/assets/images/sq-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-4.jpg -------------------------------------------------------------------------------- /public/assets/images/sq-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-4.png -------------------------------------------------------------------------------- /public/assets/images/sq-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-5.jpg -------------------------------------------------------------------------------- /public/assets/images/sq-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-6.jpg -------------------------------------------------------------------------------- /public/assets/images/sq-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-7.jpg -------------------------------------------------------------------------------- /public/assets/images/sq-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-8.jpg -------------------------------------------------------------------------------- /public/assets/images/sq-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-9.jpg -------------------------------------------------------------------------------- /public/assets/images/sq-face-220.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/sq-face-220.jpg -------------------------------------------------------------------------------- /public/assets/images/star-rating.icons.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | star-empty 7 | 9 | 10 | 11 | 12 | star-half 13 | 15 | 16 | 17 | 18 | star-filled 19 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /public/assets/images/study-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/study-1.png -------------------------------------------------------------------------------- /public/assets/images/study-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/study-10.jpg -------------------------------------------------------------------------------- /public/assets/images/study-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/study-11.jpg -------------------------------------------------------------------------------- /public/assets/images/study-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/study-2.jpg -------------------------------------------------------------------------------- /public/assets/images/study-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/study-3.jpg -------------------------------------------------------------------------------- /public/assets/images/study-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/study-4.jpg -------------------------------------------------------------------------------- /public/assets/images/study-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/study-5.jpg -------------------------------------------------------------------------------- /public/assets/images/study-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/study-6.jpg -------------------------------------------------------------------------------- /public/assets/images/study-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/study-7.jpg -------------------------------------------------------------------------------- /public/assets/images/study-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/study-8.jpg -------------------------------------------------------------------------------- /public/assets/images/study-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/study-9.jpg -------------------------------------------------------------------------------- /public/assets/images/study-bg-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/study-bg-1.jpg -------------------------------------------------------------------------------- /public/assets/images/study-bg-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/study-bg-2.jpg -------------------------------------------------------------------------------- /public/assets/images/svgIconExample.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /public/assets/images/tf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/tf.png -------------------------------------------------------------------------------- /public/assets/images/wide-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/assets/images/wide-1.jpg -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uilibrary/matx-react/94c37b0c682c7d56110b8540943a9368bca25633/public/favicon.ico -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/__api__/db/notification.js: -------------------------------------------------------------------------------- 1 | import Mock from "../mock"; 2 | import { nanoid } from "nanoid"; 3 | 4 | const NotificationDB = { 5 | list: [ 6 | { 7 | id: nanoid(), 8 | heading: "Message", 9 | icon: { name: "chat", color: "primary" }, 10 | timestamp: 1570702802573, 11 | title: "New message from Devid", 12 | subtitle: "Hello, Any progress...", 13 | path: "chat" 14 | }, 15 | { 16 | id: nanoid(), 17 | heading: "Alert", 18 | icon: { name: "notifications", color: "error" }, 19 | timestamp: 1570702702573, 20 | title: "Server overloaded", 21 | subtitle: "Traffice reached 2M", 22 | path: "page-layouts/user-profile" 23 | }, 24 | { 25 | id: nanoid(), 26 | heading: "Message", 27 | icon: { name: "chat", color: "primary" }, 28 | timestamp: 1570502502573, 29 | title: "New message from Goustove", 30 | subtitle: "Hello, send me details", 31 | path: "chat" 32 | } 33 | ] 34 | }; 35 | 36 | Mock.onGet("/api/notification").reply(() => { 37 | const response = NotificationDB.list; 38 | return [200, response]; 39 | }); 40 | 41 | Mock.onPost("/api/notification/add").reply(() => { 42 | const response = NotificationDB.list; 43 | return [200, response]; 44 | }); 45 | 46 | Mock.onPost("/api/notification/delete").reply((config) => { 47 | let { id } = JSON.parse(config.data); 48 | console.log(config.data); 49 | 50 | const response = NotificationDB.list.filter((notification) => notification.id !== id); 51 | NotificationDB.list = [...response]; 52 | return [200, response]; 53 | }); 54 | 55 | Mock.onPost("/api/notification/delete-all").reply(() => { 56 | NotificationDB.list = []; 57 | const response = NotificationDB.list; 58 | return [200, response]; 59 | }); 60 | -------------------------------------------------------------------------------- /src/__api__/index.js: -------------------------------------------------------------------------------- 1 | import Mock from "./mock"; 2 | 3 | import "./db/auth"; 4 | import "./db/ecommerce"; 5 | import "./db/notification"; 6 | 7 | Mock.onAny().passThrough(); 8 | -------------------------------------------------------------------------------- /src/__api__/mock.js: -------------------------------------------------------------------------------- 1 | import MockAdapter from "axios-mock-adapter"; 2 | import axios from "axios"; 3 | 4 | const Mock = new MockAdapter(axios); 5 | export default Mock; 6 | -------------------------------------------------------------------------------- /src/app/App.jsx: -------------------------------------------------------------------------------- 1 | import { useRoutes } from "react-router-dom"; 2 | import CssBaseline from "@mui/material/CssBaseline"; 3 | // ROOT THEME PROVIDER 4 | import { MatxTheme } from "./components"; 5 | // ALL CONTEXTS 6 | import SettingsProvider from "./contexts/SettingsContext"; 7 | import { AuthProvider } from "./contexts/FirebaseAuthContext"; 8 | // ROUTES 9 | import routes from "./routes"; 10 | // FAKE SERVER 11 | import "../__api__"; 12 | 13 | export default function App() { 14 | const content = useRoutes(routes); 15 | 16 | return ( 17 | 18 | 19 | 20 | 21 | {content} 22 | 23 | 24 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/app/auth/AuthGuard.jsx: -------------------------------------------------------------------------------- 1 | import { Navigate, useLocation } from "react-router-dom"; 2 | // HOOK 3 | import useAuth from "app/hooks/useAuth"; 4 | 5 | export default function AuthGuard({ children }) { 6 | const { isAuthenticated } = useAuth(); 7 | const { pathname } = useLocation(); 8 | 9 | if (isAuthenticated) return <>{children}; 10 | 11 | return ; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/auth/authRoles.js: -------------------------------------------------------------------------------- 1 | export const authRoles = { 2 | sa: ["SA"], // Only Super Admin has access 3 | admin: ["SA", "ADMIN"], // Only SA & Admin has access 4 | editor: ["SA", "ADMIN", "EDITOR"], // Only SA & Admin & Editor has access 5 | guest: ["SA", "ADMIN", "EDITOR", "GUEST"] // Everyone has access 6 | }; 7 | -------------------------------------------------------------------------------- /src/app/components/Brand.jsx: -------------------------------------------------------------------------------- 1 | import Box from "@mui/material/Box"; 2 | import styled from "@mui/material/styles/styled"; 3 | 4 | import { Span } from "./Typography"; 5 | import { MatxLogo } from "app/components"; 6 | import useSettings from "app/hooks/useSettings"; 7 | 8 | // STYLED COMPONENTS 9 | const BrandRoot = styled("div")(() => ({ 10 | display: "flex", 11 | alignItems: "center", 12 | justifyContent: "space-between", 13 | padding: "20px 18px 20px 29px" 14 | })); 15 | 16 | const StyledSpan = styled(Span)(({ mode }) => ({ 17 | fontSize: 18, 18 | marginLeft: ".5rem", 19 | display: mode === "compact" ? "none" : "block" 20 | })); 21 | 22 | export default function Brand({ children }) { 23 | const { settings } = useSettings(); 24 | const leftSidebar = settings.layout1Settings.leftSidebar; 25 | const { mode } = leftSidebar; 26 | 27 | return ( 28 | 29 | 30 | 31 | 32 | Matx 33 | 34 | 35 | 36 | 37 | {children || null} 38 | 39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /src/app/components/ChatAvatar.jsx: -------------------------------------------------------------------------------- 1 | import Box from "@mui/material/Box"; 2 | import Avatar from "@mui/material/Avatar"; 3 | import styled from "@mui/material/styles/styled"; 4 | 5 | // STYLED COMPONENTS 6 | const StyledAvatar = styled(Avatar)({ height: 40, width: 40 }); 7 | 8 | const StatusCircle = styled("div")(({ theme, status }) => ({ 9 | height: 14, 10 | width: 14, 11 | bottom: 0, 12 | right: "-3px", 13 | borderRadius: "7px", 14 | position: "absolute", 15 | border: "2px solid white", 16 | color: status !== "online" && "white !important", 17 | background: status === "online" ? theme.palette.primary.main : theme.palette.error.main 18 | })); 19 | 20 | export default function ChatAvatar({ src, status }) { 21 | return ( 22 | 23 | 24 | 25 | 26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /src/app/components/ChatHead.jsx: -------------------------------------------------------------------------------- 1 | import { cloneElement, useState } from "react"; 2 | import styled from "@mui/material/styles/styled"; 3 | import clsx from "clsx"; 4 | 5 | import { topBarHeight } from "app/utils/constant"; 6 | 7 | // STYLED COMPONENTS 8 | const PopupRoot = styled("div")(({ theme }) => ({ 9 | "& .popupOpen": { 10 | top: topBarHeight + 16, 11 | [theme.breakpoints.down("sm")]: { bottom: 0 } 12 | }, 13 | "& .closeIcon": { position: "absolute", top: 6, right: 6 } 14 | })); 15 | 16 | const Popup = styled("div")(({ theme }) => ({ 17 | position: "fixed", 18 | right: theme.spacing(2), 19 | bottom: theme.spacing(2), 20 | top: "100vh", 21 | transition: "top 250ms ease-in-out", 22 | boxShadow: theme.shadows[6], 23 | borderRadius: 6, 24 | zIndex: 99999, 25 | width: 360, 26 | overflow: "hidden", 27 | "@media only screen and (max-width: 450px)": { 28 | width: "calc(100% - 32px)", 29 | left: theme.spacing(2) 30 | } 31 | })); 32 | 33 | export default function ChatHead({ icon, children }) { 34 | const [open, setOpen] = useState(false); 35 | 36 | const togglePopup = () => setOpen((open) => !open); 37 | 38 | return ( 39 | 40 | {cloneElement(icon, { onClick: togglePopup })} 41 | 42 | {open ? cloneElement(children, { togglePopup }) : null} 43 | 44 | 45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /src/app/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import AppBar from "@mui/material/AppBar"; 2 | import Button from "@mui/material/Button"; 3 | import Toolbar from "@mui/material/Toolbar"; 4 | import { ThemeProvider, styled, useTheme } from "@mui/material/styles"; 5 | 6 | import { Paragraph, Span } from "./Typography"; 7 | import useSettings from "app/hooks/useSettings"; 8 | import { topBarHeight } from "app/utils/constant"; 9 | 10 | // STYLED COMPONENTS 11 | const AppFooter = styled(Toolbar)(() => ({ 12 | display: "flex", 13 | alignItems: "center", 14 | minHeight: topBarHeight, 15 | "@media (max-width: 499px)": { 16 | display: "table", 17 | width: "100%", 18 | minHeight: "auto", 19 | padding: "1rem 0", 20 | "& .container": { 21 | flexDirection: "column !important", 22 | "& a": { margin: "0 0 16px !important" } 23 | } 24 | } 25 | })); 26 | 27 | const FooterContent = styled("div")(() => ({ 28 | width: "100%", 29 | display: "flex", 30 | alignItems: "center", 31 | padding: "0px 1rem", 32 | maxWidth: "1170px", 33 | margin: "0 auto" 34 | })); 35 | 36 | export default function Footer() { 37 | const theme = useTheme(); 38 | const { settings } = useSettings(); 39 | 40 | const footerTheme = settings.themes[settings.footer.theme] || theme; 41 | 42 | return ( 43 | 44 | 45 | 46 | 47 | 48 | 51 | 52 | 53 | 54 | 55 | 56 | Design and Developed by UI Lib 57 | 58 | 59 | 60 | 61 | 62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /src/app/components/Loadable.jsx: -------------------------------------------------------------------------------- 1 | import { Suspense } from "react"; 2 | import Loading from "./MatxLoading"; 3 | 4 | const Loadable = (Component) => (props) => { 5 | return ( 6 | }> 7 | 8 | 9 | ); 10 | }; 11 | 12 | export default Loadable; 13 | -------------------------------------------------------------------------------- /src/app/components/MatxCustomizer/customizerOptions.js: -------------------------------------------------------------------------------- 1 | export const mainThemes = ["purple1", "purple2", "blue", "purpleDark1", "purpleDark2", "blueDark"]; 2 | 3 | export const mainSidebarThemes = [ 4 | "whitePurple", 5 | "whiteBlue", 6 | "slateDark1", 7 | "slateDark2", 8 | "purpleDark1", 9 | "purpleDark2", 10 | "blueDark" 11 | ]; 12 | 13 | export const topbarThemes = [ 14 | "whitePurple", 15 | "whiteBlue", 16 | "slateDark1", 17 | "slateDark2", 18 | "purpleDark1", 19 | "purpleDark2", 20 | "blueDark" 21 | ]; 22 | -------------------------------------------------------------------------------- /src/app/components/MatxCustomizer/styles.jsx: -------------------------------------------------------------------------------- 1 | import Badge from "@mui/material/Badge"; 2 | import { styled } from "@mui/material/styles"; 3 | 4 | export const StyledBadge = styled(Badge)({ 5 | top: "0", 6 | right: "0", 7 | height: "32px", 8 | width: "32px", 9 | borderRadius: "50%" 10 | }); 11 | -------------------------------------------------------------------------------- /src/app/components/MatxDivider.jsx: -------------------------------------------------------------------------------- 1 | import styled from "@mui/material/styles/styled"; 2 | 3 | const DividerRoot = styled("div")(({ theme }) => ({ 4 | textAlign: "center", 5 | position: "relative", 6 | height: 16, 7 | "&::after": { 8 | left: 0, 9 | zIndex: 1, 10 | top: "10px", 11 | content: '""', 12 | width: "100%", 13 | height: "1px", 14 | position: "absolute", 15 | backgroundColor: theme.palette.divider 16 | }, 17 | "& span": { 18 | zIndex: 5, 19 | background: "#fff", 20 | padding: "4px 6px", 21 | position: "relative", 22 | color: theme.palette.text.secondary 23 | } 24 | })); 25 | 26 | export default function MatxDivider({ text, sx }) { 27 | return ( 28 |
29 | {text && {text}} 30 |
31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /src/app/components/MatxLayout/Layout1/Layout1Settings.js: -------------------------------------------------------------------------------- 1 | const Layout1Settings = { 2 | leftSidebar: { 3 | show: true, 4 | mode: "full", // full, close, compact, mobile, 5 | theme: "slateDark1", // View all valid theme colors inside MatxTheme/themeColors.js 6 | bgImgURL: "/assets/images/sidebar/sidebar-bg-dark.jpg" 7 | }, 8 | topbar: { 9 | show: true, 10 | fixed: true, 11 | theme: "whiteBlue" // View all valid theme colors inside MatxTheme/themeColors.js 12 | } 13 | }; 14 | 15 | export default Layout1Settings; 16 | -------------------------------------------------------------------------------- /src/app/components/MatxLayout/MatxLayout.jsx: -------------------------------------------------------------------------------- 1 | import { MatxSuspense } from "app/components"; 2 | import useSettings from "app/hooks/useSettings"; 3 | import { MatxLayouts } from "./index"; 4 | 5 | export default function MatxLayout(props) { 6 | const { settings } = useSettings(); 7 | const Layout = MatxLayouts[settings.activeLayout]; 8 | 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /src/app/components/MatxLayout/index.js: -------------------------------------------------------------------------------- 1 | import { lazy } from "react"; 2 | 3 | export const MatxLayouts = { layout1: lazy(() => import("./Layout1/Layout1")) }; 4 | -------------------------------------------------------------------------------- /src/app/components/MatxLayout/settings.js: -------------------------------------------------------------------------------- 1 | import { themes } from "../MatxTheme/initThemes"; 2 | import layout1Settings from "./Layout1/Layout1Settings"; 3 | 4 | // UPDATE BELOW CODE 5 | // DOC http://demos.ui-lib.com/matx-react-doc/layout.html 6 | export const MatxLayoutSettings = { 7 | activeLayout: "layout1", // layout1, layout2 8 | activeTheme: "blue", // View all valid theme colors inside MatxTheme/themeColors.js 9 | perfectScrollbar: false, 10 | 11 | themes: themes, 12 | layout1Settings, // open Layout1/Layout1Settings.js 13 | 14 | secondarySidebar: { 15 | show: true, 16 | open: false, 17 | theme: "slateDark1" // View all valid theme colors inside MatxTheme/themeColors.js 18 | }, 19 | 20 | // Footer options 21 | footer: { 22 | show: true, 23 | fixed: false, 24 | theme: "slateDark1" // View all valid theme colors inside MatxTheme/themeColors.js 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /src/app/components/MatxLoading.jsx: -------------------------------------------------------------------------------- 1 | import Box from "@mui/material/Box"; 2 | import CircularProgress from "@mui/material/CircularProgress"; 3 | import styled from "@mui/material/styles/styled"; 4 | 5 | // STYLED COMPONENT 6 | const StyledLoading = styled("div")({ 7 | width: "100%", 8 | height: "100%", 9 | display: "flex", 10 | alignItems: "center", 11 | justifyContent: "center", 12 | "& img": { width: "auto", height: "25px" }, 13 | "& .circleProgress": { 14 | left: -7, 15 | right: 0, 16 | position: "absolute", 17 | top: "calc(50% - 25px)" 18 | } 19 | }); 20 | 21 | export default function Loading() { 22 | return ( 23 | 24 | 25 | Logo 26 | 27 | 28 | 29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /src/app/components/MatxMenu.jsx: -------------------------------------------------------------------------------- 1 | import { Fragment, useState, Children } from "react"; 2 | import Menu from "@mui/material/Menu"; 3 | import { ThemeProvider, styled } from "@mui/material/styles"; 4 | 5 | import useSettings from "app/hooks/useSettings"; 6 | 7 | // STYLED COMPONENT 8 | const MenuButton = styled("div")(({ theme }) => ({ 9 | display: "inline-block", 10 | color: theme.palette.text.primary, 11 | "& div:hover": { backgroundColor: theme.palette.action.hover } 12 | })); 13 | 14 | export default function MatxMenu(props) { 15 | const { settings } = useSettings(); 16 | const [anchorEl, setAnchorEl] = useState(null); 17 | 18 | const children = Children.toArray(props.children); 19 | let { shouldCloseOnItemClick = true, horizontalPosition = "left" } = props; 20 | 21 | const handleClose = () => setAnchorEl(null); 22 | const handleClick = (event) => setAnchorEl(event.currentTarget); 23 | 24 | return ( 25 | 26 | {props.menuButton} 27 | 28 | 36 | {children.map((child, index) => ( 37 |
{}} key={index}> 38 | {child} 39 |
40 | ))} 41 | 42 | 43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /src/app/components/MatxProgressBar.jsx: -------------------------------------------------------------------------------- 1 | import Grid from "@mui/material/Grid2"; 2 | import Typography from "@mui/material/Typography"; 3 | import LinearProgress from "@mui/material/LinearProgress"; 4 | import styled from "@mui/material/styles/styled"; 5 | import { Small } from "./Typography"; 6 | 7 | // STYLED COMPONENT 8 | const CustomLinearProgress = styled(LinearProgress)(() => ({ 9 | borderRadius: 2, 10 | background: "rgba(0, 0, 0, 0.1)" 11 | })); 12 | 13 | export default function MatxProgressBar({ 14 | text = "", 15 | value = 75, 16 | spacing = 2, 17 | color = "primary", 18 | coloredText = false 19 | }) { 20 | return ( 21 | 22 | 23 | 24 | 25 | 26 | {text && ( 27 | 28 | 29 | {text} 30 | 31 | 32 | )} 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /src/app/components/MatxSearchBox.jsx: -------------------------------------------------------------------------------- 1 | import { useState, Fragment } from "react"; 2 | import Icon from "@mui/material/Icon"; 3 | import IconButton from "@mui/material/IconButton"; 4 | import styled from "@mui/material/styles/styled"; 5 | import { topBarHeight } from "app/utils/constant"; 6 | 7 | // STYLED COMPONENTS 8 | const SearchContainer = styled("div")(({ theme }) => ({ 9 | position: "absolute", 10 | top: 0, 11 | left: 0, 12 | zIndex: 9, 13 | width: "100%", 14 | display: "flex", 15 | alignItems: "center", 16 | height: topBarHeight, 17 | background: theme.palette.primary.main, 18 | color: theme.palette.text.primary, 19 | "&::placeholder": { 20 | color: theme.palette.text.primary 21 | } 22 | })); 23 | 24 | const SearchInput = styled("input")(({ theme }) => ({ 25 | width: "100%", 26 | border: "none", 27 | outline: "none", 28 | fontSize: "1rem", 29 | paddingLeft: "20px", 30 | height: "calc(100% - 5px)", 31 | background: theme.palette.primary.main, 32 | color: theme.palette.text.primary, 33 | "&::placeholder": { color: theme.palette.text.primary } 34 | })); 35 | 36 | export default function MatxSearchBox() { 37 | const [open, setOpen] = useState(false); 38 | 39 | const toggle = () => setOpen(!open); 40 | 41 | return ( 42 | 43 | {!open && ( 44 | 45 | search 46 | 47 | )} 48 | 49 | {open && ( 50 | 51 | 52 | 53 | close 54 | 55 | 56 | )} 57 | 58 | ); 59 | } 60 | -------------------------------------------------------------------------------- /src/app/components/MatxSidenav/MatxSidenav.jsx: -------------------------------------------------------------------------------- 1 | import Box from "@mui/material/Box"; 2 | import styled from "@mui/material/styles/styled"; 3 | import useMediaQuery from "@mui/material/useMediaQuery"; 4 | import useTheme from "@mui/material/styles/useTheme"; 5 | 6 | // STYLED COMPONENTS 7 | const SideNav = styled("div")(({ theme, width }) => ({ 8 | zIndex: 91, 9 | width: width, 10 | overflow: "hidden", 11 | position: "relative", 12 | transition: "width 250ms ease", 13 | background: theme.palette.background.default, 14 | [theme.breakpoints.down("sm")]: { 15 | top: 0, 16 | left: 0, 17 | bottom: 0, 18 | position: "absolute" 19 | } 20 | })); 21 | 22 | const SideNavOverlay = styled("div")(() => ({ 23 | zIndex: 90, 24 | width: "100%", 25 | height: "100%", 26 | position: "absolute", 27 | background: "rgba(0, 0, 0, 0.74)" 28 | })); 29 | 30 | export default function MatxSidenav({ sx, open, children, toggleSidenav, width = "220px" }) { 31 | const theme = useTheme(); 32 | const isMobile = useMediaQuery(theme.breakpoints.down("sm")); 33 | 34 | return ( 35 | 36 | 37 | {children} 38 | 39 | 40 | {open && isMobile && } 41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /src/app/components/MatxSidenav/index.js: -------------------------------------------------------------------------------- 1 | export { default as MatxSidenav } from "./MatxSidenav"; 2 | -------------------------------------------------------------------------------- /src/app/components/MatxSuspense.jsx: -------------------------------------------------------------------------------- 1 | import { Suspense } from "react"; 2 | import { MatxLoading } from "app/components"; 3 | 4 | export default function MatxSuspense({ children }) { 5 | return }>{children}; 6 | } 7 | -------------------------------------------------------------------------------- /src/app/components/MatxTheme/EchartTheme.jsx: -------------------------------------------------------------------------------- 1 | import * as echarts from "echarts"; 2 | 3 | export const EchartTheme = (MuiTheme) => ({ 4 | backgroundColor: MuiTheme.palette.background.paper, 5 | // Global palette: 6 | color: [ 7 | "#7467EF", 8 | "#ABA4F4", 9 | "#D3D0F4", 10 | "rgba(0, 255, 33, 1)", 11 | "#91c7ae", 12 | "#749f83", 13 | "#ca8622", 14 | "#bda29a", 15 | "#6e7074", 16 | "#546570", 17 | "#c4ccd3" 18 | ], 19 | series: [ 20 | { type: "bar" }, 21 | { 22 | type: "pie", 23 | // A palette only work for the series: 24 | color: [ 25 | "#37A2DA", 26 | "#32C5E9", 27 | "#67E0E3", 28 | "#9FE6B8", 29 | "#FFDB5C", 30 | "#ff9f7f", 31 | "#fb7293", 32 | "#E062AE", 33 | "#E690D1", 34 | "#e7bcf3", 35 | "#9d96f5", 36 | "#8378EA", 37 | "#96BFFF" 38 | ] 39 | }, 40 | { 41 | type: "line", 42 | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ 43 | { offset: 0, color: "#83bff6" }, 44 | { offset: 0.5, color: "#188df0" }, 45 | { offset: 1, color: "#188df0" } 46 | ]) 47 | } 48 | ] 49 | }); 50 | -------------------------------------------------------------------------------- /src/app/components/MatxTheme/MatxTheme.jsx: -------------------------------------------------------------------------------- 1 | import CssBaseline from "@mui/material/CssBaseline"; 2 | import ThemeProvider from "@mui/material/styles/ThemeProvider"; 3 | import useSettings from "app/hooks/useSettings"; 4 | 5 | export default function MatxTheme({ children }) { 6 | const { settings } = useSettings(); 7 | let activeTheme = { ...settings.themes[settings.activeTheme] }; 8 | 9 | return ( 10 | 11 | 12 | {children} 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /src/app/components/MatxTheme/SecondarySidenavTheme/SecondarySidenavTheme.jsx: -------------------------------------------------------------------------------- 1 | import { ThemeProvider } from "@mui/material/styles"; 2 | 3 | export default function SecondarySidenavTheme({ theme, children }) { 4 | return {children}; 5 | } 6 | -------------------------------------------------------------------------------- /src/app/components/MatxTheme/SecondarySidenavTheme/index.js: -------------------------------------------------------------------------------- 1 | export { default as SecondarySidenavTheme } from "./SecondarySidenavTheme"; 2 | -------------------------------------------------------------------------------- /src/app/components/MatxTheme/SidenavTheme/SidenavTheme.jsx: -------------------------------------------------------------------------------- 1 | import { ThemeProvider, useTheme } from "@mui/material/styles"; 2 | import useSettings from "app/hooks/useSettings"; 3 | 4 | export default function SidenavTheme({ children }) { 5 | const theme = useTheme(); 6 | const { settings } = useSettings(); 7 | const sidenavTheme = settings.themes[settings.layout1Settings.leftSidebar.theme] || theme; 8 | 9 | return {children}; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/components/MatxTheme/SidenavTheme/index.js: -------------------------------------------------------------------------------- 1 | export { default as SidenavTheme } from "./SidenavTheme"; 2 | -------------------------------------------------------------------------------- /src/app/components/MatxTheme/initThemes.js: -------------------------------------------------------------------------------- 1 | import { createTheme } from '@mui/material'; 2 | import { forEach, merge } from 'lodash'; 3 | import { themeColors } from './themeColors'; 4 | import themeOptions from './themeOptions'; 5 | 6 | function createMatxThemes() { 7 | let themes = {}; 8 | 9 | forEach(themeColors, (value, key) => { 10 | themes[key] = createTheme(merge({}, themeOptions, value)); 11 | }); 12 | 13 | return themes; 14 | } 15 | 16 | export const themes = createMatxThemes(); 17 | -------------------------------------------------------------------------------- /src/app/components/MatxTheme/themeOptions.js: -------------------------------------------------------------------------------- 1 | import { red } from '@mui/material/colors'; 2 | import { components } from './components'; 3 | 4 | const themeOptions = { 5 | typography: { 6 | fontSize: 14, 7 | body1: { fontSize: '14px' }, 8 | }, 9 | 10 | status: { danger: red[500] }, 11 | components: { ...components }, 12 | }; 13 | 14 | export default themeOptions; 15 | -------------------------------------------------------------------------------- /src/app/components/MatxVerticalNav/index.js: -------------------------------------------------------------------------------- 1 | export { default as MatxVerticalNav } from "./MatxVerticalNav"; 2 | export { default as MatxVerticalNavExpansionPanel } from "./MatxVerticalNavExpansionPanel"; 3 | -------------------------------------------------------------------------------- /src/app/components/NotificationBar/index.js: -------------------------------------------------------------------------------- 1 | export { default as NotificationBar } from "./NotificationBar"; 2 | -------------------------------------------------------------------------------- /src/app/components/SecondarySidebar/SecondarySidebar.jsx: -------------------------------------------------------------------------------- 1 | import useSettings from "app/hooks/useSettings"; 2 | import SecondarySidebarToggle from "./SecondarySidebarToggle"; 3 | import SecondarySidebarContent from "./SecondarySidebarContent"; 4 | import { SecondarySidenavTheme } from "../MatxTheme/SecondarySidenavTheme"; 5 | 6 | export default function SecondarySidebar() { 7 | const { settings } = useSettings(); 8 | const secondarySidebarTheme = settings.themes[settings.secondarySidebar.theme]; 9 | 10 | return ( 11 | 12 | {settings.secondarySidebar.open && } 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /src/app/components/SecondarySidebar/SecondarySidebarContent.jsx: -------------------------------------------------------------------------------- 1 | import IconButton from "@mui/material/IconButton"; 2 | import styled from "@mui/material/styles/styled"; 3 | import Comment from "@mui/icons-material/Comment"; 4 | 5 | import { Chatbox, ChatHead } from "app/components"; 6 | import { Span } from "../Typography"; 7 | import ShoppingCart from "../ShoppingCart"; 8 | import MatxCustomizer from "../MatxCustomizer/MatxCustomizer"; 9 | 10 | // STYLED COMPONENTS 11 | const SidebarRoot = styled("div")(({ theme, width }) => ({ 12 | position: "fixed", 13 | height: "100vh", 14 | width: width, 15 | right: 0, 16 | bottom: 0, 17 | display: "flex", 18 | flexDirection: "column", 19 | alignItems: "center", 20 | justifyContent: "center", 21 | boxShadow: theme.shadows[8], 22 | backgroundColor: theme.palette.primary.main, 23 | zIndex: 98, 24 | transition: "all 0.15s ease", 25 | color: theme.palette.text.primary, 26 | "@global": { 27 | "@media screen and (min-width: 767px)": { 28 | ".content-wrap, .layout2.layout-contained, .layout2.layout-full": { 29 | marginRight: (props) => props.width 30 | }, 31 | ".matx-customizer": { 32 | right: (props) => props.width 33 | } 34 | }, 35 | "@media screen and (max-width: 959px)": { 36 | ".toolbar-menu-wrap .menu-area": { 37 | width: (props) => `calc(100% - ${props.width})` 38 | } 39 | } 40 | } 41 | })); 42 | 43 | export default function SecondarySidebarContent() { 44 | return ( 45 | 46 | 47 | 48 | 49 | 50 | 53 | 54 | 55 | }> 56 | 57 | 58 | 59 | 60 | 61 | ); 62 | } 63 | -------------------------------------------------------------------------------- /src/app/components/SecondarySidebar/SecondarySidebarToggle.jsx: -------------------------------------------------------------------------------- 1 | import Fab from "@mui/material/Fab"; 2 | import styled from "@mui/material/styles/styled"; 3 | import IconButton from "@mui/material/IconButton"; 4 | import Close from "@mui/icons-material/Close"; 5 | import Settings from "@mui/icons-material/Settings"; 6 | import clsx from "clsx"; 7 | 8 | import useSettings from "app/hooks/useSettings"; 9 | 10 | // STYLED COMPONENT 11 | const Toggle = styled("div")(() => ({ 12 | zIndex: 99, 13 | right: "30px", 14 | bottom: "50px", 15 | position: "fixed", 16 | transition: "all 0.15s ease", 17 | "&.open": { right: "10px" } 18 | })); 19 | 20 | export default function SecondarySidebarToggle() { 21 | const { settings, updateSettings } = useSettings(); 22 | 23 | const toggle = () => { 24 | updateSettings({ secondarySidebar: { open: !settings.secondarySidebar.open } }); 25 | }; 26 | 27 | return ( 28 | 29 | {settings.secondarySidebar.open && ( 30 | 31 | 32 | 33 | )} 34 | 35 | {!settings.secondarySidebar.open && ( 36 | 37 | 38 | 39 | )} 40 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /src/app/components/SecondarySidebar/index.js: -------------------------------------------------------------------------------- 1 | export { default as SecondarySidebar } from "./SecondarySidebar"; 2 | export { default as SecondarySidebarToggle } from "./SecondarySidebarToggle"; 3 | export { default as SecondarySidebarContent } from "./SecondarySidebarContent"; 4 | -------------------------------------------------------------------------------- /src/app/components/Sidenav.jsx: -------------------------------------------------------------------------------- 1 | import { Fragment } from "react"; 2 | import Scrollbar from "react-perfect-scrollbar"; 3 | import styled from "@mui/material/styles/styled"; 4 | 5 | import { MatxVerticalNav } from "app/components"; 6 | import useSettings from "app/hooks/useSettings"; 7 | import navigations from "app/navigations"; 8 | 9 | // STYLED COMPONENTS 10 | const StyledScrollBar = styled(Scrollbar)(() => ({ 11 | paddingLeft: "1rem", 12 | paddingRight: "1rem", 13 | position: "relative" 14 | })); 15 | 16 | const SideNavMobile = styled("div")(({ theme }) => ({ 17 | position: "fixed", 18 | top: 0, 19 | left: 0, 20 | right: 0, 21 | bottom: 0, 22 | zIndex: -1, 23 | width: "100vw", 24 | background: "rgba(0, 0, 0, 0.54)", 25 | [theme.breakpoints.up("lg")]: { display: "none" } 26 | })); 27 | 28 | export default function Sidenav({ children }) { 29 | const { settings, updateSettings } = useSettings(); 30 | 31 | const updateSidebarMode = (sidebarSettings) => { 32 | let activeLayoutSettingsName = settings.activeLayout + "Settings"; 33 | let activeLayoutSettings = settings[activeLayoutSettingsName]; 34 | 35 | updateSettings({ 36 | ...settings, 37 | [activeLayoutSettingsName]: { 38 | ...activeLayoutSettings, 39 | leftSidebar: { ...activeLayoutSettings.leftSidebar, ...sidebarSettings } 40 | } 41 | }); 42 | }; 43 | 44 | return ( 45 | 46 | 47 | {children} 48 | 49 | 50 | 51 | updateSidebarMode({ mode: "close" })} /> 52 | 53 | ); 54 | } 55 | -------------------------------------------------------------------------------- /src/app/components/SimpleCard.jsx: -------------------------------------------------------------------------------- 1 | import Card from "@mui/material/Card"; 2 | import styled from "@mui/material/styles/styled"; 3 | 4 | // STYLED COMPONENTS 5 | const CardRoot = styled(Card)({ 6 | height: "100%", 7 | padding: "20px 24px", 8 | ".subtitle": { marginBottom: "1rem" } 9 | }); 10 | 11 | const CardTitle = styled("div")(({ subtitle }) => ({ 12 | fontSize: "1rem", 13 | fontWeight: "500", 14 | textTransform: "capitalize", 15 | marginBottom: !subtitle && "16px" 16 | })); 17 | 18 | export default function SimpleCard({ children, title, subtitle }) { 19 | return ( 20 | 21 | {title} 22 | {subtitle &&
{subtitle}
} 23 | {children} 24 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/app/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Chatbox } from "./Chatbox"; 2 | export { default as ChatHead } from "./ChatHead"; 3 | export { default as MatxLogo } from "./MatxLogo"; 4 | export { default as MatxMenu } from "./MatxMenu"; 5 | export { default as Breadcrumb } from "./Breadcrumb"; 6 | export { default as ChatAvatar } from "./ChatAvatar"; 7 | export { default as SimpleCard } from "./SimpleCard"; 8 | export { default as MatxLoading } from "./MatxLoading"; 9 | export { default as MatxSuspense } from "./MatxSuspense"; 10 | export { default as MatxSearchBox } from "./MatxSearchBox"; 11 | export { default as MatxTheme } from "./MatxTheme/MatxTheme"; 12 | export { default as MatxProgressBar } from "./MatxProgressBar"; 13 | export { default as MatxLayout } from "./MatxLayout/MatxLayout"; 14 | export { default as ConfirmationDialog } from "./ConfirmationDialog"; 15 | export { default as MatxVerticalNav } from "./MatxVerticalNav/MatxVerticalNav"; 16 | -------------------------------------------------------------------------------- /src/app/config.js: -------------------------------------------------------------------------------- 1 | export const firebaseConfig = { 2 | apiKey: import.meta.env.VITE_FIREBASE_APT_KEY, 3 | authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN, 4 | databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL, 5 | projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID, 6 | storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET, 7 | messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID, 8 | appId: import.meta.env.VITE_FIREBASE_APP_ID, 9 | measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID 10 | }; 11 | 12 | export const auth0Config = { 13 | client_id: import.meta.env.VITE_AUTH0_CLIENT_ID, 14 | domain: import.meta.env.VITE_AUTH0_DOMAIN 15 | }; 16 | -------------------------------------------------------------------------------- /src/app/contexts/SettingsContext.jsx: -------------------------------------------------------------------------------- 1 | import { createContext, useState } from "react"; 2 | import merge from "lodash/merge"; 3 | // CUSTOM COMPONENT 4 | import { MatxLayoutSettings } from "app/components/MatxLayout/settings"; 5 | 6 | export const SettingsContext = createContext({ 7 | settings: MatxLayoutSettings, 8 | updateSettings: () => {} 9 | }); 10 | 11 | export default function SettingsProvider({ settings, children }) { 12 | const [currentSettings, setCurrentSettings] = useState(settings || MatxLayoutSettings); 13 | 14 | const handleUpdateSettings = (update = {}) => { 15 | const merged = merge({}, currentSettings, update); 16 | setCurrentSettings(merged); 17 | }; 18 | 19 | return ( 20 | 22 | {children} 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /src/app/hooks/useAuth.js: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import AuthContext from "app/contexts/FirebaseAuthContext"; 3 | 4 | export default function useAuth() { 5 | const context = useContext(AuthContext); 6 | if (!context) { 7 | throw new Error("useAuth must be used within an AuthProvider"); 8 | } 9 | 10 | return context; 11 | } 12 | -------------------------------------------------------------------------------- /src/app/hooks/useNotification.js: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import NotificationContext from "app/contexts/NotificationContext"; 3 | 4 | export default function useNotification() { 5 | const context = useContext(NotificationContext); 6 | if (!context) { 7 | throw new Error("useNotification must be used within an NotificationProvider"); 8 | } 9 | return context; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/hooks/useSettings.js: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import { SettingsContext } from "app/contexts/SettingsContext"; 3 | 4 | export default function useSettings() { 5 | const context = useContext(SettingsContext); 6 | if (!context) { 7 | throw new Error("useSettings must be used within an SettingsProvider"); 8 | } 9 | return context; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/navigations.js: -------------------------------------------------------------------------------- 1 | const navigations = [ 2 | { name: "Dashboard", path: "/dashboard/default", icon: "dashboard" }, 3 | { label: "PAGES", type: "label" }, 4 | { 5 | name: "Session/Auth", 6 | icon: "security", 7 | children: [ 8 | { name: "Sign in", iconText: "SI", path: "/session/signin" }, 9 | { name: "Sign up", iconText: "SU", path: "/session/signup" }, 10 | { name: "Forgot Password", iconText: "FP", path: "/session/forgot-password" }, 11 | { name: "Error", iconText: "404", path: "/session/404" } 12 | ] 13 | }, 14 | { label: "Components", type: "label" }, 15 | { 16 | name: "Components", 17 | icon: "favorite", 18 | badge: { value: "30+", color: "secondary" }, 19 | children: [ 20 | { name: "Auto Complete", path: "/material/autocomplete", iconText: "A" }, 21 | { name: "Buttons", path: "/material/buttons", iconText: "B" }, 22 | { name: "Checkbox", path: "/material/checkbox", iconText: "C" }, 23 | { name: "Dialog", path: "/material/dialog", iconText: "D" }, 24 | { name: "Expansion Panel", path: "/material/expansion-panel", iconText: "E" }, 25 | { name: "Form", path: "/material/form", iconText: "F" }, 26 | { name: "Icons", path: "/material/icons", iconText: "I" }, 27 | { name: "Menu", path: "/material/menu", iconText: "M" }, 28 | { name: "Progress", path: "/material/progress", iconText: "P" }, 29 | { name: "Radio", path: "/material/radio", iconText: "R" }, 30 | { name: "Switch", path: "/material/switch", iconText: "S" }, 31 | { name: "Slider", path: "/material/slider", iconText: "S" }, 32 | { name: "Snackbar", path: "/material/snackbar", iconText: "S" }, 33 | { name: "Table", path: "/material/table", iconText: "T" } 34 | ] 35 | }, 36 | { 37 | name: "Charts", 38 | icon: "trending_up", 39 | children: [{ name: "Echarts", path: "/charts/echarts", iconText: "E" }] 40 | }, 41 | { 42 | name: "Documentation", 43 | icon: "launch", 44 | type: "extLink", 45 | path: "http://demos.ui-lib.com/matx-react-doc/" 46 | } 47 | ]; 48 | 49 | export default navigations; 50 | -------------------------------------------------------------------------------- /src/app/routes.jsx: -------------------------------------------------------------------------------- 1 | import { lazy } from "react"; 2 | import { Navigate } from "react-router-dom"; 3 | 4 | import AuthGuard from "./auth/AuthGuard"; 5 | import { authRoles } from "./auth/authRoles"; 6 | 7 | import Loadable from "./components/Loadable"; 8 | import MatxLayout from "./components/MatxLayout/MatxLayout"; 9 | import sessionRoutes from "./views/sessions/session-routes"; 10 | import materialRoutes from "app/views/material-kit/MaterialRoutes"; 11 | 12 | // E-CHART PAGE 13 | const AppEchart = Loadable(lazy(() => import("app/views/charts/echarts/AppEchart"))); 14 | // DASHBOARD PAGE 15 | const Analytics = Loadable(lazy(() => import("app/views/dashboard/Analytics"))); 16 | 17 | const routes = [ 18 | { path: "/", element: }, 19 | { 20 | element: ( 21 | 22 | 23 | 24 | ), 25 | children: [ 26 | ...materialRoutes, 27 | // dashboard route 28 | { path: "/dashboard/default", element: , auth: authRoles.admin }, 29 | // e-chart route 30 | { path: "/charts/echarts", element: , auth: authRoles.editor } 31 | ] 32 | }, 33 | 34 | // session pages route 35 | ...sessionRoutes 36 | ]; 37 | 38 | export default routes; 39 | -------------------------------------------------------------------------------- /src/app/utils/constant.js: -------------------------------------------------------------------------------- 1 | export const topBarHeight = 64; 2 | export const sideNavWidth = 260; 3 | export const navbarHeight = 60; 4 | export const sidenavCompactWidth = 80; 5 | export const containedLayoutWidth = 1200; 6 | -------------------------------------------------------------------------------- /src/app/utils/utils.js: -------------------------------------------------------------------------------- 1 | import { differenceInSeconds } from "date-fns"; 2 | 3 | export const convertHexToRGB = (hex) => { 4 | // check if it's a rgba 5 | if (hex.match("rgba")) { 6 | let triplet = hex.slice(5).split(",").slice(0, -1).join(","); 7 | return triplet; 8 | } 9 | 10 | let c; 11 | if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) { 12 | c = hex.substring(1).split(""); 13 | if (c.length === 3) { 14 | c = [c[0], c[0], c[1], c[1], c[2], c[2]]; 15 | } 16 | c = "0x" + c.join(""); 17 | 18 | return [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(","); 19 | } 20 | }; 21 | 22 | export function getTimeDifference(date) { 23 | let difference = differenceInSeconds(new Date(), date); 24 | 25 | if (difference < 60) return `${Math.floor(difference)} sec`; 26 | else if (difference < 3600) return `${Math.floor(difference / 60)} min`; 27 | else if (difference < 86400) return `${Math.floor(difference / 3660)} h`; 28 | else if (difference < 86400 * 30) return `${Math.floor(difference / 86400)} d`; 29 | else if (difference < 86400 * 30 * 12) return `${Math.floor(difference / 86400 / 30)} mon`; 30 | else return `${(difference / 86400 / 30 / 12).toFixed(1)} y`; 31 | } 32 | -------------------------------------------------------------------------------- /src/app/views/charts/echarts/AdvanceAreaChart.jsx: -------------------------------------------------------------------------------- 1 | import ReactEcharts from "echarts-for-react"; 2 | import merge from "lodash/merge"; 3 | 4 | const defaultOption = { 5 | grid: { top: 16, left: 36, right: 16, bottom: 32 }, 6 | 7 | tooltip: { 8 | show: true, 9 | trigger: "axis", 10 | crossStyle: { color: "#000" }, 11 | axisPointer: { type: "cross", lineStyle: { opacity: 0 } } 12 | }, 13 | series: [{ smooth: true, lineStyle: { width: 2, color: "#fff" } }], 14 | xAxis: { 15 | show: true, 16 | showGrid: false, 17 | type: "category", 18 | boundaryGap: false, 19 | axisLine: { show: false }, 20 | axisTick: { show: false }, 21 | axisLabel: { color: "#ccc", margin: 20 } 22 | }, 23 | yAxis: { 24 | min: 10, 25 | max: 60, 26 | type: "value", 27 | axisLine: { show: false }, 28 | axisTick: { show: false }, 29 | axisLabel: { margin: 20, fontSize: 13, color: "#ccc", fontFamily: "roboto" }, 30 | splitLine: { show: true, lineStyle: { color: "rgba(255, 255, 255, .1)" } } 31 | }, 32 | color: [ 33 | { 34 | x: 0, 35 | y: 0, 36 | x2: 0, 37 | y2: 1, 38 | global: false, 39 | type: "linear", 40 | colorStops: [ 41 | { offset: 0, color: "rgba(255,255,255,0.3)" }, 42 | { offset: 1, color: "rgba(255,255,255,0)" } 43 | ] 44 | } 45 | ] 46 | }; 47 | 48 | export default function AdvanceAreaChart({ height, option }) { 49 | return ; 50 | } 51 | -------------------------------------------------------------------------------- /src/app/views/charts/echarts/AppEchart.jsx: -------------------------------------------------------------------------------- 1 | import { Box, styled, useTheme } from "@mui/material"; 2 | 3 | import Breadcrumb from "app/components/Breadcrumb"; 4 | import SimpleCard from "app/components/SimpleCard"; 5 | 6 | import AreaChart from "./AreaChart"; 7 | import LineChart from "./LineChart"; 8 | import DoughnutChart from "./Doughnut"; 9 | import ComparisonChart from "./ComparisonChart"; 10 | 11 | // STYLED COMPONENT 12 | const Container = styled("div")(({ theme }) => ({ 13 | margin: 30, 14 | [theme.breakpoints.down("sm")]: { margin: 16 }, 15 | "& .breadcrumb": { marginBottom: 30, [theme.breakpoints.down("sm")]: { marginBottom: 16 } } 16 | })); 17 | 18 | export default function AppEchart() { 19 | const theme = useTheme(); 20 | 21 | return ( 22 | 23 | 24 | 25 | 26 | 27 | 28 | 36 | 37 | 38 | 39 | 40 | 41 | 45 | 46 | 47 | 48 | 49 | 50 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /src/app/views/charts/echarts/AreaChart.jsx: -------------------------------------------------------------------------------- 1 | import ReactEcharts from "echarts-for-react"; 2 | 3 | const option = { 4 | grid: { left: 0, top: 0, right: 0, bottom: 0 }, 5 | xAxis: { show: false, type: "category", showGrid: false, boundaryGap: false }, 6 | yAxis: { show: false, type: "value", splitLine: { show: false } }, 7 | series: [{ data: [25, 18, 20, 30, 40, 43], type: "line", smooth: true }] 8 | }; 9 | 10 | export default function AreaChart({ height, color }) { 11 | return ; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/views/charts/echarts/ComparisonChart.jsx: -------------------------------------------------------------------------------- 1 | import { useTheme } from "@mui/material/styles"; 2 | import ReactEcharts from "echarts-for-react"; 3 | 4 | export default function ComparisonChart({ height, color = [] }) { 5 | const theme = useTheme(); 6 | 7 | const option = { 8 | grid: { top: "10%", bottom: "10%", right: "5%" }, 9 | legend: { show: false }, 10 | color: ["#223388", "rgba(34, 51, 136, 0.8)"], 11 | barGap: 0, 12 | barMaxWidth: "64px", 13 | dataset: { 14 | source: [ 15 | ["Month", "Website", "App"], 16 | ["Jan", 2200, 1200], 17 | ["Feb", 800, 500], 18 | ["Mar", 700, 1350], 19 | ["Apr", 1500, 1250], 20 | ["May", 2450, 450], 21 | ["June", 1700, 1250] 22 | ] 23 | }, 24 | xAxis: { 25 | type: "category", 26 | axisLine: { show: false }, 27 | splitLine: { show: false }, 28 | axisTick: { show: false }, 29 | axisLabel: { fontSize: 13, fontFamily: "roboto", color: theme.palette.text.secondary } 30 | }, 31 | yAxis: { 32 | axisLine: { show: false }, 33 | axisTick: { show: false }, 34 | splitLine: { lineStyle: { color: theme.palette.text.secondary, opacity: 0.15 } }, 35 | axisLabel: { fontSize: 13, fontFamily: "roboto", color: theme.palette.text.secondary } 36 | }, 37 | // Declare several bar series, each will be mapped 38 | // to a column of dataset.source by default. 39 | series: [{ type: "bar" }, { type: "bar" }] 40 | }; 41 | 42 | return ; 43 | } 44 | -------------------------------------------------------------------------------- /src/app/views/charts/echarts/Doughnut.jsx: -------------------------------------------------------------------------------- 1 | import { useTheme } from "@mui/material/styles"; 2 | import ReactEcharts from "echarts-for-react"; 3 | 4 | export default function DoughnutChart({ height, color = [] }) { 5 | const theme = useTheme(); 6 | 7 | const option = { 8 | legend: { 9 | show: true, 10 | itemGap: 20, 11 | icon: "circle", 12 | bottom: 0, 13 | textStyle: { 14 | fontSize: 13, 15 | color: theme.palette.text.secondary, 16 | fontFamily: theme.typography.fontFamily 17 | } 18 | }, 19 | tooltip: { show: false, trigger: "item", formatter: "{a}
{b}: {c} ({d}%)" }, 20 | xAxis: [{ axisLine: { show: false }, splitLine: { show: false } }], 21 | yAxis: [{ axisLine: { show: false }, splitLine: { show: false } }], 22 | 23 | label: { 24 | fontSize: 13, 25 | color: theme.palette.text.secondary, 26 | fontFamily: theme.typography.fontFamily 27 | }, 28 | 29 | series: [ 30 | { 31 | name: "Traffic Rate", 32 | type: "pie", 33 | radius: ["45%", "72.55%"], 34 | center: ["50%", "50%"], 35 | avoidLabelOverlap: false, 36 | hoverOffset: 5, 37 | stillShowZeroSum: false, 38 | label: { 39 | show: false, 40 | position: "center" 41 | }, 42 | 43 | data: [ 44 | { value: 65, name: "Google" }, 45 | { value: 20, name: "Facebook" }, 46 | { value: 15, name: "Others" } 47 | ], 48 | 49 | emphasis: { 50 | itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: "rgba(0, 0, 0, 0.5)" }, 51 | label: { 52 | show: true, 53 | formatter: "{b} \n{c} ({d}%)", 54 | fontFamily: theme.typography.fontFamily, 55 | color: theme.palette.text.primary, 56 | fontSize: 14 57 | } 58 | } 59 | } 60 | ] 61 | }; 62 | 63 | return ; 64 | } 65 | -------------------------------------------------------------------------------- /src/app/views/charts/echarts/LineChart.jsx: -------------------------------------------------------------------------------- 1 | import { useTheme } from "@mui/material/styles"; 2 | import ReactEcharts from "echarts-for-react"; 3 | 4 | export default function LineChart({ height, color = [] }) { 5 | const theme = useTheme(); 6 | 7 | const option = { 8 | grid: { top: "10%", bottom: "10%", left: "5%", right: "5%" }, 9 | legend: { 10 | itemGap: 20, 11 | icon: "circle", 12 | textStyle: { 13 | fontSize: 13, 14 | color: theme.palette.text.secondary, 15 | fontFamily: theme.typography.fontFamily 16 | } 17 | }, 18 | label: { 19 | fontSize: 13, 20 | color: theme.palette.text.secondary, 21 | fontFamily: theme.typography.fontFamily 22 | }, 23 | xAxis: { 24 | type: "category", 25 | data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], 26 | axisLine: { show: false }, 27 | axisTick: { show: false }, 28 | axisLabel: { 29 | fontSize: 14, 30 | fontFamily: "roboto", 31 | color: theme.palette.text.secondary 32 | } 33 | }, 34 | yAxis: { 35 | type: "value", 36 | axisLine: { show: false }, 37 | axisTick: { show: false }, 38 | splitLine: { 39 | lineStyle: { color: theme.palette.text.secondary, opacity: 0.15 } 40 | }, 41 | axisLabel: { color: theme.palette.text.secondary, fontSize: 13, fontFamily: "roboto" } 42 | }, 43 | series: [ 44 | { 45 | data: [30, 40, 20, 50, 40, 80, 90], 46 | type: "line", 47 | stack: "This month", 48 | name: "This month", 49 | smooth: true, 50 | symbolSize: 4, 51 | lineStyle: { width: 4 } 52 | }, 53 | { 54 | data: [20, 50, 15, 50, 30, 70, 95], 55 | type: "line", 56 | stack: "Last month", 57 | name: "Last month", 58 | smooth: true, 59 | symbolSize: 4, 60 | lineStyle: { width: 4 } 61 | } 62 | ] 63 | }; 64 | 65 | return ; 66 | } 67 | -------------------------------------------------------------------------------- /src/app/views/dashboard/shared/Campaigns.jsx: -------------------------------------------------------------------------------- 1 | import { Small } from "app/components/Typography"; 2 | import { MatxProgressBar, SimpleCard } from "app/components"; 3 | 4 | export default function Campaigns() { 5 | return ( 6 |
7 | 8 | Today 9 | 10 | 11 | 12 | 13 | 14 | Yesterday 15 | 16 | 17 | 18 | 19 | 20 | 21 | Yesterday 22 | 23 | 24 | 25 | 26 | 27 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /src/app/views/dashboard/shared/Doughnut.jsx: -------------------------------------------------------------------------------- 1 | import ReactEcharts from "echarts-for-react"; 2 | import { useTheme } from "@mui/material/styles"; 3 | 4 | export default function DoughnutChart({ height, color = [] }) { 5 | const theme = useTheme(); 6 | 7 | const option = { 8 | legend: { 9 | bottom: 0, 10 | show: true, 11 | itemGap: 20, 12 | icon: "circle", 13 | textStyle: { color: theme.palette.text.secondary, fontSize: 13, fontFamily: "roboto" } 14 | }, 15 | tooltip: { show: false, trigger: "item", formatter: "{a}
{b}: {c} ({d}%)" }, 16 | xAxis: [{ axisLine: { show: false }, splitLine: { show: false } }], 17 | yAxis: [{ axisLine: { show: false }, splitLine: { show: false } }], 18 | 19 | series: [ 20 | { 21 | name: "Traffic Rate", 22 | type: "pie", 23 | hoverOffset: 5, 24 | radius: ["45%", "72.55%"], 25 | center: ["50%", "50%"], 26 | avoidLabelOverlap: false, 27 | stillShowZeroSum: false, 28 | labelLine: { show: false }, 29 | label: { 30 | show: false, 31 | fontSize: 13, 32 | formatter: "{a}", 33 | position: "center", 34 | fontFamily: "roboto", 35 | color: theme.palette.text.secondary 36 | }, 37 | emphasis: { 38 | label: { 39 | show: true, 40 | fontSize: "14", 41 | padding: 4, 42 | fontWeight: "normal", 43 | // formatter: "{b} \n{c} ({d}%)" 44 | formatter: "{b} ({d}%)" 45 | }, 46 | itemStyle: { 47 | shadowBlur: 10, 48 | shadowOffsetX: 0, 49 | shadowColor: "rgba(0, 0, 0, 0.5)" 50 | } 51 | }, 52 | data: [ 53 | { value: 65, name: "Google" }, 54 | { value: 20, name: "Facebook" }, 55 | { value: 15, name: "Others" } 56 | ] 57 | } 58 | ] 59 | }; 60 | 61 | return ; 62 | } 63 | -------------------------------------------------------------------------------- /src/app/views/dashboard/shared/ModifiedAreaChart.jsx: -------------------------------------------------------------------------------- 1 | import ReactEcharts from "echarts-for-react"; 2 | import merge from "lodash/merge"; 3 | 4 | const defaultOption = { 5 | grid: { top: 16, left: 36, right: 16, bottom: 32 }, 6 | tooltip: { 7 | show: true, 8 | trigger: "axis", 9 | 10 | axisPointer: { type: "cross", lineStyle: { opacity: 0 } }, 11 | crossStyle: { color: "#000" } 12 | }, 13 | series: [{ smooth: true, lineStyle: { width: 2, color: "#fff" } }], 14 | xAxis: { 15 | show: true, 16 | type: "category", 17 | showGrid: false, 18 | boundaryGap: false, 19 | axisLabel: { color: "#ccc", margin: 20 }, 20 | axisLine: { show: false }, 21 | axisTick: { show: false } 22 | }, 23 | yAxis: { 24 | min: 10, 25 | max: 60, 26 | type: "value", 27 | axisLine: { show: false }, 28 | axisTick: { show: false }, 29 | axisLabel: { color: "#ccc", margin: 20, fontSize: 13, fontFamily: "roboto" }, 30 | splitLine: { show: true, lineStyle: { color: "rgba(255, 255, 255, .1)" } } 31 | }, 32 | color: [ 33 | { 34 | type: "linear", 35 | x: 0, 36 | y: 0, 37 | x2: 0, 38 | y2: 1, 39 | global: false, 40 | colorStops: [ 41 | { offset: 0, color: "rgba(255,255,255,0.3)" }, 42 | { offset: 1, color: "rgba(255,255,255,0)" } 43 | ] 44 | } 45 | ] 46 | }; 47 | 48 | const ModifiedAreaChart = ({ height, option }) => { 49 | return ; 50 | }; 51 | 52 | export default ModifiedAreaChart; 53 | -------------------------------------------------------------------------------- /src/app/views/dashboard/shared/UpgradeCard.jsx: -------------------------------------------------------------------------------- 1 | import Card from "@mui/material/Card"; 2 | import Button from "@mui/material/Button"; 3 | import { alpha, styled } from "@mui/material/styles"; 4 | 5 | // STYLED COMPONENTS 6 | const CardRoot = styled(Card)(({ theme }) => ({ 7 | marginBottom: "24px", 8 | padding: "24px !important", 9 | [theme.breakpoints.down("sm")]: { paddingLeft: "16px !important" } 10 | })); 11 | 12 | const StyledCard = styled(Card)(({ theme }) => ({ 13 | boxShadow: "none", 14 | textAlign: "center", 15 | position: "relative", 16 | padding: "24px !important", 17 | backgroundColor: alpha(theme.palette.primary.main, 0.15), 18 | [theme.breakpoints.down("sm")]: { padding: "16px !important" } 19 | })); 20 | 21 | const Paragraph = styled("p")(({ theme }) => ({ 22 | margin: 0, 23 | paddingTop: "24px", 24 | paddingBottom: "24px", 25 | color: theme.palette.text.secondary 26 | })); 27 | 28 | export default function UpgradeCard() { 29 | return ( 30 | 31 | 32 | upgrade 33 | 34 | 35 | Upgrade to MatX PRO for
more resources 36 | 37 | 38 | 45 | 46 | 47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /src/app/views/material-kit/DatePicker.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import TextField from "@mui/material/TextField"; 3 | import Grid from "@mui/material/Grid2"; 4 | import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3"; 5 | import { DatePicker, LocalizationProvider, TimePicker } from "@mui/x-date-pickers"; 6 | 7 | export default function MaterialUIDatePickers() { 8 | const [selectedDate, setSelectedDate] = useState(new Date("2014-08-18T21:11:54")); 9 | 10 | const handleDateChange = (date) => setSelectedDate(date); 11 | 12 | return ( 13 | 14 | 15 | ( 19 | 20 | )} 21 | /> 22 | 23 | ( 27 | 28 | )} 29 | /> 30 | 31 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /src/app/views/material-kit/MaterialRoutes.jsx: -------------------------------------------------------------------------------- 1 | import { lazy } from "react"; 2 | import Loadable from "app/components/Loadable"; 3 | 4 | const AppForm = Loadable(lazy(() => import("./forms/AppForm"))); 5 | const AppMenu = Loadable(lazy(() => import("./menu/AppMenu"))); 6 | const AppIcon = Loadable(lazy(() => import("./icons/AppIcon"))); 7 | const AppProgress = Loadable(lazy(() => import("./AppProgress"))); 8 | const AppRadio = Loadable(lazy(() => import("./radio/AppRadio"))); 9 | const AppTable = Loadable(lazy(() => import("./tables/AppTable"))); 10 | const AppSwitch = Loadable(lazy(() => import("./switch/AppSwitch"))); 11 | const AppSlider = Loadable(lazy(() => import("./slider/AppSlider"))); 12 | const AppDialog = Loadable(lazy(() => import("./dialog/AppDialog"))); 13 | const AppButton = Loadable(lazy(() => import("./buttons/AppButton"))); 14 | const AppCheckbox = Loadable(lazy(() => import("./checkbox/AppCheckbox"))); 15 | const AppSnackbar = Loadable(lazy(() => import("./snackbar/AppSnackbar"))); 16 | const AppAutoComplete = Loadable(lazy(() => import("./auto-complete/AppAutoComplete"))); 17 | const AppExpansionPanel = Loadable(lazy(() => import("./expansion-panel/AppExpansionPanel"))); 18 | 19 | const materialRoutes = [ 20 | { path: "/material/table", element: }, 21 | { path: "/material/form", element: }, 22 | { path: "/material/buttons", element: }, 23 | { path: "/material/icons", element: }, 24 | { path: "/material/progress", element: }, 25 | { path: "/material/menu", element: }, 26 | { path: "/material/checkbox", element: }, 27 | { path: "/material/switch", element: }, 28 | { path: "/material/radio", element: }, 29 | { path: "/material/slider", element: }, 30 | { path: "/material/autocomplete", element: }, 31 | { path: "/material/expansion-panel", element: }, 32 | { path: "/material/dialog", element: }, 33 | { path: "/material/snackbar", element: } 34 | ]; 35 | 36 | export default materialRoutes; 37 | -------------------------------------------------------------------------------- /src/app/views/material-kit/auto-complete/AppAutoComplete.jsx: -------------------------------------------------------------------------------- 1 | import Box from "@mui/material/Box"; 2 | import styled from "@mui/material/styles/styled"; 3 | import { Breadcrumb, SimpleCard } from "app/components"; 4 | import AsyncAutocomplete from "./AsyncAutocomplete"; 5 | import AutocompleteCombo from "./AutocompleteCombo"; 6 | import BadgeAutocomplete from "./BadgeAutocomplete"; 7 | 8 | const Container = styled("div")(({ theme }) => ({ 9 | margin: "30px", 10 | [theme.breakpoints.down("sm")]: { margin: "16px" }, 11 | "& .breadcrumb": { 12 | marginBottom: "30px", 13 | [theme.breakpoints.down("sm")]: { marginBottom: "16px" } 14 | } 15 | })); 16 | 17 | export default function AppAutoComplete() { 18 | return ( 19 | 20 | 21 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /src/app/views/material-kit/checkbox/AppCheckbox.jsx: -------------------------------------------------------------------------------- 1 | import Box from "@mui/material/Box"; 2 | import { styled } from "@mui/material/styles"; 3 | import { Breadcrumb, SimpleCard } from "app/components"; 4 | import SimpleCheckbox from "./SimpleCheckbox"; 5 | import LabelledCheckbox from "./LabelledCheckbox"; 6 | import FormGroupCheckbox from "./FormGroupCheckbox"; 7 | import PlacingCheckboxLabel from "./PlacingCheckboxLabel"; 8 | 9 | // STYLED COMPONENTS 10 | const Container = styled("div")(({ theme }) => ({ 11 | margin: "30px", 12 | [theme.breakpoints.down("sm")]: { margin: "16px" }, 13 | "& .breadcrumb": { 14 | marginBottom: "30px", 15 | [theme.breakpoints.down("sm")]: { marginBottom: "16px" } 16 | } 17 | })); 18 | 19 | export default function AppCheckbox() { 20 | return ( 21 | 22 | 23 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | ); 51 | } 52 | -------------------------------------------------------------------------------- /src/app/views/material-kit/checkbox/PlacingCheckboxLabel.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import Checkbox from "@mui/material/Checkbox"; 3 | import FormGroup from "@mui/material/FormGroup"; 4 | import FormLabel from "@mui/material/FormLabel"; 5 | import FormControl from "@mui/material/FormControl"; 6 | import FormControlLabel from "@mui/material/FormControlLabel"; 7 | 8 | export default function PlacingCheckboxLabel() { 9 | const [value, setValue] = useState("female"); 10 | 11 | const handleChange = (event) => setValue(event.target.value); 12 | 13 | return ( 14 | 15 | labelPlacement 16 | 17 | 18 | } 23 | /> 24 | } 29 | /> 30 | } 35 | /> 36 | } 41 | /> 42 | 43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /src/app/views/material-kit/checkbox/SimpleCheckbox.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import Checkbox from "@mui/material/Checkbox"; 3 | 4 | export default function SimpleCheckbox() { 5 | const [state, setState] = useState({ 6 | checkedA: true, 7 | checkedB: true, 8 | checkedF: true 9 | }); 10 | 11 | const handleChange = (name) => (event) => { 12 | setState({ ...state, [name]: event.target.checked }); 13 | }; 14 | 15 | return ( 16 |
17 | 23 | 24 | 31 | 32 | 33 | 34 | 35 | 41 | 42 | 49 | 50 | 56 |
57 | ); 58 | } 59 | -------------------------------------------------------------------------------- /src/app/views/material-kit/dialog/DialogTransition.jsx: -------------------------------------------------------------------------------- 1 | import { forwardRef, useState } from 'react'; 2 | import Button from '@mui/material/Button'; 3 | import Dialog from '@mui/material/Dialog'; 4 | import DialogActions from '@mui/material/DialogActions'; 5 | import DialogContent from '@mui/material/DialogContent'; 6 | import DialogContentText from '@mui/material/DialogContentText'; 7 | import DialogTitle from '@mui/material/DialogTitle'; 8 | import Slide from '@mui/material/Slide'; 9 | 10 | const Transition = forwardRef(function Transition(props, ref) { 11 | return ; 12 | }); 13 | 14 | export default function AlertDialogSlide() { 15 | const [open, setOpen] = useState(false); 16 | 17 | const handleClickOpen = () => setOpen(true); 18 | const handleClose = () => setOpen(false); 19 | 20 | return ( 21 |
22 | 25 | 26 | 34 | Use Google's location service? 35 | 36 | 37 | 38 | Let Google help apps determine location. This means sending anonymous location data to 39 | Google, even when no apps are running. 40 | 41 | 42 | 43 | 44 | 47 | 48 | 51 | 52 | 53 |
54 | ); 55 | } 56 | -------------------------------------------------------------------------------- /src/app/views/material-kit/dialog/FormDialog.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import Button from "@mui/material/Button"; 3 | import Dialog from "@mui/material/Dialog"; 4 | import TextField from "@mui/material/TextField"; 5 | import DialogTitle from "@mui/material/DialogTitle"; 6 | import DialogActions from "@mui/material/DialogActions"; 7 | import DialogContent from "@mui/material/DialogContent"; 8 | import DialogContentText from "@mui/material/DialogContentText"; 9 | 10 | export default function FormDialog() { 11 | const [open, setOpen] = useState(false); 12 | 13 | const handleClickOpen = () => setOpen(true); 14 | const handleClose = () => setOpen(false); 15 | 16 | return ( 17 |
18 | 21 | 22 | 23 | Subscribe 24 | 25 | 26 | 27 | To subscribe to this website, please enter your email address here. We will send updates 28 | occasionally. 29 | 30 | 31 | 39 | 40 | 41 | 42 | 45 | 46 | 49 | 50 | 51 |
52 | ); 53 | } 54 | -------------------------------------------------------------------------------- /src/app/views/material-kit/dialog/ResponsiveDialog.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Box, useTheme } from '@mui/material'; 3 | import Button from '@mui/material/Button'; 4 | import Dialog from '@mui/material/Dialog'; 5 | import DialogTitle from '@mui/material/DialogTitle'; 6 | import DialogActions from '@mui/material/DialogActions'; 7 | import DialogContent from '@mui/material/DialogContent'; 8 | import DialogContentText from '@mui/material/DialogContentText'; 9 | import useMediaQuery from '@mui/material/useMediaQuery'; 10 | 11 | export default function ResponsiveDialog() { 12 | const [open, setOpen] = useState(false); 13 | const theme = useTheme(); 14 | const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); 15 | 16 | const handleClickOpen = () => setOpen(true); 17 | const handleClose = () => setOpen(false); 18 | 19 | return ( 20 | 21 | 24 | 25 | 31 | Use Google's location service? 32 | 33 | 34 | 35 | Let Google help apps determine location. This means sending anonymous location data to 36 | Google, even when no apps are running. 37 | 38 | 39 | 40 | 41 | 44 | 45 | 48 | 49 | 50 | 51 | ); 52 | } 53 | -------------------------------------------------------------------------------- /src/app/views/material-kit/dialog/SimpleAlerts.jsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@mui/material'; 2 | import Button from '@mui/material/Button'; 3 | import Dialog from '@mui/material/Dialog'; 4 | import DialogActions from '@mui/material/DialogActions'; 5 | import DialogContent from '@mui/material/DialogContent'; 6 | import DialogContentText from '@mui/material/DialogContentText'; 7 | import DialogTitle from '@mui/material/DialogTitle'; 8 | import { useState } from 'react'; 9 | 10 | export default function AlertDialog() { 11 | const [open, setOpen] = useState(false); 12 | 13 | const handleClickOpen = () => setOpen(true); 14 | const handleClose = () => setOpen(false); 15 | 16 | return ( 17 | 18 | 21 | 22 | 28 | Use Google's location service? 29 | 30 | 31 | 32 | Let Google help apps determine location. This means sending anonymous location data to 33 | Google, even when no apps are running. 34 | 35 | 36 | 37 | 38 | 41 | 42 | 45 | 46 | 47 | 48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /src/app/views/material-kit/expansion-panel/AppExpansionPanel.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Stack, styled } from "@mui/material"; 2 | import { Breadcrumb, SimpleCard } from "app/components"; 3 | import ControlledExpansionPanels from "./ControlledAccordion"; 4 | import CustomizedExpansionPanels from "./CustomizedExpansionPanel"; 5 | import DetailedExpansionPanel from "./DetailedExpansionPanel"; 6 | import SimpleExpansionPanel from "./SimpleExpansionPanel"; 7 | 8 | const Container = styled("div")(({ theme }) => ({ 9 | margin: "30px", 10 | [theme.breakpoints.down("sm")]: { margin: "16px" }, 11 | "& .breadcrumb": { 12 | marginBottom: "30px", 13 | [theme.breakpoints.down("sm")]: { marginBottom: "16px" }, 14 | }, 15 | })); 16 | 17 | const AppExpansionPanel = () => { 18 | return ( 19 | 20 | 21 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ); 45 | }; 46 | 47 | export default AppExpansionPanel; 48 | -------------------------------------------------------------------------------- /src/app/views/material-kit/forms/AppForm.jsx: -------------------------------------------------------------------------------- 1 | import { Stack } from "@mui/material"; 2 | import { Box, styled } from "@mui/material"; 3 | import { Breadcrumb, SimpleCard } from "app/components"; 4 | import SimpleForm from "./SimpleForm"; 5 | import StepperForm from "./StepperForm"; 6 | 7 | // STYLED COMPONENTS 8 | const Container = styled("div")(({ theme }) => ({ 9 | margin: "30px", 10 | [theme.breakpoints.down("sm")]: { margin: "16px" }, 11 | "& .breadcrumb": { 12 | marginBottom: "30px", 13 | [theme.breakpoints.down("sm")]: { marginBottom: "16px" } 14 | } 15 | })); 16 | 17 | export default function AppForm() { 18 | return ( 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /src/app/views/material-kit/menu/AppMenu.jsx: -------------------------------------------------------------------------------- 1 | import { Stack } from "@mui/material"; 2 | import { Box, styled } from "@mui/material"; 3 | import { Breadcrumb, SimpleCard } from "app/components"; 4 | import SimpleMenu from "./SimpleMenu"; 5 | import SelectedMenu from "./SelectedMenu"; 6 | import MaxHeightMenu from "./MaxHeightMenu"; 7 | import CustomizedMenu from "./CustomizedMenu"; 8 | 9 | const Container = styled("div")(({ theme }) => ({ 10 | margin: "30px", 11 | [theme.breakpoints.down("sm")]: { margin: 16 }, 12 | "& .breadcrumb": { 13 | marginBottom: "30px", 14 | [theme.breakpoints.down("sm")]: { marginBottom: 16 } 15 | } 16 | })); 17 | 18 | export default function AppMenu() { 19 | return ( 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /src/app/views/material-kit/menu/MaxHeightMenu.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { Box, IconButton, Menu, MenuItem } from "@mui/material"; 3 | import MoreVert from "@mui/icons-material/MoreVert"; 4 | 5 | const options = [ 6 | "None", 7 | "Atria", 8 | "Callisto", 9 | "Dione", 10 | "Ganymede", 11 | "Hangouts Call", 12 | "Luna", 13 | "Oberon", 14 | "Phobos", 15 | "Pyxis", 16 | "Sedna", 17 | "Titania", 18 | "Triton", 19 | "Umbriel" 20 | ]; 21 | 22 | const ITEM_HEIGHT = 48; 23 | 24 | export default function MaxHeightMenu() { 25 | const [anchorEl, setAnchorEl] = useState(null); 26 | const open = Boolean(anchorEl); 27 | 28 | function handleClick(event) { 29 | setAnchorEl(event.currentTarget); 30 | } 31 | 32 | function handleClose() { 33 | setAnchorEl(null); 34 | } 35 | 36 | return ( 37 | 38 | 43 | 44 | 45 | 46 | 52 | {options.map((option) => ( 53 | 54 | {option} 55 | 56 | ))} 57 | 58 | 59 | ); 60 | } 61 | -------------------------------------------------------------------------------- /src/app/views/material-kit/menu/SelectedMenu.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { List, styled, ListItemButton, ListItemText, Menu, MenuItem } from "@mui/material"; 3 | 4 | // STYLED COMPONENTS 5 | const MenuRoot = styled("div")(({ theme }) => ({ 6 | width: "100%", 7 | maxWidth: 360, 8 | backgroundColor: theme.palette.background.paper 9 | })); 10 | 11 | const options = [ 12 | "Show some love to Material-UI", 13 | "Show all notification content", 14 | "Hide sensitive notification content", 15 | "Hide all notification content" 16 | ]; 17 | 18 | export default function SelectedMenu() { 19 | const [anchorEl, setAnchorEl] = useState(null); 20 | const [selectedIndex, setSelectedIndex] = useState(1); 21 | 22 | function handleClickListItem(event) { 23 | setAnchorEl(event.currentTarget); 24 | } 25 | 26 | function handleMenuItemClick(event, index) { 27 | setSelectedIndex(index); 28 | setAnchorEl(null); 29 | } 30 | 31 | function handleClose() { 32 | setAnchorEl(null); 33 | } 34 | 35 | return ( 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 49 | {options.map((option, index) => ( 50 | handleMenuItemClick(event, index)}> 55 | {option} 56 | 57 | ))} 58 | 59 | 60 | ); 61 | } 62 | -------------------------------------------------------------------------------- /src/app/views/material-kit/menu/SimpleMenu.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Button, Menu, MenuItem } from "@mui/material"; 2 | import { useState } from "react"; 3 | 4 | export default function SimpleMenu() { 5 | const [anchorEl, setAnchorEl] = useState(null); 6 | 7 | function handleClick(event) { 8 | setAnchorEl(event.currentTarget); 9 | } 10 | 11 | function handleClose() { 12 | setAnchorEl(null); 13 | } 14 | 15 | return ( 16 | 17 | 24 | 25 | 26 | Profile 27 | My account 28 | Logout 29 | 30 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /src/app/views/material-kit/radio/AppRadio.jsx: -------------------------------------------------------------------------------- 1 | import { Stack } from "@mui/material"; 2 | import { Box, styled } from "@mui/material"; 3 | import { Breadcrumb, SimpleCard } from "app/components"; 4 | import SimpleRadio from "./SimpleRadio"; 5 | import StandaloneRadio from "./StandaloneRadio"; 6 | import PlacingRadioLabel from "./PlacingRadioLabel"; 7 | 8 | // STYLED COMPONENT 9 | const Container = styled("div")(({ theme }) => ({ 10 | margin: 30, 11 | [theme.breakpoints.down("sm")]: { margin: 16 }, 12 | "& .breadcrumb": { marginBottom: 30, [theme.breakpoints.down("sm")]: { marginBottom: 16 } } 13 | })); 14 | 15 | export default function AppRadio() { 16 | return ( 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /src/app/views/material-kit/radio/PlacingRadioLabel.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from "@mui/material"; 3 | 4 | export default function PlacingRadioLabel() { 5 | const [value, setValue] = useState("female"); 6 | 7 | function handleChange(event) { 8 | setValue(event.target.value); 9 | } 10 | 11 | return ( 12 | 13 | labelPlacement 14 | 15 | } 20 | /> 21 | 22 | } 27 | /> 28 | 29 | } 34 | /> 35 | 36 | } 41 | /> 42 | 43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /src/app/views/material-kit/radio/SimpleRadio.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { styled, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from "@mui/material"; 3 | 4 | const RadioRoot = styled("div")(({ theme }) => ({ 5 | display: "flex", 6 | "& .group": { margin: theme.spacing(1, 0) }, 7 | "& .formControl": { marginRight: theme.spacing(3), marginLeft: theme.spacing(3) } 8 | })); 9 | 10 | export default function SimpleRadio() { 11 | const [value, setValue] = useState("female"); 12 | function handleChange(event) { 13 | setValue(event.target.value); 14 | } 15 | 16 | return ( 17 | 18 | 19 | Gender 20 | 26 | } label="Female" /> 27 | } label="Male" /> 28 | } label="Other" /> 29 | } 33 | label="(Disabled option)" 34 | /> 35 | 36 | 37 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /src/app/views/material-kit/radio/StandaloneRadio.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { Box, Radio, styled } from "@mui/material"; 3 | import RadioButtonCheckedIcon from "@mui/icons-material/RadioButtonChecked"; 4 | import RadioButtonUncheckedIcon from "@mui/icons-material/RadioButtonUnchecked"; 5 | import { green } from "@mui/material/colors"; 6 | 7 | // STYLED COMPONENTS 8 | const GreenRadio = styled(Radio)(() => ({ 9 | color: green[400], 10 | "&$checked": { color: green[600] } 11 | })); 12 | 13 | export default function StandaloneRadio() { 14 | const [selectedValue, setSelectedValue] = useState("a"); 15 | 16 | function handleChange(event) { 17 | setSelectedValue(event.target.value); 18 | } 19 | 20 | return ( 21 | 22 | 28 | 29 | 35 | 36 | 43 | 44 | 51 | 52 | } 59 | checkedIcon={} 60 | /> 61 | 62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /src/app/views/material-kit/slider/AppSlider.jsx: -------------------------------------------------------------------------------- 1 | import { Stack } from "@mui/material"; 2 | import { Box, styled } from "@mui/material"; 3 | import { Breadcrumb, SimpleCard } from "app/components"; 4 | import ContinuousSlider from "./ContinuousSlider"; 5 | import DiscreteSlider from "./DiscreteSlider"; 6 | import InputSlider from "./InputSlider"; 7 | import RangeSlider from "./RangeSlider"; 8 | import VerticalSlider from "./VerticalSlider"; 9 | 10 | // STYLED COMPONENTS 11 | const Container = styled("div")(({ theme }) => ({ 12 | margin: "30px", 13 | [theme.breakpoints.down("sm")]: { margin: "16px" }, 14 | "& .breadcrumb": { 15 | marginBottom: "30px", 16 | [theme.breakpoints.down("sm")]: { marginBottom: "16px" } 17 | } 18 | })); 19 | 20 | export default function AppSlider() { 21 | return ( 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | ); 50 | } 51 | -------------------------------------------------------------------------------- /src/app/views/material-kit/slider/ContinuousSlider.jsx: -------------------------------------------------------------------------------- 1 | import VolumeDown from "@mui/icons-material/VolumeDown"; 2 | import VolumeUp from "@mui/icons-material/VolumeUp"; 3 | import { Box, Slider, Stack, Typography } from "@mui/material"; 4 | import React from "react"; 5 | 6 | export default function ContinuousSlider() { 7 | const [value, setValue] = React.useState(30); 8 | 9 | const handleChange = (event, newValue) => { 10 | setValue(newValue); 11 | }; 12 | 13 | return ( 14 | 15 | 16 | Volume 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /src/app/views/material-kit/slider/InputSlider.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { Box, Input, Slider, Typography } from "@mui/material"; 3 | import Grid from "@mui/material/Grid2"; 4 | import VolumeUp from "@mui/icons-material/VolumeUp"; 5 | 6 | export default function InputSlider() { 7 | const [value, setValue] = useState(30); 8 | const handleSliderChange = (_, newValue) => { 9 | setValue(newValue); 10 | }; 11 | 12 | const handleInputChange = (event) => { 13 | setValue(event.target.value === "" ? "" : Number(event.target.value)); 14 | }; 15 | const handleBlur = () => { 16 | if (value < 0) { 17 | setValue(0); 18 | } else if (value > 100) { 19 | setValue(100); 20 | } 21 | }; 22 | 23 | return ( 24 | 25 | 26 | Volume 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 39 | 40 | 41 | 42 | 56 | 57 | 58 | 59 | ); 60 | } 61 | -------------------------------------------------------------------------------- /src/app/views/material-kit/slider/RangeSlider.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { Box, Slider, Typography } from "@mui/material"; 3 | 4 | function valuetext(value) { 5 | return `${value}°C`; 6 | } 7 | 8 | export default function RangeSlider() { 9 | const [value, setValue] = useState([20, 37]); 10 | 11 | const handleChange = (_, newValue) => { 12 | setValue(newValue); 13 | }; 14 | 15 | return ( 16 | 17 | 18 | Temperature range 19 | 20 | 21 | 28 | 29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /src/app/views/material-kit/slider/VerticalSlider.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Box } from "@mui/material"; 3 | import { Slider, Typography } from "@mui/material"; 4 | 5 | function valuetext(value) { 6 | return `${value}°C`; 7 | } 8 | 9 | const marks = [ 10 | { value: 0, label: "0°C" }, 11 | { value: 20, label: "20°C" }, 12 | { value: 37, label: "37°C" }, 13 | { value: 100, label: "100°C" } 14 | ]; 15 | 16 | export default function VerticalSlider() { 17 | return ( 18 | 19 | 20 | Temperature 21 | 22 | 23 | 29 | 36 | 43 | 44 | 45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /src/app/views/material-kit/snackbar/DirectionSnackbar.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Button, Slide, Snackbar } from "@mui/material"; 2 | import { useState } from "react"; 3 | 4 | function TransitionLeft(props) { 5 | return ; 6 | } 7 | 8 | function TransitionUp(props) { 9 | return ; 10 | } 11 | 12 | function TransitionRight(props) { 13 | return ; 14 | } 15 | 16 | function TransitionDown(props) { 17 | return ; 18 | } 19 | 20 | const DirectionSnackbar = () => { 21 | const [open, setOpen] = useState(false); 22 | const [TransitionType, setTransitionType] = useState(undefined); 23 | 24 | const handleClick = (slideDirection) => () => { 25 | setOpen(true); 26 | setTransitionType(() => slideDirection); 27 | }; 28 | 29 | const handleClose = () => setOpen(false); 30 | 31 | return ( 32 | 33 | 34 | 35 | 36 | 37 | 38 | I love snacks} 44 | /> 45 | 46 | ); 47 | }; 48 | 49 | export default DirectionSnackbar; 50 | -------------------------------------------------------------------------------- /src/app/views/material-kit/snackbar/LongLengthSnackbar.jsx: -------------------------------------------------------------------------------- 1 | import { Button, SnackbarContent, styled } from "@mui/material"; 2 | 3 | const action = ( 4 | 7 | ); 8 | 9 | const SnackbarRoot = styled("div")(({ theme }) => ({ 10 | maxWidth: 600, 11 | "& .snackbar": { margin: theme.spacing(1) }, 12 | })); 13 | 14 | export default function LongTextSnackbar() { 15 | return ( 16 | 17 | 18 | 19 | 24 | 25 | 30 | 31 | 39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /src/app/views/material-kit/snackbar/PositionedSnackbar.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Button, Snackbar } from "@mui/material"; 2 | import React from "react"; 3 | 4 | export default function PositionedSnackbar() { 5 | const [state, setState] = React.useState({ 6 | open: false, 7 | vertical: "top", 8 | horizontal: "center", 9 | }); 10 | 11 | const { vertical, horizontal, open } = state; 12 | 13 | const handleClick = (newState) => () => { 14 | setState({ open: true, ...newState }); 15 | }; 16 | 17 | function handleClose() { 18 | setState({ ...state, open: false }); 19 | } 20 | 21 | return ( 22 | 23 | 24 | 25 | 26 | 29 | 30 | 33 | 34 | 35 | 36 | 37 | 38 | I love snacks} 45 | /> 46 | 47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /src/app/views/material-kit/snackbar/SimpleSnackbar.jsx: -------------------------------------------------------------------------------- 1 | import CloseIcon from "@mui/icons-material/Close"; 2 | import { Box, Button, IconButton, Snackbar, useTheme } from "@mui/material"; 3 | import { useState } from "react"; 4 | 5 | export default function SimpleSnackbar() { 6 | const theme = useTheme(); 7 | const [open, setOpen] = useState(false); 8 | 9 | function handleClick() { 10 | setOpen(true); 11 | } 12 | 13 | function handleClose(_, reason) { 14 | if (reason === "clickaway") { 15 | return; 16 | } 17 | setOpen(false); 18 | } 19 | 20 | return ( 21 | 22 | 23 | Note archived} 30 | action={[ 31 | , 34 | 41 | 42 | , 43 | ]} 44 | /> 45 | 46 | ); 47 | } 48 | -------------------------------------------------------------------------------- /src/app/views/material-kit/snackbar/StackedSnackbar.jsx: -------------------------------------------------------------------------------- 1 | import { Fragment } from 'react'; 2 | import { Button } from '@mui/material'; 3 | import { SnackbarProvider, useSnackbar } from 'notistack'; 4 | 5 | function StackedSnackbar() { 6 | const { enqueueSnackbar } = useSnackbar(); 7 | 8 | const handleClick = () => enqueueSnackbar('I love snacks.'); 9 | 10 | const handleClickVariant = (variant) => () => { 11 | // variant could be success, error, warning, info, or default 12 | enqueueSnackbar('This is a warning message!', { variant }); 13 | }; 14 | 15 | return ( 16 | 17 | 18 | 19 | 20 | ); 21 | } 22 | 23 | export default function IntegrationNotistack() { 24 | return ( 25 | 26 | 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /src/app/views/material-kit/snackbar/TransitionSnackbar.jsx: -------------------------------------------------------------------------------- 1 | import { Button, Fade, Grow, Slide, Snackbar } from "@mui/material"; 2 | import React from "react"; 3 | 4 | function SlideTransition(props) { 5 | return ; 6 | } 7 | 8 | function GrowTransition(props) { 9 | return ; 10 | } 11 | 12 | export default function TransitionsSnackbar() { 13 | const [state, setState] = React.useState({ 14 | open: false, 15 | Transition: Fade, 16 | }); 17 | 18 | const handleClick = (Transition) => () => { 19 | setState({ open: true, Transition }); 20 | }; 21 | 22 | function handleClose() { 23 | setState({ ...state, open: false }); 24 | } 25 | 26 | return ( 27 |
28 | 29 | 30 | 31 | I love snacks} 37 | /> 38 |
39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /src/app/views/material-kit/switch/AppSwitch.jsx: -------------------------------------------------------------------------------- 1 | import { Box, styled, Stack } from "@mui/material"; 2 | import { Breadcrumb, SimpleCard } from "app/components"; 3 | import SimpleSwitch from "./SijmpleSwitch"; 4 | import LabelledSwitch from "./LabelledSwitch"; 5 | import FormGroupSwitch from "./FormGroupSwitch"; 6 | import CustomizedSwitch from "./CustomizedSwitch"; 7 | import PlacingSwitchLabel from "./PlacingSwitchLabel"; 8 | 9 | // STYLED COMPONENTS 10 | const Container = styled("div")(({ theme }) => ({ 11 | margin: "30px", 12 | [theme.breakpoints.down("sm")]: { margin: "16px" }, 13 | "& .breadcrumb": { 14 | marginBottom: "30px", 15 | [theme.breakpoints.down("sm")]: { marginBottom: "16px" } 16 | } 17 | })); 18 | 19 | export default function AppSwitch() { 20 | return ( 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /src/app/views/material-kit/switch/FormGroupSwitch.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import Switch from "@mui/material/Switch"; 3 | import FormGroup from "@mui/material/FormGroup"; 4 | import FormLabel from "@mui/material/FormLabel"; 5 | import FormControl from "@mui/material/FormControl"; 6 | import FormHelperText from "@mui/material/FormHelperText"; 7 | import FormControlLabel from "@mui/material/FormControlLabel"; 8 | 9 | export default function FormGroupSwitch() { 10 | const [state, setState] = useState({ 11 | gilad: true, 12 | jason: false, 13 | antoine: true 14 | }); 15 | 16 | const handleChange = (name) => (event) => { 17 | setState({ ...state, [name]: event.target.checked }); 18 | }; 19 | 20 | return ( 21 | 22 | Assign responsibility 23 | 24 | 25 | } 28 | /> 29 | } 32 | /> 33 | 37 | } 38 | /> 39 | 40 | 41 | Be careful 42 | 43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /src/app/views/material-kit/switch/LabelledSwitch.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import Switch from "@mui/material/Switch"; 3 | import FormGroup from "@mui/material/FormGroup"; 4 | import FormControlLabel from "@mui/material/FormControlLabel"; 5 | 6 | export default function LabelledSwitch() { 7 | const [state, setState] = useState({ checkedA: true, checkedB: true }); 8 | 9 | const handleChange = (name) => (event) => { 10 | setState({ ...state, [name]: event.target.checked }); 11 | }; 12 | 13 | return ( 14 | 15 | 19 | } 20 | /> 21 | 22 | 31 | } 32 | /> 33 | 34 | } label="Uncontrolled" /> 35 | } label="Disabled" /> 36 | } label="Disabled" /> 37 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /src/app/views/material-kit/switch/PlacingSwitchLabel.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import Switch from "@mui/material/Switch"; 3 | import FormGroup from "@mui/material/FormGroup"; 4 | import FormControlLabel from "@mui/material/FormControlLabel"; 5 | import FormControl from "@mui/material/FormControl"; 6 | import FormLabel from "@mui/material/FormLabel"; 7 | 8 | function PlacingSwitchLabel() { 9 | const [value, setValue] = useState("female"); 10 | 11 | function handleChange(event) { 12 | setValue(event.target.value); 13 | } 14 | 15 | return ( 16 | 17 | labelPlacement 18 | 19 | } 22 | label="Top" 23 | labelPlacement="top" 24 | /> 25 | } 28 | label="Start" 29 | labelPlacement="start" 30 | /> 31 | } 34 | label="Bottom" 35 | labelPlacement="bottom" 36 | /> 37 | } 40 | label="End" 41 | labelPlacement="end" 42 | /> 43 | 44 | 45 | ); 46 | } 47 | 48 | export default PlacingSwitchLabel; 49 | -------------------------------------------------------------------------------- /src/app/views/material-kit/switch/SijmpleSwitch.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import Switch from "@mui/material/Switch"; 3 | 4 | export default function SimpleSwitch() { 5 | const [state, setState] = useState({ 6 | checkedA: true, 7 | checkedB: true 8 | }); 9 | 10 | const handleChange = (name) => (event) => { 11 | setState({ ...state, [name]: event.target.checked }); 12 | }; 13 | 14 | return ( 15 |
16 | 22 | 29 | 30 | 31 | 32 | 33 | 39 |
40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /src/app/views/material-kit/tables/AppTable.jsx: -------------------------------------------------------------------------------- 1 | import { Box, styled } from "@mui/material"; 2 | import SimpleTable from "./SimpleTable"; 3 | import PaginationTable from "./PaginationTable"; 4 | import { Breadcrumb, SimpleCard } from "app/components"; 5 | 6 | // STYLED COMPONENTS 7 | const Container = styled("div")(({ theme }) => ({ 8 | margin: "30px", 9 | [theme.breakpoints.down("sm")]: { margin: "16px" }, 10 | "& .breadcrumb": { 11 | marginBottom: "30px", 12 | [theme.breakpoints.down("sm")]: { marginBottom: "16px" } 13 | } 14 | })); 15 | 16 | export default function AppTable() { 17 | return ( 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /src/app/views/sessions/NotFound.jsx: -------------------------------------------------------------------------------- 1 | import Button from "@mui/material/Button"; 2 | import { styled } from "@mui/material/styles"; 3 | import { useNavigate } from "react-router-dom"; 4 | 5 | // STYLED COMPONENTS 6 | const StyledImage = styled("img")({ 7 | width: "100%", 8 | marginBottom: "32px" 9 | }); 10 | 11 | const NotFoundRoot = styled("div")({ 12 | width: "100%", 13 | display: "flex", 14 | alignItems: "center", 15 | justifyContent: "center", 16 | height: "100vh !important", 17 | "& .content": { 18 | maxWidth: 320, 19 | display: "flex", 20 | flexDirection: "column", 21 | justifyContent: "center" 22 | } 23 | }); 24 | 25 | export default function NotFound() { 26 | const navigate = useNavigate(); 27 | 28 | return ( 29 | 30 |
31 | 32 | 33 | 36 |
37 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /src/app/views/sessions/session-routes.jsx: -------------------------------------------------------------------------------- 1 | import { lazy } from "react"; 2 | 3 | const NotFound = lazy(() => import("./NotFound")); 4 | const ForgotPassword = lazy(() => import("./ForgotPassword")); 5 | 6 | const FirebaseLogin = lazy(() => import("./login/FirebaseLogin")); 7 | const FirebaseRegister = lazy(() => import("./register/FirebaseRegister")); 8 | 9 | // const JwtLogin = Loadable(lazy(() => import("./login/JwtLogin"))); 10 | // const JwtRegister = Loadable(lazy(() => import("./register/JwtRegister"))); 11 | // const Auth0Login = Loadable(lazy(() => import("./login/Auth0Login"))); 12 | 13 | const sessionRoutes = [ 14 | { path: "/session/signup", element: }, 15 | { path: "/session/signin", element: }, 16 | { path: "/session/forgot-password", element: }, 17 | { path: "*", element: } 18 | ]; 19 | 20 | export default sessionRoutes; 21 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { BrowserRouter } from "react-router-dom"; 4 | // ROOT APP COMPONENT 5 | import App from "./app/App"; 6 | // THIRD PARTY CSS 7 | import "perfect-scrollbar/css/perfect-scrollbar.css"; 8 | 9 | const root = createRoot(document.getElementById("root")); 10 | 11 | root.render( 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "rewrites": [{ "source": "/(.*)", "destination": "/" }] 3 | } 4 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import path from "path"; 2 | import { defineConfig } from "vite"; 3 | import react from "@vitejs/plugin-react"; 4 | import { VitePWA } from "vite-plugin-pwa"; 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [ 9 | react(), 10 | VitePWA({ 11 | injectRegister: "auto", 12 | registerType: "autoUpdate", 13 | workbox: { clientsClaim: true, skipWaiting: true } 14 | }) 15 | ], 16 | build: { 17 | chunkSizeWarningLimit: 2000 18 | }, 19 | resolve: { 20 | alias: { 21 | app: path.resolve(__dirname, "src/app") 22 | } 23 | } 24 | }); 25 | --------------------------------------------------------------------------------