Upload folder using huggingface_hub

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,40 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+
+-   OS: [e.g. iOS]
+-   Browser [e.g. chrome, safari]
+-   Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+
+-   Device: [e.g. iPhone6]
+-   OS: [e.g. iOS8.1]
+-   Browser [e.g. stock browser, safari]
+-   Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/custom.md

@@ -0,0 +1,7 @@
+---
+name: Custom issue template
+about: Describe this issue template's purpose here.
+title: ''
+labels: ''
+assignees: ''
+---

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/prod.yml

@@ -0,0 +1,48 @@
+name: Prod deploy
+
+# Controls when the action will run.
+on:
+  # Triggers the workflow on push or pull request events but only for the master branch
+  push:
+    branches:
+      - main
+  pull_request:
+    types:
+      - closed
+    branches:
+      - main
+
+jobs:
+  if_merged:
+    if: github.event.pull_request.merged == true
+    name: 🎉 Deploy
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🚚 Get latest code
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 24
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24"
+
+      - name: 🔨 Build Project
+        run: |
+          cd vite
+          corepack enable
+          yarn set version 4.10.3
+          yarn
+          yarn build
+
+      - name: 📂 Deploy to Server
+        uses: easingthemes/ssh-deploy@v4
+        env:
+          SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
+          # ARGS: "-rltgoDzvO --delete"
+          SOURCE: "vite/dist/"
+          REMOTE_HOST: 145.79.3.173
+          REMOTE_USER: u965251139
+          REMOTE_PORT: "65002"
+          TARGET: domains/berrydashboard.com/public_html/free
+          EXCLUDE: "/vite/node_modules/"

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+-   Demonstrating empathy and kindness toward other people
+-   Being respectful of differing opinions, viewpoints, and experiences
+-   Giving and gracefully accepting constructive feedback
+-   Accepting responsibility and apologizing to those affected by our mistakes,
+    and learning from the experience
+-   Focusing on what is best not just for us as individuals, but for the
+    overall community
+
+Examples of unacceptable behavior include:
+
+-   The use of sexualized language or imagery, and sexual attention or
+    advances of any kind
+-   Trolling, insulting or derogatory comments, and personal or political attacks
+-   Public or private harassment
+-   Publishing others' private information, such as a physical or email
+    address, without their explicit permission
+-   Other conduct which could reasonably be considered inappropriate in a
+    professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+codedthemes@gmail.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 CodedThemes
+
+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:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.

README.md

@@ -0,0 +1,174 @@
+# Berry Free React Material UI Admin Template [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Get%20Berry%20React%20-%20The%20most%20beautiful%20Material%20designed%20Admin%20Dashboard%20Template%20&url=https://berrydashboard.com&via=codedthemes&hashtags=reactjs,webdev,developers,javascript)
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Price](https://img.shields.io/badge/price-FREE-0098f7.svg)](https://github.com/codedthemes/berry-free-react-admin-template/blob/main/LICENSE)
+[![GitHub package version](https://img.shields.io/github/package-json/v/codedthemes/mantis-free-react-admin-template)](https://github.com/codedthemes/berry-free-react-admin-template/)
+[![Download ZIP](https://img.shields.io/badge/Download-ZIP-blue?style=flat-square&logo=github)](https://codedthemes.com/item/berry-mui-free-react-admin-template/)
+[![Join Discord](https://img.shields.io/badge/Join-Discord-5865F2?style=flat-square&logo=discord&logoColor=white)](https://discord.com/invite/p2E2WhCb6s)
+
+Berry is a free Material UI admin dashboard template built with React. It is meant to provide the best possible User Experience with highly customizable feature-rich pages. It is a complete Dashboard Template that has easy and intuitive responsive design whether it is viewed on retina screens or laptops.
+
+✨ Support us! If you like this theme, click the ⭐ (Top right) and let it shine
+
+![IMG_8566.jpg](https://berrydashboard.com/imp-images/berry-github-free-repo-1.jpg)
+
+## Table of contents
+
+- [Getting Started](#getting-started)
+- [Download](#download)
+- [Why Berry?](#why-berry)
+- [What's included in Premium Version?](#whats-included-in-premium-version)
+- [Documentation](#documentation)
+- [Browser support](#browser-support)
+- [Technology Stack](#technology-stack)
+- [Berry Figma UI Kit](#berry-figma-ui-kit)
+- [Other Technologies](#other-technologies)
+- 💰[Save more with Big Bundle](#save-more-with-big-bundle)💰
+- [More React Dashboard Templates](#more-react-dashboard-templates)
+- [Issues?](#issues)
+- [License](#license)
+- [Contributor](#contributor)
+- [Useful Resources](#useful-resources)
+- [Community](#community)
+- [Follow us](#follow-us)
+
+## Getting Started
+
+Clone from Github
+
+```
+git clone https://github.com/codedthemes/berry-free-react-admin-template.git
+```
+
+## Download
+
+- Berry Free
+  - [Live Preview](https://berrydashboard.com/free/)
+  - [Download](https://github.com/codedthemes/berry-free-react-admin-template)
+- Berry
+  - [Live Preview](https://berrydashboard.com)
+  - [Download](https://material-ui.com/store/items/berry-react-material-admin/)
+
+## Why Berry?
+
+Berry offers everything you need to create dashboards. We have included the following high-end features in our initial release:
+
+- Modern aesthetics UI design
+- Material-UI components
+- Fully Responsive, all modern browser supported
+- Easy to use code structure
+- Flexible & High-Performance code
+- Easy Documentation Guide
+
+## What's included in Premium Version?
+
+[Pro version](https://berrydashboard.com) of Berry react template contains features like TypeScript, Next.js Seed versions, Apps, Authentication Methods (i.e. JWT, Auth0, Firebase, AWS, Supabase), Advance Components, Form Plugins, Layouts, Widgets, and many more.
+
+| [Berry Free](https://berrydashboard.com/free/) | [Berry](https://material-ui.com/store/items/berry-react-material-admin/) |
+| ---------------------------------------------- | :----------------------------------------------------------------------- |
+| **9** Demo pages                               | **45+** demo pages                                                       |
+| -                                              | ✓ Multi-language                                                         |
+| -                                              | ✓ Dark/Light Mode 🌓                                                     |
+| -                                              | ✓ TypeScript version                                                     |
+| -                                              | ✓ Design files (Figma)                                                   |
+| -                                              | ✓ 6+ color Options                                                       |
+| -                                              | ✓ RTL                                                                    |
+| -                                              | ✓ JWT, Firebase, Auth0, AWS, Supabase authentications                    |
+| -                                              | ✓ [More components](https://berrydashboard.com/components/autocomplete)  |
+
+## Documentation
+
+[Berry Documentation](https://codedthemes.gitbook.io/berry/) helps you with installation, deployment, and troubleshooting.
+
+## Browser support
+
+<img src="https://org-public-assets.s3.us-west-2.amazonaws.com/logos/chrome.png" width="45" height="45" > <img src="https://org-public-assets.s3.us-west-2.amazonaws.com/logos/edge.png" width="45" height="45" > <img src="https://org-public-assets.s3.us-west-2.amazonaws.com/logos/safari.png" width="45" height="45" > <img src="https://org-public-assets.s3.us-west-2.amazonaws.com/logos/firefox.png" width="45" height="45" > <img src="https://org-public-assets.s3.us-west-2.amazonaws.com/logos/opera.png" width="45" height="45" >
+
+## Technology Stack
+
+- [Material UI V7](https://material-ui.com/)
+- [React 19.2](https://react.dev/)
+- Built with React Hooks API
+- Redux & React Context API for State Management
+- React Router for Navigation Routing
+- Support of vite
+- Code Splitting
+- CSS-in-JS where CSS is composed using JavaScript instead of defined in external files
+
+## Berry Figma UI Kit
+
+<div>
+  <a href="https://codedthemes.com/item/berry-free-figma-ui-kit/">
+    <img src="https://org-public-assets.s3.us-west-2.amazonaws.com/Banners/Figma_Free_Berry.png" width="450" alt="Figma Free">
+  </a>&nbsp;&nbsp;&nbsp;&nbsp;
+  <a href="https://codedthemes.com/item/berry-figma-ui-kit/">
+    <img src="https://org-public-assets.s3.us-west-2.amazonaws.com/Banners/Figma-Pro-Berry.png" width="450" alt="Figma Pro">
+  </a>
+</div>
+
+## Other Technologies
+
+| Technology                                                                                                                        | Free                                                                              | Pro                                                                             |
+| --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
+| <p align="center"><img src="https://org-public-assets.s3.us-west-2.amazonaws.com/logos/Angular.png" width="25" height="25"></p>   | [**Free**](https://codedthemes.com/item/berry-angular-free-admin-template/)       | [**Pro**](https://codedthemes.com/item/berry-angular-admin-dashboard-template/) |
+| <p align="center"><img src="https://org-public-assets.s3.us-west-2.amazonaws.com/logos/Bootstrap.png" width="30" height="30"></p> | [**Free**](https://codedthemes.com/item/berry-bootstrap-free-admin-template/)     | [**Pro**](https://codedthemes.com/item/berry-bootstrap-5-admin-template/)       |
+| <p align="center"><img src="https://org-public-assets.s3.us-west-2.amazonaws.com/logos/Vue.png" width="25" height="25"></p>       | [**Free**](https://codedthemes.com/item/berry-free-vuetify-vuejs-admin-template/) | [**Pro**](https://codedthemes.com/item/berry-vue-admin-dashboard/)              |
+
+## Save more with Big Bundle
+
+[![bundle-image](https://org-public-assets.s3.us-west-2.amazonaws.com/Banners/Bundle+banner.png)](https://links.codedthemes.com/jhFBJ)
+
+## More React Dashboard Templates
+
+| Dashboard                                                                                                                                                          | FREE                                                                                | PRO                                                                                   |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| <img src="https://org-public-assets.s3.us-west-2.amazonaws.com/logos/Mantis%20with%20name.png"  height="30" style="display:inline-block; vertical-align:middle;">  | [**Free**](https://mantisdashboard.com/free/)                                       | [**Pro**](https://mui.com/store/items/mantis-react-admin-dashboard-template/)</span>  |
+| <img src="https://org-public-assets.s3.us-west-2.amazonaws.com/logos/Datta%20with%20name.png" height="30" style="display:inline-block; vertical-align:middle;">    | [**Free**](https://codedthemes.com/item/datta-able-react-free-admin-template/)      | [**Pro**](https://codedthemes.com/item/datta-able-react-admin-template/)</span>       |
+| <img src="https://org-public-assets.s3.us-west-2.amazonaws.com/logos/Gradient%20with%20name.png" height="30" style="display:inline-block; vertical-align:middle;"> | [**Free**](https://codedthemes.com/item/gradient-able-reactjs-free-admin-template/) | [**Pro**](https://codedthemes.com/item/gradient-able-reactjs-admin-dashboard/)</span> |
+
+## Issues
+
+To report a bug, please submit an [issue](https://github.com/codedthemes/berry-free-react-admin-template/issues) on Github. We will respond as soon as possible to resolve the issue.
+
+## License
+
+- Licensed cover under [MIT](https://github.com/codedthemes/berry-free-react-admin-template/blob/main/LICENSE)
+
+## Contributor
+
+**CodedThemes Team**
+
+- https://x.com/codedthemes
+- https://github.com/codedthemes
+
+**Rakesh Nakrani**
+
+- https://x.com/rakesh_nakrani
+
+**Brijesh Dobariya**
+
+- https://x.com/dobaria_brijesh
+
+## Useful Resources
+
+- [More Admin Templates From CodedThemes](https://codedthemes.com/item/category/admin-templates/)
+- [Freebies From CodedThemes](https://codedthemes.com/item/category/free-templates/)
+- [Big Bundles](https://codedthemes.com/item/big-bundle/)
+- [Figma UI Kits](https://codedthemes.com/item/category/templates/figma/)
+- [Affiliate Program](https://codedthemes.com/affiliate/)
+- [Blogs](https://blog.codedthemes.com/)
+
+## Community
+
+- 👥Follow [@codedthemes](https://x.com/codedthemes)
+- 🔗Join [Discord](https://discord.com/invite/p2E2WhCb6s)
+- 🔔Subscribe to [Codedtheme Blogs](https://blog.codedthemes.com/)
+
+## Follow us
+
+- [Twitter](https://twitter.com/codedthemes) 🐦
+- [Dribbble](https://dribbble.com/codedthemes) 🏀
+- [Github](https://github.com/codedthemes) 🐙
+- [LinkedIn](https://www.linkedin.com/company/codedthemes/) 💼
+- [Instagram](https://www.instagram.com/codedthemes/) 📷
+- [Facebook](https://www.facebook.com/codedthemes) 🟦

remix/.eslintrc

@@ -0,0 +1,56 @@
+{
+    "root": true,
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": ["prettier", "plugin:react/jsx-runtime", "plugin:jsx-a11y/recommended", "plugin:react-hooks/recommended"],
+    "settings": {
+        "import/resolver": {
+            "node": {
+                "moduleDirectory": ["node_modules", "src/"]
+            }
+        }
+    },
+    "parser": "@babel/eslint-parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true,
+            "impliedStrict": true
+        },
+        "ecmaVersion": 12
+    },
+    "plugins": ["prettier", "react", "react-hooks"],
+    "rules": {
+        "react/jsx-filename-extension": 0,
+        "no-param-reassign": 0,
+        "react/prop-types": 1,
+        "react/require-default-props": 0,
+        "react/no-array-index-key": 0,
+        "react/jsx-props-no-spreading": 0,
+        "react/forbid-prop-types": 0,
+        "import/order": 0,
+        "no-console": 0,
+        "jsx-a11y/anchor-is-valid": 0,
+        "prefer-destructuring": 0,
+        "no-shadow": 0,
+        "no-unused-vars": [
+            1,
+            {
+                "ignoreRestSiblings": false
+            }
+        ],
+        "prettier/prettier": [
+            2,
+            {
+                "bracketSpacing": true,
+                "printWidth": 140,
+                "singleQuote": true,
+                "trailingComma": "none",
+                "tabWidth": 4,
+                "useTabs": false,
+                "endOfLine": "auto"
+            }
+        ]
+    }
+}

remix/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env

remix/.prettierrc

@@ -0,0 +1,8 @@
+{
+    "bracketSpacing": true,
+    "printWidth": 140,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "tabWidth": 4,
+    "useTabs": false
+}

remix/README.md

@@ -0,0 +1,57 @@
+# Welcome to Remix!
+
+- [Remix Docs](https://remix.run/docs)
+
+## Development
+
+From your terminal:
+
+```sh
+npm install
+```
+
+```sh
+npm run dev
+```
+
+This starts your app in development mode, rebuilding assets on file changes.
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
+
+Make sure to deploy the output of `remix build`
+
+- `build/`
+- `public/build/`
+
+### Using a Template
+
+When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
+
+```sh
+cd ..
+# create a new project, and pick a pre-configured host
+npx create-remix@latest
+cd my-new-remix-app
+# remove the new project's app (not the old one!)
+rm -rf app
+# copy your app over
+cp -R ../my-old-remix-app/app app
+```

remix/app/components/authentication/AuthCardWrapper.js

@@ -0,0 +1,33 @@
+// material-ui
+import { Box } from '@mui/material';
+
+// project import
+import MainCard from 'ui-component/cards/MainCard';
+
+//types
+import PropTypes from 'prop-types';
+
+// ==============================|| AUTHENTICATION CARD WRAPPER ||============================== //
+
+const AuthCardWrapper = ({ children, ...other }) => (
+    <MainCard
+        sx={{
+            maxWidth: { xs: 400, lg: 475 },
+            margin: { xs: 2.5, md: 3 },
+            '& > *': {
+                flexGrow: 1,
+                flexBasis: '50%'
+            }
+        }}
+        content={false}
+        {...other}
+    >
+        <Box sx={{ p: { xs: 2, sm: 3, xl: 5 } }}>{children}</Box>
+    </MainCard>
+);
+
+AuthCardWrapper.propTypes = {
+    children: PropTypes.node
+};
+
+export default AuthCardWrapper;

remix/app/components/authentication/AuthWrapper1.js

@@ -0,0 +1,11 @@
+// material-ui
+import { styled } from '@mui/material/styles';
+
+// ==============================|| AUTHENTICATION 1 WRAPPER ||============================== //
+
+const AuthWrapper1 = styled('div')(({ theme }) => ({
+    backgroundColor: theme.palette.primary.light,
+    minHeight: '100vh'
+}));
+
+export default AuthWrapper1;

remix/app/components/authentication/auth-forms/AuthLogin.js

@@ -0,0 +1,247 @@
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import {
+    Box,
+    Button,
+    Checkbox,
+    Divider,
+    FormControl,
+    FormControlLabel,
+    FormHelperText,
+    Grid,
+    IconButton,
+    InputAdornment,
+    InputLabel,
+    OutlinedInput,
+    Stack,
+    Typography,
+    useMediaQuery
+} from '@mui/material';
+
+// third party
+import * as Yup from 'yup';
+import { Formik } from 'formik';
+
+// project imports
+import useScriptRef from 'hooks/useScriptRef';
+import AnimateButton from 'ui-component/extended/AnimateButton';
+
+// assets
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+
+import Google from 'assets/images/icons/social-google.svg';
+
+// ============================|| FIREBASE - LOGIN ||============================ //
+
+const FirebaseLogin = ({ ...others }) => {
+    const theme = useTheme();
+    const scriptedRef = useScriptRef();
+    const matchDownSM = useMediaQuery(theme.breakpoints.down('md'));
+    const customization = useSelector((state) => state.customization);
+    const [checked, setChecked] = useState(true);
+
+    const googleHandler = async () => {
+        console.error('Login');
+    };
+
+    const [showPassword, setShowPassword] = useState(false);
+    const handleClickShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    const handleMouseDownPassword = (event) => {
+        event.preventDefault();
+    };
+
+    return (
+        <>
+            <Grid container direction="column" justifyContent="center" spacing={2}>
+                <Grid item xs={12}>
+                    <AnimateButton>
+                        <Button
+                            disableElevation
+                            fullWidth
+                            onClick={googleHandler}
+                            size="large"
+                            variant="outlined"
+                            sx={{
+                                color: 'grey.700',
+                                backgroundColor: theme.palette.grey[50],
+                                borderColor: theme.palette.grey[100]
+                            }}
+                        >
+                            <Box sx={{ mr: { xs: 1, sm: 2, width: 20 } }}>
+                                <img src={Google} alt="google" width={16} height={16} style={{ marginRight: matchDownSM ? 8 : 16 }} />
+                            </Box>
+                            Sign in with Google
+                        </Button>
+                    </AnimateButton>
+                </Grid>
+                <Grid item xs={12}>
+                    <Box
+                        sx={{
+                            alignItems: 'center',
+                            display: 'flex'
+                        }}
+                    >
+                        <Divider sx={{ flexGrow: 1 }} orientation="horizontal" />
+
+                        <Button
+                            variant="outlined"
+                            sx={{
+                                cursor: 'unset',
+                                m: 2,
+                                py: 0.5,
+                                px: 7,
+                                borderColor: `${theme.palette.grey[100]} !important`,
+                                color: `${theme.palette.grey[900]}!important`,
+                                fontWeight: 500,
+                                borderRadius: `${customization.borderRadius}px`
+                            }}
+                            disableRipple
+                            disabled
+                        >
+                            OR
+                        </Button>
+
+                        <Divider sx={{ flexGrow: 1 }} orientation="horizontal" />
+                    </Box>
+                </Grid>
+                <Grid item xs={12} container alignItems="center" justifyContent="center">
+                    <Box sx={{ mb: 2 }}>
+                        <Typography variant="subtitle1">Sign in with Email address</Typography>
+                    </Box>
+                </Grid>
+            </Grid>
+
+            <Formik
+                initialValues={{
+                    email: 'info@codedthemes.com',
+                    password: '123456',
+                    submit: null
+                }}
+                validationSchema={Yup.object().shape({
+                    email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
+                    password: Yup.string().max(255).required('Password is required')
+                })}
+                onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
+                    try {
+                        if (scriptedRef.current) {
+                            setStatus({ success: true });
+                            setSubmitting(false);
+                        }
+                    } catch (err) {
+                        console.error(err);
+                        if (scriptedRef.current) {
+                            setStatus({ success: false });
+                            setErrors({ submit: err.message });
+                            setSubmitting(false);
+                        }
+                    }
+                }}
+            >
+                {({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => (
+                    <form noValidate onSubmit={handleSubmit} {...others}>
+                        <FormControl fullWidth error={Boolean(touched.email && errors.email)} sx={{ ...theme.typography.customInput }}>
+                            <InputLabel htmlFor="outlined-adornment-email-login">Email Address / Username</InputLabel>
+                            <OutlinedInput
+                                id="outlined-adornment-email-login"
+                                type="email"
+                                value={values.email}
+                                name="email"
+                                onBlur={handleBlur}
+                                onChange={handleChange}
+                                label="Email Address / Username"
+                                inputProps={{}}
+                            />
+                            {touched.email && errors.email && (
+                                <FormHelperText error id="standard-weight-helper-text-email-login">
+                                    {errors.email}
+                                </FormHelperText>
+                            )}
+                        </FormControl>
+
+                        <FormControl
+                            fullWidth
+                            error={Boolean(touched.password && errors.password)}
+                            sx={{ ...theme.typography.customInput }}
+                        >
+                            <InputLabel htmlFor="outlined-adornment-password-login">Password</InputLabel>
+                            <OutlinedInput
+                                id="outlined-adornment-password-login"
+                                type={showPassword ? 'text' : 'password'}
+                                value={values.password}
+                                name="password"
+                                onBlur={handleBlur}
+                                onChange={handleChange}
+                                endAdornment={
+                                    <InputAdornment position="end">
+                                        <IconButton
+                                            aria-label="toggle password visibility"
+                                            onClick={handleClickShowPassword}
+                                            onMouseDown={handleMouseDownPassword}
+                                            edge="end"
+                                            size="large"
+                                        >
+                                            {showPassword ? <Visibility /> : <VisibilityOff />}
+                                        </IconButton>
+                                    </InputAdornment>
+                                }
+                                label="Password"
+                                inputProps={{}}
+                            />
+                            {touched.password && errors.password && (
+                                <FormHelperText error id="standard-weight-helper-text-password-login">
+                                    {errors.password}
+                                </FormHelperText>
+                            )}
+                        </FormControl>
+                        <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1}>
+                            <FormControlLabel
+                                control={
+                                    <Checkbox
+                                        checked={checked}
+                                        onChange={(event) => setChecked(event.target.checked)}
+                                        name="checked"
+                                        color="primary"
+                                    />
+                                }
+                                label="Remember me"
+                            />
+                            <Typography variant="subtitle1" color="secondary" sx={{ textDecoration: 'none', cursor: 'pointer' }}>
+                                Forgot Password?
+                            </Typography>
+                        </Stack>
+                        {errors.submit && (
+                            <Box sx={{ mt: 3 }}>
+                                <FormHelperText error>{errors.submit}</FormHelperText>
+                            </Box>
+                        )}
+
+                        <Box sx={{ mt: 2 }}>
+                            <AnimateButton>
+                                <Button
+                                    disableElevation
+                                    disabled={isSubmitting}
+                                    fullWidth
+                                    size="large"
+                                    type="submit"
+                                    variant="contained"
+                                    color="secondary"
+                                >
+                                    Sign in
+                                </Button>
+                            </AnimateButton>
+                        </Box>
+                    </form>
+                )}
+            </Formik>
+        </>
+    );
+};
+
+export default FirebaseLogin;

remix/app/components/authentication/auth-forms/AuthRegister.js

@@ -0,0 +1,306 @@
+import { Link } from '@remix-run/react';
+import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import {
+    Box,
+    Button,
+    Checkbox,
+    Divider,
+    FormControl,
+    FormControlLabel,
+    FormHelperText,
+    Grid,
+    IconButton,
+    InputAdornment,
+    InputLabel,
+    OutlinedInput,
+    TextField,
+    Typography,
+    useMediaQuery
+} from '@mui/material';
+
+// third party
+import * as Yup from 'yup';
+import { Formik } from 'formik';
+
+// project imports
+import useScriptRef from 'hooks/useScriptRef';
+import Google from 'assets/images/icons/social-google.svg';
+import AnimateButton from 'ui-component/extended/AnimateButton';
+import { strengthColor, strengthIndicator } from 'utils/password-strength';
+
+// assets
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+
+// ===========================|| FIREBASE - REGISTER ||=========================== //
+
+const FirebaseRegister = ({ ...others }) => {
+    const theme = useTheme();
+    const scriptedRef = useScriptRef();
+    const matchDownSM = useMediaQuery(theme.breakpoints.down('md'));
+    const customization = useSelector((state) => state.customization);
+    const [showPassword, setShowPassword] = useState(false);
+    const [checked, setChecked] = useState(true);
+
+    const [strength, setStrength] = useState(0);
+    const [level, setLevel] = useState();
+
+    const googleHandler = async () => {
+        console.error('Register');
+    };
+
+    const handleClickShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    const handleMouseDownPassword = (event) => {
+        event.preventDefault();
+    };
+
+    const changePassword = (value) => {
+        const temp = strengthIndicator(value);
+        setStrength(temp);
+        setLevel(strengthColor(temp));
+    };
+
+    useEffect(() => {
+        changePassword('123456');
+    }, []);
+
+    return (
+        <>
+            <Grid container direction="column" justifyContent="center" spacing={2}>
+                <Grid item xs={12}>
+                    <AnimateButton>
+                        <Button
+                            variant="outlined"
+                            fullWidth
+                            onClick={googleHandler}
+                            size="large"
+                            sx={{
+                                color: 'grey.700',
+                                backgroundColor: theme.palette.grey[50],
+                                borderColor: theme.palette.grey[100]
+                            }}
+                        >
+                            <Box sx={{ mr: { xs: 1, sm: 2, width: 20 } }}>
+                                <img src={Google} alt="google" width={16} height={16} style={{ marginRight: matchDownSM ? 8 : 16 }} />
+                            </Box>
+                            Sign up with Google
+                        </Button>
+                    </AnimateButton>
+                </Grid>
+                <Grid item xs={12}>
+                    <Box sx={{ alignItems: 'center', display: 'flex' }}>
+                        <Divider sx={{ flexGrow: 1 }} orientation="horizontal" />
+                        <Button
+                            variant="outlined"
+                            sx={{
+                                cursor: 'unset',
+                                m: 2,
+                                py: 0.5,
+                                px: 7,
+                                borderColor: `${theme.palette.grey[100]} !important`,
+                                color: `${theme.palette.grey[900]}!important`,
+                                fontWeight: 500,
+                                borderRadius: `${customization.borderRadius}px`
+                            }}
+                            disableRipple
+                            disabled
+                        >
+                            OR
+                        </Button>
+                        <Divider sx={{ flexGrow: 1 }} orientation="horizontal" />
+                    </Box>
+                </Grid>
+                <Grid item xs={12} container alignItems="center" justifyContent="center">
+                    <Box sx={{ mb: 2 }}>
+                        <Typography variant="subtitle1">Sign up with Email address</Typography>
+                    </Box>
+                </Grid>
+            </Grid>
+
+            <Formik
+                initialValues={{
+                    email: '',
+                    password: '',
+                    submit: null
+                }}
+                validationSchema={Yup.object().shape({
+                    email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
+                    password: Yup.string().max(255).required('Password is required')
+                })}
+                onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
+                    try {
+                        if (scriptedRef.current) {
+                            setStatus({ success: true });
+                            setSubmitting(false);
+                        }
+                    } catch (err) {
+                        console.error(err);
+                        if (scriptedRef.current) {
+                            setStatus({ success: false });
+                            setErrors({ submit: err.message });
+                            setSubmitting(false);
+                        }
+                    }
+                }}
+            >
+                {({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => (
+                    <form noValidate onSubmit={handleSubmit} {...others}>
+                        <Grid container spacing={matchDownSM ? 0 : 2}>
+                            <Grid item xs={12} sm={6}>
+                                <TextField
+                                    fullWidth
+                                    label="First Name"
+                                    margin="normal"
+                                    name="fname"
+                                    type="text"
+                                    defaultValue=""
+                                    sx={{ ...theme.typography.customInput }}
+                                />
+                            </Grid>
+                            <Grid item xs={12} sm={6}>
+                                <TextField
+                                    fullWidth
+                                    label="Last Name"
+                                    margin="normal"
+                                    name="lname"
+                                    type="text"
+                                    defaultValue=""
+                                    sx={{ ...theme.typography.customInput }}
+                                />
+                            </Grid>
+                        </Grid>
+                        <FormControl fullWidth error={Boolean(touched.email && errors.email)} sx={{ ...theme.typography.customInput }}>
+                            <InputLabel htmlFor="outlined-adornment-email-register">Email Address / Username</InputLabel>
+                            <OutlinedInput
+                                id="outlined-adornment-email-register"
+                                type="email"
+                                value={values.email}
+                                name="email"
+                                onBlur={handleBlur}
+                                onChange={handleChange}
+                                inputProps={{}}
+                            />
+                            {touched.email && errors.email && (
+                                <FormHelperText error id="standard-weight-helper-text--register">
+                                    {errors.email}
+                                </FormHelperText>
+                            )}
+                        </FormControl>
+
+                        <FormControl
+                            fullWidth
+                            error={Boolean(touched.password && errors.password)}
+                            sx={{ ...theme.typography.customInput }}
+                        >
+                            <InputLabel htmlFor="outlined-adornment-password-register">Password</InputLabel>
+                            <OutlinedInput
+                                id="outlined-adornment-password-register"
+                                type={showPassword ? 'text' : 'password'}
+                                value={values.password}
+                                name="password"
+                                label="Password"
+                                onBlur={handleBlur}
+                                onChange={(e) => {
+                                    handleChange(e);
+                                    changePassword(e.target.value);
+                                }}
+                                endAdornment={
+                                    <InputAdornment position="end">
+                                        <IconButton
+                                            aria-label="toggle password visibility"
+                                            onClick={handleClickShowPassword}
+                                            onMouseDown={handleMouseDownPassword}
+                                            edge="end"
+                                            size="large"
+                                        >
+                                            {showPassword ? <Visibility /> : <VisibilityOff />}
+                                        </IconButton>
+                                    </InputAdornment>
+                                }
+                                inputProps={{}}
+                            />
+                            {touched.password && errors.password && (
+                                <FormHelperText error id="standard-weight-helper-text-password-register">
+                                    {errors.password}
+                                </FormHelperText>
+                            )}
+                        </FormControl>
+
+                        {strength !== 0 && (
+                            <FormControl fullWidth>
+                                <Box sx={{ mb: 2 }}>
+                                    <Grid container spacing={2} alignItems="center">
+                                        <Grid item>
+                                            <Box
+                                                style={{ backgroundColor: level?.color }}
+                                                sx={{ width: 85, height: 8, borderRadius: '7px' }}
+                                            />
+                                        </Grid>
+                                        <Grid item>
+                                            <Typography variant="subtitle1" fontSize="0.75rem">
+                                                {level?.label}
+                                            </Typography>
+                                        </Grid>
+                                    </Grid>
+                                </Box>
+                            </FormControl>
+                        )}
+
+                        <Grid container alignItems="center" justifyContent="space-between">
+                            <Grid item>
+                                <FormControlLabel
+                                    control={
+                                        <Checkbox
+                                            checked={checked}
+                                            onChange={(event) => setChecked(event.target.checked)}
+                                            name="checked"
+                                            color="primary"
+                                        />
+                                    }
+                                    label={
+                                        <Typography variant="subtitle1">
+                                            Agree with &nbsp;
+                                            <Typography variant="subtitle1" component={Link} to="#">
+                                                Terms & Condition.
+                                            </Typography>
+                                        </Typography>
+                                    }
+                                />
+                            </Grid>
+                        </Grid>
+                        {errors.submit && (
+                            <Box sx={{ mt: 3 }}>
+                                <FormHelperText error>{errors.submit}</FormHelperText>
+                            </Box>
+                        )}
+
+                        <Box sx={{ mt: 2 }}>
+                            <AnimateButton>
+                                <Button
+                                    disableElevation
+                                    disabled={isSubmitting}
+                                    fullWidth
+                                    size="large"
+                                    type="submit"
+                                    variant="contained"
+                                    color="secondary"
+                                >
+                                    Sign up
+                                </Button>
+                            </AnimateButton>
+                        </Box>
+                    </form>
+                )}
+            </Formik>
+        </>
+    );
+};
+
+export default FirebaseRegister;

remix/app/components/dashboard/BajajAreaChartCard.client.js

@@ -0,0 +1,63 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Card, Grid, Typography } from '@mui/material';
+
+// project imports
+import chartData from './chart-data/bajaj-area-chart';
+
+// third-party
+import ApexCharts from 'apexcharts';
+import Chart from 'react-apexcharts';
+
+// ===========================|| DASHBOARD DEFAULT - BAJAJ AREA CHART CARD ||=========================== //
+
+const BajajAreaChartCard = () => {
+    const theme = useTheme();
+    const customization = useSelector((state) => state.customization);
+    const { navType } = customization;
+
+    const orangeDark = theme.palette.secondary[800];
+
+    useEffect(() => {
+        const newSupportChart = {
+            ...chartData.options,
+            colors: [orangeDark],
+            tooltip: {
+                theme: 'light'
+            }
+        };
+        ApexCharts.exec(`support-chart`, 'updateOptions', newSupportChart);
+    }, [navType, orangeDark]);
+
+    return (
+        <Card sx={{ bgcolor: 'secondary.light' }}>
+            <Grid container sx={{ p: 2, pb: 0, color: '#fff' }}>
+                <Grid item xs={12}>
+                    <Grid container alignItems="center" justifyContent="space-between">
+                        <Grid item>
+                            <Typography variant="subtitle1" sx={{ color: theme.palette.secondary.dark }}>
+                                Bajaj Finery
+                            </Typography>
+                        </Grid>
+                        <Grid item>
+                            <Typography variant="h4" sx={{ color: theme.palette.grey[800] }}>
+                                $1839.00
+                            </Typography>
+                        </Grid>
+                    </Grid>
+                </Grid>
+                <Grid item xs={12}>
+                    <Typography variant="subtitle2" sx={{ color: theme.palette.grey[800] }}>
+                        10% Profit
+                    </Typography>
+                </Grid>
+            </Grid>
+            <Chart {...chartData} />
+        </Card>
+    );
+};
+
+export default BajajAreaChartCard;

remix/app/components/dashboard/EarningCard.js

@@ -0,0 +1,189 @@
+import { useState } from 'react';
+
+// material-ui
+import { styled, useTheme } from '@mui/material/styles';
+import { Avatar, Box, Grid, Menu, MenuItem, Typography } from '@mui/material';
+
+// project imports
+import MainCard from 'ui-component/cards/MainCard';
+import SkeletonEarningCard from 'ui-component/cards/Skeleton/EarningCard';
+
+// types
+import PropTypes from 'prop-types';
+
+// assets
+import EarningIcon from 'assets/images/icons/earning.svg';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import GetAppTwoToneIcon from '@mui/icons-material/GetAppOutlined';
+import FileCopyTwoToneIcon from '@mui/icons-material/FileCopyOutlined';
+import PictureAsPdfTwoToneIcon from '@mui/icons-material/PictureAsPdfOutlined';
+import ArchiveTwoToneIcon from '@mui/icons-material/ArchiveOutlined';
+
+const CardWrapper = styled(MainCard)(({ theme }) => ({
+    backgroundColor: theme.palette.secondary.dark,
+    color: '#fff',
+    overflow: 'hidden',
+    position: 'relative',
+    '&:after': {
+        content: '""',
+        position: 'absolute',
+        width: 210,
+        height: 210,
+        background: theme.palette.secondary[800],
+        borderRadius: '50%',
+        top: -85,
+        right: -95,
+        [theme.breakpoints.down('sm')]: {
+            top: -105,
+            right: -140
+        }
+    },
+    '&:before': {
+        content: '""',
+        position: 'absolute',
+        width: 210,
+        height: 210,
+        background: theme.palette.secondary[800],
+        borderRadius: '50%',
+        top: -125,
+        right: -15,
+        opacity: 0.5,
+        [theme.breakpoints.down('sm')]: {
+            top: -155,
+            right: -70
+        }
+    }
+}));
+
+// ===========================|| DASHBOARD DEFAULT - EARNING CARD ||=========================== //
+
+const EarningCard = ({ isLoading }) => {
+    const theme = useTheme();
+
+    const [anchorEl, setAnchorEl] = useState(null);
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <>
+            {isLoading ? (
+                <SkeletonEarningCard />
+            ) : (
+                <CardWrapper border={false} content={false}>
+                    <Box sx={{ p: 2.25 }}>
+                        <Grid container direction="column">
+                            <Grid item>
+                                <Grid container justifyContent="space-between">
+                                    <Grid item>
+                                        <Avatar
+                                            variant="rounded"
+                                            sx={{
+                                                ...theme.typography.commonAvatar,
+                                                ...theme.typography.largeAvatar,
+                                                backgroundColor: theme.palette.secondary[800],
+                                                mt: 1
+                                            }}
+                                        >
+                                            <img src={EarningIcon} alt="Notification" />
+                                        </Avatar>
+                                    </Grid>
+                                    <Grid item>
+                                        <Avatar
+                                            variant="rounded"
+                                            sx={{
+                                                ...theme.typography.commonAvatar,
+                                                ...theme.typography.mediumAvatar,
+                                                backgroundColor: theme.palette.secondary.dark,
+                                                color: theme.palette.secondary[200],
+                                                zIndex: 1
+                                            }}
+                                            aria-controls="menu-earning-card"
+                                            aria-haspopup="true"
+                                            onClick={handleClick}
+                                        >
+                                            <MoreHorizIcon fontSize="inherit" />
+                                        </Avatar>
+                                        <Menu
+                                            id="menu-earning-card"
+                                            anchorEl={anchorEl}
+                                            keepMounted
+                                            open={Boolean(anchorEl)}
+                                            onClose={handleClose}
+                                            variant="selectedMenu"
+                                            anchorOrigin={{
+                                                vertical: 'bottom',
+                                                horizontal: 'right'
+                                            }}
+                                            transformOrigin={{
+                                                vertical: 'top',
+                                                horizontal: 'right'
+                                            }}
+                                        >
+                                            <MenuItem onClick={handleClose}>
+                                                <GetAppTwoToneIcon sx={{ mr: 1.75 }} /> Import Card
+                                            </MenuItem>
+                                            <MenuItem onClick={handleClose}>
+                                                <FileCopyTwoToneIcon sx={{ mr: 1.75 }} /> Copy Data
+                                            </MenuItem>
+                                            <MenuItem onClick={handleClose}>
+                                                <PictureAsPdfTwoToneIcon sx={{ mr: 1.75 }} /> Export
+                                            </MenuItem>
+                                            <MenuItem onClick={handleClose}>
+                                                <ArchiveTwoToneIcon sx={{ mr: 1.75 }} /> Archive File
+                                            </MenuItem>
+                                        </Menu>
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+                            <Grid item>
+                                <Grid container alignItems="center">
+                                    <Grid item>
+                                        <Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}>
+                                            $500.00
+                                        </Typography>
+                                    </Grid>
+                                    <Grid item>
+                                        <Avatar
+                                            sx={{
+                                                cursor: 'pointer',
+                                                ...theme.typography.smallAvatar,
+                                                backgroundColor: theme.palette.secondary[200],
+                                                color: theme.palette.secondary.dark
+                                            }}
+                                        >
+                                            <ArrowUpwardIcon fontSize="inherit" sx={{ transform: 'rotate3d(1, 1, 1, 45deg)' }} />
+                                        </Avatar>
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+                            <Grid item sx={{ mb: 1.25 }}>
+                                <Typography
+                                    sx={{
+                                        fontSize: '1rem',
+                                        fontWeight: 500,
+                                        color: theme.palette.secondary[200]
+                                    }}
+                                >
+                                    Total Earning
+                                </Typography>
+                            </Grid>
+                        </Grid>
+                    </Box>
+                </CardWrapper>
+            )}
+        </>
+    );
+};
+
+EarningCard.propTypes = {
+    isLoading: PropTypes.bool
+};
+
+export default EarningCard;

remix/app/components/dashboard/PopularCard.js

@@ -0,0 +1,311 @@
+import { useState } from 'react';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Avatar, Button, CardActions, CardContent, Divider, Grid, Menu, MenuItem, Typography } from '@mui/material';
+
+// project imports
+import { gridSpacing } from 'store/constant';
+import MainCard from 'ui-component/cards/MainCard';
+import SkeletonPopularCard from 'ui-component/cards/Skeleton/PopularCard';
+import BajajAreaChartCard from './BajajAreaChartCard.client';
+
+// types
+import PropTypes from 'prop-types';
+
+// assets
+import ChevronRightOutlinedIcon from '@mui/icons-material/ChevronRightOutlined';
+import MoreHorizOutlinedIcon from '@mui/icons-material/MoreHorizOutlined';
+import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';
+import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
+
+// ==============================|| DASHBOARD DEFAULT - POPULAR CARD ||============================== //
+
+const PopularCard = ({ isLoading }) => {
+    const theme = useTheme();
+
+    const [anchorEl, setAnchorEl] = useState(null);
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <>
+            {isLoading ? (
+                <SkeletonPopularCard />
+            ) : (
+                <MainCard content={false}>
+                    <CardContent>
+                        <Grid container spacing={gridSpacing}>
+                            <Grid item xs={12}>
+                                <Grid container alignContent="center" justifyContent="space-between">
+                                    <Grid item>
+                                        <Typography variant="h4">Popular Stocks</Typography>
+                                    </Grid>
+                                    <Grid item>
+                                        <MoreHorizOutlinedIcon
+                                            fontSize="small"
+                                            sx={{
+                                                color: theme.palette.primary[200],
+                                                cursor: 'pointer'
+                                            }}
+                                            aria-controls="menu-popular-card"
+                                            aria-haspopup="true"
+                                            onClick={handleClick}
+                                        />
+                                        <Menu
+                                            id="menu-popular-card"
+                                            anchorEl={anchorEl}
+                                            keepMounted
+                                            open={Boolean(anchorEl)}
+                                            onClose={handleClose}
+                                            variant="selectedMenu"
+                                            anchorOrigin={{
+                                                vertical: 'bottom',
+                                                horizontal: 'right'
+                                            }}
+                                            transformOrigin={{
+                                                vertical: 'top',
+                                                horizontal: 'right'
+                                            }}
+                                        >
+                                            <MenuItem onClick={handleClose}> Today</MenuItem>
+                                            <MenuItem onClick={handleClose}> This Month</MenuItem>
+                                            <MenuItem onClick={handleClose}> This Year </MenuItem>
+                                        </Menu>
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+                            <Grid item xs={12} sx={{ pt: '16px !important' }}>
+                                <BajajAreaChartCard />
+                            </Grid>
+                            <Grid item xs={12}>
+                                <Grid container direction="column">
+                                    <Grid item>
+                                        <Grid container alignItems="center" justifyContent="space-between">
+                                            <Grid item>
+                                                <Typography variant="subtitle1" color="inherit">
+                                                    Bajaj Finery
+                                                </Typography>
+                                            </Grid>
+                                            <Grid item>
+                                                <Grid container alignItems="center" justifyContent="space-between">
+                                                    <Grid item>
+                                                        <Typography variant="subtitle1" color="inherit">
+                                                            $1839.00
+                                                        </Typography>
+                                                    </Grid>
+                                                    <Grid item>
+                                                        <Avatar
+                                                            variant="rounded"
+                                                            sx={{
+                                                                width: 16,
+                                                                height: 16,
+                                                                borderRadius: '5px',
+                                                                backgroundColor: theme.palette.success.light,
+                                                                color: theme.palette.success.dark,
+                                                                ml: 2
+                                                            }}
+                                                        >
+                                                            <KeyboardArrowUpOutlinedIcon fontSize="small" color="inherit" />
+                                                        </Avatar>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                    <Grid item>
+                                        <Typography variant="subtitle2" sx={{ color: 'success.dark' }}>
+                                            10% Profit
+                                        </Typography>
+                                    </Grid>
+                                </Grid>
+                                <Divider sx={{ my: 1.5 }} />
+                                <Grid container direction="column">
+                                    <Grid item>
+                                        <Grid container alignItems="center" justifyContent="space-between">
+                                            <Grid item>
+                                                <Typography variant="subtitle1" color="inherit">
+                                                    TTML
+                                                </Typography>
+                                            </Grid>
+                                            <Grid item>
+                                                <Grid container alignItems="center" justifyContent="space-between">
+                                                    <Grid item>
+                                                        <Typography variant="subtitle1" color="inherit">
+                                                            $100.00
+                                                        </Typography>
+                                                    </Grid>
+                                                    <Grid item>
+                                                        <Avatar
+                                                            variant="rounded"
+                                                            sx={{
+                                                                width: 16,
+                                                                height: 16,
+                                                                borderRadius: '5px',
+                                                                backgroundColor: theme.palette.orange.light,
+                                                                color: theme.palette.orange.dark,
+                                                                marginLeft: 1.875
+                                                            }}
+                                                        >
+                                                            <KeyboardArrowDownOutlinedIcon fontSize="small" color="inherit" />
+                                                        </Avatar>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                    <Grid item>
+                                        <Typography variant="subtitle2" sx={{ color: theme.palette.orange.dark }}>
+                                            10% loss
+                                        </Typography>
+                                    </Grid>
+                                </Grid>
+                                <Divider sx={{ my: 1.5 }} />
+                                <Grid container direction="column">
+                                    <Grid item>
+                                        <Grid container alignItems="center" justifyContent="space-between">
+                                            <Grid item>
+                                                <Typography variant="subtitle1" color="inherit">
+                                                    Reliance
+                                                </Typography>
+                                            </Grid>
+                                            <Grid item>
+                                                <Grid container alignItems="center" justifyContent="space-between">
+                                                    <Grid item>
+                                                        <Typography variant="subtitle1" color="inherit">
+                                                            $200.00
+                                                        </Typography>
+                                                    </Grid>
+                                                    <Grid item>
+                                                        <Avatar
+                                                            variant="rounded"
+                                                            sx={{
+                                                                width: 16,
+                                                                height: 16,
+                                                                borderRadius: '5px',
+                                                                backgroundColor: theme.palette.success.light,
+                                                                color: theme.palette.success.dark,
+                                                                ml: 2
+                                                            }}
+                                                        >
+                                                            <KeyboardArrowUpOutlinedIcon fontSize="small" color="inherit" />
+                                                        </Avatar>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                    <Grid item>
+                                        <Typography variant="subtitle2" sx={{ color: theme.palette.success.dark }}>
+                                            10% Profit
+                                        </Typography>
+                                    </Grid>
+                                </Grid>
+                                <Divider sx={{ my: 1.5 }} />
+                                <Grid container direction="column">
+                                    <Grid item>
+                                        <Grid container alignItems="center" justifyContent="space-between">
+                                            <Grid item>
+                                                <Typography variant="subtitle1" color="inherit">
+                                                    TTML
+                                                </Typography>
+                                            </Grid>
+                                            <Grid item>
+                                                <Grid container alignItems="center" justifyContent="space-between">
+                                                    <Grid item>
+                                                        <Typography variant="subtitle1" color="inherit">
+                                                            $189.00
+                                                        </Typography>
+                                                    </Grid>
+                                                    <Grid item>
+                                                        <Avatar
+                                                            variant="rounded"
+                                                            sx={{
+                                                                width: 16,
+                                                                height: 16,
+                                                                borderRadius: '5px',
+                                                                backgroundColor: theme.palette.orange.light,
+                                                                color: theme.palette.orange.dark,
+                                                                ml: 2
+                                                            }}
+                                                        >
+                                                            <KeyboardArrowDownOutlinedIcon fontSize="small" color="inherit" />
+                                                        </Avatar>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                    <Grid item>
+                                        <Typography variant="subtitle2" sx={{ color: theme.palette.orange.dark }}>
+                                            10% loss
+                                        </Typography>
+                                    </Grid>
+                                </Grid>
+                                <Divider sx={{ my: 1.5 }} />
+                                <Grid container direction="column">
+                                    <Grid item>
+                                        <Grid container alignItems="center" justifyContent="space-between">
+                                            <Grid item>
+                                                <Typography variant="subtitle1" color="inherit">
+                                                    Stolon
+                                                </Typography>
+                                            </Grid>
+                                            <Grid item>
+                                                <Grid container alignItems="center" justifyContent="space-between">
+                                                    <Grid item>
+                                                        <Typography variant="subtitle1" color="inherit">
+                                                            $189.00
+                                                        </Typography>
+                                                    </Grid>
+                                                    <Grid item>
+                                                        <Avatar
+                                                            variant="rounded"
+                                                            sx={{
+                                                                width: 16,
+                                                                height: 16,
+                                                                borderRadius: '5px',
+                                                                backgroundColor: theme.palette.orange.light,
+                                                                color: theme.palette.orange.dark,
+                                                                ml: 2
+                                                            }}
+                                                        >
+                                                            <KeyboardArrowDownOutlinedIcon fontSize="small" color="inherit" />
+                                                        </Avatar>
+                                                    </Grid>
+                                                </Grid>
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                    <Grid item>
+                                        <Typography variant="subtitle2" sx={{ color: theme.palette.orange.dark }}>
+                                            10% loss
+                                        </Typography>
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                    </CardContent>
+                    <CardActions sx={{ p: 1.25, pt: 0, justifyContent: 'center' }}>
+                        <Button size="small" disableElevation>
+                            View All
+                            <ChevronRightOutlinedIcon />
+                        </Button>
+                    </CardActions>
+                </MainCard>
+            )}
+        </>
+    );
+};
+
+PopularCard.propTypes = {
+    isLoading: PropTypes.bool
+};
+
+export default PopularCard;

remix/app/components/dashboard/TotalGrowthBarCard.js

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+
+// material-ui
+import { Grid, MenuItem, TextField, Typography } from '@mui/material';
+
+// project imports
+import { gridSpacing } from 'store/constant';
+import MainCard from 'ui-component/cards/MainCard';
+import SkeletonTotalGrowthBarChart from 'ui-component/cards/Skeleton/TotalGrowthBarChart';
+import TotalGrowthBarChart from './TotalGrowthBarChart.client';
+
+// types
+import PropTypes from 'prop-types';
+
+const status = [
+    {
+        value: 'today',
+        label: 'Today'
+    },
+    {
+        value: 'month',
+        label: 'This Month'
+    },
+    {
+        value: 'year',
+        label: 'This Year'
+    }
+];
+
+// ==============================|| DASHBOARD DEFAULT - TOTAL GROWTH BAR CHART CARD ||============================== //
+
+const TotalGrowthBarCard = ({ isLoading }) => {
+    const [value, setValue] = useState('today');
+
+    return (
+        <>
+            {isLoading ? (
+                <SkeletonTotalGrowthBarChart />
+            ) : (
+                <MainCard>
+                    <Grid container spacing={gridSpacing}>
+                        <Grid item xs={12}>
+                            <Grid container alignItems="center" justifyContent="space-between">
+                                <Grid item>
+                                    <Grid container direction="column" spacing={1}>
+                                        <Grid item>
+                                            <Typography variant="subtitle2">Total Growth</Typography>
+                                        </Grid>
+                                        <Grid item>
+                                            <Typography variant="h3">$2,324.00</Typography>
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+                                <Grid item>
+                                    <TextField
+                                        id="standard-select-currency"
+                                        select
+                                        value={value}
+                                        onChange={(e) => setValue(e.target.value)}
+                                    >
+                                        {status.map((option) => (
+                                            <MenuItem key={option.value} value={option.value}>
+                                                {option.label}
+                                            </MenuItem>
+                                        ))}
+                                    </TextField>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                        <Grid item xs={12}>
+                            <TotalGrowthBarChart isLoading={isLoading} />
+                        </Grid>
+                    </Grid>
+                </MainCard>
+            )}
+        </>
+    );
+};
+
+TotalGrowthBarCard.propTypes = {
+    isLoading: PropTypes.bool
+};
+
+export default TotalGrowthBarCard;

remix/app/components/dashboard/TotalGrowthBarChart.client.js

@@ -0,0 +1,82 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+
+// third-party
+import ApexCharts from 'apexcharts';
+import Chart from 'react-apexcharts';
+
+// chart data
+import chartData from './chart-data/total-growth-bar-chart';
+
+// types
+import PropTypes from 'prop-types';
+
+// ==============================|| DASHBOARD DEFAULT - TOTAL GROWTH BAR CHART ||============================== //
+
+const TotalGrowthBarChart = ({ isLoading }) => {
+    const theme = useTheme();
+    const customization = useSelector((state) => state.customization);
+
+    const { navType } = customization;
+    const { primary } = theme.palette.text;
+    const darkLight = theme.palette.dark.light;
+    const grey200 = theme.palette.grey[200];
+    const grey500 = theme.palette.grey[500];
+
+    const primary200 = theme.palette.primary[200];
+    const primaryDark = theme.palette.primary.dark;
+    const secondaryMain = theme.palette.secondary.main;
+    const secondaryLight = theme.palette.secondary.light;
+
+    useEffect(() => {
+        const newChartData = {
+            ...chartData.options,
+            colors: [primary200, primaryDark, secondaryMain, secondaryLight],
+            xaxis: {
+                labels: {
+                    style: {
+                        colors: [primary, primary, primary, primary, primary, primary, primary, primary, primary, primary, primary, primary]
+                    }
+                }
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        colors: [primary]
+                    }
+                }
+            },
+            grid: {
+                borderColor: grey200
+            },
+            tooltip: {
+                theme: 'light'
+            },
+            legend: {
+                labels: {
+                    colors: grey500
+                }
+            }
+        };
+
+        // do not load chart when loading
+        if (!isLoading) {
+            ApexCharts.exec(`bar-chart`, 'updateOptions', newChartData);
+        }
+    }, [navType, primary200, primaryDark, secondaryMain, secondaryLight, primary, darkLight, grey200, isLoading, grey500]);
+
+    return (
+        <>
+            <Chart {...chartData} />
+        </>
+    );
+};
+
+TotalGrowthBarChart.propTypes = {
+    isLoading: PropTypes.bool
+};
+
+export default TotalGrowthBarChart;

remix/app/components/dashboard/TotalIncomeDarkCard.js

@@ -0,0 +1,100 @@
+// material-ui
+import { styled, useTheme } from '@mui/material/styles';
+import { Avatar, Box, List, ListItem, ListItemAvatar, ListItemText, Typography } from '@mui/material';
+
+// project imports
+import MainCard from 'ui-component/cards/MainCard';
+import TotalIncomeCard from 'ui-component/cards/Skeleton/TotalIncomeCard';
+
+// assets
+import TableChartOutlinedIcon from '@mui/icons-material/TableChartOutlined';
+
+// types
+import PropTypes from 'prop-types';
+
+// styles
+const CardWrapper = styled(MainCard)(({ theme }) => ({
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.primary.light,
+    overflow: 'hidden',
+    position: 'relative',
+    '&:after': {
+        content: '""',
+        position: 'absolute',
+        width: 210,
+        height: 210,
+        background: `linear-gradient(210.04deg, ${theme.palette.primary[200]} -50.94%, rgba(144, 202, 249, 0) 83.49%)`,
+        borderRadius: '50%',
+        top: -30,
+        right: -180
+    },
+    '&:before': {
+        content: '""',
+        position: 'absolute',
+        width: 210,
+        height: 210,
+        background: `linear-gradient(140.9deg, ${theme.palette.primary[200]} -14.02%, rgba(144, 202, 249, 0) 77.58%)`,
+        borderRadius: '50%',
+        top: -160,
+        right: -130
+    }
+}));
+
+// ==============================|| DASHBOARD - TOTAL INCOME DARK CARD ||============================== //
+
+const TotalIncomeDarkCard = ({ isLoading }) => {
+    const theme = useTheme();
+
+    return (
+        <>
+            {isLoading ? (
+                <TotalIncomeCard />
+            ) : (
+                <CardWrapper border={false} content={false}>
+                    <Box sx={{ p: 2 }}>
+                        <List sx={{ py: 0 }}>
+                            <ListItem alignItems="center" disableGutters sx={{ py: 0 }}>
+                                <ListItemAvatar>
+                                    <Avatar
+                                        variant="rounded"
+                                        sx={{
+                                            ...theme.typography.commonAvatar,
+                                            ...theme.typography.largeAvatar,
+                                            backgroundColor: theme.palette.primary[800],
+                                            color: '#fff'
+                                        }}
+                                    >
+                                        <TableChartOutlinedIcon fontSize="inherit" />
+                                    </Avatar>
+                                </ListItemAvatar>
+                                <ListItemText
+                                    sx={{
+                                        py: 0,
+                                        mt: 0.45,
+                                        mb: 0.45
+                                    }}
+                                    primary={
+                                        <Typography variant="h4" sx={{ color: '#fff' }}>
+                                            $203k
+                                        </Typography>
+                                    }
+                                    secondary={
+                                        <Typography variant="subtitle2" sx={{ color: 'primary.light', mt: 0.25 }}>
+                                            Total Income
+                                        </Typography>
+                                    }
+                                />
+                            </ListItem>
+                        </List>
+                    </Box>
+                </CardWrapper>
+            )}
+        </>
+    );
+};
+
+TotalIncomeDarkCard.propTypes = {
+    isLoading: PropTypes.bool
+};
+
+export default TotalIncomeDarkCard;

remix/app/components/dashboard/TotalIncomeLightCard.js

@@ -0,0 +1,100 @@
+// material-ui
+import { useTheme, styled } from '@mui/material/styles';
+import { Avatar, Box, List, ListItem, ListItemAvatar, ListItemText, Typography } from '@mui/material';
+
+// project imports
+import MainCard from 'ui-component/cards/MainCard';
+import TotalIncomeCard from 'ui-component/cards/Skeleton/TotalIncomeCard';
+
+// assets
+import StorefrontTwoToneIcon from '@mui/icons-material/StorefrontTwoTone';
+
+// types
+import PropTypes from 'prop-types';
+
+// styles
+const CardWrapper = styled(MainCard)(({ theme }) => ({
+    overflow: 'hidden',
+    position: 'relative',
+    '&:after': {
+        content: '""',
+        position: 'absolute',
+        width: 210,
+        height: 210,
+        background: `linear-gradient(210.04deg, ${theme.palette.warning.dark} -50.94%, rgba(144, 202, 249, 0) 83.49%)`,
+        borderRadius: '50%',
+        top: -30,
+        right: -180
+    },
+    '&:before': {
+        content: '""',
+        position: 'absolute',
+        width: 210,
+        height: 210,
+        background: `linear-gradient(140.9deg, ${theme.palette.warning.dark} -14.02%, rgba(144, 202, 249, 0) 70.50%)`,
+        borderRadius: '50%',
+        top: -160,
+        right: -130
+    }
+}));
+
+// ==============================|| DASHBOARD - TOTAL INCOME LIGHT CARD ||============================== //
+
+const TotalIncomeLightCard = ({ isLoading }) => {
+    const theme = useTheme();
+
+    return (
+        <>
+            {isLoading ? (
+                <TotalIncomeCard />
+            ) : (
+                <CardWrapper border={false} content={false}>
+                    <Box sx={{ p: 2 }}>
+                        <List sx={{ py: 0 }}>
+                            <ListItem alignItems="center" disableGutters sx={{ py: 0 }}>
+                                <ListItemAvatar>
+                                    <Avatar
+                                        variant="rounded"
+                                        sx={{
+                                            ...theme.typography.commonAvatar,
+                                            ...theme.typography.largeAvatar,
+                                            backgroundColor: theme.palette.warning.light,
+                                            color: theme.palette.warning.dark
+                                        }}
+                                    >
+                                        <StorefrontTwoToneIcon fontSize="inherit" />
+                                    </Avatar>
+                                </ListItemAvatar>
+                                <ListItemText
+                                    sx={{
+                                        py: 0,
+                                        mt: 0.45,
+                                        mb: 0.45
+                                    }}
+                                    primary={<Typography variant="h4">$203k</Typography>}
+                                    secondary={
+                                        <Typography
+                                            variant="subtitle2"
+                                            sx={{
+                                                color: theme.palette.grey[500],
+                                                mt: 0.5
+                                            }}
+                                        >
+                                            Total Income
+                                        </Typography>
+                                    }
+                                />
+                            </ListItem>
+                        </List>
+                    </Box>
+                </CardWrapper>
+            )}
+        </>
+    );
+};
+
+TotalIncomeLightCard.propTypes = {
+    isLoading: PropTypes.bool
+};
+
+export default TotalIncomeLightCard;

remix/app/components/dashboard/TotalOrderLineCard.js

@@ -0,0 +1,190 @@
+import { useState } from 'react';
+
+// material-ui
+import { useTheme, styled } from '@mui/material/styles';
+import { Avatar, Box, Button, Grid, Typography } from '@mui/material';
+
+// project imports
+import MainCard from 'ui-component/cards/MainCard';
+import SkeletonTotalOrderCard from 'ui-component/cards/Skeleton/EarningCard';
+import TotalOrderLineChartCard from './TotalOrderLineChartCard.client';
+
+// assets
+import LocalMallOutlinedIcon from '@mui/icons-material/LocalMallOutlined';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+
+// types
+import PropTypes from 'prop-types';
+
+const CardWrapper = styled(MainCard)(({ theme }) => ({
+    backgroundColor: theme.palette.primary.dark,
+    color: '#fff',
+    overflow: 'hidden',
+    position: 'relative',
+    '&>div': {
+        position: 'relative',
+        zIndex: 5
+    },
+    '&:after': {
+        content: '""',
+        position: 'absolute',
+        width: 210,
+        height: 210,
+        background: theme.palette.primary[800],
+        borderRadius: '50%',
+        zIndex: 1,
+        top: -85,
+        right: -95,
+        [theme.breakpoints.down('sm')]: {
+            top: -105,
+            right: -140
+        }
+    },
+    '&:before': {
+        content: '""',
+        position: 'absolute',
+        zIndex: 1,
+        width: 210,
+        height: 210,
+        background: theme.palette.primary[800],
+        borderRadius: '50%',
+        top: -125,
+        right: -15,
+        opacity: 0.5,
+        [theme.breakpoints.down('sm')]: {
+            top: -155,
+            right: -70
+        }
+    }
+}));
+
+// ==============================|| DASHBOARD - TOTAL ORDER LINE CHART CARD ||============================== //
+
+const TotalOrderLineCard = ({ isLoading }) => {
+    const theme = useTheme();
+
+    const [timeValue, setTimeValue] = useState(false);
+    const handleChangeTime = (event, newValue) => {
+        setTimeValue(newValue);
+    };
+
+    return (
+        <>
+            {isLoading ? (
+                <SkeletonTotalOrderCard />
+            ) : (
+                <CardWrapper border={false} content={false}>
+                    <Box sx={{ p: 2.25 }}>
+                        <Grid container direction="column">
+                            <Grid item>
+                                <Grid container justifyContent="space-between">
+                                    <Grid item>
+                                        <Avatar
+                                            variant="rounded"
+                                            sx={{
+                                                ...theme.typography.commonAvatar,
+                                                ...theme.typography.largeAvatar,
+                                                backgroundColor: theme.palette.primary[800],
+                                                color: '#fff',
+                                                mt: 1
+                                            }}
+                                        >
+                                            <LocalMallOutlinedIcon fontSize="inherit" />
+                                        </Avatar>
+                                    </Grid>
+                                    <Grid item>
+                                        <Button
+                                            disableElevation
+                                            variant={timeValue ? 'contained' : 'text'}
+                                            size="small"
+                                            sx={{ color: 'inherit' }}
+                                            onClick={(e) => handleChangeTime(e, true)}
+                                        >
+                                            Month
+                                        </Button>
+                                        <Button
+                                            disableElevation
+                                            variant={!timeValue ? 'contained' : 'text'}
+                                            size="small"
+                                            sx={{ color: 'inherit' }}
+                                            onClick={(e) => handleChangeTime(e, false)}
+                                        >
+                                            Year
+                                        </Button>
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+                            <Grid item sx={{ mb: 0.75 }}>
+                                <Grid container alignItems="center">
+                                    <Grid item xs={6}>
+                                        <Grid container alignItems="center">
+                                            <Grid item>
+                                                {timeValue ? (
+                                                    <Typography
+                                                        sx={{
+                                                            fontSize: '2.125rem',
+                                                            fontWeight: 500,
+                                                            mr: 1,
+                                                            mt: 1.75,
+                                                            mb: 0.75
+                                                        }}
+                                                    >
+                                                        $108
+                                                    </Typography>
+                                                ) : (
+                                                    <Typography
+                                                        sx={{
+                                                            fontSize: '2.125rem',
+                                                            fontWeight: 500,
+                                                            mr: 1,
+                                                            mt: 1.75,
+                                                            mb: 0.75
+                                                        }}
+                                                    >
+                                                        $961
+                                                    </Typography>
+                                                )}
+                                            </Grid>
+                                            <Grid item>
+                                                <Avatar
+                                                    sx={{
+                                                        ...theme.typography.smallAvatar,
+                                                        cursor: 'pointer',
+                                                        backgroundColor: theme.palette.primary[200],
+                                                        color: theme.palette.primary.dark
+                                                    }}
+                                                >
+                                                    <ArrowDownwardIcon fontSize="inherit" sx={{ transform: 'rotate3d(1, 1, 1, 45deg)' }} />
+                                                </Avatar>
+                                            </Grid>
+                                            <Grid item xs={12}>
+                                                <Typography
+                                                    sx={{
+                                                        fontSize: '1rem',
+                                                        fontWeight: 500,
+                                                        color: theme.palette.primary[200]
+                                                    }}
+                                                >
+                                                    Total Order
+                                                </Typography>
+                                            </Grid>
+                                        </Grid>
+                                    </Grid>
+                                    <Grid item xs={6}>
+                                        <TotalOrderLineChartCard timeValue={timeValue} />
+                                    </Grid>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                    </Box>
+                </CardWrapper>
+            )}
+        </>
+    );
+};
+
+TotalOrderLineCard.propTypes = {
+    isLoading: PropTypes.bool
+};
+
+export default TotalOrderLineCard;

remix/app/components/dashboard/TotalOrderLineChartCard.client.js

@@ -0,0 +1,21 @@
+// third-party
+import Chart from 'react-apexcharts';
+
+// chart data
+import ChartDataMonth from './chart-data/total-order-month-line-chart';
+import ChartDataYear from './chart-data/total-order-year-line-chart';
+
+// types
+import PropTypes from 'prop-types';
+
+// ==============================|| DASHBOARD - TOTAL ORDER LINE CHART CARD ||============================== //
+
+const TotalOrderLineChartCard = ({ timeValue }) => {
+    return <>{timeValue ? <Chart {...ChartDataMonth} /> : <Chart {...ChartDataYear} />}</>;
+};
+
+TotalOrderLineChartCard.propTypes = {
+    timeValue: PropTypes.bool
+};
+
+export default TotalOrderLineChartCard;

remix/app/components/dashboard/chart-data/bajaj-area-chart.js

@@ -0,0 +1,42 @@
+// ===========================|| DASHBOARD - BAJAJ AREA CHART ||=========================== //
+
+const chartData = {
+    type: 'area',
+    height: 95,
+    options: {
+        chart: {
+            id: 'support-chart',
+            sparkline: {
+                enabled: true
+            }
+        },
+        dataLabels: {
+            enabled: false
+        },
+        stroke: {
+            curve: 'smooth',
+            width: 1
+        },
+        tooltip: {
+            fixed: {
+                enabled: false
+            },
+            x: {
+                show: false
+            },
+            y: {
+                title: 'Ticket '
+            },
+            marker: {
+                show: false
+            }
+        }
+    },
+    series: [
+        {
+            data: [0, 15, 10, 50, 30, 40, 25]
+        }
+    ]
+};
+
+export default chartData;

remix/app/components/dashboard/chart-data/total-growth-bar-chart.js

@@ -0,0 +1,87 @@
+// ===========================|| DASHBOARD - TOTAL GROWTH BAR CHART ||=========================== //
+
+const chartData = {
+    height: 480,
+    type: 'bar',
+    options: {
+        chart: {
+            id: 'bar-chart',
+            stacked: true,
+            toolbar: {
+                show: true
+            },
+            zoom: {
+                enabled: true
+            }
+        },
+        responsive: [
+            {
+                breakpoint: 480,
+                options: {
+                    legend: {
+                        position: 'bottom',
+                        offsetX: -10,
+                        offsetY: 0
+                    }
+                }
+            }
+        ],
+        plotOptions: {
+            bar: {
+                horizontal: false,
+                columnWidth: '50%'
+            }
+        },
+        xaxis: {
+            type: 'category',
+            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+        },
+        legend: {
+            show: true,
+            fontSize: '14px',
+            fontFamily: `'Roboto', sans-serif`,
+            position: 'bottom',
+            offsetX: 20,
+            labels: {
+                useSeriesColors: false
+            },
+            markers: {
+                width: 16,
+                height: 16,
+                radius: 5
+            },
+            itemMargin: {
+                horizontal: 15,
+                vertical: 8
+            }
+        },
+        fill: {
+            type: 'solid'
+        },
+        dataLabels: {
+            enabled: false
+        },
+        grid: {
+            show: true
+        }
+    },
+    series: [
+        {
+            name: 'Investment',
+            data: [35, 125, 35, 35, 35, 80, 35, 20, 35, 45, 15, 75]
+        },
+        {
+            name: 'Loss',
+            data: [35, 15, 15, 35, 65, 40, 80, 25, 15, 85, 25, 75]
+        },
+        {
+            name: 'Profit',
+            data: [35, 145, 35, 35, 20, 105, 100, 10, 65, 45, 30, 10]
+        },
+        {
+            name: 'Maintenance',
+            data: [0, 0, 75, 0, 0, 115, 0, 0, 0, 0, 150, 0]
+        }
+    ]
+};
+export default chartData;

remix/app/components/dashboard/chart-data/total-order-month-line-chart.js

@@ -0,0 +1,52 @@
+// ===========================|| DASHBOARD - TOTAL ORDER MONTH CHART ||=========================== //
+
+const chartData = {
+    type: 'line',
+    height: 90,
+    options: {
+        chart: {
+            sparkline: {
+                enabled: true
+            }
+        },
+        dataLabels: {
+            enabled: false
+        },
+        colors: ['#fff'],
+        fill: {
+            type: 'solid',
+            opacity: 1
+        },
+        stroke: {
+            curve: 'smooth',
+            width: 3
+        },
+        yaxis: {
+            min: 0,
+            max: 100
+        },
+        tooltip: {
+            theme: 'dark',
+            fixed: {
+                enabled: false
+            },
+            x: {
+                show: false
+            },
+            y: {
+                title: 'Total Order'
+            },
+            marker: {
+                show: false
+            }
+        }
+    },
+    series: [
+        {
+            name: 'series1',
+            data: [45, 66, 41, 89, 25, 44, 9, 54]
+        }
+    ]
+};
+
+export default chartData;

remix/app/components/dashboard/chart-data/total-order-year-line-chart.js

@@ -0,0 +1,52 @@
+// ===========================|| DASHBOARD - TOTAL ORDER YEAR CHART ||=========================== //
+
+const chartData = {
+    type: 'line',
+    height: 90,
+    options: {
+        chart: {
+            sparkline: {
+                enabled: true
+            }
+        },
+        dataLabels: {
+            enabled: false
+        },
+        colors: ['#fff'],
+        fill: {
+            type: 'solid',
+            opacity: 1
+        },
+        stroke: {
+            curve: 'smooth',
+            width: 3
+        },
+        yaxis: {
+            min: 0,
+            max: 100
+        },
+        tooltip: {
+            theme: 'dark',
+            fixed: {
+                enabled: false
+            },
+            x: {
+                show: false
+            },
+            y: {
+                title: 'Total Order'
+            },
+            marker: {
+                show: false
+            }
+        }
+    },
+    series: [
+        {
+            name: 'series1',
+            data: [35, 44, 9, 54, 45, 66, 41, 69]
+        }
+    ]
+};
+
+export default chartData;

remix/app/entry.client.js

@@ -0,0 +1,22 @@
+import { RemixBrowser } from '@remix-run/react';
+import { startTransition, StrictMode } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+
+function hydrate() {
+    startTransition(() => {
+        hydrateRoot(
+            document,
+            <StrictMode>
+                <RemixBrowser />
+            </StrictMode>
+        );
+    });
+}
+
+if (typeof requestIdleCallback === 'function') {
+    requestIdleCallback(hydrate);
+} else {
+    // Safari doesn't support requestIdleCallback
+    // https://caniuse.com/requestidlecallback
+    setTimeout(hydrate, 1);
+}

remix/app/entry.server.js

@@ -0,0 +1,30 @@
+import { renderToString } from 'react-dom/server';
+import { RemixServer } from '@remix-run/react';
+
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+import createEmotionServer from '@emotion/server/create-instance';
+
+const key = 'custom';
+const cache = createCache({ key });
+const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache);
+
+export default function handleRequest(request, responseStatusCode, responseHeaders, remixContext) {
+    let markup = renderToString(
+        <CacheProvider value={cache}>
+            <RemixServer context={remixContext} url={request.url} />
+        </CacheProvider>
+    );
+
+    const chunks = extractCriticalToChunks(markup);
+    const styles = constructStyleTagsFromChunks(chunks);
+
+    markup = markup.replace('__STYLES__', styles);
+
+    responseHeaders.set('Content-Type', 'text/html');
+
+    return new Response('<!DOCTYPE html>' + markup, {
+        status: responseStatusCode,
+        headers: responseHeaders
+    });
+}

remix/app/error/errorPage.js

@@ -0,0 +1,124 @@
+import { useNavigate } from '@remix-run/react';
+
+// material-ui
+import { useTheme, styled } from '@mui/material/styles';
+import { Button, Card, CardContent, CardMedia, Grid, Typography } from '@mui/material';
+
+// project imports
+import AnimateButton from 'ui-component/extended/AnimateButton';
+import { gridSpacing } from 'store/constant';
+
+// assets
+import HomeTwoToneIcon from '@mui/icons-material/HomeTwoTone';
+
+import imageBackground from 'assets/images/maintenance/img-error-bg.svg';
+import imageDarkBackground from 'assets/images/maintenance/img-error-bg-dark.svg';
+import imageBlue from 'assets/images/maintenance/img-error-blue.svg';
+import imageText from 'assets/images/maintenance/img-error-text.svg';
+import imagePurple from 'assets/images/maintenance/img-error-purple.svg';
+
+// styles
+const CardMediaWrapper = styled('div')({
+    maxWidth: 720,
+    margin: '0 auto',
+    position: 'relative'
+});
+
+const ErrorWrapper = styled('div')({
+    maxWidth: 350,
+    margin: '0 auto',
+    textAlign: 'center'
+});
+
+const ErrorCard = styled(Card)({
+    minHeight: '100vh',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+});
+
+const CardMediaBlock = styled('img')({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    animation: '3s bounce ease-in-out infinite'
+});
+
+const CardMediaBlue = styled('img')({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    animation: '15s wings ease-in-out infinite'
+});
+
+const CardMediaPurple = styled('img')({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    animation: '12s wings ease-in-out infinite'
+});
+
+// ==============================|| ERROR PAGE ||============================== //
+
+const ErrorPage = () => {
+    const theme = useTheme();
+    const navigate = useNavigate();
+
+    return (
+        <ErrorCard>
+            <CardContent>
+                <Grid container justifyContent="center" spacing={gridSpacing}>
+                    <Grid item xs={12}>
+                        <CardMediaWrapper>
+                            <CardMedia
+                                component="img"
+                                image={theme.palette.mode === 'dark' ? imageDarkBackground : imageBackground}
+                                title="Slider5 image"
+                            />
+                            <CardMediaBlock src={imageText} title="Slider 1 image" />
+                            <CardMediaBlue src={imageBlue} title="Slider 2 image" />
+                            <CardMediaPurple src={imagePurple} title="Slider 3 image" />
+                        </CardMediaWrapper>
+                    </Grid>
+                    <Grid item xs={12}>
+                        <ErrorWrapper>
+                            <Grid container spacing={gridSpacing}>
+                                <Grid item xs={12}>
+                                    <Typography variant="h1" component="div">
+                                        Something is wrong
+                                    </Typography>
+                                </Grid>
+                                <Grid item xs={12}>
+                                    <Typography variant="body2">
+                                        The page you are looking was moved, removed, renamed, or might never exist!{' '}
+                                    </Typography>
+                                </Grid>
+                                <Grid item xs={12}>
+                                    <AnimateButton>
+                                        <Button
+                                            variant="contained"
+                                            size="large"
+                                            // component={Link}
+                                            // to='/'
+                                            onClick={() => {
+                                                navigate(-1);
+                                            }}
+                                        >
+                                            <HomeTwoToneIcon sx={{ fontSize: '1.3rem', mr: 0.75 }} /> Home
+                                        </Button>
+                                        {/* <Link to='/'>BACK TO HOME</Link> */}
+                                    </AnimateButton>
+                                </Grid>
+                            </Grid>
+                        </ErrorWrapper>
+                    </Grid>
+                </Grid>
+            </CardContent>
+        </ErrorCard>
+    );
+};
+
+export default ErrorPage;

remix/app/error/index.js

@@ -0,0 +1,26 @@
+import { useSelector } from 'react-redux';
+
+// material-ui
+import { CssBaseline, StyledEngineProvider } from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
+
+// project imports
+import NavigationScroll from 'layout/NavigationScroll';
+import theme from 'themes';
+import ErrorPage from './errorPage';
+
+const Error = () => {
+    const customization = useSelector((state) => state.customization);
+    return (
+        <StyledEngineProvider injectfirst>
+            <ThemeProvider theme={theme(customization)}>
+                <CssBaseline />
+                <NavigationScroll>
+                    <ErrorPage />
+                </NavigationScroll>
+            </ThemeProvider>
+        </StyledEngineProvider>
+    );
+};
+
+export default Error;

remix/app/hooks/useScriptRef.js

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+
+// ==============================|| ELEMENT REFERENCE HOOKS  ||============================== //
+
+const useScriptRef = () => {
+    const scripted = useRef(true);
+
+    useEffect(
+        () => () => {
+            scripted.current = false;
+        },
+        []
+    );
+
+    return scripted;
+};
+
+export default useScriptRef;